Skip to content

Keep the chat request edit input opaque over Agents Window backgrounds - #334021

Merged
Justin Chen (justschen) merged 2 commits into
mainfrom
copilot/fix-chat-request-edit-opacity
Sep 4, 2026
Merged

Keep the chat request edit input opaque over Agents Window backgrounds#334021
Justin Chen (justschen) merged 2 commits into
mainfrom
copilot/fix-chat-request-edit-opacity

Conversation

Copilot AI commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Description

Clicking a user request bubble to edit it in the Agents Window let the custom chat background show through the edit input, since the editing .chat-input-container only gets the translucent --vscode-chat-requestBubbleBackground (#ffffff13 in 2026-dark) while the Monaco editor background inside it is deliberately transparent.

The request bubble itself already avoids this with an Agents Window opacity composition — opaque --session-view-background base, translucent token layered on as a gradient. This applies the same composition to the edit surface that replaces it.

Changes

  • src/vs/sessions/contrib/chat/browser/media/chatView.css: adds the opaque-base-plus-tint override for the editing input under .has-chat-background, next to the existing request-bubble rules. Covers both editing selectors from chat.css, so it holds for the default chat.editRequests: inline (input inside the request row) and for input (composer as edit surface).

    /* The edit input takes the place of the request bubble, so it needs the same opaque base under the translucent bubble tint. */
    .agent-sessions-workbench .part.sessionspart.has-chat-background .chat-view .interactive-session .interactive-input-part.editing .chat-input-container,
    .agent-sessions-workbench .part.sessionspart.has-chat-background .chat-view .interactive-session .interactive-request.editing .interactive-input-part .chat-input-container {
    	background-color: var(--session-view-background);
    	background-image: linear-gradient(var(--vscode-chat-requestBubbleBackground), var(--vscode-chat-requestBubbleBackground));
    }
  • src/vs/sessions/contrib/chat/test/browser/chatView.test.ts: regression test beside the existing request-bubble opacity test, snapshot-asserting the computed edit-input background for both editing surfaces, plus a control part without .has-chat-background to confirm the override stays scoped.

Copilot AI self-assigned this Sep 2, 2026
Copilot AI balanced review requested due to automatic review settings September 2, 2026 15:34

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.

Copilot wasn't able to review any files in this pull request.

Co-authored-by: justschen <54879025+justschen@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix translucency of chat request edit input Keep the chat request edit input opaque over Agents Window backgrounds Sep 2, 2026
@justschen
Justin Chen (justschen) marked this pull request as ready for review September 4, 2026 20:18
@justschen
Justin Chen (justschen) enabled auto-merge (squash) September 4, 2026 20:18
@justschen
Justin Chen (justschen) merged commit 9db4cf8 into main Sep 4, 2026
40 checks passed
@justschen
Justin Chen (justschen) deleted the copilot/fix-chat-request-edit-opacity branch September 4, 2026 21:56
@vs-code-engineering vs-code-engineering Bot added this to the 1.137.0 milestone Sep 4, 2026
TylerLeonhardt added a commit that referenced this pull request Sep 4, 2026
Regenerated by CI. Most entries are this PR repainting the composer, and
the NewSessionChatBackground pair is the fixture it adds.

One entry is not from here: chatInput/ResponsiveModelResizeCycleMinimal/Dark.
#334021 landed after the manifest was last regenerated and changed
chatView.css without refreshing it, so this PR is the first regeneration
to pick that up.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
TylerLeonhardt added a commit that referenced this pull request Sep 5, 2026
Regenerated by CI. Most entries are this PR repainting the composer, and
the NewSessionChatBackground pair is the fixture it adds.

One entry is not from here: chatInput/ResponsiveModelResizeCycleMinimal/Dark.
#334021 landed after the manifest was last regenerated and changed
chatView.css without refreshing it, so this PR is the first regeneration
to pick that up.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
TylerLeonhardt added a commit that referenced this pull request Sep 5, 2026
…334655)

* sessions: drop the composer card, give each control its own surface

Over a chat background the new-session composer sat on a single frosted
card, while a started session gives every control its own surface. This
makes the composer match the started session.

- Delete `.new-chat-widget-content`'s card styling: the padding, blur,
  border, radius and shadow.
- Give the bottom-row action labels and the workspace pills an opaque
  `--session-view-background` fill, and put a 2px gap between the agent
  host config controls now that they no longer share one surface.
- Keep the hover tint opaque. `--vscode-toolbar-hoverBackground` is
  translucent, so it goes on `background-image` as a flat gradient and
  composites over the opaque fill instead of replacing it.
- Frame the bottom-row chips when a chat background is set, the same
  move the in-session secondary toolbar makes in `chatView.css`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Address review: high-contrast chip frame, fixture layering

The chip frame over a chat background used commandCenter.inactiveBorder,
which — unlike its sibling border tokens — registers no hcDark/hcLight
value, so it stayed a 25%-alpha wash in high contrast. Put contrastBorder
first, the way the rest of the codebase does: high-contrast themes define
it, others fall through.

The chat-background fixture painted its opaque base on .session-view,
which production makes transparent so the wallpaper can show. Move that
base onto the part instead. Both screenshots are byte-identical, since
the wallpaper is positioned and always painted above a static background
either way — but the fixture now stacks its layers the way the real
window does.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Refresh the blocks-ci screenshot manifest

Regenerated by CI. Most entries are this PR repainting the composer, and
the NewSessionChatBackground pair is the fixture it adds.

One entry is not from here: chatInput/ResponsiveModelResizeCycleMinimal/Dark.
#334021 landed after the manifest was last regenerated and changed
chatView.css without refreshing it, so this PR is the first regeneration
to pick that up.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Restore the resize-cycle hash the manifest refresh clobbered

ResponsiveModelResizeCycleMinimal/Dark is not a fixture this branch
touches, but the regenerated manifest I pasted carried a one-off hash for
it. Put back the value main has held across ~20 regenerations, which is
also what the latest run produced.

That fixture is the only blocksCi one that sets virtualTime.enabled to
false, and it drives 19 sequential resize widths on wall-clock time, so
its final frame can land mid-settle on a loaded runner.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chat request edit input is translucent over Agents Window backgrounds

5 participants