Omar SobhandClaude Opus 4.8
11a1f22daa
Replace the single centered "anatomy profile" + resizable chat split with an
operator command center: compact 62px identity strip → 5-tile per-agent metrics
band → three independently-scrolling LIVE · BRAIN · SURFACE columns. Chat moves to
the computer's Chat app; the right computer pullout (DevicePanel) is untouched.
- backend: cm-api/routes/world.rs emits per-agent `telemetry{agentId,tokensPerMin,
costPerHr,loops,doorsPending}` in the SSE loop, from 4 batched GROUP BY queries
(usage_events tokens/min + credits/hr, active routines, pending approvals) — all
real, no migration. taxonomy `telemetry` gains optional agentId; stateKey now
keys it per-agent so slices don't clobber.
- frontend: new ClawCommandCenter + anatomy-cards (shared cards extracted from
Dashboard); useAgentTelemetry(agentId) feeds the metric band (Doors amber>0/
green=0); LIVE column streams the agent's task.update / reasoning.delta /
tool.call (replaces the mocked VitalsCard heatmap with a live activity chart).
- Dashboard: left region → full-height ClawCommandCenter; chat launcher opens the
computer Chat app; removed the dead anatomy cluster + unused imports.
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
159 lines
12 KiB
Markdown
159 lines
12 KiB
Markdown
# 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 `<helmet>`). 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:** `<sc-for>` repeats agent rows, steps, reasoning lines, chips, tools, running items; `<sc-if>` 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.
|