refactor(web): timeline user message rows and context chips live in their own files#22676

merged1
refactor/messages-timeline-work-group-rows
refactor/messages-timeline-user-message-rows
opened3d agobyJJulius Marminge
View on GitHubTwo-way sync enabledPR last imported 3d ago

Part of the MessagesTimeline split. This layer moves the user message row, its collapsible body, the revert button and video attachments into TimelineUserMessageRow.tsx. The context-chip presentation registry and its chips go to UserMessageContextChips.tsx, and resolvePreviewAnnotationImage goes to TimelineUserMessageRow.logic.ts.

FileBeforeAfter
MessagesTimeline.tsx3,6532,436
TimelineUserMessageRow.tsx–619
UserMessageContextChips.tsx–592

Measurements

Dev app on a seeded copy of real data, median of 3, React renders counted by the commit-root counter (only fibers React actually rendered). "Before" is main at 6a6c84f990; "after" is the top of this stack. Nested update peak comes from a probe in react-dom's getRootForUpdatedFiber.

InteractionBefore: commits / renders / timeline renders / nested peakAfter
Scroll an 8.5k-item thread up 40 × 150px43 / 1,656 / 70 / 044 / 1,670 / 70 / 0
Load earlier turns, then scroll up 60 × 300px107 / 5,316 / 356 / 0104 / 5,275 / 356 / 0
Agent streams a 20-line reply (561-item thread)63 / 3,092 / 164 / 155 / 2,728 / 139 / 0

The extractions keep every component, context, and hook boundary unchanged, so render counts match within run-to-run noise. Streaming numbers vary with reply length. The win is readability: each row family is now a file you can read on its own, and the React Compiler caches each one independently. The legend-list wiring is unchanged. That covers getItemType with its length buckets (#21269), TimelineRowCtx inside renderItem with extraData carrying sharedState (#21123), and scroll restore. No update loops appeared while loading earlier turns.

Tests

  • vp test run MessagesTimeline logic, active-tools, and browser tests, plus timelineScrollAnchoring
  • reactCompilerCoverage for every touched and new file (0 bailouts)
  • tsc-rs --noEmit for apps/web, vp lint on changed files

🤖 Generated with Claude Code

Checks

All checks passed

Added 1 commit

  • refactor(web): timeline user message rows and context chips live in their own files2ff9ebc
Synced from GitHub

Approvability

Verdict: Approved at 2ff9ebc

Macroscope's review found this PR approvable — This refactor separates existing timeline user-message and context-chip implementations into focused files while retaining the same rendering path and behavior. The large line movement is organizational rather than a new capability or product behavior change.

You can add or adjust custom eligibility rules. Learn more.

Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Team
  • Run ID: e53fdf9c-5923-4fb4-88b7-4b8fc981687b
📥 Commits

Reviewing files that changed from the base of the PR and between 46d59b6f6d681ffa224ea455145fb9e0ee7356f7 and 2ff9ebcfd1b473f4b058cfd0499186eb0ead8f35.

📒 Files selected for processing: 4
  • apps/web/src/components/chat/MessagesTimeline.tsx
  • apps/web/src/components/chat/TimelineUserMessageRow.logic.ts
  • apps/web/src/components/chat/TimelineUserMessageRow.tsx
  • apps/web/src/components/chat/UserMessageContextChips.tsx

Limit details: You’ve used all 10 included reviews currently available.

📝 Walkthrough

User-message rendering moved from MessagesTimeline into dedicated row and context-chip components. The new components render message content, attachments, context references, and related actions. A helper resolves preview annotation images.

Changes: User message rendering

Layer / File(s)Summary
Context reference rendering
apps/web/src/components/chat/TimelineUserMessageRow.logic.ts, apps/web/src/components/chat/UserMessageContextChips.tsx
The image-resolution helper checks screenshot user images, annotation-named preview images, and the preview image at the annotation’s index. The context-chip component renders references and their details.
User message row behavior
apps/web/src/components/chat/TimelineUserMessageRow.tsx
The new row component prepares and renders message content, attachments, attribution, status, controls, clipboard formats, and collapsible Markdown.
Timeline delegation
apps/web/src/components/chat/MessagesTimeline.tsx
The timeline imports UserMessageRow and removes its former user-message implementation and handoff-run stabilization helpers, along with unused imports.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Refactor

Merge Risk: ⚪ Minimal · up to 2ff9e

This refactor moves user-message rendering into separate files without intended behavior changes. No concrete merge-blocking risk was identified.

Pre-merge checks: Passed 3 · Failed 1

Failed Failed checks: 1 warning

Check nameStatusExplanationResolution
Description checkWarningThe description explains the file split and provides detailed verification results, but it omits the required Problem section, Scope and approval information, and clear before/after screenshots for th…Add the required Problem section with expected behavior and context. Add the triaged issue or explicit maintainer approval, or explain why an exemption applies. Add clear before/after screenshots and include any required interaction recordi…
Passed Passed checks: 3 passed
Check nameStatusExplanation
Title checkPassedThe title clearly describes the main refactor: moving timeline user-message rows and context chips into separate files.
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the file split and provides detailed verification results, but it omits the required Problem section, Scope and approval information, and clear before/after screenshots for this UI change.

Resolution

Add the required Problem section with expected behavior and context. Add the triaged issue or explicit maintainer approval, or explain why an exemption applies. Add clear before/after screenshots and include any required interaction recording. Keep the existing Change and Verification details.

✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Usage-based review receipt

Note

This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.

Comment @coderabbitai help to get the list of available commands.