From daf2ea5ea4ca01cf262071f5ece5ab12b039cbda Mon Sep 17 00:00:00 2001 From: Josh Spicer <23246594+joshspicer@users.noreply.github.com> Date: Wed, 14 Jan 2026 19:50:08 -0800 Subject: [PATCH] swap around icons and indicators in the title bar agents control (#287935) --- .../browser/agentSessions/agentsControl.ts | 73 +++++++++---------- .../browser/agentSessions/media/focusView.css | 33 ++++----- 2 files changed, 49 insertions(+), 57 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/agentSessions/agentsControl.ts b/src/vs/workbench/contrib/chat/browser/agentSessions/agentsControl.ts index 482f929451e5..8bdedfbde994 100644 --- a/src/vs/workbench/contrib/chat/browser/agentSessions/agentsControl.ts +++ b/src/vs/workbench/contrib/chat/browser/agentSessions/agentsControl.ts @@ -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'); diff --git a/src/vs/workbench/contrib/chat/browser/agentSessions/media/focusView.css b/src/vs/workbench/contrib/chat/browser/agentSessions/media/focusView.css index 9b6cc014fc2d..1e8996943c26 100644 --- a/src/vs/workbench/contrib/chat/browser/agentSessions/media/focusView.css +++ b/src/vs/workbench/contrib/chat/browser/agentSessions/media/focusView.css @@ -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;