MC-5018 — Create MC design system primitives

Home Board MC-5018

Create MC design system primitives

Create a lightweight shadcn-like design system for Mission Control's actual Flask/Jinja/vanilla-JS stack. Goal: - Stop MC UI workers from freelancing page-specific HTML/CSS. - ...

State Done Next Action Closed Owner Luci Runtime Closed Age 22h ago

← MC-5018

Ticket is done; runtime is closed. · profile claude_opus_1m_medium

Description

MC-5018

Create a lightweight shadcn-like design system for Mission Control's actual Flask/Jinja/vanilla-JS stack. Goal: - Stop MC UI workers from freelancing page-specific HTML/CSS. - Provide approved primitives that future UI tickets must compose. - Improve visual consistency and reduce repeated design QA failures. Recommended implementation: 1. Add shared MC design tokens CSS for color, typography, spacing, radius, shadow, focus, and status semantics. 2. Add reusable Jinja macros/partials for primitives: - button - card - badge/status chip - page header - toolbar/action group - form field/input/select - modal/drawer shell - empty state - ticket/action card 3. Add a /design-system or equivalent preview route showing every primitive in desktop and mobile-friendly states. 4. Migrate one real MC surface slice (Board card or Ticket detail header/action panel) to prove the primitives work in production context. 5. Document the rule: future MC UI work should use these primitives unless an exception is documented. Design direction: - Linear x Vercel x Sentry x Raycast. - Clean operational SaaS, not generic Bootstrap/admin dashboard. - Dense but readable, strong hierarchy, compact actions, polished status chips, mobile-first proof. Required skills/gates for worker: - Load dev-loop before source edits. - Use creative/popular-web-designs for Linear/Vercel/Sentry/Raycast reference language. - Use creative/worker-design-gate before implementation. - Use devops/mc-design-qa for final evidence. Acceptance criteria: - Shared tokens/primitives exist and are used by at least one real MC page slice. - Preview route renders all primitives and states. - Desktop and 390px mobile screenshots attached for preview route and migrated real slice. - No low-contrast buttons/chips, single-letter wrapping, inaccessible focus states, or page-level mobile overflow. - Relevant regression/browser checks pass. - Final ticket comment includes evidence paths and PASS/FAIL design verdict. Routing: - MC ticket is source of truth. - Implementation may be routed through the internal Kanban/Codex builder, but not as a direct untracked Kanban-only task. Expected check-in: within 2 hours of worker pickup with screenshot baseline and implementation plan.

Activity

done

Luci is working...

Details — Done · High · Luci ▼

State

Done

Closed

State

Priority

People

Owner (assigned to)

Controller

Timing / Details

Due Date

Snooze

Source api (human)

Project Mission Control

Created 22h ago

Updated 21h ago

Advanced / Operator evidence

Routing owner

Routes via

Operator console

Evidence

Ticket is done; runtime is closed. MC is visibility-only. Hermes Luci launches and gates work outside MC, then mirrors evidence/status here.

Workflow

Start Dev Review + QA ▾

Select phases to include:

Research (scott) Implement (larry) (required) Council Review (council) Code Review (luci) Validate (tessa) (required) Sign-off (atlas)

Agents

Review Gates

Decision

WAT routing: choose an agent, review gate, or decision. Buttons use the live runtime when one is attached.

system 22h ago

[visibility-only] Queued message recorded for Hermes Luci. MC did not claim the ticket or spawn a runtime.

api 22h ago

Kanban visibility correction: original internal card t_79b22be5 was on board mc-internal (not the default Hermes Kanban board) and completed early. I found the worktree has uncommitted design-system changes, so I created corrective implementation card t_cf8719da on mc-internal assigned to codexbuilder to audit/finalize/commit/push with required desktop+mobile evidence.

api 22h ago

Luci ownership note: I will see MC-5018 through to the end. Canonical active implementation card is t_cf8719da on mc-internal. I started a bounded monitor (proc_3ae3db095103) that watches the card until terminal status. When the worker finishes, I will verify evidence, handle merge/restart/live-check if clean, or recover manually if blocked/incomplete. Duplicate card t_3decdaed has already been archived.

api 22h ago

Automated monitor: internal Kanban card t_cf8719da reached terminal status=blocked. Luci needs to verify final evidence, merge/restart/live-check if clean, or recover manually if blocked/incomplete.

api 21h ago

MC-5018 completed and landed. What changed: - Added shared MC primitive CSS: static/design-system.css - Added Jinja primitive macro library: templates/partials/mc_primitives.html - Added live preview/catalog route: /design-system - Added preview template: templates/design_system.html - Loaded design-system CSS globally via base.html - Migrated Board v2 card/status chips to use mc-* primitives while retaining v2 behavior/classes - Documented the MC-5018 primitive rule and safety contract in docs/design-system.md - Added tests/test_design_system.py - Bumped asset/service-worker cache version to 20260612-mc-5018-design-system-r2 Commits / deploy: - Branch commit: 643b28160e320c2ad62526bcb9ba30892c1dd7b6 - Merge commit on master: 6993c9ddb77d16968493b0659c751300844ef289 - Final live master commit: 5d4aff5cf0811cb02446cbf081e9032124a9a5cb - Pushed to origin/master and origin/kb/MC-5018-design-system - Live gunicorn master was HUP-reloaded after merge Verification: - Targeted pytest: 207 passed, 12 subtests passed Command: PYTHONDONTWRITEBYTECODE=1 PYTEST_DISABLE_PLUGIN_AUTOLOAD=1 /usr/bin/python3 -m pytest -q -p no:cacheprovider tests/test_design_system.py tests/test_board_v2_dark_theme.py tests/test_board_v2.py - Board canary battery on live :3001: PASS — 13 pass, 0 fail, consoleErrors=0 Command: CANARY_BOARD_STEP_TIMEOUT=180 python3 tests/canary/run_board_battery.py - Live route checks: /design-system 200 /board 200 /static/design-system.css?v=20260612-mc-5018-design-system-r2 200 - Live screenshots captured: /tmp/mc5018-live-evidence/design-system-desktop.png /tmp/mc5018-live-evidence/design-system-mobile390.png /tmp/mc5018-live-evidence/board-desktop.png /tmp/mc5018-live-evidence/board-mobile390.png - Vision review PASS: /design-system mobile: PASS for clipping/overflow, one-letter wrapping, touch targets, overall mobile polish /board mobile: PASS for true horizontal overflow, one-letter wrapping, touch targets/contrast, migrated card styling Design verdict: PASS. MC now has a shadcn-like primitive layer for the actual Flask/Jinja/vanilla-JS stack, with a live preview route and a first production Board slice migrated. Notes: - The controller preserved the existing local Board desktop-scroll polish safely during the merge. - Repo still has pre-existing untracked QA/artifact directories (.gstack/, design/, test-results/, tests/qa-evidence/) that were not part of this ticket and were left untouched.

api 21h ago

Mobile visual gate — APPROVED. Live 390px screenshot evidence: - /tmp/mc5018-live-evidence/design-system-mobile390.png - /tmp/mc5018-live-evidence/board-mobile390.png Explicit verdict: APPROVED mobile verdict. - /design-system mobile: PASS/APPROVED — no true clipping/overflow, no one-letter wrapping, touch targets acceptable, mobile polish acceptable. - /board mobile: PASS/APPROVED — 2-column mobile tabs are intentional, no true horizontal overflow, no one-letter wrapping, touch targets/contrast acceptable, migrated card styling acceptable. Live desktop evidence: - /tmp/mc5018-live-evidence/design-system-desktop.png - /tmp/mc5018-live-evidence/board-desktop.png Board canary: PASS — 13 pass, 0 fail, consoleErrors=0.

api 21h ago

Mobile visual review: APPROVED Viewport: 375px Verdict: APPROVED Live 375px mobile screenshot evidence: ![375px mobile screenshot](/tmp/mc5018-live-evidence/design-system-mobile375.png) ![375px mobile screenshot](/tmp/mc5018-live-evidence/board-mobile375.png) Assessment: - /design-system mobile: APPROVED — no true clipping/overflow, no one-letter wrapping, touch targets acceptable, mobile polish acceptable. - /board mobile: APPROVED — deliberate 2-column mobile tabs, no true horizontal overflow, no one-letter wrapping, touch targets/contrast acceptable, migrated card styling acceptable. This evidence was also persisted to the ticket mobile visual gate fields with verdict=APPROVED, width=375.

api 21h ago

Close-gate note: MC-5018 was manually marked done after evidence verification because the generic MC done gate currently verifies done_sha against the parent ~/workspace repo, while Mission Control is a nested git repo at ~/workspace/mission-control. The landed commit is verified in the correct nested MC repo: 5d4aff5cf0811cb02446cbf081e9032124a9a5cb is pushed to origin/master. Mobile visual gate fields are persisted with verdict=APPROVED and width=375.

luci-board-manager 22h ago

[visibility-only board-manager] Routed this Luci-owned design-system ticket outside MC via internal Kanban card t_79b22be5. Initial claudebuilder launch hit Anthropic extra-usage HTTP 400, so the same card was reclaimed/reassigned to codexbuilder. Verified card status=running, run_id=328, pid=2905999, /proc cwd=/home/lucienne/workspace/_mc_internal_worktrees/MC-5018-design-system. Worker scope: create shared tokens/Jinja primitives, preview route, migrate one real slice, capture desktop+390px screenshots, run focused/browser checks, and make no production runtime/profile routing changes. MC remains visibility-only; no MC runtime/pickup/send/harvest endpoint was used.

luci-board-manager 22h ago

[visibility-only board-manager] Controller gate rejected internal Kanban parent t_79b22be5: worker summary said read-only/no file changes, but the isolated worktree was dirty and MC-5018 still lacked commit/test/browser/screenshot evidence. Created/verified continuation card t_3decdaed in mc-internal (status=ready, run_id=None, pid=None, cwd=/home/lucienne/workspace/_mc_internal_worktrees/MC-5018-design-system) to finish implementation from the same WIP. MC remains visibility-only; no MC runtime/pickup/send/harvest endpoint was used.

luci-board-manager 22h ago

[visibility-only board-manager] Verification update: continuation card t_3decdaed is now running in mc-internal (run_id=331, pid=2918123, pid_alive=True, cwd=/home/lucienne/workspace/_mc_internal_worktrees/MC-5018-design-system). This corrects the immediate post-dispatch race where the first dispatch response returned before the gateway claim was visible. MC-5018 remains waiting on t_3decdaed; no MC runtime/pickup/send/harvest endpoint was used.

luci-board-manager 22h ago

[visibility-only board-manager] Duplicate Kanban repair: t_3decdaed was created during the continuation/dispatch race and would have duplicated MC-5018 in the same worktree. Reclaimed/archived t_3decdaed and kept canonical active worker t_cf8719da (run_id=330, pid=2917920, cwd=/home/lucienne/workspace/_mc_internal_worktrees/MC-5018-design-system). MC-5018 now points at t_cf8719da.

luci-board-manager 22h ago

[visibility-only board-manager] Verification update: after promoting t_cf8719da for implementation continuation, gateway claimed it asynchronously. Verified run_id=338 pid=2941611 cwd=/home/lucienne/workspace/_mc_internal_worktrees/MC-5018-design-system. MC-5018 remains mirrored to kanban_active:t_cf8719da; no duplicate card and no MC runtime/pickup/send/harvest endpoint was used.

Live ▼

No activity yet

←