Merge pull request #3815 from jeremymcs/fix/anthropic-api-display-remaining

fix(ui): apply anthropic-api display name to all remaining UI surfaces

packages/pi-coding-agent/src/modes/interactive/components/__tests__/provider-display-name.test.ts

@@ -12,5 +12,7 @@ describe("providerDisplayName", () => {
 		assert.equal(providerDisplayName("claude-code"), "claude-code");
 		assert.equal(providerDisplayName("openai"), "openai");
 		assert.equal(providerDisplayName("bedrock"), "bedrock");
+		assert.equal(providerDisplayName("github-copilot"), "github-copilot");
+		assert.equal(providerDisplayName("openrouter"), "openrouter");
 	});
 });

packages/pi-coding-agent/src/modes/interactive/components/footer.ts

@@ -2,6 +2,7 @@ import { type Component, truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import type { AgentSession } from "../../../core/agent-session.js";
 import type { ReadonlyFooterDataProvider } from "../../../core/footer-data-provider.js";
 import { theme } from "../theme/theme.js";
+import { providerDisplayName } from "./model-selector.js";
 
 /**
  * Sanitize text for display in a single-line status.
@@ -189,7 +190,7 @@ export class FooterComponent implements Component {
 		// Prepend the provider in parentheses if there are multiple providers and there's enough room
 		let rightSide = rightSideWithoutProvider;
 		if (this.footerData.getAvailableProviderCount() > 1 && displayModel) {
-			rightSide = `(${displayModel.provider}) ${rightSideWithoutProvider}`;
+			rightSide = `(${providerDisplayName(displayModel.provider)}) ${rightSideWithoutProvider}`;
 			if (statsLeftWidth + minPadding + visibleWidth(rightSide) > width) {
 				// Too wide, fall back
 				rightSide = rightSideWithoutProvider;

packages/pi-coding-agent/src/modes/interactive/components/provider-manager.ts

@@ -13,6 +13,7 @@ import {
 } from "@gsd/pi-tui";
 import type { AuthStorage } from "../../../core/auth-storage.js";
 import { getDiscoverableProviders } from "../../../core/model-discovery.js";
+import { providerDisplayName } from "./model-selector.js";
 import type { ModelRegistry } from "../../../core/model-registry.js";
 import { ModelsJsonWriter } from "../../../core/models-json-writer.js";
 import { theme } from "../theme/theme.js";
@@ -149,7 +150,7 @@ export class ProviderManagerComponent extends Container implements Focusable {
 			const countBadge = theme.fg("muted", `(${p.modelCount} models)`);
 
 			const prefix = isSelected ? theme.fg("accent", "> ") : "  ";
-			const nameText = isSelected ? theme.fg("accent", p.name) : p.name;
+			const nameText = isSelected ? theme.fg("accent", providerDisplayName(p.name)) : providerDisplayName(p.name);
 
 			const parts = [prefix, nameText, " ", authBadge];
 			if (discoveryBadge) parts.push(" ", discoveryBadge);

packages/pi-coding-agent/src/modes/interactive/components/scoped-models-selector.ts

@@ -1,4 +1,5 @@
 import type { Model } from "@gsd/pi-ai";
+import { providerDisplayName } from "./model-selector.js";
 import {
 	Container,
 	type Focusable,
@@ -204,7 +205,7 @@ export class ScopedModelsSelectorComponent extends Container implements Focusabl
 			const isSelected = i === this.selectedIndex;
 			const prefix = isSelected ? theme.fg("accent", "→ ") : "  ";
 			const modelText = isSelected ? theme.fg("accent", item.model.id) : item.model.id;
-			const providerBadge = theme.fg("muted", ` [${item.model.provider}]`);
+			const providerBadge = theme.fg("muted", ` [${providerDisplayName(item.model.provider)}]`);
 			const status = allEnabled ? "" : item.enabled ? theme.fg("success", " ✓") : theme.fg("dim", " ✗");
 			this.listContainer.addChild(new Text(`${prefix}${modelText}${providerBadge}${status}`, 0, 0));
 		}

packages/pi-coding-agent/src/modes/interactive/interactive-mode.ts

@@ -79,7 +79,7 @@ import { ExtensionSelectorComponent } from "./components/extension-selector.js";
 import { FooterComponent } from "./components/footer.js";
 import { appKey, appKeyHint, editorKey, formatKeyForDisplay, keyHint, rawKeyHint } from "./components/keybinding-hints.js";
 import { LoginDialogComponent } from "./components/login-dialog.js";
-import { ModelSelectorComponent } from "./components/model-selector.js";
+import { ModelSelectorComponent, providerDisplayName } from "./components/model-selector.js";
 import { OAuthSelectorComponent } from "./components/oauth-selector.js";
 import { ProviderManagerComponent } from "./components/provider-manager.js";
 import { ScopedModelsSelectorComponent } from "./components/scoped-models-selector.js";
@@ -338,7 +338,7 @@ export class InteractiveMode {
 				return filtered.map((item) => ({
 					value: item.label,
 					label: item.id,
-					description: item.provider,
+					description: providerDisplayName(item.provider),
 				}));
 			};
 		}

src/resources/extensions/gsd/commands-prefs-wizard.ts

@@ -277,10 +277,17 @@ async function configureModels(ctx: ExtensionCommandContext, prefs: Record<strin
       group.sort((a, b) => a.id.localeCompare(b.id));
     }
 
-    // Build provider menu with model counts
+    // Display names for providers in the preferences wizard UI.
+    const PROVIDER_DISPLAY_NAMES: Record<string, string> = { anthropic: "anthropic-api" };
+    const displayName = (p: string) => PROVIDER_DISPLAY_NAMES[p] ?? p;
+
+    // Build provider menu with model counts (display name → real name lookup)
+    const displayToReal = new Map<string, string>();
     const providerOptions = providers.map(p => {
       const count = byProvider.get(p)!.length;
-      return `${p} (${count} models)`;
+      const label = `${displayName(p)} (${count} models)`;
+      displayToReal.set(label, p);
+      return label;
     });
     providerOptions.push("(keep current)", "(clear)", "(type manually)");
 
@@ -310,14 +317,14 @@ async function configureModels(ctx: ExtensionCommandContext, prefs: Record<strin
       }
 
       // Step 2: pick model within provider
-      const providerName = providerChoice.replace(/ \(\d+ models?\)$/, "");
+      const providerName = displayToReal.get(providerChoice) ?? providerChoice.replace(/ \(\d+ models?\)$/, "");
       const group = byProvider.get(providerName);
       if (!group) continue;
 
       const modelOptions = group.map(m => m.id);
       modelOptions.push("(keep current)", "(clear)");
 
-      const modelChoice = await ctx.ui.select(`${phaseLabel} — ${providerName}:`, modelOptions);
+      const modelChoice = await ctx.ui.select(`${phaseLabel} — ${displayName(providerName)}:`, modelOptions);
       if (modelChoice && typeof modelChoice === "string" && modelChoice !== "(keep current)") {
         if (modelChoice === "(clear)") {
           delete models[phase];