swap around icons and indicators in the title bar agents control (#287935)

This commit is contained in:
Josh Spicer
2026-01-15 03:50:08 +00:00
committed by GitHub
parent be3d85636a
commit daf2ea5ea4
2 changed files with 49 additions and 57 deletions
@@ -122,10 +122,34 @@ export class AgentsControlViewItem extends BaseActionViewItem {
pill.tabIndex = 0;
this._container.appendChild(pill);
// Copilot icon (always shown)
const icon = $('span.agents-control-icon');
reset(icon, renderIcon(Codicon.chatSparkle));
pill.appendChild(icon);
// Left side indicator (status)
const leftIndicator = $('span.agents-control-status');
if (hasActiveSessions) {
// Running indicator when there are active sessions
const runningIcon = $('span.agents-control-status-icon');
reset(runningIcon, renderIcon(Codicon.sessionInProgress));
leftIndicator.appendChild(runningIcon);
const runningCount = $('span.agents-control-status-text');
runningCount.textContent = String(activeSessions.length);
leftIndicator.appendChild(runningCount);
} else if (hasUnreadSessions) {
// Unread indicator when there are unread sessions
const unreadIcon = $('span.agents-control-status-icon');
reset(unreadIcon, renderIcon(Codicon.circleFilled));
leftIndicator.appendChild(unreadIcon);
const unreadCount = $('span.agents-control-status-text');
unreadCount.textContent = String(unreadSessions.length);
leftIndicator.appendChild(unreadCount);
} else {
// Keyboard shortcut when idle (show open chat keybinding)
const kb = this.keybindingService.lookupKeybinding(OPEN_CHAT_ACTION_ID)?.getLabel();
if (kb) {
const kbLabel = $('span.agents-control-keybinding');
kbLabel.textContent = kb;
leftIndicator.appendChild(kbLabel);
}
}
pill.appendChild(leftIndicator);
// Show workspace name (centered)
const label = $('span.agents-control-label');
@@ -133,34 +157,10 @@ export class AgentsControlViewItem extends BaseActionViewItem {
label.textContent = workspaceName;
pill.appendChild(label);
// Right side indicator
const rightIndicator = $('span.agents-control-status');
if (hasActiveSessions) {
// Running indicator when there are active sessions
const runningIcon = $('span.agents-control-status-icon');
reset(runningIcon, renderIcon(Codicon.sessionInProgress));
rightIndicator.appendChild(runningIcon);
const runningCount = $('span.agents-control-status-text');
runningCount.textContent = String(activeSessions.length);
rightIndicator.appendChild(runningCount);
} else if (hasUnreadSessions) {
// Unread indicator when there are unread sessions
const unreadIcon = $('span.agents-control-status-icon');
reset(unreadIcon, renderIcon(Codicon.circleFilled));
rightIndicator.appendChild(unreadIcon);
const unreadCount = $('span.agents-control-status-text');
unreadCount.textContent = String(unreadSessions.length);
rightIndicator.appendChild(unreadCount);
} else {
// Keyboard shortcut when idle (show open chat keybinding)
const kb = this.keybindingService.lookupKeybinding(OPEN_CHAT_ACTION_ID)?.getLabel();
if (kb) {
const kbLabel = $('span.agents-control-keybinding');
kbLabel.textContent = kb;
rightIndicator.appendChild(kbLabel);
}
}
pill.appendChild(rightIndicator);
// Send icon (right side)
const sendIcon = $('span.agents-control-send');
reset(sendIcon, renderIcon(Codicon.send));
pill.appendChild(sendIcon);
// Setup hover with keyboard shortcut
const hoverDelegate = getDefaultHoverDelegate('mouse');
@@ -198,18 +198,13 @@ export class AgentsControlViewItem extends BaseActionViewItem {
const pill = $('div.agents-control-pill.session-mode');
this._container.appendChild(pill);
// Copilot icon
const iconContainer = $('span.agents-control-icon');
reset(iconContainer, renderIcon(Codicon.chatSparkle));
pill.appendChild(iconContainer);
// Session title
// Session title (left/center)
const titleLabel = $('span.agents-control-title');
const session = this.focusViewService.activeSession;
titleLabel.textContent = session?.label ?? localize('agentSessionProjection', "Agent Session Projection");
pill.appendChild(titleLabel);
// Close button
// Close button (right side)
const closeButton = $('span.agents-control-close');
closeButton.classList.add('codicon', 'codicon-close');
closeButton.setAttribute('role', 'button');
@@ -94,7 +94,6 @@ Agents Control - Titlebar control
border-color: color-mix(in srgb, var(--vscode-progressBar-background) 70%, transparent);
}
.agents-control-pill.chat-input-mode.has-active .agents-control-icon,
.agents-control-pill.chat-input-mode.has-active .agents-control-label {
color: var(--vscode-progressBar-background);
opacity: 1;
@@ -117,19 +116,6 @@ Agents Control - Titlebar control
border-color: color-mix(in srgb, var(--vscode-progressBar-background) 70%, transparent);
}
/* Icon */
.agents-control-icon {
display: flex;
align-items: center;
color: var(--vscode-foreground);
opacity: 0.7;
}
.agents-control-pill.session-mode .agents-control-icon {
color: var(--vscode-progressBar-background);
opacity: 1;
}
/* Label (workspace name, centered) */
.agents-control-label {
flex: 1;
@@ -141,10 +127,8 @@ Agents Control - Titlebar control
text-overflow: ellipsis;
}
/* Right side status indicator */
/* Left side status indicator */
.agents-control-status {
position: absolute;
right: 8px;
display: flex;
align-items: center;
gap: 4px;
@@ -170,6 +154,19 @@ Agents Control - Titlebar control
opacity: 0.7;
}
/* Send icon (right side) */
.agents-control-send {
display: flex;
align-items: center;
color: var(--vscode-foreground);
opacity: 0.7;
}
.agents-control-pill.has-active .agents-control-send {
color: var(--vscode-textLink-foreground);
opacity: 1;
}
/* Session title */
.agents-control-title {
flex: 1;
@@ -180,7 +177,7 @@ Agents Control - Titlebar control
white-space: nowrap;
}
/* Close button */
/* Close button (right side in session mode) */
.agents-control-close {
display: flex;
align-items: center;