@linxiraos/pi-tui 1.3.2 → 1.4.1

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[];

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

@@ -0,0 +1,28 @@
+/**
+ * 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 declare function ensureSixelRasterWidth(sequence: string): string;
+/**
+ * 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 declare function cropSixelTop(sequence: string, pixels: number, maxHeightPixels?: number): string;

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 zeta to open. */
 export type StatusLineNativeAction = "status.model" | "status.context" | "status.git" | "status.cost" | "status.path";
 
@@ -454,6 +458,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 {
@@ -2818,6 +2824,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 {
@@ -2871,7 +2884,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
 		);
 	}
 
@@ -3080,7 +3094,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 "@linxiraos/pi-agent-core";
 import type { Tool, UsageLimit, UsageReport } from "@linxiraos/pi-ai";
 import type { Model } from "@linxiraos/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;

package/src/terminal-capabilities.d.ts

@@ -18,7 +18,7 @@ export declare enum NotifyProtocol {
     Osc99 = "\u001B]99;;",
     Osc9 = "\u001B]9;"
 }
-export type TerminalId = "kitty" | "ghostty" | "wezterm" | "iterm2" | "vscode" | "alacritty" | "warp" | "orca" | "otty" | "rio" | "tern" | "monstar" | "base" | "trueColor";
+export type TerminalId = "kitty" | "ghostty" | "wezterm" | "iterm2" | "vscode" | "alacritty" | "warp" | "orca" | "otty" | "rio" | "tern" | "monstar" | "zetawork" | "base" | "trueColor";
 /** Terminal capability details used for rendering and protocol selection. */
 export declare class TerminalInfo {
     readonly id: TerminalId;
@@ -401,6 +401,11 @@ export declare function encodeITerm2(base64Data: string, options?: {
     preserveAspectRatio?: boolean;
     inline?: boolean;
 }): string;
+/**
+ * The encoded image `encodeITerm2` wrote into `line`, without the size
+ * parameters a rewrap changes; undefined for a line without one.
+ */
+export declare function iterm2ImagePayload(line: string): string | undefined;
 export declare function calculateImageRows(imageDimensions: ImageDimensions, targetWidthCells: number, cellDimensions?: CellDimensions): number;
 export declare function getPngDimensions(base64Data: string): ImageDimensions | null;
 export declare function getJpegDimensions(base64Data: string): ImageDimensions | null;

package/src/terminal-capabilities.ts

@@ -10,6 +10,7 @@ import {
 	renderKittyPlaceholderLines,
 	setKittyGraphics,
 } from "./kitty-graphics";
+import { ensureSixelRasterWidth } from "./sixel";
 import {
 	isInsideTerminalMultiplexer,
 	isTerminalBackgroundQueryTrusted,
@@ -66,6 +67,7 @@ export type TerminalId =
 	| "rio"
 	| "tern"
 	| "monstar"
+	| "zetawork"
 	| "base"
 	| "trueColor";
 
@@ -403,7 +405,11 @@ export function detectStyledUnderlineSupport(terminalId: TerminalId, env: NodeJS
 			// render. Enable only on a confirmed major.minor >= 3.5; an absent or
 			// unparseable version keeps the flat fallback so only proven terminals
 			// get the colon form.
-			const version = parseMajorMinorVersion(env.TERM_PROGRAM_VERSION);
+			//
+			// `LC_TERMINAL_VERSION` carries the same version over SSH, where
+			// `TERM_PROGRAM_VERSION` is stripped, so it is the fallback source.
+			const version =
+				parseMajorMinorVersion(env.TERM_PROGRAM_VERSION) ?? parseMajorMinorVersion(env.LC_TERMINAL_VERSION);
 			return version !== null && (version.major > 3 || (version.major === 3 && version.minor >= 5));
 		}
 		default:
@@ -656,6 +662,15 @@ const KNOWN_TERMINALS = Object.freeze({
 	// activating it focuses the Monstar window. The BEL path uses omp's own
 	// `notify-send` fallback instead, which cannot focus a window.
 	monstar: new TerminalInfo("monstar", ImageProtocol.Kitty, true, true, NotifyProtocol.Osc9, false, false, false, 2),
+	// zetawork is the workbench GUI's own terminal pane (`termide`
+	// `panel-terminal`): it sets TERM_PROGRAM=zetawork and renders Kitty
+	// graphics itself — direct placement only, no Unicode placeholders, which
+	// is why the id is not in the placeholder allowlist. It answers the cell
+	// size query (CSI 16 t) with its real device-pixel cell, so images are
+	// rasterized at the density the surface paints at. Its emulator renders
+	// OSC 8 links itself; notifications stay on BEL because the GUI has no
+	// notifier.
+	zetawork: new TerminalInfo("zetawork", ImageProtocol.Kitty, true, true),
 });
 
 /** Resolve terminal identity from environment markers used by common emulators. */
@@ -678,6 +693,7 @@ export function detectTerminalId(env: NodeJS.ProcessEnv = Bun.env): TerminalId {
 		if (caseEq(program, "rio")) return "rio";
 		if (caseEq(program, "tern")) return "tern";
 		if (caseEq(program, "monstar")) return "monstar";
+		if (caseEq(program, "zetawork")) return "zetawork";
 		return null;
 	}
 
@@ -689,6 +705,7 @@ export function detectTerminalId(env: NodeJS.ProcessEnv = Bun.env): TerminalId {
 		VSCODE_PID,
 		ALACRITTY_WINDOW_ID,
 		TERM_PROGRAM,
+		LC_TERMINAL,
 		TERM,
 		COLORTERM,
 	} = env;
@@ -703,6 +720,22 @@ export function detectTerminalId(env: NodeJS.ProcessEnv = Bun.env): TerminalId {
 	const programId = fromProgram(TERM_PROGRAM);
 	if (programId) return programId;
 
+	// iTerm2 sets `LC_TERMINAL=iTerm2` (plus `LC_TERMINAL_VERSION`) in the local
+	// session precisely so it survives SSH: openssh/mosh forward `LC_*` to the
+	// remote host, while `ITERM_SESSION_ID` and `TERM_PROGRAM` are stripped. Its
+	// own shell integration says the same: "TERM_PROGRAM is set by the local
+	// terminal but not forwarded over SSH. LC_TERMINAL is set by iTerm2 and may
+	// be forwarded over SSH." Without this branch the remote session falls to
+	// the true-color profile and loses the iTerm2 inline-image protocol, OSC 8
+	// hyperlinks and OSC 9 notifications.
+	//
+	// Gated on the absence of a multiplexer: iTerm2's OSC 1337 encoder is the
+	// only image encoder that does not wrap its payload in a tmux passthrough
+	// envelope, so inside a multiplexer the sequence would be swallowed by the
+	// multiplexer instead of reaching the outer terminal. The multiplexer path
+	// resolves the outer client on its own.
+	if (LC_TERMINAL && caseEq(LC_TERMINAL, "iTerm2") && !isInsideTerminalMultiplexer(env)) return "iterm2";
+
 	// tmux >= 3.2 replaces the pane's identity with `TERM_PROGRAM=tmux`.
 	// Its server still holds the attached client's terminal-type reply and TERM.
 	for (const clientProgram of resolveTmuxClientTerminalNames(env)) {
@@ -1104,6 +1137,19 @@ export function encodeITerm2(
 	return `\x1b]1337;File=${params.join(";")}:${base64Data}\x07`;
 }
 
+/**
+ * The encoded image `encodeITerm2` wrote into `line`, without the size
+ * parameters a rewrap changes; undefined for a line without one.
+ */
+export function iterm2ImagePayload(line: string): string | undefined {
+	const start = line.indexOf(ImageProtocol.Iterm2);
+	if (start === -1) return undefined;
+	const colon = line.indexOf(":", start + ImageProtocol.Iterm2.length);
+	if (colon === -1) return undefined;
+	const end = line.indexOf("\x07", colon + 1);
+	return line.slice(colon + 1, end === -1 ? undefined : end);
+}
+
 export function calculateImageRows(
 	imageDimensions: ImageDimensions,
 	targetWidthCells: number,
@@ -1298,7 +1344,9 @@ export function encodeSixelNow(
 	backgroundRgb = getTerminalBackgroundColor(),
 ): string | null {
 	try {
-		return encodeSixel(new Uint8Array(Buffer.from(base64Data, "base64")), widthPx, heightPx, backgroundRgb);
+		return ensureSixelRasterWidth(
+			encodeSixel(new Uint8Array(Buffer.from(base64Data, "base64")), widthPx, heightPx, backgroundRgb),
+		);
 	} catch {
 		return null;
 	}
@@ -1371,9 +1419,12 @@ export function renderImage(
 		return { sequence, rows };
 	}
 	if (TERMINAL.imageProtocol === ImageProtocol.Iterm2) {
+		// The height is the rows reserved for the image, not `auto`: iTerm2
+		// resolves `auto` only for a session on screen, so an image written to a
+		// background tab is dropped, and its rows stay blank in scrollback too.
 		const sequence = encodeITerm2(base64Data, {
 			width: fit.columns,
-			height: "auto",
+			height: fit.rows,
 			preserveAspectRatio: options.preserveAspectRatio ?? true,
 		});
 		return { sequence, rows: fit.rows };

package/src/theme/symbols.ts

@@ -628,9 +628,11 @@ const UNICODE_SYMBOLS: SymbolMap = {
 	"lang.pdf": "📕",
 	"lang.archive": "🗜",
 	"lang.binary": "⚙",
-	// Composer attachment chips
-	"chip.image": "🖼",
-	"chip.video": "🎞",
+	// Composer attachment chips. These sit inside the editable buffer, so the caret column
+	// depends on their width: use Emoji_Presentation glyphs, which every terminal draws 2 cells
+	// wide. Text-presentation pictographs (🖼, 🎞) measure 1 cell but many terminals draw them 2.
+	"chip.image": "📷",
+	"chip.video": "🎬",
 	"chip.paste": "📄",
 	// Settings tabs
 	"tab.appearance": "🎨",

package/src/tools/bash.d.ts

@@ -117,6 +117,7 @@ export declare function createShellRenderer<TArgs>(config: ShellRendererConfig<T
     }, args?: TArgs): NativeToolView;
     mergeCallAndResult: true;
     inline: true;
+    tickElapsed: true;
 };
 /** Renders bash command previews and output. */
 export declare const bashToolRenderer: {
@@ -146,4 +147,5 @@ export declare const bashToolRenderer: {
     }, args?: BashRenderArgs | undefined): NativeToolView;
     mergeCallAndResult: true;
     inline: true;
+    tickElapsed: true;
 };