chat: add reverse sticky scroll for persistent progress by justschen · Pull Request #343159 · microsoft/vscode · GitHub
Skip to content

chat: add reverse sticky scroll for persistent progress - #343159

Draft
Justin Chen (justschen) wants to merge 3 commits into
mainfrom
agents/reverse-sticky-scroll-feature
Draft

Justin Chen (justschen) wants to merge 3 commits into
mainfrom
agents/reverse-sticky-scroll-feature

Conversation

@justschen

Copy link
Copy Markdown
Collaborator

Keeps the existing persistent-progress indicator visible when scrolling back through a running chat. The original element moves with the transcript until it reaches the bottom edge, then stays directly above the session pills, or above the input when no pills are present. Scrolling back restores its normal position.

Changes and implications

  • Adds opt-in bottom-sticky support to the tree and reference-counted retention of a rendered list row. The live progress stays in its original DOM parent and document order; it is not copied or reparented, preserving its focus, interactions, and animation state across scrolling and response refreshes.
  • Retains the active response row while it is needed for progress. Other rows remain virtualized, and completion, cancellation, hiding, clearing, or disabling persistent progress releases the hold.
  • Separates the pills/input boundary from decorative pet scroll padding. Top-input layouts retain their existing behavior.
  • Updates clamping before paint when response content or the input changes size. Preserves flex-child width when the row becomes sticky, preventing terminal wrapping from feeding back into layout.
  • Updates setting descriptions and accessibility help, with regression coverage and component scenarios for pills, no pills, pets, fractional zoom, and expanded terminal output.

Behavior verification

With persistent progress enabled, start a response, scroll its progress toward the input, continue into earlier turns, then return to the response. Repeat with and without session pills and with an expanded terminal. There should be one live progress indicator, no change in terminal width, and no movement of the indicator once clamped.

npm run gulp compile-client — passed, including client type checking.

The following regression selection passed: 1,253 tests, 6 pending.

./scripts/test.sh --reporter dot \
  --run src/vs/base/test/browser/ui/list/listView.test.ts \
  --run src/vs/base/test/browser/ui/list/listWidget.test.ts \
  --run src/vs/base/test/browser/ui/tree/objectTree.test.ts \
  --run src/vs/workbench/contrib/chat/test/browser/widget/chatListWidget.test.ts \
  --run src/vs/workbench/contrib/chat/test/browser/widget/chatListRenderer.test.ts \
  --run src/vs/workbench/contrib/chat/test/browser/widget/chatWidget.test.ts \
  --run src/vs/workbench/contrib/chat/test/browser/accessibility/chatAccessibilityHelp.test.ts \
  --run src/vs/workbench/contrib/chat/test/browser/chatConfiguration.test.ts

Retain the active response row and clamp its live progress above the input or session pills without copying or reparenting it. Preserve document order, focus and animations across refreshes, and update geometry before paint to avoid resize and scroll jitter.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI balanced review requested due to automatic review settings October 21, 2026 08:02
@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Measure the footer in document flow by removing its sticky transform as well as fractional alignment. Keep the shared-spacing assertion intact when progress is pinned above the input.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Copilot review overview

3 open issues
What changed in this PR

Adds “reverse” bottom-sticky behavior so the live persistent-progress indicator stays visible above the input/session pills when users scroll back during an active chat response, without cloning or reparenting the DOM.

Changes:

  • Introduces bottom-sticky scroll support in base list/tree (row retention + bottom edge clamping) and wires it into chat’s list for persistent progress.
  • Updates chat widget padding boundaries to separate input/pills insets from decorative pet scroll padding; adds CSS/background treatment and scroll-down button offsetting.
  • Adds fixtures and expands regression coverage across chat widget, list/tree, and accessibility help text.
File Description
src/​vs/​workbench/​test/​browser/​componentFixtures/​chat/​chatWidget.fixture.ts Adds optional chat pet support and adjusts list padding + bottom-sticky padding for fixtures.
src/​vs/​workbench/​test/​browser/​componentFixtures/​chat/​chatScrollAnchoring.fixture.ts Adds new reverse-sticky progress visual fixture scenarios (pills/pet/terminal).
src/​vs/​workbench/​contrib/​chat/​test/​browser/​widget/​chatWidget.test.ts Adds unit coverage for padding boundary vs pet padding, and layout ordering during input resize.
src/​vs/​workbench/​contrib/​chat/​test/​browser/​widget/​chatListWidget.test.ts Expands persistent-progress tests to cover retention, docking, refresh, release conditions, and top-input opt-out.
src/​vs/​workbench/​contrib/​chat/​test/​browser/​accessibility/​chatAccessibilityHelp.test.ts Verifies accessibility help documents bottom-sticky progress behavior.
src/​vs/​workbench/​contrib/​chat/​browser/​widget/​media/​chat.css Styles sticky progress backdrop and accounts for sticky progress height in scroll-to-bottom button positioning.
src/​vs/​workbench/​contrib/​chat/​browser/​widget/​chatWidget.ts Plumbs bottom-sticky padding/options into ChatListWidget and fixes layout ordering for sticky progress.
src/​vs/​workbench/​contrib/​chat/​browser/​widget/​chatListWidget.ts Adds reverse-sticky progress binding/update logic and exposes bottom-sticky padding setter.
src/​vs/​workbench/​contrib/​chat/​browser/​widget/​chatListRenderer.ts Exposes persistent progress DOM node + renderer persistent-progress enabled check.
src/​vs/​workbench/​contrib/​chat/​browser/​chatProgressConfiguration.ts Updates setting description to explain bottom-sticky behavior when scrolling.
src/​vs/​workbench/​contrib/​chat/​browser/​actions/​chatAccessibilityHelp.ts Documents bottom-sticky progress in accessibility help text.
src/​vs/​base/​test/​browser/​ui/​tree/​objectTree.test.ts Adds bottom-sticky scroll tests for focus retention, padding boundary, width preservation, zoom stability, and resize paint behavior.
src/​vs/​base/​test/​browser/​ui/​list/​listView.test.ts Adds tests for retained-row behavior across scrolling/splice/refresh and document order/focus/animation retention.
src/​vs/​base/​browser/​ui/​tree/​media/​tree.css Adds styling hooks/classes for bottom-sticky rows/content.
src/​vs/​base/​browser/​ui/​tree/​abstractTree.ts Implements BottomStickyScrollController and adds bottomStickyScrollPadding + setBottomStickyScroll API + height event.
src/​vs/​base/​browser/​ui/​list/​listWidget.ts Exposes retainElement passthrough on List.
src/​vs/​base/​browser/​ui/​list/​listView.ts Implements row retention mechanics and identity-aware replacement handling during splice/update.
build/​lib/​stylelint/​vscode-known-variables.json Registers new CSS variables used by bottom-sticky progress.

Review effort: Lite

Comment thread src/vs/base/browser/ui/list/listWidget.ts
Comment thread src/vs/workbench/contrib/chat/browser/widget/chatListWidget.ts
Comment thread src/vs/base/browser/ui/tree/media/tree.css Outdated
Reuse the refresh-time response target during scrolling rather than rebuilding transcript items for every scroll event. Document the list retention contract and provide a zero-offset CSS fallback.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants