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.
This commit is contained in:
Jeremy 2026-04-08 17:35:40 -05:00
parent 55cde8549a
commit a835b33839
4 changed files with 8 additions and 5 deletions

View file

@ -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;

View file

@ -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);

View file

@ -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));
}

View file

@ -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),
}));
};
}