@linxiraos/pi-tui 1.1.26 → 1.2.0

package/src/overlays/history-search.ts

@@ -65,6 +65,13 @@ const PICKER_KEY = "picker";
 /** Visible result rows; also the jump distance for PageUp/PageDown. */
 const MAX_VISIBLE = 10;
 
+/**
+ * Quiet period after the last query edit before the synchronous storage
+ * search runs. Only applied when the host wires {@link HistorySearchComponent.setOnRequestRender},
+ * since the deferred results need a repaint to show up.
+ */
+const SEARCH_DEBOUNCE_MS = 100;
+
 /** Split a query the same way `HistorySource` tokenizes it, so highlights align with matches. */
 function queryTokens(query: string): string[] {
 	return query
@@ -106,6 +113,8 @@ class HistoryResultsList implements Component {
 	#menu: MenuSelection<HistorySearchEntry>;
 	#tokens: string[] = [];
 	#maxVisible = MAX_VISIBLE;
+	/** Highlighted prompt text per entry, valid for one `(tokens, budget)` pair; reset on invalidate (theme). */
+	#highlightCache = new WeakMap<HistorySearchEntry, { tokens: string[]; budget: number; text: string }>();
 
 	constructor(menu: MenuSelection<HistorySearchEntry>) {
 		this.#menu = menu;
@@ -116,7 +125,17 @@ class HistoryResultsList implements Component {
 	}
 
 	invalidate(): void {
-		// No cached state to invalidate currently
+		this.#highlightCache = new WeakMap();
+	}
+
+	/** Truncated, token-highlighted prompt of `entry` for `budget` cells. */
+	#highlightedPrompt(entry: HistorySearchEntry, budget: number): string {
+		const cached = this.#highlightCache.get(entry);
+		if (cached !== undefined && cached.tokens === this.#tokens && cached.budget === budget) return cached.text;
+		const normalized = entry.prompt.replace(/\s+/g, " ").trim();
+		const text = highlightTokens(truncateToWidth(normalized, budget), this.#tokens);
+		this.#highlightCache.set(entry, { tokens: this.#tokens, budget, text });
+		return text;
 	}
 
 	render(width: number): readonly string[] {
@@ -151,9 +170,7 @@ class HistoryResultsList implements Component {
 			const showTime = rowWidth >= gutterWidth + 12 + timeWidth;
 
 			const promptBudget = Math.max(4, rowWidth - gutterWidth - (showTime ? timeWidth + 1 : 0));
-			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
-			const plain = truncateToWidth(normalized, promptBudget);
-			const highlighted = highlightTokens(plain, this.#tokens);
+			const highlighted = this.#highlightedPrompt(entry, promptBudget);
 
 			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(gutterWidth);
 			let line = cursor + (isSelected ? theme.bold(highlighted) : highlighted);
@@ -186,12 +203,22 @@ export class HistorySearchComponent extends OverlayPanel {
 	#nativeHints: NativeNode | undefined;
 	#nativeMemo: HistoryNativeMemo | undefined;
 	#pickerItems: { items: readonly HistorySearchEntry[]; rows: readonly TspPickerItem[] } | undefined;
+	/** Trimmed query the current results were fetched for; `undefined` before the first fetch. */
+	#resultsQuery: string | undefined;
+	#searchTimer: NodeJS.Timeout | undefined;
+	#onRequestRender?: () => void;
 
 	constructor(historyStorage: HistorySource, onSelect: (prompt: string) => void, onCancel: () => void) {
 		super("History", "zeta.overlay.history");
 		this.#historyStorage = historyStorage;
-		this.#onSelect = onSelect;
-		this.#onCancel = onCancel;
+		this.#onSelect = prompt => {
+			this.#cancelPendingSearch();
+			onSelect(prompt);
+		};
+		this.#onCancel = () => {
+			this.#cancelPendingSearch();
+			onCancel();
+		};
 
 		this.#menu = new MenuSelection<HistorySearchEntry>([], {
 			getKey: entry => `${entry.created_at}:${entry.prompt}`,
@@ -199,6 +226,7 @@ export class HistorySearchComponent extends OverlayPanel {
 		});
 		this.#searchInput = new Input();
 		this.#searchInput.onSubmit = () => {
+			this.#flushPendingSearch();
 			const selected = this.#menu.selectedItem;
 			if (selected) {
 				this.#onSelect(selected.prompt);
@@ -225,38 +253,59 @@ export class HistorySearchComponent extends OverlayPanel {
 		this.#updateResults();
 	}
 
+	/**
+	 * Repaint hook for debounced result updates. Once set, query edits search
+	 * storage after a {@link SEARCH_DEBOUNCE_MS} quiet period instead of on
+	 * every key; without it every edit searches synchronously.
+	 */
+	setOnRequestRender(callback: () => void): void {
+		this.#onRequestRender = callback;
+	}
+
+	override dispose(): void {
+		this.#cancelPendingSearch();
+		super.dispose();
+	}
+
 	handleInput(keyData: string): void {
 		if (matchesSelectUp(keyData)) {
+			this.#flushPendingSearch();
 			this.#menu.move(-1, false);
 			return;
 		}
 
 		if (matchesSelectDown(keyData)) {
+			this.#flushPendingSearch();
 			this.#menu.move(1, false);
 			return;
 		}
 
 		if (matchesSelectPageUp(keyData)) {
+			this.#flushPendingSearch();
 			this.#menu.move(-MAX_VISIBLE, false);
 			return;
 		}
 
 		if (matchesSelectPageDown(keyData)) {
+			this.#flushPendingSearch();
 			this.#menu.move(MAX_VISIBLE, false);
 			return;
 		}
 
 		if (matchesKey(keyData, "home")) {
+			this.#flushPendingSearch();
 			this.#menu.moveToBoundary("first");
 			return;
 		}
 
 		if (matchesKey(keyData, "end")) {
+			this.#flushPendingSearch();
 			this.#menu.moveToBoundary("last");
 			return;
 		}
 
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			this.#flushPendingSearch();
 			const selected = this.#menu.selectedItem;
 			if (selected) {
 				this.#onSelect(selected.prompt);
@@ -270,7 +319,7 @@ export class HistorySearchComponent extends OverlayPanel {
 		}
 
 		this.#searchInput.handleInput(keyData);
-		this.#updateResults();
+		this.#scheduleResults();
 	}
 
 	/**
@@ -372,6 +421,9 @@ export class HistorySearchComponent extends OverlayPanel {
 	 * Picker: a row click highlights, a second click or `Insert` inserts it
 	 * (Enter), `Close` cancels (Esc), `Clear search` empties the query.
 	 * List: picking a result does what highlighting it and pressing Enter does.
+	 * A row picked while a debounced search is pending belongs to the previous
+	 * query: results are refreshed first and the pick only lands if that entry
+	 * is still among them.
 	 */
 	handleNativeEvent(event: NativeUiEvent): void {
 		const ev = pickerEvent(event, PICKER_KEY);
@@ -385,6 +437,7 @@ export class HistorySearchComponent extends OverlayPanel {
 				}
 				return;
 			}
+			this.#flushPendingSearch();
 			const index = this.#menu.visibleItems.findIndex(entry => nativeEntryKey(entry) === ev.item);
 			if (index < 0) return;
 			this.#menu.setSelectedIndex(index);
@@ -392,6 +445,7 @@ export class HistorySearchComponent extends OverlayPanel {
 			return;
 		}
 		if ((event.type !== "select" && event.type !== "activate") || event.key !== "list") return;
+		this.#flushPendingSearch();
 		const index = this.#menu.visibleItems.findIndex(entry => nativeEntryKey(entry) === event.item);
 		const target = this.#menu.visibleItems[index];
 		if (!target) return;
@@ -399,8 +453,47 @@ export class HistorySearchComponent extends OverlayPanel {
 		this.#onSelect(target.prompt);
 	}
 
+	/**
+	 * Refresh results after a query edit: no-op when the trimmed query is
+	 * unchanged (cursor moves, trailing spaces), immediate for the empty query
+	 * or when no repaint hook is wired, debounced otherwise.
+	 */
+	#scheduleResults(): void {
+		const query = this.#searchInput.getValue().trim();
+		if (query === this.#resultsQuery) {
+			this.#cancelPendingSearch();
+			return;
+		}
+		const requestRender = this.#onRequestRender;
+		if (!query || !requestRender) {
+			this.#updateResults();
+			return;
+		}
+		this.#cancelPendingSearch();
+		this.#searchTimer = setTimeout(() => {
+			this.#searchTimer = undefined;
+			this.#updateResults();
+			requestRender();
+		}, SEARCH_DEBOUNCE_MS);
+	}
+
+	/** Run a pending debounced search now, so selection acts on the current query's results. */
+	#flushPendingSearch(): void {
+		if (this.#searchTimer === undefined) return;
+		this.#cancelPendingSearch();
+		this.#updateResults();
+	}
+
+	#cancelPendingSearch(): void {
+		if (this.#searchTimer === undefined) return;
+		clearTimeout(this.#searchTimer);
+		this.#searchTimer = undefined;
+	}
+
 	#updateResults(): void {
+		this.#cancelPendingSearch();
 		const query = this.#searchInput.getValue().trim();
+		this.#resultsQuery = query;
 		const results = query
 			? this.#historyStorage.search(query, this.#resultLimit)
 			: this.#historyStorage.getRecent(this.#resultLimit);

package/src/overlays/hook-selector.ts

@@ -94,6 +94,10 @@ export interface HookSelectorOptions {
 	/** Number of leading options (original order) that receive a selection
 	 *  marker. Defaults to every option when {@link selectionMarker} is set. */
 	markableCount?: number;
+	/** Describe as a card in the dock (the composer slot) instead of a picker
+	 *  sheet, so dock content above it (e.g. a `/omfg` candidate rule) stays
+	 *  visible and the transcript stays scrollable on native surfaces. */
+	inline?: boolean;
 }
 
 export interface HookSelectorOption {
@@ -210,6 +214,7 @@ export class HookSelectorComponent extends OverlayPanel {
 	#sliderComponent: Text | undefined;
 	#lastRenderWidth: number | undefined;
 	readonly #detailLines: readonly string[];
+	readonly #inline: boolean;
 	readonly #helpText: string | undefined;
 	/** Described option rows by original index; `marker` is the radio state baked into the label. */
 	readonly #nativeItems = new Map<number, { marker: boolean; node: NativeNode }>();
@@ -264,6 +269,7 @@ export class HookSelectorComponent extends OverlayPanel {
 		this.#baseTitle = this.title;
 		this.#detailLines = title.split(/\r?\n/).slice(1);
 		this.#helpText = opts?.helpText;
+		this.#inline = opts?.inline ?? false;
 		this.#onLeftCallback = opts?.onLeft;
 		this.#onRightCallback = opts?.onRight;
 		this.#onExternalEditorCallback = opts?.onExternalEditor;
@@ -726,13 +732,14 @@ export class HookSelectorComponent extends OverlayPanel {
 	}
 
 	/**
-	 * A plain option list is a picker sheet. Otherwise a card headed by the
-	 * title (plus the countdown `elapsed` when a timeout runs), the extra title
-	 * lines, the slider as `tabs`, the options as a `list` keyed by original
-	 * option index, the search query while typing, and the key hints.
+	 * A plain option list is a picker sheet. Otherwise (inline, slider, or
+	 * countdown) a card headed by the title (plus the countdown `elapsed` when a
+	 * timeout runs), the extra title lines, the slider as `tabs`, the options as
+	 * a `list` keyed by original option index, the search query while typing,
+	 * and the key hints.
 	 */
 	override describe(cx: DescribeContext): NativeNode {
-		if (cx.supports("picker") && !this.#slider && !this.#countdown) return this.#describePicker();
+		if (cx.supports("picker") && !this.#inline && !this.#slider && !this.#countdown) return this.#describePicker();
 		const items = this.#menu.visibleItems;
 		const selected = this.#menu.selectedKey;
 		const query = this.#menu.query;

package/src/overlays/hub-frame.ts

@@ -149,6 +149,10 @@ export class HubFrame {
 	readonly #stack: Stack;
 	readonly #title: string;
 	readonly #sidebarBounds: { min: number; max: number };
+	/** Whether narrow layouts may reduce the body floor to keep the sidebar usable. */
+	readonly #preserveSidebar: boolean;
+	/** Preferred body floor, reduced only as needed to retain sidebar navigation. */
+	readonly #bodyMinWidth: number;
 
 	/** Compose hub-specific sidebar and body renderers into a persistent frame. */
 	constructor(
@@ -156,9 +160,12 @@ export class HubFrame {
 		sidebarBounds: { min: number; max: number },
 		renderSidebar: (width: number, rows: number) => string[],
 		renderBody: (width: number, height: number | undefined) => readonly string[],
+		options: { bodyMinWidth?: number; preserveSidebar?: boolean } = {},
 	) {
 		this.#title = title;
 		this.#sidebarBounds = sidebarBounds;
+		this.#preserveSidebar = options.preserveSidebar ?? false;
+		this.#bodyMinWidth = options.bodyMinWidth ?? 0;
 		this.#split = new SplitPane({
 			left: (width, height) => {
 				const rows = Math.max(0, Math.floor(height ?? 10));
@@ -167,6 +174,7 @@ export class HubFrame {
 				return lines.slice(0, rows);
 			},
 			right: renderBody,
+			rightMinWidth: this.#bodyMinWidth,
 			prefix: () => `${theme.fg("border", theme.boxRound.vertical)} `,
 			divider: () => ` ${theme.fg("border", theme.boxRound.vertical)} `,
 			suffix: () => ` ${theme.fg("border", theme.boxRound.vertical)}`,
@@ -330,7 +338,17 @@ export class HubFrame {
 	/** Paint a complete fullscreen hub with its title, width bounds, and contextual footer. */
 	render(width: number, height: number, entries: readonly SidebarEntry<string>[], footer: string): readonly string[] {
 		const contentRows = Math.max(10, height - 4);
-		this.#split.setLeftSize({ fixed: this.sidebarWidth(entries) });
+		const sidebarWidth = this.sidebarWidth(entries);
+		this.#split.setLeftSize({
+			fixed: sidebarWidth,
+			min: this.#preserveSidebar ? this.#sidebarBounds.min : undefined,
+		});
+		if (this.#preserveSidebar && this.#bodyMinWidth > 0) {
+			const geometry = this.#split.measure(width);
+			const splitWidth = (geometry.left?.width ?? 0) + (geometry.right?.width ?? 0);
+			const rightMinWidth = Math.max(0, Math.min(this.#bodyMinWidth, splitWidth - this.#sidebarBounds.min));
+			this.#split.setRightMinWidth(rightMinWidth);
+		}
 		const leftWidth = this.#split.measure(width).left?.width ?? 0;
 		this.#top.setLines([topBorderSplit(width, this.#title, leftWidth)]);
 		this.#divider.setLines([dividerSplit(width, leftWidth)]);

package/src/overlays/jobs-panel.ts

@@ -1,14 +1,13 @@
 /**
- * The async background jobs of a session, twice: {@link JobsPanel} is the
- * `/jobs` transcript block (ANSI keeps the caller's text report; natively one
- * frame), {@link JobsSheet} the dismissable sheet the native jobs pill opens.
- * The panel draws task jobs as `agent` nodes and the others as a status dot,
- * the one-line label and a live `elapsed`; the sheet lists every job and
- * inspects the selected one (command, cwd, live pids, exit code, output tail).
+ * The async background jobs of a session as {@link JobsSheet}: the dismissable
+ * sheet the native jobs pill and `/jobs` open. It draws task jobs as `agent`
+ * nodes and the others as a status dot, the one-line label and a live
+ * `elapsed`, lists every job and inspects the selected one (command, cwd, live
+ * pids, exit code, output tail).
  */
 import type { TspAgentProps, TspSpan } from "@linxiraos/pi-wire";
 import { formatDuration } from "@linxiraos/pi-utils";
-import { type Component, Container } from "../tui";
+import type { Component } from "../tui";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
 import { matchesKey } from "../keys";
 import { truncateToWidth } from "../utils";
@@ -92,31 +91,6 @@ const DOT: Record<JobsPanelJob["status"], TspSpan> = {
 /** Output tail rows the terminal fallback shows under the selected job. */
 const FALLBACK_TAIL_LINES = 8;
 
-/** The `/jobs` block: `ansi` renders in the terminal, the snapshot describes the native frame. */
-export class JobsPanel extends Container {
-	readonly #snapshot: JobsPanelSnapshot;
-	readonly #nowMs: number;
-	#native: { agent: boolean; node: NativeNode } | undefined;
-
-	constructor(snapshot: JobsPanelSnapshot, nowMs: number, ansi: readonly Component[]) {
-		super();
-		this.#snapshot = snapshot;
-		this.#nowMs = nowMs;
-		for (const child of ansi) this.addChild(child);
-	}
-
-	override describe(cx: DescribeContext): NativeNode {
-		const agent = cx.supports("agent");
-		if (this.#native?.agent === agent) return this.#native.node;
-		const head: TspSpan[] = [span("Background jobs", "strong")];
-		const running = this.#snapshot.running.length;
-		if (running > 0) head.push(span(` · ${running} running`, "muted"));
-		const described = card({ role: "zeta.jobs", head }, describeJobs(this.#snapshot, this.#nowMs, agent));
-		this.#native = { agent, node: described };
-		return described;
-	}
-}
-
 /**
  * The jobs pill's sheet: a centred `lg` glass sheet titled Background jobs.
  * A selectable list of every job (running first) sits over the selected
@@ -136,6 +110,8 @@ export class JobsSheet implements Component {
 	readonly #source: JobsSheetSource;
 	#selectedId: string | undefined;
 	#native: { key: string; output: string | undefined; node: NativeNode } | undefined;
+	/** Fallback output tail, reused while the selected job's output is unchanged. */
+	#tail: { id: string; output: string; lines: readonly string[] } | undefined;
 
 	constructor(source: JobsSheetSource) {
 		this.#source = source;
@@ -203,8 +179,9 @@ export class JobsSheet implements Component {
 				detail.artifactId && `artifact://${detail.artifactId}`,
 			]);
 			if (facts.length > 0) lines.push(truncateToWidth(`   ${facts.join(" · ")}`, width));
-			const tail = (detail.output ?? "").trimEnd().split("\n").slice(-FALLBACK_TAIL_LINES);
-			for (const line of tail) if (line) lines.push(truncateToWidth(`   ${line}`, width));
+			for (const line of this.#tailLines(selected.id, detail.output ?? "")) {
+				if (line) lines.push(truncateToWidth(`   ${line}`, width));
+			}
 		}
 		return lines;
 	}
@@ -236,6 +213,14 @@ export class JobsSheet implements Component {
 		return { jobs, selected };
 	}
 
+	#tailLines(id: string, output: string): readonly string[] {
+		const cached = this.#tail;
+		if (cached?.id === id && cached.output === output) return cached.lines;
+		const lines = tailLines(output, FALLBACK_TAIL_LINES);
+		this.#tail = { id, output, lines };
+		return lines;
+	}
+
 	#move(delta: number): void {
 		const { jobs, selected } = this.#current();
 		if (!selected) return;
@@ -254,25 +239,21 @@ function jobAge(job: JobsPanelJob, nowMs: number): number {
 	return Math.max(0, (job.endTime ?? nowMs) - job.startTime);
 }
 
-/** The body the `/jobs` panel draws: running rows, then a Recent section; an empty note when there are none. */
-function describeJobs(snapshot: JobsPanelSnapshot, nowMs: number, agent: boolean): NativeChild[] {
-	const { running, recent } = snapshot;
-	const children: NativeChild[] = [];
-	if (running.length === 0 && recent.length === 0) {
-		children.push(node("text", { text: "No background jobs", role: "zeta.jobs.empty" }, undefined, "empty"));
-	}
-	for (const job of running) children.push(describeJob(job, nowMs, agent));
-	if (recent.length > 0) {
-		children.push(
-			node(
-				"section",
-				{ head: [span("Recent", "muted")] },
-				recent.map(job => describeJob(job, nowMs, agent)),
-				"recent",
-			),
-		);
+/**
+ * The last `count` pieces of `text.trimEnd().split("\n")`, found by scanning
+ * back from the end so a long running output is never split as a whole.
+ */
+function tailLines(text: string, count: number): string[] {
+	const trimmed = text.trimEnd();
+	const lines: string[] = [];
+	let end = trimmed.length;
+	while (lines.length < count) {
+		const newline = end > 0 ? trimmed.lastIndexOf("\n", end - 1) : -1;
+		lines.push(trimmed.slice(newline + 1, end));
+		if (newline < 0) break;
+		end = newline;
 	}
-	return children;
+	return lines.reverse();
 }
 
 /** A task job as an `agent` node when the terminal draws them, else a one-line dot row. */