PR: #353: [Story-1382] Matter detail header + right rail (Storybook only) by @ankitmaheshwari-com

Story 1382 · EPIC-006 Matter Shell

Matter detail header + right rail — Storybook-first

The matter-detail chrome (the editorial top bar + the matter-admin rail) built and visually verified in Storybook before any live /matters/[id] wiring — per the repo's Storybook-first + "done = system boundary" doctrine. Two presentational components, no route, no data fetch.

Two locked designs disagreed — resolved before building

The source-of-truth files conflicted; rather than silently pick, the conflicts were surfaced and decided (AGENTS.md: flag conflicts, do not redesign).

Conflict	Decision
`matter-topbar-v5-lock` shows 6 tabs (Strategy folded into Brief); `matter-tab-screens-v1` + the task show 7.	7 tabs incl. Strategy: Brief · Strategy · Documents · Filings · Chronology · Proof · Hearings.
The task's 320px "Client / Parties / Team / Value" rail is in neither locked file (file 1 has a 280px "Matter administration" panel; file 2 only a 44px icon strip).	Build the locked admin panel (280px key:value rows) + the 44px icon strip. No invented design.

Components (`src/components/matter-detail/`)

MatterDetailHeader — sticky top bar. row 1: M-0001 mono crumb + serif (Playfair) title + status pill / ⌘K search ghost + agent pill (real photo, monogram fallback). row 2: the 7 tabs (crimson-underline active) + proceeding lens chip + add-proceeding. StatusPill is a shared leaf; tab list + status tone live in presentation.ts.
MatterRightRail — composes MatterAdminPanel (280px: Lead counsel · Forum · Case ref · Status · Proceedings editable rows + the non-editable open/close row) and RailIconStrip (44px, 10 grouped Lucide icons, inbox badge, active indicator).

Substrate discipline

Tokens only — every colour is a token-backed utility (text-ink-strong, bg-crimson) or bg-(--token) over a var from colors_and_type.css (imported by globals.css). rg -nP '#[0-9a-fA-F]{3,8}|rgba?\(|hsla?\(' over the folder is clean; no [#xxx].
Lucide only — no emoji. Serif title, Inter body, JetBrains Mono crumb/meta via font-serif-display / font-mono-app.
i18n — every string via next-intl under a new MatterDetail namespace, added to both en.json and hi.json; status labels reuse Matters.status.*.

Verification Storybook

MatterDetailHeader.stories.tsx — Default, WithProceedingChip, LongTitle, status variants (Discovery/Active/Closed/Archived), and one story per active tab.
MatterRightRail.stories.tsx — Filled, Sparse, WithLeadCounsel, StripOnly, lifecycle variants. (The task's WithMembers story doesn't map to the admin panel — there is no members section — so it's replaced by StripOnly.)
Rendered in Storybook at production width and compared side-by-side to the locked HTML: header (crumb · serif title · amber Discovery pill · ⌘K search · Mira pill · 7 tabs crimson-underlined · lens chip) and rail (admin rows + dividers + the 44px strip of 10 Lucide icons with resolved i18n labels) — pixel-faithful.
pnpm lint 0 errors · pnpm build green (tsc clean) · token + emoji greps clean.

Out of scope (next PRs)

Wiring into the live /matters/[id] route; real data fetch; Atlas drawer / floating bar / CCB; per-tab body content.

Files changed

11 file(s), +733 / -0 lines