Skip to content

Give ask-questions carousel a visible box in the Agents window#322188

Draft
romalpani wants to merge 1 commit into
microsoft:mainfrom
romalpani:ask-questions-ui-agents-window-updates
Draft

Give ask-questions carousel a visible box in the Agents window#322188
romalpani wants to merge 1 commit into
microsoft:mainfrom
romalpani:ask-questions-ui-agents-window-updates

Conversation

@romalpani

@romalpani romalpani commented Jun 20, 2026

Copy link
Copy Markdown
Contributor

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-requestBorder outline 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---
CleanShot 2026-06-19 at 16 47 16@2x

After---
CleanShot 2026-06-19 at 17 16 54@2x

Changes (chatQuestionCarousel.css)

  • Consolidated box styling onto the shared .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.
    • keeps border-radius: var(--vscode-cornerRadius-large) and overflow: hidden.
  • Focus treatment: :focus-within / :focus-visible → border-color: var(--vscode-focusBorder).
  • Agents window / editor surface override: .agent-sessions-workbench and .editor-instancebackground-color: var(--vscode-editor-background).
  • De-duplicated the input-part rule down to 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:

Aspect Questions (this PR) Permissions (existing)
Border input-borderchat-requestBorder fallback 1px solid input-border
Radius cornerRadius-large cornerRadius-large
Background panel-background panel-background
Focus focus-within → focusBorder focus-within → focusBorder
Agents/editor surface editor-background editor-background
Internal dividers chat-requestBorder (unchanged) chat-requestBorder

One deliberate difference: the questions border has a chat-requestBorder fallback because input.border is null/transparent by default — which is exactly why the box wasn't visible before.

Scope / risk

  • No behavior change; purely visual.
  • No build/type impact (CSS only).

Out of scope

This PR only restyles the box. It does not change carousel behavior — questions still carousel within a single askQuestions call, while separate invocations stack vertically. Aggregating separate invocations into one carousel (as permissions do via ChatToolConfirmationCarouselPart) is a separate, larger change.

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>
Copilot AI review requested due to automatic review settings June 20, 2026 00:33

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-visible to use --vscode-focusBorder.
  • Adds an Agents window / editor-surface override to use --vscode-editor-background for 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);
}
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants