@linxiraos/pi-tui 1.1.27 → 1.2.1

package/src/overlays/annotation-types.ts

@@ -75,4 +75,6 @@ export type TextReviewAnnotation =
 export interface TextReviewOverlayResult {
 	action: "paste";
 	annotations: TextReviewAnnotation[];
+	/** Source text after an external-editor edit; absent when the source was not edited. */
+	editedText?: string;
 }

package/src/overlays/ask-dialog.ts

@@ -711,8 +711,11 @@ export class AskDialogComponent implements Component {
 	}
 
 	/**
-	 * A bottom-anchored glass sheet over the composer (the `overlay` hoists into
-	 * the terminal's layer; the dialog's own slot in the dock stays empty).
+	 * In the dock, in the composer's place and framed as the composer is: a
+	 * `col` with the prompt editor's root role (`zeta.editor`), so the terminal
+	 * gives it the composer's insets and spacing. Not a modal `overlay` sheet:
+	 * one anchored at the bottom covered the transcript rows that explain the
+	 * question and blocked scrolling until the question was answered.
 	 */
 	describe(cx: DescribeContext): NativeNode {
 		const inputGuard = this.options.inputGuard;
@@ -728,13 +731,7 @@ export class AskDialogComponent implements Component {
 		if (this.#isSubmitTab()) this.#describeSubmitBody(children);
 		else this.#describeQuestionBody(children);
 		children.push(this.#describeActions(blocked));
-		const sheet = node(
-			"overlay",
-			{ role: "zeta.overlay.ask", anchor: "bottom", size: "md", modal: true },
-			[col(children, { gap: "md" })],
-			"sheet",
-		);
-		this.#native = col([sheet]);
+		this.#native = col(children, { role: "zeta.editor", gap: "md" });
 		this.#nativeBlocked = blocked;
 		return this.#native;
 	}
@@ -1137,7 +1134,7 @@ export class AskDialogComponent implements Component {
 		const action = question?.multi
 			? `${formatKeyHint("space")} toggle · ${enter} ${enterAction}`
 			: `${enter} select · ${formatKeyHint("n")} note`;
-		const tabs = this.#hasSubmitTab() ? ` · ${formatKeyHints(["tab", "left", "right"])}` : "";
+		const tabs = this.#hasSubmitTab() ? ` · ${formatKeyHints(["tab", "left", "right"])} question` : "";
 		const expand = this.#expandHint();
 		if (this.#questionCanPage && indicator) {
 			const pageKeys = editorKeys("tui.select.pageUp", "tui.select.pageDown");

package/src/overlays/btw-history-panel.ts

@@ -37,7 +37,7 @@ import { clampSelection, contentRowWidth, padLinesToHeight, renderScrollableList
 import type { TspScrollBy, TspSpan } from "@linxiraos/pi-wire";
 import type { NativeChild, NativeNode, NativeScroll, NativeUiEvent } from "../native/node";
 import { col, md, node, span, text } from "../native/describe";
-import { actionHint, hintsRow, type NativeHint, statusHintsRow } from "../native/overlay";
+import { actionBar, actionButton, actionHint, hintsRow, type NativeHint, statusHintsRow } from "../native/overlay";
 
 interface BtwHistoryPanelOptions {
 	records: readonly BtwHistoryRecord[];
@@ -485,6 +485,13 @@ export class BtwHistoryPanel implements Component, Focusable {
 			children.push(node("col", undefined, lines, "composer"));
 		}
 		children.push({ ...this.#describeFooter(record, canFollowUp, copied), key: "footer" });
+		// Clicking Close always dismisses the sheet; the Esc keycap only shows where Esc does too.
+		const running = record !== undefined && getBtwLatestTurn(record).status === "running";
+		const escapeCloses = !composer && !(running && !this.#options.escapeHides);
+		children.push({
+			...actionBar([null, actionButton("Close", "close", escapeCloses ? { keys: "escape" } : undefined)]),
+			key: "actions",
+		});
 		// The sheet is the frame (`nativeOverlay`): a borderless column.
 		const described = col(children, { gap: "md" });
 		this.#native = {
@@ -504,6 +511,10 @@ export class BtwHistoryPanel implements Component, Focusable {
 	}
 
 	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type === "action" && event.act === "close") {
+			this.#options.onClose();
+			return;
+		}
 		if ((event.type !== "select" && event.type !== "activate") || this.#composer) return;
 		const index = this.#records.findIndex(record => record.id === event.item);
 		if (index === -1) return;

package/src/overlays/copy-selector.ts

@@ -327,6 +327,12 @@ interface ControlRegion {
 	end: number;
 }
 
+/** A block's preview rows (highlighted, width-cut, plus the "more lines" row) and its full line count. */
+interface BlockPreview {
+	rows: string[];
+	lineCount: number;
+}
+
 export class CopySelectorComponent implements Component {
 	#builder: ChatTranscriptBuilder;
 	#browser: TranscriptBrowser;
@@ -348,6 +354,8 @@ export class CopySelectorComponent implements Component {
 
 	/** Last described root and the state it was built from. */
 	#native: { memo: string; targets: OutlineTarget[]; blocks: CopyBlock[] | undefined; node: NativeNode } | undefined;
+	/** ANSI block previews (syntax highlight + width cut) of the exploded turn. */
+	#blockPreviews: { blocks: CopyBlock[]; inner: number; previews: readonly BlockPreview[] } | undefined;
 	/** Transcript list items, rebuilt only when the replayed targets change. */
 	#nativeItems: { targets: OutlineTarget[]; truncated: boolean; items: NativeNode[] } | undefined;
 	/** Timeline picker items of the replayed targets. */
@@ -414,6 +422,7 @@ export class CopySelectorComponent implements Component {
 	}
 
 	invalidate(): void {
+		this.#blockPreviews = undefined;
 		this.#builder.container.invalidate();
 		this.#browser.invalidate();
 	}
@@ -945,18 +954,13 @@ export class CopySelectorComponent implements Component {
 	 */
 	#composeBlocks(blocks: CopyBlock[], columnWidth: number, lineOffset: number): ComposedColumn {
 		const inner = Math.max(10, columnWidth - 4);
+		const previews = this.#previewBlocks(blocks, inner);
 		const lines: string[] = [];
 		let selStart = -1;
 		let selEnd = -1;
 		for (let index = 0; index < blocks.length; index++) {
 			const block = blocks[index]!;
-			const raw = block.content.split("\n");
-			const shown = raw.slice(0, BLOCK_PREVIEW_LINES);
-			const styled = block.language ? highlightCode(shown.join("\n"), block.language) : shown;
-			const rows = styled.map(row => truncateToWidth(replaceTabs(row), inner));
-			if (raw.length > shown.length) {
-				rows.push(theme.fg("dim", `… +${raw.length - shown.length} more lines`));
-			}
+			const { rows, lineCount } = previews[index]!;
 			const selected = index === this.#blockSelected;
 			const captionColor: ThemeColor = selected ? OUTLINE_COLOR : "dim";
 			const controls: Array<{ action: ControlRegion["action"]; text: string }> = [
@@ -965,7 +969,7 @@ export class CopySelectorComponent implements Component {
 			if (block.href && this.deps.onOpen) controls.push({ action: "open", text: `${theme.cmd.share} open` });
 			const controlsWidth = controls.reduce((sum, control) => sum + visibleWidth(control.text) + 2, 0);
 			const summary = truncateToWidth(
-				`${index + 1}/${blocks.length}${theme.sep.dot}${block.label}${theme.sep.dot}${raw.length} line${raw.length === 1 ? "" : "s"}`,
+				`${index + 1}/${blocks.length}${theme.sep.dot}${block.label}${theme.sep.dot}${lineCount} line${lineCount === 1 ? "" : "s"}`,
 				Math.max(4, inner - controlsWidth),
 			);
 			// Caption: two-space gutter, summary, then the controls, each preceded by two spaces.
@@ -998,6 +1002,24 @@ export class CopySelectorComponent implements Component {
 		lines.push("");
 		return { lines, selStart, selEnd };
 	}
+
+	/** Highlighted, width-cut previews of each block; rebuilt when the block set or width changes. */
+	#previewBlocks(blocks: CopyBlock[], inner: number): readonly BlockPreview[] {
+		const cached = this.#blockPreviews;
+		if (cached?.blocks === blocks && cached.inner === inner) return cached.previews;
+		const previews = blocks.map(block => {
+			const raw = block.content.split("\n");
+			const shown = raw.slice(0, BLOCK_PREVIEW_LINES);
+			const styled = block.language ? highlightCode(shown.join("\n"), block.language) : shown;
+			const rows = styled.map(row => truncateToWidth(replaceTabs(row), inner));
+			if (raw.length > shown.length) {
+				rows.push(theme.fg("dim", `… +${raw.length - shown.length} more lines`));
+			}
+			return { rows, lineCount: raw.length };
+		});
+		this.#blockPreviews = { blocks, inner, previews };
+		return previews;
+	}
 }
 
 /** Raw multi-line text of a user message (string or text blocks). */

package/src/overlays/extensions/state-manager.ts

@@ -1,5 +1,5 @@
 /** Pure dashboard tree, filtering, and selection state. */
-import { fuzzyMatch } from "../../fuzzy";
+import { FuzzyQuery, FuzzyText } from "../../fuzzy";
 import {
 	type DashboardState,
 	type DisabledReason,
@@ -119,6 +119,50 @@ export function flattenTree(tree: TreeNode[]): FlatTreeItem[] {
 	return flat;
 }
 
+/** Searchable fields an extension's cached {@link FuzzyText} was built from. */
+interface ExtensionSearchMemo {
+	name: string;
+	displayName: string;
+	description: string | undefined;
+	trigger: string | undefined;
+	providerName: string;
+	kind: string;
+	text: FuzzyText;
+}
+
+/** Prepared search text per extension; rebuilt if any searchable field changes. */
+const extensionSearchCache = new WeakMap<Extension, ExtensionSearchMemo>();
+
+function extensionSearchText(ext: Extension): FuzzyText {
+	const memo = extensionSearchCache.get(ext);
+	if (
+		memo !== undefined &&
+		memo.name === ext.name &&
+		memo.displayName === ext.displayName &&
+		memo.description === ext.description &&
+		memo.trigger === ext.trigger &&
+		memo.providerName === ext.source.providerName &&
+		memo.kind === ext.kind
+	) {
+		return memo.text;
+	}
+	const text = new FuzzyText(
+		[ext.name, ext.displayName, ext.description || "", ext.trigger || "", ext.source.providerName, ext.kind].join(
+			" ",
+		),
+	);
+	extensionSearchCache.set(ext, {
+		name: ext.name,
+		displayName: ext.displayName,
+		description: ext.description,
+		trigger: ext.trigger,
+		providerName: ext.source.providerName,
+		kind: ext.kind,
+		text,
+	});
+	return text;
+}
+
 /**
  * Apply fuzzy filter to extensions.
  */
@@ -127,22 +171,18 @@ export function applyFilter(extensions: Extension[], query: string): Extension[]
 		return extensions;
 	}
 
-	const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+	const tokens = query
+		.toLowerCase()
+		.split(/\s+/)
+		.filter(Boolean)
+		.map(token => new FuzzyQuery(token));
 	if (tokens.length === 0) {
 		return extensions;
 	}
 
 	return extensions.filter(ext => {
-		const searchable = [
-			ext.name,
-			ext.displayName,
-			ext.description || "",
-			ext.trigger || "",
-			ext.source.providerName,
-			ext.kind,
-		].join(" ");
-
-		return tokens.every(token => fuzzyMatch(token, searchable).matches);
+		const searchable = extensionSearchText(ext);
+		return tokens.every(token => token.match(searchable).matches);
 	});
 }
 

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/jobs-panel.ts

@@ -7,7 +7,7 @@
  */
 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";
@@ -91,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
@@ -135,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;
@@ -202,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;
 	}
@@ -235,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;
@@ -253,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. */