clawmates/Agent dashboard package/BUILD-GUIDE.md

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.