Skip to content

sessions: Redesign session list with hover-reveal show-more, PR status icons, and compact layout#304637

Merged
osortega merged 48 commits intomainfrom
copilot/foreign-takin
Mar 25, 2026
Merged

sessions: Redesign session list with hover-reveal show-more, PR status icons, and compact layout#304637
osortega merged 48 commits intomainfrom
copilot/foreign-takin

Conversation

@osortega
Copy link
Contributor

Summary

Redesigns the agent sessions list in the sessions app to match the prototype mockup. All changes are scoped to the sessions app layer — the core workbench session list is unaffected.

Changes

Show-more/show-less with hover animation

  • Show-more rows start collapsed at 1px height (effectively hidden)
  • Hovering any card in a section reveals the show-more with a smooth grow-from-center animation (150ms ease-out)
  • Uses requestAnimationFrame-driven height animation since the virtualized list uses absolute positioning
  • Added show-less button to collapse expanded groups back
  • Section detection uses tree node traversal (not DOM siblings) for reliability with virtualized row recycling

PR status icons

  • Sessions with a PR show git-pull-request icon in the status column
  • Merged PRs show git-merge icon
  • Detection uses session.metadata.pullRequestUrl and session.metadata.pullRequestMerged

Compact layout options (sessions app only)

  • hideSectionCount — hides the session count next to section headers
  • hideSessionBadge — hides the repository badge on session cards (redundant when grouped by repo)
  • useStatusOnlyIcons — icon column shows only status indicators; session type icon moves to the details row
  • compactShowMore — enables the hover-reveal show-more behavior

Timestamp always visible

  • Timestamp is always shown on session cards with a dot separator

Files changed

  • agentSessionsControl.ts — Show-more hover logic, section map, animation, refresh resilience
  • agentSessionsViewer.ts — Show-more/show-less renderers, status-only icons, section renderer options
  • agentSessionsModel.tsIAgentSessionShowLess type and helpers
  • agentsessionsviewer.css — Show-more compact styles, details icon styles
  • sessionsViewPane.ts — Passes new compact options to the control
  • sessionsViewPane.css — Sessions-app-specific show-more line decoration styles

osortega added 30 commits March 24, 2026 16:04
- Added `proto-group-hover.png` to represent the hover state of the group.
- Added `proto-group-nohover.png` to represent the default state of the group.
…n AgentSessionShowMore and AgentSessionShowLess renderers
… hover detection and section label attributes
osortega added 15 commits March 24, 2026 19:03
- Deleted multiple log files generated during Playwright tests to clean up the repository.
- Removed unnecessary instances of `AgentSessionShowMoreRenderer` and `AgentSessionShowLessRenderer` in `AgentSessionsControl`.
- Streamlined the rendering process in `AgentSessionShowMoreRenderer` and `AgentSessionShowLessRenderer` by eliminating redundant code and event handling.
- Updated the handling of section labels in the agent sessions to improve performance and maintainability.
Copilot AI review requested due to automatic review settings March 25, 2026 03:02
@vs-code-engineering vs-code-engineering bot added this to the 1.114.0 milestone Mar 25, 2026
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Redesigns the Agent Sessions list UI/behavior (used by the sessions app, and partially by the workbench chat view) to support compact “show more/less” interactions, PR status indicators, and additional compact layout options.

Changes:

  • Added “show more” hover-reveal behavior (compact mode) and introduced a “show less” list item for collapsing expanded repository groups.
  • Added status-only icon mode and PR status icons (pull request / merged) plus related styling.
  • Added sessions-app-specific configuration flags and CSS overrides to enable a more compact layout in the sessions app.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
src/vs/workbench/test/browser/componentFixtures/agentSessionsViewer.fixture.ts Updates fixture construction for the section renderer’s new options parameter.
src/vs/workbench/contrib/chat/test/browser/agentSessions/agentSessionsDataSource.test.ts Extends datasource tests to cover the new “show less” item when expanding repository groups.
src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css Adds styling for PR status icons and the new details-row icon element.
src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsViewer.ts Implements status-only icons, PR status icon selection, show-more/show-less renderers, and list delegate changes.
src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsModel.ts Introduces IAgentSessionShowLess + type guard.
src/vs/workbench/contrib/chat/browser/agentSessions/agentSessionsControl.ts Implements compact hover-driven show-more/show-less height animation and show-less click handling.
src/vs/sessions/contrib/sessions/browser/sessionsViewPane.ts Enables the new compact options for the sessions app view pane.
src/vs/sessions/contrib/sessions/browser/media/sessionsViewPane.css Adds sessions-app-scoped CSS overrides for compact show-more/show-less presentation.

- Remove unused sessionToSection map (only sectionToShowMore is needed)
- Cancel pending animation frames on dispose to prevent use-after-free
- Guard updateElementHeight with try/finally around isUpdatingHeight flag
- Respect prefers-reduced-motion via IAccessibilityService.isMotionReduced()
- Track current animated height to avoid visual jump on mid-animation collapse
- Remove stale data-section-label attribute when template is reused
- Gate compact show-more label behind compactLabel option (core keeps original text)
- Use COLLAPSED_HEIGHT constant instead of magic number 1 in getHeight
- Use targetWindow.requestAnimationFrame for multi-window support

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@osortega
Copy link
Contributor Author

Addressed all 7 review comments in commit 2a7d6f4:

  1. Removed unused sessionToSection map — only sectionToShowMore is needed
  2. Animation frame cleanup on dispose — registered disposable that cancels pending rAFs; guarded updateElementHeight with try/finally
  3. Reduced motion supportanimateHeight() checks IAccessibilityService.isMotionReduced() and sets final height immediately when enabled
  4. Mid-animation collapse fix — tracks currentAnimatedHeight so collapse starts from actual current height, not fixed HEIGHT
  5. Stale data-section-label fix — explicitly removes attribute when template is reused with a non-grouped or no-repo session
  6. Show-more label scoped — added compactLabel option to AgentSessionShowMoreRenderer; core keeps "Show {0} More...", sessions app uses "+{0} more"
  7. Magic number replaced — uses AgentSessionShowMoreRenderer.COLLAPSED_HEIGHT instead of literal 1

Also fixed lint warnings: using targetWindow.requestAnimationFrame/cancelAnimationFrame for multi-window support, and eslint-disable for justified querySelector usage on virtualized list rows.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@osortega osortega marked this pull request as ready for review March 25, 2026 03:50
@osortega osortega enabled auto-merge March 25, 2026 03:51
@osortega osortega merged commit 99ab288 into main Mar 25, 2026
27 of 30 checks passed
@osortega osortega deleted the copilot/foreign-takin branch March 25, 2026 04:34
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.

4 participants