Skip to content

chat: use trophy icon for model comparison toggle - #342688

Merged
Megan Rogge (meganrogge) merged 6 commits into
mainfrom
agents/update-codicnos-trophy-icon-support
Oct 20, 2026
Merged

Megan Rogge (meganrogge) merged 6 commits into
mainfrom
agents/update-codicnos-trophy-icon-support

Conversation

@meganrogge

@meganrogge Megan Rogge (meganrogge) commented Oct 19, 2026 •

Copy link
Copy Markdown
Collaborator
trophy.mov

Summary

  • Update @vscode/codicons from 0.0.46-44 to the published 0.0.46-46 prerelease in the root and web packages and lockfiles.
  • Register the trophy glyph (0xecf9) added in Add trophy icon with metadata vscode-codicons#539.
  • Replace the stacked/layers icon on the model picker's Compare Models toggle with the trophy. Keep the accessible label, tooltip, pressed-state behavior, and availability unchanged.
  • Give the enabled comparison toggle a distinct theme-aware fill and border, separate from hover. Reserve the border inside the existing control size so toggling does not shift layout.
  • Extend existing tests to verify the trophy, accessible pressed state, selected colors, and unchanged control dimensions when entering and leaving comparison setup.
  • Show a single trophy in the configured comparison's composer control instead of one provider icon per attempt. Retain model and variant names in the hover and accessible label across expanded, compact, and minimal layouts; restore the normal model label when comparison is reset.
  • Remove the unused per-attempt icon presentation contract and CSS.

Winner displays and metric badges are unchanged. The existing copy-codicons build task supplies the updated font; no custom font binary or release-infrastructure change is needed.

Validation

  • npm run build-fast -- --client-only — passed; client output refreshed and package font copied.
  • npm run typecheck-client — passed after removing an import made unused by the composer simplification.
  • npm run build-fast — passed after the styling update; client, built-in extensions, extension media, and Copilot outputs built for the live Agents window.
  • ./scripts/test.sh --run src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts — passed, 130 tests.
  • ./scripts/test.sh --reporter dot --run src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts --run src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts --run src/vs/sessions/contrib/chat/test/browser/sessionComparisonModelSelection.test.ts — passed, 173 tests, including exact single-trophy rendering, variant accessibility/hover, layout modes, and comparison reset.
  • npm run eslint -- src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerComparison.ts src/vs/sessions/contrib/chat/browser/sessionComparisonModelSelection.ts src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts — passed; the test file was rechecked successfully after the final assertion update.
  • node build/hygiene.ts src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerWidget.ts src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerComparison.ts src/vs/sessions/contrib/chat/browser/sessionComparisonModelSelection.ts src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerActionItem.test.ts src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/media/modelPicker.css — passed, 5 files.
  • npm run eslint -- src/vs/base/common/codiconsLibrary.ts src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts — passed.
  • npm run eslint -- src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts — passed after the styling regression assertions were added.
  • npm run stylelint -- src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/media/modelPicker.css — passed; reported 12 existing design-token suggestions outside the added rules.
  • node build/hygiene.ts src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/media/modelPicker.css src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts — passed, 2 files.
  • git diff --check and git diff --cached --check — passed before commit.
  • A Node assertion probe verified root/web manifest and lockfile consistency, all generated icon registrations against the published package, the copied font's byte identity, and the compiled trophy codepoint. Existing alias ordering was preserved rather than introducing unrelated generated-file reorderings.
  • Visually checked the existing SingleModelPicker component fixture in dark, light, dark high-contrast, and light high-contrast themes. Activated the trophy toggle and verified comparison setup opens with the existing Compare Models accessible name and pressed state.
  • Launched the current build in an isolated, authenticated Agents window and visually inspected the selected trophy toggle. Verified its active fill and border persist without hover, aria-pressed is true, and the control remains 28 × 28.
  • Reloaded that Agents window with the composer fix and configured six distinct-model attempts. Visually verified exactly one trophy beside "Run 6 Attempts", all six model names retained in the accessible label, and clicking the trophy reopens comparison setup.

Integration/smoke tests and a live screen-reader session were not run locally. The four-theme fixture checks cover the trophy substitution; the final selected-state styling and six-attempt composer were visually checked in the live Agents window with the cloned profile's theme.

Manual Test

With model comparison enabled in the Agents window, open the new-session model picker. Confirm the trophy appears beside Search; activate it to enter comparison setup. Move the pointer away and confirm the selected fill and border remain visible. Activate it again to return to single-model selection; the selected treatment should disappear without changing the control's dimensions.

Configure multiple comparison attempts and finish setup. Confirm the composer displays exactly one trophy instead of multiple provider icons or a joined model-name label. Hover the trophy to inspect the configured models and click it to edit the comparison. The send action should still report the configured attempt count. Repeat with variants of the same model and a narrow composer.

Update Codicons to 0.0.46-46 and register the trophy glyph added in microsoft/vscode-codicons#539. Preserve the comparison toggle's accessible label and pressed-state behavior.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI balanced review requested due to automatic review settings October 19, 2026 20:56
Use the existing active input-option colors and border for the trophy toggle while preserving its dimensions and accessible pressed state.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@meganrogge Megan Rogge (meganrogge) added the ~release-cherry-pick Trigger: cherry-pick this PR to the latest release branch label Oct 19, 2026
@meganrogge Megan Rogge (meganrogge) added this to the 1.144.0 milestone Oct 19, 2026
@meganrogge
Megan Rogge (meganrogge) enabled auto-merge (squash) October 19, 2026 21:02
@github-actions

github-actions Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: d3e8d710 Current: fd3ccfe9

Changed (6)

sessions/compareModels/sessionComparisonModelPicker/SingleModelPicker/Light
Before After
before after
sessions/compareModels/sessionComparisonModelPicker/FolderlessAttempts/Light
Before After
before after
sessions/compareModels/sessionComparisonModelPicker/NoAttemptsSelected/Light
Before After
before after
sessions/compareModels/sessionComparisonModelPicker/AttemptsSelected/Light
Before After
before after
sessions/compareModels/sessionComparisonModelPicker/JudgeSelected/Light
Before After
before after
sessions/compareModels/sessionComparisonModelPicker/SynthesizerSelected/Light
Before After
before after

@vs-code-engineering

Copy link
Copy Markdown
Contributor

This PR will be automatically cherry-picked to release/1.143 when merged.

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.

🟢 Approval recommended

The narrow changes preserve existing toggle behavior and accessibility, with consistent dependency updates and targeted regression coverage.

No open issues 🎉

1 file not reviewed
  • remote/web/package-lock.json: Generated file
What changed in this PR

Updates the chat model picker’s Compare Models toggle with a trophy icon and a persistent, theme-aware selected state.

Changes:

  • Updates root and web Codicons dependencies and registers the trophy glyph.
  • Replaces the toggle icon and adds selected styling without changing its dimensions.
  • Extends regression tests for the icon, pressed state, colors, and sizing.

No actionable defects remain. Tests were not rerun during this review.

File Description
src/​vs/​workbench/​contrib/​chat/​test/​browser/​widget/​input/​modelPicker/​modelPickerTabbedWidget.test.ts Verifies icon, state, colors, and stable dimensions.
src/​vs/​workbench/​contrib/​chat/​browser/​widget/​input/​modelPicker/​modelPickerTabbedWidget.ts Uses the trophy icon.
src/​vs/​workbench/​contrib/​chat/​browser/​widget/​input/​modelPicker/​media/​modelPicker.css Adds theme-aware selected styling.
src/​vs/​base/​common/​codiconsLibrary.ts Registers the trophy glyph.
remote/​web/​package.json Updates the web Codicons dependency.
remote/​web/​package-lock.json Locks the updated web dependency.
package.json Updates the root Codicons dependency.
package-lock.json Locks the updated root dependency.

Review effort: Balanced

Replace the composer's per-attempt provider icons with the comparison trophy. Preserve committed model details in the hover and accessible label across expanded, compact, and minimal layouts.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…s-trophy-icon-support

# Conflicts:
#	src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts

Co-authored-by: meganrogge <29464607+meganrogge@users.noreply.github.com>
@meganrogge
Megan Rogge (meganrogge) merged commit 23794cf into main Oct 20, 2026
50 checks passed
@meganrogge
Megan Rogge (meganrogge) deleted the agents/update-codicnos-trophy-icon-support branch October 20, 2026 00:09
@vs-code-engineering vs-code-engineering Bot added the release-cherry-pick Automated cherry-pick between release and main branches label Oct 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release-cherry-pick Automated cherry-pick between release and main branches

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants