polar-prototype
demon 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
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD)
Project Name: polar-prototype
1. Introduction
The polar-prototype project is a cutting-edge initiative to deliver a fully interactive, visually stunning, and enterprise-grade frontend UI for IntelliFish — a multi-agent AI platform designed to automate tasks, conduct research, and provide actionable insights. The primary objective is to create a user experience that is sleek, modern, and innovative, surpassing competitors like Manus AI and Meta AI in terms of responsiveness, usability, and creativity.
This document outlines the system requirements for polar-prototype, focusing on delivering a polished, end-to-end user experience. The platform will support the entire user journey, from initiating tasks in a dynamic chat interface to rendering live agent execution and generating detailed reports.
As a Canadian-based project, the design will consider locale-specific preferences, such as time zones (default: EST) and currency (CAD), ensuring a tailored experience for users like demon.
2. System Overview
The polar-prototype system is a frontend-focused platform that integrates seamlessly with backend AI agents to provide a responsive, interactive, and visually engaging user interface. The system will include the following key components:
- Chat Interface: A dynamic chat flow where users can interact with IntelliFish, initiate tasks, and receive results.
- GenUI Approval Cards: Rich, interactive cards for task approval, modification, and execution.
- Live Execution View: A real-time dashboard showcasing agent activity, task pipelines, and progress indicators.
- Mission Control Dashboard: A full-page view for advanced users to monitor and manage agent activity.
- Reports & History: Detailed intelligence reports and a history of completed tasks for review and follow-up.
- Async Persistence: The ability to continue task execution in the background and resume seamlessly when the user returns.
The system will prioritize responsiveness, accessibility, and a visually engaging design to ensure a seamless user experience across devices.
3. Functional Requirements
- As a User, I should be able to type a message in the chat interface and send it to IntelliFish.
- As a User, I should see an animated IntelliFish mascot and suggestion cards in the initial chat state.
- As a User, I should receive task approval cards with detailed information and actionable buttons (e.g., Approve & Launch, Modify).
- As a User, I should see a live execution view with animated task pipelines and agent activity.
- As a User, I should be able to navigate to the Mission Control dashboard to monitor agents in real-time.
- As a User, I should be able to view detailed reports and history of completed tasks.
- As a User, I should experience smooth animations and transitions throughout the interface.
- As a User, I should be able to access the platform on both desktop and mobile devices with a responsive design.
- As a User, I should be able to selectively re-run specific tasks or regenerate outputs asynchronously.
- As a User, I should see real-time updates on agent progress and task execution.
- As a User, I should be able to interact with live execution pipelines and view detailed task stages.
- As a User, I should receive notifications for completed tasks or updates when away from the platform.
4. User Personas
4.1 Admin
- Role: Oversees system operations, manages agents, and ensures smooth execution of tasks.
- Goals: Monitor agent performance, manage user access, and review system logs.
4.2 User
- Role: Interacts with IntelliFish to automate tasks, conduct research, and analyze data.
- Goals: Complete tasks efficiently, access detailed reports, and manage ongoing processes.
4.3 Guest
- Role: Limited access to explore the platform's capabilities.
- Goals: Understand the platform's features and initiate basic tasks.
5. Visuals Colors and Theme
Unique Color Palette for polar-prototype:
- Background: #0B132B (Deep Navy Blue)
- Surface: #1C2541 (Dark Slate Blue)
- Text: #E5E9F0 (Soft Ice White)
- Accent: #3A86FF (Vivid Blue)
- Muted: #8D99AE (Cool Gray)
This palette reflects a sleek, modern aesthetic with a focus on clarity and contrast, ensuring readability and visual appeal in both dark and light modes.
6. Signature Design Concept
Interactive Deep-Sea Exploration Homepage
The homepage will immerse users in a deep-sea exploration theme, aligning with the IntelliFish branding.
- Dynamic Background: A living underwater scene with flowing currents, glowing bioluminescent particles, and light rays filtering through the water.
- IntelliFish Mascot: A 3D-rendered fish mascot that swims across the screen, reacting to user interactions (e.g., hovering over buttons or typing in the chat).
- Interactive Suggestion Cards: Cards will "float" slightly when hovered over, with ripple animations emanating from the cursor.
- Animated Transitions: Sections of the homepage will transition with wave-like animations, creating a seamless flow between elements.
- Micro-Interactions: Buttons, icons, and other UI elements will have tactile animations, such as subtle scaling or glowing effects.
- Live Chat Entry Point: The chat interface will emerge from the ocean floor, with bubbles rising as the user begins typing.
This design will create a memorable first impression, making the platform feel alive and engaging while setting it apart from competitors.
7. Non-Functional Requirements
- Performance: The UI must load within 2 seconds on standard broadband connections.
- Accessibility: The platform must comply with WCAG 2.1 AA standards.
- Scalability: The system should handle up to 10,000 concurrent users without performance degradation.
- Cross-Browser Compatibility: The UI must function seamlessly on all major browsers (Chrome, Firefox, Safari, Edge).
- Responsiveness: The design must adapt to various screen sizes, from desktops to smartphones.
8. Tech Stack
Frontend
- React 18+ / Next.js 15 App Router
- Tailwind CSS + shadcn/ui components
- Framer Motion for animations
Backend
- Python with FastAPI
Database
- MySQL (with Alembic for migrations)
AI Models
- GPT 5.4 for user-friendly responses
- Claude 4.6 Opas for academic or coding work
- Google Nano Banana for image generation
AI Tools
- Langchain
- Litellm for LLM Routing
Orchestration
- Docker and docker-compose for local development
- Kubernetes for server-side orchestration
9. Assumptions and Constraints
- The platform will primarily target users in Canada, with default settings tailored to the Canadian locale.
- The system will rely on third-party AI models and tools, which may have their own limitations.
- The design must prioritize dark mode but also function effectively in light mode.
- The platform must be fully operational on both desktop and mobile devices.
10. Glossary
- IntelliFish: The AI agent at the core of the polar-prototype platform.
- GenUI Card: A rich, interactive card used for task approval and modification.
- Pipeline Stages: The sequential steps an agent follows to complete a task.
- Mission Control: A dashboard for monitoring and managing agent activity in real-time.
- Selective Re-Run Capability: A feature allowing users to re-run specific tasks or regenerate outputs asynchronously.
- Responsive Design: A design approach that ensures the platform works seamlessly across various devices and screen sizes.
This updated SRD ensures a focus on the chat interface, GenUI approval cards, and live execution workflows, delivering a polished, innovative, and responsive user experience. Let me know if there are additional refinements you'd like, demon!
Experience AI-Powered Automation Like Never Before
IntelliFish orchestrates intelligent agents that research, analyze, and automate your most complex workflows — delivering actionable insights in real time.
Your Intelligent Companion
Everything You Need to Automate Intelligence
IntelliFish combines powerful AI agents with an intuitive interface, giving you complete visibility and control over every automated task.
Multi-Agent Orchestration
Coordinate multiple AI agents working in parallel to tackle complex workflows, automatically distributing tasks for maximum efficiency.
Real-Time Execution Monitoring
Watch your agents work live with animated task pipelines, progress indicators, and status updates as they execute in real time.
Intelligent Task Approval
Review, modify, and approve agent actions through interactive GenUI cards before execution, keeping you in full control.
Detailed Intelligence Reports
Receive comprehensive, actionable reports from completed tasks with data visualizations, summaries, and exportable insights.
Seamless Chat Integration
Interact naturally with IntelliFish through a dynamic chat interface that understands context and adapts to your workflow.
Mission Control Dashboard
A centralized command center for advanced users to monitor all agents, manage pipelines, and oversee system-wide operations.
From Task to Results in Four Steps
IntelliFish transforms complex workflows into a seamless four-step process. Describe, approve, monitor, and receive — powered by intelligent agents.
Describe Your Task
Simply tell IntelliFish what you need in plain language. Whether it's research, data analysis, or automation — just describe your goal and let the AI understand the requirements.
Review & Approve the Plan
IntelliFish generates a detailed execution plan with agent assignments, estimated timelines, and resource allocation. Review everything through interactive GenUI approval cards before launch.
Watch Agents Execute
Monitor your AI agents in real-time through the Mission Control dashboard. See live progress, pipeline stages, and agent activity as they research, analyze, and process your task autonomously.
Get Actionable Results
Receive comprehensive intelligence reports with data visualizations, key insights, and recommended next steps. Selectively re-run specific tasks or regenerate outputs asynchronously.
See IntelliFish in Action
Experience the chat interface that powers autonomous task execution. From natural language input to agent deployment in seconds.
IntelliFish
Online
Competitive Analysis: Autonomous AI Agents
Deploy 3 research agents to scan 50+ sources including industry reports, patent filings, and competitor documentation.
Natural Language Chat
Interact with IntelliFish using plain language. No commands to memorize, just describe what you need.
Intelligent Task Approval
Review and approve agent plans before execution. Stay in control with detailed breakdowns and cost estimates.
Real-Time Execution
Watch agents work in real-time with live progress indicators, stage-by-stage updates, and completion alerts.
Actionable Reports
Receive structured intelligence reports with insights, sources, and recommended next steps upon completion.
Tailored Workflows for Every Role
IntelliFish adapts to your role. Whether you are an admin overseeing agents, a user automating tasks, or a guest exploring the platform.
Admin Workflow
Oversee system operations, manage agents, and ensure smooth execution across all pipelines.
Manage Users
Review Logs
AI Agents That Actually Work
IntelliFish deploys specialized agents that collaborate in real-time to research, analyze, and deliver actionable intelligence — autonomously.
Simple, Transparent Pricing
Start free and scale as you grow. All plans priced in CAD with no hidden fees. Cancel anytime.
Starter
For individuals exploring AI-powered automation and research.
Free forever
Pro
For teams needing advanced orchestration and priority execution.
per user / month
Enterprise
Dedicated infrastructure, custom SLAs, and on-premise deployment.
Custom pricing
All plans include SSL encryption, WCAG 2.1 AA compliance, and Canadian data residency. Chat with IntelliFish to learn more.
Trusted by Teams Worldwide
Powering mission-critical AI workflows for startups and enterprises alike
IntelliFish completely transformed how our team handles research and automation. The multi-agent orchestration is leagues beyond anything we tested from competitors.
Ready to Transform Your Workflow?
Get started in under two minutes. No credit card required — deploy AI agents that research, automate, and deliver actionable insights while you focus on what matters.
Frequently Asked Questions
Everything you need to know about IntelliFish and the polar-prototype platform.
IntelliFish is a multi-agent AI platform designed to automate tasks, conduct research, and provide actionable insights. It orchestrates multiple specialized AI agents that work together to complete complex workflows autonomously, from data gathering to report generation.
Our Mission Control Dashboard provides live visibility into every running agent. You can track task pipelines, view execution stages, and monitor progress indicators in real time. Each agent reports its status through WebSocket connections, giving you instant updates.// Agent status stream example GET /api/agents/stream { "agent_id": "fish-07", "stage": "analysis", "progress": 72 }
Absolutely. IntelliFish uses enterprise-grade encryption for all data in transit (TLS 1.3) and at rest (AES-256). Our infrastructure is hosted on SOC 2 Type II compliant servers based in Canada, ensuring your data stays within Canadian jurisdiction. Role-based access controls and audit logging provide full transparency on who accesses what.
Yes. IntelliFish offers a robust REST API and webhook system that integrates with popular platforms. Connect your Slack workspace, Jira boards, Google Workspace, or any tool with an API. Our agent orchestration layer powered by LangChain makes custom integrations straightforward.# Quick integration setup POST /api/integrations { "type": "slack", "webhook_url": "https://..." }
We offer a free tier for individuals exploring the platform, a Pro plan for teams needing advanced agent orchestration and priority execution, and an Enterprise plan with dedicated infrastructure, custom SLAs, and on-premise deployment options. All pricing is in CAD with no hidden fees.
We provide multiple tiers of support. Free users get access to our community forums and documentation. Pro users receive priority email support with a 4-hour response time. Enterprise customers get a dedicated account manager, 24/7 live chat, and direct Slack integration with our engineering team for critical issues.
No comments yet. Be the first!