Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NHyYupFdBiR4VfoUM7NjSM
2.7 KiB
Step 3 — dashboard restyle on the Tailwind system
Worktree and branch: given in your launch prompt. Read 00-shared.md
(design language, "Dashboard" and "Controls" paragraphs) and
handoff-step2.md (what the design system provides: tokens, .btn, .badge,
.kv, .scroll-x, .prose-body, table and form defaults in
src/web/tailwind.css). Step 2 deliberately left src/web/templates/dashboard/*
unstyled; you restyle every one of them with Tailwind utilities plus those
components, then rebuild src/web/static/app.css (npm run css) and commit it.
Templates: overview, runs, run, articles, article, ratings,
profile, stats, settings, settings_history, jobs, job, users,
_pager, _sparkline, and the shared partials _candidate_row.html,
_signals_table.html, _pagination.html (the reader-side _rating_widget.html
is styled already; the dashboard variant with the note field must look right
inside tables and on the article page).
Rules of the road:
- Keep every handler field, form
action/name/id,data-*hook and the SVG classes the sparkline/funnel code emits (.spark,.s0….s5,.line,.funnel). Readsrc/web/static/app.jsbefore touching anything it queries. - Old CSS class names that tests assert on (grep
tests/and the#[cfg(test)]modules undersrc/web/dashboard/forclass=and for names likebadge,num,muted,card,superseded) may stay as harmless extra classes or be updated together with the test — never leave a test asserting a class the template no longer emits. - Page header pattern on every page: title, one-line description, actions
(buttons/links) right-aligned, then filters, then content. Stat tiles on the
overview and stats pages. Tables per the shared brief; long text cells
(
message,editor_why) wrap withoverflow-wrap:anywhere; numeric columns right-alignedtabular-nums; stickytheadonbg-paper. - Settings: grouped cards with monospace section keys, a two-column setting row
(label + help left, control right) collapsing on phones, locked (env-overridden)
fields visibly disabled with a small lock note, the sticky save bar, danger
actions in
text-down. Profile: editor/preview split that stacks on phones. Jobs: cards with a status badge, last run, and the start form; the job page's journal in a scrolling monospace block. Users: a simple table. - Both themes, desktop and mobile (390px), every page: screenshot as
adminwith the seeded dev server and look before finishing.
Finish: npm run css + npm run css:check, cargo fmt, clippy -D warnings,
cargo test; write handoff-step3.md; commit once:
Web dashboard v2 step 3: dashboard restyle.