add alert warning for configure coding agents

src/components/ai-client-config/AiConfigCodeBlock.tsx

@@ -1,23 +1,53 @@
 "use client";
 
 import CopyTextBox from "@app/components/CopyTextBox";
-import type { AiConfigBlock } from "@app/lib/aiClientConfig";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import {
+    aiConfigBlockHasPlaceholders,
+    type AiConfigBlock
+} from "@app/lib/aiClientConfig";
 import { cn } from "@app/lib/cn";
+import { AlertCircle } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type AiConfigCodeBlockProps = {
+    block: AiConfigBlock;
+    step?: number;
+    hideLabel?: boolean;
+};
+
+export function AiConfigCodeBlock({
+    block,
+    step,
+    hideLabel = false
+}: AiConfigCodeBlockProps) {
+    const t = useTranslations();
+    const label =
+        step != null
+            ? `${t("aiClientConfigStep", { number: step })}: ${block.label}`
+            : block.label;
 
-export function AiConfigCodeBlock({ block }: { block: AiConfigBlock }) {
     return (
         <div className="min-w-0 space-y-1.5">
-            <p className="font-mono text-xs text-muted-foreground">
-                {block.label}
-            </p>
+            {!hideLabel ? (
+                <p className="font-mono text-xs text-muted-foreground">
+                    {label}
+                </p>
+            ) : null}
             <div
                 className={cn(
                     "min-w-0",
-                    block.kind === "steps"
-                        ? "[&_pre]:text-sm"
-                        : "[&_pre]:text-xs [&_code]:font-mono"
+                    block.kind !== "steps" && "[&_code]:font-mono"
                 )}
             >
+                {aiConfigBlockHasPlaceholders(block) ? (
+                    <Alert variant="neutral" className="mb-3">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertDescription>
+                            {t("aiClientConfigPlaceholderWarning")}
+                        </AlertDescription>
+                    </Alert>
+                ) : null}
                 <CopyTextBox
                     text={block.displayText}
                     wrapText={block.kind === "steps"}