@tuan_son.dinh/gsd 2.6.3 → 2.7.0

package/packages/pi-coding-agent/src/modes/interactive/components/extension-selector.ts

@@ -0,0 +1,107 @@
+/**
+ * Generic selector component for extensions.
+ * Displays a list of string options with keyboard navigation.
+ */
+
+import { Container, getEditorKeybindings, Spacer, Text, type TUI } from "@gsd/pi-tui";
+import { theme } from "../theme/theme.js";
+import { CountdownTimer } from "./countdown-timer.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint, rawKeyHint } from "./keybinding-hints.js";
+
+export interface ExtensionSelectorOptions {
+	tui?: TUI;
+	timeout?: number;
+}
+
+export class ExtensionSelectorComponent extends Container {
+	private options: string[];
+	private selectedIndex = 0;
+	private listContainer: Container;
+	private onSelectCallback: (option: string) => void;
+	private onCancelCallback: () => void;
+	private titleText: Text;
+	private baseTitle: string;
+	private countdown: CountdownTimer | undefined;
+
+	constructor(
+		title: string,
+		options: string[],
+		onSelect: (option: string) => void,
+		onCancel: () => void,
+		opts?: ExtensionSelectorOptions,
+	) {
+		super();
+
+		this.options = options;
+		this.onSelectCallback = onSelect;
+		this.onCancelCallback = onCancel;
+		this.baseTitle = title;
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+
+		this.titleText = new Text(theme.fg("accent", title), 1, 0);
+		this.addChild(this.titleText);
+		this.addChild(new Spacer(1));
+
+		if (opts?.timeout && opts.timeout > 0 && opts.tui) {
+			this.countdown = new CountdownTimer(
+				opts.timeout,
+				opts.tui,
+				(s) => this.titleText.setText(theme.fg("accent", `${this.baseTitle} (${s}s)`)),
+				() => this.onCancelCallback(),
+			);
+		}
+
+		this.listContainer = new Container();
+		this.addChild(this.listContainer);
+		this.addChild(new Spacer(1));
+		this.addChild(
+			new Text(
+				rawKeyHint("↑↓", "navigate") +
+					"  " +
+					keyHint("selectConfirm", "select") +
+					"  " +
+					keyHint("selectCancel", "cancel"),
+				1,
+				0,
+			),
+		);
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		this.updateList();
+	}
+
+	private updateList(): void {
+		this.listContainer.clear();
+		for (let i = 0; i < this.options.length; i++) {
+			const isSelected = i === this.selectedIndex;
+			const text = isSelected
+				? theme.fg("accent", "→ ") + theme.fg("accent", this.options[i])
+				: `  ${theme.fg("text", this.options[i])}`;
+			this.listContainer.addChild(new Text(text, 1, 0));
+		}
+	}
+
+	handleInput(keyData: string): void {
+		const kb = getEditorKeybindings();
+		if (kb.matches(keyData, "selectUp") || keyData === "k") {
+			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+			this.updateList();
+		} else if (kb.matches(keyData, "selectDown") || keyData === "j") {
+			this.selectedIndex = Math.min(this.options.length - 1, this.selectedIndex + 1);
+			this.updateList();
+		} else if (kb.matches(keyData, "selectConfirm") || keyData === "\n") {
+			const selected = this.options[this.selectedIndex];
+			if (selected) this.onSelectCallback(selected);
+		} else if (kb.matches(keyData, "selectCancel")) {
+			this.onCancelCallback();
+		}
+	}
+
+	dispose(): void {
+		this.countdown?.dispose();
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/components/footer.ts

@@ -0,0 +1,216 @@
+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";
+
+/**
+ * Sanitize text for display in a single-line status.
+ * Removes newlines, tabs, carriage returns, and other control characters.
+ */
+function sanitizeStatusText(text: string): string {
+	// Replace newlines, tabs, carriage returns with space, then collapse multiple spaces
+	return text
+		.replace(/[\r\n\t]/g, " ")
+		.replace(/ +/g, " ")
+		.trim();
+}
+
+/**
+ * Format token counts (similar to web-ui)
+ */
+function formatTokens(count: number): string {
+	if (count < 1000) return count.toString();
+	if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
+	if (count < 1000000) return `${Math.round(count / 1000)}k`;
+	if (count < 10000000) return `${(count / 1000000).toFixed(1)}M`;
+	return `${Math.round(count / 1000000)}M`;
+}
+
+/**
+ * Footer component that shows pwd, token stats, and context usage.
+ * Computes token/context stats from session, gets git branch and extension statuses from provider.
+ */
+export class FooterComponent implements Component {
+	private autoCompactEnabled = true;
+
+	constructor(
+		private session: AgentSession,
+		private footerData: ReadonlyFooterDataProvider,
+	) {}
+
+	setAutoCompactEnabled(enabled: boolean): void {
+		this.autoCompactEnabled = enabled;
+	}
+
+	/**
+	 * No-op: git branch caching now handled by provider.
+	 * Kept for compatibility with existing call sites in interactive-mode.
+	 */
+	invalidate(): void {
+		// No-op: git branch is cached/invalidated by provider
+	}
+
+	/**
+	 * Clean up resources.
+	 * Git watcher cleanup now handled by provider.
+	 */
+	dispose(): void {
+		// Git watcher cleanup handled by provider
+	}
+
+	render(width: number): string[] {
+		const state = this.session.state;
+
+		// Calculate cumulative usage from ALL session entries (not just post-compaction messages)
+		let totalInput = 0;
+		let totalOutput = 0;
+		let totalCacheRead = 0;
+		let totalCacheWrite = 0;
+		let totalCost = 0;
+
+		for (const entry of this.session.sessionManager.getEntries()) {
+			if (entry.type === "message" && entry.message.role === "assistant") {
+				totalInput += entry.message.usage.input;
+				totalOutput += entry.message.usage.output;
+				totalCacheRead += entry.message.usage.cacheRead;
+				totalCacheWrite += entry.message.usage.cacheWrite;
+				totalCost += entry.message.usage.cost.total;
+			}
+		}
+
+		// Calculate context usage from session (handles compaction correctly).
+		// After compaction, tokens are unknown until the next LLM response.
+		const contextUsage = this.session.getContextUsage();
+		const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
+		const contextPercentValue = contextUsage?.percent ?? 0;
+		const contextPercent = contextUsage?.percent !== null ? contextPercentValue.toFixed(1) : "?";
+
+		// Replace home directory with ~
+		let pwd = process.cwd();
+		const home = process.env.HOME || process.env.USERPROFILE;
+		if (home && pwd.startsWith(home)) {
+			pwd = `~${pwd.slice(home.length)}`;
+		}
+
+		// Add git branch if available
+		const branch = this.footerData.getGitBranch();
+		if (branch) {
+			pwd = `${pwd} (${branch})`;
+		}
+
+		// Add session name if set
+		const sessionName = this.session.sessionManager.getSessionName();
+		if (sessionName) {
+			pwd = `${pwd} • ${sessionName}`;
+		}
+
+		// Build stats line
+		const statsParts = [];
+		if (totalInput) statsParts.push(`↑${formatTokens(totalInput)}`);
+		if (totalOutput) statsParts.push(`↓${formatTokens(totalOutput)}`);
+		if (totalCacheRead) statsParts.push(`R${formatTokens(totalCacheRead)}`);
+		if (totalCacheWrite) statsParts.push(`W${formatTokens(totalCacheWrite)}`);
+
+		// Show cost with "(sub)" indicator if using OAuth subscription
+		const usingSubscription = state.model ? this.session.modelRegistry.isUsingOAuth(state.model) : false;
+		if (totalCost || usingSubscription) {
+			const costStr = `$${totalCost.toFixed(3)}${usingSubscription ? " (sub)" : ""}`;
+			statsParts.push(costStr);
+		}
+
+		// Colorize context percentage based on usage
+		let contextPercentStr: string;
+		const autoIndicator = this.autoCompactEnabled ? " (auto)" : "";
+		const contextPercentDisplay =
+			contextPercent === "?"
+				? `?/${formatTokens(contextWindow)}${autoIndicator}`
+				: `${contextPercent}%/${formatTokens(contextWindow)}${autoIndicator}`;
+		if (contextPercentValue > 90) {
+			contextPercentStr = theme.fg("error", contextPercentDisplay);
+		} else if (contextPercentValue > 70) {
+			contextPercentStr = theme.fg("warning", contextPercentDisplay);
+		} else {
+			contextPercentStr = contextPercentDisplay;
+		}
+		statsParts.push(contextPercentStr);
+
+		let statsLeft = statsParts.join(" ");
+
+		// Add model name on the right side, plus thinking level if model supports it
+		const modelName = state.model?.id || "no-model";
+
+		let statsLeftWidth = visibleWidth(statsLeft);
+
+		// If statsLeft is too wide, truncate it
+		if (statsLeftWidth > width) {
+			statsLeft = truncateToWidth(statsLeft, width, "...");
+			statsLeftWidth = visibleWidth(statsLeft);
+		}
+
+		// Calculate available space for padding (minimum 2 spaces between stats and model)
+		const minPadding = 2;
+
+		// Add thinking level indicator if model supports reasoning
+		let rightSideWithoutProvider = modelName;
+		if (state.model?.reasoning) {
+			const thinkingLevel = state.thinkingLevel || "off";
+			rightSideWithoutProvider =
+				thinkingLevel === "off" ? `${modelName} • thinking off` : `${modelName} • ${thinkingLevel}`;
+		}
+
+		// Prepend the provider in parentheses if there are multiple providers and there's enough room
+		let rightSide = rightSideWithoutProvider;
+		if (this.footerData.getAvailableProviderCount() > 1 && state.model) {
+			rightSide = `(${state.model!.provider}) ${rightSideWithoutProvider}`;
+			if (statsLeftWidth + minPadding + visibleWidth(rightSide) > width) {
+				// Too wide, fall back
+				rightSide = rightSideWithoutProvider;
+			}
+		}
+
+		const rightSideWidth = visibleWidth(rightSide);
+		const totalNeeded = statsLeftWidth + minPadding + rightSideWidth;
+
+		let statsLine: string;
+		if (totalNeeded <= width) {
+			// Both fit - add padding to right-align model
+			const padding = " ".repeat(width - statsLeftWidth - rightSideWidth);
+			statsLine = statsLeft + padding + rightSide;
+		} else {
+			// Need to truncate right side
+			const availableForRight = width - statsLeftWidth - minPadding;
+			if (availableForRight > 0) {
+				const truncatedRight = truncateToWidth(rightSide, availableForRight, "");
+				const truncatedRightWidth = visibleWidth(truncatedRight);
+				const padding = " ".repeat(Math.max(0, width - statsLeftWidth - truncatedRightWidth));
+				statsLine = statsLeft + padding + truncatedRight;
+			} else {
+				// Not enough space for right side at all
+				statsLine = statsLeft;
+			}
+		}
+
+		// Apply dim to each part separately. statsLeft may contain color codes (for context %)
+		// that end with a reset, which would clear an outer dim wrapper. So we dim the parts
+		// before and after the colored section independently.
+		const dimStatsLeft = theme.fg("dim", statsLeft);
+		const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
+		const dimRemainder = theme.fg("dim", remainder);
+
+		const pwdLine = truncateToWidth(theme.fg("dim", pwd), width, theme.fg("dim", "..."));
+		const lines = [pwdLine, dimStatsLeft + dimRemainder];
+
+		// Add extension statuses on a single line, sorted by key alphabetically
+		const extensionStatuses = this.footerData.getExtensionStatuses();
+		if (extensionStatuses.size > 0) {
+			const sortedStatuses = Array.from(extensionStatuses.entries())
+				.sort(([a], [b]) => a.localeCompare(b))
+				.map(([, text]) => sanitizeStatusText(text));
+			const statusLine = sortedStatuses.join(" ");
+			// Truncate to terminal width with dim ellipsis for consistency with footer style
+			lines.push(truncateToWidth(statusLine, width, theme.fg("dim", "...")));
+		}
+
+		return lines;
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/components/index.ts

@@ -0,0 +1,32 @@
+// UI Components for extensions
+export { ArminComponent } from "./armin.js";
+export { AssistantMessageComponent } from "./assistant-message.js";
+export { BashExecutionComponent } from "./bash-execution.js";
+export { BorderedLoader } from "./bordered-loader.js";
+export { BranchSummaryMessageComponent } from "./branch-summary-message.js";
+export { CompactionSummaryMessageComponent } from "./compaction-summary-message.js";
+export { CustomEditor } from "./custom-editor.js";
+export { CustomMessageComponent } from "./custom-message.js";
+export { DaxnutsComponent } from "./daxnuts.js";
+export { type RenderDiffOptions, renderDiff } from "./diff.js";
+export { DynamicBorder } from "./dynamic-border.js";
+export { ExtensionEditorComponent } from "./extension-editor.js";
+export { ExtensionInputComponent } from "./extension-input.js";
+export { ExtensionSelectorComponent } from "./extension-selector.js";
+export { FooterComponent } from "./footer.js";
+export { appKey, appKeyHint, editorKey, keyHint, rawKeyHint } from "./keybinding-hints.js";
+export { LoginDialogComponent } from "./login-dialog.js";
+export { ModelSelectorComponent } from "./model-selector.js";
+export { OAuthSelectorComponent } from "./oauth-selector.js";
+export { type ModelsCallbacks, type ModelsConfig, ScopedModelsSelectorComponent } from "./scoped-models-selector.js";
+export { SessionSelectorComponent } from "./session-selector.js";
+export { type SettingsCallbacks, type SettingsConfig, SettingsSelectorComponent } from "./settings-selector.js";
+export { ShowImagesSelectorComponent } from "./show-images-selector.js";
+export { SkillInvocationMessageComponent } from "./skill-invocation-message.js";
+export { ThemeSelectorComponent } from "./theme-selector.js";
+export { ThinkingSelectorComponent } from "./thinking-selector.js";
+export { ToolExecutionComponent, type ToolExecutionOptions } from "./tool-execution.js";
+export { TreeSelectorComponent } from "./tree-selector.js";
+export { UserMessageComponent } from "./user-message.js";
+export { UserMessageSelectorComponent } from "./user-message-selector.js";
+export { truncateToVisualLines, type VisualTruncateResult } from "./visual-truncate.js";

package/packages/pi-coding-agent/src/modes/interactive/components/keybinding-hints.ts

@@ -0,0 +1,66 @@
+/**
+ * Utilities for formatting keybinding hints in the UI.
+ */
+
+import { type EditorAction, getEditorKeybindings, type KeyId } from "@gsd/pi-tui";
+import type { AppAction, KeybindingsManager } from "../../../core/keybindings.js";
+import { theme } from "../theme/theme.js";
+
+/**
+ * Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").
+ */
+function formatKeys(keys: KeyId[]): string {
+	if (keys.length === 0) return "";
+	if (keys.length === 1) return keys[0]!;
+	return keys.join("/");
+}
+
+/**
+ * Get display string for an editor action.
+ */
+export function editorKey(action: EditorAction): string {
+	return formatKeys(getEditorKeybindings().getKeys(action));
+}
+
+/**
+ * Get display string for an app action.
+ */
+export function appKey(keybindings: KeybindingsManager, action: AppAction): string {
+	return formatKeys(keybindings.getKeys(action));
+}
+
+/**
+ * Format a keybinding hint with consistent styling: dim key, muted description.
+ * Looks up the key from editor keybindings automatically.
+ *
+ * @param action - Editor action name (e.g., "selectConfirm", "expandTools")
+ * @param description - Description text (e.g., "to expand", "cancel")
+ * @returns Formatted string with dim key and muted description
+ */
+export function keyHint(action: EditorAction, description: string): string {
+	return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a keybinding hint for app-level actions.
+ * Requires the KeybindingsManager instance.
+ *
+ * @param keybindings - KeybindingsManager instance
+ * @param action - App action name (e.g., "interrupt", "externalEditor")
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function appKeyHint(keybindings: KeybindingsManager, action: AppAction, description: string): string {
+	return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a raw key string with description (for non-configurable keys like ↑↓).
+ *
+ * @param key - Raw key string
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function rawKeyHint(key: string, description: string): string {
+	return theme.fg("dim", key) + theme.fg("muted", ` ${description}`);
+}

package/packages/pi-coding-agent/src/modes/interactive/components/login-dialog.ts

@@ -0,0 +1,174 @@
+import { getOAuthProviders } from "@gsd/pi-ai/oauth";
+import { Container, type Focusable, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@gsd/pi-tui";
+import { exec } from "child_process";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint } from "./keybinding-hints.js";
+
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export class LoginDialogComponent extends Container implements Focusable {
+	private contentContainer: Container;
+	private input: Input;
+	private tui: TUI;
+	private abortController = new AbortController();
+	private inputResolver?: (value: string) => void;
+	private inputRejecter?: (error: Error) => void;
+
+	// Focusable implementation - propagate to input for IME cursor positioning
+	private _focused = false;
+	get focused(): boolean {
+		return this._focused;
+	}
+	set focused(value: boolean) {
+		this._focused = value;
+		this.input.focused = value;
+	}
+
+	constructor(
+		tui: TUI,
+		providerId: string,
+		private onComplete: (success: boolean, message?: string) => void,
+	) {
+		super();
+		this.tui = tui;
+
+		const providerInfo = getOAuthProviders().find((p) => p.id === providerId);
+		const providerName = providerInfo?.name || providerId;
+
+		// Top border
+		this.addChild(new DynamicBorder());
+
+		// Title
+		this.addChild(new Text(theme.fg("warning", `Login to ${providerName}`), 1, 0));
+
+		// Dynamic content area
+		this.contentContainer = new Container();
+		this.addChild(this.contentContainer);
+
+		// Input (always present, used when needed)
+		this.input = new Input();
+		this.input.onSubmit = () => {
+			if (this.inputResolver) {
+				this.inputResolver(this.input.getValue());
+				this.inputResolver = undefined;
+				this.inputRejecter = undefined;
+			}
+		};
+		this.input.onEscape = () => {
+			this.cancel();
+		};
+
+		// Bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	get signal(): AbortSignal {
+		return this.abortController.signal;
+	}
+
+	private cancel(): void {
+		this.abortController.abort();
+		if (this.inputRejecter) {
+			this.inputRejecter(new Error("Login cancelled"));
+			this.inputResolver = undefined;
+			this.inputRejecter = undefined;
+		}
+		this.onComplete(false, "Login cancelled");
+	}
+
+	/**
+	 * Called by onAuth callback - show URL and optional instructions
+	 */
+	showAuth(url: string, instructions?: string): void {
+		this.contentContainer.clear();
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("accent", url), 1, 0));
+
+		const clickHint = process.platform === "darwin" ? "Cmd+click to open" : "Ctrl+click to open";
+		const hyperlink = `\x1b]8;;${url}\x07${clickHint}\x1b]8;;\x07`;
+		this.contentContainer.addChild(new Text(theme.fg("dim", hyperlink), 1, 0));
+
+		if (instructions) {
+			this.contentContainer.addChild(new Spacer(1));
+			this.contentContainer.addChild(new Text(theme.fg("warning", instructions), 1, 0));
+		}
+
+		// Try to open browser
+		const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+		exec(`${openCmd} "${url}"`);
+
+		this.tui.requestRender();
+	}
+
+	/**
+	 * Show input for manual code/URL entry (for callback server providers)
+	 */
+	showManualInput(prompt: string): Promise<string> {
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("dim", prompt), 1, 0));
+		this.contentContainer.addChild(this.input);
+		this.contentContainer.addChild(new Text(`(${keyHint("selectCancel", "to cancel")})`, 1, 0));
+		this.tui.requestRender();
+
+		return new Promise((resolve, reject) => {
+			this.inputResolver = resolve;
+			this.inputRejecter = reject;
+		});
+	}
+
+	/**
+	 * Called by onPrompt callback - show prompt and wait for input
+	 * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+	 */
+	showPrompt(message: string, placeholder?: string): Promise<string> {
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("text", message), 1, 0));
+		if (placeholder) {
+			this.contentContainer.addChild(new Text(theme.fg("dim", `e.g., ${placeholder}`), 1, 0));
+		}
+		this.contentContainer.addChild(this.input);
+		this.contentContainer.addChild(
+			new Text(`(${keyHint("selectCancel", "to cancel,")} ${keyHint("selectConfirm", "to submit")})`, 1, 0),
+		);
+
+		this.input.setValue("");
+		this.tui.requestRender();
+
+		return new Promise((resolve, reject) => {
+			this.inputResolver = resolve;
+			this.inputRejecter = reject;
+		});
+	}
+
+	/**
+	 * Show waiting message (for polling flows like GitHub Copilot)
+	 */
+	showWaiting(message: string): void {
+		this.contentContainer.addChild(new Spacer(1));
+		this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.contentContainer.addChild(new Text(`(${keyHint("selectCancel", "to cancel")})`, 1, 0));
+		this.tui.requestRender();
+	}
+
+	/**
+	 * Called by onProgress callback
+	 */
+	showProgress(message: string): void {
+		this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.tui.requestRender();
+	}
+
+	handleInput(data: string): void {
+		const kb = getEditorKeybindings();
+
+		if (kb.matches(data, "selectCancel")) {
+			this.cancel();
+			return;
+		}
+
+		// Pass to input
+		this.input.handleInput(data);
+	}
+}