Activity

Scope

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

Replaces the naive HTML <Leaderboard> table with a responsive tokens-aware <DataTable> primitive. All 5× LeaderboardPanel usages inherit the new behaviour automatically — zero PHP changes.

What's in

• resources/js/components/reports/data-table.tsx (new, ~250 lines)
  • Desktop ≥768px: proper <table> with hairline rows, mono numerics, uppercase mono overline column headers.
  • Mobile <768px: each row collapses into a card with labelled key/value pairs — no horizontal scroll, no one-word-per-line wrapping.
  • Smart-truncate at last whitespace (no mid-word cuts) for untyped string cells > 80 chars.
  • Format-aware cell rendering: number (mono tabular-nums, em-dash for 0/null), velocity (▲/▼ with success/danger fg, · for zero), predicted (3-tier colour grading by threshold).
  • Linked cells use the new body-link style (subtle underline, hover grows + colour shifts to text-link-hover).
• resources/js/components/reports/leaderboard.tsx (slimmed to a 5-line wrapper) — exports LeaderboardPanel so report-renderer.tsx is untouched.

Pragmatic notes

• Velocity colour mapping is now binary success/danger per the spec (was a 4-tier emerald scale). Small positive velocities on HnPredictor will look brighter; flagged in the agent's report.
• predicted is 3-tier per spec (was 4-tier with a bold weight). The "headlines never get bold" rule from the tokens spec wins.
• No <EmptyState> yet — inline "No data" placeholder for now. Phase 3 replaces it with contextual messages.

Test plan

• npm run build clean
• vendor/bin/pint --dirty --format agent clean (no PHP changes)
• php artisan test --compact — 177 pass, 26 skipped, 2 pre-existing LinkedIn failures (unrelated, broken on main)
• Post-deploy Playwright at 1280×800 + 390×844 on /reports/predictions, /reports/predicting-hn, /reports/scoreboard