Handoff: Session 104.2 — Chrome Extension Two-Embeddable Architecture

Author: Coding Agent (Claude Code / editor2) Date: 2026-02-10 Session: 104.2 For: Testing Director (Cowork / gspace1) Scope: 6-phase implementation — production fix, centralized config, bridge adapter, Agent Observatory, embed wrappers, dual-panel extension portal

What Changed (Executive Summary)

Session 104.2 delivered a 6-phase overhaul of the Chrome extension and two new embeddable components:

Test Environment Requirements

Services That Must Be Running

Extension Setup

1. Go to chrome://extensions
2. Enable Developer Mode
3. Load unpacked → select apps/gograb-ai-extension/
4. Open the extension side panel (click extension icon → "Open Side Panel")

Pre-Test: Verify Auth

• Log in at http://localhost:6200/auth/login with test credentials
• The extension should auto-sync auth from the main app tab

Test Plan

Section 1: Phase A — Production Fix Verification

Goal: Confirm isDev is correctly detected and the extension works on both localhost and production domains.

Test 1.1: isDev on localhost

• URL: Any localhost:* page
• Expected: Console shows [GoGrab AI Extension] Environment: DEV
• Expected: FAB (floating action button) appears
• Expected: Clicking FAB loads panel from http://localhost:5400/panel (editor2 port — note: for gspace1 testing, check that the URL includes the correct AI_APP_URL)
• Verify: Open DevTools Console, filter for [GoGrab AI Extension]

Test 1.2: isDev on production domains (if accessible)

• URL: https://app.gograb.space
• Expected: Console shows [GoGrab AI Extension] Environment: PROD
• Expected: FAB loads panel from https://ai.gograb.space/panel
• Expected: NO Chrome Private Network Access (PNA) prompt

Test 1.3: Allowlist enforcement

• URL: Navigate to https://api.gograb.space or https://admin.gograb.space
• Expected: NO FAB injected (subdomain not in allowlist)
• Verify: Console should show [GoGrab AI Extension] Skipping injection: subdomain not in allowlist

Test 1.4: Production manifest

• File: apps/gograb-ai-extension/manifest.prod.json
• Verify: File exists, does NOT contain localhost in host_permissions or content_scripts.matches

Section 2: Phase B — Centralized Configuration

Test 2.1: ExtensionEnv availability

• How: In extension side panel, open DevTools Console
• Run: ExtensionEnv.isDev → should return true on localhost
• Run: ExtensionEnv.AI_APP_URL → should return http://localhost:5400 (or the configured AI port)
• Run: ExtensionEnv.MAIN_APP_URL → should return http://localhost:5200

Test 2.2: Service worker env caching

• How: In chrome://extensions → service worker → Inspect
• Verify: Console shows [GoGrab AI] Environment: { isDev: true, aiAppUrl: 'http://localhost:5400', ... }
• Verify: No hardcoded localhost:5200 or ai.gograb.space strings in service-worker.js (replaced with ExtensionEnv.*)

Section 3: Phase C — Bridge Adapter

Goal: Confirm the new ExtensionBridgeAdapter replaces raw postMessage and speaks the full BridgeMessage protocol.

Test 3.1: Bridge initialization (floating panel)

• URL: Any localhost page
• Click: FAB to open floating panel
• Console filter: [GoGrab AI Extension]
• Expected logs (in order):
  1. Agent panel injected (http://localhost:5400/studio)
  2. Agent panel ready (bridge connected)
  3. No postMessage errors or "invalid message" warnings

Test 3.2: Bridge initialization (side panel)

• Open: Extension side panel
• Console filter: [SidePanel]
• Expected logs:
  1. Initializing...
  2. Loading studio : http://localhost:5400/panel?embedded=true&... (token redacted)
  3. studio loaded
  4. Bridge initialized
  5. Auth sent via bridge

Test 3.3: Message format verification

• How: In the gograb-ai app's DevTools (the iframe), check console for incoming messages
• Expected: Messages contain id, timestamp, instanceId, type, payload fields
• Expected: type is a valid BridgeMessage type (e.g., AI_AUTH_INIT, AI_CONTEXT_UPDATE)

Test 3.4: Heartbeat

• Wait: 30+ seconds after panel loads
• Console filter: heartbeat or health
• Expected: Periodic heartbeat messages, connection stays connected
• If iframe is blocked/frozen: Health should degrade to degraded → disconnected after timeout

Test 3.5: Rate limiting

• How: This is hard to trigger manually. Verify by reading bridge-adapter.js that checkRateLimit() exists with:
  • Global: 500 messages per 10 seconds
  • Auth: 10 messages per 60 seconds
  • Per-type: 100 messages per 10 seconds

Section 4: Phase D — Agent Observatory

Goal: Verify the new /observatory route loads and displays real-time agent activity.

Test 4.1: Observatory route (standalone)

• URL: http://localhost:6400/observatory
• Expected: Full-mode observatory page loads
• Expected: Header with "Agent Observatory" title, activity count badge, health indicator
• Expected: Sections visible: Active Agents strip, Engine Status, Active Task, Event Feed

Test 4.2: Observatory route (embedded compact)

• URL: http://localhost:6400/observatory?embedded=true&mode=compact
• Expected: Compact single-column layout
• Expected: No engine status bar (full mode only)
• Expected: No autonomy controls (full mode only)
• Expected: Scrolling event feed visible

Test 4.3: Observatory route (with auth)

• URL: http://localhost:6400/observatory?embedded=true&mode=compact&extension=true&token=VALID_TOKEN
• Expected: Same as 4.2 but with auth applied (if Observatory needs auth context)

Test 4.4: VittoMonitorService SSE connection

• Precondition: backend-vitto-api running on port 3003
• How: Open Observatory, check Network tab for EventSource to /vitto-api/engine/events
• Expected: SSE connection established (if Vitto API is running)
• If Vitto API is NOT running: Observatory should show disconnected health indicator, no crash

Test 4.5: OrchestrationClientService WebSocket

• Precondition: backend-ai-api running on port 3001
• How: Open Observatory, check Network tab for WebSocket to /command-center
• Expected: Socket.IO connection established
• Note: This service is a singleton — it auto-connects in constructor. The Observatory does NOT control its lifecycle.

Test 4.6: Observatory with active task

• How: Submit a task through the AI panel (or via API) while Observatory is open
• Expected: Active task card appears with 4-phase progress bar (ANALYZE → PLAN → EXECUTE → VERIFY)
• Expected: Tool calls and delegations populate in real-time
• Expected: Event feed scrolls with new events tagged as vitto or orchestration

Section 5: Phase E — Universal Embed Wrappers

Goal: Verify the <gograb-ai-panel> and <gograb-observatory> components work when dropped into any Angular app.

Test 5.1: Component exports

• How: Check that the following imports work (build test):

  import { GoGrabAiPanelComponent, GoGrabObservatoryComponent } from '@libs-ux/embeddable-bridge';
  

• Verify: Run npx nx build libs-ux-embeddable-bridge — should succeed with no errors

Test 5.2: Panel component URL construction

• File: libs/libs-ux/embeddable-bridge/src/lib/components/gograb-ai-panel.component.ts
• Verify on localhost: panelUrl() returns http://localhost:5400/panel?embedded=true&theme=dark&source=embed-component&userRole=user
• Verify tier mapping: T1 → developer, T2 → builder, T3 → user

Test 5.3: Observatory component URL construction

• File: libs/libs-ux/embeddable-bridge/src/lib/components/gograb-observatory.component.ts
• Verify on localhost: observatoryUrl() returns http://localhost:5400/observatory?embedded=true&mode=compact&controls=true&source=embed-component

Section 6: Phase F — Dual-Panel Chrome Extension Portal

Goal: Verify the extension side panel has Studio/Observatory tabs and the floating panel has a mode toggle.

Test 6.1: Side panel tab bar

• Open: Extension side panel
• Expected: Tab bar visible at top with two buttons: "✨ Studio" (active) and "🔭 Observatory"
• Expected: Studio tab is active by default (highlighted with purple underline)

Test 6.2: Side panel tab switching — Studio → Observatory

• Click: "🔭 Observatory" tab
• Expected: Tab highlights switch (Observatory gets purple underline, Studio loses it)
• Expected: Iframe reloads with /observatory?embedded=true&mode=compact&extension=true&...
• Console: [SidePanel] Loading observatory : http://localhost:5400/observatory?...
• Expected: Observatory compact view renders inside the side panel

Test 6.3: Side panel tab switching — Observatory → Studio

• Click: "✨ Studio" tab
• Expected: Tab highlights switch back
• Expected: Iframe reloads with /panel?embedded=true&extension=true&...
• Console: [SidePanel] Loading studio : http://localhost:5400/panel?...
• Expected: AI Creation Studio loads

Test 6.4: Side panel tab persistence

• Steps:
  1. Switch to Observatory tab
  2. Close the side panel
  3. Reopen the side panel
• Expected: Observatory tab is still active (persisted via chrome.storage.local)

Test 6.5: Floating panel mode toggle button

• URL: Any localhost page with the FAB
• Click: FAB to open floating panel
• Expected: Panel header bar visible at top with:
  • Left: Mode toggle button showing "🔭 Observatory" (pill-shaped, purple tint)
  • Right: Close button (×)
• Expected: Panel loads Studio (default mode)

Test 6.6: Floating panel mode toggle — Studio → Observatory

• Click: "🔭 Observatory" toggle button
• Expected: Button text changes to "✨ Studio"
• Expected: Iframe reloads with /observatory?embedded=true&mode=compact&...
• Console: [GoGrab AI Extension] Switching floating panel to: observatory
• Expected: Compact Observatory view renders in the floating panel

Test 6.7: Floating panel mode toggle — Observatory → Studio

• Click: "✨ Studio" toggle button
• Expected: Button text changes back to "🔭 Observatory"
• Expected: Iframe reloads with /panel?embedded=true&...

Test 6.8: Floating panel mode persistence

• Steps:
  1. Toggle to Observatory mode
  2. Close the panel (click ×)
  3. Click FAB to reopen
• Expected: Panel opens in Observatory mode (persisted via chrome.storage.local)

Test 6.9: Cross-panel orchestration routing

• How: Submit an orchestration task from Studio panel
• Service worker console: Should show AI_ORCHESTRATE_REQUEST being handled
• Expected: If Vitto API is running, task is submitted and status broadcast to all tabs
• Note: If Vitto is not running, the response should be { success: false, error: 'Orchestration not available — MCP connector offline' }

Test 6.10: Panel header doesn't overlap iframe content

• Open: Floating panel
• Expected: The 40px header bar sits above the iframe content — no overlap
• Verify: Scroll the iframe content — it should not go behind the header

Section 7: Cross-Cutting Concerns

Test 7.1: Auth flow end-to-end

• Steps:
  1. Log in at http://localhost:6200/auth/login
  2. Open extension side panel
  3. Open floating panel on the same page
• Expected: Both panels receive auth (token visible in URL params or bridge message)
• Console: Auth sent via bridge or Auth included in panel URL

Test 7.2: Context forwarding

• Steps:
  1. Open floating panel on http://localhost:6200/space/chrome-space-1
  2. Navigate to a different page
• Expected: Panel receives context update with new URL, title, hostApp detection
• Console: AI_CONTEXT_UPDATE message logged

Test 7.3: Bridge adapter in both contexts

• Verify: Both sidepanel.js and inject.js use ExtensionBridgeAdapter (not raw postMessage)
• Verify: No window.addEventListener('message', ...) in either file (all handled by bridge)

Test 7.4: Error resilience

• Test: Open extension panel when gograb-ai (port 6400/5400) is NOT running
• Expected in side panel: Error state shown ("Unable to load AI Studio")
• Expected in floating panel: Iframe shows connection error, bridge health degrades to disconnected
• Expected: No unhandled exceptions or crashes

Files Changed (Complete Reference)

Chrome Extension (apps/gograb-ai-extension/)

Angular Libraries

Angular Apps

Build Verification

Before testing, confirm the builds succeed:

# Extension: vanilla JS — just reload in chrome://extensions after changes
# Click the refresh icon on the extension card

# Angular builds (only needed if testing Observatory route):
npx nx build libs-ux-embeddable-bridge
npx nx build gograb-ai --configuration=development

# Or just ensure the dev server is running:
# gograb-ai on port 6400 (gspace1 testing port)

Known Limitations

1. Observatory requires Vitto API (port 3003) — If not running, the SSE connection won't establish. The component should show "disconnected" gracefully, not crash.

2. OrchestrationClientService is a singleton — It auto-connects to /command-center WebSocket. The Observatory doesn't control its lifecycle. If the WebSocket is already connected from another component, the Observatory reuses it.

3. Floating panel mode toggle is NOT a split view — The floating panel shows either Studio OR Observatory, never both simultaneously. Only the side panel can show them via tab switching (also one at a time).

4. Cross-panel orchestration depends on MCP connector being initialized in the service worker. If globalThis.mcpConnector is null, the orchestration request returns an error.

5. Embed wrappers (<gograb-ai-panel>, <gograb-observatory>) use FRONTEND_PORTS.gograbAi which defaults to port 5400 (editor2). For gspace1 testing, the actual port might differ — the components detect localhost and use the appropriate port from @libs-foundational/api-config.

Verification Checklist (Quick Pass)

Use this for a rapid smoke test. Detailed tests are in the sections above.

• Extension loads without errors on chrome://extensions
• FAB appears on localhost pages
• Floating panel opens and loads Studio content
• Floating panel mode toggle switches to Observatory
• Floating panel mode toggle switches back to Studio
• Side panel opens and loads Studio content
• Side panel tab switches to Observatory
• Side panel tab switches back to Studio
• Side panel tab choice persists after close/reopen
• Observatory route loads at http://localhost:6400/observatory
• No console errors related to bridge, postMessage, or origin validation
• Auth flows through to iframe in both panel types
• npx nx build libs-ux-embeddable-bridge succeeds

Report Template

When done testing, please create E2E-TEST-REPORT-SESSION-104.md in this folder using this structure:

---
title: "E2E Test Report - Session 104.2 - Chrome Extension Two-Embeddable Architecture"
session: 104
status: ✅ Complete / ⚠️ Issues Found
---

# E2E Test Report — Session 104.2

| # | Test | Result | Notes |
|---|------|--------|-------|
| 1 | isDev on localhost | ✅/❌ | ... |
| 2 | Side panel tab switching | ✅/❌ | ... |
| ... | ... | ... | ... |

## Issues Found
[Describe any issues with screenshots]

## Handoffs for Coding Agent
[If fixes needed, create specific handoffs]