GoGrab AI Panel

Comprehensive AI command center embeddable in any webpage via Chrome extension

GoGrab AI Panel

The GoGrab AI Panel is a comprehensive AI command center that can be embedded in any webpage via the Chrome extension. It provides a unified interface for AI-powered assistance, agent management, and intelligent automation.

Features

Tabs

The panel is organized into four main tabs, each accessible via keyboard shortcuts:

Tab Shortcut Description
Chat Cmd+1 AI conversation with intent detection
Agents Cmd+2 Connected agents grid and status monitoring
Handoffs Cmd+3 Handoff kanban board for task delegation
Mind Cmd+4 Agent thought streams, knowledge browser, decision timeline

Quick Actions

Quick action buttons for common tasks:

Action Icon Description
Generate ✨ Quick module generation
Code 💻 Code generation shortcut
Search 🔍 Knowledge base search
Quick ⚡ Fast question mode

Intelligence Features

Feature Description
Intent Detection Automatically detects what you're trying to do (image, code, question, command, search)
Session Persistence Chat history persists across panel reloads using sessionStorage
Loading States Elegant loading overlays for async operations with streaming support
Error Handling Graceful degradation when backend unavailable, with user-friendly messages

Keyboard Shortcuts

Shortcut Action
Cmd+1 / Ctrl+1 Switch to Chat tab
Cmd+2 / Ctrl+2 Switch to Agents tab
Cmd+3 / Ctrl+3 Switch to Handoffs tab
Cmd+4 / Ctrl+4 Switch to Mind tab

Authentication

The panel automatically syncs authentication from the main GoGrab Space app.

How Auth Sync Works

  1. User logs into main app at gograb.space or localhost:5200
  2. Extension detects authentication via AUTH_SYNC message
  3. Auth stored in chrome.storage.local for persistence
  4. Panel receives AI_AUTH_INIT via postMessage
  5. Authenticated UI displayed with full features

If Not Authenticated

If you're not authenticated, you can:

  1. Navigate to the main app and log in
  2. Click "Login" in the extension popup (opens main app login page)

Auth Flow Diagram

┌─────────────────────────────────────────────────────────────────────┐
│                         AUTH FLOW                                   │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  Main GoGrab App (localhost:5200 / gograb.space)                   │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ User logs in → Auth state generated                        │    │
│  │              → Broadcasts AUTH_SYNC message                 │    │
│  └────────────────────────────────────────────────────────────┘    │
│                              │                                      │
│                              ▼                                      │
│  Chrome Extension (Service Worker)                                  │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ Receives AUTH_SYNC → Stores in chrome.storage.local        │    │
│  │                    → Broadcasts AUTH_UPDATED to all tabs   │    │
│  └────────────────────────────────────────────────────────────┘    │
│                              │                                      │
│                              ▼                                      │
│  Content Script (inject.js)                                         │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ Creates iframe → http://localhost:5300/panel               │    │
│  │               → Sends AI_AUTH_INIT via postMessage         │    │
│  └────────────────────────────────────────────────────────────┘    │
│                              │                                      │
│                              ▼                                      │
│  AI Panel (localhost:5300/panel)                                   │
│  ┌────────────────────────────────────────────────────────────┐    │
│  │ Receives AI_AUTH_INIT → Updates authState signal           │    │
│  │                       → Shows authenticated UI             │    │
│  └────────────────────────────────────────────────────────────┘    │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Architecture

High-Level Overview

Chrome Extension → Syncs auth from main app → Stores in chrome.storage.local
       ↓
Content Script → Creates iframe → http://localhost:5300/panel
       ↓
AI Panel → Receives auth via postMessage → Shows authenticated UI

Component Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                      AI PANEL COMPONENTS                            │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ PanelComponent (Container)                                   │   │
│  │ ├── HeaderComponent (tabs, title)                           │   │
│  │ ├── TabContentComponent                                      │   │
│  │ │   ├── ChatTab → ChatComponent                             │   │
│  │ │   ├── AgentsTab → AgentGridComponent                      │   │
│  │ │   ├── HandoffsTab → HandoffKanbanComponent                │   │
│  │ │   └── MindTab → AgentMindDashboardComponent               │   │
│  │ ├── QuickActionsComponent                                    │   │
│  │ └── LoadingOverlayComponent                                  │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │ Services                                                     │   │
│  │ ├── EmbeddedAdapterService (auth, messaging)                │   │
│  │ ├── PanelIntentService (intent detection)                   │   │
│  │ ├── PanelSessionPersistenceService (session storage)        │   │
│  │ └── PanelShortcutsService (keyboard navigation)             │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Libraries Used

Library Purpose
@libs-ai/panel-intelligence Intent detection, session persistence, quick actions
@libs-ai/agent-mind Thought streams, knowledge browser, decision timeline
@libs-ai/multi-agent-dashboard Agent grid, handoff kanban, real-time status
@libs-ux/ux-loading Loading overlays with streaming support
@libs-ux/embeddable-bridge Extension-panel communication bridge

Intent Detection

The panel automatically detects user intent from input text:

Intent Triggers Example
Image "generate an image", "create art", "visualize" "Generate an image of a sunset"
Code "write a function", "implement", "create a class" "Write a function that validates email"
Question Ends with ? "How does authentication work?"
Command "run", "deploy", "build", "test" "Run the test suite"
Search "search for", "find", "locate" "Search for authentication components"

Intent detection helps the panel route requests to the appropriate handler and provide context-aware suggestions.

Session Persistence

Chat sessions are automatically persisted to sessionStorage:

Session Data Structure

interface PanelSession {
  id: string;
  messages: ChatMessage[];
  activeTab: 'chat' | 'agents' | 'handoffs' | 'mind';
  createdAt: string;
  updatedAt: string;
}

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  timestamp: string;
  metadata?: {
    intent?: string;
    model?: string;
    tokens?: number;
  };
}

Error Handling

The panel implements graceful degradation:

Error Type User Message Fallback Behavior
Network Error "Unable to connect. Please check your internet connection." Local history, shortcuts remain functional
Auth Expired "Your session has expired. Please log in again." Shows login button
Rate Limited "Too many requests. Please wait a moment and try again." Automatic retry with backoff
Server Error "Something went wrong on our end. Please try again later." Retry option, cached data displayed

Development

Running Locally

# Start the panel app (port 5300)
yarn dev:panel

# Start the main app for auth (port 5200)
yarn serve:gograb-space

# Load the extension in Chrome
# 1. Navigate to chrome://extensions
# 2. Enable Developer Mode
# 3. Load unpacked: apps/gograb-ai-extension

Testing

# Run panel feature tests
yarn test MCP/mcp-gograb-ai/src/__tests__/e2e/panel-features.test.ts

# Run auth flow tests
yarn test MCP/mcp-gograb-ai/src/__tests__/e2e/extension-auth.test.ts

Key Files

File Purpose
apps/gograb-ai/src/app/pages/panel/panel.component.ts Main panel component
apps/gograb-ai-extension/background/service-worker.js Extension auth handling
apps/gograb-ai-extension/content/inject.js Panel iframe injection
apps/gograb-ai-extension/popup/popup.html Extension popup UI

Related Documentation

Last Updated: January 31, 2026 (Session 78) Status: ✅ Production Ready