@prometheus-ai/agent 0.5.3 → 0.5.8

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

@@ -1,20 +1,37 @@
-import { getOAuthProviders } from "@prometheus-ai/ai/utils/oauth";
-import type { OAuthProviderInfo } from "@prometheus-ai/ai/utils/oauth/types";
+import { getOAuthProviders } from "@prometheus-ai/ai/oauth";
+import type { OAuthProviderInfo } from "@prometheus-ai/ai/oauth/types";
 import {
 	Container,
 	extractPrintableText,
 	fuzzyFilter,
 	matchesKey,
 	ScrollView,
+	type SgrMouseEvent,
 	Spacer,
 	TruncatedText,
 } from "@prometheus-ai/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;
+
+/**
+ * Rendered lines before the provider rows: top border, spacer, title, spacer
+ * (must mirror the constructor's addChild order).
+ */
+const LIST_ROW_OFFSET = 4;
+
+/** 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.
  */
@@ -24,6 +41,10 @@ export class OAuthSelectorComponent extends Container {
 	#filteredProviders: OAuthProviderInfo[] = [];
 	#searchQuery = "";
 	#selectedIndex: number = 0;
+	#hoveredIndex: number | null = null;
+	/** First provider index of the visible ScrollView window (last #updateList). */
+	#scrollStart = 0;
+	#visibleCount = 0;
 	#mode: "login" | "logout";
 	#authStorage: AuthStorage;
 	#onSelectCallback: (providerId: string) => void;
@@ -146,20 +167,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.enabled} logged in`) + source;
 		}
-		return this.#hasSelectableAuth(providerId) ? theme.fg("success", ` ${theme.status.success} logged in`) : "";
+		return this.#hasSelectableAuth(providerId)
+			? theme.fg("success", ` ${theme.status.enabled} logged in`) + source
+			: "";
 	}
 
 	#isSearchEnabled(): boolean {
@@ -178,8 +213,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";
@@ -226,6 +263,8 @@ export class OAuthSelectorComponent extends Container {
 				? 0
 				: Math.max(0, Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
 		const endIndex = Math.min(startIndex + maxVisible, total);
+		this.#scrollStart = startIndex;
+		this.#visibleCount = endIndex - startIndex;
 
 		const rows: string[] = [];
 		for (let i = startIndex; i < endIndex; i++) {
@@ -244,6 +283,9 @@ export class OAuthSelectorComponent extends Container {
 				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
 				line = text + statusIndicator;
 			}
+			if (!isSelected && i === this.#hoveredIndex) {
+				line = theme.bg("selectedBg", line);
+			}
 			rows.push(line);
 		}
 
@@ -328,15 +370,59 @@ export class OAuthSelectorComponent extends Container {
 		}
 		// Enter
 		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selectedProvider = this.#filteredProviders[this.#selectedIndex];
-			if (selectedProvider?.available) {
-				this.#statusMessage = undefined;
-				this.stopValidation();
-				this.#onSelectCallback(selectedProvider.id);
-			} else if (selectedProvider) {
-				this.#statusMessage = "Provider unavailable in this environment.";
+			this.#confirmSelection();
+		}
+	}
+
+	/** Confirm the selected provider (Enter or mouse click). */
+	#confirmSelection(): void {
+		const selectedProvider = this.#filteredProviders[this.#selectedIndex];
+		if (selectedProvider?.available) {
+			this.#statusMessage = undefined;
+			this.stopValidation();
+			this.#onSelectCallback(selectedProvider.id);
+		} else if (selectedProvider) {
+			this.#statusMessage = "Provider unavailable in this environment.";
+			this.#updateList();
+		}
+	}
+
+	/** Move the selection one step for a wheel notch (clamped, no wrap). */
+	handleWheel(delta: -1 | 1): void {
+		if (this.#filteredProviders.length === 0) return;
+		const next = Math.max(0, Math.min(this.#selectedIndex + delta, this.#filteredProviders.length - 1));
+		if (next === this.#selectedIndex) return;
+		this.#selectedIndex = next;
+		this.#statusMessage = undefined;
+		this.#updateList();
+	}
+
+	/**
+	 * Route an SGR mouse report at component-local coordinates. Provider rows
+	 * start LIST_ROW_OFFSET lines into the render; the ScrollView window shows
+	 * #visibleCount rows from #scrollStart. Wheel moves the selection, motion
+	 * drives the hover band, and a left click selects and confirms like Enter.
+	 */
+	routeMouse(event: SgrMouseEvent, line: number, _col: number): void {
+		if (event.wheel !== null) {
+			this.handleWheel(event.wheel);
+			return;
+		}
+		const localRow = line - LIST_ROW_OFFSET;
+		const index = localRow >= 0 && localRow < this.#visibleCount ? this.#scrollStart + localRow : undefined;
+		const target = index !== undefined && index < this.#filteredProviders.length ? index : null;
+		if (event.motion) {
+			if (target !== this.#hoveredIndex) {
+				this.#hoveredIndex = target;
 				this.#updateList();
 			}
+			return;
+		}
+		if (!event.leftClick || target === null) return;
+		if (target !== this.#selectedIndex) {
+			this.#selectedIndex = target;
+			this.#statusMessage = undefined;
 		}
+		this.#confirmSelection();
 	}
 }

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 "@prometheus-ai/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}`;
+}