Prototype: Auto Model Routing collapsible card in chat (dev command)

[Copilot]

Prototypes a "Copilot Auto Model Selection Routing" card that reuses the existing collapsible content-part styling (tool calls / thinking / file changes) to preview how an intelligently-selected model in auto mode would surface in chat. Gated behind a Developer command — no real router is wired up.

Description

• New content kind autoModelRouting (IChatAutoModelRoutingPart) added to IChatProgress and IChatProgressHistoryResponseContent. Carries: selectedModel, selectionReason, intent, confidence, predictedLatencyMs, costTier, candidates[]. Switch arms added in partsToRepr (ignore) and chatSessionOperationLog (static).
• Renderer ChatAutoModelRoutingContentPart extends ChatCollapsibleContentPart. Collapsed: Routed to <model> with a sparkle icon. Expanded view (revised after design feedback):
  • Header row with the title plus an intent "chip"
  • One-line selection reason in descriptionForeground
  • Small badge-style chips for confidence, predicted latency, and cost tier (using --vscode-badge-background)
  • A unified ranked candidate list with grey horizontal bar graphs scaled to the top score; the selected model is highlighted with a check icon, bold name, an accented progressBar-background bar, and a subtle hover-background row treatment. Other candidates use muted grey bars (scrollbarSlider-background)
  • Each candidate row uses a single left-hand column that stacks the model name with a muted subtitle for its reason; the bar and score are vertically centered against that column on the right (no more two-column italic reason spanning under the bar)
  • All colors come from VS Code theme tokens so it adapts to light/dark/high-contrast themes
• Dispatched from chatListRenderer.renderChatContentPart.
• Dev command Developer: Simulate Auto Model Selection Routing (Prototype) injects a sample part into the focused chat via IChatService.addCompleteRequest, sandwiched between two markdown lines:

const message: IChatProgress[] = [
    { kind: 'markdownContent', content: new MarkdownString('Routing your request through Copilot Auto…') },
    {
        kind: 'autoModelRouting',
        selectedModel: 'GPT-5',
        selectionReason: 'Best fit for multi-file refactoring with strong code reasoning',
        intent: 'Code edit (multi-file refactor)',
        confidence: 0.86,
        predictedLatencyMs: 4200,
        costTier: 'medium',
        candidates: [
            { modelName: 'Claude Sonnet 4.5', score: 0.81, reason: 'Strong reasoning, slightly higher latency' },
            { modelName: 'GPT-4.1',           score: 0.74, reason: 'Lower cost, weaker on large refactors' },
            { modelName: 'o3-mini',           score: 0.62, reason: 'Fast, but limited code-edit accuracy' },
        ],
    },
    { kind: 'markdownContent', content: new MarkdownString('Done — using **GPT-5** for this turn.') },
];

Static preview of the collapsed and expanded states (dark theme):

How to test

1. Run a dev build, open a chat.
2. Command Palette → Developer: Simulate Auto Model Selection Routing (Prototype).
3. Verify the collapsed card reads Routed to GPT-5 with a sparkle icon.
4. Expand the card and verify the header + intent chip, the metadata chips (Confidence / latency / Cost), and the ranked candidate list with grey bar graphs render — with GPT-5 highlighted as the selected model and each candidate's reason shown as a muted subtitle directly beneath its name.

Original prompt

you know how we show this cool expandable thing for tool calls and thinking and file changes and stuff. i want to see what it would look like to apply this same styling to this new concept for auto model routing in vscode, where there is an intelligently sepected model in auto instead of how its selected today. I'd love to somehow prototpye this within a vscode chat, wher i can trigger a command and somehow see this rendered in the chat UI? with the info in the black screenshot, but rendered as we would in vscode, similar to the white screenshot when it's not expanded. This is jsut a test to seee how it would work, so it can be behind a dev command. use vscode styling but show the info in the black screenshot that says copilot auto model selection routing

The user has attached the following file paths as relevant context:

• .github/copilot-instructions.md
• AGENTS.md

Created from VS Code.

[eli-w-king]

@copilot this doesn't look great but it works as expected. can we make it look a bit more like the origional desgin but more vscode. the image with the colors is the ogigional design. we can include grey bar graphs maybe? idk

[Copilot]

@copilot this doesn't look great but it works as expected. can we make it look a bit more like the origional desgin but more vscode. the image with the colors is the ogigional design. we can include g...

Reworked the expanded view in 699a7be — header + intent chip, a one‑line reason, small chips for confidence/latency/cost, and a unified ranked list with grey horizontal bar graphs (selected model highlighted with a check + accent bar, other candidates in muted grey). All colors come from VS Code theme tokens (badge-background, scrollbarSlider-background, progressBar-background, list-hoverBackground, charts-green) so it adapts to any theme.

Static preview of the new look (dark theme):

[eli-w-king]

@copilot also the two column reason styling could be better.

[Copilot]

@copilot also the two column reason styling could be better.

Restructured the candidate row in c501642 — the reason is no longer a second row spanning under the bar/score columns. It now sits as a muted subtitle directly under the model name in a single left-hand column, with the bar and score aligned vertically on the right. Italic styling dropped.

[Copilot]

Pull request overview

Adds a prototype “Auto Model Routing” collapsible chat content part (behind a Developer command) to preview how an auto model selection decision could be surfaced in the VS Code chat UI.

Changes:

• Introduces new progress/content kind autoModelRouting (IChatAutoModelRoutingPart) and threads it through chat model/history/serialization handling.
• Adds a new ChatAutoModelRoutingContentPart renderer and wires it into chatListRenderer.
• Adds a Developer command to inject a sample routing card into the focused chat session.

Show a summary per file

File	Description
src/vs/workbench/contrib/chat/common/model/chatSessionOperationLog.ts	Treats autoModelRouting as a static response-part kind for mutation logging.
src/vs/workbench/contrib/chat/common/model/chatModel.ts	Adds IChatAutoModelRoutingPart to history content union and ignores it in partsToRepr.
src/vs/workbench/contrib/chat/common/chatService/chatService.ts	Defines IChatAutoModelRoutingPart + related types; adds to IChatProgress.
src/vs/workbench/contrib/chat/browser/widget/chatListRenderer.ts	Dispatches autoModelRouting to a new content-part renderer.
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatAutoModelRoutingContentPart.css	Styles for the new routing collapsible card.
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatAutoModelRoutingContentPart.ts	Implements the collapsible routing card renderer.
src/vs/workbench/contrib/chat/browser/actions/chatDeveloperActions.ts	Adds a Developer command that injects a sample autoModelRouting part into chat.

Copilot's findings

Comments suppressed due to low confidence (2)

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatAutoModelRoutingContentPart.ts:94

• hasSameContent only compares candidate modelNames and ignores score/reason. If the routing details update (e.g. scores change or reasons change), this method can incorrectly return true and prevent the UI from re-rendering. Include the relevant candidate fields in the equality check (or use a shallow/deep compare of the candidate objects).

		const a = this.routingPart.candidates ?? [];
		const b = other.candidates ?? [];
		if (a.length !== b.length) {
			return false;
		}
		for (let i = 0; i < a.length; i++) {
			if (a[i].modelName !== b[i].modelName) {
				return false;
			}
		}

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatAutoModelRoutingContentPart.ts:56

• The Learn more link opens a new tab/window via target="_blank" but doesn’t set rel="noopener noreferrer". This allows the opened page to access window.opener and can be a security issue. Add the appropriate rel attributes (or avoid target=_blank and route through the opener service).

		const learnMore = $('a.chat-auto-model-routing-learn-more', { href: 'https://aka.ms/copilot-auto-model', target: '_blank' },
			localize('autoModelRouting.learnMore', "Learn more"));

• Files reviewed: 7/7 changed files
• Comments generated: 4

[Copilot]

There are two consecutive JSDoc blocks here; the first one (“A progress part representing the execution result of a hook…”) is now detached from IChatHookPart and will no longer document the hook type. Merge/move that comment so it sits immediately above export interface IChatHookPart, and keep only one doc block at this location.

[Copilot]

IChatAutoModelRoutingPart carries fields like selectionReason, intent, confidence, costTier, and candidates, but the renderer currently only shows a generic footer + capabilities list and never surfaces those fields. This doesn’t match the PR description/UI goals and makes the injected sample data mostly unused; either render the additional fields (reason/intent/metadata/candidate ranking) or trim the part shape/sample to what is actually displayed.

This issue also appears in the following locations of the same file:

• line 55
• line 85

[Copilot]

The injected chat markdown strings ("Routing your request through Copilot Auto…", "Done — using …") are user-visible but not localized. Please wrap these in localize(...) (or otherwise externalize them) even though the command is Developer-only, to keep the codebase’s localization guarantees consistent.

[Copilot]

CSS has a stray color: declaration and an extra closing } after .chat-auto-model-routing-score-row, which makes the stylesheet invalid and can cause the remaining rules to be ignored by the CSS parser. Remove the dangling property/brace so subsequent selectors (e.g. -score-name, -score-pct) apply reliably.

Suggested change

	color: var(--vscode-descriptionForeground);
	}