feat(mc): SpaceX migration complete (P1–P6) — tokens, shell, dept pages, inner components, showcase + terminal-* removal

[DannyDesert]

Summary

All six phases of the mission-control SpaceX Crew Dragon aesthetic migration are now on the branch. Phase 1 is purely additive (new mc-* tokens, primitives, rewritten docs — nothing rendered differently). Phase 2 flips the home dashboard and hive visualization over to those tokens. Phase 3 flips the shell chrome (nav, sidebar, status header, chat, drawers, tabs, fleet badge) and every settings surface (global /settings page + all six department settings panels + OpenClaw drawer + agent card). Phase 4 flips every department client shell (development, executive, marketing, operations, support, finance/treasury) so each /departments/* route boots into a fully SpaceX-styled top level. Phase 5 closes the long tail: 19 sub-commits across 7 sub-phases (5a–5g) flip every remaining inner component in packages/mission-control/src — shared foundation, every AgentCard family, every drawer, every viz, every system/operator/observability page, the full onboarding + login + connect-flow + design studio, plus OpenClaw and AgentHub. Across Phase 5 net: 98 files changed, +1,838 / −1,827. After 276b171, grep -rn 'terminal-' packages/mission-control/src returns zero non-comment hits. Phase 6 then (a) ports the mc-* palette into packages/showcase and flips all 5 showcase pages off terminal-*, (b) deletes the terminal-* namespace from packages/mission-control/tailwind.config.ts and flips the three hardcoded Catppuccin scrollbar hexes in globals.css to --mc-* CSS vars, (c) audits every animation class in mission-control against the prefers-reduced-motion guard (adds animate-pulse, animate-spin, animate-ping, animate-highlight, animate-in), and (d) polishes the seven highest-traffic empty states to the project-standard dashed-outline block (◇ icon, uppercase title, muted subtitle).

Rule during migration (documented in DESIGN-SYSTEM.md): a file uses terminal-* or mc-*, never both; whole files flip in one commit. Phase 6 deletes the terminal-* namespace from tailwind.config.ts; after 6b, terminal-* is gone from both the mission-control and showcase build surfaces.

---

Phase 1 — design foundation (additive)

Design tokens (tailwind.config.ts, src/app/globals.css)

• mc-* namespace: 23 tokens covering pure-black canvas, cyan hairline borders (0.12 / 0.22 / 0.40 alpha tiers), iOS semantic colors, and the six remapped department accents (Executive → yellow, Development → cyan, Marketing → amber, Operations → iOS green, Finance → iOS purple, Support → light cyan)
• --mc-* CSS custom properties mirroring the Tailwind tokens for inline-SVG / computed-color use
• Custom borderRadius (panel 8px / chip 6px / badge 3px), tracking-label (0.12em), duration-mc (220ms), ease-mc-out cubic-bezier
• Three keyframes: mc-pulse (live dot), mc-breathe (active agent glow), mc-particle-flow (SVG path animation)
• Global @media (prefers-reduced-motion: reduce) guard — every mc-animate-* disables cleanly and transitions clamp to 0.01ms

Typography (src/app/layout.tsx)

• Inter 200–600 via next/font/google → --font-inter
• JetBrains Mono 300–500 via next/font/google → --font-jetbrains-mono
• Tailwind font-sans / font-mono resolve to the variables; monospace-everywhere rule is now scoped to data, IDs, counts, and metrics

UI primitives (src/components/ui/)

• Panel — outlined container, variants static / interactive / glass, optional department-tinted border, title + actions header row
• Toggle — accent-glow switch, variants accent / success / warning / danger (kill-switch tone)
• Badge — outline vs solid × 7 semantic variants, mono prop for data-tag style
• Slider — cyan-track creativity/risk slider with haloed thumb and tabular-nums readout
• Metric — dashboard tile with accent rule, label, tabular value, optional trend and unit; accent supports every dept token
• cn() helper at src/lib/cn.ts; barrel export at src/components/ui/index.ts

Docs (rewritten, not patched)

• DESIGN-SYSTEM.md — SpaceX-first spec: migration status table, full token tables, typography ladder, primitive docs, canonical Tailwind recipes (card, status badge, health dot, buttons, input, modal, table, progress bar), full terminal-* → mc-* mapping, accessibility note
• STYLE-GUIDE.md — implementation companion with copy-paste class strings, settings drawer accordion pattern, and the anti-patterns list ("no monospace for UI labels", "no filled panels", "no new animation without reduced-motion")

---

Phase 2 — home dashboard + hive viz (14 files flipped)

First real migration on top of the Phase 1 foundation. Outlined panels with cyan hairline borders replace filled terminal-surface backgrounds; Inter ultralight + JetBrains-mono tabular-nums supersede the legacy terminal fonts. Department colors pivot to the iOS semantic palette per the DESIGN-SYSTEM.md remap.

Files (14)

• src/app/page.tsx — Hive zone, KPI grid, Recent Activity, Alert Board, Top Active, Quick Links
• src/components/hive/hive-types.ts — DEPT_HEX flipped directly to iOS palette
• src/components/hive/hive-container.tsx, hive-graph.tsx, view-mode-toggle.tsx, external-tooltip.tsx, mobile-agent-card.tsx, mobile-agent-list.tsx, mobile-hive-summary.tsx
• src/components/live-activity.tsx, alert-board.tsx, kpi-card.tsx, org-sidecar.tsx
• src/lib/agents.ts — additive DEPT_COLORS_MC / DEPT_BG_COLORS_MC / DEPT_BORDER_COLORS_MC constants alongside terminal-* so un-migrated consumers keep working

Phase 2 head: 75584049.

---

Phase 3 — shell chrome + settings surfaces

Phase 3 flips the always-visible shell (every route sees it) and the entire settings UX. The app now boots into a fully SpaceX-styled frame; only the deeper department/system content pages still render terminal-*.

Shell chrome (4 commits)

• 15e4ea5e — shell baseline: layout.tsx body flipped to bg-mc-bg text-mc-text font-sans; sidebar + sidebar-wrapper
• 1c68b769 — nav.tsx, status-header.tsx, fleet badge: outlined panels, iOS semantic status dots, font-sans uppercase tracking-label for section labels
• e37ddde1 — chat-drawer.tsx, toast-container.tsx, drawer surface pattern (bg-mc-bg/95 backdrop-blur-sm), tab chrome
• ce8cd582 — settings shared infrastructure (drawer base, section accordion pattern, common toggle/badge styles)

Settings surfaces (9 commits)

• 5e17b7fb, 58c0cabc — development, finance, and remaining department settings panels
• f1111ac0 — marketing-settings.tsx
• c247b2c4 — operations-settings.tsx
• 3beaf603 — support-settings.tsx
• 25f9d087 — executive-settings.tsx (Department Directive → mc-accent, Agents → mc-info, Workflow & Notifications → mc-warning)
• d9f91810 — agent-settings-card.tsx (MiniToggle color map Anthropic→mc-info / OpenAI→mc-success; role badge mc-info)
• 62cab867 — openclaw-settings-drawer.tsx (779 lines; ModelConfig reusable, PROVIDER_COLORS Anthropic/Google→mc-info, OpenAI→mc-success, xAI→mc-warning; TIER_BADGE_STYLES builtin→mc-accent, trusted→mc-success, community→mc-warning; ErrorBanner mc-danger)
• d1fc6e14 — global-settings-content.tsx (2168 lines, the /settings route): all seven sections — Organization (slate-neutral), Fleet & Infrastructure (mc-accent), AI Providers & Routing (mc-info), Connections & Integrations (mc-info), Data Access & Privacy (mc-danger), Notifications & Alerts (mc-success), Security & Access Control (mc-warning). StatusDot / StatusBadge / TIER_BADGES fully on mc-*; animate-mc-pulse shadow-[0_0_6px_currentColor] for in-progress live state; emergency block (maintenance + kill-switch) on mc-danger surfaces. transition-colors duration-mc ease-mc-out applied systematically. 0 terminal-* references remain in the file.

Phase 3 head: d1fc6e14.

---

Phase 4 — department client shells

Phase 4 flips every top-level department client — the shell each /departments/* route renders. After this phase, all six department routes boot into SpaceX-styled layouts with the Phase 3 chrome pattern applied to section labels (font-sans text-[11px] font-medium uppercase tracking-label text-mc-text-label) and the ghost Settings-button pattern (px-3 py-1.5 rounded-chip border border-mc-border font-sans text-xs text-mc-text-secondary hover:border-mc-border-hover hover:text-mc-text transition-colors duration-mc ease-mc-out).

4a — 1190e087 · development + executive

• src/app/departments/development/client.tsx — dev-flow dashboard, agent grid, pipeline swimlane; section labels promoted, Settings ghost button, status/last-run/run-count derived from live data
• src/app/departments/executive/client.tsx — directive panel, exec agent cards, review queue + pending approvals grid; tab chrome on mc-*

4b — a1eecce3 · marketing + operations

• src/app/departments/marketing/client.tsx (482 lines) — Settings → ghost pattern; all section labels upgraded; Suspense fallback uses mc-text-tertiary
• src/app/departments/operations/client.tsx (362 lines) — Cache Stats + Memory Status rebuilt as outlined panels (border border-mc-border rounded-panel bg-transparent p-4) with font-mono text-xs tabular-nums data rows; Connected/Disconnected flip to mc-success / mc-danger

4c — 7f0f3ec1 · support + treasury

• src/app/departments/support/client.tsx (293 lines, hand-flipped) — Settings ghost button, 6 section headers all on the Phase 3 chrome pattern; 10 → 0 terminal-* refs
• src/app/treasury/client.tsx (803 lines, 186 refs) — rendered at /departments/finance via thin server wrapper; mechanical flip via Python substring-replace script (longest-first ordered tokens preserve dynamic template strings and opacity suffixes /5 /10 /20 /40). CHAIN_COLORS, runwayColor, severityStyle all flipped; every tab (All, Agents, Assets, Infra) on mc-*

Phase 4 head: 7f0f3ec1.

---

Phase 5 — inner components + remaining routes (closes the long tail)

Phase 5 flips every remaining terminal-* surface in packages/mission-control/src: the shared-lib foundation, every AgentCard family, every drawer/timeline/chart, every viz, the events bundle, operators + observability, onboarding + login + connect-flow, design studio, system pages, OpenClaw, and AgentHub. After Phase 5 (HEAD 276b171), a grep for terminal- in packages/mission-control/src returns 0 non-comment hits (2 comment-only hits on hand-fixed files explaining the pre-flip state — see "Mechanical flip + hand-fixes" below). Phase 5 shipped as 19 sub-commits across 7 sub-phases so each chunk stays reviewable.

Net across Phase 5: 98 files changed, +1,838 / −1,827.

Sub-phase commits

5a — shared foundation (3 commits, 23 files)

• 2b2f8f8 — 5a.1: lib + types + ui/panel + hive-types + dept page Suspense fallbacks (8 files). Includes the lib/agents.ts collapse: the dual-palette additive constants (DEPT_COLORS_MC, etc.) introduced in Phase 2 get deleted and the primary exports point at the mc-* values directly.
• 58d7858 — 5a.2: shared cards + drawers + timeline + editor (7 files)
• 8d084d9 — 5a.3: status primitives + fleet controls + system-badge (8 files)

5b — development + executive inner (2 commits, 9 files, closes 5b at 3176e76)

• 50aedc3 — 5b.1: dev + exec agent cards + heartbeat + pending-approvals (4 files)
• 3176e76 — 5b.2: pipeline + tech-debt-radar + sentinel + commits + directive-timeline (5 files)

5c — marketing + operations inner + events bundle (2 commits, 15 files, closes 5c at 0bf92cf)

• 0f27899 — 5c.1: marketing + operations inner components (8 files)
• 0bf92cf — 5c.2: full events bundle — event-log, event-mesh, event-feed, batch countdown, filters, timeline (7 files)

5d — finance + support inner (2 commits, 13 files, closes 5d at dfa3314)

• 2f2ee92 — 5d.1: finance inner components — spend-flow, burn-velocity, budget-overview, audit-findings, chart-detail-drawer, finance-settings (7 files)
• dfa3314 — 5d.2: support inner components — community-temperature, support-inbox, moderation-feed, mod-action-summary-chart, watchdog-timers, health-matrix (6 files)

5e — operators + observability (4 commits, 19 files, closes 5e at a83b673)

• 65e872f — 5e.1: operators pages flip (5 files)
• 6e45cab — 5e.1 follow-up: restore operator pages with full mc-* flip after partial-write artifact (5 files)
• d0b473b — 5e.2a: operator drawer components (3 files)
• a83b673 — 5e.2b: full observability route — AlertBoard, AuditTimeline, HealthMatrix, observability page (6 files)

5f — onboarding + login + connect flow + design studio (3 commits, 10 files, closes 5f at 9ef109f)

• 0e7eea9 — 5f.1: onboarding + login routes (6 files)
• eb8ec00 — 5f.2: connect-flow.tsx (includes OpenClaw hand-fix for provider-badge collision)
• 9ef109f — 5f.3: connection-progress + schedules-panel + design-studio (3 files)

5g — system pages + OpenClaw + AgentHub (3 commits, 14 files, closes 5g + closes Phase 5 at 276b171)

• e23e60a — 5g.1: /openclaw page + /system/{queues,sessions,approvals,vault} + review-queue.tsx (6 files; approvals page hand-fix)
• dbc029b — 5g.2: agenthub AgentHubTabs, ActivityWidget, CrossLearnPanel, DiffViewer (4 files, straight flips)
• 276b171 — 5g.3: agenthub ExperimentDashboard, ExplorationControlPanel, ExplorationDAG, GrowthControlPanel (4 files; ExplorationDAG hand-fix)

Mechanical flip + hand-fixes

The bulk of Phase 5 ran through flip_tokens.py — a substring-replace script with a longest-first ordered mapping that preserves opacity suffixes (/5, /10, /20, /40) and dynamic template strings. The mapping deliberately collapses both terminal-cyan and terminal-purple into mc-accent (cyan), because the SpaceX palette only has one accent cyan. In files where both appear in distinct semantic roles, a hand-fix routes the purple-semantic surface to mc-dept-finance (iOS purple #BF5AF2) — the only other purple in the mc-* palette — and a Pre-flip used terminal-* comment marks the intent for reviewers.

Seven files hand-fixed across Phase 5:

• src/types/operators.ts — root operator role badge routed to mc-dept-finance (non-power-plant roles keep mc-accent)
• src/app/observability/components/AuditTimeline.tsx — operator event color → mc-dept-finance
• src/components/event-log-table.tsx — event_log entry type → mc-dept-finance
• src/components/commits-timeline.tsx — architect agent author color → mc-dept-finance
• src/components/schedules-panel.tsx — CRON badge → mc-dept-finance (distinguishes from interval badge)
• src/app/system/approvals/page.tsx — "Vault Proposals" section header → text-mc-dept-finance (keeps header distinct from agent-id/filename cyan)
• src/components/agenthub/ExplorationDAG.tsx — selected-node ring-mc-dept-finance (keeps selection state distinct from architect agent tint)

The OpenClaw hand-fix in 5f.2 (connect-flow.tsx) handled a provider-badge palette collision by the same pattern.

How Phase 5 closes the mc-* migration

After 276b171, the entire mission-control package boots, renders, and transitions on mc-* tokens. terminal-* still exists in tailwind.config.ts — deleted in Phase 6b alongside the reduced-motion audit (6c), showcase port (6a), and loading/empty-state polish (6d).

Phase 5 head: 276b171.

---

Phase 6 — showcase port + terminal-* deletion + reduced-motion audit + empty-state polish

Phase 6 retires terminal-* from the entire monorepo (mission-control and showcase), hardens the reduced-motion contract across every animation class in active use, and promotes the highest-traffic empty states to the project-standard dashed-outline block. Four sub-commits (6a, 6b, 6c, 6d — 6d splits across three commits because the push payload was large).

6a — 598535b · migrate packages/showcase to mc-* SpaceX palette (7 files)

Port the full mc-* token palette + --mc-* CSS custom properties + keyframes from packages/mission-control into packages/showcase. Flip all 5 showcase pages + layout + globals.css from terminal-* Catppuccin tokens to mc-* SpaceX. Delete the terminal-* block from showcase/tailwind.config.ts.

• Body default flipped from font-mono to font-sans antialiased to match mission-control's Phase 1 typography scoping rule (monospace is now reserved for data / IDs / metrics)
• Scrollbar styling switches from hardcoded Catppuccin hex values to var(--mc-bg) / var(--mc-border-hover) / var(--mc-border-active) so scrollbar chrome stays in sync with the palette
• Reduced-motion guard covers all three showcase animations (animate-live, animate-fade-in, animate-pulse) plus the mc-* set
• Net: terminal-* refs go 74 → 0 in packages/showcase

6b — fcf41a0 · delete terminal-* namespace from mission-control (2 files)

Remove the legacy terminal-* Catppuccin palette block from packages/mission-control/tailwind.config.ts. The explanatory comment is rewritten to note that the legacy palette was removed in Phase 6 and that the mc-* tokens are now authoritative.

In packages/mission-control/src/app/globals.css:

• Update the tokens-header comment to drop the "(Phase 1)" marker now that the palette is the only palette
• Flip the three hardcoded Catppuccin hexes in the scrollbar block to the mc-* CSS custom properties already declared at :root:
  • #0a0a0f → var(--mc-bg)
  • #2a2a3a → var(--mc-border-hover)
  • #3a3a4a → var(--mc-border-active)

After 6b, no live terminal-* Tailwind class remains in mission-control src (two historical comment-only references stay intact as mc-dept-finance hand-fix markers in ExplorationDAG.tsx and system/approvals/page.tsx).

6c — 59c5693 · reduced-motion guard audit (1 file — globals.css)

Previously the @media (prefers-reduced-motion: reduce) guard only disabled the custom mc-* keyframes. A sweep of the mission-control src tree found five additional animation classes in active use that weren't being honored under the reduced-motion preference:

• animate-pulse — status dots (fleet-banner, status-dot, event-feed, health-matrix, commits-timeline, moderation-feed, sentinel-mega-card, burn-velocity idle, etc.) and loading placeholders (agent-detail-drawer, design-studio project list, events/page, event-log-table, onboarding progress sidebar)
• animate-spin — loading spinners in connect-flow, connection-progress
• animate-ping — burn-velocity danger-flash indicator
• animate-highlight — audit-timeline new-event yellow-fade (keyframe highlight-fade, defined below)
• animate-in — toast container entrance animation (Tailwind animate plugin)

Adding all five to the guard's animation: none !important list brings every active animation under the reduced-motion contract. The * transition-duration override already covered non-keyframe transitions.

6d — 084a5f8 + 649d553 + d9a5de0 · empty-state polish (7 files across 3 commits)

Promote the seven highest-visibility empty-state surfaces in mission-control from plain single-line text to the project-standard dashed-outline block. The pattern (defined in src/components/empty-state.tsx) is bg-mc-surface-hover border border-mc-border border-dashed rounded p-6 flex flex-col items-center justify-center gap-2 text-center with a ◇ icon, an uppercase title, and a muted descriptive subtitle.

• 084a5f8 — event-log-table + schedules-panel
• 649d553 — review-queue + operators/client + vault/[[...path]]/page
• d9a5de0 — openclaw-settings-drawer (finishes the sweep)

Surfaces promoted (7):

1. components/event-log-table.tsx — "No events found" single-line → "No events / Waiting for agent activity. The log streams live from the gateway." (margin'd to sit cleanly inside the wrapping table panel)
2. components/schedules-panel.tsx — "No schedules configured" small centered line → "No schedules / No recurring triggers configured..."
3. components/review-queue.tsx — "No items in review" → "Review queue empty / No items awaiting approval..."
4. components/openclaw-settings-drawer.tsx — "No channels configured" small box inside channels section → "No channels / Connect Slack, Discord, or email..." (uses rounded-panel to match the surrounding section styling)
5. app/operators/client.tsx — "No operators found. Invite one to get started." center-aligned font-mono line → "No operators / Your roster is empty..."
6. app/system/vault/[[...path]]/page.tsx — "Empty directory." plain tertiary-text <p> → "Empty directory / No files or subdirectories at this path."

Scope is intentionally capped at the highest-traffic surfaces. Other "No data available" fragments inside small section cards (agent-detail-drawer, operations/client cache panel, memory panel, agenthub/DiffViewer, review-queue per-column "No items", SharedSkillsList "No skills reported by gateway", Heartbeat & Cron "No cron jobs configured") are left at their current inline styling — promoting them to full empty-state blocks would overwhelm their containers. Remaining loading spinners stay as-is; they are transient and the 6c reduced-motion guard already honors the a11y contract.

Net across Phase 6: 17 files changed, terminal-* fully removed from the monorepo.

Phase 6 head: d9a5de0.

---

Why additive

Flipping 200+ components to a new palette in a single PR is unreviewable and unrevertible. Dual-palette coexistence let each page migrate atomically while the app stayed green; Phase 5 was the tail. terminal-* stayed in tailwind.config.ts until Phase 6b formally deleted it — and Phase 6a ported the same palette into showcase so the deletion could be final.

Merge readiness

PR currently shows mergeable_state: dirty — main has moved during the long Phase 5 burn. Ready for rebase against main and a clean build check before merge. No outstanding phases.

Test plan

• tailwind.config.ts parses cleanly on both packages/mission-control and packages/showcase; the mc-* namespace is authoritative on both and terminal-* is gone (Phase 6a 598535b + 6b fcf41a0)
• Phases 2–5 files verified: grep -rn 'terminal-' packages/mission-control/src returns 0 non-comment hits on remote HEAD (2 comment-only hits: src/app/system/approvals/page.tsx and src/components/agenthub/ExplorationDAG.tsx, each an explanatory Pre-flip used terminal-* comment above a mc-dept-finance hand-fix)
• Phase 6a: grep -rn 'terminal-' packages/showcase went 74 → 0 (598535b)
• globals.css :root vars match Tailwind token values 1:1; Phase 6b flipped the scrollbar block off hardcoded Catppuccin hex to var(--mc-*)
• layout.tsx body on bg-mc-bg text-mc-text font-sans (Phase 3)
• src/app/settings/page.tsx renders the fully migrated GlobalSettingsContent
• Shared lib dual-palette additive constants (DEPT_COLORS_MC, DEPT_BG_COLORS_MC, DEPT_BORDER_COLORS_MC) collapsed to single-palette on 5a.1 (2b2f8f8); no consumer left reading the old DEPT_COLORS under its terminal-* values
• Phase 6c reduced-motion guard now covers animate-pulse, animate-spin, animate-ping, animate-highlight, animate-in, plus every custom mc-animate-* keyframe
• Phase 6d dashed-outline empty-state block applied to event-log-table, schedules-panel, review-queue, openclaw-settings-drawer, operators/client, and vault
• Rebase feat/mc-phase-1-spacex-tokens against main and resolve any conflicts (PR is currently mergeable_state: dirty)
• CI typecheck + build green on both packages/mission-control and packages/showcase
• Reviewer visits / (home), /settings, each /departments/{executive,development,marketing,operations,finance,support}, /openclaw, /system/{queues,sessions,approvals,vault}, /operators, /observability, /onboarding, /login, /connect, /design-studio, and the AgentHub surfaces — every route should render on the SpaceX palette with outlined panels, cyan hairlines, Inter + JetBrains Mono, and iOS-palette department colors
• Reviewer visits every page in packages/showcase and confirms the mc-* port looks correct
• Reviewer inspects the seven mc-dept-finance hand-fixes and confirms the purple-vs-cyan distinction is preserved in situ (operator role badge, observability operator events, event-log event_log rows, architect commits, CRON schedule badge, Vault Proposals header, ExplorationDAG selected ring)
• Reviewer spot-checks the six promoted empty states (force-empty: operators page with no roster, vault with empty dir, events with no activity, review queue empty, schedules panel empty, openclaw channels unconfigured) — all should render the dashed-outline block
• Reviewer confirms prefers-reduced-motion: reduce set in OS / DevTools halts every animation across mission-control

Decision record for the SpaceX pivot: packages/mission-control/outputs/SPACEX_COVERAGE_GAP.md.

[yclaw-agent-orchestrator]

Architect Audit

Scope: Phase 1 of 6 — SpaceX Crew Dragon design tokens, typography, UI primitives, and design docs rewrite. Additive-only; no existing component is modified to consume the new tokens.

Files: 12 changed (5 new components, 1 new utility, 4 modified, 2 docs rewritten). ~1,127 additions, ~325 deletions.

Verdict: Clean, well-structured foundation PR. No security concerns, no breaking changes. Advisory notes below.

---

Architecture — ✅ Sound

The dual-palette coexistence strategy is the right call. Shipping 23 mc-* tokens alongside the existing terminal-* palette, with a documented phase-by-phase migration plan, avoids the unreviewable mega-PR anti-pattern. The rule "a file uses terminal-* OR mc-*, never both" is clear and enforceable.

The primitive component library (Panel, Toggle, Chip, SliderField, Metric) establishes a solid foundation. Each component is focused, composable, and follows a consistent pattern: typed variant props, cn() for conditional classes, controlled state, proper ARIA attributes.

Correctness — ✅ Verified

1. Token parity: CSS custom properties in globals.css :root match the Tailwind mc.* tokens in tailwind.config.ts 1:1. No drift.
2. Layout unchanged: layout.tsx body still uses bg-terminal-bg text-terminal-text font-mono — existing routes render identically. Font variables are injected via className on <html> but not consumed by any existing component. Zero visual regression.
3. Font loading: Inter (200–600) and JetBrains_Mono (300–500) loaded via next/font/google with display: 'swap' and CSS variable exposure. Correct pattern for Next.js.
4. Barrel export: src/components/ui/index.ts re-exports all primitives and their type interfaces. Clean.

Security — ✅ No concerns

No API endpoints, no auth changes, no secrets, no external data fetching. Pure frontend tokens and presentational components.

Advisory Notes (P3/P4 — non-blocking)

P3 — cn() utility vs clsx/tailwind-merge:
The custom cn() at src/lib/cn.ts is a simple filter-and-join. This works for the current primitives, but once Phase 2+ starts migrating existing components where class conflicts are possible (e.g. bg-terminal-surface being overridden by bg-mc-surface), you'll want tailwind-merge to resolve conflicting utility classes. Consider upgrading cn() to wrap twMerge(clsx(...)) before Phase 2 begins. No action needed now.

P3 — SliderField Firefox styling:
The slider has thorough -webkit-slider-thumb styling but only basic -moz-range-thumb styles (missing the shadow/halo and hover/focus states). Firefox users will see a functional but visually inconsistent thumb. Worth a follow-up in Phase 2 or 3.

P4 — reduced-motion selector coverage:
The globals.css reduced-motion block targets both custom class names (mc-animate-pulse) and Tailwind-generated names (animate-mc-pulse). The Tailwind config only generates the animate-mc-* form. The mc-animate-* selectors are forward-looking but currently match nothing. Not a bug — just noting the asymmetry.

P4 — Panel content padding when no header:
When Panel has no title or actions, the content <div> gets an empty className (''). The content renders flush against the border. This is likely intentional (caller controls padding), but worth documenting in the component JSDoc or STYLE-GUIDE.md.

P4 — tsconfig.json strictness gap:
The mission-control tsconfig.json has strict: true but is missing noUncheckedIndexedAccess and exactOptionalPropertyTypes per engineering standards. Pre-existing — not introduced by this PR. Noting for the tech debt backlog.

Docs — ✅ Thorough

DESIGN-SYSTEM.md and STYLE-GUIDE.md are full rewrites, not patches. They cover: migration status table, complete token tables, typography ladder, primitive API docs, canonical Tailwind recipes, terminal-* → mc-* mapping, and accessibility notes. The anti-patterns list ("no monospace for UI labels", "no filled panels", "no new animation without reduced-motion") is a good guardrail for subsequent phases.

Summary

Solid Phase 1 foundation. Tokens are consistent, primitives are well-typed and accessible, docs are comprehensive, and the additive-only approach ensures zero regression risk. The advisory notes are all P3/P4 — none block this PR.

[yclaw-agent-orchestrator]

Architect Audit

Scope: SpaceX Crew Dragon design migration — Phases 1 + 2. 30 files changed across packages/mission-control/.

Verdict: Well-architected migration with one significant concern and a few advisory notes. No security issues. No blocking concerns.

---

Architecture — ✅ Sound

The dual-palette coexistence strategy is the right call. Key strengths:

• Atomic file migration rule ("a file uses terminal-* OR mc-*, never both") prevents half-migrated visual states and makes each phase independently revertible.
• Additive Phase 1 — new mc-* tokens, CSS custom properties, UI primitives, and docs land without changing any rendered output. Clean separation of foundation from application.
• Token parity — CSS custom properties in globals.css match Tailwind tokens in tailwind.config.ts 1:1 across all 23 mc-* tokens. No drift.
• Primitive library (Panel, Toggle, Chip, SliderField, Metric) is well-typed, uses consistent patterns, has good JSDoc, and exports via barrel. The cn() utility is appropriately minimal.

P2 — Layout Body Class Change (Advisory)

layout.tsx body class changed from:

bg-terminal-bg text-terminal-text font-mono

to:

bg-mc-bg text-mc-text font-sans

This is a global change affecting every route, not just the 14 migrated files. Implications:

1. Background shift: terminal-bg (#0a0a0f) → mc-bg (#000000). Subtle but visible — un-migrated pages with terminal-surface (#111118) cards will now sit on pure black instead of near-black. The contrast ratio changes slightly.
2. Font shift: font-mono → font-sans. Un-migrated components that relied on the body's inherited font-mono will now render in Inter unless they explicitly set font-mono. Most components do set their own font classes, but any that inherit from body will change.

This may be intentional (the PR description mentions "body classes in layout.tsx still on terminal-* so un-migrated routes render unchanged" in the test plan, but the actual code contradicts this — the body IS on mc-*). Worth confirming this is deliberate and that un-migrated routes have been visually checked.

P2 — Scope Exceeds Stated Phase 2 (Advisory)

The PR description says Phase 2 flips "14 files" (home dashboard + hive viz). The actual diff modifies 30 files, including:

• Settings components: agent-settings-card.tsx, department-settings-shared.tsx, executive-settings.tsx, development-settings.tsx, finance-settings.tsx, marketing-settings.tsx
• Shell components: nav.tsx, mobile-nav-bar.tsx, fleet-banner.tsx, fleet-kill-switch.tsx, chat-drawer.tsx, chat-panel.tsx
• settings/page.tsx, openclaw-live-wrapper.tsx

These are listed as Phase 3 (shell, settings drawer) and Phase 4 (department pages) scope in the follow-up table. If this is intentional scope expansion, the PR description should be updated to reflect reality. If accidental, the extra files should be reverted to terminal-* and migrated in their designated phase.

Accessibility — ✅ Good

• @media (prefers-reduced-motion: reduce) guard in globals.css disables all mc-animate-* classes and clamps transitions to 0.01ms.
• Toggle has proper role="switch", aria-checked, focus-visible ring.
• SliderField uses native <input type="range"> for keyboard + screen reader support, with visual overlay for aesthetics.

Correctness — ✅ Clean

• DEPT_HEX in hive-types.ts correctly maps to iOS palette values matching mc-dept-* tokens. Comments document the old → new mapping.
• DEPT_COLORS_MC / DEPT_BG_COLORS_MC / DEPT_BORDER_COLORS_MC in agents.ts are additive alongside existing terminal-* variants — un-migrated consumers keep working.
• KPICard is properly marked as legacy wrapper with JSDoc directing new callers to <Metric>.
• Status badge patterns (/40 border + /10 bg) are consistent across live-activity.tsx, alert-board.tsx, and Chip solid variant.

Security — ✅ No concerns

No credentials, auth changes, API modifications, or external integrations. Purely visual/presentational changes.

Performance — ✅ Minimal impact

• Two Google Fonts loaded via next/font with display: 'swap' — no FOIT.
• New CSS custom properties and Tailwind tokens add negligible CSS weight.
• No new runtime dependencies.

Testing — ⚠️ CI status unconfirmed

PR description notes tsc --noEmit passes locally with 11 pre-existing @yclaw/core module-resolution errors (unrelated). CI typecheck + build status should be confirmed before merge.

---

Summary: The migration architecture is solid and the primitives are well-built. The two advisory items (layout body class change affecting all routes, and scope exceeding stated Phase 2 boundary) should be acknowledged — either confirm they're intentional or adjust. No blocking issues found.

[yclaw-agent-orchestrator]

Architect Audit

Scope: 30 files in packages/mission-control/ — design tokens, UI primitives, docs, and Phase 2 home + hive migration. No infra, no backend, no security-sensitive paths.

Architecture Assessment

The dual-palette migration strategy is sound. Adding mc-* tokens alongside terminal-* and migrating files atomically avoids the "big bang" rewrite problem. The new UI primitives (Panel, Metric, Chip, Toggle, SliderField) are well-structured with proper variant typing, cn() composition, and consistent token usage. The cn.ts utility is appropriately minimal.

Phase 1 (additive): Clean. CSS custom properties mirror Tailwind tokens for canvas/SVG consumers. prefers-reduced-motion guard is thorough — disables all mc-animate-* classes and clamps transitions to 0.01ms. Font loading via next/font/google with display: 'swap' is correct.

Phase 2 (14 files flipped): Token migration within individual components is consistent — terminal-* → mc-* replacements follow the documented mapping. DEPT_HEX in hive-types.ts correctly updates to iOS palette with inline comments documenting the old values.

P1 — Global Body Class Change (Advisory)

layout.tsx:body changed from:

bg-terminal-bg text-terminal-text font-mono

to:

bg-mc-bg text-mc-text font-sans

This is a root-level change that affects every route, not just the 14 Phase 2 files. Three concerns:

1. font-mono → font-sans: Un-migrated routes (department pages, system pages, operators, onboarding, login) inherit font-sans from body instead of font-mono. Any component that relied on the inherited monospace font without explicitly setting font-mono will now render in Inter. The PR description says "monospace-everywhere rule is now scoped to data, IDs, counts, and metrics" — but the un-migrated components weren't updated to add explicit font-mono where they need it.

2. bg-terminal-bg (#0a0a0f) → bg-mc-bg (#000000): Subtle but visible background color shift on all routes. The scrollbar track in globals.css still references #0a0a0f — this creates a mismatch between page background (pure black) and scrollbar track (dark gray).

3. text-terminal-text (#cdd6f4) → text-mc-text (rgba 255,255,255,0.87): Different text color on un-migrated routes. Components using text-terminal-text explicitly are fine, but anything inheriting body text color will shift.

Recommendation: This is likely intentional as a "global shell" change that precedes Phase 3 (shell migration). If so, the test plan should verify that un-migrated routes don't have visual regressions from the font inheritance change. If not intentional, the body classes should stay on terminal-* until Phase 3.

P2 — Scrollbar Track Mismatch

globals.css scrollbar track is still #0a0a0f (the old terminal-bg), but the body background is now #000000 (mc-bg). The 1-shade difference will be visible on routes with scrollable content against the pure-black background.

P3 — Minor Observations

• kpi-card.tsx JSDoc: Good — directs new callers to <Metric>. The legacy wrapper correctly preserves the original prop shape.
• hive-types.ts EVENT_CATEGORY_COLORS: Still uses raw Tailwind CSS colors (e.g. #a855f7, #22c55e) rather than mc-* tokens. This is fine since these are canvas-rendered and the hive event particle system has its own visual language, but worth noting for Phase 6 cleanup.
• fleet-banner.tsx: Uses animate-mc-pulse with shadow-[0_0_6px_currentColor] + text-mc-success to get the glow color via currentColor. Clever pattern — works because the text color is set on the same element. Documented in case future refactors separate the color.
• cn.ts: Appropriate scope — no need for clsx/tailwind-merge at this stage. If variant conflicts become an issue in later phases, consider upgrading.

Security

No concerns. No API changes, no auth changes, no data handling changes. Pure UI/CSS migration.

Summary

Well-executed Phase 1+2 of a 6-phase migration. The additive approach with atomic file flips is the right strategy. The P1 body class change is the only item worth confirming intent on — if it's deliberate (Phase 3 prep), the test plan should explicitly cover un-migrated route font rendering. Everything else is clean.

Advisory audit — PR will auto-merge on CI pass.

[yclaw-agent-orchestrator]

🏗 Architect Triage — PR #126

Classification: Design system token migration + documentation overhaul
Priority: P1 (per Strategist directive)
Risk tier: Low (frontend-only, no infra/API/security changes)

Scope Assessment

Category	Files	Nature
Design docs	2	DESIGN-SYSTEM.md + STYLE-GUIDE.md rewrite
CSS primitives	1	globals.css — new utility classes
Layout	1	layout.tsx — theme provider updates
Home page	1	page.tsx — redesign with new tokens
Type system	1	hive-types.ts — updated type definitions
Components	24	Systematic token migration across all MC components

Total: 30 files, ~1,200 additions, ~900 deletions

What This PR Does

1. Introduces SpaceX-inspired design tokens and primitives
2. Rewrites DESIGN-SYSTEM.md and STYLE-GUIDE.md as canonical references
3. Migrates all existing components to use the new token system
4. Adds new CSS utility classes in globals.css

Review Routing

This is primarily a design review — visual consistency, token correctness, and design system coherence. Assigning to Designer for design review.

The component changes appear to be systematic token replacements. Key risks:

• Visual regression from incorrect token mapping
• Missing token definitions that components reference
• Layout breakage from spacing/sizing changes

Next Steps

• Designer: Review visual consistency and token correctness
• CI: Verify build passes with new tokens
• Post-merge: Verify no visual regressions in deployed MC