Improve Fusion visibility in model picker #343324

Merged
lramos15 opened 2:51pm on October 21, 2026 wanted to merge 126 Δ into microsoft/vscode main from
agents/improve-fusion-visibility-model-picker

Pull Request Overview

  • Opened on October 21, 2026
  • Status Merged
  • Commit count 2 with first commit October 21, 2026

Total Delta

126 Total Diff Delta

Open Days

Open 9 weekdays

Test Delta

40 Diff Delta in Test Files
Breakdown by Phase

How long has this pull request spent in each phase of its lifecycle?

Fraction of total time Business days Phase
 
0.0 days Authoring 1 commit before pull request opened for review
 
0.0 days Awaiting first review
 
0.1 days Revising work with 1 commit in response to 4 reviews that left 8 comments
 
9.0 days Merge to deploy (still awaiting deployment)

Total time for pull request 0.1 business days from first commit authored to merge
Still awaiting deployment

Author avatar

Improve Fusion visibility in model picker

Makes Copilot Fusion stand out in the model picker.



  • Taller row: Copilot Fusion's row is twice the height of the other entries. Action list items gain a heightInLines option for this; values below 1 or not finite are ignored.


  • Brand gradient badge: Fusion's discount badge uses the GitHub Copilot mint-to-purple gradient, registered as theme colors (chat.fusionBadgeGradientStart, chat.fusionBadgeGradientEnd, chat.fusionBadgeForeground). The badge text keeps at least 5.7:1 contrast across the gradient. High contrast themes drop the fill and show an outlined pill with the contrast border.

  • The gradient style follows Fusion's actual discount at the selected effort level, so other routing badges are unaffected. Plain Auto and HydraFusion rows are unchanged.

How to test


  1. Sign in with a plan that offers Copilot Fusion with a discount, and open the model picker.

  2. Copilot Fusion leads the list on a double-height row, with its discount in the brand gradient. Check dark, light, and high contrast themes.

Component fixtures: chat/input/tabbedModelPicker/PickerWithCopilotFusionDiscount and PickerCopilotFusionSelected.

Validation



  • ./scripts/test.sh --run …/modelPickerTabbedWidget.test.ts --run …/modelPickerPresentation.test.ts --run …/modelPickerCard.test.ts --run src/vs/platform/actionWidget/test/browser/actionList.test.ts: 390 passing


  • npm run typecheck-client: passed


  • npm run eslint and hygiene on the changed files: passed


  • npm run stylelint: no errors

The component screenshot baselines for the new fixtures still need to be added.

Comments Threads Pending Resolution

ljharb reviewed on October 21, 2026
ljharb left a comment

> [!WARNING]
> Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a `copilot-code-review.yml` file specifying one with the `runs-on` attribute. See the [docs](https://gh.io/AA11tgch) for more details.

## Copilot review overview

5 open issues

- Medium severity [`heightInLines` is used directly without validation. Values like 0, negative numbers, NaN, or…](https://github.com/microsoft/vscode/pull/343324#discussion_r4341430670) · New
- Medium severity [`--vscode-agentsGradient-tintColor` may not be defined in all themes/contexts; when undefined, the…](https://github.com/microsoft/vscode/pull/343324#discussion_r4341430802) · New
- Medium severity [The comment says Fusion’s routing badge is *only ever its discount*, but the condition keys off…](https://github.com/microsoft/vscode/pull/343324#discussion_r4341430879) · New
- Medium severity [The test asserts `row.style.height`, which only reflects inline styles and can be empty if the list…](https://github.com/microsoft/vscode/pull/343324#discussion_r4341430963) · New
- Low severity [This doc comment is difficult to parse ('presents it with Fusion on'). Consider rephrasing for…](https://github.com/microsoft/vscode/pull/343324#discussion_r4341431038) · New

What changed in this PR

Enhances Copilot Fusion’s prominence in the chat model picker by making it visually “featured” (taller row) and applying a distinct discount badge style.

**Changes:**
- Adds a “featured” auto-model row treatment (2x heigh...

src/vs/platform/actionWidget/browser/actionList.ts
2145
2146
	/** Row heights depend on the options of the tab the items belong to, not the shown one. */
2147
	private _itemHeightWith(item: IActionListItem<T>, options: IActionListOptions | undefined): number {
2148
		if (item.heightInLines !== undefined) {
2149
			return item.heightInLines * this._actionLineHeight;
src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/modelPickerTabbedWidget.ts
1246
		const badgeClassName = modelBadge
1247
			? `chat-model-picker-badge-${modelBadge.tone}`
1248
			: fusionDiscountBadge
1249
				? 'chat-model-picker-badge-fusion-discount'
1240 1250
		
		
: routingBadge ? 'chat-model-picker-badge-preview' : undefined;
src/vs/workbench/contrib/chat/browser/widget/input/modelPicker/media/modelPicker.css
810
	padding: var(--vscode-spacing-sizeNone) var(--vscode-spacing-size60);
811
	color: var(--vscode-foreground);
812
	background: linear-gradient(to right,
813
		color-mix(in srgb, var(--vscode-agentsGradient-tintColor) 22%, transparent),
814
		color-mix(in srgb, var(--vscode-agentsGradient-tintColor) 50%, transparent));
src/vs/workbench/contrib/chat/test/browser/widget/input/modelPicker/modelPickerTabbedWidget.test.ts
1631
1632
	test('Copilot Fusion leads on a row twice the height of the others, its discount badge in Fusion\'s style', () => {
1633
		const rowOf = (popup: HTMLElement, label: string) => Array.from(popup.querySelectorAll<HTMLElement>('.chat-model-picker-model')).find(row => row.querySelector('.title')?.textContent === label)!;
1634
		const describe = (row: HTMLElement) => ({
1635
			height: row.style.height,

Resolved Comment Threads

No resolved comments have been left on this PR.