@oh-my-pi/pi-tui 18.12.2 → 18.12.3

package/src/chat/skill-message.ts

@@ -13,8 +13,8 @@ import { fileHyperlink } from "../render";
 import { collapseSkillTokens, skillChipLabel, skillChipStyle, skillToken } from "../prompt/composer-attachments";
 import { type UserBubbleOptions, UserMessageComponent, userBubbleColor } from "./user-message";
 import type { TspSpan } from "@oh-my-pi/pi-wire";
-import { card, md, node, span, text } from "../native/describe";
-import { type NativeChild, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import { card, md, node, span } from "../native/describe";
+import { type NativeChild, type NativeNode, type NativeUiEvent } from "../native/node";
 import { Memo } from "../native/memo";
 
 /**
@@ -63,15 +63,13 @@ export class SkillMessageComponent extends Container {
 	}
 
 	handleNativeEvent(event: NativeUiEvent): void {
-		const expanded = rootToggleExpanded(event);
-		if (expanded !== undefined) this.setExpanded(expanded);
+		if (event.type === "toggle" && event.key === "prompt") this.setExpanded(!event.collapsed);
 	}
 
 	/**
-	 * A user-toned card (role `omp.skill`): the skill chip (linked to its
-	 * SKILL.md) and prompt size in the head, the user's draft as markdown, and
-	 * the loaded skill prompt, described only while expanded because it can
-	 * be large.
+	 * A user-toned card (role `omp.skill`): the skill chip and prompt size in
+	 * the head, the user's draft always visible, and only the loaded skill
+	 * prompt behind a disclosure.
 	 */
 	override describe(): NativeNode {
 		return this.#native.get([this.#expanded], () => {
@@ -100,20 +98,20 @@ export class SkillMessageComponent extends Container {
 			const children: NativeChild[] = [];
 			if (draft) children.push(md(draft));
 			const promptText = this.#expanded ? this.#extractText() : "";
-			if (promptText) {
-				children.push(
-					node(
-						"section",
-						{ head: [span("prompt", "muted")], role: "omp.skill.prompt" },
-						[md(promptText)],
-						"prompt",
-					),
-				);
-			}
-			return card(
-				{ role: "omp.skill", tone: "user", head, collapsible: true, collapsed: !this.#expanded },
-				children.length > 0 ? children : [text([span(label, "muted")])],
+			children.push(
+				node(
+					"section",
+					{
+						head: [span("prompt", "muted")],
+						role: "omp.skill.prompt",
+						collapsible: true,
+						collapsed: !this.#expanded,
+					},
+					promptText ? [md(promptText)] : [],
+					"prompt",
+				),
 			);
+			return card({ role: "omp.skill", tone: "user", head }, children);
 		});
 	}
 

package/src/components/editor.ts

@@ -704,6 +704,8 @@ export class Editor implements Component, Focusable {
 		| { line: number; startCol: number; endCol: number; original: string; cursorOffset: number }
 		| undefined;
 	#autocompletePrefix: string = "";
+	/** False while the popup's untouched top row is a description-only slash hit ({@link AutocompleteItem.descriptionMatch}): Enter then submits the typed text. */
+	#enterAcceptsSelection = true;
 	#autocompleteRequestId: number = 0;
 	#autocompletePendingRequest: AutocompleteRequest | undefined;
 	#autocompleteRequestRunning = false;
@@ -1916,6 +1918,7 @@ export class Editor implements Component, Focusable {
 						this.onAutocompleteUpdate?.();
 					} else {
 						this.#autocompleteList.handleInput(data);
+						this.#enterAcceptsSelection = true;
 						this.onAutocompleteUpdate?.();
 						return;
 					}
@@ -1960,8 +1963,11 @@ export class Editor implements Component, Focusable {
 					// Check for stale autocomplete state while an async refresh is pending
 					const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
 					const currentTextBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
-					if (!this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected)) {
-						// Autocomplete is stale - cancel and fall through to normal submission
+					if (
+						!this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected) ||
+						!this.#enterAcceptsSelection
+					) {
+						// Stale, or a description-only hit the user never selected: submit the typed text.
 						this.#cancelAutocomplete();
 					} else {
 						if (selected && this.#autocompleteProvider) {
@@ -1993,10 +1999,12 @@ export class Editor implements Component, Focusable {
 					if (
 						!selected ||
 						!this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected) ||
-						this.#selectedSlashArgumentIsAlreadyTyped(selected)
+						this.#selectedSlashArgumentIsAlreadyTyped(selected) ||
+						!this.#enterAcceptsSelection
 					) {
-						// Stale, or accepting would only append whitespace to an already fully
-						// typed slash-command argument (`/mcp list` + Enter): cancel and fall
+						// Stale, accepting would only append whitespace to an already fully
+						// typed slash-command argument (`/mcp list` + Enter), or the row is a
+						// description-only hit the user never selected: cancel and fall
 						// through to normal submission instead of swallowing the keypress.
 						this.#cancelAutocomplete();
 					} else {
@@ -2140,9 +2148,10 @@ export class Editor implements Component, Focusable {
 				) {
 					const syncResult = this.#autocompleteProvider.trySyncSlashCompletion(textBeforeCursor);
 					// The collapsed `/skill:` namespace row is not a runnable command; Enter submits
-					// immediately after applying, so only a real command may be completed here.
+					// immediately after applying, so only a real command may be completed here, and
+					// only one whose name matches: a description-only hit would run an unrelated command.
 					const selected = syncResult?.items.find(item => item.value !== SKILL_NAMESPACE);
-					if (syncResult && selected) {
+					if (syncResult && selected && !selected.descriptionMatch) {
 						// Invalidate any pending async autocomplete so its stale results are discarded
 						this.#autocompleteRequestId += 1;
 						// Apply the best match and submit the completed command
@@ -4871,6 +4880,7 @@ export class Editor implements Component, Focusable {
 	): void {
 		this.#autocompletePrefix = suggestions.prefix;
 		this.#autocompleteList = this.#createAutocompleteList(suggestions.prefix, suggestions.items);
+		this.#enterAcceptsSelection = !suggestions.items[0]?.descriptionMatch;
 		this.#autocompleteState = state;
 		this.onAutocompleteUpdate?.();
 	}

package/src/components/image.ts

@@ -1,5 +1,6 @@
 import { encodeSixelAsync } from "@oh-my-pi/pi-natives";
 import { getKittyGraphics } from "../kitty-graphics";
+import { ensureSixelRasterWidth } from "../sixel";
 import {
 	encodeSixelNow,
 	getCellDimensions,
@@ -736,7 +737,7 @@ export class Image implements Component {
 		const request: SixelEncode = { widthPx, heightPx, backgroundRgb };
 		this.#sixel = request;
 		const settle = (sequence: string | null): void => {
-			request.sequence = sequence;
+			request.sequence = sequence === null ? null : ensureSixelRasterWidth(sequence);
 			if (this.#sixel !== request || getTerminalBackgroundColor() !== backgroundRgb) return;
 			this.invalidate();
 			if (this.#options.requestRender) this.#options.requestRender();
@@ -845,9 +846,9 @@ export class Image implements Component {
 				// height. First (rows-1) lines are empty (TUI clears them); the last
 				// saves the final-row cursor, moves up to the image origin, emits the
 				// image sequence, then restores the final-row cursor. When the block
-				// straddles the viewport top, the renderer rewrites this line to the
-				// visible slice (encodeKittyPlacementLine) from the geometry
-				// registered below.
+				// straddles the viewport top, the renderer crops the source raster
+				// for SIXEL or rewrites the Kitty placement's visible source slice
+				// from the geometry registered below.
 				if (this.#imageId != null && this.#budget !== undefined) {
 					this.#budget.registerPlacementGeometry(
 						this.#imageId,

package/src/components/sparkline.ts

@@ -0,0 +1,89 @@
+/**
+ * One-row block sparklines (`▁▂▃▅▇█`) for ANSI renderers: the usage history
+ * in `omp usage`, a job widget's series in the `wait` card and status line.
+ */
+
+/** Block glyphs from lowest to highest. */
+export const SPARK_LEVELS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"] as const;
+
+/** How {@link renderSparkline} maps values to glyphs and styles them. */
+export interface SparklineOptions {
+	/** Domain low end; values at or below it draw the lowest block. Default 0. */
+	readonly min?: number;
+	/** Domain high end; values at or above it draw the full block. Default the largest value. */
+	readonly max?: number;
+	/** Styles one glyph; `fraction` is the value's 0–1 position in the domain. */
+	readonly style?: (glyph: string, value: number, fraction: number) => string;
+	/** What a missing value draws, already styled. Default a space. */
+	readonly gap?: string;
+}
+
+/** The block glyph for a 0–1 fraction of the domain. */
+export function sparkGlyph(fraction: number): string {
+	const clamped = Number.isFinite(fraction) ? Math.min(Math.max(fraction, 0), 1) : 0;
+	return SPARK_LEVELS[Math.min(SPARK_LEVELS.length - 1, Math.floor(clamped * SPARK_LEVELS.length))]!;
+}
+
+/** One cell per value, oldest first; `undefined` (and non-finite) values draw the gap. */
+export function renderSparkline(values: readonly (number | undefined)[], options: SparklineOptions = {}): string {
+	const min = options.min ?? 0;
+	let max = options.max;
+	if (max === undefined) {
+		max = min;
+		for (const value of values) if (value !== undefined && Number.isFinite(value) && value > max) max = value;
+	}
+	const span = max - min;
+	const gap = options.gap ?? " ";
+	let out = "";
+	for (const value of values) {
+		if (value === undefined || !Number.isFinite(value)) {
+			out += gap;
+			continue;
+		}
+		const fraction = span > 0 ? (value - min) / span : value > min ? 1 : 0;
+		const glyph = sparkGlyph(fraction);
+		out += options.style ? options.style(glyph, value, Math.min(Math.max(fraction, 0), 1)) : glyph;
+	}
+	return out;
+}
+
+/**
+ * `values` squeezed into at most `cells` points by equal-count bucket means,
+ * newest bucket last; shorter series come back unchanged.
+ */
+export function fitSparkValues(values: readonly number[], cells: number): readonly number[] {
+	const count = Math.max(0, Math.floor(cells));
+	if (values.length <= count) return values;
+	const out: number[] = [];
+	for (let bucket = 0; bucket < count; bucket++) {
+		const from = Math.floor((bucket * values.length) / count);
+		const to = Math.max(from + 1, Math.floor(((bucket + 1) * values.length) / count));
+		let sum = 0;
+		for (let i = from; i < to; i++) sum += values[i]!;
+		out.push(sum / (to - from));
+	}
+	return out;
+}
+
+/**
+ * The largest value per time bucket over `[sinceMs, nowMs]`, `cells` buckets
+ * wide; buckets without a point are `undefined` (a gap in the sparkline).
+ */
+export function peakBuckets(
+	points: Iterable<{ readonly at: number; readonly value: number }>,
+	sinceMs: number,
+	nowMs: number,
+	cells: number,
+): (number | undefined)[] {
+	const span = Math.max(1, nowMs - sinceMs);
+	const count = Math.max(0, Math.floor(cells));
+	const buckets: (number | undefined)[] = Array.from({ length: count }, () => undefined);
+	if (count === 0) return buckets;
+	for (const point of points) {
+		const offset = Math.floor(((point.at - sinceMs) / span) * count);
+		const index = Math.min(count - 1, Math.max(0, offset));
+		const prev = buckets[index];
+		buckets[index] = prev === undefined ? point.value : Math.max(prev, point.value);
+	}
+	return buckets;
+}

package/src/index.ts

@@ -28,6 +28,7 @@ export * from "./components/section";
 export * from "./components/select-list";
 export * from "./components/settings-list";
 export * from "./components/spacer";
+export * from "./components/sparkline";
 export * from "./components/tab-bar";
 export * from "./components/table";
 export * from "./components/text";

package/src/native/describe.ts

@@ -9,7 +9,7 @@
  *   ]);
  * }
  */
-import type { TspKind, TspProps, TspSpan, TspText } from "@oh-my-pi/pi-wire";
+import type { TspKind, TspPropNode, TspProps, TspSpan, TspText } from "@oh-my-pi/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/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/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, "omp.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/jobs-panel.ts

@@ -17,6 +17,7 @@ import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "..
 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 +55,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 +152,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;
@@ -205,6 +209,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 +422,7 @@ function describeDetail(
 			? code(command, { lang: "bash", wrap: true, preview: { lines: 4 }, role: "omp.jobs.command" })
 			: text(job.label, { role: "omp.jobs.title", wrap: "word" }),
 		facts.length > 0 && node("kv", { items: facts, role: "omp.jobs.facts" }),
+		detail?.widget && node("col", { role: "omp.jobs.widget" }, [describeJobWidget(detail.widget)], "widget"),
 		node(
 			"col",
 			{ role: "omp.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/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,