polar-prototype

bydemon 1139

# IntelliFish Chat + GenUI + Live Agents — Full UI Flow Prototype Prompt > Generate a complete, production-ready frontend prototype for IntelliFish — a personal AI agent that automates anything on computer or web. This prototype covers the ENTIRE user journey from typing a message to seeing live agents work to receiving final results. Every animation, transition, and state must be polished and enterprise-grade. ## Tech Stack - React 18+ / Next.js 15 App Router - Tailwind CSS + shadcn/ui components - Framer Motion for all animations - Theme: dark mode primary (also works in light mode) - Brand color: cyan-500 (#06B6D4) ## Layout Structure - Left: 56px icon sidebar (collapsed, with tooltips) - Center: Chat thread (flex-1, max-width 800px centered) - Right: 320px intelligence sidebar (collapsible) - Bottom: Composer input with "Go Fish" send button ## FLOW 1: Initial State (Empty Chat) The chat area shows: - Centered IntelliFish animated mascot (subtle floating animation, 40px) - "INTELLIFISH" branding text - "Ask me anything — automate a task, research a topic, or browse the web." - 6 suggestion cards in 2x3 grid: - "Research a company" (Search icon) - "Compare prices" (BarChart icon) - "Fill out a form" (FileText icon) - "Draft an email" (Globe icon) - "Monitor for changes" (Monitor icon) - "Analyze a website" (Bell icon) - Each card: border-border, hover:border-primary/30, icon left-aligned, text 13px - Clicking a card pre-fills the composer Right sidebar shows: - 3 stat cards in a row: Running (0), Facts (19), Cost ($0.02) - "Available Tools" section: 2x2 grid of tool cards (Price Monitor, Deep Researcher, Scheduled Reporter) - "Latest Run" card with title + time ago - "Try" chips: quick prompt suggestions ## FLOW 2: User Types + Sends Message - User message appears right-aligned in cyan bubble (rounded-2xl, bg-primary/10) - Composer shows "Enter to send · Shift+Enter for new line" - After sending: the suggestion cards fade out - iFish avatar (fish icon in gradient circle) appears on left with "iFish" label ## FLOW 3: AI Responds with Approval Card (GenUI) The iFish response contains a rich GenUI card (NOT plain text). This is the approval gate. ### Approval Card Design: ``` ┌──────────────────────────────────────────────────┐ │ MacBook Air Price Comparison [Intelligence │ │ Research & analyze — no automated Only badge] │ │ actions │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌──────┐ │ │ │ ⚡ │ │ $ │ │ ⏱ │ │ 🛡 │ │ │ │ 3 │ │$0.04│ │ 45s │ │ 95% │ │ │ │AGENTS│ │COST │ │TIME │ │CONF. │ │ │ └─────┘ └─────┘ └─────┘ └──────┘ │ │ │ │ DATA SOURCES │ │ [🌐 Amazon.com] [🌐 BestBuy.com] [🌐 Apple.com] │ │ │ │ AUTOMATED ACTIONS │ │ [⊞ Scrape Amazon for pricing] │ │ [⊞ Scrape BestBuy for pricing] │ │ [⊞ Compare trade-in offers] │ │ │ │ ▸ View full research brief │ │ │ │ ┌────────────────────────┐ ┌──────────┐ │ │ │ ▶ Approve & Launch │ │ ✏ Modify │ │ │ └────────────────────────┘ └──────────┘ │ └──────────────────────────────────────────────────┘ ``` - Card enters with spring animation (y: 20 → 0, opacity: 0 → 1) - Stat icons have subtle pulse animation - "Approve & Launch" button: bg-gradient cyan-600→cyan-500, shadow-lg - "Modify" button: border only, secondary ## FLOW 4: User Clicks "Approve & Launch" → LIVE EXECUTION VIEW This is the CORE experience. The card transforms (layout animation via Framer Motion): ### Phase 4a: Pipeline Stages (3-5 seconds) The stat row changes from "AGENTS/COST/TIME/CONF" to "WORKERS/COST/ELAPSED/DONE" Below stats, a **pipeline stage indicator** appears: ``` INTAKE → RECALL → PLAN → GATE → EXECUTE → VERIFY → LEARN → REPORT ✅ ✅ ✅ ✅ 🔵⋯ ○ ○ ○ ``` - Each stage is a small rounded pill - Completed stages: bg-emerald-500, white checkmark - Active stage: bg-primary, pulsing glow animation, spinning loader - Pending stages: bg-border, gray circle - Stages animate left-to-right as events arrive (staggered spring animation) - Below the pills: "Analyzing task..." → "Loading memories..." → "Creating plan..." → "Checking safety..." → "Launching agents..." ### Phase 4b: Agents Grid (main execution phase, 30-120 seconds) When TASK_START events arrive, agent cards appear with staggered slide-in animation: ``` **Results Animations:** - Findings appear one by one with staggered slide-in (200ms delay) - Risk gauge animates from 0 to final value - "BEST PRICE" badge pulses once with gold glow - Full Report / Workspace / Copy JSON buttons fade in after all findings rendered ## FLOW 5: Async Persistence (User Closes Browser) When user navigates away or closes browser during execution: - Run continues in background (server-side) - When user returns to chat page: - Right sidebar "Latest Run" shows the run with current status - User can click it to see current state (running or completed) - If completed: results card appears in chat thread - Notification badge on bell icon shows "1 new result" ## FLOW 6: Follow-Up Conversation After results show, user can type follow-up: - "What about the MacBook Pro?" - Context carries from previous run - New approval card appears with updated parameters - Previous results remain visible above (chat history) ## FLOW 7: Mission Control (Full-Page Live View) Clicking "Mission Control" from the chat card navigates to `/dashboard/control`: - 6 agent viewport cards in 3x2 grid - Each viewport: dark background, agent name + URL + status - Live screenshots streaming (WebSocket JPEG frames) - Broadcast Bus terminal at bottom: timestamped event log - Consciousness widget: awareness level gauge + integration score - "Intervene" input: type commands to redirect agents - Pause All / Terminate buttons ## FLOW 8: Reports & History - `/dashboard/report/[threadId]` — Full intelligence report: executive summary, 4 KPI cards, key findings with confidence badges, comparison tables, source citations, "Ask about this report" input - Agents page: filterable table of all runs with status, cost, duration, results link - Automations page: scheduled recurring jobs with toggles, next run time, cron expressions ## Design Principles - Every transition animated (Framer Motion spring/tween) - Status changes are VISIBLE (color, icon, text all change together) - No loading spinners without context text ("Loading..." is banned — always say WHAT is loading) - Progress bars everywhere something takes time - Costs always visible (users are cost-conscious) - Dark theme primary, light theme must also work (use Tailwind dark: variants) - Mobile responsive: agent grid goes to single column, sidebar collapses - Fonts: Inter for UI, JetBrains Mono for data/IDs - Spacing: generous, not cramped. Cards have p-4 minimum, gaps of 3-4 - Corner radius: rounded-xl for cards, rounded-full for badges/pills ## Key Components to Build 1. `ApprovalCard` — The initial plan/approval GenUI card 2. `PipelineStages` — Animated horizontal stage indicator 3. `AgentCard` — Individual agent status card with live thumbnail 4. `AgentGrid` — Responsive grid of AgentCards with summary bar 5. `LiveBrowserView` — Focused single-agent browser iframe with controls 6. `ResultsCard` — Findings display with risk gauge and action buttons 7. `FindingItem` — Individual finding with confidence badge 8. `StatusBadge` — Reusable status indicator (running/done/failed/pending) 9. `ProgressBar` — Animated progress bar with gradient 10. `CostDisplay` — Running cost counter with dollar sign