Phase 6a of the dashboard overhaul (plan:
~/.claude/plans/thsi-is-a-app-zippy-reef.md). Closes the
white-labelling story — every brief gets its own accent, heading font,
background preset, and agency label, inherited by every report
generated from it. Logo upload lands in Phase 6b.
Brief schema (v2/server/schemas/brief.ts):
- New BRIEF_THEME Zod object: accent_hex (#rrggbb), accent_2_hex
(optional, auto-derived), heading_font (fraunces|playfair|inter|
space-grotesk), background (cream|paper|ink), agency_name (≤40 chars),
logo_path (Phase 6b placeholder).
- Brief row gets a new theme JSONB column. Idempotent boot-time
ALTER TABLE IF NOT EXISTS picks up the column on existing prod DBs;
init.sql also updated for fresh installs.
Server (v2/server/):
- DAO: setBriefTheme(id, theme | null), BriefRow.theme typed.
- New endpoints (editor role required):
PUT /api/briefs/:id/theme — write theme JSON
DELETE /api/briefs/:id/theme — reset to defaults (NULL)
- publicBrief() exposes theme so the operator-app prefills the editor.
Pipeline (v2/pipeline/):
- New lib/colors.ts: deriveAccent2(hex) — HSL math to compute a darker
companion accent when the picker only specified one. Mirrors the
Original-project relationship between sienna #c2602a and oxblood
#8a3a1a.
- Stage 10 takes a third optional param (theme: BriefTheme | null) and
injects dataset.theme into dataset_v2.json with accent_2 always
populated. Cli.ts call sites pass briefRow.theme.
Dashboard SPA (v2/templates/dashboard_template/):
- Types extended with DatasetTheme.
- App.tsx applies theme at boot via document.documentElement.style
.setProperty before first render — avoids a colour-flash on any
non-default theme. FONT_STACKS map heads_font enum to the actual
CSS font stack (fonts already preloaded in index.html).
- Background preset 'paper' lightens; 'ink' flips the surface/text
axis for dark-deck reports (still picks up the brand accent).
- Topbar renders agency_name + logo placeholder. Falls back to
"SOCIAL LISTENING" eyebrow when no theme is set.
Operator app (v2/operator-app/):
- New ThemeEditor component on the brief edit page:
- 8 accent preset swatches (Sienna/Oxblood/Forest/Slate/Olive/
Wine/Plum/Ink) + custom hex input.
- 4 heading-font tiles each rendering "The Branded Glass Moment"
in the candidate stack — WYSIWYG without a separate preview.
- 3 background presets (Cream/Paper/Ink) shown as colour swatches.
- Agency name text input (≤40 chars).
- Save / Reset to defaults.
- New hooks: useUpdateBriefTheme, useResetBriefTheme.
What's intentionally NOT in this phase:
- Logo upload (Phase 6b — needs multipart parser, sharp downscaling,
SVG sanitisation).
- Free-form CSS textarea (out of scope by design — maintenance trap).
- Custom body / line / format / maturity colours (categorical signals;
changing them breaks comparability across reports).
Both Vite builds pass. tsc --noEmit clean. mom_compare unit test
fixture untouched (no schema break).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2764123cf7