@linxiraos/pi-tui 1.2.1 → 1.3.1

package/src/overlays/hook-input.ts

@@ -1,24 +1,52 @@
 /**
- * Simple text input component for hooks.
+ * One-line text prompt an extension (hook) asks the user.
  */
-import { Spacer, type TUI } from "../index";
+import { type Component, Spacer, Text, type TUI } from "../index";
 import { matchesAppInterrupt } from "../keybinding-matchers";
 import { CountdownTimer } from "../chrome/countdown-timer";
 import { formTheme } from "../chrome/form-theme";
 import { OverlayPanel } from "../chrome/overlay-box";
 import { Form, TextFormField } from "../components/form";
-import { editorKey, interruptKey } from "../chrome/keybinding-hints";
-import { node } from "../native/describe";
-import type { DescribeContext, NativeNode } from "../native/node";
-import { overlayCard } from "../native/overlay";
+import { boundKeys, editorKey, interruptKey } from "../chrome/keybinding-hints";
+import { getKeybindings } from "../keybindings";
+import { col, node, span } from "../native/describe";
+import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import { actionBar, actionButton } from "../native/overlay";
 import { plainText } from "../native/spans";
 
+/** Role prefix of the sheet's parts (`zeta.hook-input.head`, `.title`, `.timer`, `.detail`, `.field`). */
+const PART = "zeta.hook-input";
+
 export interface HookInputOptions {
 	tui?: TUI;
 	timeout?: number;
 	onTimeout?: () => void;
 }
 
+/** Terminal-only key legend under the field; a native terminal puts the keys in the buttons' tooltips. */
+class KeyLegend implements Component {
+	readonly #text = new Text("", 0, 0);
+
+	constructor(private readonly legend: string) {
+		this.invalidate();
+	}
+
+	render(width: number): readonly string[] {
+		return this.#text.render(width);
+	}
+
+	invalidate(): void {
+		this.#text.setText(formTheme.hint(this.legend));
+		this.#text.invalidate();
+	}
+}
+
+interface HookInputNativeMemo {
+	countdown: NativeNode | undefined;
+	error: boolean;
+	node: NativeNode;
+}
+
 export class HookInputComponent extends OverlayPanel {
 	#field: TextFormField;
 	#form: Form;
@@ -26,11 +54,12 @@ export class HookInputComponent extends OverlayPanel {
 	#onCancelCallback: () => void;
 	#baseTitle: string;
 	#countdown: CountdownTimer | undefined;
-	#nativeMemo: { countdown: NativeNode | undefined; node: NativeNode } | undefined;
+	#nativeMemo: HookInputNativeMemo | undefined;
+	#nativeActions: NativeNode | undefined;
 
 	constructor(
 		title: string,
-		_placeholder: string | undefined,
+		placeholder: string | undefined,
 		onSubmit: (value: string) => void,
 		onCancel: () => void,
 		opts?: HookInputOptions,
@@ -55,17 +84,19 @@ export class HookInputComponent extends OverlayPanel {
 
 		this.#field = new TextFormField({
 			theme: formTheme,
-			hint: `${editorKey("tui.input.submit")} submit  ${interruptKey()} cancel`,
 			empty: "submit",
 			onSubmit: value => this.#onSubmitCallback(value),
 			onCancel: () => this.#onCancelCallback(),
 		});
+		// Native terminals draw it while the value is empty; the terminal row stays bare.
+		this.#field.input.placeholder = placeholder?.trim() || undefined;
 		this.#form = new Form({
 			fields: [this.#field],
 			onCancel: () => this.#onCancelCallback(),
 			isCancel: matchesAppInterrupt,
 		});
 		this.addChild(this.#form);
+		this.addChild(new KeyLegend(`${editorKey("tui.input.submit")} submit  ${interruptKey()} cancel`));
 		this.addChild(new Spacer(1));
 	}
 
@@ -83,24 +114,79 @@ export class HookInputComponent extends OverlayPanel {
 		this.#form.pasteText(text);
 	}
 
+	/** Submit and Cancel run what Enter and the interrupt key run. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action") return;
+		if (event.act === "submit") {
+			this.#countdown?.reset();
+			this.#field.submit();
+		} else if (event.act === "cancel") {
+			this.#onCancelCallback();
+		}
+	}
+
 	override dispose(): void {
 		this.#countdown?.dispose();
 		super.dispose();
 	}
 
-	/** A card over the form, headed by the title plus the countdown `elapsed` while a timeout runs. */
+	/**
+	 * A sheet in the composer's place, built like the extension editor's: the
+	 * title's first line (the countdown at its end while a timeout runs) over
+	 * any further lines as detail, the field written on the sheet (tinted, the
+	 * reason under it, while a submit was refused), and Cancel · Submit, whose
+	 * keys live in their tooltips.
+	 */
 	override describe(_cx: DescribeContext): NativeNode {
 		const countdown = this.#countdown?.describe();
+		const error = this.#field.hasError;
 		const memo = this.#nativeMemo;
-		if (memo && memo.countdown === countdown) return memo.node;
-		const title = plainText(this.#baseTitle);
-		const root = countdown
-			? overlayCard(this.nativeRole, undefined, [
-					node("row", { gap: "sm", align: "baseline" }, [node("text", { text: title }), countdown], "head"),
-					this.#form,
-				])
-			: overlayCard(this.nativeRole, title, [this.#form]);
-		this.#nativeMemo = { countdown, node: root };
+		if (memo && memo.countdown === countdown && memo.error === error) return memo.node;
+		const [titleLine = "", ...detailLines] = plainText(this.#baseTitle).trim().split(/\r?\n/);
+		const titleRow: NativeChild[] = [
+			node(
+				"text",
+				{ spans: [span(titleLine.trim())], role: `${PART}.title`, wrap: "word", grow: 1 },
+				undefined,
+				"title",
+			),
+		];
+		if (countdown) {
+			titleRow.push(
+				node(
+					"row",
+					{ role: `${PART}.timer`, title: "Cancels when the time runs out; typing restarts it" },
+					[countdown],
+					"timer",
+				),
+			);
+		}
+		const head: NativeChild[] = [node("row", { gap: "md", align: "baseline" }, titleRow, "line")];
+		const detail = detailLines.join("\n").trim();
+		if (detail) {
+			head.push(node("text", { spans: [span(detail)], role: `${PART}.detail`, wrap: "word" }, undefined, "detail"));
+		}
+		const root = col(
+			[
+				node("col", { role: `${PART}.head`, gap: "xs" }, head, "head"),
+				node("col", { role: `${PART}.field`, ...(error ? { tone: "error" as const } : {}) }, [this.#form], "field"),
+				this.#describeActions(),
+			],
+			{ role: this.nativeRole },
+		);
+		this.#nativeMemo = { countdown, error, node: root };
 		return root;
 	}
+
+	#describeActions(): NativeNode {
+		if (this.#nativeActions) return this.#nativeActions;
+		const submitKey = getKeybindings().getKeys("tui.input.submit")[0];
+		const cancelKey = boundKeys("app.interrupt", ["escape"])[0];
+		this.#nativeActions = actionBar([
+			null,
+			actionButton("Cancel", "cancel", cancelKey ? { keys: cancelKey } : {}),
+			actionButton("Submit", "submit", { tone: "accent", ...(submitKey ? { keys: submitKey } : {}) }),
+		]);
+		return this.#nativeActions;
+	}
 }

package/src/overlays/job-tree.ts

@@ -0,0 +1,177 @@
+/**
+ * The jobs of an agent and its subagents as a tree, shared by the jobs sheet
+ * and the `/jobs` report. The viewing agent's own jobs sit at the top level;
+ * a subagent's jobs nest under the task job that runs it, or under a header
+ * naming the subagent when that job is no longer listed (a foreground task, or
+ * one evicted from the recent list). Siblings sort branchiest first: the more
+ * rows a subtree holds the higher it sits, so leaf jobs settle to the bottom of
+ * their level; ties keep running before settled, then oldest first.
+ */
+import { buildTreePrefix, getTreeBranch } from "../render/utils";
+import type { Theme } from "../theme/theme";
+
+/** What the tree reads off a job. */
+export interface JobTreeJob {
+	readonly id: string;
+	readonly status: "running" | "completed" | "failed" | "cancelled";
+	readonly startTime: number;
+	/** Registry id of the agent that owns the job; absent or the root id: a top-level job. */
+	readonly ownerId?: string;
+	/** Registry id of the subagent a task job runs: the job heads that agent's subtree. */
+	readonly agentId?: string;
+}
+
+/** A subagent in the tree, by registry id: an owner of listed jobs, or an ancestor linking one to the root. */
+export interface JobTreeAgent {
+	readonly id: string;
+	readonly parentId?: string;
+}
+
+/** Where a row sits: its depth and the rails drawn left of it. */
+export interface JobTreePlace {
+	/** 0 for the top level. */
+	readonly depth: number;
+	/** Per enclosing level below the top, whether that level's rail continues past this row. */
+	readonly rails: readonly boolean[];
+	/** Whether this row is the last of its siblings. */
+	readonly last: boolean;
+	/** Whether rows nest under this one. */
+	readonly parent: boolean;
+}
+
+/** One tree row: a job (a task job also heads its subagent), or a header for a subagent with no listed task job. */
+export type JobTreeRow<J extends JobTreeJob> =
+	| (JobTreePlace & { readonly kind: "job"; readonly job: J; readonly agent?: JobTreeAgent })
+	| (JobTreePlace & { readonly kind: "agent"; readonly agent: JobTreeAgent });
+
+interface TreeNode<J> {
+	job?: J;
+	agent?: JobTreeAgent;
+	readonly children: TreeNode<J>[];
+	/** Rows nested under this node. */
+	size: number;
+	running: boolean;
+	startTime: number;
+}
+
+/**
+ * `jobs` as tree rows in display order. `rootId` is the viewing agent: its
+ * jobs, ownerless jobs and jobs of owners outside `agents` sit at the top
+ * level, as do agents whose parent is the root or unknown.
+ */
+export function buildJobTree<J extends JobTreeJob>(
+	jobs: readonly J[],
+	agents: readonly JobTreeAgent[],
+	rootId: string | undefined,
+): JobTreeRow<J>[] {
+	const top: TreeNode<J>[] = [];
+	const agentNodes = new Map<string, TreeNode<J>>();
+	for (const agent of agents) {
+		if (agent.id === rootId) continue;
+		agentNodes.set(agent.id, { agent, children: [], size: 0, running: false, startTime: Infinity });
+	}
+	// A task job heads its subagent; with several, the running then newest one.
+	for (const job of jobs) {
+		const node = job.agentId === undefined ? undefined : agentNodes.get(job.agentId);
+		if (!node) continue;
+		const held = node.job;
+		if (!held || (held.status !== "running" && (job.status === "running" || job.startTime > held.startTime))) {
+			node.job = job;
+		}
+	}
+	for (const node of agentNodes.values()) {
+		(parentNode(agentNodes, node.agent!)?.children ?? top).push(node);
+	}
+	for (const job of jobs) {
+		if (job.agentId !== undefined && agentNodes.get(job.agentId)?.job === job) continue;
+		const owner = job.ownerId === undefined || job.ownerId === rootId ? undefined : agentNodes.get(job.ownerId);
+		(owner?.children ?? top).push({ job, children: [], size: 0, running: false, startTime: Infinity });
+	}
+	settle(top);
+	return flatten(top);
+}
+
+/** `agent`'s parent node, or undefined for the top level: the root, an unknown agent, or a link that would close a cycle. */
+function parentNode<J>(agentNodes: ReadonlyMap<string, TreeNode<J>>, agent: JobTreeAgent): TreeNode<J> | undefined {
+	const parent = agent.parentId === undefined ? undefined : agentNodes.get(agent.parentId);
+	if (!parent) return undefined;
+	const seen = new Set<string>();
+	for (let cursor = agent.parentId; cursor !== undefined && !seen.has(cursor);) {
+		if (cursor === agent.id) return undefined;
+		seen.add(cursor);
+		cursor = agentNodes.get(cursor)?.agent?.parentId;
+	}
+	return parent;
+}
+
+/** Size, liveness and start time of each subtree, then siblings branchiest first; drops subagents with nothing listed. */
+function settle<J extends JobTreeJob>(top: TreeNode<J>[]): void {
+	// Post-order without recursion: lineage depth is not ours to bound.
+	const order: TreeNode<J>[] = [];
+	const stack = [...top];
+	while (stack.length > 0) {
+		const node = stack.pop()!;
+		order.push(node);
+		stack.push(...node.children);
+	}
+	const prune = (nodes: TreeNode<J>[]): void => {
+		const kept = nodes.filter(node => node.job !== undefined || node.children.length > 0);
+		nodes.splice(0, nodes.length, ...kept);
+		nodes.sort(compareNodes);
+	};
+	for (let i = order.length - 1; i >= 0; i--) {
+		const node = order[i];
+		prune(node.children);
+		node.size = 0;
+		node.running = node.job?.status === "running";
+		node.startTime = node.job?.startTime ?? Infinity;
+		for (const child of node.children) {
+			node.size += 1 + child.size;
+			node.running ||= child.running;
+			node.startTime = Math.min(node.startTime, child.startTime);
+		}
+	}
+	prune(top);
+}
+
+/** Branchiest first: the larger subtree, then running before settled, then the older. */
+function compareNodes<J>(a: TreeNode<J>, b: TreeNode<J>): number {
+	return b.size - a.size || Number(!a.running) - Number(!b.running) || a.startTime - b.startTime;
+}
+
+/** Depth-first rows of `top`, iteratively so lineage depth stays unbounded. */
+function flatten<J extends JobTreeJob>(top: readonly TreeNode<J>[]): JobTreeRow<J>[] {
+	const out: JobTreeRow<J>[] = [];
+	const stack: { node: TreeNode<J>; depth: number; rails: readonly boolean[]; last: boolean }[] = [];
+	const push = (level: readonly TreeNode<J>[], depth: number, rails: readonly boolean[]): void => {
+		for (let i = level.length - 1; i >= 0; i--) {
+			stack.push({ node: level[i], depth, rails, last: i === level.length - 1 });
+		}
+	};
+	push(top, 0, []);
+	while (stack.length > 0) {
+		const { node, depth, rails, last } = stack.pop()!;
+		const place = { depth, rails, last, parent: node.children.length > 0 };
+		if (node.job) out.push({ ...place, kind: "job", job: node.job, agent: node.agent });
+		else if (node.agent) out.push({ ...place, kind: "agent", agent: node.agent });
+		// The top level draws no rail, so its children's rails start empty.
+		push(node.children, depth + 1, depth === 0 ? [] : [...rails, !last]);
+	}
+	return out;
+}
+
+/** The connector drawn before a row's head: nothing at the top level, else rails then a branch. */
+export function jobTreeGuide(row: JobTreePlace, theme: Theme): string {
+	if (row.depth === 0) return "";
+	return `${buildTreePrefix(row.rails, theme)}${getTreeBranch(row.last, theme)} `;
+}
+
+/**
+ * The prefix of lines under a row's head (its label, a wrapped command): the
+ * rails that continue past it, then the rail down to its children or blank,
+ * two columns wide so a top-level leaf's lines indent by two.
+ */
+export function jobTreeIndent(row: JobTreePlace, theme: Theme): string {
+	const rails = row.depth === 0 ? "" : buildTreePrefix([...row.rails, !row.last], theme);
+	return `${rails}${row.parent ? `${theme.tree.vertical} ` : "  "}`;
+}