From ffa0d2bd91e305e2d9e577d09f5ea8d0b3680ece Mon Sep 17 00:00:00 2001
From: Gemini AI <gemini@google.com>
Date: Mon, 29 Dec 2025 03:00:42 +0400
Subject: [PATCH] fix: agent selection persistence + premium SEO report design

- Fixed agent selection to persist when switching tabs (saves to tab state)
- Added CanvasErrorBoundary to gracefully catch render crashes
- Added defensive null checks for tab state access
- Overhauled SEO agent prompt with detailed Google-style dashboard requirements:
  - Dark theme (bg-slate-900)
  - Animated SVG progress rings with stroke-dasharray
  - Color-coded scoring (green/amber/red)
  - Tailwind CDN + Google Fonts (Inter/Roboto)
  - Card layouts with backdrop-blur and subtle borders
  - Key Recommendations section with icons
  - Responsive max-w-4xl layout
---
 components/AIAssist.tsx      | 56 +++++++++++++++++++++++++++++-------
 lib/services/ollama-cloud.ts | 14 ++++++++-
 lib/services/qwen-oauth.ts   | 14 ++++++++-
 lib/services/zai-plan.ts     | 14 ++++++++-
 4 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/components/AIAssist.tsx b/components/AIAssist.tsx
index c1137aa..f1f9d02 100644
--- a/components/AIAssist.tsx
+++ b/components/AIAssist.tsx
@@ -34,6 +34,37 @@ interface PreviewData {
  * A ultra-stable iframe wrapper that avoids hydration issues
  * and provides a WOW visual experience.
  */
+
+// Error Boundary for Canvas crashes
+class CanvasErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean, error: string | null }> {
+    constructor(props: { children: React.ReactNode }) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return { hasError: true, error: error.message };
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="h-full flex flex-col items-center justify-center bg-[#0b1414] p-8 text-center rounded-b-2xl">
+                    <StopCircle className="h-10 w-10 text-red-500/40 mb-4" />
+                    <h4 className="text-xs font-black uppercase tracking-widest text-red-400 mb-2">Canvas Crashed</h4>
+                    <p className="text-[10px] font-mono text-slate-500 max-w-xs">{this.state.error}</p>
+                    <button
+                        onClick={() => this.setState({ hasError: false, error: null })}
+                        className="mt-4 px-3 py-1.5 text-[9px] font-black uppercase tracking-widest text-blue-400 border border-blue-500/30 rounded-xl hover:bg-blue-500/10 transition-colors"
+                    >
+                        Try Again
+                    </button>
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}
 const BuildingArtifact = ({ type }: { type: string }) => {
     const [progress, setProgress] = useState(0);
     const steps = [
@@ -393,7 +424,7 @@ export default function AIAssist() {
     } = useStore();
     const t = translations[language].aiAssist;
 
-    const activeTab = aiAssistTabs.find(t => t.id === activeTabId) || aiAssistTabs[0];
+    const activeTab = aiAssistTabs?.find(t => t.id === activeTabId) || aiAssistTabs?.[0] || { id: 'default', title: 'New Chat', history: [], currentAgent: 'general' };
     const aiAssistHistory = activeTab?.history || [];
 
     const [input, setInput] = useState("");
@@ -404,10 +435,10 @@ export default function AIAssist() {
     // Sync local state when tab changes
     useEffect(() => {
         if (activeTab) {
-            setCurrentAgent(activeTab.currentAgent);
-            setPreviewData(activeTab.previewData);
+            setCurrentAgent(activeTab.currentAgent || "general");
+            setPreviewData(activeTab.previewData || null);
         }
-    }, [activeTabId]);
+    }, [activeTabId, activeTab]);
     const [availableModels, setAvailableModels] = useState<string[]>([]);
     const [showCanvas, setShowCanvas] = useState(false);
     const [viewMode, setViewMode] = useState<"preview" | "code">("preview");
@@ -716,7 +747,10 @@ export default function AIAssist() {
                             ].map(({ label, agent, icon }) => (
                                 <button
                                     key={agent}
-                                    onClick={() => setCurrentAgent(agent)}
+                                    onClick={() => {
+                                        setCurrentAgent(agent);
+                                        updateActiveTab({ currentAgent: agent });
+                                    }}
                                     className={cn(
                                         "flex items-center gap-2 px-3 py-2 rounded-full text-[11px] font-black uppercase tracking-widest border transition-all",
                                         currentAgent === agent
@@ -962,11 +996,13 @@ export default function AIAssist() {
 
                             <div className="flex-1 overflow-hidden relative">
                                 {viewMode === "preview" && previewData ? (
-                                    <LiveCanvas
-                                        data={previewData.data}
-                                        type={previewData.type}
-                                        isStreaming={!!previewData.isStreaming}
-                                    />
+                                    <CanvasErrorBoundary>
+                                        <LiveCanvas
+                                            data={previewData.data || ""}
+                                            type={previewData.type || "preview"}
+                                            isStreaming={!!previewData.isStreaming}
+                                        />
+                                    </CanvasErrorBoundary>
                                 ) : (
                                     <div className="h-full bg-[#050505] p-8 font-mono text-sm overflow-auto scrollbar-thin scrollbar-thumb-blue-900">
                                         <pre className="text-blue-300/90 leading-relaxed selection:bg-blue-500/20 whitespace-pre-wrap">
diff --git a/lib/services/ollama-cloud.ts b/lib/services/ollama-cloud.ts
index c8bbb08..a440c54 100644
--- a/lib/services/ollama-cloud.ts
+++ b/lib/services/ollama-cloud.ts
@@ -746,7 +746,19 @@ Perform a DEEP 360° competitive intelligence analysis and generate 5-7 strategi
 
 AGENTS & CAPABILITIES:
 - content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
-- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. **ALL REPORTS MUST be generated as visually stunning, ADHD-friendly, modern, and intuitive HTML5 dashboards.** Use [PREVIEW:seo:html]. Reports should feature progress rings, clear hierarchy, and interactive insights.
+- seo: SEO Specialist. Create stunning SEO audit reports. **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)
+  - Large animated SVG progress rings for scores (Overall, Technical, Content, Mobile) with stroke-dasharray animations
+  - Color-coded scoring: green (#22c55e) for good, amber (#f59e0b) for warning, red (#ef4444) for poor
+  - Use Tailwind CDN for styling. Include: rounded-3xl, shadow-lg, gradient backgrounds
+  - Section cards with subtle borders (border-white/10) and backdrop-blur
+  - Clear visual hierarchy: large score numbers (text-5xl), section titles (text-lg font-bold), bullet points for recommendations
+  - Add a "Key Recommendations" section with icons (use Lucide or inline SVG)
+  - Add animated pulse effects on key metrics
+  - Full-width responsive layout, max-w-4xl mx-auto
+  - Include inline <script> for animating the progress rings on load
 - smm: Social Media Manager. Create multi-platform content plans and calendars. 
 - pm: Project Manager. Create PRDs, timelines, and action plans.
 - code: Software Architect. Provide logic, algorithms, and backend snippets.
diff --git a/lib/services/qwen-oauth.ts b/lib/services/qwen-oauth.ts
index 49903ce..8e7e312 100644
--- a/lib/services/qwen-oauth.ts
+++ b/lib/services/qwen-oauth.ts
@@ -1020,7 +1020,19 @@ Perform analysis based on provided instructions.`,
 
 AGENTS & CAPABILITIES:
 - content: Expert copywriter. Use [PREVIEW:content:markdown] for articles, posts, and long-form text.
-- seo: SEO Specialist. Provide deep audits, keyword research, and strategy reports. **ALL REPORTS MUST be generated as visually stunning, ADHD-friendly, modern, and intuitive HTML5 dashboards.** Use [PREVIEW:seo:html]. Reports should feature progress rings, clear hierarchy, and interactive insights.
+- seo: SEO Specialist. Create stunning SEO audit reports. **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)
+  - Large animated SVG progress rings for scores (Overall, Technical, Content, Mobile) with stroke-dasharray animations
+  - Color-coded scoring: green (#22c55e) for good, amber (#f59e0b) for warning, red (#ef4444) for poor
+  - Use Tailwind CDN for styling. Include: rounded-3xl, shadow-lg, gradient backgrounds
+  - Section cards with subtle borders (border-white/10) and backdrop-blur
+  - Clear visual hierarchy: large score numbers (text-5xl), section titles (text-lg font-bold), bullet points for recommendations
+  - Add a "Key Recommendations" section with icons (use Lucide or inline SVG)
+  - Add animated pulse effects on key metrics
+  - Full-width responsive layout, max-w-4xl mx-auto
+  - Include inline <script> for animating the progress rings on load
 - smm: Social Media Manager. Create multi-platform content plans and calendars.
 - pm: Project Manager. Create PRDs, timelines, and action plans.
 - code: Software Architect. Provide logic, algorithms, and backend snippets.
diff --git a/lib/services/zai-plan.ts b/lib/services/zai-plan.ts
index 19021fb..5abb809 100644
--- a/lib/services/zai-plan.ts
+++ b/lib/services/zai-plan.ts
@@ -819,7 +819,19 @@ 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. Provide deep audits, keyword research, and strategy reports. **ALL REPORTS MUST be generated as visually stunning, ADHD-friendly, modern, and intuitive HTML5 dashboards.** Use [PREVIEW:seo:html]. Reports should feature progress rings, clear hierarchy, and interactive insights.
+- seo: SEO Specialist. Create stunning SEO audit reports. **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)
+  - Large animated SVG progress rings for scores (Overall, Technical, Content, Mobile) with stroke-dasharray animations
+  - Color-coded scoring: green (#22c55e) for good, amber (#f59e0b) for warning, red (#ef4444) for poor
+  - Use Tailwind CDN for styling. Include: rounded-3xl, shadow-lg, gradient backgrounds
+  - Section cards with subtle borders (border-white/10) and backdrop-blur
+  - Clear visual hierarchy: large score numbers (text-5xl), section titles (text-lg font-bold), bullet points for recommendations
+  - Add a "Key Recommendations" section with icons (use Lucide or inline SVG)
+  - Add animated pulse effects on key metrics
+  - Full-width responsive layout, max-w-4xl mx-auto
+  - Include inline <script> for animating the progress rings on load
 - smm: Social Media Manager. Create multi-platform content plans and calendars. 
 - pm: Project Manager. Create PRDs, timelines, and action plans.
 - code: Software Architect. Provide logic, algorithms, and backend snippets.