dot/ascii animations for terminals in chat#317416
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the chat UI for terminal tool invocations by replacing the standard “running” icon with a lightweight dot-matrix spinner animation in the command decoration area, and adjusting related progress/spinner visuals to avoid redundant indicators.
Changes:
- Add a dot-matrix spinner animation for terminal command decorations while a tool invocation is running.
- Update terminal tool progress rendering to react to invocation state changes (so the decoration updates live).
- Hide the generic in-thinking “working” spinner when an in-progress terminal tool is present, and hide the progress-row icon for terminal tool progress rows.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/toolInvocationParts/chatTerminalToolProgressPart.ts | Adds running-state detection and a dot-matrix spinner implementation for terminal command decorations; wires decoration updates to tool invocation state changes. |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatTerminalToolProgressPart.css | Styles the dot-matrix spinner and hides the progress-row leading icon for terminal tool rows. |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatThinkingContentPart.ts | Updates thinking UI to temporarily remove the bottom “working” spinner when a terminal tool invocation is actively running. |
Copilot's findings
- Files reviewed: 3/3 changed files
- Comments generated: 2
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
anthonykim1
reviewed
May 19, 2026
| class TerminalCommandDecoration extends Disposable { | ||
| // 2x3 dot matrix: stagger each row left->right while building bottom->top, | ||
| // then stagger each row left->right while removing bottom->top. | ||
| private static readonly _spinnerFrames = [ |
Collaborator
Author
There was a problem hiding this comment.
yaur it let's us create our indices to be rendered in that order. we can manipulate it how we see fit as well if we want it to be faster, slower, or some other kind of animation.
Collaborator
Author
There was a problem hiding this comment.
swapped to using pure CSS which is a little safer. using the animation matrix drives the animation solely from TS, but we can do the same from CSS which is a bit easier to understand
anthonykim1
previously approved these changes
May 19, 2026
Contributor
|
/cc @meganrogge |
anthonykim1
approved these changes
May 19, 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.
Screen.Recording.2026-05-19.at.4.53.25.PM.mov
Screen.Recording.2026-05-19.at.4.55.04.PM.mov
cc @meganrogge @anthonykim1