feat(ui): migrate chat turn markers onto @maka/ui Marker primitive (#332)

[Astro-Han]

Summary

PR2 of #332. Moves the per-turn status / lineage / footer chrome onto a new @maka/uiMarker chat primitive and retires the bespoke .maka-turn-* shell CSS. Zero visual change — same governance pass as PR1, not a redesign.

Migrated families: turn summary strip + chips (incl. the "切换" pill), aborted marker, failed banner (+ icon + recovery), lineage rows + badges (forward/reverse), and the footer + footer actions (also reused by the user-message copy via MessageCopyButton footerStyle).

Why

Closes one more slice of #332: collapse the last bespoke chat-flow island onto the shadcn Base UI + Tailwind substrate (one substrate + a contract-test net). Each retired declaration becomes a literal arbitrary utility that compiles 1:1 to what it replaced, so the cva source string is the computed-style proof — the cascade contract asserts the exact strings, no browser needed.

Scope

Changed:

• packages/ui/src/primitives/chat.tsx — add Marker + a markerVariants cva (kept internal, see below). Literalized pixels / oklch relative-color tints / var() tokens; data-[kind|state|switched|direction|pending|copy-feedback] conditionals; ::before middot separators; [&:hover:not(:disabled)] / focus-visible / disabled / aria-disabled states. The measure-column geometry the old tool-output.css re-anchor applied to summary / lineage / footer is folded into those container variants (location-independent, no longer keyed on a [data-role=assistant] descendant).
• scripts/check-chat-marker-computed-style.mjs — new, re-runnable headless-Electron before/after check (the rendered half of feat(ui): govern chat conversation-flow display onto @maka/ui Base UI primitives #332's lock): loads the real built renderer CSS from main and this branch and diffs getComputedStyle for every migrated element, in a DOM that mirrors TurnView nesting. Not production code — a verification script alongside diff-screenshots.mjs. It inlines the bundle into a <style> block (an earlier <link> form applied no CSS and was a vacuous 0-diff; see Verification). Its header documents what it can and can't observe (resting surface + ::before middots yes; the interactive :hover/:focus-visible pseudo-states no — getComputedStyle can't see a forced pseudo).
• packages/ui/src/components.tsx — wire TurnSummary / TurnView / TurnFooterActions + the reused footer-style copy onto Marker / markerVariants. No new responsibilities added to the sink. The footer-action / lineage-badge call sites render as UiButton variant="quiet" size="nav" (the bare size), with the geometry size="sm" used to supply implicitly — h-8 (→30px), text-xs's 4/3 line-height (leading-[16px]/[12px]), and [border:0] — folded explicitly into the marker variants so the shell fully owns its own pixels instead of inheriting-then-overriding a size token. The footer action is now quiet in every state: the pending branch that used to switch the Button to variant="secondary" is dropped — the marker shell fully overrides the variant either way, so the switch was visually inert (proven below), and quiet is now the single, already-pinned merge path (no untested secondary merge, and no reliance on stylesheet source-order to suppress secondary's border / border-border). Pending still surfaces via data-pending / aria-busy and the full label+icon stay visible, exactly as before. The STATUS_FOOTER_PRIORITY map (all four actions were statically secondary) and its stale PR-UI-17 hover-expansion comment are removed; the priority variable and its data-priority attribute go with them — a grep shows no CSS / test / runtime consumer of data-priority, so it was a dead presentation hook (YAGNI).
• Delete retired marker CSS in maka-tokens.css (summary), styles/settings/models.css (aborted / failed / lineage / footer), and the styles/tool-output.css measure-column re-anchor; each removal replaced with a one-line pointer comment.
• Tests: new chat-marker-cascade-contract.test.ts; update the PR1 contract's footer re-anchor assertion and the copy-hygiene footer-state assertions to the primitive; add Marker hook tests + the non-leaf merge-resolution tests in @maka/ui.

Not included:

• .maka-turn-thinking is deferred (decision surfaced per the issue): the committed-turn reasoning <details> styles itself via summary::before / ::-webkit-details-marker pseudo-elements and an @starting-style body fade that don't reduce to leaf utilities (the source-string == computed-style proof wouldn't hold), and maka-tokens.css already documents an intended Base UI Accordion path for it. It stays hand-written for that later effort.
• The .maka-turn container, .maka-turn-tools, .maka-turn-streaming, and .maka-turn[data-search-highlight] are turn-container concerns, not markers — kept.
• The broaderfooter-action / UiButton consolidation is deferred (reviewer P3, partial). Done here: size="sm"→"nav", and the footer action is now variant="quiet" in every state (the inert secondary pending branch is gone). What remains deferred is making the footer-action shell stop declaring its ownfocus-visible / hover pixels and instead inherit UiButton variant="quiet"'s. That would change the rendered result — the footer's focus-visible outline vs UiButton's ring, and its oklch(… / 0.05) hover tint vs quiet's bg-muted — so it's a visual redesign, not a zero-visual refactor, and belongs in the follow-up "consolidate the chat button story" PR that owns that decision. The remaining two-cva overlap is pre-existing (main already wrapped these in UiButton).

Verification

• @maka/ui test: 10/10 (incl. 2 Marker hook tests + 2 non-leaf merge-resolution tests).
• desktop node --test: 1595/1595 (incl. the new marker cascade contract, updated PR1 contract, updated copy-hygiene contract, and dead-CSS pruning contract).
• npm run typecheck clean across workspaces.
• Zero-visual proof — main vs head computed style (reviewer P2), now a committed re-runnable artifact:scripts/check-chat-marker-computed-style.mjs (checked in this PR) loads the real built renderer CSS from both main and this branch and reads getComputedStyle for the migrated chrome on each — footer action (resting + pending + copy-pending + copied + failed), forward/reverse lineage badge, summary strip, summary chips for every data-kind (model / tools / duration / tokens) + the in-progress data-state + the summary-switched "切换" pill in a data-switched chip, failed banner + recovery, footer toolbar, both the forward lineage-row and the lineage-row-reverse container, aborted marker (22 resting element/state rows), plus the ::before middot separators on a non-first summary chip and the failed-recovery (2 pseudo rows), in a DOM that mirrors TurnView nesting (chips in a summary, actions in a footer, badges in a lineage row) so positional pseudo-classes and inheritance resolve as in production, all under the same [data-slot=message][data-role=assistant] > .maka-turn ancestor so main's descendant re-anchors apply too. Result across 36 box/typography/color/transition properties per element row (4 per pseudo row): identical on every row — TOTAL DIFFS: 0, exits non-zero on any drift. Two findings the rendered diff caught that the source strings hid: (a) two latent deltas the old size="sm" form had masked (a text-xs line-height and border:0's style/color), now folded into the variants and pinned by the merge-resolution unit tests; (b) the pending footer action's secondary-vs-quiet Button variant is visually inert (the marker shell overrides it), so that branch is dropped — the footer-pending / footer-copy-pending rows verify main's old secondary path is pixel-equal to the new quiet one.
  • The script had to be fixed to mean anything (surfaced while extending coverage for reviewer P2): an earlier version <link>ed the CSS bundle from a data:/file: page, which a browser silently refuses to apply as a cross-origin subresource — so every element read its UA default identically on both sides and the 0-diff was vacuous. It now inlines the bundle into a <style> block of a file:// temp document; with the CSS actually applied, all 22 element rows read their real literalized values (e.g. footer-rest → border-radius: 8px, summary-switched → oklch(0.17 0.005 75 / 0.06) bg / 11px / 600, lineage-row-reverse → margin-top: 4px, the in-progress chip → accent oklch(0.7 0.135 152) + font-weight: 600), and the ::before middots resolve to a real content: "·" — both previously misattributed to harness limits that were really just the unloaded stylesheet.
  • Scope of the rendered proof (honest): it now covers the resting surface and the ::before middots for real. The only thing still not observable is the interactive pseudo-states — :hover / :focus-visible / :focus-within — because getComputedStyle does not reflect a DevTools CSS.forcePseudoState force (a known Chromium behavior: the force drives the inspector, not in-page computed style; verified resting == forced-"hover" even with the CSS applied), and a headless window has no live pointer. Those rules do compile into the bundle (greppable: …:hover:not(:disabled){background-color:oklch(… / .05)}) and are pinned by the cascade contract's exact source-string literals (focus-visible:[outline:2px_solid_var(--accent)], the hover tint) in chat-marker-cascade-contract.test.ts. The one genuinely non-leaf interactive case — does the footer action's hover/focus win the cn(buttonVariants, markerVariants) merge? — is a deterministic specificity fact, not a rendering question: the marker's [&:hover:not(:disabled)] (0,3,0) outranks UiButton quiet's hover:bg-muted (0,2,0), exactly as the retired .maka-turn-footer-action:hover:not(:disabled) did on main. So this script is a rendered proof of the resting surface + middots, with only the interactive states pinned by source string.
• The non-leaf footer-action / lineage-badge (the only markers that render as UiButton) have their cn(buttonVariants({quiet,nav}), markerVariants(...)) merge pinned: the marker shell's pixels win, and the buttonVariants base/quiet conflicts (gap-2, rounded-md, text-muted-foreground) drop out.
• .maka-turn-* is shared-by-file-location with styles/settings/models.css, but static analysis confirms no.maka-turn-summary/-aborted/-failed/-lineage/-footer className exists outside components.tsx (only doc comments), and TurnView renders only in the main chat — so deleting the CSS orphans nothing. (maka-tokens.css isn't scanned by check-dead-css.mjs; verified by grep + the contract test instead.)

User-facing impact

None — zero visual change, now proven by a re-runnable main-vs-head computed-style diff (0 deltas across 22 resting element/state rows × 36 properties + 2 ::before middot rows, with the CSS actually applied — see the inlining fix in Verification), and the interactive :hover/:focus-visible states pinned by the cascade contract source strings (which now also pin every chip data-kind conditional and the combined disabled/aria-disabled + data-pending opacity guards).

Reviewer notes

• The faithful-translation claim rests on literalization: please sanity-check a couple of variant strings in chat.tsx against the deleted CSS rather than trusting the diff wholesale.
• markerVariants is intentionally not re-exported from the @maka/ui barrel — only Marker + its types are public. The lineage badge / footer action import it by relative path, so the variant table stays an internal, freely-removable styling detail (the whole point of a governance pass). Contrast buttonVariants, which is public because it has external consumers.
• When a footer copy button is simultaneously disabled and data-pending (transient, during a copy click), the pending 0.78 dim now outranks the disabled 0.45 dim by specificity — combined-modifier guards (disabled:data-[pending=true]:opacity-[0.78]) raise it to (0,3,0), so the value stays 0.78 (matching the retired CSS) regardless of Tailwind emit order, not by source order.