feat: show validation warning next to View Mode / Valid JSON badge

src/componets/content/ConfigTemplate.tsx

@@ -14,6 +14,13 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
   const [originalContent, setOriginalContent] = useState(config.template.content);
   const [jsonError, setJsonError] = useState<string | null>(null);
 
+  // Validate placeholders for warning
+  const missingPlaceholders = config.validatePlaceholders();
+  const hasValidationWarnings = missingPlaceholders.length > 0;
+  const warningMessage = hasValidationWarnings 
+    ? `Missing params: ${missingPlaceholders.join(', ')}`
+    : '';
+
   // Sync draft when config changes (only in view mode)
   useEffect(() => {
     if (mode === 'view') {
@@ -137,9 +144,15 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
     <div className="config-template-editor animate-fade-in">
       {mode === 'view' ? (
         <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
+          <div className="flex items-center justify-between flex-wrap gap-3">
+            <div className="flex items-center gap-2 flex-wrap">
               <Badge variant="success">View Mode</Badge>
+              {hasValidationWarnings && (
+                <div className="flex items-center gap-1.5 text-sm text-amber-600 bg-amber-50 px-2.5 py-1 rounded-md">
+                  <span className="font-medium">Warning:</span>
+                  <span>{warningMessage}</span>
+                </div>
+              )}
             </div>
             <Button
               variant="primary"
@@ -150,7 +163,7 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
               Edit Template
             </Button>
           </div>
-          
+
           <CodeBlock code={config.template.content || '{}'} language="json" maxHeight="500px" />
         </div>
       ) : (
@@ -165,7 +178,7 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
             >
               Save Changes
             </Button>
-            
+
             <Button
               variant="secondary"
               size="sm"
@@ -188,6 +201,13 @@ export function ConfigTemplateEditor({ config, onSaved }: ConfigTemplateEditorPr
                 </>
               )}
             </Badge>
+
+            {hasValidationWarnings && isValidJson && (
+              <div className="flex items-center gap-1.5 text-sm text-amber-600 bg-amber-50 px-2.5 py-1 rounded-md">
+                <span className="font-medium">Warning:</span>
+                <span>{warningMessage}</span>
+              </div>
+            )}
           </div>
 
           {jsonError && (

src/componets/content/Content.tsx

@@ -17,9 +17,6 @@ export function Content({ config, env, onTemplateSaved }: ContentProps) {
   // Validate placeholders for warning badge
   const missingPlaceholders = config.validatePlaceholders();
   const hasValidationWarnings = missingPlaceholders.length > 0;
-  const warningMessage = hasValidationWarnings 
-    ? `Missing params: ${missingPlaceholders.join(', ')}`
-    : '';
 
   const tabs: Array<{ id: string; label: string; badge?: string | number; badgeVariant?: 'warning' | 'danger' }> = [
     { id: 'env', label: 'Env' },
@@ -36,15 +33,7 @@ export function Content({ config, env, onTemplateSaved }: ContentProps) {
   return (
     <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden h-full flex flex-col">
       <div className="flex-shrink-0">
-        <div className="flex items-center justify-between border-b border-slate-200 px-4 py-2">
-          <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
-          {activeTab === 'template' && hasValidationWarnings && (
-            <div className="flex items-center gap-2 text-sm text-amber-600 bg-amber-50 px-3 py-1.5 rounded-lg">
-              <span className="font-medium">Warning:</span>
-              <span>{warningMessage}</span>
-            </div>
-          )}
-        </div>
+        <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
       </div>
 
       <div className="flex-1 overflow-y-auto p-4 min-h-0">