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
This commit is contained in:
Gemini AI
2025-12-29 03:00:42 +04:00
Unverified
parent 6f3c2949bb
commit ffa0d2bd91
4 changed files with 85 additions and 13 deletions

View File

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