Pane

A Chrome side panel that unifies Google Workspace through a single authenticated assistant surface. One interface, one identity layer, one coordinator — every Workspace service accessible through natural language.

How It Works

Pane replaces the workflow of switching between Gmail, Drive, Docs, Sheets, Calendar, Tasks, Contacts, Slides, and YouTube. A root coordinator agent receives every request and routes it to the appropriate Workspace specialist. Auth0 handles identity and provider access — agents never manage sign-in themselves.

flowchart LR
    A["Chrome Side Panel"] --> B["Auth0 Universal Login"]
    B --> C["Auth0 Access Token"]
    C --> D["Pane WebSocket start_session"]
    D --> E["FastAPI Backend"]
    E --> F["ADK Session State"]
    F --> G["main_agent"]
    G --> H["Workspace Specialist Agent"]
    H --> I["Token Vault Exchange"]
    I --> J["Google API"]
    J --> H
    H --> G
    G --> E
    E --> A

Loading

Architecture

flowchart TB
    subgraph Extension
        UI["React Side Panel"]
        AUTH["Auth0 + Chrome Identity"]
        STORE["Chrome Storage"]
    end

    subgraph Backend
        WS["FastAPI WebSocket"]
        CONNECT["Connected Accounts Router"]
        SESSION["Pane Session"]
        MAIN["main_agent"]
        TOOLS["Workspace Tool Layer"]
        TV["Token Vault"]
    end

    subgraph Providers
        GOOGLE["Google Workspace APIs"]
        YT["YouTube Data API"]
    end

    UI --> AUTH
    AUTH --> STORE
    UI --> WS
    AUTH --> CONNECT
    WS --> SESSION
    SESSION --> MAIN
    MAIN --> TOOLS
    TOOLS --> TV
    TV --> GOOGLE
    TV --> YT

Loading

Frontend

The frontend is a React-based Chrome side panel. It launches Auth0 login, stores the access token in extension storage, opens the backend WebSocket, and renders streamed events — thoughts, tool calls, tool results, agent transfers, auth-required states, and final responses.

Backend

The backend is a FastAPI service with a WebSocket runtime. It validates startup config, configures Token Vault access, accepts start_session and user_message messages, creates an ADK session per client, streams structured events back to the panel, and relays connected-account flows to Auth0.

Protocol

Server-to-client event types:

Event	Meaning
session_ready	Backend session initialized
agent_thought	Streamed internal reasoning text
agent_delta	Streamed assistant text chunk
tool_call	Tool invocation about to execute
tool_result	Tool completed with structured output
agent_transfer	Coordinator transferred to a specialist
auth_required	Workspace access blocked — missing connection or scope
agent_final	Final assistant text for the turn
agent_error	Runtime or protocol failure

Agent System

Pane uses a root coordinator (main_agent) that routes requests to specialist sub-agents.

flowchart LR
    U["User Request"] --> M["main_agent"]
    M --> T["time_agent"]
    M --> GM["gmail_agent"]
    M --> DR["drive_agent"]
    M --> DOC["docs_agent"]
    M --> SH["sheets_agent"]
    M --> SL["slides_agent"]
    M --> CAL["calendar_agent"]
    M --> TA["tasks_agent"]
    M --> CO["contacts_agent"]
    M --> YT["youtube_agent"]

Loading

Agent	Purpose
main_agent	Root coordinator — routes every request
time_agent	Time and timezone resolution
gmail_agent	Search, thread read, draft creation, draft send
drive_agent	File discovery, create/update/delete text files
docs_agent	Read, create, append, prepend, replace text
sheets_agent	Spreadsheet metadata, read ranges, create, update, append, clear
slides_agent	Deck inspection, create text slides, replace text, duplicate slides
calendar_agent	Schedule lookup, create/update/delete events
tasks_agent	Task list management, create/update/complete/reopen/delete tasks
contacts_agent	People lookup and recipient resolution
youtube_agent	Video, channel, and playlist metadata search

Workspace Coverage

Surface	Operations
Gmail	Search inbox, read threads, create drafts, send drafts
Drive	Search files, inspect metadata, create/update/delete text files
Docs	Read, create, append, prepend, replace text
Sheets	Create spreadsheets, inspect tabs, read ranges, update cells, append rows, clear ranges
Slides	Create presentations, inspect decks, create text slides, replace text, duplicate slides
Calendar	Inspect schedule, search date ranges, create/update/delete events
Tasks	Inspect lists, create/update tasks, change task state
Contacts	Resolve people and likely recipients
YouTube	Search and inspect metadata for research workflows

Authentication

Auth0 is central infrastructure, not an add-on. Pane authenticates the user before becoming usable and uses Auth0 connected accounts with Token Vault to access Google services on demand.

Sign-In

The panel uses Auth0 Universal Login through the Chrome Identity API. On success, the extension exchanges the authorization code for an access token and stores it locally.

Connected Accounts

When a Workspace tool needs provider access:

1. The extension acquires a My Account token with connected-account scope
2. The backend relays start and complete requests to Auth0
3. Auth0 completes the provider connection flow
4. Subsequent tool invocations exchange the Auth0 user token for provider access tokens on demand

sequenceDiagram
    participant P as Pane Panel
    participant A as Auth0
    participant B as Pane Backend
    participant G as Google Provider

    P->>A: User login via Universal Login
    A-->>P: Auth0 access token
    P->>B: start_session(auth0_token)
    B-->>P: session_ready
    P->>B: connected-accounts/start
    B->>A: Relay connected-account start
    A-->>P: provider connect URL
    P->>G: User approves Google access
    G-->>A: authorization result
    P->>B: connected-accounts/complete
    B->>A: Relay completion
    A-->>B: connected account ready

Loading

Auth Failure States

State	Behavior
signed_out	Auth screen shown, backend session not started
missing_connection	auth_required emitted with connect URL
missing_scope	auth_required emitted, reconnect flow triggered
expired_token	auth_required emitted, reconnect flow triggered
agent_error	Error surfaced in thread

Repository Structure

Path	Purpose
src/	React extension UI
public/manifest.json	Chrome extension manifest
public/background.js	Side panel enablement and tab behavior
backend/main.py	FastAPI entrypoint
backend/server/	WebSocket protocol and connected-account routes
backend/auth/	Session auth and Token Vault integration
backend/agents/	Main and specialist agents
backend/tools/	Workspace tool implementations
backend/tests/	Backend test suite

Setup

Prerequisites

• Node.js
• pnpm
• Python 3.12
• Chrome
• Auth0 tenant with connected accounts configured
• Google API key for Gemini/ADK model access

Frontend Environment

VITE_AUTH0_DOMAIN=
VITE_AUTH0_CLIENT_ID=
VITE_AUTH0_AUDIENCE=
VITE_BACKEND_WS_URL=ws://127.0.0.1:8080/ws

Backend Environment

backend/.env:

GOOGLE_API_KEY=
PANE_MODEL=gemini-3-flash-preview
PANE_HOST=127.0.0.1
PANE_PORT=8080
PANE_LOG_LEVEL=info
AUTH0_DOMAIN=
AUTH0_CLIENT_ID=
AUTH0_CLIENT_SECRET=
AUTH0_AUDIENCE=
AUTH0_TOKEN_VAULT_CLIENT_ID=
AUTH0_TOKEN_VAULT_CLIENT_SECRET=

Commands

# Install frontend dependencies
pnpm install

# Build the extension
pnpm build

# Watch during development
pnpm dev

# Run the backend
source backend/.venv/bin/activate
uvicorn backend.main:app --reload --host 127.0.0.1 --port 8080

# Run backend tests
pnpm backend:test