fix(ui): keep trailing tool-card metadata off the card edge

[kev1n77]

Summary

FlowChat tool-card summary rows inset their two ends with different values: 12px leading against 4px trailing. The trailing 4px was serving two roles at once, because the action region's hover-reveal gutter was taken out of the row inset. Whenever the action region is hidden, the space it releases goes to the only growing item in the row, the content slot, which drags the trailing metadata (+N -N change counts, status summaries, status icons) onto that 4px inset. On screen those values sit 5px from the card border instead of the 13px the leading edge uses, and every card family that renders no action region reaches the same edge.

The row now owns one inset for both ends, the action region compensates for its own reveal gutter, and a consumer slot that mounts empty stays inert.

Fixes #

Type and Areas

Type: bug fix (design system component regression, visual)

Areas: design system UI (FlowChat tool cards). Consumed by web UI, desktop, mobile web and Design Lab. No Rust, protocol, token or markup change.

Motivation / Impact

Trailing metadata now keeps the same distance to the card edge as the leading icon and label (12px inset plus the 1px border), for every card family that shares the prominent summary row.

• Cards without an action region - Canvas, MiniApp, generative widgets and other summary-only consumers - inherit the fix from the shared row, with no per-consumer patch.
• Expanded ambient cards ("thought for N tokens" style) get the same symmetric inset; collapsed traces keep their compact, flush transcript alignment.
• An empty extra slot (a fragment whose conditions are all false) no longer draws the status divider or takes a row gap. It previously consumed 13px of row width for a phantom separator and pushed the status icon around.
• Intentional tradeoff: while the action region is hidden, the action label and content have 8px less room, because the released gap now belongs to the trailing metadata instead of the text.
• Revealed (hover / keyboard focus) geometry is unchanged, so the interaction affordance keeps its tight corner gutter.
• Compatibility: the new --_tool-card-summary-inset is a CSS-module-scoped private variable. No public component API, no token, no markup, no migration.

Verification

Commands, from the repository root:

pnpm run design-system:test
  # 402 tests pass, 0 fail, including the new ratchet test
  # "prominent summary rows keep one symmetric inset and inert empty slots"

pnpm run design-system:check
  # tests + design-lab type-check + typography audit: pass

pnpm run theme:color-audit:design-system-ui
  # 365 files, raw=0, fallbacks=0

pnpm --dir src/web-ui run test:run src/flow_chat/tool-cards
  # 32 files / 305 tests pass

Measured geometry, headless Chrome against the built dist markup and CSS at a 700px row width (before -> after):

Case	Trailing metadata from the card border	Text slot width	Revealed action button from the border
Idle file-write card (reported case)	5px -> 13px	544.34px -> 536.34px	n/a
Same card, hover	50px -> 50px	499.34px -> 499.34px	5px -> 5px (unchanged)
Summary-only card, no action region	5px -> 13px	544.34px -> 536.34px	n/a
Empty extra plus status icon	5px -> 13px; divider chrome 1px border + 8px padding + 4px margin -> all zero	542.86px -> 555.86px	n/a
Expanded ambient card	4px -> 12px	n/a	n/a

The local pnpm run desktop:dev instance serves the fixed module: fetching the transformed CSS module from the Vite dev server shows it carries --_tool-card-summary-inset and the reveal compensation, and no longer carries the asymmetric padding-inline. Per design-system/AGENTS.md, automated measurement is mechanism evidence only; a manual Design Lab pass over the idle, hover and empty-slot states is still recommended before merge.

Reviewer Notes

Root cause, for review of the mechanism:

• The hidden action region cancels the row's 8px gap with margin-inline-start: calc(-1 * var(--openbitfun-space-2)). That cancel is correct and is kept - it just must not also claim the row's end inset.
• The released space is absorbed by .content (flex: 1 1 0), the only growing item in the row, which is what moved .extra (right-aligned by margin-inline-start: auto) to the row's end inset.
• Reveal gutter math: hidden, the region contributes -8px of gap cancel and no end margin; revealed, it adds a 4px start margin and a -8px end margin, which keeps the button at the same 5px from the border as before this change.
• The asymmetric 12px/4px pair dates from the tool-card header rewrite that removed the old rail styles, where the trailing value was the hover gutter rather than a text inset.
• The test pins the contract textually - one inset on both row variants, the reveal compensation, and the inert empty slot - so it cannot silently drift back.
• No screenshots, on purpose: design-system/AGENTS.md does not treat browser automation or screenshots as visual evidence for review.

Checklist

• This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
• Relevant verification is recorded above, or skipped checks are explained.
• User-facing strings, docs, and locales are updated where applicable. The design-system UI README documents the new row inset, reveal gutter and empty-slot contracts; no user-facing string or locale changed.