feat(sessions): add sessions dashboard to welcome view with inline interaction#297074
feat(sessions): add sessions dashboard to welcome view with inline interaction#297074
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a sessions dashboard to the Agent Sessions welcome view, enabling users to view and interact with active, pending, and recently completed sessions directly from the dashboard without opening them in the full chat widget. The dashboard supports inline actions like sending messages, approving tool confirmations, and viewing changes.
Changes:
- Adds observable for dashboard-selected sessions in
ISessionsManagementServiceto drive the changes panel - Implements
SessionsDashboardModelto categorize sessions into "Needs Input", "In Progress", and "Recently Completed" - Creates
SessionsDashboardcomponent with collapsible sections and session cards in row/pill modes - Integrates dashboard into the new chat view pane with empty state handling
- Updates changes view to react to dashboard-selected sessions
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/vs/sessions/contrib/sessions/browser/sessionsManagementService.ts |
Adds selectedSessionResource observable and selectSession() method to track dashboard selection independently from active session |
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboardModel.ts |
New model to filter and categorize sessions based on status and recency with reactive observables |
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.ts |
New dashboard component with collapsible sections and session card rendering |
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts |
New card component supporting row and action-pill modes with inline input and action buttons |
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css |
Comprehensive styling for dashboard sections, session cards, status indicators, and inline controls |
src/vs/sessions/contrib/chat/browser/newChatViewPane.ts |
Integrates dashboard into welcome view with empty state toggle |
src/vs/sessions/contrib/chat/browser/media/chatWelcomePart.css |
Adds container styles for dashboard positioning |
src/vs/sessions/contrib/changesView/browser/changesView.ts |
Updates to prioritize dashboard-selected session over active session |
Comments suppressed due to low confidence (15)
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:96
- Invalid CSS comment syntax with missing spaces. The comment should be properly formatted as
/* ROW MODE - full-width session rows */instead of/* ROW full-width session rowsMODE */.
This issue also appears in the following locations of the same file:
- line 20
- line 6
- line 80
- line 327
- line 351
- ...and 1 more
/*
ROW full-width session rowsMODE
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.ts:108
- The section header is clickable to toggle collapse but lacks accessibility attributes and keyboard support. Add
role="button",aria-expanded(bound tosection.collapsed), andaria-labelwith the section title. Also add keyboard event handlers for Enter/Space keys to enable keyboard-only users to toggle sections.
private _createSection(key: string, label: string, cardMode: SessionCardMode): void {
const container = dom.append(this._element, dom.$(`.sessions-dashboard-section[data-section="${key}"]`));
const headerEl = dom.append(container, dom.$('.sessions-dashboard-section-header'));
// Collapse toggle
const chevron = dom.append(headerEl, dom.$('.sessions-dashboard-section-chevron'));
dom.append(chevron, renderIcon(Codicon.chevronDown));
const titleEl = dom.append(headerEl, dom.$('.sessions-dashboard-section-title'));
titleEl.textContent = label;
const countBadge = dom.append(headerEl, dom.$('.sessions-dashboard-section-count'));
const cardsContainer = dom.append(container, dom.$('.sessions-dashboard-section-cards'));
const disposables = this._register(new DisposableStore());
const section: IDashboardSection = { key, label, cardMode, container, headerEl, cardsContainer, countBadge, disposables, collapsed: false };
this._sections.push(section);
// Toggle collapse on header click
this._register(dom.addDisposableListener(headerEl, dom.EventType.CLICK, () => {
section.collapsed = !section.collapsed;
container.classList.toggle('collapsed', section.collapsed);
chevron.classList.toggle('collapsed', section.collapsed);
}));
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:20
- Invalid CSS comment syntax. The comment delimiters are reversed. It should be
/* Section */instead of*/ Section /*.
*/ Section /*
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts:152
- Invalid comment syntax. TypeScript uses
//for single-line comments, notAction pill mode //. The comment delimiters are reversed. It should be// Action pill mode.
Action pill mode //
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts:171
- Invalid comment syntax. TypeScript uses
//for single-line comments, notExpanded area (shown when selected) //. The comment delimiters are reversed. It should be// Expanded area (shown when selected).
Expanded area (shown when selected) //
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts:63
- The session card element has
tabIndex = 0making it keyboard focusable, but lacks proper accessibility attributes. Addrole="button"andaria-label(with session title/status) to support screen readers. Additionally, add keyboard event handlers for Enter/Space keys to enable keyboard activation, as the element currently only responds to mouse clicks.
this._element = dom.$('.session-row');
this._element.dataset.status = this._statusKey();
this._element.dataset.mode = mode;
this._element.tabIndex = 0;
if (mode === 'row') {
this._renderRow();
} else {
this._renderActionPill();
}
}
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:6
- Invalid CSS comment syntax. The comment delimiters are reversed. It should be
/* Dashboard */instead of*/ Dashboard /*.
*/ Dashboard /*
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:80
- Invalid CSS comment syntax. The comment delimiters are reversed. It should be
/* Section cards container */instead of*/ Section cards container /*.
*/ Section cards container /*
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:327
- Invalid CSS comment syntax. The comment delimiters are reversed. It should be
/* Expanded area */instead of*/ Expanded area /*.
*/ Expanded area /*
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:351
- Invalid CSS comment syntax. The comment delimiters are reversed. It should be
/* Inline input */instead of*/ Inline input /*.
*/ Inline input /*
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts:142
- Invalid comment syntax. TypeScript uses
//for single-line comments. It should be// select (not open)instead ofselect (not open).
select (not open)
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts:165
- Invalid comment syntax. TypeScript uses
//for single-line comments. It should be// selectinstead ofselect.
select
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionsDashboard.css:282
- Invalid CSS comment syntax with missing spaces. The comment should be properly formatted as
/* ACTION PILL MODE - compact pills for "Action" section */instead of/* ACTION PILL compact pills for "Action" sectionMODE */.
/*
ACTION PILL compact pills for "Action" sectionMODE
*/
src/vs/sessions/contrib/chat/browser/sessionsDashboard/sessionCard.ts:263
- Invalid comment syntax. TypeScript uses
//for single-line comments, notHelpers //. The comment delimiters are reversed. It should be// Helpers.
Helpers //
src/vs/sessions/contrib/chat/browser/media/chatWelcomePart.css:337
- The element
.chat-full-welcome-empty-hintlacks CSS styling. While it uses the.hiddenclass for toggling visibility, it has no base styles defined (e.g., positioning, typography, color). Add CSS rules for this element to ensure it displays properly when visible.
}
| } | ||
| } | ||
|
|
||
| Row mode // | ||
| // Layout: [dot] Title / subtitle | duration | progress-bar | STATUS | file-count | chevron | ||
| private _renderRow(): void { | ||
| const s = this.session; |
There was a problem hiding this comment.
Invalid comment syntax. TypeScript uses // for single-line comments, not Row mode //. The comment delimiters are reversed. It should be // Row mode.
This issue also appears in the following locations of the same file:
- line 152
- line 171
- line 142
- line 165
- line 263
| } | |
| } | |
| Row mode // | |
| // Layout: [dot] Title / subtitle | duration | progress-bar | STATUS | file-count | chevron | |
| private _renderRow(): void { | |
| const s = this.session; | |
| } | |
| } | |
| // Row mode | |
| // Layout: [dot] Title / subtitle | duration | progress-bar | STATUS | file-count | chevron | |
| private _renderRow(): void { | |
| const s = this.session; |
| // Remove old cards for this section from tracker | ||
| const otherCards = this._cards.filter(c => | ||
| !sessions.some(s => isEqual(s.resource, c.sessionResource)) | ||
| ); | ||
| this._cards.length = 0; | ||
| this._cards.push(...otherCards); | ||
|
|
||
| for (const session of sessions) { | ||
| const card = section.disposables.add( | ||
| this.instantiationService.createInstance(SessionCard, session, section.cardMode) | ||
| ); | ||
|
|
||
| if (this._selectedResource && isEqual(session.resource, this._selectedResource)) { | ||
| card.setSelected(true); | ||
| } | ||
|
|
||
| section.disposables.add(card.onDidSelect(resource => { | ||
| this._selectCard(resource); | ||
| })); | ||
|
|
||
| section.cardsContainer.appendChild(card.element); | ||
| this._cards.push(card); | ||
| } |
There was a problem hiding this comment.
The card tracking logic appears flawed. When _renderSection is called, it clears the _cards array and rebuilds it with only cards that don't match sessions being rendered plus new cards for the current section. This means cards from other sections that haven't been re-rendered yet will be lost. Consider tracking cards per section or ensuring all sections are re-rendered together to maintain correct card references for selection state management.
| @ISessionsManagementService private readonly sessionManagementService: ISessionsManagementService, | ||
| @ILabelService private readonly labelService: ILabelService, | ||
| @IStorageService private readonly storageService: IStorageService, | ||
| @ISessionsWorkbenchService private readonly sessionsWorkbenchService: ISessionsWorkbenchService, |
There was a problem hiding this comment.
The service ISessionsWorkbenchService is injected in the constructor but never imported or used anywhere in the file. This will cause a TypeScript compilation error. Either remove the unused service injection or add the necessary import if it's intended for future use.
1 participant
No description provided.