Show relative pricing in model picker

[pwang347]

Fixes #314542

[github-actions]

Screenshot Changes

Base: c7bc16d4 Current: a26d71ae

Changed (13)

chat/input/chatInput/Default/Dark

Before	After

chat/input/chatInput/Default/Light

Before	After

chat/input/chatInput/WithFileChanges/Dark

Before	After

chat/input/chatInput/WithFileChanges/Light

Before	After

chat/input/chatInput/WithTodosAndFileChanges/Dark

Before	After

chat/input/chatInput/WithTodosAndFileChanges/Light

Before	After

chat/input/chatInput/WithArtifactsAndFileChanges/Dark

Before	After

chat/input/chatInput/Full/Dark

Before	After

chat/widget/chatWidget/PendingToolApproval/Dark

Before	After

chat/widget/chatWidget/PendingToolApproval/Light

Before	After

chat/widget/chatWidget/MultiTurn/Light

Before	After

agentSessionsViewer/WithDiffChanges/Dark

Before	After

agentSessionsViewer/WithDiffChanges/Light

Before	After

[Copilot]

Pull request overview

This PR introduces a relative “cost tier” signal for chat language models and surfaces it in the chat model picker UI. It adds a priceTier field to model metadata, propagates it from Copilot’s endpoint metadata through the extension host, and renders a tier indicator (circles) alongside model details; it also extends the generic ActionList filter row to support a right-aligned label (“Cost”).

Changes:

• Add priceTier?: string to the proposed language model pricing API and internal chat model metadata.
• Plumb priceTier from Copilot model metadata (model_picker_price_category) into model info surfaced to the workbench and render a visual tier indicator in the model picker.
• Add filterLabel support to the ActionList filter row and styling to display the label; adjust model picker “Other Models” header to show a gear action in-row.

Show a summary per file

File	Description
src/vscode-dts/vscode.proposed.languageModelPricing.d.ts	Extends proposed API with priceTier on LanguageModelChatInformation.
src/vs/workbench/contrib/chat/common/languageModels.ts	Adds priceTier to internal model metadata type used by the chat UI.
src/vs/workbench/contrib/chat/browser/widget/media/chat.css	Forces the “Other Models” section toggle row toolbar to be visible.
src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts	Renders price-tier icons in model descriptions; refactors manage-models affordance and filter header behavior.
src/vs/workbench/api/common/extHostLanguageModels.ts	Plumbs priceTier from extension-provided model info into workbench metadata.
src/vs/platform/actionWidget/browser/actionWidget.css	Styles a new optional filter-row label element.
src/vs/platform/actionWidget/browser/actionList.ts	Adds filterLabel?: string option and renders it when the filter row is shown.
extensions/copilot/src/platform/networking/common/networking.ts	Extends IChatEndpoint with priceTier.
extensions/copilot/src/platform/endpoint/node/chatEndpoint.ts	Maps service metadata model_picker_price_category to priceTier.
extensions/copilot/src/platform/endpoint/common/endpointProvider.ts	Extends model API response typing with model_picker_price_category.
extensions/copilot/src/extension/conversation/vscode-node/languageModelAccess.ts	Includes priceTier in model info contributed to VS Code.
extensions/copilot/src/extension/chatSessions/claude/node/claudeCodeModels.ts	Includes priceTier in Claude model info surfaced to the picker.

Copilot's findings

Comments suppressed due to low confidence (3)

src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts:186

• The description is rendered as a MarkdownString containing only codicon markup (e.g. $(circle-filled)), which will also be used verbatim for screen reader text via the ActionList accessibility provider. Consider appending a localized textual tier label (e.g. "Low cost") alongside the icons (or otherwise ensuring an accessible text alternative) so the description is meaningful to assistive tech users.

	let descriptionOverride: MarkdownString | undefined;
	if (priceTierIndicator) {
		const md = new MarkdownString('', { isTrusted: false, supportThemeIcons: true });
		if (textDescription) {
			md.appendText(textDescription + ' · ');
		}
		md.appendMarkdown(priceTierIndicator);
		descriptionOverride = md;

src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts:447

• manageModelsAction is no longer added as an ActionList item when the Other Models section exists; it's moved into the section toggle's toolbarActions. This changes behavior relied on by existing chatModelPicker tests (they currently assert a standalone "Manage Models..." entry and an extra separator). Either update the tests accordingly, or keep the Manage Models action as a regular list item to preserve the prior UI/keyboard navigation behavior.

				const otherModelsToolbar = manageModelsAction
					? [toAction({ id: manageModelsAction.id, label: manageModelsAction.tooltip ?? manageModelsAction.label, class: ThemeIcon.asClassName(Codicon.gear), run: () => manageModelsAction.run() })]
					: undefined;
				items.push({
					item: {
						id: 'otherModels',
						enabled: true,
						checked: false,
						class: undefined,
						tooltip: localize('chat.modelPicker.otherModels', "Other Models"),
						label: localize('chat.modelPicker.otherModels', "Other Models"),
						run: () => { /* toggle handled by isSectionToggle */ }
					},
					kind: ActionListItemKind.Action,
					label: localize('chat.modelPicker.otherModels', "Other Models"),
					group: { title: '', icon: Codicon.chevronDown },
					hideIcon: false,
					section: ModelPickerSection.Other,
					isSectionToggle: true,
					toolbarActions: otherModelsToolbar,
					className: 'chat-model-picker-section-toggle',
				});
				for (const model of otherModels) {

src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts:446

• The Manage Models gear is attached as toolbarActions on the "Other Models" section toggle. ActionListWidget only provides explicit keyboard affordances (Right Arrow + aria hint) for submenuActions, not toolbarActions, so this risks making the gear effectively mouse-only and undiscoverable to screen reader users. Consider exposing this action via submenuActions (or wiring ArrowRight/aria hint support for toolbarActions), or keep "Manage Models..." as a regular list item so it remains keyboard accessible.

				const otherModelsToolbar = manageModelsAction
					? [toAction({ id: manageModelsAction.id, label: manageModelsAction.tooltip ?? manageModelsAction.label, class: ThemeIcon.asClassName(Codicon.gear), run: () => manageModelsAction.run() })]
					: undefined;
				items.push({
					item: {
						id: 'otherModels',
						enabled: true,
						checked: false,
						class: undefined,
						tooltip: localize('chat.modelPicker.otherModels', "Other Models"),
						label: localize('chat.modelPicker.otherModels', "Other Models"),
						run: () => { /* toggle handled by isSectionToggle */ }
					},
					kind: ActionListItemKind.Action,
					label: localize('chat.modelPicker.otherModels', "Other Models"),
					group: { title: '', icon: Codicon.chevronDown },
					hideIcon: false,
					section: ModelPickerSection.Other,
					isSectionToggle: true,
					toolbarActions: otherModelsToolbar,
					className: 'chat-model-picker-section-toggle',
				});

• Files reviewed: 11/12 changed files
• Comments generated: 2