@oh-my-pi/pi-coding-agent 15.10.0 → 15.10.2

package/src/modes/components/model-selector.ts

@@ -17,7 +17,7 @@ import {
 import { formatNumber } from "@oh-my-pi/pi-utils";
 import type { ModelRegistry } from "../../config/model-registry";
 import { getKnownRoleIds, getRoleInfo, MODEL_ROLE_IDS, MODEL_ROLES } from "../../config/model-registry";
-import { resolveModelRoleValue } from "../../config/model-resolver";
+import { getModelMatchPreferences, resolveModelRoleValue } from "../../config/model-resolver";
 import type { Settings } from "../../config/settings";
 import { type ThemeColor, theme } from "../../modes/theme/theme";
 import { matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
@@ -31,6 +31,25 @@ function makeInvertedBadge(label: string, color: ThemeColor): string {
 	return `${bgAnsi}\x1b[30m ${label} \x1b[39m\x1b[49m`;
 }
 
+function makeAutoSelectedBadge(label: string, color: ThemeColor): string {
+	return `${theme.fg("dim", "[")}${theme.fg(color, label)}${theme.fg("dim", " auto]")}`;
+}
+
+function makeRoleBadgeToken(label: string, color: ThemeColor, assigned: RoleAssignment): string {
+	if (assigned.autoSelected) {
+		const badge = makeAutoSelectedBadge(label, color);
+		if (assigned.thinkingLevel === ThinkingLevel.Inherit) {
+			return badge;
+		}
+		const thinkingLabel = getConfiguredThinkingLevelMetadata(assigned.thinkingLevel).label;
+		return `${badge} ${theme.fg("dim", `(${thinkingLabel})`)}`;
+	}
+
+	const badge = makeInvertedBadge(label, color);
+	const thinkingLabel = getConfiguredThinkingLevelMetadata(assigned.thinkingLevel).label;
+	return `${badge} ${theme.fg("dim", `(${thinkingLabel})`)}`;
+}
+
 function normalizeSearchText(value: string): string {
 	return value
 		.toLowerCase()
@@ -86,6 +105,7 @@ interface ScopedModelItem {
 interface RoleAssignment {
 	model: Model;
 	thinkingLevel: ConfiguredThinkingLevel;
+	autoSelected: boolean;
 }
 
 type RoleSelectCallback = (
@@ -271,12 +291,17 @@ export class ModelSelectorComponent extends Container {
 		});
 	}
 
-	#loadRoleModels(): void {
+	#loadRoleModels(autoCandidateModels?: ReadonlyArray<Model>): void {
+		const nextRoles = {} as Record<string, RoleAssignment | undefined>;
 		const allModels = this.#modelRegistry.getAll();
-		const matchPreferences = { usageOrder: this.#settings.getStorage()?.getModelUsageOrder() };
-		for (const role of getKnownRoleIds(this.#settings)) {
+		const matchPreferences = getModelMatchPreferences(this.#settings);
+		const knownRoles = getKnownRoleIds(this.#settings);
+		const configuredRoles = new Set<string>();
+
+		for (const role of knownRoles) {
 			const roleValue = this.#settings.getModelRole(role);
 			if (!roleValue) continue;
+			configuredRoles.add(role);
 
 			const resolved = resolveModelRoleValue(roleValue, allModels, {
 				settings: this.#settings,
@@ -284,15 +309,39 @@ export class ModelSelectorComponent extends Container {
 				modelRegistry: this.#modelRegistry,
 			});
 			if (resolved.model) {
-				this.#roles[role] = {
+				nextRoles[role] = {
 					model: resolved.model,
 					thinkingLevel:
 						resolved.explicitThinkingLevel && resolved.thinkingLevel !== undefined
 							? resolved.thinkingLevel
 							: ThinkingLevel.Inherit,
+					autoSelected: false,
 				};
 			}
 		}
+
+		if (autoCandidateModels && autoCandidateModels.length > 0) {
+			const candidates = [...autoCandidateModels];
+			for (const role of knownRoles) {
+				if (configuredRoles.has(role)) continue;
+				const resolved = resolveModelRoleValue(`pi/${role}`, candidates, {
+					settings: this.#settings,
+					matchPreferences,
+					modelRegistry: this.#modelRegistry,
+				});
+				if (!resolved.model) continue;
+				nextRoles[role] = {
+					model: resolved.model,
+					thinkingLevel:
+						resolved.explicitThinkingLevel && resolved.thinkingLevel !== undefined
+							? resolved.thinkingLevel
+							: ThinkingLevel.Inherit,
+					autoSelected: true,
+				};
+			}
+		}
+
+		this.#roles = nextRoles;
 	}
 
 	/**
@@ -427,6 +476,7 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		const candidates = models.map(item => item.model);
+		this.#loadRoleModels(candidates);
 		const canonicalRecords = this.#modelRegistry.getCanonicalModels({
 			availableOnly: this.#scopedModels.length === 0,
 			candidates,
@@ -871,25 +921,21 @@ export class ModelSelectorComponent extends Container {
 			const isDisabled = this.#isItemDisabled(item);
 			const disabledSuffix = this.#formatContextLimitSuffix(item.model);
 
-			// Build role badges (inverted: color as background, black text)
+			// Build role badges. Solid badges are configured; outlined badges are auto-selected defaults.
 			const roleBadgeTokens: string[] = [];
 			for (const role of MODEL_ROLE_IDS) {
 				const { tag, color } = getRoleInfo(role, this.#settings);
 				const assigned = this.#roles[role];
 				if (!tag || !assigned || !modelsAreEqual(assigned.model, item.model)) continue;
 
-				const badge = makeInvertedBadge(tag, color ?? "success");
-				const thinkingLabel = getConfiguredThinkingLevelMetadata(assigned.thinkingLevel).label;
-				roleBadgeTokens.push(`${badge} ${theme.fg("dim", `(${thinkingLabel})`)}`);
+				roleBadgeTokens.push(makeRoleBadgeToken(tag, color ?? "success", assigned));
 			}
 			// Custom role badges
 			for (const [role, assigned] of Object.entries(this.#roles)) {
 				if (role in MODEL_ROLES || !assigned || !modelsAreEqual(assigned.model, item.model)) continue;
 				const roleInfo = getRoleInfo(role, this.#settings);
 				const badgeLabel = roleInfo.tag ?? roleInfo.name;
-				const badge = makeInvertedBadge(badgeLabel, roleInfo.color ?? "muted");
-				const thinkingLabel = getConfiguredThinkingLevelMetadata(assigned.thinkingLevel).label;
-				roleBadgeTokens.push(`${badge} ${theme.fg("dim", `(${thinkingLabel})`)}`);
+				roleBadgeTokens.push(makeRoleBadgeToken(badgeLabel, roleInfo.color ?? "muted", assigned));
 			}
 			const badgeText = roleBadgeTokens.length > 0 ? ` ${roleBadgeTokens.join(" ")}` : "";
 
@@ -1184,7 +1230,7 @@ export class ModelSelectorComponent extends Container {
 		const selectedThinkingLevel = thinkingLevel ?? this.#getCurrentRoleThinkingLevel(role);
 
 		// Update local state for UI
-		this.#roles[role] = { model: item.model, thinkingLevel: selectedThinkingLevel };
+		this.#roles[role] = { model: item.model, thinkingLevel: selectedThinkingLevel, autoSelected: false };
 
 		// Notify caller (for updating agent state if needed)
 		this.#onSelectCallback(item.model, role, selectedThinkingLevel, item.selector);

package/src/modes/components/oauth-selector.ts

@@ -11,10 +11,20 @@ import {
 } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
-import type { AuthStorage } from "../../session/auth-storage";
+import type { AuthStorage, CredentialOriginKind } from "../../session/auth-storage";
 import { DynamicBorder } from "./dynamic-border";
 
 const OAUTH_SELECTOR_MAX_VISIBLE = 10;
+
+/** Compact, human-readable tag for each credential-origin leg. */
+const ORIGIN_LABELS: Record<CredentialOriginKind, string> = {
+	runtime: "--api-key",
+	config: "config",
+	oauth: "login",
+	api_key: "api key",
+	env: "env",
+	fallback: "custom provider",
+};
 /**
  * Component that renders an OAuth provider selector.
  */
@@ -146,20 +156,34 @@ export class OAuthSelectorComponent extends Container {
 		}
 	}
 
+	/**
+	 * Muted provenance suffix (" (env: COPILOT_GITHUB_TOKEN)", " (login)", …) so
+	 * the list distinguishes a real login from an env var aliasing the provider.
+	 */
+	#getSourceLabel(providerId: string): string {
+		const origin = this.#authStorage.getCredentialOrigin(providerId);
+		if (!origin) return "";
+		const detail = origin.kind === "env" && origin.envVar ? `env: ${origin.envVar}` : ORIGIN_LABELS[origin.kind];
+		return theme.fg("muted", ` (${detail})`);
+	}
+
 	#getStatusIndicator(providerId: string): string {
 		const state = this.#authState.get(providerId);
+		const source = this.#getSourceLabel(providerId);
 		if (state === "checking") {
 			const frameCount = theme.spinnerFrames.length;
 			const spinner = frameCount > 0 ? theme.spinnerFrames[this.#spinnerFrame % frameCount] : theme.status.pending;
-			return theme.fg("warning", ` ${spinner} checking`);
+			return theme.fg("warning", ` ${spinner} checking`) + source;
 		}
 		if (state === "invalid") {
-			return theme.fg("error", ` ${theme.status.error} invalid`);
+			return theme.fg("error", ` ${theme.status.error} invalid`) + source;
 		}
 		if (state === "valid") {
-			return theme.fg("success", ` ${theme.status.success} logged in`);
+			return theme.fg("success", ` ${theme.status.success} logged in`) + source;
 		}
-		return this.#hasSelectableAuth(providerId) ? theme.fg("success", ` ${theme.status.success} logged in`) : "";
+		return this.#hasSelectableAuth(providerId)
+			? theme.fg("success", ` ${theme.status.success} logged in`) + source
+			: "";
 	}
 
 	#isSearchEnabled(): boolean {
@@ -178,8 +202,10 @@ export class OAuthSelectorComponent extends Container {
 
 	#getProviderSearchText(provider: OAuthProviderInfo): string {
 		let text = `${provider.name} ${provider.id}`;
-		if (this.#hasSelectableAuth(provider.id)) {
-			text += " logged in authenticated";
+		const origin = this.#authStorage.getCredentialOrigin(provider.id);
+		if (origin) {
+			text += ` logged in authenticated ${ORIGIN_LABELS[origin.kind]}`;
+			if (origin.envVar) text += ` ${origin.envVar}`;
 		}
 		if (!provider.available) {
 			text += " unavailable";

package/src/modes/components/overlay-box.ts

@@ -0,0 +1,108 @@
+/**
+ * Shared box-drawing chrome for fullscreen overlays (the `/copy` picker, the
+ * plan-review overlay, …). Every helper paints with `theme.boxSharp` glyphs and
+ * the `border`/`accent` theme colors so all outlined overlays read identically.
+ */
+import { padding, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+
+/** Pad or truncate a (possibly ANSI-styled) string to exactly `width` columns. */
+export function fit(text: string, width: number): string {
+	if (width <= 0) return "";
+	const w = visibleWidth(text);
+	if (w === width) return text;
+	if (w < width) return text + padding(width - w);
+	const cut = truncateToWidth(text, width);
+	const cw = visibleWidth(cut);
+	return cw < width ? cut + padding(width - cw) : cut;
+}
+
+function paint(s: string): string {
+	return theme.fg("border", s);
+}
+
+/** Top border with an optional accent-colored title inset into the rule. */
+export function topBorder(width: number, title: string): string {
+	const box = theme.boxSharp;
+	const inner = Math.max(0, width - 2);
+	if (!title) return paint(box.topLeft + box.horizontal.repeat(inner) + box.topRight);
+	const shown = truncateToWidth(` ${title} `, Math.max(0, inner - 2));
+	const fillWidth = Math.max(0, inner - 1 - visibleWidth(shown));
+	return (
+		paint(box.topLeft + box.horizontal) +
+		theme.bold(theme.fg("accent", shown)) +
+		paint(box.horizontal.repeat(fillWidth) + box.topRight)
+	);
+}
+
+/** A horizontal rule with left/right tees, splitting overlay sections. */
+export function divider(width: number): string {
+	const box = theme.boxSharp;
+	return paint(box.teeRight + box.horizontal.repeat(Math.max(0, width - 2)) + box.teeLeft);
+}
+
+export function bottomBorder(width: number): string {
+	const box = theme.boxSharp;
+	return paint(box.bottomLeft + box.horizontal.repeat(Math.max(0, width - 2)) + box.bottomRight);
+}
+
+/** Wrap pre-styled content in vertical borders with single-column insets. */
+export function row(content: string, width: number): string {
+	const box = theme.boxSharp;
+	return `${paint(box.vertical)} ${fit(content, Math.max(0, width - 4))} ${paint(box.vertical)}`;
+}
+
+/**
+ * Column index (0-based) of the inner divider for a two-column layout whose
+ * sidebar content area is `sidebarWidth` columns wide. The layout is
+ * `│ sidebar │ body │` with a single-column inset on every side, so the divider
+ * vertical sits at `sidebarWidth + 3` and the body content area is
+ * {@link splitBodyWidth} columns.
+ */
+function splitDividerCol(sidebarWidth: number): number {
+	return sidebarWidth + 3;
+}
+
+/** Body content width for a two-column overlay of total `width`. */
+export function splitBodyWidth(width: number, sidebarWidth: number): number {
+	return Math.max(0, width - sidebarWidth - 7);
+}
+
+/** Top border carrying the title, split by a `┬` over the column divider. */
+export function topBorderSplit(width: number, title: string, sidebarWidth: number): string {
+	const box = theme.boxSharp;
+	const dividerCol = splitDividerCol(sidebarWidth);
+	const leftLen = Math.max(0, dividerCol - 1);
+	const rightLen = Math.max(0, width - 2 - dividerCol);
+	let left: string;
+	if (!title) {
+		left = paint(box.topLeft + box.horizontal.repeat(leftLen));
+	} else {
+		const shown = truncateToWidth(` ${title} `, Math.max(0, leftLen - 1));
+		const fillWidth = Math.max(0, leftLen - 1 - visibleWidth(shown));
+		left =
+			paint(box.topLeft + box.horizontal) +
+			theme.bold(theme.fg("accent", shown)) +
+			paint(box.horizontal.repeat(fillWidth));
+	}
+	return left + paint(box.teeDown + box.horizontal.repeat(rightLen) + box.topRight);
+}
+
+/** Section rule that closes the sidebar column with a `┴` over the divider. */
+export function dividerSplit(width: number, sidebarWidth: number): string {
+	const box = theme.boxSharp;
+	const dividerCol = splitDividerCol(sidebarWidth);
+	const leftLen = Math.max(0, dividerCol - 1);
+	const rightLen = Math.max(0, width - 2 - dividerCol);
+	return paint(
+		box.teeRight + box.horizontal.repeat(leftLen) + box.teeUp + box.horizontal.repeat(rightLen) + box.teeLeft,
+	);
+}
+
+/** A two-column content row: `│ sidebar │ body │`, each inset by one column. */
+export function splitRow(sidebar: string, body: string, width: number, sidebarWidth: number): string {
+	const box = theme.boxSharp;
+	const bodyWidth = splitBodyWidth(width, sidebarWidth);
+	const bar = paint(box.vertical);
+	return `${bar} ${fit(sidebar, sidebarWidth)} ${bar} ${fit(body, bodyWidth)} ${bar}`;
+}