@linxiraos/pi-tui 1.1.4 → 1.1.6

package/src/components/composer/types.ts

@@ -12,7 +12,16 @@ import type { SymbolTheme } from "../../symbols";
 export type ComposerBox = SymbolTheme["boxRound"];
 
 /** Built-in composer shape identifiers shipped by pi-tui. */
-export const BUILTIN_EDITOR_BORDER_STYLES = ["box", "claude", "pi", "borderless", "rule", "field", "rail"] as const;
+export const BUILTIN_EDITOR_BORDER_STYLES = [
+	"box",
+	"band",
+	"claude",
+	"pi",
+	"borderless",
+	"rule",
+	"field",
+	"rail",
+] as const;
 
 /** Identifier for a built-in composer shape. */
 export type BuiltinEditorBorderStyle = (typeof BUILTIN_EDITOR_BORDER_STYLES)[number];
@@ -74,8 +83,8 @@ export interface ComposerStyle {
 	/** Rows consumed by top+bottom chrome (drives maxHeight budgeting). */
 	readonly verticalChrome: 0 | 1 | 2;
 	/** Where the host should attach the status bar: embedded in the top border,
-	 * docked onto a top rule, or detached into a standalone bottom bar. */
-	readonly statusAttachment: "top-border" | "top-rule-chip" | "none";
+	 * rendered as a flush soft-capped band above the input, docked onto a top rule, or detached into a standalone bottom bar. */
+	readonly statusAttachment: "top-border" | "top-band" | "top-rule-chip" | "none";
 	/** Which segment groups the standalone bottom status bar shows. */
 	readonly bottomBar: "none" | "left" | "full";
 	/** Insert a blank spacer row between the editor and the standalone bottom

package/src/components/editor.ts

@@ -595,6 +595,34 @@ export class Editor implements Component, Focusable {
 		this.#theme = theme;
 		this.borderColor = theme.borderColor;
 	}
+	/** Return bounded editor content, cursor, and transient child state for debug inspection. */
+	debugState(): Record<string, unknown> {
+		const lines = this.#state.lines;
+		let textLength = Math.max(0, lines.length - 1);
+		let textPreview = "";
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i] ?? "";
+			textLength += line.length;
+			if (textPreview.length >= 120) continue;
+			if (i > 0) textPreview += "\n";
+			textPreview += line.slice(0, 120 - textPreview.length);
+		}
+		return {
+			textPreview,
+			textLength,
+			previewTruncated: textLength > 120,
+			cursorLine: this.#state.cursorLine,
+			cursorCol: this.#state.cursorCol,
+			lineCount: lines.length,
+			selection: null,
+			placeholderActive: false,
+		};
+	}
+
+	/** Expose the active autocomplete list to the debug tree walker. */
+	get debugChildren(): readonly Component[] {
+		return this.#autocompleteList ? [this.#autocompleteList] : [];
+	}
 
 	setTheme(theme: EditorTheme): void {
 		this.#theme = theme;
@@ -1375,11 +1403,17 @@ export class Editor implements Component, Focusable {
 				this.#cancelAutocomplete(true);
 				return;
 			}
+			// Right arrow at end of line accepts the selection like Tab (fish-style).
+			// Mid-line, right arrow keeps its cursor-movement role and falls through.
+			const rightArrowAccepts =
+				kb.matchesCanonical(canonical, "tui.editor.cursorRight") &&
+				this.#state.cursorCol >= (this.#state.lines[this.#state.cursorLine] ?? "").length;
 			if (
 				this.#autocompleteState === "assist" &&
 				(kb.matchesCanonical(canonical, "tui.input.submit") ||
 					data === "\n" ||
-					kb.matchesCanonical(canonical, "tui.input.tab"))
+					kb.matchesCanonical(canonical, "tui.input.tab") ||
+					rightArrowAccepts)
 			) {
 				this.#applySpellingSuggestion();
 				return;
@@ -1392,7 +1426,8 @@ export class Editor implements Component, Focusable {
 				kb.matchesCanonical(canonical, "tui.select.pageDown") ||
 				kb.matchesCanonical(canonical, "tui.input.submit") ||
 				data === "\n" ||
-				kb.matchesCanonical(canonical, "tui.input.tab")
+				kb.matchesCanonical(canonical, "tui.input.tab") ||
+				rightArrowAccepts
 			) {
 				// Only pass navigation keys to the list, not Enter/Tab (we handle those directly)
 				if (
@@ -1407,7 +1442,7 @@ export class Editor implements Component, Focusable {
 				}
 
 				// If Tab was pressed, always apply the selection
-				if (kb.matchesCanonical(canonical, "tui.input.tab")) {
+				if (kb.matchesCanonical(canonical, "tui.input.tab") || rightArrowAccepts) {
 					const selected = this.#autocompleteList.getSelectedItem();
 					// Check for stale autocomplete state due to buffer edits since last refresh
 					// (destructive keys or paste can outrun the debounced update).
@@ -1703,6 +1738,13 @@ export class Editor implements Component, Focusable {
 			}
 		} else if (kb.matchesCanonical(canonical, "tui.editor.cursorRight")) {
 			// Right
+			// At end of line, accept the inline ghost word completion (IME-style) like Tab.
+			if (
+				this.#state.cursorCol >= (this.#state.lines[this.#state.cursorLine] ?? "").length &&
+				this.#acceptWordCompletion()
+			) {
+				return;
+			}
 			this.#moveCursor(0, 1);
 		} else if (kb.matchesCanonical(canonical, "tui.editor.cursorLeft")) {
 			// Left
@@ -3407,13 +3449,7 @@ export class Editor implements Component, Focusable {
 	}
 
 	async #handleTabCompletion(): Promise<void> {
-		const wordCompletion = this.#getWordCompletion();
-		if (wordCompletion) {
-			const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
-			const after = currentLine.slice(this.#state.cursorCol);
-			this.#insertTextAtCursor(wordCompletion + (/^[\s.,;:!?"\])}]/.test(after) ? "" : " "));
-			return;
-		}
+		if (this.#acceptWordCompletion()) return;
 		if (!this.#autocompleteProvider) return;
 
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
@@ -3430,6 +3466,16 @@ export class Editor implements Component, Focusable {
 			await this.#forceFileAutocomplete();
 		}
 	}
+	/** Insert the inline ghost word completion at the cursor, if any. Shared by Tab and right-arrow accept. */
+	#acceptWordCompletion(): boolean {
+		const wordCompletion = this.#getWordCompletion();
+		if (!wordCompletion) return false;
+		const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
+		const after = currentLine.slice(this.#state.cursorCol);
+		this.#insertTextAtCursor(wordCompletion + (/^[\s.,;:!?"\])}]/.test(after) ? "" : " "));
+		return true;
+	}
+
 	async #showSpellingSuggestions(): Promise<void> {
 		const cursorLine = this.#state.cursorLine;
 		const cursorCol = this.#state.cursorCol;

package/src/components/image.ts

@@ -505,6 +505,17 @@ export class Image implements Component {
 		this.#budget = options.budget;
 		this.#imageId = options.budget ? options.budget.acquireId(options.imageKey) : undefined;
 	}
+	/** Return source metadata without exposing the encoded image buffer. */
+	debugState(): Record<string, unknown> {
+		return {
+			mimeType: this.#mimeType,
+			widthPx: this.#dimensions.widthPx,
+			heightPx: this.#dimensions.heightPx,
+			filename: this.#options.filename ?? null,
+			imageId: this.#imageId ?? null,
+			suppressed: this.#cachedSuppressed,
+		};
+	}
 
 	invalidate(): void {
 		this.#cachedLines = undefined;

package/src/components/input.ts

@@ -51,6 +51,19 @@ export class Input implements Component, Focusable {
 	getValue(): string {
 		return this.#value;
 	}
+	/** Return bounded input content and cursor state for debug inspection. */
+	debugState(): Record<string, unknown> {
+		return {
+			textPreview: this.#value.slice(0, 120),
+			textLength: this.#value.length,
+			previewTruncated: this.#value.length > 120,
+			cursor: this.#cursor,
+			cursorLine: 0,
+			selection: null,
+			placeholderActive: false,
+			masked: this.mask,
+		};
+	}
 
 	setValue(value: string): void {
 		this.#value = value;

package/src/components/loader.ts

@@ -1,10 +1,12 @@
 import type { TUI } from "../tui";
-import { getPaddingX, sliceByColumn, visibleWidth } from "../utils";
+import { getPaddingX, padding, sliceByColumn, visibleWidth } from "../utils";
 import { Text } from "./text";
 
 const RENDER_INTERVAL_MS = 1000 / 30;
-const SPINNER_ADVANCE_MS = 80;
+/** Milliseconds between spinner-frame advances; exported so time-derived spinners elsewhere tick at the Loader cadence. */
+export const SPINNER_ADVANCE_MS = 80;
 const RENDER_BACKPRESSURE_MULTIPLIER = 9;
+const MAX_BACKPRESSURE_FRAME_COST_MS = 200;
 
 type ColorFn = (str: string) => string;
 
@@ -27,12 +29,13 @@ export class Loader extends Text {
 	#layout?: readonly { leading: string; content: string; trailing: string }[];
 	#layoutFrames: readonly string[];
 	#layoutFrame: string;
+	#trailer?: () => string | undefined;
 
 	constructor(
 		ui: TUI,
 		private spinnerColorFn: ColorFn,
 		private messageColorFn: LoaderMessageColorFn,
-		private message: string = "Loading...",
+		private message: string | (() => string) = "Loading...",
 		spinnerFrames?: string[],
 	) {
 		super("", 1, 0);
@@ -53,6 +56,16 @@ export class Loader extends Text {
 		this.#layoutFrame = this.#layoutFrames[0];
 		this.start();
 	}
+	/** Return the current message and animation state for debug inspection. */
+	override debugState(): Record<string, unknown> {
+		const message = this.#resolveMessage();
+		return {
+			message: message.slice(0, 120),
+			messageLength: message.length,
+			running: this.#intervalId !== undefined,
+			frame: this.#currentFrame,
+		};
+	}
 
 	override render(width: number): readonly string[] {
 		const source = super.render(width);
@@ -91,6 +104,15 @@ export class Loader extends Text {
 				lines.push(`${leading}${content ? this.messageColorFn(content) : ""}${trailing}`);
 			}
 		}
+		if (this.#trailer && lines.length > 1) {
+			const trailer = this.#trailer();
+			if (trailer) {
+				// Text pads rows to full width; drop that pad before docking right.
+				const body = lines[1].trimEnd();
+				const gap = width - visibleWidth(body) - visibleWidth(trailer);
+				if (gap >= 2) lines[1] = body + padding(gap) + trailer;
+			}
+		}
 		return lines;
 	}
 
@@ -113,6 +135,12 @@ export class Loader extends Text {
 	dispose() {
 		this.stop();
 	}
+	/** Install a lazy right-docked suffix for the spinner row (e.g. a styled
+	 * session title). Re-evaluated every paint; dropped when the row leaves
+	 * less than a two-cell gap. */
+	setTrailer(trailer: (() => string | undefined) | undefined): void {
+		this.#trailer = trailer;
+	}
 
 	setMessage(message: string) {
 		if (message === this.message) {
@@ -139,21 +167,33 @@ export class Loader extends Text {
 				this.#requestPaint();
 			}
 
-			const frameCostMs = performance.now() - startedAt;
+			const completedFrameCostMs = this.#ui?.lastFrameCostMs ?? 0;
+			const requestCostMs = performance.now() - startedAt;
 			if (this.#intervalId !== timer) return;
-			const cadenceDelayMs = Math.max(0, intervalMs - frameCostMs);
-			// Idle for nine times the paint cost to keep animation at or below
-			// 10% CPU, even when a slow ConPTY write exceeds the normal cadence.
-			const backpressureDelayMs = frameCostMs * RENDER_BACKPRESSURE_MULTIPLIER;
+			const cadenceDelayMs = Math.max(0, intervalMs - requestCostMs);
+			// Idle for nine times the full frame cost to keep animation at or
+			// below 10% CPU even though requestComponentRender() only enqueues.
+			const boundedFrameCostMs = Math.min(
+				MAX_BACKPRESSURE_FRAME_COST_MS,
+				Math.max(completedFrameCostMs, requestCostMs),
+			);
+			const backpressureDelayMs = boundedFrameCostMs * RENDER_BACKPRESSURE_MULTIPLIER;
 			this.#scheduleTick(intervalMs, Math.max(cadenceDelayMs, backpressureDelayMs));
 		}, delayMs);
 		this.#intervalId = timer;
 	}
-	/** Re-wrap the underlying Text only when its message or frame width changes. */
+	#resolveMessage(): string {
+		return typeof this.message === "function" ? this.message() : this.message;
+	}
+
+	/** Re-wrap the underlying Text only when its message or frame width changes.
+	 * When {@link message} is a function it is re-evaluated on every spinner
+	 * tick, so a dynamic label (e.g. a live countdown) advances in sync with
+	 * the glyph instead of freezing on the initial value. */
 	#syncText(): boolean {
 		const layoutFrame = this.#layoutFrames[this.#currentFrame];
 		this.#layoutFrame = layoutFrame;
-		return this.setText(`${layoutFrame} ${this.message}`);
+		return this.setText(`${layoutFrame} ${this.#resolveMessage()}`);
 	}
 
 	#requestPaint() {