Update UI of Sessions window based on prototype

[Copilot]

Updates the Sessions window UI based on the mini prototype at jo-oikawa/js-vscode-mini-v3 (branch feature/layout-polish-2025-12-17).

Changes Made

• Section headers: Made bolder (font-weight: 600) and more prominent by using the primary foreground color (var(--vscode-foreground)) instead of descriptionForeground. Added letter-spacing: 0.04em to improve readability.
• "More archived" toggle button: Added a button at the bottom of the sessions list that appears when there are archived sessions hidden (collapsed) by default. The button shows the count of archived sessions (e.g., "3 archived") and expands the Archived section when clicked. It disappears once the section is expanded, and updates automatically when sessions change or the user manually collapses/expands the archived section.
• Layout restructuring: The .agent-sessions-viewer is now a flex column with a .agent-sessions-list-wrapper child, so the "More archived" button appears cleanly below the scrollable list.

Testing

• ✅ TypeScript compilation passes (npm run compile-check-ts-native)
• ✅ Layering check passes (npm run valid-layers-check)
• The "More archived" button appears automatically when archived sessions exist and the Archived section is collapsed (default state), and disappears once expanded.

Original prompt

Use my 'mini' prototype of the VS Code Sessions window as inspiration to make the following UI changes.

My mini prototype can be found at https://github.com/jo-oikawa/js-vscode-mini-v3 use the branch feature/layout-polish-2025-12-17 for my latest changes.

Looking at the sessions list within the Sessions window experience, make the following changes:

• Make the section headers a primary white color and semi-bold.
• Include a 'More' toggle at the bottom of the section if there are archived sessions hidden by default.

Here are some more polish suggestions from the prototype, but prioritize aligning with existing standards and variables in the vscode codebase.

Group Heading (div.sessions-group-heading)
Property Value
Padding 10px 0 2px 0
Font-size 11px
Font-weight 600
Color #d4d4d4
Letter-spacing 0.04em
Parent block (div.sessions-group-block): margin 2px 0 4px, flex column, gap 2px

Chevron (i.group-chevron): 12px, opacity 0 → 1 on hover. Rotates -90deg when collapsed.

Session Card (div.session-card)
Property Value
Height auto (pinned/agents mode)
Padding 8px
Border radius 4px
Gap (icon → content) 12px
Background transparent
Hover background rgba(255,255,255,0.06)
Status Icon (i.session-card-icon)
Size Color Notes
In-progress (codicon-session-in-progress) 16×16px #a0c4ff Animated spinner
Unread/complete (codicon-circle-filled) 16×16px #7fbfff Solid dot
Finished (codicon-circle-small-filled) 10px font-size #6b7280 visibility: hidden (space preserved)
Blocked (input-needed state) 16×16px #ff9b9b Card gets bg rgba(255,155,155,0.08), border 1px solid rgba(255,155,155,0.15)
Card Content (div.session-card-content)
Flex column, gap 4px

Child Size Weight Color Line-height
div.session-card-title 11px 400 #d4d4d4 1.2
div.session-card-stats 11px 400 — 1.2
span.diff-added — — #a3e4a8 —
span.diff-removed — — #ff9b9b —
div.session-card-meta — — #6b7280 —
Meta link text (e.g. #27774) — — #a0c4ff —
Title: single-line, text-overflow: ellipsis

Stats row: gap 6px between diff and meta. Diff badges internal gap 4px.

Finished state card: opacity 0.8, becomes 1.0 on hover.

"More" Button (button.sessions-group-see-more)
Property Value
Padding 2px 0 2px 8px
Font-size 11px
Color #6b7280
Hover color #a0c4ff
Display inline-flex (only when .has-overflow)

Created from VS Code.

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[jo-oikawa]

@copilot try this again please!

[Copilot]

@copilot try this again please!

Done in commit 89309d0. Here's what was changed:

Section headers (Today, Yesterday, Last 7 days, Archived, etc.) are now:

• Primary foreground color (var(--vscode-foreground)) instead of dimmed descriptionForeground
• Semi-bold (font-weight: 600) with letter-spacing: 0.04em

'More archived' toggle button — appears at the bottom of the sessions list when there are archived sessions that are collapsed by default. Shows the count (e.g., "3 archived") and expands the Archived section when clicked. Disappears once the section is expanded.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: /usr/bin/gh gh pr view --json body,title,comments (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)