From 01f981489f4540bcf3a0f9f326ce1a533415411c Mon Sep 17 00:00:00 2001 From: Elijah King Date: Tue, 4 Aug 2026 10:28:01 -0700 Subject: [PATCH 1/4] chat: make editor send button circular Apply the circular send control styling by its shared action class so editor-hosted chat surfaces match the Agents window. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../chat/browser/widget/media/chat.css | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index 51827a3db88139..630b5ef7d634a9 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -1291,12 +1291,12 @@ have to be updated for changes to the rules above, or to support more deeply nes gap: var(--vscode-spacing-size40); } -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button { +.action-item.chat-submit-button { position: relative; border-radius: var(--vscode-cornerRadius-circle); } -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label { +.action-item.menu-entry.chat-submit-button > .action-label.codicon[class*='codicon-'] { box-sizing: border-box; width: 22px; height: 22px; @@ -1309,37 +1309,37 @@ have to be updated for changes to the rules above, or to support more deeply nes } /* Nudge icon position to ensure it looks optically aligned within the button */ -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label.codicon-arrow-up-compact::before { +.action-item.chat-submit-button > .action-label.codicon-arrow-up-compact::before { display: inline-block; transform: translateY(0.5px); } -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label.codicon-plus::before { +.action-item.chat-submit-button > .action-label.codicon-plus::before { transform: translateX(0.5px); } /* Focus indicator drawn on the action-item wrapper so it sits cleanly around the button surface with a small offset. */ -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled):has(> .action-label:focus-visible) { +.action-item.chat-submit-button:not(.disabled):has(> .action-label:focus-visible) { outline: 1px solid var(--vscode-focusBorder); outline-offset: 1px; border-radius: var(--vscode-cornerRadius-circle); } -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label:focus, -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label:focus-visible { +.action-item.chat-submit-button > .action-label:focus, +.action-item.chat-submit-button > .action-label:focus-visible { outline: none; } /* Idle: solid primary button background. */ -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label { +.action-item.chat-submit-button:not(.disabled) > .action-label { background: var(--vscode-button-background); color: var(--vscode-button-foreground) !important; transition: background-color 120ms ease; } -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label:hover, -.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label:focus-visible { +.action-item.chat-submit-button:not(.disabled) > .action-label:hover, +.action-item.chat-submit-button:not(.disabled) > .action-label:focus-visible { background: var(--vscode-button-hoverBackground); } From a24a7baa3e97713358f03fcdb61606a448c970ad Mon Sep 17 00:00:00 2001 From: Elijah King Date: Tue, 4 Aug 2026 12:14:22 -0700 Subject: [PATCH 2/4] chat: preserve send icon foreground Keep the primary button foreground above the blanket toolbar codicon color rule after making the send styling host-independent. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/vs/workbench/contrib/chat/browser/widget/media/chat.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index 630b5ef7d634a9..62acdb091d22c2 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -1332,7 +1332,7 @@ have to be updated for changes to the rules above, or to support more deeply nes } /* Idle: solid primary button background. */ -.action-item.chat-submit-button:not(.disabled) > .action-label { +.monaco-workbench .action-item.menu-entry.chat-submit-button:not(.disabled) > .action-label.codicon[class*='codicon-'] { background: var(--vscode-button-background); color: var(--vscode-button-foreground) !important; transition: background-color 120ms ease; From 8925cf0432b9999b608863fb2a01be7710eb2fd1 Mon Sep 17 00:00:00 2001 From: Elijah King Date: Tue, 4 Aug 2026 13:03:28 -0700 Subject: [PATCH 3/4] chat: preserve send button hover state Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/vs/workbench/contrib/chat/browser/widget/media/chat.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index 62acdb091d22c2..87d9f610a03bdc 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -1338,8 +1338,8 @@ have to be updated for changes to the rules above, or to support more deeply nes transition: background-color 120ms ease; } -.action-item.chat-submit-button:not(.disabled) > .action-label:hover, -.action-item.chat-submit-button:not(.disabled) > .action-label:focus-visible { +.monaco-workbench .action-item.menu-entry.chat-submit-button:not(.disabled) > .action-label.codicon[class*='codicon-']:hover, +.monaco-workbench .action-item.menu-entry.chat-submit-button:not(.disabled) > .action-label.codicon[class*='codicon-']:focus-visible { background: var(--vscode-button-hoverBackground); } From 8a2a8aaffa534e960cea48cc3691b85e71ccd60f Mon Sep 17 00:00:00 2001 From: Elijah King Date: Tue, 4 Aug 2026 14:48:13 -0700 Subject: [PATCH 4/4] chat: simplify send button interaction styles Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../workbench/contrib/chat/browser/widget/media/chat.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index 87d9f610a03bdc..c79eb3580694da 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -1336,11 +1336,10 @@ have to be updated for changes to the rules above, or to support more deeply nes background: var(--vscode-button-background); color: var(--vscode-button-foreground) !important; transition: background-color 120ms ease; -} -.monaco-workbench .action-item.menu-entry.chat-submit-button:not(.disabled) > .action-label.codicon[class*='codicon-']:hover, -.monaco-workbench .action-item.menu-entry.chat-submit-button:not(.disabled) > .action-label.codicon[class*='codicon-']:focus-visible { - background: var(--vscode-button-hoverBackground); + &:is(:hover, :focus-visible) { + background: var(--vscode-button-hoverBackground); + } } .interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container,