Restyle channel and thread messages as grouped bubbles

[mahanti]

Channel and thread messages render as rounded, directional bubbles using the shared Buzz design system. The viewer’s messages align right; incoming messages align left. Adjacent messages from the same author group within ten minutes, with new groups at local midnight and across membership events, and an avatar on the final incoming message.

• Use the system’s neutral/inverse palette, typography roles, shared Avatar/Button/IconButton components, and Tabler icons. Preserve Markdown, attachments, profile navigation, unread indicators, and delivery feedback.
• Combine Add reaction and Reply in one compact hover/focus toolbar with a 4px overlap at the bubble’s top-right edge. Add reaction is available on every eligible message, including those with no existing reactions. Picker-open and reaction-error states keep the toolbar visible.
• Place existing reactions below each bubble. Keep timestamps on hover/focus, dates muted, reply summaries unfilled, and delivery/retry text matched to the small secondary text style.
• Include viewer identity and the layout version in timeline geometry signatures. Composer behavior and live typing/activity integration remain separate; the preview includes simulated human and agent typing states.

Screenshots

Standalone preview screenshots from the styling iteration, with sample content. Light/dark examples show the reply action; the narrow example includes typing and delivery feedback. The combined reaction/reply toolbar is exercised in the live app and reaction browser fixture.

Light mode	Dark mode	Narrow thread layout

Compatibility and validation

Updated against main at a9194b2, preserving link previews, receive-only typing, sized media, rich composer editing, and thread navigation. Bubble styles are scoped to message rows so composer tokens retain their normal geometry and literal fallback messages preserve line breaks.

The existing Virtua React ESM patch defers only new row observation begun synchronously during resize delivery. This avoids WebKit same-depth observer-loop errors while retaining ordinary mount timing, adaptive estimates, size updates and scroll correction behavior. Lifecycle tests cover early unmount, cancellation, hidden/reassigned rows, remount, and subscriber errors.

The timeline preserves initial bottom intent through cold measurement and explicit reading intent through transient extent clamping. It captures the settled visible message before leaving, including when virtual rows mounted after the last scroll event. Revisiting a conversation keeps that message in place; the first real gesture takes control immediately, and deliberately returning to the bottom resumes following.

• Lint, TypeScript, design-token/contrast/foundation checks, frontend build, unit tests and pre-push checks passed. The pushed head passed all 1,568 unit tests. The timeline suite covers initial measurement, late-mounted anchors, offset-only restoration, transient clamping, and first-gesture takeover; assertions and timeouts are unchanged.
• Both browser engines passed message/thread behavior, membership, image resizing, initial/restored positions, profile appearance, navigation links, and composer-link geometry checks. The loading-threshold fixture now starts with sufficient history and crosses the threshold with one observed wheel gesture, retaining the original early-loading assertion.
• Focus preservation during a profile update has a separate gated browser case. The navigation journey no longer holds profile data through unrelated history navigation until its request deadline expires.
• The integration scan also passed 44 tooling tests and plugin-manager tests. GitHub CI runs the complete required JavaScript, native, browser journey and measurement lanes for the pushed head.
• All scrolling measurements passed in Chromium and WebKit. The pushed head’s local WebKit opening run had one 100 ms sample against the strict <100 ms budget. A paired isolated comparison then passed unchanged main (74–89 ms) and this head (40–61 ms); no budget or retry settings changed. A separate local WebKit fractional emoji-clipping assertion also reproduces on unchanged main and remains unmodified.

Review status

Conflicts are resolved. All hosted checks pass at dfd28b5: CI required (JavaScript, Rust/tool integration, Windows, browser measurements and all four browser journey shards), DCO, Semgrep, and zizmor. All seven PR commits have DCO sign-offs. Ready for review; required reviewer/code-owner approval is still needed before merging.