@linxiraos/pi-tui 1.4.0 → 1.4.1

package/src/native/backend.ts

@@ -54,6 +54,7 @@ import { getNativeBlob, type NativeBlob } from "./blobs";
 import { node } from "./describe";
 import { encodeTspJson, encodeTspMessage, type TspHello, TspReader, splitTspMessage } from "./encode";
 import type { DescribeContext, NativeChild, NativeNode, NativeSurface, NativeUiEvent } from "./node";
+import { NARROW_SHEET_COLS } from "./overlay";
 import { nativeComponentId, Reconciler } from "./reconcile";
 import { setNativeRendering } from "./state";
 
@@ -244,6 +245,10 @@ class Surface {
 	acked = 0;
 	/** Send times of unacknowledged frames, oldest first. */
 	unacked: number[] = [];
+	/** Send time of the oldest frame left unanswered when the current stall began; cleared by the next ack. */
+	stalledSince: number | undefined;
+	/** Credit resets since {@link stalledSince}. */
+	stallResets = 0;
 	focus: string | null = null;
 	dirty = false;
 
@@ -456,6 +461,8 @@ export class NativeBackend {
 		surface.reconciler.detachLive();
 		surface.unacked = [];
 		surface.acked = surface.seq;
+		surface.stalledSince = undefined;
+		surface.stallResets = 0;
 		surface.focus = null;
 		surface.dirty = false;
 		this.#write("o", { id: surface.id, mode: "inline", title: "omp", role: SESSION_ROLE, adopt: true });
@@ -612,11 +619,16 @@ export class NativeBackend {
 		if (surface.unacked.length < this.#credits) return true;
 		const oldest = surface.unacked[0]!;
 		if (this.#scheduler.now() - oldest < STALLED_ACK_MS) return false;
-		logger.warn("TSP: terminal stopped acknowledging frames; resuming without credits", {
-			sf: surface.id,
-			s: surface.seq,
-			acked: surface.acked,
-		});
+		// One warning per stall: a terminal that never acks would otherwise log one every `STALLED_ACK_MS`.
+		if (surface.stalledSince === undefined) {
+			surface.stalledSince = oldest;
+			logger.warn("TSP: terminal stopped acknowledging frames; resuming without credits", {
+				sf: surface.id,
+				s: surface.seq,
+				acked: surface.acked,
+			});
+		}
+		surface.stallResets++;
 		surface.unacked = [];
 		surface.acked = surface.seq;
 		return true;
@@ -801,6 +813,15 @@ export class NativeBackend {
 				const newly = Math.min(event.s, surface.seq) - surface.acked;
 				surface.acked = Math.min(event.s, surface.seq);
 				surface.unacked.splice(0, newly);
+				if (surface.stalledSince !== undefined) {
+					logger.debug("TSP: terminal acknowledging frames again", {
+						sf: surface.id,
+						stalledMs: this.#scheduler.now() - surface.stalledSince,
+						resets: surface.stallResets,
+					});
+					surface.stalledSince = undefined;
+					surface.stallResets = 0;
+				}
 				this.#clearStallTimer();
 				if (surface.dirty) this.#host.requestRender();
 				return;
@@ -919,7 +940,12 @@ export class NativeBackend {
 		if (overlay.component.nativeSheet?.(this.#cx)) return overlay.component;
 		const own = overlay.component.nativeOverlay;
 		const anchor = own?.anchor ?? overlayAnchor(overlay.options);
-		const size = own?.size ?? overlaySize(overlay.options, this.#cx.cols);
+		let size = own?.size ?? overlaySize(overlay.options, this.#cx.cols);
+		// A centered sheet in a narrow pane fills it instead of floating with margins: `lg`, and a component's own `md`
+		// sheet (an undeclared `md` is a generic dialog sized from its options).
+		if (anchor === "center" && this.#cx.cols < NARROW_SHEET_COLS && (size === "lg" || own?.size === "md")) {
+			size = "full";
+		}
 		const modal = overlay.focused || overlay.options?.fullscreen === true;
 		const role = own?.role;
 		const head = own?.head;

package/src/native/describe.d.ts

@@ -9,7 +9,7 @@
  *   ]);
  * }
  */
-import type { TspKind, TspProps, TspSpan, TspText } from "@linxiraos/pi-wire";
+import type { TspKind, TspPropNode, TspProps, TspSpan, TspText } from "@linxiraos/pi-wire";
 import type { NativeChild, NativeNode } from "./node";
 /** A node of any kind. */
 export declare function node<K extends TspKind>(k: K, p?: TspProps<K>, c?: readonly NativeChild[], key?: string): NativeNode;
@@ -37,6 +37,12 @@ export declare const EMPTY_NODE: NativeNode;
 export declare function keyed(described: NativeNode, key: string): NativeNode;
 /** `described` mounted but not laid out when `hidden` (cheap visibility toggles keep ids and view state). */
 export declare function withHidden(described: NativeNode, hidden: boolean): NativeNode;
+/**
+ * A described tree as the node tree a prop carries (a `hovercard`): plain
+ * nodes only, since nothing reconciles inside a prop; component children
+ * (which describe themselves per frame) are left out.
+ */
+export declare function propNode(described: NativeNode): TspPropNode;
 /** Stable node key for an arbitrary identity string; keys join into `/` keypaths, so identities are hashed. */
 export declare function stableKey(identity: string): string;
 /** Drop absent entries (`undefined`, `null`, `false`) from a child list. */

package/src/native/describe.ts

@@ -9,7 +9,7 @@
  *   ]);
  * }
  */
-import type { TspKind, TspProps, TspSpan, TspText } from "@linxiraos/pi-wire";
+import type { TspKind, TspPropNode, TspProps, TspSpan, TspText } from "@linxiraos/pi-wire";
 import type { NativeChild, NativeNode } from "./node";
 
 /** A node of any kind. */
@@ -76,6 +76,23 @@ export function withHidden(described: NativeNode, hidden: boolean): NativeNode {
 	return node(described.k, { ...described.p, hidden: true } as TspProps, described.c, described.key);
 }
 
+/**
+ * A described tree as the node tree a prop carries (a `hovercard`): plain
+ * nodes only, since nothing reconciles inside a prop; component children
+ * (which describe themselves per frame) are left out.
+ */
+export function propNode(described: NativeNode): TspPropNode {
+	const out: { k: TspKind; p?: TspProps; c?: TspPropNode[]; key?: string } = { k: described.k };
+	if (described.p !== undefined) out.p = described.p;
+	if (described.c !== undefined) {
+		const children: TspPropNode[] = [];
+		for (const child of described.c) if ("k" in child) children.push(propNode(child));
+		out.c = children;
+	}
+	if (described.key !== undefined) out.key = described.key;
+	return out as TspPropNode;
+}
+
 /** Stable node key for an arbitrary identity string; keys join into `/` keypaths, so identities are hashed. */
 export function stableKey(identity: string): string {
 	return Bun.hash(identity).toString(36);

package/src/native/overlay.d.ts

@@ -10,6 +10,8 @@ import type { TspProps, TspSpan, TspText } from "@linxiraos/pi-wire";
 import { type KeyName } from "../key-hint-format";
 import { type Keybinding } from "../keybindings";
 import type { NativeChild, NativeNode } from "./node";
+/** Below this many columns a centered sheet fills the pane instead of floating with margins. */
+export declare const NARROW_SHEET_COLS = 100;
 /** One footer hint: the keys that trigger it and what it does. */
 export interface NativeHint {
     /** Key ids (`"ctrl+o"`, `"escape"`); alternatives render side by side. */

package/src/native/overlay.ts

@@ -12,6 +12,9 @@ import { getKeybindings, type Keybinding } from "../keybindings";
 import { card, kbd, list, node, row, span, text } from "./describe";
 import type { NativeChild, NativeNode } from "./node";
 
+/** Below this many columns a centered sheet fills the pane instead of floating with margins. */
+export const NARROW_SHEET_COLS = 100;
+
 /** One footer hint: the keys that trigger it and what it does. */
 export interface NativeHint {
 	/** Key ids (`"ctrl+o"`, `"escape"`); alternatives render side by side. */

package/src/native/tone.d.ts

@@ -17,6 +17,8 @@ export interface BackgroundChrome {
 }
 /** Map an omp background token to card tone/role. */
 export declare function backgroundChrome(bg: ThemeBg | undefined): BackgroundChrome;
+/** The omp theme colour an ANSI renderer draws a TSP tone with (the inverse of {@link colorTone}). */
+export declare function toneColor(tone: TspTone): ThemeColor;
 /**
  * Tone of an omp colour used as a severity or border colour; undefined for
  * colours that carry no tone (callers pick their own fallback).

package/src/native/tone.ts

@@ -50,6 +50,28 @@ export function backgroundChrome(bg: ThemeBg | undefined): BackgroundChrome {
 	}
 }
 
+/** The omp theme colour an ANSI renderer draws a TSP tone with (the inverse of {@link colorTone}). */
+export function toneColor(tone: TspTone): ThemeColor {
+	switch (tone) {
+		case "neutral":
+			return "text";
+		case "accent":
+		case "info":
+			return "accent";
+		case "success":
+			return "success";
+		case "warning":
+		case "pending":
+			return "warning";
+		case "error":
+			return "error";
+		case "muted":
+			return "muted";
+		case "user":
+			return "customMessageLabel";
+	}
+}
+
 /**
  * Tone of an omp colour used as a severity or border colour; undefined for
  * colours that carry no tone (callers pick their own fallback).

package/src/overlays/agent-hub.ts

@@ -5,11 +5,11 @@
  * - Table view: every registered agent except Main (Main IS the ambient
  *   chat), live from the global AgentHubRegistry — status, unread irc count,
  *   current/last task, last activity. Navigate with keys, wheel, hover, and
- *   click; `r` revives a parked agent, `x` aborts + releases one.
+ *   click; `r` revives a parked or killed agent, `x` aborts + releases one.
  * - Chat view: per-agent transcript (incremental session-file tail, absorbed
  *   from the old session observer overlay) plus an input line. Submitting
- *   revives a parked agent, then prompts/steers it; the message lands in the
- *   agent's persisted history via the normal prompt path.
+ *   revives a parked or killed agent, then prompts/steers it; the message
+ *   lands in the agent's persisted history via the normal prompt path.
  *
  * Replaces the old SessionObserverOverlayComponent (ctrl+s observer).
  */
@@ -894,7 +894,11 @@ export class AgentHubOverlayComponent<TRecord extends AgentRecordLike = AgentRec
 				id: "revive",
 				label: "Revive",
 				keys: ["r"],
-				disabled: readOnly ?? (selected?.status === "parked" ? undefined : "Only parked agents can be revived"),
+				disabled:
+					readOnly ??
+					(selected?.status === "parked" || selected?.status === "aborted"
+						? undefined
+						: "Only parked or killed agents can be revived"),
 			},
 			{ id: "kill", label: "Kill", keys: ["x"], danger: true, disabled: readOnly ?? (selected ? undefined : true) },
 			{ id: "view", label: "By parent", keys: ["t"], on: this.#viewMode === "tree" },
@@ -2498,15 +2502,15 @@ export class AgentHubOverlayComponent<TRecord extends AgentRecordLike = AgentRec
 	#activateAgent(ref: TRecord): void {
 		this.#notice = undefined;
 		const focusAgent = this.#focusAgent;
-		// Aborted agents and advisor refs are read-only transcripts with no
-		// revivable session; open the in-hub viewer instead of failing ensureLive.
-		if (ref.kind === "advisor" || ref.status === "aborted" || this.#remote || !focusAgent) {
+		// Advisor refs are read-only transcripts with no revivable session; open
+		// the in-hub viewer instead of failing ensureLive.
+		if (ref.kind === "advisor" || this.#remote || !focusAgent) {
 			this.openChat(ref.id);
 			return;
 		}
 		void (async () => {
 			try {
-				await focusAgent(ref.id); // ensureLive inside revives parked agents; no parking, no session files
+				await focusAgent(ref.id); // ensureLive inside revives parked and killed agents
 				this.#onDone();
 			} catch (error) {
 				this.#notice = error instanceof Error ? error.message : String(error);
@@ -2523,8 +2527,8 @@ export class AgentHubOverlayComponent<TRecord extends AgentRecordLike = AgentRec
 			this.#requestRender();
 			return;
 		}
-		if (ref.status !== "parked") {
-			this.#notice = `Agent "${ref.id}" is ${ref.status} — only parked agents can be revived.`;
+		if (ref.status !== "parked" && ref.status !== "aborted") {
+			this.#notice = `Agent "${ref.id}" is ${ref.status} — only parked or killed agents can be revived.`;
 			this.#requestRender();
 			return;
 		}

package/src/overlays/agent-transcript-viewer.ts

@@ -235,10 +235,10 @@ export class AgentTranscriptViewer implements Component {
 		this.#pollTimer.unref?.();
 	}
 
-	/** Advisor and aborted-agent transcripts are read-only. */
+	/** Advisor transcripts are read-only; every other agent revives on send. */
 	get #sendable(): boolean {
 		const ref = this.#deps.registry.get(this.#deps.agentId);
-		if (!ref || ref.kind === "advisor" || ref.status === "aborted") return false;
+		if (!ref || ref.kind === "advisor") return false;
 		return Boolean(this.#deps.remote || this.#deps.lifecycle);
 	}
 

package/src/overlays/agents-hub.ts

@@ -1583,7 +1583,8 @@ export class AgentsHubComponent implements Component {
 		} else {
 			children.push(...this.#describeList());
 		}
-		return node("col", { gap: "sm", grow: 1 }, children, "body");
+		// Zero basis: the body takes the space left of the sidebar instead of sizing to its widest line.
+		return node("col", { gap: "sm", grow: 1, basis: 0, min: { w: 0 } }, children, "body");
 	}
 
 	#statusSpans(): TspSpan[] {

package/src/overlays/approval-dialog.ts

@@ -1,7 +1,8 @@
 /**
  * Tool-approval prompt in the composer's place, presented like the ask
  * dialog: the approval title and its details over a list of choices —
- * Approve, an optional "approve for this session", and Deny — and an action
+ * optional grants (led by a toggle that keeps them across sessions), Approve,
+ * an optional "approve for this session", and Deny — and an action
  * bar. The arrows move between the choices and Enter takes the highlighted
  * one; `app.approval.approve` (Ctrl+Enter by default) approves this call
  * outright and Esc denies. Enter and the approve chord only arm
@@ -45,7 +46,8 @@ export const APPROVE_ARM_MS = 500;
 /** The Deny row while a composer draft holds Enter: sending it denies the call and steers the turn. */
 const DENY_AND_SEND_LABEL = "Deny and send message";
 
-type ApprovalAnswer = "once" | "session" | "deny";
+/** `grant<N>` takes the Nth of {@link ApprovalDialogOptions.grants}; `remember` toggles their lifetime. */
+type ApprovalAnswer = "once" | "session" | "deny" | "remember" | `grant${number}`;
 
 interface ApprovalChoice {
 	readonly label: string;
@@ -57,6 +59,14 @@ interface ApprovalDialogCallbacks {
 	onDeny(): void;
 }
 
+/** A choice that approves the call and remembers more than it: a folder, or the exact target. */
+export interface ApprovalDialogGrant {
+	/** Label while the grant is remembered for this session. */
+	readonly label: string;
+	/** Label once the remember toggle keeps it across sessions. */
+	readonly alwaysLabel: string;
+}
+
 /** The composer mounted beneath the dialog: it receives every key the dialog does not own. */
 export interface ApprovalDialogDraft {
 	/** True while the composer holds a draft — text, attachments, or a paste still landing: keys then edit and send it. */
@@ -80,6 +90,12 @@ interface ApprovalDialogOptions {
 	draft?: ApprovalDialogDraft;
 	/** Offer to approve this and later like calls for the rest of the session, as the row between Approve and Deny. */
 	session?: { label: string; onApprove(): void };
+	/**
+	 * Grants to offer above Approve, led by a toggle that keeps them across sessions; Approve then
+	 * reads "Approve Once". `onGrant` gets the chosen grant and whether the toggle was on.
+	 */
+	grants?: readonly ApprovalDialogGrant[];
+	onGrant?(grant: ApprovalDialogGrant, always: boolean): void;
 }
 
 /** A prompt's detail rows: every line after the title, trailing blanks dropped. */
@@ -100,9 +116,11 @@ export class ApprovalDialogComponent implements Component {
 	readonly #footer = new PanelRows();
 	#scrollOffset = 0;
 	#bodyRows = MAX_DETAIL_ROWS;
-	/** In list order; the first (Approve) is highlighted on mount and Deny is last. */
-	readonly #choices: readonly ApprovalChoice[];
+	/** In list order: the remember toggle and grants (when offered), Approve (highlighted on mount), the session row, Deny last. */
+	#choices: readonly ApprovalChoice[];
 	#choice = 0;
+	/** The remember toggle: grants are kept across sessions while it is on. */
+	#rememberAlways = false;
 	#closed = false;
 	#native: NativeNode | undefined;
 	/** Whether a draft held the keys when {@link #native} was described: it moves the highlight. */
@@ -122,11 +140,8 @@ export class ApprovalDialogComponent implements Component {
 		this.#summary = promptDetails(lines);
 		this.#full =
 			options.fullPrompt === undefined ? undefined : promptDetails(sanitizeDisplayLines(options.fullPrompt));
-		this.#choices = [
-			{ label: "Approve", answer: "once" },
-			...(options.session ? [{ label: options.session.label, answer: "session" as const }] : []),
-			{ label: "Deny", answer: "deny" },
-		];
+		this.#choices = this.#buildChoices();
+		this.#choice = this.#choices.findIndex(choice => choice.answer === "once");
 		this.#panel = new OverlayPanel(title, "zeta.overlay.approval");
 		this.#footer.setHeight(1);
 		this.#panel.addChild(this.#body);
@@ -149,6 +164,33 @@ export class ApprovalDialogComponent implements Component {
 		}
 	}
 
+	#buildChoices(): ApprovalChoice[] {
+		const grants = this.options.grants ?? [];
+		const glyph = this.#rememberAlways ? theme.checkbox.checked : theme.checkbox.unchecked;
+		return [
+			...(grants.length > 0 ? [{ label: `${glyph} Remember across sessions`, answer: "remember" as const }] : []),
+			...grants.map((grant, index) => ({
+				label: this.#rememberAlways ? grant.alwaysLabel : grant.label,
+				answer: `grant${index}` as const,
+			})),
+			{ label: grants.length > 0 ? "Approve Once" : "Approve", answer: "once" },
+			...(this.options.session ? [{ label: this.options.session.label, answer: "session" as const }] : []),
+			{ label: "Deny", answer: "deny" },
+		];
+	}
+
+	/** Run a choice: the remember toggle flips the grants' lifetime in place, every other choice answers. */
+	#take(answer: ApprovalAnswer): void {
+		if (answer !== "remember") {
+			this.#finish(answer);
+			return;
+		}
+		this.#rememberAlways = !this.#rememberAlways;
+		this.#choices = this.#buildChoices();
+		this.#native = undefined;
+		this.options.tui?.requestRender();
+	}
+
 	invalidate(): void {
 		this.#native = undefined;
 		this.#panel.invalidate();
@@ -191,7 +233,7 @@ export class ApprovalDialogComponent implements Component {
 		else if (matchesSelectPageUp(keyData)) this.#scroll(-page);
 		else if (matchesSelectPageDown(keyData)) this.#scroll(page);
 		else if (getKeybindings().matches(keyData, "tui.select.confirm")) {
-			if (performance.now() >= this.#armedAt) this.#finish(this.#choices[this.#choice]!.answer);
+			if (performance.now() >= this.#armedAt) this.#take(this.#choices[this.#choice]!.answer);
 		}
 		// Enter never reaches an empty composer: it would submit nothing, or interrupt the run.
 		else if (draft && !getKeybindings().matches(keyData, "tui.input.submit")) this.#editDraft(draft, keyData);
@@ -295,7 +337,7 @@ export class ApprovalDialogComponent implements Component {
 			tone: "error",
 			title: `Deny this call${cancelKey ? `  ${formatTooltipKey(cancelKey)}` : ""}`,
 		});
-		const approve = actionButton("Approve", "approve", {
+		const approve = actionButton(this.options.grants?.length ? "Approve Once" : "Approve", "approve", {
 			...(approveKey ? { keys: approveKey } : {}),
 			tone: "accent",
 			title: `Approve this call${approveKey ? `  ${formatTooltipKey(approveKey)}` : ""}`,
@@ -350,7 +392,7 @@ export class ApprovalDialogComponent implements Component {
 		}
 		if ((event.type !== "select" && event.type !== "activate") || leafKey(event.key) !== "choices") return;
 		const choice = this.#choices.find(candidate => candidate.answer === event.item);
-		if (choice) this.#finish(choice.answer);
+		if (choice) this.#take(choice.answer);
 	}
 
 	/** Detail rows at `width`: one clipped row per detail, or wrapped rows once expanded. */
@@ -384,6 +426,10 @@ export class ApprovalDialogComponent implements Component {
 		this.#countdown?.dispose();
 		if (answer === "once") this.callbacks.onApprove();
 		else if (answer === "session") this.options.session?.onApprove();
-		else this.callbacks.onDeny();
+		else if (answer.startsWith("grant")) {
+			const grant = this.options.grants?.[Number(answer.slice("grant".length))];
+			if (grant) this.options.onGrant?.(grant, this.#rememberAlways);
+			else this.callbacks.onDeny();
+		} else this.callbacks.onDeny();
 	}
 }

package/src/overlays/hub-frame.ts

@@ -96,7 +96,8 @@ export function describeHubSidebar<TEntry extends SidebarEntry<string>>(
 			),
 		);
 	}
-	return node("list", { selected: selectedId }, items, key);
+	// The sidebar keeps its width: a body line wider than the pane must not squeeze it.
+	return node("list", { selected: selectedId, shrink: 0 }, items, key);
 }
 
 /**

package/src/overlays/jobs-panel.ts

@@ -6,17 +6,19 @@
  * (cwd, live pids, exit code, artifact) and live output.
  */
 import type { TspSpan, TspTone } from "@linxiraos/pi-wire";
-import { formatDuration } from "@linxiraos/pi-utils";
+import { formatDuration, sanitizeText } from "@linxiraos/pi-utils";
 import type { Component } from "../tui";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../keybinding-matchers";
 import { matchesKey } from "../keys";
-import { truncateToWidth } from "../utils";
+import { replaceTabs, truncateToWidth, wrapTextWithAnsi } from "../utils";
 import { collapseCommand } from "../apps/ps-data";
+import { PREVIEW_LIMITS, shortenEmbeddedPaths } from "../render/render-utils";
 import { ansi, code, col, compact, item, node, row, span, stableKey, text } from "../native/describe";
 import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
 import { actionBar, actionButton, selectList } from "../native/overlay";
 import { theme } from "../theme/theme";
 import { buildJobTree, type JobTreeAgent, type JobTreeRow, jobTreeGuide } from "./job-tree";
+import { describeJobWidget, type JobWidgetView, renderJobWidgetLines } from "../tools/job-widget";
 
 /** One async job as the session snapshots it. */
 export interface JobsPanelJob {
@@ -54,6 +56,8 @@ export interface JobsPanelDetail {
 	readonly output?: string;
 	/** Artifact holding the full output when `output` is cut. */
 	readonly artifactId?: string;
+	/** The job's live widget (frozen once it settles), drawn above the output. */
+	readonly widget?: JobWidgetView;
 }
 
 /** The session behind a {@link JobsSheet}. */
@@ -149,6 +153,7 @@ export class JobsSheet implements Component {
 			detail?.pids.join(" "),
 			detail?.exitCode,
 			detail?.artifactId,
+			detail?.widget ? `${detail.widget.updatedAt}:${detail.widget.state}` : "",
 			jobs.some(job => job.status === "running") ? Math.floor(now / 1000) : "",
 		].join("|");
 		const output = detail?.output;
@@ -198,6 +203,17 @@ export class JobsSheet implements Component {
 		}
 		const detail = selected && this.#source.inspect(selected.id);
 		if (detail) {
+			// Rows show the cut label; the selected job's command wraps here,
+			// bounded so a long script never pushes the facts and output off the sheet.
+			if (detail.command) {
+				const commandRows = wrapTextWithAnsi(
+					shortenEmbeddedPaths(replaceTabs(sanitizeText(detail.command))),
+					Math.max(1, width - 3),
+				);
+				for (const line of commandRows.slice(0, PREVIEW_LIMITS.EXPANDED_LINES)) lines.push(`   ${line}`);
+				const hidden = commandRows.length - PREVIEW_LIMITS.EXPANDED_LINES;
+				if (hidden > 0) lines.push(truncateToWidth(`   … ${hidden} more command lines`, width));
+			}
 			const facts = compact([
 				detail.cwd && `cwd ${detail.cwd}`,
 				detail.pids.length > 0 && `pid ${detail.pids.join(", ")}`,
@@ -205,6 +221,11 @@ export class JobsSheet implements Component {
 				detail.artifactId && `artifact://${detail.artifactId}`,
 			]);
 			if (facts.length > 0) lines.push(truncateToWidth(`   ${facts.join(" · ")}`, width));
+			if (detail.widget) {
+				for (const line of renderJobWidgetLines(detail.widget, Math.max(0, width - 3), theme)) {
+					lines.push(`   ${line}`);
+				}
+			}
 			for (const line of this.#tailLines(selected.id, detail.output ?? "")) {
 				if (line) lines.push(truncateToWidth(`   ${line}`, width));
 			}
@@ -413,6 +434,7 @@ function describeDetail(
 			? code(command, { lang: "bash", wrap: true, preview: { lines: 4 }, role: "zeta.jobs.command" })
 			: text(job.label, { role: "zeta.jobs.title", wrap: "word" }),
 		facts.length > 0 && node("kv", { items: facts, role: "zeta.jobs.facts" }),
+		detail?.widget && node("col", { role: "zeta.jobs.widget" }, [describeJobWidget(detail.widget)], "widget"),
 		node(
 			"col",
 			{ role: "zeta.jobs.out", gap: "sm" },

package/src/overlays/model-browser.ts

@@ -63,6 +63,7 @@ export type ModelRole =
 	| "memory"
 	| "task"
 	| "advisor"
+	| "widget"
 	| "image"
 	| "web"
 	| "speech"
@@ -79,6 +80,7 @@ export const MODEL_ROLE_IDS: ModelRole[] = [
 	"memory",
 	"task",
 	"advisor",
+	"widget",
 	"image",
 	"web",
 	"speech",
@@ -96,6 +98,7 @@ export const CHAT_MODEL_ROLE_IDS: ModelRole[] = [
 	"memory",
 	"task",
 	"advisor",
+	"widget",
 ];
 export const KIND_ROLE_IDS: ModelRole[] = ["image", "web", "speech", "dictation", "judge"];
 

package/src/overlays/model-hub.ts

@@ -3046,7 +3046,8 @@ export class ModelHubComponent implements Component {
 				this.#browser,
 			);
 		}
-		return node("col", { gap: "sm", grow: 1 }, children, "body");
+		// Zero basis: the body takes the space left of the sidebar instead of sizing to its widest line.
+		return node("col", { gap: "sm", grow: 1, basis: 0, min: { w: 0 } }, children, "body");
 	}
 
 	#describeStatus(): NativeNode {

package/src/prompt/attachment-chips.ts

@@ -93,7 +93,7 @@ export class AttachmentChipsBand implements Component {
 					nativeImageNode(Buffer.from(image.data, "base64"), image.mimeType);
 				images.set(image, native);
 				content = node("image", {
-					...native.p,
+					...(native.k === "image" ? native.p : undefined),
 					alt: title,
 					w: dims?.width,
 					h: dims?.height,

package/src/render/output-block.d.ts

@@ -10,6 +10,8 @@ import type { State } from "./types";
 export interface OutputBlockOptions {
     header?: string;
     headerMeta?: string;
+    /** Facts drawn inside the bottom border (`╰── Wall 0.16s · Timeout 300s ──╯`). */
+    footerMeta?: string;
     state?: State;
     sections?: Array<{
         label?: string;

package/src/render/output-block.ts

@@ -17,6 +17,8 @@ import { getStateBgColor, Hasher, padToWidth } from "./utils";
 export interface OutputBlockOptions {
 	header?: string;
 	headerMeta?: string;
+	/** Facts drawn inside the bottom border (`╰── Wall 0.16s · Timeout 300s ──╯`). */
+	footerMeta?: string;
 	state?: State;
 	sections?: Array<{ label?: string; lines: readonly string[]; separator?: boolean }>;
 	width: number;
@@ -46,7 +48,7 @@ export function isFramedBlockComponent(component: Component): boolean {
 
 type BlockRow =
 	| { kind: "bar"; leftChar: string; rightChar: string; label?: string; meta?: string }
-	| { kind: "bottom"; leftChar: string; rightChar: string }
+	| { kind: "bottom"; leftChar: string; rightChar: string; meta?: string }
 	| { kind: "content"; inner: string }
 	| { kind: "sixel"; raw: string };
 
@@ -157,7 +159,26 @@ export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): st
 		}
 	}
 
-	rows.push({ kind: "bottom", leftChar: theme.boxRound.bottomLeft, rightChar: theme.boxRound.bottomRight });
+	// Footer facts ride the bottom border only when they fit whole; a clipped
+	// border would silently drop trailing facts (exit code, artifact id), so an
+	// overflowing footer wraps into body rows above a plain border instead.
+	const footerMeta = options.footerMeta;
+	const footerFits =
+		footerMeta === undefined ||
+		visibleWidth(` ${footerMeta} `) <=
+			lineWidth - visibleWidth(`${theme.boxRound.bottomLeft}${cap}`) - visibleWidth(theme.boxRound.bottomRight);
+	if (footerMeta !== undefined && !footerFits) {
+		for (const wrappedLine of wrapTextWithAnsi(footerMeta, contentWidth)) {
+			const innerPadding = padding(Math.max(0, contentWidth - visibleWidth(wrappedLine)));
+			rows.push({ kind: "content", inner: `${wrappedLine}${innerPadding}` });
+		}
+	}
+	rows.push({
+		kind: "bottom",
+		leftChar: theme.boxRound.bottomLeft,
+		rightChar: theme.boxRound.bottomRight,
+		meta: footerFits ? footerMeta : undefined,
+	});
 
 	const H = rows.length;
 
@@ -182,14 +203,6 @@ export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): st
 		return `${border(leftGlyphs)}${trimmedLabel}${border(fillGlyphs)}${border(rightGlyph)}`;
 	};
 
-	const renderBottom = (row: { leftChar: string; rightChar: string }): string => {
-		const leftGlyphs = `${row.leftChar}${cap}`;
-		const rightGlyph = row.rightChar;
-		const fillCount = Math.max(0, lineWidth - visibleWidth(leftGlyphs) - visibleWidth(rightGlyph));
-		const fillGlyphs = h.repeat(fillCount);
-		return `${border(leftGlyphs)}${border(fillGlyphs)}${border(rightGlyph)}`;
-	};
-
 	const renderContent = (inner: string): string =>
 		`${border(v)}${contentLeftPadding}${inner}${contentRightPadding}${border(v)}`;
 
@@ -201,8 +214,7 @@ export function renderOutputBlock(options: OutputBlockOptions, theme: Theme): st
 			lines.push(row.raw);
 			continue;
 		}
-		const line =
-			row.kind === "bar" ? renderBar(row) : row.kind === "bottom" ? renderBottom(row) : renderContent(row.inner);
+		const line = row.kind === "bar" || row.kind === "bottom" ? renderBar(row) : renderContent(row.inner);
 		lines.push(padToWidth(clipFrame ? truncateToWidth(line, lineWidth, Ellipsis.Omit) : line, lineWidth, bgFn));
 	}
 
@@ -360,6 +372,7 @@ export class CachedOutputBlock {
 		);
 		h.optional(options.header);
 		h.optional(options.headerMeta);
+		h.optional(options.footerMeta);
 		h.optional(options.state);
 		h.optional(options.borderColor);
 		h.bool(options.applyBg ?? true);

package/src/render/tool-card.d.ts

@@ -22,6 +22,8 @@ export interface ToolCardSnapshot {
     /** Structured status header, rendered by the shared status-line primitive. */
     status?: StatusLineOptions;
     headerMeta?: string;
+    /** Short facts drawn inside the frame's bottom border (framed); a trailing row otherwise. */
+    footerMeta?: string;
     phase?: ToolCardPhase;
     body?: ToolCardContent;
     sections?: readonly ToolCardSection[];