From a835b3383909d963d4ab2f2543f3931e9daa61cf Mon Sep 17 00:00:00 2001 From: Jeremy Date: Wed, 8 Apr 2026 17:35:40 -0500 Subject: [PATCH] fix(ui): apply anthropic-api display name to all model/provider UI surfaces Updates scoped model selector, footer bar, provider manager, and /model autocomplete to use providerDisplayName() consistently. --- .../src/modes/interactive/components/footer.ts | 3 ++- .../src/modes/interactive/components/provider-manager.ts | 3 ++- .../modes/interactive/components/scoped-models-selector.ts | 3 ++- .../pi-coding-agent/src/modes/interactive/interactive-mode.ts | 4 ++-- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/pi-coding-agent/src/modes/interactive/components/footer.ts b/packages/pi-coding-agent/src/modes/interactive/components/footer.ts index c0cdeab01..3b28c0003 100644 --- a/packages/pi-coding-agent/src/modes/interactive/components/footer.ts +++ b/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; diff --git a/packages/pi-coding-agent/src/modes/interactive/components/provider-manager.ts b/packages/pi-coding-agent/src/modes/interactive/components/provider-manager.ts index 4d45fa725..aac53ad80 100644 --- a/packages/pi-coding-agent/src/modes/interactive/components/provider-manager.ts +++ b/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); diff --git a/packages/pi-coding-agent/src/modes/interactive/components/scoped-models-selector.ts b/packages/pi-coding-agent/src/modes/interactive/components/scoped-models-selector.ts index 20354d0d3..2e1c9e41e 100644 --- a/packages/pi-coding-agent/src/modes/interactive/components/scoped-models-selector.ts +++ b/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)); } diff --git a/packages/pi-coding-agent/src/modes/interactive/interactive-mode.ts b/packages/pi-coding-agent/src/modes/interactive/interactive-mode.ts index 80255d8de..0fa37ca4b 100644 --- a/packages/pi-coding-agent/src/modes/interactive/interactive-mode.ts +++ b/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), })); }; }