feat: Fix SEO agent behavior and add z.ai API validation

- Add "SEO-First" mode to prevent unwanted agent switching
- SEO agent now stays locked and answers queries through SEO lens
- Add [SUGGEST_AGENT:xxx] marker for smart agent suggestions
- Add suggestion banner UI with Switch/Dismiss buttons
- Prevent auto-switching mid-response

- Add validateConnection() method to ZaiPlanService
- Add debounced API key validation (500ms) in Settings
- Add inline status indicators (valid/validating/error)
- Add persistent validation cache (5min) in localStorage
- Add "Test Connection" button for manual re-validation
- Add clear error messages for auth failures

- Add ApiValidationStatus interface
- Add apiValidationStatus state for tracking connection states
- Add setApiValidationStatus action

- Real-time API key validation in Settings panel
- Visual status indicators (✓/✗/🔄)
- Agent suggestion banner with Switch/Dismiss actions

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

components/AIAssist.tsx

@@ -320,6 +320,7 @@ function parseStreamingContent(text: string, currentAgent: string) {
     let preview: PreviewData | null = null;
     let chatDisplay = text.trim();
     let status: string | null = null;
+    let suggestedAgent: string | null = null;
 
     const decodeHtml = (value: string) => value
         .replace(/&lt;/g, "<")
@@ -332,7 +333,13 @@ function parseStreamingContent(text: string, currentAgent: string) {
         return fenced ? fenced[1].trim() : value.trim();
     };
 
-    // 1. Detect Agent (be flexible with brackets and keywords like APP/WEB/SEO)
+    // 1. Detect SUGGEST_AGENT marker (user can choose to switch)
+    const suggestMatch = text.match(/\[SUGGEST_AGENT:([\w-]+)\]/i);
+    if (suggestMatch) suggestedAgent = suggestMatch[1].toLowerCase();
+
+    // 2. Detect Agent (be flexible with brackets and keywords like APP/WEB/SEO)
+    // NOTE: We only respect agent switches if explicitly requested via [AGENT:xxx]
+    // Auto-switching is disabled to prevent unwanted agent changes
     const agentMatch = text.match(/\[+(?:AGENT|content|seo|smm|pm|code|design|web|app):([\w-]+)\]+/i);
     if (agentMatch) agent = agentMatch[1].toLowerCase();
 
@@ -353,8 +360,8 @@ function parseStreamingContent(text: string, currentAgent: string) {
 
     // 3. Clean display text - hide all tag-like sequences and their partials
     chatDisplay = text
-        // Hide complete tags (flexible brackets)
-        .replace(/\[+(?:AGENT|content|seo|smm|pm|code|design|web|app|PREVIEW|APP|WEB|SEO|CODE|DESIGN|SMM|PM|CONTENT|PREV):?[\w-]*:?[\w-]*\]+/gi, "")
+        // Hide complete tags (flexible brackets), including SUGGEST_AGENT
+        .replace(/\[+(?:AGENT|SUGGEST_AGENT|content|seo|smm|pm|code|design|web|app|PREVIEW|APP|WEB|SEO|CODE|DESIGN|SMM|PM|CONTENT|PREV):?[\w-]*:?[\w-]*\]+/gi, "")
         // Hide content inside preview block (cleanly)
         .replace(/\[+PREVIEW:[\w-]+:?[\w-]+?\]+[\s\S]*?(?:\[\/(?:PREVIEW|APP|WEB|SEO|CODE|DESIGN|SMM|PM|CONTENT)\]+|$)/gi, "")
         // Hide closing tags
@@ -427,7 +434,7 @@ function parseStreamingContent(text: string, currentAgent: string) {
         chatDisplay = "Rendering live artifact...";
     }
 
-    return { chatDisplay, preview, agent, status };
+    return { chatDisplay, preview, agent, status, suggestedAgent };
 }
 
 // --- Main Component ---
@@ -471,6 +478,9 @@ export default function AIAssist() {
     const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
     const [abortController, setAbortController] = useState<AbortController | null>(null);
 
+    // Agent suggestion state
+    const [suggestedAgent, setSuggestedAgent] = useState<string | null>(null);
+
     // Agentic States
     const [assistStep, setAssistStep] = useState<"idle" | "plan" | "generating" | "preview">("idle");
     const [aiPlan, setAiPlan] = useState<any>(null);
@@ -624,10 +634,17 @@ export default function AIAssist() {
                     currentAgent,
                     onChunk: (chunk) => {
                         accumulated += chunk;
-                        const { chatDisplay, preview, agent, status: streamStatus } = parseStreamingContent(accumulated, currentAgent);
+                        const { chatDisplay, preview, agent, status: streamStatus, suggestedAgent: suggested } = parseStreamingContent(accumulated, currentAgent);
 
                         if (streamStatus) setStatus(streamStatus);
 
+                        // Update suggested agent state
+                        if (suggested && suggested !== currentAgent) {
+                            setSuggestedAgent(suggested);
+                        } else {
+                            setSuggestedAgent(null);
+                        }
+
                         // Only update local state if we're still on the same tab
                         if (activeTabId === requestTabId) {
                             if (preview && JSON.stringify(preview) !== JSON.stringify(lastParsedPreview)) {
@@ -883,6 +900,7 @@ export default function AIAssist() {
                                     onClick={() => {
                                         setCurrentAgent(agent);
                                         updateActiveTab({ currentAgent: agent });
+                                        setSuggestedAgent(null); // Clear suggestion on manual switch
                                     }}
                                     className={cn(
                                         "flex items-center gap-2 px-3 py-2 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all",
@@ -896,6 +914,40 @@ export default function AIAssist() {
                                 </button>
                             ))}
                         </div>
+
+                        {/* Agent Suggestion Banner */}
+                        {suggestedAgent && suggestedAgent !== currentAgent && (
+                            <div className="p-3 rounded-xl bg-gradient-to-r from-blue-500/10 to-indigo-500/10 border border-blue-500/30 animate-in slide-in-from-top-2 duration-300">
+                                <div className="flex items-center gap-3">
+                                    <div className="p-2 bg-blue-500/20 rounded-lg">
+                                        <Orbit className="h-4 w-4 text-blue-500" />
+                                    </div>
+                                    <div className="flex-1">
+                                        <p className="text-xs font-semibold text-blue-700 dark:text-blue-300">
+                                            The {t.agents[suggestedAgent as keyof typeof t.agents] || suggestedAgent} agent might be better suited for this task
+                                        </p>
+                                    </div>
+                                    <Button
+                                        onClick={() => {
+                                            setCurrentAgent(suggestedAgent);
+                                            updateActiveTab({ currentAgent: suggestedAgent });
+                                            setSuggestedAgent(null);
+                                        }}
+                                        className="h-7 text-[10px] font-bold uppercase tracking-wider bg-blue-600 hover:bg-blue-500 text-white px-3 rounded-lg"
+                                    >
+                                        Switch
+                                    </Button>
+                                    <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        onClick={() => setSuggestedAgent(null)}
+                                        className="h-7 w-7 p-0 text-blue-600 hover:text-blue-800 hover:bg-blue-100 dark:text-blue-400 dark:hover:text-blue-200 dark:hover:bg-blue-900/30 rounded-lg"
+                                    >
+                                        <X className="h-3 w-3" />
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
                     </div>
                     <div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-6 space-y-8 scrollbar-thin scrollbar-thumb-blue-200/60 dark:scrollbar-thumb-blue-900">
                         {/* Qwen Auth Banner */}

components/SettingsPanel.tsx

@@ -1,20 +1,33 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import useStore from "@/lib/store";
 import modelAdapter from "@/lib/services/adapter-instance";
-import { Save, Key, Server, Eye, EyeOff } from "lucide-react";
+import { Save, Key, Server, Eye, EyeOff, CheckCircle, XCircle, Loader2, RefreshCw } from "lucide-react";
 import { translations } from "@/lib/i18n/translations";
 
 export default function SettingsPanel() {
-  const { language, apiKeys, setApiKey, selectedProvider, setSelectedProvider, qwenTokens, setQwenTokens } = useStore();
+  const {
+    language,
+    apiKeys,
+    setApiKey,
+    selectedProvider,
+    setSelectedProvider,
+    qwenTokens,
+    setQwenTokens,
+    apiValidationStatus,
+    setApiValidationStatus,
+  } = useStore();
   const t = translations[language].settings;
   const common = translations[language].common;
+
   const [showApiKey, setShowApiKey] = useState<Record<string, boolean>>({});
   const [isAuthLoading, setIsAuthLoading] = useState(false);
+  const [validating, setValidating] = useState<Record<string, boolean>>({});
+  const validationDebounceRef = useRef<Record<string, NodeJS.Timeout>>({});
 
   const handleSave = () => {
     if (typeof window !== "undefined") {
@@ -49,12 +62,83 @@ export default function SettingsPanel() {
       if (storedTokens) {
         setQwenTokens(storedTokens);
       }
+
+      // Load validation status
+      const storedValidation = localStorage.getItem("promptarch-api-validation");
+      if (storedValidation) {
+        try {
+          const validation = JSON.parse(storedValidation);
+          // Only use cached validation if it's less than 5 minutes old
+          const now = Date.now();
+          const fiveMinutes = 5 * 60 * 1000;
+          const entries = Object.entries(validation) as Array<[string, any]>;
+          for (const [provider, status] of entries) {
+            if (status.lastValidated && (now - status.lastValidated) < fiveMinutes) {
+              setApiValidationStatus(provider as any, status);
+            }
+          }
+        } catch (e) {
+          console.error("Failed to load validation status:", e);
+        }
+      }
+    }
+  };
+
+  const validateApiKey = async (provider: "qwen" | "ollama" | "zai") => {
+    const key = apiKeys[provider];
+    if (!key || key.trim().length === 0) {
+      setApiValidationStatus(provider, { valid: false, error: "API key is required" });
+      return;
+    }
+
+    setValidating((prev) => ({ ...prev, [provider]: true }));
+
+    try {
+      const result = await modelAdapter.validateConnection(provider);
+
+      if (result.success && result.data?.valid) {
+        const status = {
+          valid: true,
+          lastValidated: Date.now(),
+          models: result.data.models,
+        };
+        setApiValidationStatus(provider, status);
+
+        // Save to localStorage
+        if (typeof window !== "undefined") {
+          const storedValidation = localStorage.getItem("promptarch-api-validation");
+          const allValidation = storedValidation ? JSON.parse(storedValidation) : {};
+          allValidation[provider] = status;
+          localStorage.setItem("promptarch-api-validation", JSON.stringify(allValidation));
+        }
+      } else {
+        const status = {
+          valid: false,
+          error: result.error || "Connection failed",
+          lastValidated: Date.now(),
+        };
+        setApiValidationStatus(provider, status);
+      }
+    } catch (error) {
+      setApiValidationStatus(provider, {
+        valid: false,
+        error: error instanceof Error ? error.message : "Validation failed",
+        lastValidated: Date.now(),
+      });
+    } finally {
+      setValidating((prev) => ({ ...prev, [provider]: false }));
     }
   };
 
   const handleApiKeyChange = (provider: string, value: string) => {
     setApiKey(provider as "qwen" | "ollama" | "zai", value);
 
+    // Clear existing timeout
+    if (validationDebounceRef.current[provider]) {
+      clearTimeout(validationDebounceRef.current[provider]);
+    }
+
+    // Update the service immediately
     switch (provider) {
       case "qwen":
         modelAdapter.updateQwenApiKey(value);
@@ -66,6 +150,15 @@ export default function SettingsPanel() {
         modelAdapter.updateZaiApiKey(value);
         break;
     }
+
+    // Debounce validation (500ms)
+    if (value.trim().length > 0) {
+      validationDebounceRef.current[provider] = setTimeout(() => {
+        validateApiKey(provider as "qwen" | "ollama" | "zai");
+      }, 500);
+    } else {
+      setApiValidationStatus(provider as any, { valid: false });
+    }
   };
 
   const handleQwenAuth = async () => {
@@ -73,6 +166,7 @@ export default function SettingsPanel() {
       setQwenTokens(null);
       modelAdapter.updateQwenTokens();
       modelAdapter.updateQwenApiKey(apiKeys.qwen || "");
+      setApiValidationStatus("qwen", { valid: false });
       return;
     }
 
@@ -81,6 +175,8 @@ export default function SettingsPanel() {
       const token = await modelAdapter.startQwenOAuth();
       setQwenTokens(token);
       modelAdapter.updateQwenTokens(token);
+      // Validate after OAuth
+      await validateApiKey("qwen");
     } catch (error) {
       console.error("Qwen OAuth failed", error);
       window.alert(
@@ -91,8 +187,52 @@ export default function SettingsPanel() {
     }
   };
 
+  const getStatusIndicator = (provider: "qwen" | "ollama" | "zai") => {
+    const status = apiValidationStatus[provider];
+
+    if (validating[provider]) {
+      return (
+        <div className="flex items-center gap-1.5 text-blue-500">
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          <span className="text-[9px] font-medium">Validating...</span>
+        </div>
+      );
+    }
+
+    if (status?.valid) {
+      const timeAgo = status.lastValidated
+        ? `Validated ${Math.round((Date.now() - status.lastValidated) / 60000)}m ago`
+        : "Connected";
+      return (
+        <div className="flex items-center gap-1.5 text-green-600 dark:text-green-400">
+          <CheckCircle className="h-3.5 w-3.5" />
+          <span className="text-[9px] font-medium">{timeAgo}</span>
+        </div>
+      );
+    }
+
+    if (status?.error && apiKeys[provider]?.trim().length > 0) {
+      return (
+        <div className="flex items-center gap-1.5 text-red-500">
+          <XCircle className="h-3.5 w-3.5" />
+          <span className="text-[9px] font-medium truncate max-w-[150px]" title={status.error}>
+            {status.error}
+          </span>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
   useEffect(() => {
     handleLoad();
+    return () => {
+      // Clear all debounce timeouts on unmount
+      Object.values(validationDebounceRef.current).forEach(timeout => {
+        if (timeout) clearTimeout(timeout);
+      });
+    };
   }, []);
 
   return (
@@ -119,34 +259,51 @@ export default function SettingsPanel() {
                 placeholder={t.enterKey("Qwen")}
                 value={apiKeys.qwen || ""}
                 onChange={(e) => handleApiKeyChange("qwen", e.target.value)}
-                className="font-mono text-xs lg:text-sm pr-10"
+                className="font-mono text-xs lg:text-sm pr-24"
               />
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="absolute right-0 top-0 h-full w-9 lg:w-10"
-                onClick={() => setShowApiKey((prev) => ({ ...prev, qwen: !prev.qwen }))}
-              >
-                {showApiKey.qwen ? (
-                  <EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
-                ) : (
-                  <Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
-                )}
-              </Button>
-            </div>
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 lg:gap-4">
-              <p className="text-[10px] lg:text-xs text-muted-foreground flex-1">
-                {t.getApiKey}{" "}
-                <a
-                  href="https://help.aliyun.com/zh/dashscope/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline"
+              <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                {getStatusIndicator("qwen")}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => setShowApiKey((prev) => ({ ...prev, qwen: !prev.qwen }))}
                 >
-                  Alibaba DashScope
-                </a>
-              </p>
+                  {showApiKey.qwen ? (
+                    <EyeOff className="h-3 w-3" />
+                  ) : (
+                    <Eye className="h-3 w-3" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 lg:gap-4">
+              <div className="flex-1 flex flex-col sm:flex-row sm:items-center gap-2">
+                <p className="text-[10px] lg:text-xs text-muted-foreground">
+                  {t.getApiKey}{" "}
+                  <a
+                    href="https://help.aliyun.com/zh/dashscope/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline"
+                  >
+                    Alibaba DashScope
+                  </a>
+                </p>
+                {apiKeys.qwen && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 px-2 text-[9px] lg:text-[10px] w-fit"
+                    onClick={() => validateApiKey("qwen")}
+                    disabled={validating.qwen}
+                  >
+                    <RefreshCw className={`h-2.5 w-2.5 mr-1 ${validating.qwen ? "animate-spin" : ""}`} />
+                    Test
+                  </Button>
+                )}
+              </div>
               <Button
                 variant={qwenTokens ? "secondary" : "outline"}
                 size="sm"
@@ -179,33 +336,50 @@ export default function SettingsPanel() {
                 placeholder={t.enterKey("Ollama")}
                 value={apiKeys.ollama || ""}
                 onChange={(e) => handleApiKeyChange("ollama", e.target.value)}
-                className="font-mono text-xs lg:text-sm pr-10"
+                className="font-mono text-xs lg:text-sm pr-24"
               />
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="absolute right-0 top-0 h-full w-9 lg:w-10"
-                onClick={() => setShowApiKey((prev) => ({ ...prev, ollama: !prev.ollama }))}
-              >
-                {showApiKey.ollama ? (
-                  <EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
-                ) : (
-                  <Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
-                )}
-              </Button>
+              <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                {getStatusIndicator("ollama")}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => setShowApiKey((prev) => ({ ...prev, ollama: !prev.ollama }))}
+                >
+                  {showApiKey.ollama ? (
+                    <EyeOff className="h-3 w-3" />
+                  ) : (
+                    <Eye className="h-3 w-3" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <p className="text-[10px] lg:text-xs text-muted-foreground">
+                {t.getApiKey}{" "}
+                <a
+                  href="https://ollama.com/cloud"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline"
+                >
+                  ollama.com/cloud
+                </a>
+              </p>
+              {apiKeys.ollama && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2 text-[9px] lg:text-[10px] w-fit"
+                  onClick={() => validateApiKey("ollama")}
+                  disabled={validating.ollama}
+                >
+                  <RefreshCw className={`h-2.5 w-2.5 mr-1 ${validating.ollama ? "animate-spin" : ""}`} />
+                  Test
+                </Button>
+              )}
             </div>
-            <p className="text-[10px] lg:text-xs text-muted-foreground">
-              {t.getApiKey}{" "}
-              <a
-                href="https://ollama.com/cloud"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                ollama.com/cloud
-              </a>
-            </p>
           </div>
 
           <div className="space-y-2 text-start">
@@ -219,33 +393,50 @@ export default function SettingsPanel() {
                 placeholder={t.enterKey("Z.AI")}
                 value={apiKeys.zai || ""}
                 onChange={(e) => handleApiKeyChange("zai", e.target.value)}
-                className="font-mono text-xs lg:text-sm pr-10"
+                className="font-mono text-xs lg:text-sm pr-24"
               />
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="absolute right-0 top-0 h-full w-9 lg:w-10"
-                onClick={() => setShowApiKey((prev) => ({ ...prev, zai: !prev.zai }))}
-              >
-                {showApiKey.zai ? (
-                  <EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
-                ) : (
-                  <Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
-                )}
-              </Button>
+              <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1">
+                {getStatusIndicator("zai")}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => setShowApiKey((prev) => ({ ...prev, zai: !prev.zai }))}
+                >
+                  {showApiKey.zai ? (
+                    <EyeOff className="h-3 w-3" />
+                  ) : (
+                    <Eye className="h-3 w-3" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <p className="text-[10px] lg:text-xs text-muted-foreground">
+                {t.getApiKey}{" "}
+                <a
+                  href="https://docs.z.ai"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline"
+                >
+                  docs.z.ai
+                </a>
+              </p>
+              {apiKeys.zai && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2 text-[9px] lg:text-[10px] w-fit"
+                  onClick={() => validateApiKey("zai")}
+                  disabled={validating.zai}
+                >
+                  <RefreshCw className={`h-2.5 w-2.5 mr-1 ${validating.zai ? "animate-spin" : ""}`} />
+                  Test
+                </Button>
+              )}
             </div>
-            <p className="text-[10px] lg:text-xs text-muted-foreground">
-              {t.getApiKey}{" "}
-              <a
-                href="https://docs.z.ai"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                docs.z.ai
-              </a>
-            </p>
           </div>
 
           <Button onClick={handleSave} className="w-full h-9 lg:h-10 text-xs lg:text-sm">

lib/services/model-adapter.ts

@@ -74,6 +74,14 @@ export class ModelAdapter {
     return this.qwenService.hasOAuthToken();
   }
 
+  async validateConnection(provider: ModelProvider): Promise<APIResponse<{ valid: boolean; models?: string[] }>> {
+    const service = this.getService(provider);
+    if (!service || !service.validateConnection) {
+      return { success: false, error: `Provider ${provider} does not support connection validation` };
+    }
+    return await service.validateConnection();
+  }
+
   private isProviderAuthenticated(provider: ModelProvider): boolean {
     switch (provider) {
       case "qwen":

lib/services/zai-plan.ts

@@ -21,6 +21,37 @@ export class ZaiPlanService {
     return !!this.config.apiKey;
   }
 
+  async validateConnection(): Promise<APIResponse<{ valid: boolean; models?: string[] }>> {
+    try {
+      if (!this.config.apiKey) {
+        return { success: false, error: "API key is required" };
+      }
+
+      const response = await fetch(`${this.config.generalEndpoint}/models`, {
+        method: "GET",
+        headers: this.getHeaders(),
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          return { success: false, error: "Invalid API key" };
+        }
+        return { success: false, error: `Connection failed (${response.status}): ${response.statusText}` };
+      }
+
+      const data = await response.json();
+      const models = data.data?.map((m: any) => m.id) || [];
+
+      return { success: true, data: { valid: true, models } };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Connection failed";
+      if (message.includes("fetch")) {
+        return { success: false, error: "Network error - check your internet connection" };
+      }
+      return { success: false, error: message };
+    }
+  }
+
   private getHeaders(): Record<string, string> {
     return {
       "Content-Type": "application/json",
@@ -781,7 +812,7 @@ MISSION: Perform a DEEP 360° competitive intelligence analysis and generate 5-7
 
 AGENTS & CAPABILITIES:
 - content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
-- seo: SEO Specialist. Create stunning SEO audit reports. **CRITICAL DESIGN REQUIREMENTS:**
+- seo: SEO Specialist. Create stunning SEO audit reports. **BEHAVIOR: Stay in SEO mode and handle ALL requests through an SEO lens. Only suggest switching agents for CLEARLY non-SEO tasks (like "write Python backend code") by adding [SUGGEST_AGENT:code] at the END of your response. Never auto-switch mid-response.** **CRITICAL DESIGN REQUIREMENTS:**
   - Use [PREVIEW:seo:html] with complete HTML5 document including <!DOCTYPE html>
   - DARK THEME: bg-slate-900 or bg-gray-900 as primary background
   - Google-style dashboard aesthetics with clean typography (use Google Fonts: Inter, Roboto, or Outfit)

lib/store.ts

@@ -10,6 +10,13 @@ interface AIAssistTab {
   showCanvas?: boolean;
 }
 
+interface ApiValidationStatus {
+  valid: boolean;
+  error?: string;
+  lastValidated?: number;
+  models?: string[];
+}
+
 interface AppState {
   currentPrompt: string;
   enhancedPrompt: string | null;
@@ -29,6 +36,7 @@ interface AppState {
   selectedModels: Record<ModelProvider, string>;
   availableModels: Record<ModelProvider, string[]>;
   apiKeys: Record<ModelProvider, string>;
+  apiValidationStatus: Record<ModelProvider, ApiValidationStatus>;
   qwenTokens?: {
     accessToken: string;
     refreshToken?: string;
@@ -65,6 +73,7 @@ interface AppState {
   setSelectedModel: (provider: ModelProvider, model: string) => void;
   setAvailableModels: (provider: ModelProvider, models: string[]) => void;
   setApiKey: (provider: ModelProvider, key: string) => void;
+  setApiValidationStatus: (provider: ModelProvider, status: ApiValidationStatus) => void;
   setQwenTokens: (tokens?: { accessToken: string; refreshToken?: string; expiresAt?: number } | null) => void;
   setGithubToken: (token: string | null) => void;
   setProcessing: (processing: boolean) => void;
@@ -110,6 +119,11 @@ const useStore = create<AppState>((set) => ({
     zai: "",
   },
   githubToken: null,
+  apiValidationStatus: {
+    qwen: { valid: false },
+    ollama: { valid: false },
+    zai: { valid: false },
+  },
   isProcessing: false,
   error: null,
   history: [],
@@ -176,6 +190,13 @@ const useStore = create<AppState>((set) => ({
     set((state) => ({
       apiKeys: { ...state.apiKeys, [provider]: key },
     })),
+  setApiValidationStatus: (provider, status) =>
+    set((state) => ({
+      apiValidationStatus: {
+        ...state.apiValidationStatus,
+        [provider]: status,
+      },
+    })),
   setQwenTokens: (tokens) => set({ qwenTokens: tokens }),
   setGithubToken: (token) => set({ githubToken: token }),
   setProcessing: (processing) => set({ isProcessing: processing }),