SESSION 104.2 ACHIEVEMENTS
Documentation for Sessions
Session 104.2: Two-Embeddable Architecture — Achievements
Overview
Transformed the Chrome extension from a single-purpose AI chat panel into a dual-embeddable universal portal with real-time Agent Observatory and AI Creation Studio. Built the full pipeline from backend orchestration through Angular components to vanilla JS Chrome extension integration.
Phase A: Production Fix
Fixed the Chrome extension which was broken in production — isDev always returned true, causing it to load localhost URLs on live domains.
| Change | Detail |
|---|---|
Fixed isDev detection in inject.js |
Content scripts now derive environment from window.location.hostname instead of version string parsing (which always flagged as dev) |
| Subdomain allowlist | Replaced the blocklist approach (BLOCKED_SUBDOMAINS) with an explicit allowlist (ALLOWED_SUBDOMAINS: app, www, dev, ai) — safer and prevents FAB injection on API/docs/admin subdomains |
| Production manifest | Created manifest.prod.json without localhost host_permissions and content_scripts.matches — eliminates Chrome PNA warnings entirely for store users |
| Build script | Created scripts/build-prod.sh to swap manifests for Chrome Web Store builds |
Cloudflare _headers |
Added _headers files across all 6 frontend apps for proper CORS/embedding headers in production |
Phase B: Centralized Extension Configuration
Created a single source of truth for all URLs used across the extension.
| File | Purpose |
|---|---|
shared/env-config.js |
ExtensionEnv object with computed getters for all URLs (AI_APP_URL, MAIN_APP_URL, BACKEND_API_URL, AI_API_URL, VITTO_API_URL, VALID_ORIGINS) — auto-switches between dev and prod |
shared/dev-ports.js |
Auto-generated from .env.local by scripts/generate-dev-ports.js — workspace-specific port config (gitignored) |
GET_ENV_CONFIG message |
Service worker provides env config to sidepanel/popup via chrome.runtime.sendMessage — reliable path that doesn't depend on HTML script tag loading |
Replaced all hardcoded URLs in service-worker.js, sidepanel.js, and options.js.
Phase C: Vanilla JS Bridge Adapter
Ported the Angular embeddable-bridge protocol into a vanilla JS class for the Chrome extension context.
File: shared/bridge-adapter.js (~517 lines)
| Feature | Detail |
|---|---|
| Message protocol | Full BridgeMessage<T> compliance — { type, payload, id, timestamp, instanceId } |
| 40+ message types | Validates against the same VALID_MESSAGE_TYPES set as the Angular library |
| Rate limiting | 3-tier: global (500/10s), auth (10/60s), per-type (100/10s) |
| Heartbeat | Configurable ping/pong with health state tracking (connected/degraded/disconnected) |
| Origin validation | Checks event.origin against allowed origins list |
| Event system | .on(type, callback) / .off(type, callback) for type-safe message handling |
Integrated into both inject.js (floating panel) and sidepanel.js (side panel), replacing all raw postMessage calls with validated bridge communication.
Phase D: Agent Observatory
Built a real-time agent monitoring component — a window into what AI agents are doing at any moment.
AgentObservatoryComponent
3 files: .ts, .html, .scss (~1,670 lines total)
| Feature | Detail |
|---|---|
| Dual modes | compact (single-column, for extension) and full (multi-column grid, for dashboards) |
| Active agents | Avatar row showing who's working, with status indicators |
| Phase progress | Visual progress bar for ANALYZE → PLAN → EXECUTE → VERIFY workflow |
| Event stream | Scrolling real-time feed of agent actions, tool calls, delegations |
| Tool calls | Live display of what tools agents are invoking |
| Delegations | Agent-to-agent handoff visualization |
| Connection health | Indicator showing SSE/WebSocket connection state |
| Autonomy controls | (Full mode) Adjust agent autonomy level |
| Checkpoint approvals | (Full mode) Approve/reject agent decisions at checkpoints |
Observatory Route
/observatoryroute ingograb-aiapp (guard-free, like/panel)ObservatoryPageComponentwrapper reads URL params (?embedded=true&mode=compact)- Wired into extension side panel as a tab
Phase E: Universal Embed Components
Created drop-in Angular components for embedding the AI panel and observatory in any GoGrab app.
| Component | Selector | Purpose |
|---|---|---|
GoGrabAiPanelComponent |
<gograb-ai-panel> |
Wraps EmbeddableHostComponent for AI Creation Studio |
GoGrabObservatoryComponent |
<gograb-observatory> |
Wraps EmbeddableHostComponent for Agent Observatory |
Both handle auth forwarding, context sharing, and bridge initialization automatically. Exported from @libs-ux/embeddable-bridge.
Usage:
<gograb-ai-panel [context]="'space-builder'" [spaceId]="spaceId()" [tier]="'T1'" />
<gograb-observatory [mode]="'compact'" [spaceId]="spaceId()" />
Phase F: Chrome Extension as Universal Portal
Transformed the extension into a dual-panel gateway.
Side Panel
- Tab bar with Observatory and Studio tabs
- Tab state persisted in
chrome.storage.local - Each tab loads its own iframe (
/observatoryor/panel) - Bridge adapter re-initialized on tab switch
Floating Panel (Content Script)
- Mode toggle in panel header (Studio ↔ Observatory)
- Long-press/right-click on FAB for mode switching
iframe.srcswaps and bridge reinitializes
Cross-Panel Communication
- Studio sends
AI_ORCHESTRATE_REQUEST→ background service worker → Vitto API - Observatory's SSE connection picks up task events automatically
- Background service worker routes orchestration status between panels
Smart Context Injection
- Enriched
AI_CONTEXT_UPDATEmessages with host page context - On GoGrab apps: reads space ID, current route, builder context
- On external sites: reads page title, URL, selected text
Foundation: Backend Orchestration Layer
Built the backend infrastructure connecting the Chrome extension to Vitto's agent orchestration.
| Component | Detail |
|---|---|
VittoClientService |
Proxy in backend-ai-api that forwards orchestration requests to Vitto engine |
WorkspaceGroupService |
Dynamic workspace identity detection and group membership for multi-tenant orchestration |
OrchestrationService refactor |
Delegated task execution to Vitto engine (removed inline execution, ~585 lines removed) |
VittoEngineService |
Task decomposition, execution delegation, agent coordination in backend-vitto-api |
VittoController |
REST endpoints: POST /engine/orchestrate, GET /engine/events (SSE), GET /engine/status |
OrchestrationRelayController |
Event translation from Vitto events to CommandCenter for real-time dashboard updates |
| MCP orchestration handler | handleRequestOrchestration() in handoff.ts — agents can request orchestration via MCP tools |
| Agent gateway enhancement | Added orchestration action and agent requirement matching for task delegation |
Tooling
| Change | Detail |
|---|---|
dev-serve.js |
Added nxProject: 'app-gograb-ai' mapping — CLI name gograb-ai differs from NX project name |
generate-dev-ports.js |
New script to auto-generate dev-ports.js from .env.local for workspace-specific ports |
vite.config.ts |
PNA preflight plugin for dev server — handles Chrome Private Network Access OPTIONS requests |
By the Numbers
| Metric | Count |
|---|---|
| New files created | 28+ |
| Files modified | 25+ |
| Lines added | ~6,344 |
| Lines removed | ~585 |
| Net new lines | ~5,759 |
| Plan phases completed | 6/6 (A through F) |