Give ask-questions carousel a visible box in the Agents window#322188
Merged
justschen merged 2 commits intoJun 22, 2026
Conversation
Style the question carousel container so it renders as a bounded box that matches the tool-confirmation (permissions) dialog family. Previously the container only had a faint requestBorder outline with no fill, so in dark themes and the Agents window it did not read as a box. - Consolidate box styling onto the shared .chat-question-carousel-container - Border falls back to chat-requestBorder when input-border is transparent - Add focus-within/focus-visible -> focusBorder treatment - Use editor-background as the surface in the Agents window / editor Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the visual styling of the chat “ask-questions” carousel so it reads as a distinct, bounded surface (especially in dark themes and on editor-background surfaces like the Agents window), aligning it with the existing tool-permissions confirmation box styling.
Changes:
- Consolidates the carousel “box” styling onto
.chat-question-carousel-container(background fill + border + radius + overflow behavior). - Adds focus styling via
:focus-within/:focus-visibleto use--vscode-focusBorder. - Adds an Agents window / editor-surface override to use
--vscode-editor-backgroundfor the container background.
Comment on lines
+32
to
+35
| .interactive-session .chat-question-carousel-container:focus-visible, | ||
| .interactive-session .chat-question-carousel-container:focus-within { | ||
| border-color: var(--vscode-focusBorder); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Done in e11db08 — added :focus { outline: none; } so the border-color change is the single focus indicator, matching chatToolConfirmationCarousel.css.
Comment on lines
20
to
22
| margin: 8px 0; | ||
| border: 1px solid var(--vscode-chat-requestBorder); | ||
| border: 1px solid var(--vscode-input-border, var(--vscode-chat-requestBorder)); | ||
| border-radius: var(--vscode-cornerRadius-large); |
Contributor
Author
There was a problem hiding this comment.
Done in e11db08 — switched the container border to var(--vscode-strokeThickness) per the design-system stroke ramp.
…us outline - Use --vscode-strokeThickness for the container border instead of a raw 1px literal, per the design-system stroke ramp. - Suppress the browser default outline on :focus so the border-color focus treatment is the single focus indicator, matching chatToolConfirmationCarousel. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
roblourens
approved these changes
Jun 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Gives the ask-questions carousel in the Agents window a visible box, so it reads as a bounded surface that belongs to the same "ask the human" family as the tool-call permissions dialog.
Previously the question carousel rendered with only a faint
--vscode-chat-requestBorderoutline and no fill. In dark themes (and in the Agents window, where the surface is the editor background) it had no visible boundary — only the internal dividers showed.This is CSS-only — one file, no TypeScript touched.
Before / After
Before---
After---
Changes (
chatQuestionCarousel.css).chat-question-carousel-container:background-color: var(--vscode-panel-background)border: 1px solid var(--vscode-input-border, var(--vscode-chat-requestBorder))— honors a theme's input border, otherwise falls back to the same visible token the internal dividers use, so the box is always visible.border-radius: var(--vscode-cornerRadius-large)andoverflow: hidden.:focus-within / :focus-visible → border-color: var(--vscode-focusBorder)..agent-sessions-workbenchand.editor-instance→background-color: var(--vscode-editor-background).margin: 0; box styling now lives only on the shared rule, so both render paths (input part + inline fallback) and the Agents-window override apply uniformly.Consistency with the permissions box
Intentionally aligned with
chatToolConfirmationCarousel.css:input-border→chat-requestBorderfallback1px solid input-bordercornerRadius-largecornerRadius-largepanel-backgroundpanel-backgroundfocus-within → focusBorderfocus-within → focusBordereditor-backgroundeditor-backgroundchat-requestBorder(unchanged)chat-requestBorderOne deliberate difference: the questions border has a
chat-requestBorderfallback becauseinput.borderisnull/transparent by default — which is exactly why the box wasn't visible before.Scope / risk
Out of scope
This PR only restyles the box. It does not change carousel behavior — questions still carousel within a single
askQuestionscall, while separate invocations stack vertically. Aggregating separate invocations into one carousel (as permissions do viaChatToolConfirmationCarouselPart) is a separate, larger change.