Skip to content

Commit 7fffb1b

Browse files
eli-w-kingeli-w-king
committed
adjusting spacing
1 parent f6ce69d commit 7fffb1b

File tree

2 files changed

+78
-37
lines changed

2 files changed

+78
-37
lines changed

‎src/vs/workbench/contrib/chat/browser/agentSessions/experiments/agentTitleBarStatusWidget.ts‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -861,6 +861,7 @@ export class AgentTitleBarStatusWidget extends BaseActionViewItem {
861861
// Build status sections but don't append yet - we need to control order
862862
let unreadSection: HTMLElement | undefined;
863863
let activeSection: HTMLElement | undefined;
864+
let needsInputSection: HTMLElement | undefined;
864865

865866
// Unread section (blue dot + count)
866867
if (viewSessionsEnabled && hasUnreadSessions && this.workspaceContextService.getWorkbenchState() !== WorkbenchState.EMPTY) {
@@ -899,29 +900,54 @@ export class AgentTitleBarStatusWidget extends BaseActionViewItem {
899900
disposables.add(this.hoverService.setupManagedHover(hoverDelegate, unreadSection, unreadTooltip));
900901
}
901902

902-
// In-progress/Needs-input section - shows "needs input" state when any session needs attention,
903-
// otherwise shows "in progress" state. This is a single section that transforms based on state.
904-
if (viewSessionsEnabled && hasActiveSessions) {
903+
// Needs-input section - shows sessions requiring user attention (approval/confirmation/input)
904+
if (viewSessionsEnabled && hasAttentionNeeded) {
905+
needsInputSection = $('span.agent-status-badge-section.active.needs-input');
906+
needsInputSection.setAttribute('role', 'button');
907+
needsInputSection.tabIndex = 0;
908+
const needsInputIcon = $('span.agent-status-icon');
909+
reset(needsInputIcon, renderIcon(Codicon.report));
910+
needsInputSection.appendChild(needsInputIcon);
911+
const needsInputCount = $('span.agent-status-text');
912+
needsInputCount.textContent = String(attentionNeededSessions.length);
913+
needsInputSection.appendChild(needsInputCount);
914+
915+
disposables.add(addDisposableListener(needsInputSection, EventType.CLICK, (e) => {
916+
e.preventDefault();
917+
e.stopPropagation();
918+
this._openSessionsWithFilter('inProgress');
919+
}));
920+
disposables.add(addDisposableListener(needsInputSection, EventType.KEY_DOWN, (e) => {
921+
if (e.key === 'Enter' || e.key === ' ') {
922+
e.preventDefault();
923+
e.stopPropagation();
924+
this._openSessionsWithFilter('inProgress');
925+
}
926+
}));
927+
928+
const needsInputTooltip = attentionNeededSessions.length === 1
929+
? localize('needsInputSessionsTooltip1', "{0} session needs input", attentionNeededSessions.length)
930+
: localize('needsInputSessionsTooltip', "{0} sessions need input", attentionNeededSessions.length);
931+
disposables.add(this.hoverService.setupManagedHover(hoverDelegate, needsInputSection, needsInputTooltip));
932+
}
933+
934+
// In-progress section - shows sessions that are actively running (excludes needs-input)
935+
const inProgressOnly = activeSessions.filter(s => s.status !== AgentSessionStatus.NeedsInput);
936+
if (viewSessionsEnabled && inProgressOnly.length > 0) {
905937
const { isFilteredToInProgress } = this._getCurrentFilterState();
906938
activeSection = $('span.agent-status-badge-section.active');
907-
if (hasAttentionNeeded) {
908-
activeSection.classList.add('needs-input');
909-
}
910939
if (isFilteredToInProgress) {
911940
activeSection.classList.add('filtered');
912941
}
913942
activeSection.setAttribute('role', 'button');
914943
activeSection.tabIndex = 0;
915944
const statusIcon = $('span.agent-status-icon');
916-
// Show report icon when needs input, otherwise session-in-progress icon
917-
reset(statusIcon, renderIcon(hasAttentionNeeded ? Codicon.report : Codicon.sessionInProgress));
945+
reset(statusIcon, renderIcon(Codicon.sessionInProgress));
918946
activeSection.appendChild(statusIcon);
919947
const statusCount = $('span.agent-status-text');
920-
// Show needs-input count when attention needed, otherwise total active count
921-
statusCount.textContent = String(hasAttentionNeeded ? attentionNeededSessions.length : activeSessions.length);
948+
statusCount.textContent = String(inProgressOnly.length);
922949
activeSection.appendChild(statusCount);
923950

924-
// Click handler - filter to in-progress sessions
925951
disposables.add(addDisposableListener(activeSection, EventType.CLICK, (e) => {
926952
e.preventDefault();
927953
e.stopPropagation();
@@ -935,32 +961,24 @@ export class AgentTitleBarStatusWidget extends BaseActionViewItem {
935961
}
936962
}));
937963

938-
// Hover tooltip - different message based on state
939-
const activeTooltip = hasAttentionNeeded
940-
? (attentionNeededSessions.length === 1
941-
? localize('needsInputSessionsTooltip1', "{0} session needs input", attentionNeededSessions.length)
942-
: localize('needsInputSessionsTooltip', "{0} sessions need input", attentionNeededSessions.length))
943-
: (activeSessions.length === 1
944-
? localize('activeSessionsTooltip1', "{0} session in progress", activeSessions.length)
945-
: localize('activeSessionsTooltip', "{0} sessions in progress", activeSessions.length));
964+
const activeTooltip = inProgressOnly.length === 1
965+
? localize('activeSessionsTooltip1', "{0} session in progress", inProgressOnly.length)
966+
: localize('activeSessionsTooltip', "{0} sessions in progress", inProgressOnly.length);
946967
disposables.add(this.hoverService.setupManagedHover(hoverDelegate, activeSection, activeTooltip));
947968
}
948969

949970
// Append status sections in the correct order
950971
if (reverseOrder) {
951-
// Add line separator before badge sections when inline in compact mode
952-
if (inlineContainer) {
953-
const badgeSeparator = $('span.agent-status-badge-separator');
954-
badge.appendChild(badgeSeparator);
955-
}
956-
// [active, unread, sparkle] — populates inward
972+
// [needs-input, active, unread, sparkle] — populates inward
973+
if (needsInputSection) { badge.appendChild(needsInputSection); }
957974
if (activeSection) { badge.appendChild(activeSection); }
958975
if (unreadSection) { badge.appendChild(unreadSection); }
959976
badge.appendChild(sparkleContainer);
960977
} else {
961-
// Original: [sparkle (already appended), unread, active]
978+
// Original: [sparkle (already appended), unread, active, needs-input]
962979
if (unreadSection) { badge.appendChild(unreadSection); }
963980
if (activeSection) { badge.appendChild(activeSection); }
981+
if (needsInputSection) { badge.appendChild(needsInputSection); }
964982
}
965983

966984
}

‎src/vs/workbench/contrib/chat/browser/agentSessions/experiments/media/agenttitlebarstatuswidget.css‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@
6565
border-color: var(--vscode-commandCenter-activeBorder, transparent);
6666
}
6767

68+
/* Compact mode: pill hover is handled by individual sections, not the whole pill */
69+
.agent-status-pill.compact-mode {
70+
padding: 0;
71+
gap: 0;
72+
background-color: transparent;
73+
}
74+
75+
.agent-status-pill.compact-mode:hover {
76+
background-color: transparent;
77+
border-color: var(--vscode-commandCenter-border, transparent);
78+
}
79+
6880
.agent-status-pill.chat-input-mode {
6981
cursor: pointer;
7082
}
@@ -115,15 +127,6 @@
115127
flex-shrink: 0;
116128
}
117129

118-
/* Vertical line separator before badge sections in compact mode */
119-
.agent-status-badge-separator {
120-
width: 1px;
121-
align-self: stretch;
122-
margin: 4px 0;
123-
background-color: var(--vscode-commandCenter-border, rgba(128, 128, 128, 0.35));
124-
flex-shrink: 0;
125-
}
126-
127130
/* Input hover target - only this area triggers hover, not badge sections */
128131
.agent-status-pill .agent-status-input-area {
129132
display: flex;
@@ -133,6 +136,15 @@
133136
overflow: hidden;
134137
cursor: pointer;
135138
gap: 6px;
139+
border-radius: 5px 0 0 5px;
140+
height: 100%;
141+
padding: 0 10px;
142+
background-color: var(--vscode-agentStatusIndicator-background);
143+
}
144+
145+
/* When preceded by a toolbar/separator, remove left border-radius */
146+
.agent-status-line-separator + .agent-status-input-area {
147+
border-radius: 0;
136148
}
137149

138150
.agent-status-pill .agent-status-input-area:hover {
@@ -238,6 +250,9 @@
238250
display: flex;
239251
align-items: center;
240252
-webkit-app-region: no-drag;
253+
height: 100%;
254+
background-color: var(--vscode-agentStatusIndicator-background);
255+
border-radius: 5px 0 0 5px;
241256
}
242257

243258
.agent-status-separator {
@@ -251,9 +266,10 @@
251266
.agent-status-line-separator {
252267
width: 1px;
253268
align-self: stretch;
254-
margin: 4px 6px;
269+
margin: 4px 0;
255270
background-color: var(--vscode-commandCenter-border, rgba(128, 128, 128, 0.35));
256271
flex-shrink: 0;
272+
pointer-events: none;
257273
}
258274

259275
/* Status Badge */
@@ -279,6 +295,7 @@
279295
height: 100%;
280296
position: relative;
281297
cursor: pointer;
298+
background-color: var(--vscode-agentStatusIndicator-background);
282299
}
283300

284301
.agent-status-badge-section:first-child { border-radius: 5px 0 0 5px; }
@@ -325,7 +342,8 @@
325342
}
326343

327344
/* Separator between sections */
328-
.agent-status-badge-section + .agent-status-badge-section::before {
345+
.agent-status-badge-section + .agent-status-badge-section::before,
346+
.agent-status-input-area + .agent-status-badge-section::before {
329347
content: '';
330348
position: absolute;
331349
left: 0;
@@ -365,6 +383,11 @@
365383
border-radius: 5px 0 0 5px;
366384
}
367385

386+
/* In compact mode, no left radius on sparkle - it sits flush next to other sections */
387+
.agent-status-pill.compact-mode .agent-status-badge-section.sparkle .action-container {
388+
border-radius: 0;
389+
}
390+
368391
.agent-status-badge-section.sparkle .dropdown-action-container {
369392
width: 18px;
370393
padding: 0;

0 commit comments

Comments
 (0)