Operator · Design system

Elements

Tokens, type, and space

Colour comes in two tiers. --page-* is the document ground, a cooler slate; --op-* is the app's own chrome, Mission Control, ported from the app. A specimen has to read as an object on the page, not as the page. The panel kit below is aliased onto the --op-* tier, so components never hard-code a colour.

App chrome

--op-* · aliased to the panel kit

What every specimen is painted with. These chips read the resolved custom properties, so they update live when you switch light and dark.

--bg

--bg-deep

--surface

--fg

--muted

--accent

--accent-fg

--border

--add-fg

--del-fg

Page ground

--page-*

The document the specimens sit on. Deliberately a cooler slate than the app chrome above, so a panel reads as an object placed on the page.

--page-bg

--page-panel

--page-fg

--page-muted

--page-border

--page-accent

--warn

--stop

Type

--sans · --mono

Two faces, no display face. Archivo carries headlines and prose, leaning on weight and tight tracking rather than a third typeface; JetBrains Mono handles everything data: code, labels, metrics, timings, and the small tracked section heads.

Headline · Archivo 600 · --sans

You run the agents.

Title · Archivo 600

The work, made legible.

Body · Archivo 400 · --sans

These are the real views, rebuilt in the browser. No screenshots.

Mono · JetBrains Mono 400 · --font-mono

delegate › write-tests · 3.2s · +142 −38

Micro · mono, uppercase, tracked

A look inside

Space

--sp-1 … --sp-7

One ramp, and every gap on this page is on it. Each bar below is drawn at the size of the token it names. A measurement that is not on the ramp is a bug in the layout, not a special case.

--sp-10.375rem · inside a chip, label to value

--sp-20.75rem · heading to its own paragraph

--sp-31.25rem · prose to specimen, grid gutter, card inset

--sp-42rem · between type specimens, between views

--sp-53rem · between blocks inside a section

--sp-64.5rem · each side of a section rule, so 9rem in total

--sp-77rem · above the footer, and the page's own foot

Components

The kit

Small, composable pieces. Class names sit beneath each one, so you can lift them straight from styles.css.

Panel shell

.panel · .panel-bar · .panel-foot

The frame every view sits in: a title bar with faux traffic lights, a body, and a metadata foot.

panel-name · context flag

body slot

meta leftmeta right

fable opus sonnet haiku opusplan

Model badges · .badge.b-fable / .b-opus / .b-sonnet / .b-haiku / .b-plan · the flagship gets the only fill

Meters · .bar > .bar-fill · progress .ppbar

a human prompt

an agent reply

Chat bubbles + caret · .bubble.is-user / .is-agent · .caret

✓completed step

▸in-progress step

○pending step

Plan todos · .todo.done / .active (colour + glyph, no fills)

running session⤷ 2running

your-turn sessionyour turn

idle sessionidle

Status rows · .sess.running / .waiting (accent border = live)

✓a shipped taskcodediff ready

◆a dispatched taskdesignrunning

○a backlog taskbacklog

Task rows + lane chip · .task.done / .active · .task-lane

Tree rows

.tree · .row[style*="--d"] · .is-live

Depth is a CSS variable; the L-connectors and the live-row treatment are pure CSS.

▸lead taskorchestratoropusrunning

◇Reada/file.ts0.4s

⤷delegate › subtasksonnet2.1s

◆Edita/file.test.ts3.2s

◇Bashnpm testqueued

Diff lines

.diff · .dhunk · .dline.add / .del

The one place we step outside the accent: add/remove use fixed green/red tokens, because that reads as “diff” everywhere.

@@ -1,4 +1,5 @@ context

unchanged line

- removed line

+ added line

+ another added line

Buttons

.btn-primary · .btn-ghost

Mono, uppercase, square-cornered. The primary is the only accent fill on the page; the ghost is a bordered echo of it.

Download for macOS Release notes

The one house rule: “live” is a text flag, a ticking value, or an accent border. A row takes that border on its left edge; a card turns its whole border and never carries a left-edge flag. No pulsing or glowing status dot: it reads as a generic AI tell. The only animation-as-liveness is the text caret (.caret) and the duration tick, and both respect prefers-reduced-motion.

Motion

What is allowed to move

Motion here always means state change: a value ticking, text streaming, a row handing off. On the landing every panel loops its own small state machine while it is on screen, each on its own period, the way the mark's dots each twinkle on their own cycle. Panels pause when they scroll away; under prefers-reduced-motion the static markup is the whole experience.

◆ Edit auth/session.test.ts 3.2s

Duration tick · the in-flight tool counts up 10×/s; the only animation is the number changing

streaming a reply

Text caret · .caret blinks in hard steps like a terminal cursor, never fades

compacting…

Phase wander · session phases drift on their own desynced timers

panel enters: rise 16px, fade in

Enter reveal · panels rise as they scroll in, staggered 110ms per batch, IntersectionObserver-gated

Views

Assembled

The components composed into the real panels. These are lifted verbatim from the landing: the same markup, the same classes.

projects · 19 filter… 3 agents at work

Active

operator2 running

~/Developer/operator4m

el-encanto1 needs you

~/Developer/el-encanto2h

mantel6 lanes

~/Developer/mantel1d

Previous · 11

FastTrack~/Developer/FastTracklast ran 6w ago

uwazi_web~/Documents/uwazi_weblast ran 5w ago

A shelved project recedes structurally (card → row), never by group opacity.

scoped to operator v0.15.1

Projects

▾operator2 running

Coderunning

Designyour turn

Researchidle

▸el-encanto1 needs you

Plan usageAgents

operator · homeBacklog 1 · Running 1 · Done 2

Refactor the auth modulerunning code · in its own worktree

Fix the tray icon in dark modedone · green design · +14 −3, check passed

One list at two widths. The open project's agents unfold beneath it.

dispatches · operator 1 needs approval

Today

Operator→ Code18:54delivered

Fix the tray icon in dark mode. Brief in dev/briefs/tray.md.

Research→ Code19:14held · needs your approval

Implement the reply sentinel per dev/briefs/reply-impl.md.

Approve & sendDecline

Code→ Research19:26not delivered · lane wasn't running

Where does the dispatch parser live now?

Nothing here retries on its own. Every chip says why.

transcript · refactor auth live

Refactor auth so the token is passed explicitly, then update the tests.

I'll thread the token through refresh(), then adjust the suite.

◇Read 7 files

◇Searched 3 times

◇Delegated to a subagentwrite-tests

Edited auth/session.test.ts

EditingStop

orchestration · session 7c1f live

▸refactor auth moduleorchestratoropusrunning

◇Readsrc/auth/session.ts0.4s

⤷delegate › extract-typeshaiku2.1s

⤷delegate › write-testssonnet3.2s

◆Editauth/session.test.ts3.2s

◇Bashnpm testqueued

3 tools2 subagentsworktree auth-refactor

team · operator 2 running

orchestratorfablerunning

codeopusrunning

designsonnetyour turn

Ready · 3

researchsonnetidle

reviewopusidle

qahaikuidle

Staff the project once. Each lane pins a model, effort, and permissions; a session launches against it in one click.

usage · last 7 days 25.6M tokens

sonnet12.7M

in 2.8Mout 610Kcache 9.3M

haiku7.2M

in 5.1Mout 120Kcache 2.0M

opus5.6M

in 1.2Mout 340Kcache 4.1M

API time14m 02s

Wall time1h 38m

Token counts parsed from your own local transcripts: what drove usage, and where the time went. Nothing sent anywhere.

agents 5 defined

extract-typeshaikuproject

write-testssonnetproject

security-reviewopususer

plan-architectopusplanproject

docs-writerhaikuuser

Pick the model per agent: cheap models for grunt work, the pricey one where it pays off.

The landing runs the full set of twelve views: the board, terminal, worktrees, fan-out, plan, conversation, sessions and more. See them in context →

The parts the panels are made of.