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

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

@@ -6,17 +6,19 @@
  * (cwd, live pids, exit code, artifact) and live output.
  */
 import type { TspSpan, TspTone } from "@oh-my-pi/pi-wire";
-import { formatDuration } from "@oh-my-pi/pi-utils";
+import { formatDuration, sanitizeText } from "@oh-my-pi/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: "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,

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.ts

@@ -43,6 +43,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[];
@@ -219,6 +221,7 @@ export class ToolCard implements Component {
 				previousOptions?.width === width &&
 				previousOptions.header === header &&
 				previousOptions.headerMeta === snapshot.headerMeta &&
+				previousOptions.footerMeta === snapshot.footerMeta &&
 				previousOptions.state === state &&
 				previousOptions.applyBg === snapshot.applyBg &&
 				previousOptions.contentPaddingLeft === snapshot.contentPaddingLeft &&
@@ -230,6 +233,7 @@ export class ToolCard implements Component {
 			const blockOptions: OutputBlockOptions = reusableOptions ?? {
 				header,
 				headerMeta: snapshot.headerMeta,
+				footerMeta: snapshot.footerMeta,
 				state,
 				sections,
 				width,
@@ -251,6 +255,7 @@ export class ToolCard implements Component {
 			if (section.label) lines.push(section.label);
 			lines.push(...section.lines);
 		}
+		if (snapshot.footerMeta) lines.push(snapshot.footerMeta);
 		const text = lines.join("\n");
 		const key = `${width}:${text.length}:${Bun.hash(text).toString(36)}:${state ?? "info"}:${snapshot.applyBg ?? true}`;
 		if (key !== this.#plainKey) {
@@ -279,6 +284,7 @@ export class ToolCard implements Component {
 		}
 		if (snapshot.footer)
 			slotInputs.push({ label: undefined, separator: slotInputs.length > 0, content: snapshot.footer });
+		if (snapshot.footerMeta) slotInputs.push({ label: undefined, separator: false, content: [snapshot.footerMeta] });
 
 		const nextChildren: Component[] = [];
 		const slots = slotInputs.map((input, index) => {

package/src/sixel.ts

@@ -0,0 +1,185 @@
+/**
+ * Give an empty first band an explicit transparent width. Zellij derives the
+ * decoded image width from its first pixel row, ignoring the raster minimum
+ * for transparent images; an omitted band otherwise makes the image invisible.
+ * Palette definitions stay before drawing so cropping can still parse them.
+ */
+export function ensureSixelRasterWidth(sequence: string): string {
+	const prefix = /^(\x1bP[0-9;]*q"\d+;\d+;(\d+);\d+(?:#\d+(?:;[12];\d+;\d+;\d+)?|\$)*)(?=-)/.exec(sequence);
+	if (!prefix) return sequence;
+	return `${prefix[1]}!${prefix[2]}?$${sequence.slice(prefix[1]!.length)}`;
+}
+
+interface SixelRun {
+	bits: number;
+	count: number;
+}
+
+interface SixelBand {
+	/** The selected register is inherited across graphics newlines. */
+	color: number;
+	tokens: (SixelRun | string)[];
+}
+
+function invalidSixel(reason: string): never {
+	throw new Error(`Cannot crop SIXEL: ${reason}`);
+}
+
+function sixelInteger(value: string): number {
+	const number = Number(value);
+	if (!Number.isSafeInteger(number)) invalidSixel("integer exceeds the safe range");
+	return number;
+}
+
+function appendRun(output: string[], bits: number, count: number): void {
+	const character = String.fromCharCode(63 + bits);
+	// Keep repeats compressed, including long transparent gaps.
+	output.push(count > 3 ? `!${count}${character}` : character.repeat(count));
+}
+
+function appendBand(output: string[], band: SixelBand | undefined, shift: number, mask: number): void {
+	if (!band) return;
+	output.push(`#${band.color}`);
+	for (const token of band.tokens) {
+		if (typeof token === "string") {
+			output.push(token);
+		} else {
+			const bits = shift >= 0 ? token.bits >>> shift : token.bits << -shift;
+			appendRun(output, bits & mask, token.count);
+		}
+	}
+}
+
+/**
+ * Crop integer pixel rows from a raw (not tmux-wrapped) SIXEL DCS image.
+ * Runs are shifted between adjacent six-pixel bands, never decoded to pixels.
+ * Palette selections, overdraw order, transparent gaps and DCS background mode
+ * are retained. A nonpositive crop returns the original sequence unchanged.
+ *
+ * The supported grammar is the native icy_sixel encoder's: one leading raster
+ * declaration with positive dimensions and square pixels, prefix RGB/HLS palette
+ * definitions, register selections, sixel characters, repeats, `$` and `-`.
+ * ESC DCS/ST framing only, as the TUI emits it. Palette definitions after
+ * drawing, additional raster declarations, other controls and malformed input
+ * throw; forwarding an unsupported image uncropped would reintroduce raster
+ * overflow.
+ *
+ * Without maxHeightPixels the crop is exact, including a partial final band with
+ * zero padding bits and the exact declared raster height. Some terminals still
+ * allocate all six rows of that final band. The TUI supplies its available pixel
+ * height to cap the result at a whole-band boundary, matching the native encoder's
+ * policy of dropping bottom pixels rather than overwriting the following row.
+ */
+export function cropSixelTop(sequence: string, pixels: number, maxHeightPixels?: number): string {
+	if (pixels <= 0) return sequence;
+	if (!Number.isSafeInteger(pixels)) throw new RangeError("SIXEL crop must be an integer pixel count");
+	if (maxHeightPixels !== undefined && (!Number.isFinite(maxHeightPixels) || maxHeightPixels < 0)) {
+		throw new RangeError("SIXEL height limit must be a nonnegative finite pixel count");
+	}
+
+	const header = /^\x1bP[0-9;]*q/.exec(sequence);
+	if (!header) invalidSixel("missing DCS introducer");
+	if (!sequence.endsWith("\x1b\\")) invalidSixel("missing string terminator");
+	const end = sequence.length - 2;
+	const tokenPattern = /[?-~]|!\d+[?-~]|#\d+(?:;\d+)*|"\d+(?:;\d+)*|[-$]/y;
+	const palette: string[] = [];
+	const bands: SixelBand[] = [];
+	let band: SixelBand = { color: 0, tokens: [] };
+	let color = 0;
+	let drawing = false;
+	let raster: string[] | undefined;
+	let width = 0;
+	let height = 0;
+	let x = 0;
+	let y = 0;
+	let dataWidth = 0;
+	let paintedHeight = 0;
+	let cursor = header[0].length;
+
+	while (cursor < end) {
+		tokenPattern.lastIndex = cursor;
+		const match = tokenPattern.exec(sequence);
+		if (!match || tokenPattern.lastIndex > end) invalidSixel(`unsupported token at offset ${cursor}`);
+		const token = match[0];
+		cursor = tokenPattern.lastIndex;
+		switch (token[0]) {
+			case '"': {
+				if (raster || drawing) invalidSixel("raster attributes must occur once before drawing");
+				raster = token.slice(1).split(";");
+				if (raster.length !== 4) invalidSixel("expected four raster attributes");
+				const pan = sixelInteger(raster[0]!);
+				const pad = sixelInteger(raster[1]!);
+				width = sixelInteger(raster[2]!);
+				height = sixelInteger(raster[3]!);
+				if (pan === 0 || pan !== pad) invalidSixel("only square pixels are supported");
+				if (width === 0 || height === 0) invalidSixel("raster dimensions must be positive");
+				break;
+			}
+			case "#": {
+				const parameters = token.slice(1).split(";");
+				color = sixelInteger(parameters[0]!);
+				if (parameters.length > 1) {
+					if (drawing) invalidSixel("palette definitions must precede drawing");
+					if (parameters.length !== 5 || (parameters[1] !== "1" && parameters[1] !== "2")) {
+						invalidSixel("expected an RGB or HLS palette definition");
+					}
+					for (let index = 2; index < parameters.length; index++) sixelInteger(parameters[index]!);
+					palette.push(token);
+				}
+				band.tokens.push(`#${color}`);
+				break;
+			}
+			case "$":
+				drawing = true;
+				x = 0;
+				band.tokens.push(token);
+				break;
+			case "-":
+				drawing = true;
+				bands.push(band);
+				band = { color, tokens: [] };
+				x = 0;
+				y += 6;
+				break;
+			default: {
+				drawing = true;
+				const count = token[0] === "!" ? sixelInteger(token.slice(1, -1)) : 1;
+				if (count === 0) invalidSixel("repeat count must be positive");
+				const bits = token.charCodeAt(token.length - 1) - 63;
+				x += count;
+				if (!Number.isSafeInteger(x)) invalidSixel("run width exceeds the safe range");
+				dataWidth = Math.max(dataWidth, x);
+				if (bits !== 0) paintedHeight = Math.max(paintedHeight, y + 32 - Math.clz32(bits));
+				band.tokens.push({ bits, count });
+				break;
+			}
+		}
+	}
+	bands.push(band);
+	if (!raster) invalidSixel("missing raster dimensions");
+	// Raster attributes specify a minimum, not a clip rectangle. Account for
+	// drawing beyond them rather than silently discarding those source pixels.
+	width = Math.max(width, dataWidth);
+	height = Math.max(height, paintedHeight);
+	let croppedHeight = Math.max(0, height - pixels);
+	if (maxHeightPixels !== undefined) {
+		croppedHeight = Math.min(croppedHeight, Math.floor(maxHeightPixels / 6) * 6);
+	}
+	if (croppedHeight === 0) return "";
+
+	const output = [header[0], `"${raster[0]};${raster[1]};${width};${croppedHeight}`, ...palette];
+	const firstBand = Math.floor(pixels / 6);
+	const shift = pixels % 6;
+	const bandCount = Math.ceil(croppedHeight / 6);
+	for (let index = 0; index < bandCount; index++) {
+		if (index > 0) output.push("-");
+		const mask = (1 << Math.min(6, croppedHeight - index * 6)) - 1;
+		appendBand(output, bands[firstBand + index], shift, mask);
+		if (shift !== 0) {
+			output.push("$");
+			appendBand(output, bands[firstBand + index + 1], shift - 6, mask);
+		}
+	}
+	output.push("\x1b\\");
+	return ensureSixelRasterWidth(output.join(""));
+}

package/src/status-line/component.ts

@@ -45,6 +45,7 @@ import { col, node, span } from "../native/describe";
 import { getContextMeterThresholds } from "../chrome/context-thresholds";
 import { isNativeRendering, onNativeRenderingChange } from "../native/state";
 import { getSeparator } from "./separators";
+import { formatJobWidgetGlance, type JobWidgetEntry, latestJobWidget } from "../tools/job-widget";
 import type {
 	CollabStatus,
 	ComposerFacts,
@@ -59,6 +60,9 @@ import type {
 	StatusResetExpiry,
 } from "./types";
 
+/** Sparkline cells the ANSI jobs segment draws after the freshest widget's headline. */
+const JOBS_SEGMENT_SPARK_CELLS = 8;
+
 /** What a click on a native status segment asks omp to open. */
 export type StatusLineNativeAction = "status.model" | "status.context" | "status.git" | "status.cost" | "status.path";
 
@@ -446,6 +450,8 @@ class StatusLineExternalInputs {
 	isFastModeActive = false;
 	anthropicSlowModeLabel: string | undefined = undefined;
 	compactionSpeculation: unknown = undefined;
+	/** The freshest running job widget's view (stable identity while its data is unchanged). */
+	jobWidgetRef: unknown = undefined;
 }
 
 interface CachedStatusLine {
@@ -2796,6 +2802,13 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 				? this.session.getAnthropicSlowModeLabel()
 				: undefined;
 		target.compactionSpeculation = this.session.compactionSpeculation;
+		target.jobWidgetRef = this.#latestJobWidget()?.view;
+	}
+
+	/** The running job widget that saw data last; the ANSI jobs segment appends its glance. */
+	#latestJobWidget(): JobWidgetEntry | undefined {
+		const entries = this.session.getRunningJobWidgets?.();
+		return entries ? latestJobWidget(entries) : undefined;
 	}
 
 	#sameStatusLineExternalInputs(left: StatusLineExternalInputs, right: StatusLineExternalInputs): boolean {
@@ -2849,7 +2862,8 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			left.isAutoThinking === right.isAutoThinking &&
 			left.isFastModeActive === right.isFastModeActive &&
 			left.anthropicSlowModeLabel === right.anthropicSlowModeLabel &&
-			left.compactionSpeculation === right.compactionSpeculation
+			left.compactionSpeculation === right.compactionSpeculation &&
+			left.jobWidgetRef === right.jobWidgetRef
 		);
 	}
 
@@ -3058,7 +3072,10 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		if (layout !== "plain-left") {
 			const runningBackgroundJobs = this.runningBackgroundJobCount();
 			if (runningBackgroundJobs > 0) {
-				rightParts.unshift(theme.fg("statusLineSubagents", `${theme.icon.job} ${runningBackgroundJobs}`));
+				const widget = this.#latestJobWidget();
+				const glance = widget ? formatJobWidgetGlance(widget.view, theme, JOBS_SEGMENT_SPARK_CELLS) : "";
+				const count = theme.fg("statusLineSubagents", `${theme.icon.job} ${runningBackgroundJobs}`);
+				rightParts.unshift(glance ? `${count} ${glance}` : count);
 			}
 			if (subagentBadge) rightParts.unshift(subagentBadge);
 		}

package/src/status-line/host.ts

@@ -1,6 +1,7 @@
 import type { AgentMessage, ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import type { Tool, UsageLimit, UsageReport } from "@oh-my-pi/pi-ai";
 import type { Model } from "@oh-my-pi/pi-catalog/types";
+import type { JobWidgetEntry } from "../tools/job-widget";
 import type { CompactionBoundaries } from "./context-usage";
 import type { StatusLineSettings, StatusResetExpiry } from "./types";
 
@@ -59,6 +60,8 @@ export interface StatusLineSession {
 	getAnthropicSlowModeLabel?(): string | undefined;
 	getPrewalkState?(): unknown;
 	getAsyncJobSnapshot(): { running: readonly { type: string; agentId?: string }[] } | null | undefined;
+	/** Widgets of the running background jobs, in job order; the jobs segment appends the freshest one's glance. */
+	getRunningJobWidgets?(): readonly JobWidgetEntry[];
 	getGoalModeState(): { goal?: { status: string; tokensUsed: number; tokenBudget?: number } } | undefined;
 	getAdvisorStatusOverview?(): { configured: boolean; advisors: readonly { status: string; yielded: boolean }[] };
 	getAdvisorCost?(): number;