From 61e33519c492af39190292699dc24579bb4fb899 Mon Sep 17 00:00:00 2001 From: Jeremy Date: Wed, 8 Apr 2026 14:07:22 -0500 Subject: [PATCH] fix(ui): display 'anthropic-api' in model selector to distinguish from claude-code Helps users understand that 'anthropic-api' makes direct API calls (requires API key / extra usage) while 'claude-code' routes through the local CLI (uses subscription). --- .../modes/interactive/components/model-selector.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/pi-coding-agent/src/modes/interactive/components/model-selector.ts b/packages/pi-coding-agent/src/modes/interactive/components/model-selector.ts index c86347b6f..078f6eb86 100644 --- a/packages/pi-coding-agent/src/modes/interactive/components/model-selector.ts +++ b/packages/pi-coding-agent/src/modes/interactive/components/model-selector.ts @@ -15,6 +15,15 @@ import { theme } from "../theme/theme.js"; import { DynamicBorder } from "./dynamic-border.js"; import { keyHint } from "./keybinding-hints.js"; +/** Display names for providers in the model selector UI. */ +const PROVIDER_DISPLAY_NAMES: Record = { + anthropic: "anthropic-api", +}; + +function providerDisplayName(provider: string): string { + return PROVIDER_DISPLAY_NAMES[provider] ?? provider; +} + function formatTokenCount(count: number): string { if (count >= 1_000_000) { const millions = count / 1_000_000; @@ -391,7 +400,7 @@ export class ModelSelectorComponent extends Container implements Focusable { const ctx = formatTokenCount(item.model.contextWindow); const ctxBadge = theme.fg("muted", `${ctx}`); - const providerBadge = theme.fg("muted", `[${item.provider}]`); + const providerBadge = theme.fg("muted", `[${providerDisplayName(item.provider)}]`); const checkmark = isCurrent ? theme.fg("success", " ✓") : ""; let line: string; @@ -447,7 +456,7 @@ export class ModelSelectorComponent extends Container implements Focusable { if (row.kind === "header") { // Provider group header — always unselectable - const providerLabel = theme.fg("borderAccent", row.provider); + const providerLabel = theme.fg("borderAccent", providerDisplayName(row.provider)); const count = theme.fg("muted", ` (${row.count})`); // Add blank line before header if not the very first visible row if (i > startIndex) {