Activity

Scope

Phase 7 of the UX overhaul (plan / audit / tokens / brief).

Applies the three-colour semantic palette as actual meaning — pills on hit_class / prediction_class / verdict columns, plus a <TwoColumnGroup> panel so adjacent compared leaderboards (Why-we-win / Why-we-miss) sit side-by-side. Rebased on top of Phase 6 (#117).

What's in

• <StatusBadge> (new) — auto-maps known values across hit/prediction/failure/success kinds to success-fg/bg, warning-fg/bg, danger-fg/bg, with a muted fallback. Renders mono-uppercase pill; snake_case values render as "front page lock" cleanly via Tailwind uppercase.
• <DataTable> — new 'badge' column format delegating to <StatusBadge>. Existing formatting branches untouched.
• <TwoColumnGroup> (PHP + React) — Panel wrapper that renders two child panels side-by-side on desktop, stacked on mobile (gap-8 md:gap-12 matching space-panel-gap).
• report-renderer.tsx — factored out renderPanel helper + exported PanelData union so <TwoColumnGroup> can dispatch through the same single source of truth.
• Predictions.php — class/verdict/reason columns now use format: 'badge'; Why-we-win + Why-we-miss collapsed into one TwoColumnGroup.
• 2 new Pest cases for TwoColumnGroup::render() shape.

Pragmatic notes from the agent

• Single dispatch via renderPanel (kept in report-renderer.tsx) chosen over duplicating the switch into TwoColumnGroup — cleaner and keeps panel-type mapping in one place.
• Conductor rebased on Phase 6 (#117) — only conflict was the README status board row.

Test plan

• npm run build clean (post-rebase)
• vendor/bin/pint --dirty --format agent clean
• php artisan test --compact — 188 pass, 26 skipped, 2 pre-existing LinkedIn failures (unrelated)
• Post-deploy Playwright on /reports/predictions — coloured badges in class/verdict cells, Why-we-win + Why-we-miss side-by-side desktop / stacked mobile