Headbox Console

The product's UI. Every component below is reproduced with the Console's own design tokens, so what you see is the product, not an impression of it.

Correction: Headbox has a design system, and this is it

An earlier version of this page claimed Headbox shipped no UI and no design system. That was wrong. It was read from the CLI repository alone, but the Console ships from a different codebase, and it carries a disciplined system: 30 CSS custom properties, three themes (dark, medium, light), a real 6 / 10 / 14 radius scale, Inter and JetBrains Mono, and a 4px spacing rhythm.

The most distinctive part is the accents. --c-ag #6366f1, --c-cc #f97316, --c-cx #22c55e and --c-cd #e879f9 are not a palette. They are an agent identity system. Indigo means Antigravity in every theme; the wordmark is a gradient of three of them. They are deliberately theme-invariant: medium and light override only backgrounds, borders, text and shadow, never an accent, a radius or a font.

The other defining trait is density. Around 80% of the Console's text is 9-12px. It is reproduced at those sizes here. If it reads small, that is the product.

Components

Tokens

Themes

6/10/14

Radii

Font files

Two things reproduced as shipped, not as designed

No icon system. In 5,274 lines there is no icon library and no SVG sprite: just 2 hand-written SVGs and 49 unique emoji, including the theme switcher. Emoji cannot take currentColor, so they ignore the theme system entirely. Substituting a real icon set here would look more professional and be a lie.

No font files ship. Inter and JetBrains Mono load from a CDN; offline, the product silently falls back to the system stack. This site loads them the same way for the same reason: see the CSP note in site/_headers.

App Shell & Navigation

The frame every workspace renders inside. The shell is a mode machine: Live restyles the whole grid rather than swapping one panel.

🖼️

App shell Shipped

Three-column grid: filter rail, session sidebar, main. Five state classes reshape it.

Headbox Console · public/index.html:110 · .app #appRoot

States

.live-mode

.filter-rail-open

.mobile-sidebar-open

.mobile-filter-mode

.sidebar-collapsed

🌈

Logo Shipped

The wordmark is a gradient of the three agent colours: indigo, orange, green. The brand IS the agent identity system.

Headbox Console · public/index.html:115 · .logo

Dark

Headbox

Light (darkened ramp)

Headbox

🧭

Primary nav Shipped

Headbox / Live / Integrations / Filters. Live carries the green accent.

Headbox Console · public/index.html:117 · .header-primary

Default

📊

Header stat chips Shipped

Per-agent totals, dot-coloured by agent identity.

Headbox Console · public/index.html:1220 · .stat-chip

Default

AG 42 CC 31 CX 18

🎨

Theme switcher Shipped

Three themes: dark, medium, light. Switching is manual, with no prefers-color-scheme support.

Headbox Console · public/index.html:5254 · .theme-toggle

dark (default)

dark default

medium

medium medium

light

light light

Filtering & Search

How you find one thread among hundreds. The filter rail physically relocates the live filter DOM at ≥1100px rather than duplicating it, one source of truth, two placements.

🔎

Search Shipped

Debounced cross-agent full-text search.

Headbox Console · public/index.html:4481 · .search-input

Empty

Filled

🎚️

Filter rail Shipped

Desktop ≥1100px. Relocates the real filter nodes beside sessions; hidden below that width.

Headbox Console · public/index.html:1641 · .filter-rail #filterRail

Open

Agent

AGCC

🏷️

Filter chip Shipped

One toggleable value. Eight colour modifiers, four agent identities plus green/amber/purple/red.

Headbox Console · public/index.html:713 · .filter-chip

Inactive

All

Active. Agent colours

AGCCCXCD

🎛️

Agent chip row Shipped

All / AG / CC / CD / CX across the top of the rail.

Headbox Console · public/index.html:711 · .filter-bar

Default

AllAGCCCDCX

↕️

Sort Shipped

Seven orders: date, size, name, artifact count, each way.

Headbox Console · public/index.html:3365 · .sort-select

Default

Session List

The persistent left rail, not a workspace you enter. On mobile it becomes a focus-trapped drawer.

🗃️

Session card Shipped

One session. Selected state is agent-tinted, so the rail stays colour-coded to who did the work.

Headbox Console · public/index.html:3202 · .convo-card

Default

AG 2h

Refactor auth guard

Selected (Claude)

CC 2h

Release notes pass

Selected (Codex)

CX 2h

Migration dry-run

⚪

Status dot Shipped

Session lifecycle: active, orphaned, ghost, archived.

Headbox Console · public/index.html:3221 · .status-dot

All four

activeorphanedghostarchived

🏅

Agent badge Shipped

AG / CC / CD / CX in the agent identity colours.

Headbox Console · public/index.html:3220 · .agent-badge

All four

AGCCCDCX

🔖

Session badges Shipped

Nine conditional markers: sub-agent, archived, worktree, no-headbox, counts. Note "⬡ NO HEADBOX" is itself a Headbox governance signal surfaced in the UI.

Headbox Console · public/index.html:3224 · .badge

Assorted

subworktree ⬡ NO HEADBOX3 md12 img

🚀

Live launch Shipped

Only rendered when the thread is actually readable: capability shown, not promised then failed.

Headbox Console · public/index.html:3214 · .convo-live-launch

Available

Not readable. Absent

(no launcher: thread not readable)

Headbox Dashboard

The governance hub: 13 anchored sections covering settings, artifacts, automation, team, plugins and projects. This is the CLI's data given a face, and it is the part the roadmap still calls "planned".

🎯

Hero Shipped

Project identity and the path Headbox is governing.

Headbox Console · public/index.html:1283 · .headbox-hero

Default

headbox

Instruction layer · 24 plugins · 5 team

~/dev/headbox

🧭

Section nav Shipped

Nine anchor links; the dashboard is one long scroll, not routes.

Headbox Console · public/index.html:1326 · .headbox-nav

Default

SettingsArtifactsAutomationTeamPluginsProjects

📈

Stat block Shipped

Label, value, note.

Headbox Console · public/index.html:1283 · .headbox-stat

Row

Plugins

all valid

Projects

1 stale

Proposals

none pending

🎫

Status badge Shipped

Three semantic states: good, warn, info. The Console's entire status vocabulary.

Headbox Console · public/index.html:1283 · .headbox-badge

All three

activestaleavailable

🪟

Panel Shipped

The dashboard's section container: header, title, note, body.

Headbox Console · public/index.html:1283 · .headbox-panel

Default

Plugins21

All plugins valid.

🧮

Table Shipped

Sortable rows with tools: the projects and plugins views.

Headbox Console · public/index.html:1283 · .headbox-table

Default

Project	State
apollo	active
borealis	stale

💻

CLI result Shipped

The Console shells out to the real CLI and shows you the output. It does not reimplement the logic, one source of truth.

Headbox Console · public/index.html:337 · .headbox-cli-result

Shown

OK: 24 plugins checked

Hidden (default)

(no result: .headbox-cli-result is display:none until .show)

⚠️

Warning list Shipped

Surfaces what is wrong before you have to go looking.

Headbox Console · public/index.html:2396 · .headbox-warning

Default

Project borealis has not sent a heartbeat in 9 days.

📝

Artifact editor Shipped

Edits governed artifacts in-app while honouring the same access rules the CLI enforces. Proposal-required stays proposal-required.

Headbox Console · public/index.html:2516 · renderHeadboxArtifactEditor()

Preview / diff modes

🔀

Diff line Shipped

add / remove / same. Includes a synthetic "matches saved version" same-row.

Headbox Console · public/index.html:360 · .headbox-diff-line

All three

+ Always branch before committing.

- Commit directly to main when small.

Run validate before every release.

🔑

Key/value Shipped

Settings rows.

Headbox Console · public/index.html:2591 · .headbox-kv

Default

team modesidecar

actordevbox

stale after7 days

🥇

Priority list Shipped

What to deal with first, with the reason attached.

Headbox Console · public/index.html:1283 · .headbox-priority

Default

borealis is stale

No heartbeat in 9 days

📰

Digest list Shipped

Rolling change summaries so a returning user can catch up.

Headbox Console · public/index.html:2659 · .headbox-digest

Default

Plugin set changed

feature-tracking activated · 2h ago

📋

Mini list Shipped

Compact title + meta rows used across sections.

Headbox Console · public/index.html:1283 · .headbox-mini-list

Default

auth guardplanned

log formatterdrifted

Conversation Detail & Transcript

One session opened up. The meta row is the widest variant surface in the app: 14 conditional chips.

📄

Detail header Shipped

Title and identity for the open session.

Headbox Console · public/index.html:3778 · .detail-header

Default

Refactor auth guard

01J8ZK…4F2A

🧷

Meta chips Shipped

14 conditional chips: status, worktree, branch, headbox presence, sub-agent, scheduled, groups.

Headbox Console · public/index.html:3814 · .detail-meta-item

Assorted

active worktreemain⬡ headboxsubagent

No headbox

⬡ NO HEADBOX

🗂️

Artifact tabs Shipped

Built dynamically per session. Transcript shows 🔒 when unreadable rather than a tab that fails on click.

Headbox Console · public/index.html:3786 · .artifact-tab

Default

OverviewTranscriptREADME.mdImagesVersions

Transcript locked

Overview🔒 Transcript

💬

Transcript message Shipped

Three roles, each with its own left border: user (indigo), assistant (orange), system (muted).

Headbox Console · public/index.html:470 · .transcript-msg

All three roles

Refactor the auth guard before the release cut.

Reading src/auth/guard.ts…

Session resumed.

🔧

Tool action Shipped

A collapsible record of a tool call inside the transcript.

Headbox Console · public/index.html:470 · .tool-action

Collapsed

▸ Read src/auth/guard.ts

🆔

Copyable id Shipped

Click to copy.

Headbox Console · public/index.html:3778 · .detail-id

Default

01J8ZK…4F2A ⧉

📊

Overview Shipped

The session at a glance; skipped entirely for transcript-only threads.

Headbox Console · public/index.html:3919 · renderOverview()

Default

42 messages · 3 artifacts · 2h 14m

📎

File row Shipped

One artifact in a section.

Headbox Console · public/index.html:4002 · fileRow()

Default

📄PLAN.md4.2 KB

🖼️

Gallery Shipped

Screenshots and recordings, size-adjustable.

Headbox Console · public/index.html:4587 · updateGallerySize()

Default

📝

Markdown body Shipped

Rendered markdown. Light theme re-tints inline code to purple, one of nine hand-tuned light exceptions.

Headbox Console · public/index.html:2571 · .markdown-body

Default

Plan
Refactor the guard, then npm test

Integrations

Local capability status, stated truthfully: the Console distinguishes "the runtime is present" from "this is authenticated and will work".

🔗

Integration card Shipped

One adapter, its capabilities, and a settings/privacy disclosure.

Headbox Console · public/index.html:1250 · .integration-card

Connected

Headbox CLI connected

cli/headbox.js · v0.8.0

Available (not authenticated)

Task system available

Adapter configuration pending

🚦

Status pill Shipped

Two states only: connected, available.

Headbox Console · public/index.html:1250 · .integration-status

Both

connectedavailable

Modals, Overlays & Feedback

Ten modals plus the lightbox and workspace changer, and the small primitives that carry state.

☑️

Bulk bar Shipped

Appears only with a selection.

Headbox Console · public/index.html:4763 · .bulk-bar

Active

3 selected

Hidden (no selection)

(.bulk-bar.hidden: no selection)

⏬

Load more Shipped

Rendered only when hasMore. Page size is 25.

Headbox Console · public/index.html:3236 · .load-more

Default

🎨

Group colours Shipped

Twelve: the four agent identities plus eight more.

Headbox Console · public/index.html:4942 · GROUP_COLORS

All twelve

🏷️

Group chip Shipped

Coloured per group.

Headbox Console · public/index.html:4925 · renderGroupFilters()

Default

releaseinfra

⏳

Spinner Shipped

The loading primitive.

Headbox Console · public/index.html:110 · .spinner

Default

🕳️

Empty state Shipped

Reused across surfaces with per-context height.

Headbox Console · public/index.html:110 · .empty-state

Default

Select a conversation

🔘

Button Shipped

A primitive with six contextual skins rather than a component with modifiers: .primary, -sm, -live, -icon.

Headbox Console · public/index.html:110 · .btn

Skins

🎟️

Badge Shipped

The generic marker primitive.

Headbox Console · public/index.html:110 · .badge

Default

mdimgrec

Recovery

A separate page (recovery.html) for when an agent's session store breaks. It forks the tokens rather than importing them. Noted below, because it will drift.

📂

Paths section Shipped

Collapsible list of where it looked.

Headbox Console · public/recovery.html · .paths-section

Collapsed

Scanned paths (4)

🧾

Stat card Shipped

Recovery counts.

Headbox Console · public/recovery.html · .stat-card

Default

312

Found

Orphaned

Lost

🍴

Forked tokens Shipped

recovery.html redefines the tokens instead of sharing them, with a different accent set and no theme support. Shown because it is a real drift risk, not a design choice.

Headbox Console · public/recovery.html:14-39

The divergence

same bg / text / radius

differs --c-cyan: #06b6d4 · no --c-cc/--c-cx/--c-cd

missing no theme support