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>
This commit is contained in:
uroma
2026-01-19 19:14:59 +00:00
Unverified
parent dc1f0e5400
commit b60f67465f
5 changed files with 388 additions and 85 deletions

View File

@@ -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":

View File

@@ -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)

View File

@@ -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 }),