# Agent 007 — Design System ## Identity Agent 007 is a pixel office for managing AI terminal agents. The aesthetic is dark, terminal-native, with spy/espionage personality. UI should feel like a mission control dashboard — calm, information-dense, utility-first. **Logo:** Golden martini glass (filled, with olive) placed inline between "Agent" and "007" in the app title. Favicon uses the same martini glass SVG. **Brand color:** Gold `#d4a847` — used as the accent color throughout. ## Naming Conventions **Agents** — Spy codenames from a fixed pool: `Shadow, Phantom, Viper, Cipher, Raven, Onyx, Echo, Spectre, Falcon, Ghost, Dagger, Mirage, Cobra, Apex, Ember` Random assignment, recycled on agent death. User can override with custom name at spawn, or rename a running agent later (double-click its tab, or the pencil button in the terminal header; owner only, max 40 characters, must be unique among live agents and orphans). A rename changes only the label: the worktree directory and branch keep the original codename, since moving the directory under a live PTY would strand the agent's cwd. The new name reaches every connected client and the office, explorer and job card at once, and survives a server restart. **Branches** — Cocktail names with `{git-username}/` prefix: `bill/vesper, bill/martini, bill/gimlet, bill/negroni, bill/sidecar, bill/daiquiri, bill/manhattan, bill/mojito, bill/paloma, bill/sazerac, bill/aviation, bill/bellini, bill/spritz, bill/collins, bill/julep, bill/highball, bill/rickey, bill/fizz` Git username read from `git config user.name`, lowercased, spaces to hyphens. Falls back to `agent` if not configured. User can override with custom branch name. **Start point** — every agent branch starts from `origin/`, fetched first, where `` comes from the remote's own HEAD (falling back to `main`, then `master`). Not from HEAD of the main checkout: that silently started agents on a stale local base, or worse, on whatever unrelated branch the user had checked out, whose half-finished work then rode along in the agent's PR. Degrades cleanly — no network or no remote falls back to the local base branch, and a repo with neither falls back to HEAD. Overridable per spawn via Advanced -> "Start from" for the "branch off what I'm working on" case. ## Color System Two themes: dark (default) and light. Gold accent in both. Persisted to localStorage. ### Dark Theme (default) ```css --bg-dark: #090a0c /* deepest: headers, panel tops */ --bg-panel: #0f1114 /* panels: explorer, terminal */ --bg-office: #131519 /* pixel office canvas */ --bg-terminal: #07080a /* terminal viewport */ --bg-tabs: #0d0e11 /* tab bar */ --border: #1f2228 --text: #d8dce4 /* primary text */ --text-muted: #9ca3af /* secondary text (agent names, buttons) */ --text-dim: #6b7280 /* tertiary text (branches, labels) */ --accent: #d4a847 /* gold: interactive elements, brand */ ``` ### Light Theme (warm low-glare paper, Flexoki-style neutrals) ```css --bg-dark: #e6e4d9 /* headers, sidebars */ --bg-panel: #f2f0e5 /* content panels */ --bg-office: #dad8ce /* pixel office */ --bg-terminal: #f2f0e5 /* terminal */ --bg-tabs: #e6e4d9 /* tab bar */ --border: #c6c3b6 --text: #1c1b1a /* warm near-black ink */ --text-muted: #62615c --text-dim: #6b6a64 --accent: #7d611f /* darker gold: 4.5:1+ on panel/header creams, 4.1:1 non-text on the office canvas */ --accent-contrast: #fff /* ink on accent fills and message-state chips (#111 on dark) */ --hover: rgba(0,0,0,0.05) /* row-hover overlay (white-tint on dark) */ --state-working: #8c6200 --state-waiting: #1a7f37 --state-message: #aa540f --state-idle: #7b7973 --state-disconnected: #c8222e --state-recording: #c8222e ``` Surfaces stay in the cream band (~L*90) rather than near-white so long terminal sessions don't glare. `test/theme-tokens.test.js` guards every hex value in the fence above against the CSS tokens in `style.css`, checks that every `:root` token has a light override, and keeps the terminal's background/foreground/cursor on the same values. The 16-color ANSI palette below is hand-picked and not auto-guarded. ### State indicators (dark theme values; light values in the fence above) ```css --state-working: #d4a847 /* yellow: agent is producing output */ --state-waiting: #7fbc6a /* green: agent is at a prompt */ --state-message: #e0853a /* orange: agent needs attention */ --state-idle: #4a4e58 /* gray: no activity */ --state-disconnected: #c44040 /* red: process exited */ --state-recording: #c44040 /* red: voice input mic is live (same red as disconnected) */ ``` ### Terminal ANSI Colors (dark theme — GitHub dark palette) ``` black: #6e7681 red: #ff7b72 green: #3fb950 yellow: #d29922 blue: #58a6ff magenta: #bc8cff cyan: #76d9e6 white: #c9d1d9 brightBlack: #8b949e brightRed: #ffa198 brightGreen: #56d364 brightYellow: #e3b341 brightBlue: #79c0ff brightMagenta: #d2a8ff brightCyan: #a5d6ff brightWhite: #f0f3f6 ``` ### Terminal ANSI Colors (light theme — GitHub light on warm paper) ``` black: #24292f red: #cf222e green: #1a7f37 yellow: #7d4e00 blue: #0969da magenta: #8250df cyan: #1b7c83 white: #5c6570 brightBlack: #57606a brightRed: #a40e26 brightGreen: #1a7f37 brightYellow: #633c01 brightBlue: #0969da brightMagenta: #8250df brightCyan: #3192aa brightWhite: #24292f ``` White and the brights are darkened from stock GitHub-light, which assumes a #ffffff ground; bold blue/magenta deliberately reuse the normal-weight colors because the stock brights wash out on the cream ground. ## Typography - **Font stack:** `'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace` - **Sizes:** - 10px — branch labels, diff viewer, loading text - 11px — explorer items (files, agents), form labels, panel labels (REPOS, the job columns, Finished; uppercase, letter-spacing: 2px), the job board toolbar's labels. 11px is the floor for labels that name a field or a section; 10px stays on the branch names and diff/loading text above, and on job card metadata, chips and actions (11px on a phone); 9px on some badges and form hints - 12px — terminal tabs, form inputs, repo/branch in terminal header - 13px — terminal header agent info - 14px — app title (bold, letter-spacing: 1px) - **Uppercase** goes on a label's own words, never on a container: the job form's labels wrap their word in `.job-form-label` so the select, input or hint nested in the `