Skip to Content

← All archived runs

Run: csm-dashboard-parity

run.md

Run: csm-dashboard-parity

  • branch: claude/csm-dashboard-parity-cyzyv6
  • pr: #703

01_define/output/spec.md

Spec: CSM dashboard parity

  • slug: csm-dashboard-parity
  • personas: CSM
  • touches: apps/web/app/(app)/csm/dashboard/page.tsx, apps/web/components/dashboard/csm/action-strip-section.tsx, apps/web/components/dashboard/csm/blocker-table-row.tsx
  • complexity: trivial

Problem

Web's CSM "Go live control" dashboard has drifted from the demo design reference in small, presentational ways that erode the persona experience: the header lost demo's urgency tertiary line and demoted the tagline sizing, the action strip lost its responsive layout (it no longer wraps or stacks on narrow viewports), and the go-live blocker row shows a different secondary label than demo. This matters for the demo-web-parity epic under Refine the Bridge / Q2 2026 O1 (vendor engagement — the CSM drives activation and go-live): the CSM dashboard is where a CSM applies pressure to unblock go-lives, so demo and web must present the same, coherent control surface rather than quietly diverging.

Proposed change

Bring web's CSM dashboard back into visual parity with demo, keeping web's legitimate real-data enrichments:

  • Header — restore demo's urgency tertiary line ("Red and Amber only · Sorted by urgency · Every row = one problem to solve") at xs/text-gray-400, and restore the "See what is blocked · Apply pressure to the right actor · Push accounts to value" tagline to demo's sm/medium/text-gray-700 sizing. Keep web's real "Signed in as {name}" line (a documented, real-data enrichment demo can't show) above the tagline.
  • Action strip — restore demo's responsive classes: the strip stacks then rows out (flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between), the escalation stats wrap (flex-wrap gap-x-3 gap-y-0.5), and the "Fix now" button holds its size (shrink-0).
  • Go-live blocker row — change the secondary label under the account name from the account's region to the owning CSM name (row.csm), matching demo. This reinforces the CSM-centric model (clicking a CSM in the activation table filters the blocker queue) and stays meaningful when scope is "All accounts". The region field stays on the row type; only the displayed label changes.
  • Activation-table scope — settled as panel-only: scope stays on web's server-driven Portfolio panel toggle ("My accounts" / "All accounts"), which already drives the portfolio, activation rollup, blocker queue and outreach together. Web's activation table deliberately gets no second toggle, and the label wording ("My accounts" / "All accounts") is confirmed as the standard across apps — both already match in web, so this is a decision recorded here, not a code change. Demo's activation-table toggle is retired separately when the sibling stub csm-sdm-panels-in-demo brings the Portfolio panel into demo.

Acceptance criteria

  • The CSM dashboard header shows the "Red and Amber only · Sorted by urgency · Every row = one problem to solve" line at xs/text-gray-400, matching demo.
  • The header tagline "See what is blocked · Apply pressure to the right actor · Push accounts to value" renders at demo's sm/medium/text-gray-700 sizing (not demoted to xs).
  • Web's real "Signed in as {name}" line is preserved in the header.
  • The action strip stacks vertically on narrow viewports and rows out at sm (flex-col → sm:flex-row / sm:justify-between), the escalation stats wrap, and the "Fix now" button does not shrink — matching demo's responsive behaviour.
  • The go-live blocker row's secondary label under the account name shows the owning CSM name, consistent with demo.
  • No second scope toggle is added to web's activation table; the Portfolio-panel scope control remains the single scope source and reads "My accounts" / "All accounts".

Out of scope

  • The CSM "My portfolio" panel itself and bringing the portfolio/scope panel into demo — separate stub csm-sdm-panels-in-demo. That stub also retires demo's activation-table scope toggle.
  • Web-only communication outreach input and the Resolve button (intentional real-data enrichment; a documented, accepted divergence — not reconciled here).
  • Any data, service, or query changes — this run is presentational parity only; the region field and all rollup/queue logic are untouched.
  • Rewording the activation-table title ("Go live status across my accounts") for the all-accounts scope — noted below, not addressed this run.

Open questions

  • Non-blocking: when scope is "All accounts", the activation-table title still reads "across my accounts". Left as-is this run (see Out of scope); can be tidied when csm-sdm-panels-in-demo reworks the panel/scope story across both apps.

02_build/output/notes.md

Build notes: csm-dashboard-parity

  • commits: feat: csm-dashboard-parity — restore demo header lines, responsive action strip, CSM blocker label

What changed

  • apps/web/app/(app)/csm/dashboard/page.tsx — header: restored the "See what is blocked · …" tagline to demo's sm/medium/text-gray-700 sizing (was demoted to xs), and added the "Red and Amber only · Sorted by urgency · Every row = one problem to solve" tertiary line at xs/text-gray-400. Web's real "Signed in as {name}" line is kept above the tagline.
  • apps/web/components/dashboard/csm/action-strip-section.tsx — restored demo's responsive layout: the Alert now flex-col items-start gap-3 and rows out at sm:flex-row sm:items-center sm:justify-between; the escalation stats row wraps (flex-wrap gap-x-3 gap-y-0.5); the "Fix now" Link holds its size (shrink-0).
  • apps/web/components/dashboard/csm/blocker-table-row.tsx — the secondary label under the account name now shows the owning CSM name (row.csm) instead of row.region, matching demo. The region field is retained on the row type (context/filtering); only the rendered label changed, and the two field JSDoc comments were updated to reflect it.

Acceptance criteria status

  • CSM header shows the "Red and Amber only · …" line at xs/text-gray-400 — added as the header's tertiary line.
  • Header tagline "See what is blocked · …" renders at demo's sm/medium/text-gray-700 sizing — restored from the demoted xs.
  • Web's real "Signed in as {name}" line is preserved — left untouched above the tagline.
  • Action strip is responsive (flex-col → sm:flex-row/sm:justify-between, stats wrap, button shrink-0) — classes restored to match demo.
  • Blocker row secondary label shows the owning CSM name — row.region → row.csm.
  • No second scope toggle added to web's activation table; the Portfolio-panel scope control remains the single scope source, reading "My accounts" / "All accounts" — verified: activation table carries no toggle and the panel wording already matches, so no code change was needed (decision recorded in the spec).

Verify result

  • mechanical checks (format · lint · typecheck · build) run in CI + the Vercel preview, not here. All changes are presentational (Tailwind class + one field swap on an existing typed field), no logic or data changes — no check is expected to fail.

Notes for review

  • Presentational parity only against the demo CSM dashboard. Best checked side-by-side on the web preview vs demo preview: header (three stacked lines), the action strip at a narrow width (it should stack and the stats should wrap), and the blocker rows (secondary label = CSM name).
  • The activation-table scope decision is "panel-only" per the spec — deliberately no toggle added to the table here; demo's own activation-table toggle is retired later by csm-sdm-panels-in-demo.