Epic: WebUI UX audit + design system extraction

[nextlevelshit]

Epic: WebUI UX audit + design system extraction

Full replacement of current production UI with a unified design system. Keep pipeline run details (the one durable surface). Everything else consolidated to production dark theme.

Branch strategy

All PRs target alpha branch, NOT main. Consolidation validated on alpha before merging to main.

Migration audit (2026-05-03) — ALL COMPLETE

All standalone pages migrated to design system CSS classes (w-nav, w-container, w-page-header, w-filterbar, w-list, badge, w-btn). CSS variables in style.css default to dark mode. No Tailwind CDN — utilities come from style.css.

Alpha branch commits since PR #1631:

• be1ac640 — /runs list migrated
• a4110280 — /pipelines migrated
• 0e444ddf — /contracts, /personas, /404 migrated
• b9371bc9 — /analytics, /retros, /skills, /compose migrated
• 32a61661 — /preview/* routes removed, nav_consolidated renamed nav_main
• 9b5b8d6f — add data-theme="dark" to all page templates
• b5bb70a4 — extract w-nav to partial with SVG icons per nav item

Audit results

Page	HTTP	Design system	Layout
/work	200	w-nav (partial), w-container, w-page-header, w-list, badge	standalone
/onboard	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/proposals	200	w-nav (partial), w-container, w-page-header, badge	standalone
/runs	200	w-nav (partial), w-container, w-page-header, w-filterbar, badge	standalone
/pipelines	200	w-nav (partial), w-container, w-page-header, w-filterbar, badge	standalone
/issues	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/prs	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/contracts	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/personas	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/skills	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/compose	200	w-nav (partial), w-container, w-page-header, w-list	standalone
/analytics	200*	w-nav (partial), w-container, w-page-header, w-list	standalone
/retros	200*	w-nav (partial), w-container, w-page-header, w-list	standalone
/health	200	w-nav (partial), w-container, w-page-header	standalone
/admin	200	sidebar layout (layout.html)	shared
run detail	200	sidebar layout (layout.html)	shared

*Requires analytics or retros build tags respectively

Nav status — COMPLETE

templates/partials/nav_main.html used by all 18 standalone pages. SVG icons per nav item (Work=grid, Runs=play, Pipelines=clock, Proposals=document, Issues=alert-circle, PRs=pull-request, Onboard=layers, Health=activity). Active link highlighted via {{if eq .ActivePage "page"}}class="active"{{end}}.

Child issues

#	Title	PR	Status
#1627	C1: Design system foundation (Tailwind colors + nav partial)	#1631	merged
#1629	C3: Replace /onboard with consolidated design	#1633	merged
#1630	C4: Replace /work + /work-item with consolidated design	#1633	merged
#1632	/proposals migration	#1632	merged
#1637	/runs list migration	#1637	merged
#1638	/pipelines migration	#1638	merged
#1640	/contracts, /personas, /404 migration	#1640	merged
#1641	/analytics, /retros, /skills, /compose migration	#1641	merged
#1645	Nav extraction (w-nav partial + SVG icons)	(alpha only)	merged

Remaining work

1. Work board filterbar (TBD): Add filter controls for forge/kind/state/label filtering. Mockup shows 4 <select> + search input.
2. Work item dispatch wiring (TBD): Enable "Run on this issue" button. Currently disabled with "wires up in Refactor Status Command to Use StateStore Interface #2.4" note.
3. Proposal approve/reject UI (TBD): Per mockup 04-evolution-proposal.html — approve/reject buttons, signal sidebar, diff view, tabs.
4. Bridge view landing (TBD): Currently / redirects to /work. Mockup 00-landing.html shows fleet-at-a-glance dashboard.

Constraints

• API contract unchanged
• Run detail data model unchanged
• All PRs target alpha branch
• No emojis — SVG icons or HTML entities only