fix(web): fix inaccurate scroll position when selecting chat references

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[brendan-kellam]

Summary

• Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
• Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes#1034

Test plan

• Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
• Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
  • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
  • Enhanced visual feedback for selected references without specific line ranges.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
• packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

---

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s)	Summary
Changelog CHANGELOG.md	Added entry under ## [Unreleased] → ### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx	Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx	Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
participant UI as "Ask UI\n(Component)"
participant ScrollArea as "ScrollArea\n(Container)"
participant Viewport as "Browser\nViewport"
participant CM as "CodeMirror\n(view)"
UI->>ScrollArea: Request scroll to selected reference
alt file collapsed
UI->>UI: Expand file (instant)
end
UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
Note right of Viewport: File element is now in viewport
Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
CM-->>ScrollArea: return line coordinates (accurate)
ScrollArea->>ScrollArea: instant scroll to center the computed line
ScrollArea-->>UI: scroll complete

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• msukkari

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}