ui: compact shared tooltip previews

Merged
TE
2d ago
+301-96

Leo: “i think our hover previews are generally pretty ass” and “there's just tons of design systems related stuff for spacing guttters icons etc whatever like we don't yet feel "designed" yet nawmean”.

Tooltips now prefer a compact bubble above their control, with caption text, an emphasized title and a dimmer second-line description. A truncated label still appears in full, wrapping within the same 320px maximum instead of forcing the source row's width. The 4px anchor gap, viewport inset, padding and maximum width follow the shared grid and interface scale. Explicit side choices, shortcuts, rich React content, colors, glass, and existing hover delay/fade behavior remain available.

Spec: leo-workspace design/overlay-surfaces.md; mapped in .github/design-surfaces.json.
References: cmux/live/transcript-hover-preview-fork-tooltip, cmux/live/transcript-hover-preview-copy-response, claude/live/transcript-fork-from-here-tooltip.

Gallery: ui.tooltip/above-compact, below-compact, and title-detail; selected above-first title/detail. Final fleet matrix run 41815709481 captured 24 Chromium cases (dark/light, compact/comfortable, interface scales 1 and 1.25); all cases rendered with ready=1. The gallery play now waits for the tooltip to become visible before capture.

Validation:

  • Run 41815709481: full webviews check, 20/20 focused tooltip tests, and 24/24 gallery cases passed at tested head 48c6df26a1c6b749eb27a5386b0945d6cd0c2a2.
  • Both lint lists regenerated (UI allowlist 64, design-token baseline 2132).
  • Rail harness run 41815751911 used exact refs: before 9c5d3c477847a27560330fb36bcd9edc2e5cd4b4, before-wave 0d247b5d447e233a99305d2880c3ea2074c5b759, after 756c019be8b5f015367271fead14c7c444cf0c1e. Target-painted p50/p95/max ms: before 3000 4.50/6.58/17.80, after 4.20/5.90/9.40; before 100 4.50/6.60/13.90, after 3.70/5.48/10.00. After had zero dropped frames versus one in the before-wave run; artifact 13314433515.
  • No new timer, observer or animation loop. Geometry reads occur while placing an open bubble. Risk: long truncated labels wrap more than before; their text is preserved.

Follow-ups: #35268 tracks unused tooltipWidth arguments, popup-document scale handling, and a long-title gallery state.

🤖 Generated with Codex

Agent session: https://cmux.com/deeplink/agent?id=aid-b605b496e2aad0871fdf