chat: make the dictation mic glow an ambient inner rim light - #327713
Draft
eli-w-king wants to merge 1 commit into
Draft
chat: make the dictation mic glow an ambient inner rim light#327713eli-w-king wants to merge 1 commit into
eli-w-king wants to merge 1 commit into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an audio-reactive ambient glow to indicate active chat dictation across workbench and Agents window microphone controls.
Changes:
- Exposes live microphone levels through an
AnalyserNode. - Adds reusable glow rendering, styling, theming, and reduced-motion behavior.
- Adds unit coverage for glow phases and level shaping.
Show a summary per file
| File | Description |
|---|---|
speechToText.test.ts |
Tests glow phase and level calculations. |
dictationSession.test.ts |
Updates the speech-service test double. |
chatColors.ts |
Registers the glow theme color. |
voiceInputModeActionViewItem.ts |
Adds glow to the segmented dictation cell. |
dictationSession.css |
Defines glow appearance and animation. |
dictationMicGlow.ts |
Implements glow state and audio-level rendering. |
dictationActionViewItem.ts |
Adds glow to toolbar microphones. |
chatSpeechToTextService.ts |
Exposes a microphone analyser node. |
newChatInput.ts |
Adds glow to the Agents composer microphone. |
vscode-known-variables.json |
Registers new CSS variables for linting. |
Review details
- Files reviewed: 10/10 changed files
- Comments generated: 4
- Review effort level: Medium
Comment on lines
+58
to
+60
| export function easeDictationMicLevel(current: number, target: number): number { | ||
| const rate = target > current ? LEVEL_ATTACK : LEVEL_RELEASE; | ||
| return current + (target - current) * rate; |
Comment on lines
+164
to
+171
| // With reduced motion the glow still shows, held at a steady level, so a | ||
| // hot microphone stays legible without any movement. | ||
| if (!active || this._accessibilityService.isMotionReduced()) { | ||
| this._stopAnimation(); | ||
| this._applyLevel(active ? REDUCED_MOTION_LEVEL : 0); | ||
| return; | ||
| } | ||
| this._startAnimation(); |
Comment on lines
+86
to
+88
| /* Slow fades in and out of the session, so the glow arrives and leaves as | ||
| light rather than as a state toggle. */ | ||
| transition: opacity 420ms ease; |
Comment on lines
+851
to
+854
| const downloadRing = this._register(new MutableDisposable<DictationDownloadRing>()); | ||
| // Audio-reactive "hot microphone" decoration. Created once and re-attached | ||
| // after each re-render below, since `renderState` clears the button. | ||
| const micGlow = this._register(new DictationMicGlow(button, sttService, this.accessibilityService)); |
eli-w-king
force-pushed
the
eli/agents/mic-button-animation-enhancements
branch
from
July 27, 2026 21:52
0c44fdd to
e731b01
Compare
Refines the dictation mic glow added in #327684. The glow currently spreads outward from the button as a focus-colored halo, and steps through four discrete intensity levels driven directly by each analyser frame. The stepping is visible as the level crosses a threshold, and tracking the waveform frame-for-frame reads as a level meter rather than as a microphone that is simply on. Move the light inside the button and smooth its response: - Light now gathers along the button's inner edge over a faint bloom, with the middle left clear so the glyph is never clouded. - Replace the four level classes with a continuous `--dictation-mic-level`, eased asymmetrically (fast attack, slow release) so the glow swells into speech and drifts back out of it. The level is also shaped to lift quiet speech and clamp loud speech, keeping opacity in a narrow band. - Add a `chat.dictationActiveMicGlow` theme color, defaulting to the blue Voice Mode's listening glow uses so the two features read as one family. - Suppress the glow while the model is preparing, so it doesn't compete with the download ring, and wind it down while the final transcript lands rather than cutting out the moment recording stops. The `setupDictationMicGlow` signature and its three call sites are unchanged, as is the high-contrast outline fallback and the reduced-motion behavior (the glow still shows, held at a steady level). Refs microsoft/vscode-internalbacklog#8607 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
eli-w-king
force-pushed
the
eli/agents/mic-button-animation-enhancements
branch
from
July 27, 2026 22:20
e731b01 to
801cba1
Compare
eli-w-king
changed the title
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.
Refines the dictation mic glow added in #327684. Refs https://github.com/microsoft/vscode-internalbacklog/issues/8607
What this changes
The glow today spreads outward from the button as a
focusBorder-colored halo, and steps through four discrete intensity classes driven directly by each analyser frame. Two things fall out of that:This moves the light inside the button and smooths its response.
--dictation-mic-levelfocusBorderchat.dictationActiveMicGlow(Voice Mode's listening blue)Why asymmetric easing
A symmetric filter follows your voice too literally — it reads as a VU display. Easing the rise faster than the fall (
0.1vs0.035) makes the light swell into speech and drift back out of it, which is what makes it feel ambient. The level is also shaped (pow(level, 0.7) * 1.15, clamped) to lift quiet speech and keep loud speech from slamming opacity to full.Color
chat.dictationActiveMicGlowdefaults to the blue Voice Mode's listening glow uses, so dictation and Voice Mode read as one family. Deliberately notcharts.blue— that resolves toeditorInfoForeground(#1a5cff), a vivid indigo that reads as purple once softened into a wash.Unchanged
setupDictationMicGlow(target, service, accessibilityService)and its three call sites (toolbar mic, voice-input pill cell, Agents composer button).requestAnimationFrameloop never starts.Testing
npm run typecheck-client, ESLint, stylelint, and a fullnpm run compile— all clean.