Run: clickthrough-detail-foundation

• branch: claude/clickthrough-detail-foundation-wqypq2
• pr: #671

Spec: Clickthrough detail-page foundation

• slug: clickthrough-detail-foundation
• personas: Platform (all six dashboards — admin, CSM, SDM, expert, vendor, customer)
• touches: apps/demo/components/dashboard (new detail-page shell), apps/demo/components/dashboard/headline-metric.tsx
• complexity: standard

Problem

Card clickthroughs across the persona dashboards point at non-existent routes and 404 — the vendor tiles link to /vendor/* prefixes that no route serves, and there is no agreed shape for what a clickthrough destination page even looks like. This blocks the Refine the Bridge initiative's Q2 2026 objective (dashboards navigable end-to-end): before building per-persona destination pages, the three persona stubs that follow (admin/vendor/customer clickthrough pages, sequence 2–4 of this epic) need one settled pattern — where a destination page lives, how it's headed, and how it links back — so they are consistent rather than each inventing their own.

Proposed change

Establish the shared scaffolding for clickthrough detail pages in apps/demo:

• A reusable detail-page shell component (DetailPageShell) that frames every clickthrough destination consistently: a page header (title + optional subtitle/eyebrow), a back-link to the source dashboard following the existing exemplar in app/(demo)/dashboards/admin/sla/page.tsx (<ArrowLeft /> Back to <persona> dashboard, linking to /dashboards/<persona>), and a content slot (children) where each persona stub drops its card data. Typography-everywhere and the app's local UI primitives, matching the existing dashboards.
• The shell stays dumb: header + back-link + children. Rendering the actual card data is each persona stub's job.
• A written-down routing convention: destination pages live at app/(demo)/dashboards/<persona>/<slug>/page.tsx → real URL /dashboards/<persona>/<slug>. Documented where the persona stubs can follow it (a short note co-located with the shell).
• One route demonstrates the shell so it is visible and accessible in the running app (an exemplar route, or the shell wired into the first real destination).
• Fix the shared HeadlineMetric footer so its default clickthrough target follows the new convention rather than a broken /vendor/*-style prefix. Only vendor consumes HeadlineMetric; the concrete per-tile hrefs are set by persona stub 2 — this run only makes the component's default convention-compliant (no more 404-ing default), it does not rewrite the vendor call sites.

Acceptance criteria

• A reusable DetailPageShell component exists in apps/demo/components/dashboard and renders a title, an optional subtitle/eyebrow, a working back-link to /dashboards/<persona>, and a content slot (children).
• The shell is demonstrably usable by at least one route (an exemplar or the first persona page consuming it) — visible and accessible in the running app at a real /dashboards/<persona>/<slug> URL.
• The routing convention /dashboards/<persona>/<slug> is written down where the persona stubs can follow it (a note beside the shell).
• The shared HeadlineMetric footer no longer hard-codes a 404-ing /vendor/* prefix as its default; its default clickthrough target is convention-compliant.
• No regression to the six existing dashboard homes or the working routes (/dashboards/admin/sla, /dashboards/admin/settings, /workspace/customer).

Out of scope

• Building any of the actual per-persona destination pages (stubs 2–4 of this epic).
• Rewriting per-persona call-site hrefs beyond making the shared HeadlineMetric default convention-compliant (concrete vendor hrefs are persona stub 2's job).
• CSM / SDM / Expert destination pages, row-level clickthrough stubs, and in-page anchors.

Open questions

• none — the shell's shape (header + back-link + children), the routing convention, and the HeadlineMetric default fix are all settled by the stub; the demonstrating route may be a purpose-built exemplar or the first real destination at Build's discretion, as either satisfies the "visible in the running app" criterion.

Build notes: clickthrough-detail-foundation

• commits: feat: clickthrough-detail-foundation — DetailPageShell + routing convention + HeadlineMetric default

What changed

• apps/demo/components/dashboard/detail-page-shell.tsx (new): reusable DetailPageShell presentational component — back-link to /dashboards/<persona> (label + accent from the persona registry), a header (title + optional eyebrow / description / icon / inline action), and a children content slot. Its doc-comment is the written-down routing convention (app/(demo)/dashboards/<persona>/<slug>/page.tsx → /dashboards/<persona>/<slug>) that the per-persona clickthrough stubs (2–4) follow. Kept dumb: header + back-link + children only.
• apps/demo/app/(demo)/dashboards/admin/sla/page.tsx: refactored to consume DetailPageShell instead of hand-rolling the header/back-link block. This is the demonstrating route — a real, already-working /dashboards/admin/sla URL now proves the shell renders and is reachable, and the duplicated header pattern is removed. Behaviour-preserving (same icon, title, status badge, description, back-link target); the only copy shift is the back-link label deriving from the persona registry ("Back to Admin dashboard").
• apps/demo/components/dashboard/headline-metric.tsx: href is now optional with a convention-compliant default of /dashboards/vendor (a real route), replacing the reliance on callers passing a 404-ing /vendor/*-style prefix. Only vendor consumes this component; the concrete per-tile /dashboards/vendor/<slug> hrefs are set by the vendor clickthrough-pages work (stub 2), which is out of scope here.

Acceptance criteria status

• A reusable DetailPageShell component exists in apps/demo/components/dashboard and renders a title, an optional subtitle/eyebrow, a working back-link to /dashboards/<persona>, and a content slot — implemented in detail-page-shell.tsx.
• The shell is demonstrably usable by at least one route — /dashboards/admin/sla consumes it and renders at a real /dashboards/<persona>/<slug> URL.
• The routing convention /dashboards/<persona>/<slug> is written down beside the shell — the DetailPageShell doc-comment states it for the persona stubs to follow.
• The shared HeadlineMetric footer no longer hard-codes a 404-ing /vendor/* prefix as its default; the default is now /dashboards/vendor (convention-compliant, real route).
• No regression to the six dashboard homes or the working routes — the sla refactor is behaviour-preserving; the shell change is additive; the HeadlineMetric default only affects callers that omit href (none today). Confirm on the Vercel preview.

Verify result

• Mechanical checks (format · lint · typecheck · build) run in CI + the Vercel preview, not here. Release reads them back from the PR's check runs. No check is known to fail.

Notes for review

• The demonstrating route is the existing /dashboards/admin/sla, refactored onto the shell rather than a net-new persona destination page — that deliberately avoids inventing any of the actual per-persona clickthrough pages, which belong to stubs 2–4.
• HeadlineMetric call sites still pass their existing /vendor/* hrefs; those 404s are fixed by stub 2 (vendor clickthrough pages), not this foundation run — only the component's default changed.

Release: clickthrough-detail-foundation

• pr: #671 · merged: yes — squash-merged this release
• CI: green — Quality Project (lint · typecheck · build), preview DB migration, spec-structure advisory all passed; Vercel previews deployed (demo + web Ready). "Review diff against CONVENTIONS.md" action disabled, so review ran locally via /code-review.
• technical docs: no technical docs impact — apps/docs documents the demo/dashboards app at app-level (name, purpose, port), not its internal components or route patterns; this change adds an internal shell + a routing convention within apps/demo, altering nothing documented.
• business docs: no business docs impact — no user-facing behaviour changed (the /dashboards/admin/sla page renders identically; the HeadlineMetric default is not reached by any current call site).
• release notes: none — internal change. Pure foundation scaffolding (stub 1 of 4 in the dashboard-clickthroughs epic): a reusable page shell, a routing convention, and a component default, with no user-visible change and no standalone investor-demonstrable outcome. The navigable-dashboards outcome (the "dashboards navigable end-to-end" objective) lands when the per-persona clickthrough pages ship in stubs 2–4 — that is the investor/changelog moment, not this.
• sent: none — internal change (no investor update).

Review summary

• /code-review over the branch diff (3 code files) — no correctness bugs. The sla refactor is behaviour-preserving (same wrapper, back-link, icon accent, title, badge, description); removed Link/ArrowLeft imports are now unused and correctly dropped; HeadlineMetric.href made optional is backward-compatible. — resolved / accepted.
• Back-link default copy shifts from "Back to admin dashboard" to "Back to Admin dashboard" (persona-registry label). — accepted: consistent across personas and correct for acronym labels (CSM/SDM); not a functional regression.

Acceptance check (vs spec)

• Reusable DetailPageShell in apps/demo/components/dashboard — renders title, optional eyebrow, back-link to /dashboards/<persona>, and a children slot.
• Demonstrably usable by ≥1 route — /dashboards/admin/sla consumes it and renders at a real URL (Vercel demo preview Ready).
• Routing convention /dashboards/<persona>/<slug> written down beside the shell — in the DetailPageShell doc-comment.
• HeadlineMetric default no longer a 404-ing /vendor/* prefix — now /dashboards/vendor (real route, convention-compliant).
• No regression to the six dashboard homes or working routes — the sla refactor is behaviour-preserving; the shell is additive; the HeadlineMetric default only affects callers that omit href (none today).