Skip to main content

Browser Extension

The official browser extension for VibeControls surfaces your agents, vibes, sessions, and notes from any web page, with context-aware badges for GitHub repos, pull requests, and Jira tickets.

Features​

  • Popup dashboard — workspace stats, active sessions, recent vibes, agent health
  • Side panel command palette — search, create, and manage vibes, sessions, notes, agents, and AI chat
  • Context-aware page badge — detects GitHub repos/PRs and Jira tickets and links them to the matching vibe
  • Session mini-player — watch live session output in a floating overlay on any page
  • One-click LLM context — copy a signed, scoped URL for the active vibe to paste into Claude / ChatGPT / Cursor
  • Dark/light theme — user preference persisted in extension storage

Install​

The extension is distributed via the Chrome Web Store. For local development or sideloading:

git clone https://github.com/algoshred/vibecontrols-browser-extension.git
cd vibecontrols-browser-extension
bun install

Environment selection​

The active target environment is selected at build time only via BURDENOFF_ENV. The default is prod.

VariableValuesDefaultDescription
BURDENOFF_ENVlocal | alpha | prodprodSelects the default GraphQL gateway endpoints bundled into the extension.

Examples:

# Production build (default)
bun run build

# Local development build
BURDENOFF_ENV=local bun run dev

# Alpha build
BURDENOFF_ENV=alpha bun run build

The extension never reads BURDENOFF_ENV at runtime. End users can still override endpoints from the options page, but the defaults are baked into the bundle.

Endpoints​

VibeControls is a workspace product, so workspace-scoped operations use the public workspace gateway and global/tenant operations use the public global gateway:

EnvironmentWorkspace gatewayGlobal gateway
prod (default)https://graphqlworkspaces.burdenoff.com/workspaces/graphqlhttps://graphql.burdenoff.com/global/graphql
alphahttps://alphagraphqlworkspaces.burdenoff.com/workspaces/graphqlhttps://alphagraphql.burdenoff.com/global/graphql
localhttp://localhost:4003/workspaces/graphqlhttp://localhost:4000/global/graphql

Authentication uses the OAuth2 device-code flow against the global gateway, identical to the VibeControls CLI.

Build​

# Production build → dist/
bun run build

# Development build with watch
BURDENOFF_ENV=local bun run dev

# Development build (single run)
BURDENOFF_ENV=local bun run build:dev

# Clean dist/
bun run clean

# Build and package extension.zip
bun run zip

Load in Chrome​

  1. Run bun run build (or BURDENOFF_ENV=local bun run build for local dev).
  2. Open Chrome and navigate to chrome://extensions/.
  3. Enable Developer mode.
  4. Click Load unpacked and select the dist folder.
  5. Open the extension popup and sign in with SSO.
  6. Select a workspace when prompted.

Test​

# Run all tests
bun run test

# Run tests in watch mode
bun run test:watch

# Run with coverage
bun run test:coverage

# Production build smoke test
bun run smoke

# Full sanity check (format + lint + type-check + build + test + smoke)
bun run sanity

Code quality​

bun run lint          # ESLint
bun run lint:fix      # ESLint with auto-fix
bun run format        # Prettier
bun run format:check  # Prettier check
bun run type-check    # TypeScript

Project structure​

src/
├── api/              # GraphQL clients and API modules
│   ├── auth/         # OAuth + workspace token flows
│   ├── graphql/      # GraphQL client with retry logic
│   └── *.ts          # Entity API modules (agents, vibes, sessions, ...)
├── config/           # Environment resolution
├── core/             # Storage wrapper
├── features/         # Context menus, health, notes, search, WebSocket
├── types/            # TypeScript definitions
├── ui/               # Popup, options, side panel
├── background.ts     # Service worker
└── content.ts        # Content script

public/               # Manifest, icons, styles
tests/                # Jest unit tests
scripts/              # Build helpers and smoke tests

Typical user flow​

  1. Install the extension and open the popup.
  2. Click Sign in with SSO to start the OAuth2 device-code flow.
  3. Approve the code in the browser tab, then return to the popup.
  4. Select a workspace from the list.
  5. Use the popup to see stats, recent vibes, and active sessions.
  6. Open the side panel (Ctrl+Shift+V / Cmd+Shift+V) to search, create vibes/sessions/notes, or chat with the AI assistant.
  7. Visit a GitHub repo or Jira ticket linked to a vibe to see the floating VibeControls badge.

Source​

  • Repository: github.com/algoshred/vibecontrols-browser-extension
  • Published on the Chrome Web Store

Next steps​