# Agent Command Center — Build Guide How the Clawmates **Agent Command Center** page is built, and the rules to follow to recreate or extend it. The `.dc.html` in this folder is the working reference — open it directly in a browser. This doc is the recipe + the prompt to regenerate it. --- ## 1. What this page is A single-agent **command center** — the close-up view of one agent in the fleet. It replaces the old "scrolling profile" (big avatar + year-long heatmap on top, live status buried at the bottom) with an operator surface where **live state and controls sit above the fold** and identity shrinks to a header strip. It answers, at a glance: 1. **Is it healthy and how hard is it working?** → metrics band (throughput, spend, loops, memory, doors) 2. **What is it doing right now?** → LIVE column (working-on-now, reasoning stream, activity) 3. **What is its brain made of?** → BRAIN column (system prompt, personality, skills, capabilities) 4. **What can it touch, remember, and is it safe?** → SURFACE column (tools·doors, memory, safety) 5. **What's on its desktop?** → pinned right-side **computer pullout** (apps, now-running, dock) The core interaction idea: **read on the left/center, act on the right.** Identity is small; the work is big. --- ## 2. The layout system Fixed full-viewport shell (`100vw × 100vh`, `overflow:hidden`). Lock this skeleton first. ``` ┌──────────────────────────────────────────────────────────────────┐ │ TOP BAR (54px) logo · breadcrumb · live pill · tok/min · avatar │ ├──┬─────────┬──────────────────────────────────────────┬───────────┤ │IC│ AGENT │ ┌ identity header strip ───────────────┐ │ COMPUTER │ │ON│ LIST │ ├ METRICS BAND (5 tiles) ──────────────┤ │ PULLOUT │ │54│ 222px │ │ LIVE │ BRAIN │ SURFACE │ │ 344px │ │ │ │ │ 1.15fr │ 1fr │ 1fr │ │ apps · │ │ │ │ │ (each col scrolls independently) │ │ running · │ │ │ │ └────────────────────────────────────────┘ │ dock │ ├──┴─────────┴──────────────────────────────────────────┴───────────┤ │ STATUS BAR (28px) durable runner · checkpoint · sandbox · doors │ └──────────────────────────────────────────────────────────────────┘ ``` - **Icon rail (54px):** product switcher (World / Agent / Infra). Active = coral glyph + coral left spine. - **Agent list (222px):** every agent in the team. Row = avatar + status dot, name, mono role, live action line. Active row gets the 3px coral spine + coral tint. - **Command-center area (fluid):** identity header → metrics band → three scrolling columns. - **Computer pullout (344px, pinned):** mirrors the product's right-side computer panel. Stays put; cards live to its **left**. Toggle with the `showComputer` prop. - **Status bar (28px):** ambient truth, always-on mono. Only the three center columns and the panels' inner bodies scroll; all chrome is `flex:none`. The whole thing fits one 1080p screen. ### The three center columns - **LIVE (1.15fr):** `WORKING ON NOW` card (task + step list with a blinking caret) → `REASONING STREAM` terminal (think/tool/door tagged lines) → `ACTIVITY · LIVE` bar chart. - **BRAIN (1fr):** collapsible `SYSTEM PROMPT` (click header to expand) → `PERSONALITY` chips → `SKILLS` chips → `CAPABILITIES` chips. - **SURFACE (1fr):** `TOOLS · DOORS` (gated/blocked list + inline §15 approval card) → `MEMORY` → `SAFETY · §15`. --- ## 3. Color Near-black warm-neutral base; **functional accents only** — don't add a color unless it means something. Aim for ~90% neutral. | Token | Value | Used for | |---|---|---| | Canvas | `#08080a` | page background | | Surface | `#0d0d10` | cards | | Chrome | `#0a0a0c` / `#0b0b0e` | rails, panels, status bar | | Hairline | `rgba(255,255,255,.06–.08)` | every border/divider | | Text high | `#f3f3f5` | headings, key values | | Text mid | `#8a8a92 / #9a9aa2` | body | | Text low | `#5a5a62 / #6a6a72` | mono labels, meta | **Accents (one meaning each):** - **Coral `#ff6f61`** → brand + primary action + active nav. The coral→red fill `linear-gradient(135deg,#ff8a7a,#ff5f57)` is the one filled-button treatment. - **Cyan `#5ec8d8`** → live / working / network / throughput / links. - **Green `#5fd08a`** → healthy / done / loops running. - **Amber `#e8b465`** → pending / door awaiting approval / spend / blocked tool. - **Violet `#c98af0`** → reasoning ("think") + personality. - **Teal `#6fd0c0`** → safety / sandbox. The **doors** metric tile and status-bar text turn amber the moment an approval is pending and flip green when clear — that color shift is the page's most important signal. --- ## 4. Type Two families, sharp roles: - **Helvetica Neue** (system sans) — headings, names, prose. - **JetBrains Mono** — everything machine: roles, status, IPs/hosts, the reasoning stream, stat labels, chips, breadcrumb, status bar. This sans/mono split is what makes it read as an operator tool, not a website. Scale (floors): agent name `24/700/-.02em` · card titles `13–15/600–700` · body `11–13` · mono labels `9–10`, letter-spacing `.08–.12em`, low-contrast. The uppercase mono kicker (`WORKING ON NOW`, `SYSTEM PROMPT`, `TOOLS · DOORS`) above every card is the connective rhythm — keep it. --- ## 5. Components & patterns - **Identity header strip** — small haloed avatar (62px, pulsing ring) + name + mono `role · spec`, then model chip + coral "Edit brain →" + settings gear. Identity is deliberately compact. - **Metric tile** — mono label, big `22/700` value, mono unit. Notable tiles tint border + value (cyan throughput, amber spend, green loops, amber doors-when-pending). The throughput tile carries a live sparkline. - **Card** — `#0d0d10` + hairline (or accent-tinted) border, 13px radius, mono kicker + icon chip header. The single repeated container. - **Reasoning stream** — black terminal; each line is a colored tag (`think`/`tool`/`door`/`note`/`result`) + text; last line gets a blinking caret. - **Chip** — mono, small, tinted pill for personality/skills/capabilities. A trailing `+N` chip implies overflow. - **Inline §15 door** — amber-bordered approval card with a gradient top-rule: title, mono detail, Approve / Review / ✕. Approving clears it to a green "no doors awaiting approval" line and updates the metric + status bar. - **Computer pullout** — pinned right panel: header w/ device icons, sandbox status, apps grid (real brand glyphs as inline SVG), NOW RUNNING list (loop/cron items with progress bars), bottom dock (Skills/Files/Routines/Settings). - **Indicators** — reuse three primitives everywhere: colored **dot** (state), thin **bar** (utilization/progress), bordered **pill** (labeled status). Don't invent new ones. --- ## 6. Motion Restrained and diegetic — movement only ever means "this is live" or "the view changed." Six keyframes: `cm-blink` (live dots/caret), `cm-halo` (avatar ring pulse), `cm-type` (caret), `cm-bar` (sparkline/activity bars), `cm-fade` (0.2–0.25s panel/step entrance). No load chrome, no parallax, no decorative motion. All of it is gated behind the `liveStream` prop so it can be paused. --- ## 7. Voice Technical, plain, security-forward. Buttons name the outcome ("Edit brain →", "Approve"). The §15 / door / sandbox / "no network" language repeats the trust story. Lead with what the agent is doing, not what it is. --- ## 8. How it's built (structure) This is a **Design Component** (`.dc.html`) — one self-contained file + `support.js` (the runtime; keep it beside the page). - **Template** = markup styled **entirely inline** (only `@keyframes` + scrollbar rules live in ``). Inline styles paint immediately as the file streams. - **Logic** = `class Component extends DCLogic` at the bottom. State: `selected` (which agent), `promptOpen`, `doorApproved`. `renderVals()` returns every `{{ … }}` the template binds + all handlers. - **Data is mocked** in an `AGENTS` map inside `renderVals()` (Morpheus, Smith). Each agent carries its metrics, task, reasoning, personality, skills, tools, memory, safety, door, prompt, and now-running list. **To wire real data, replace that map with your fetched agent state** — the template shape is stable. - **Control flow:** `` repeats agent rows, steps, reasoning lines, chips, tools, running items; `` toggles the prompt body, the door card vs the cleared state, and the computer pullout. State-driven contents, not separate pages. - **Props / tweaks:** `liveStream` (pause all animation), `showComputer` (show/hide the pullout), `defaultPromptOpen` (start with the system prompt expanded). ### To build a page in this style 1. Drop the **shell** (top bar / icon rail / agent list / command area / computer pullout / status bar); pin everything but the center columns and panel bodies. 2. Shrink **identity to a header strip**; never let the avatar dominate. 3. Put the glance-priority metrics in a **5-tile band** directly under it. 4. Split the work into **LIVE · BRAIN · SURFACE** columns, each scrolling independently. 5. Keep the **computer as a pinned right pullout**; all cards go to its left. 6. Use only the accents above, **one meaning each**; show state with the dot/bar/pill trio and the six keyframes — nothing more. --- ## 9. Prompt to regenerate > Build a single-agent **command center** as a Design Component in the Clawmates dark-operator visual system (near-black `#08080a` canvas, `#0d0d10` cards, hairline borders, Helvetica Neue + JetBrains Mono, functional accents: coral `#ff6f61` brand/primary, cyan `#5ec8d8` live, green `#5fd08a` healthy, amber `#e8b465` pending, violet `#c98af0` reasoning, teal `#6fd0c0` safety). > > Fixed full-viewport shell: 54px top bar (logo · breadcrumb · live pill · tok/min · avatar) → body [54px icon rail · 222px agent list · fluid command area · 344px pinned computer pullout] → 28px status bar. Only the center columns and panel bodies scroll. > > Command area = compact identity header strip (small haloed 62px avatar + name + mono role·spec + model chip + coral "Edit brain →") → 5-tile metrics band (Throughput w/ sparkline, Spend, Loops, Memory, Doors — doors tile + status bar turn amber when an approval is pending) → three independently-scrolling columns: **LIVE** (working-on-now task w/ step list + caret, reasoning-stream terminal, activity bars), **BRAIN** (collapsible system prompt, personality / skills / capabilities chips), **SURFACE** (tools·doors w/ inline §15 approval card, memory, safety). > > Pinned right **computer pullout**: header w/ device icons, "sandbox live · no network", apps grid (Browser/Slack/Terminal/Obsidian/Chat/Add as inline-SVG glyphs), NOW RUNNING list (loop/cron items w/ progress bars), bottom dock (Skills/Files/Routines/Settings). > > Mock 2 agents (a PM and a researcher) in an `AGENTS` map; clicking a list row switches everything. Interactions: switch agent, expand/collapse system prompt, approve the pending door (clears it + updates the doors metric + status bar). Inline styles only; six restrained keyframes (blink/halo/type/bar/fade) gated behind a `liveStream` prop. Expose props: `liveStream`, `showComputer`, `defaultPromptOpen`. Fit one 1080p screen. --- ## 10. Files in this package - `Clawmates Agent Command Center.dc.html` — the page (open directly in a browser). - `support.js` — the runtime the `.dc.html` needs; keep it beside the page. - `BUILD-GUIDE.md` — this document.