Sign up
View stargazers13Sign up

refactor(web): ChatView's timeline follow and anchoring lives in useTimelineFollow#22701

merged1
refactor/chatview-right-panel
refactor/chatview-timeline-follow
opened3d agobyJJulius Marminge
2 files changed
View on GitHubTwo-way sync enabledPR last imported 3d ago

The timeline's follow-the-end and new-turn anchoring logic took about 550 lines in the middle of ChatView: the scroll-to-end pill state, about a dozen refs, the scroll, wheel, touch and keyboard listeners, page-scroll keys, and the anchor callbacks. Both send paths also repeated the same nine statements to arm the anchor.

chat/useTimelineFollow.ts now holds all of it. The send paths call anchorNewTurn(threadKey, messageId) instead. The anchor state itself stays in ChatView, because the timeline entries are derived from it.

The behavior is the same. Lint needed legendListRef and setTimelineAnchor added to effect deps; both are stable, so the effects run just as often as before.

previous layerthis layer
ChatView.tsx lines8,4777,927

Renders were counted with the rc-init.js fiber counter on a dev server seeded from real data (median of 3 runs; base 6a6c84f vs the stack top before its rebase onto current main):

Interactionmain: commits / renders (ChatView)stack top: commits / renders (ChatView)
Type 20 chars in the composer22 / 678 (1)22 / 678 (1)
Switch threads14 / 779 (5)14 / 777 (5)
Open + close the terminal drawer15 / 494 (3)15 / 497 (3)
Open + close the right panel21 / 723 (4)21 / 726 (4)
Drag the right panel's resize handle13 / 139 (1)1 / 1 (0)

The +3 renders are the new ChatTerminalDrawers and ChatRightPanel wrappers. The drag row is the right panel layer: the drag's final width commit used to re-render ChatView and the whole chat column, and now re-renders only ChatRightPanel.

Tests: vp test run src/reactCompilerCoverage.test.ts for ChatView and every new file (0 bailouts), tsc-rs --noEmit for apps/web, and oxlint on the changed files.

🤖 Generated with Claude Code

Checks

All checks passed

Added 1 commit

  • refactor(web): ChatView's timeline follow and anchoring lives in useTimelineFollowc61cf64
Ggithub-actionsBot3d ago
Synced from GitHub

Thread transfer impact

⚠️ The latest CI run did not produce a thread transfer result for c61cf64.

This comment will update automatically after the next completed run.

MmacroscopeappBot3d ago
Synced from GitHub

Approvability

Verdict: Approved at c61cf64

Macroscope's review found this PR approvable — This PR moves ChatView’s existing timeline-following, anchoring, and scroll-input handling into a dedicated hook while preserving the existing consumers and behavior. It is a contained reorganization with no new user-facing capability, schema change, default change, or broadened lint suppression.

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

CcoderabbitaiBot3d ago
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: 7357d864-7e4f-4a86-888b-5f96f60b8c21
📥 Commits

Reviewing files that changed from the base of the PR and between 9c5f157e3dec5256e9ed593a68c129b41db0ba44 and c61cf64dae5de0bba59018c60d73e15b1061b846.

📒 Files selected for processing: 2
  • apps/web/src/components/ChatView.tsx
  • apps/web/src/components/chat/useTimelineFollow.ts

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

📝 Walkthrough

ChatView now delegates timeline follow, scrolling, and anchoring behavior to the new useTimelineFollow hook. The hook manages user navigation, thread-specific positions, new-turn anchors, and end-of-timeline state. Message submission paths call anchorNewTurn.

Changes: Timeline follow behavior

Layer / File(s)Summary
Hook contract and ChatView integration
apps/web/src/components/chat/useTimelineFollow.ts, apps/web/src/components/ChatView.tsx		The new hook exposes timeline state and handlers. ChatView uses the hook instead of inline follow logic, and normal and plan follow-up submissions call anchorNewTurn.
User navigation and live follow
apps/web/src/components/chat/useTimelineFollow.ts		The hook handles scroll and keyboard navigation, cancels queued or active programmatic scrolling when the user navigates, and scrolls to the timeline end while honoring reduced-motion settings.
Anchor and thread-state lifecycle
apps/web/src/components/chat/useTimelineFollow.ts		The hook positions and restores new-turn anchors, updates follow state for tool activity and timeline-end changes, and restores remembered state when threads change.

Priority: ⬇️ Low

Estimated code review effort: 4 (Complex) | ~60 minutes

Change: Refactor

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to c61cf

This refactor moves timeline follow and anchoring logic into a hook without an identified behavior change. No concrete merge-blocking risk was found.

Pre-merge checks: Passed 3 · Failed 1

Failed Failed checks: 1 warning

Check nameStatusExplanationResolution
Description checkWarningThe description explains the problem, implementation, behavior comparison, performance measurements, and verification commands. It does not include the required Scope and approval section or explain t…Add a Scope and approval section with the triaged issue or explicit maintainer approval, including the approval comment, or explain why this focused refactor qualifies for an exemption. Add before-and-after screenshots and a short recording…
Passed Passed checks: 3 passed
Check nameStatusExplanation
Title checkPassedThe title clearly identifies the main change: moving ChatView timeline-follow and anchoring logic into useTimelineFollow.
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 problem, implementation, behavior comparison, performance measurements, and verification commands. It does not include the required Scope and approval section or explain the issue and maintainer approval basis. It also omits the required before-and-after screenshots for a UI change.

Resolution

Add a Scope and approval section with the triaged issue or explicit maintainer approval, including the approval comment, or explain why this focused refactor qualifies for an exemption. Add before-and-after screenshots and a short recording if interaction timing or scrolling behavior requires visual evidence. State any verification that could not be completed.

✨ Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
📝 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.