pi-open-tui 0.3.3 → 0.3.4

package/extensions/open-tui/editor.ts

@@ -1,6 +1,6 @@
-import {
-	CustomEditor,
-	type ExtensionAPI,
+import {
+	CustomEditor,
+	type ExtensionAPI,
 	type ExtensionContext,
 	type KeybindingsManager,
 } from "@earendil-works/pi-coding-agent";
@@ -23,40 +23,45 @@ const CURSOR_STYLE_SEQUENCES: Partial<Record<CursorStyle, string>> = {
 	bar: "\x1b[6 q",
 	underline: "\x1b[4 q",
 };
-const DEFAULT_CURSOR_STYLE_SEQUENCE = "\x1b[0 q";
-
-interface HiddenThinkingLabelComponent {
-	children: unknown[];
-	setHiddenThinkingLabel(label: string): void;
-	setHideThinkingBlock(hide: boolean): void;
-	updateContent(message: unknown, isStreaming?: boolean): void;
-}
-
-function isHiddenThinkingLabelComponent(value: object): value is HiddenThinkingLabelComponent {
-	const component = value as unknown as Record<string, unknown>;
-	return Array.isArray(component.children)
-		&& typeof component.setHiddenThinkingLabel === "function"
-		&& typeof component.setHideThinkingBlock === "function"
-		&& typeof component.updateContent === "function";
-}
-
-/** Ponytail until Pi exposes a per-message hidden-thinking label API. */
-function findLatestHiddenThinkingLabel(tui: TUI): HiddenThinkingLabelComponent {
-	const pending: unknown[] = [tui];
-	const visited = new Set<object>();
-	let latest: HiddenThinkingLabelComponent | undefined;
-	while (pending.length > 0) {
-		const value = pending.pop();
-		if (!value || typeof value !== "object" || visited.has(value)) continue;
-		visited.add(value);
-		if (isHiddenThinkingLabelComponent(value)) latest = value;
-		const children = (value as { children?: unknown }).children;
-		if (!Array.isArray(children)) continue;
-		for (let i = children.length - 1; i >= 0; i--) pending.push(children[i]);
-	}
-	if (!latest) throw new Error("Unable to find the active hidden-thinking component");
-	return latest;
-}
+const DEFAULT_CURSOR_STYLE_SEQUENCE = "\x1b[0 q";
+
+interface WorkingStatusIndicator {
+	renderInBorder(width: number): string;
+	renderSpinnerInBorder(width: number): string;
+}
+
+interface HiddenThinkingLabelComponent {
+	children: unknown[];
+	setHiddenThinkingLabel(label: string): void;
+	setHideThinkingBlock(hide: boolean): void;
+	updateContent(message: unknown, isStreaming?: boolean): void;
+}
+
+function isHiddenThinkingLabelComponent(value: object): value is HiddenThinkingLabelComponent {
+	const component = value as unknown as Record<string, unknown>;
+	return Array.isArray(component.children)
+		&& typeof component.setHiddenThinkingLabel === "function"
+		&& typeof component.setHideThinkingBlock === "function"
+		&& typeof component.updateContent === "function";
+}
+
+/** Ponytail until Pi exposes a per-message hidden-thinking label API. */
+function findLatestHiddenThinkingLabel(tui: TUI): HiddenThinkingLabelComponent {
+	const pending: unknown[] = [tui];
+	const visited = new Set<object>();
+	let latest: HiddenThinkingLabelComponent | undefined;
+	while (pending.length > 0) {
+		const value = pending.pop();
+		if (!value || typeof value !== "object" || visited.has(value)) continue;
+		visited.add(value);
+		if (isHiddenThinkingLabelComponent(value)) latest = value;
+		const children = (value as { children?: unknown }).children;
+		if (!Array.isArray(children)) continue;
+		for (let i = children.length - 1; i >= 0; i--) pending.push(children[i]);
+	}
+	if (!latest) throw new Error("Unable to find the active hidden-thinking component");
+	return latest;
+}
 
 function removeSoftwareCursor(line: string, cursorMarker = ""): string {
 	return line.replace(/\x1b\[7m([\s\S]*?)\x1b\[0m/g, (_match, cursor: string) => {
@@ -78,10 +83,42 @@ function roundedBorder(
 	kind: "top" | "bottom",
 	paint: (s: string) => string,
 	sourceLine?: string,
+	indicator?: WorkingStatusIndicator,
 ): string {
 	if (width < 2) return paint(truncateToWidth(kind === "top" ? "╭╮" : "╰╯", width, ""));
 	const corners = kind === "top" ? (["╭", "╮"] as const) : (["╰", "╯"] as const);
 
+	if (kind === "top" && indicator) {
+		const plain = sourceLine ? stripAnsi(sourceLine) : "";
+		const scrollMatch = plain.match(/([↑↓]\s+\d+\s+more)/);
+		const contentWidth = width - 2;
+		let status = indicator.renderInBorder(Math.max(1, contentWidth - 5));
+		let statusWidth = visibleWidth(status);
+		if (statusWidth > 0) {
+			const overflowLabel = scrollMatch ? ` ${scrollMatch[1]} ` : undefined;
+			const overflowLabelWidth = overflowLabel ? visibleWidth(overflowLabel) : 0;
+			const overflowStart = Math.floor((contentWidth - overflowLabelWidth) / 2);
+			const canFitOverflow = () => overflowLabel !== undefined
+				&& overflowLabelWidth + 2 <= contentWidth
+				&& overflowStart - (3 + statusWidth + 1) >= 1;
+			if (overflowLabel && !canFitOverflow()) {
+				status = indicator.renderSpinnerInBorder(contentWidth);
+				statusWidth = visibleWidth(status);
+			}
+			if (canFitOverflow()) {
+				const leftBlockWidth = 3 + statusWidth + 1;
+				return `${corners[0]}${paint("── ")}${status}${paint(` ${"─".repeat(overflowStart - leftBlockWidth)}${overflowLabel}${"─".repeat(contentWidth - overflowStart - overflowLabelWidth)}`)}${corners[1]}`;
+			}
+			if (contentWidth >= statusWidth + 5) {
+				return `${corners[0]}${paint("── ")}${status}${paint(` ${"─".repeat(contentWidth - statusWidth - 4)}`)}${corners[1]}`;
+			}
+			status = indicator.renderSpinnerInBorder(contentWidth);
+			statusWidth = visibleWidth(status);
+			const prefixWidth = Math.min(3, Math.max(0, contentWidth - statusWidth));
+			return `${corners[0]}${paint("─".repeat(prefixWidth))}${status}${paint("─".repeat(Math.max(0, contentWidth - prefixWidth - statusWidth)))}${corners[1]}`;
+		}
+	}
+
 	if (sourceLine) {
 		const plain = stripAnsi(sourceLine);
 		const scrollMatch = plain.match(/([↑↓]\s+\d+\s+more)/);
@@ -96,8 +133,10 @@ function roundedBorder(
 }
 
 export class OpenTuiEditor extends CustomEditor {
+	readonly embedWorkingStatus = true;
 	private readonly getRail: () => string;
 	private readonly getBorder: (s: string) => string;
+	private embeddedWorkingStatusIndicator: WorkingStatusIndicator | undefined;
 	private cursorStyle: CursorStyle;
 	private previewHardwareCursor = false;
 
@@ -122,6 +161,11 @@ export class OpenTuiEditor extends CustomEditor {
 		super.setPaddingX(0);
 	}
 
+	setWorkingStatusIndicator(indicator: WorkingStatusIndicator | undefined): void {
+		this.embeddedWorkingStatusIndicator = indicator;
+		this.tui.requestRender();
+	}
+
 	setCursorStyle(cursorStyle: CursorStyle, blockHardwareCursor = false): void {
 		const styleChanged = cursorStyle !== this.cursorStyle;
 		this.previewHardwareCursor = cursorStyle !== "block";
@@ -163,7 +207,7 @@ export class OpenTuiEditor extends CustomEditor {
 		const bottomIdx = findBottomBorderIndex(baseLines);
 
 		const result: string[] = [];
-		result.push(roundedBorder(width, "top", borderPaint, baseLines[0]));
+		result.push(roundedBorder(width, "top", borderPaint, baseLines[0], this.embeddedWorkingStatusIndicator));
 
 		for (let i = 1; i < bottomIdx; i++) {
 			const line = baseLines[i] ?? "";
@@ -192,51 +236,51 @@ export function installEditor(
 ) {
 	let activeTui: TUI | undefined;
 	let activeEditor: OpenTuiEditor | undefined;
-	let previousHardwareCursor: boolean | undefined;
-	let currentCursorStyle = cursorStyle;
-	let currentWheelScrollLines = wheelScrollLines;
-	let hiddenThinkingTarget: HiddenThinkingLabelComponent | undefined;
-	const getActiveTui = (): TUI => {
-		if (!activeTui) throw new Error("Open TUI editor is not mounted");
-		return activeTui;
-	};
-
-	ctx.ui.setEditorComponent((tui, editorTheme, keybindings) => {
-		activeTui = tui;
-		hiddenThinkingTarget = undefined;
-		applyFullscreenWheelScrollLines(tui, currentWheelScrollLines);
+	let previousHardwareCursor: boolean | undefined;
+	let currentCursorStyle = cursorStyle;
+	let currentWheelScrollLines = wheelScrollLines;
+	let hiddenThinkingTarget: HiddenThinkingLabelComponent | undefined;
+	const getActiveTui = (): TUI => {
+		if (!activeTui) throw new Error("Open TUI editor is not mounted");
+		return activeTui;
+	};
+
+	ctx.ui.setEditorComponent((tui, editorTheme, keybindings) => {
+		activeTui = tui;
+		hiddenThinkingTarget = undefined;
+		applyFullscreenWheelScrollLines(tui, currentWheelScrollLines);
 		previousHardwareCursor = tui.getShowHardwareCursor();
 		activeEditor = new OpenTuiEditor(tui, editorTheme, keybindings, currentCursorStyle);
 		return activeEditor;
-	});
-	return {
-		getViewportWidth(): number {
-			const columns = getActiveTui().terminal.columns;
-			if (typeof columns !== "number" || !Number.isFinite(columns)) {
-				throw new Error("Open TUI editor terminal has an invalid width");
-			}
-			return Math.max(1, Math.floor(columns));
-		},
-		setLatestHiddenThinkingLabel(label: string): void {
-			const tui = getActiveTui();
-			hiddenThinkingTarget ??= findLatestHiddenThinkingLabel(tui);
-			hiddenThinkingTarget.setHiddenThinkingLabel(label);
-			tui.requestRender();
-		},
-		resetHiddenThinkingLabelTarget(): void {
-			hiddenThinkingTarget = undefined;
-		},
-		setCursorStyle(nextCursorStyle: CursorStyle): void {
-			currentCursorStyle = nextCursorStyle;
-			activeEditor?.setCursorStyle(nextCursorStyle, previousHardwareCursor);
+	});
+	return {
+		getViewportWidth(): number {
+			const columns = getActiveTui().terminal.columns;
+			if (typeof columns !== "number" || !Number.isFinite(columns)) {
+				throw new Error("Open TUI editor terminal has an invalid width");
+			}
+			return Math.max(1, Math.floor(columns));
+		},
+		setLatestHiddenThinkingLabel(label: string): void {
+			const tui = getActiveTui();
+			hiddenThinkingTarget ??= findLatestHiddenThinkingLabel(tui);
+			hiddenThinkingTarget.setHiddenThinkingLabel(label);
+			tui.requestRender();
+		},
+		resetHiddenThinkingLabelTarget(): void {
+			hiddenThinkingTarget = undefined;
+		},
+		setCursorStyle(nextCursorStyle: CursorStyle): void {
+			currentCursorStyle = nextCursorStyle;
+			activeEditor?.setCursorStyle(nextCursorStyle, previousHardwareCursor);
 		},
 		setWheelScrollLines(nextWheelScrollLines: number): void {
 			currentWheelScrollLines = nextWheelScrollLines;
 			if (activeTui) applyFullscreenWheelScrollLines(activeTui, currentWheelScrollLines);
 		},
-		cleanup(): void {
-			hiddenThinkingTarget = undefined;
-			ctx.ui.setEditorComponent(undefined);
+		cleanup(): void {
+			hiddenThinkingTarget = undefined;
+			ctx.ui.setEditorComponent(undefined);
 			if (activeTui) {
 				if (currentCursorStyle !== "block") activeTui.terminal.write(DEFAULT_CURSOR_STYLE_SEQUENCE);
 				if (previousHardwareCursor !== undefined) activeTui.setShowHardwareCursor(previousHardwareCursor);

package/extensions/open-tui/footer.ts

@@ -15,7 +15,6 @@ import {
 	formatCwd,
 	formatDuration,
 	formatInputBreakdown,
-	formatProviderLabel,
 	providerColor,
 	sanitizeStatus,
 	stressColor,

package/extensions/open-tui/state.ts

@@ -3,7 +3,7 @@ import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { GitStatus } from "./git.ts";
 import { emptyGitStatus } from "./git.ts";
 import type { RuntimeInfo } from "./runtime.ts";
-import { finiteOrZero, fmtTokens, formatProviderLabel } from "./utils.ts";
+import { finiteOrZero, formatProviderLabel } from "./utils.ts";
 
 export interface FooterState {
 	git: GitStatus;

package/extensions/open-tui/utils.ts

@@ -239,6 +239,7 @@ export function effortColor(level: ThinkingLevel | string | undefined): ThemeCol
 }
 
 export function isEditorBorderLine(line: string): boolean {
+	if (typeof line !== "string") return false;
 	const plain = stripAnsi(line);
 	if (/^─+$/.test(plain)) return true;
 	if (/^─*\s*[↑↓]\s+\d+\s+more\s*─*$/.test(plain)) return true;
@@ -247,7 +248,8 @@ export function isEditorBorderLine(line: string): boolean {
 
 export function findBottomBorderIndex(lines: string[]): number {
 	for (let i = lines.length - 1; i >= 1; i--) {
-		if (isEditorBorderLine(lines[i]!)) return i;
+		const line = lines[i];
+		if (line !== undefined && isEditorBorderLine(line)) return i;
 	}
 	return Math.max(0, lines.length - 1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-open-tui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A polished TUI for Pi coding agent: animated logo header, Starship-style footer, rounded editor with model metadata, and prompt-box user messages.",
   "type": "module",
   "repository": {