@linxiraos/pi-tui 1.4.0 → 1.4.1

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

@@ -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,
@@ -404,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:
@@ -700,6 +705,7 @@ export function detectTerminalId(env: NodeJS.ProcessEnv = Bun.env): TerminalId {
 		VSCODE_PID,
 		ALACRITTY_WINDOW_ID,
 		TERM_PROGRAM,
+		LC_TERMINAL,
 		TERM,
 		COLORTERM,
 	} = env;
@@ -714,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)) {
@@ -1115,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,
@@ -1309,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;
 	}
@@ -1382,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;
 };

package/src/tools/bash.ts

@@ -7,6 +7,7 @@ import { formatOutputPaneLines } from "../render/output-pane";
 import {
 	capPreviewLines,
 	DEFAULT_TERMINAL_PREVIEW_LINES,
+	formatDuration,
 	formatToolWorkingDirectory,
 	previewWindowRows,
 	replaceTabs,
@@ -470,9 +471,14 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 								},
 								uiTheme,
 							);
+				const elapsedMs = options.executionStarted ? options.elapsedMs : undefined;
 				return {
 					header,
 					phase: options.spinnerFrame !== undefined ? "running" : "pending",
+					footerMeta:
+						elapsedMs === undefined || elapsedMs < 1000
+							? undefined
+							: uiTheme.fg("dim", `elapsed ${formatDuration(Math.floor(elapsedMs / 1000) * 1000)}`),
 					sections: [{ content: capPreviewLines(cmdLines, uiTheme, { expanded: options.expanded }) }],
 				};
 			});
@@ -528,6 +534,7 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 			let cachedIsPartial: boolean | undefined;
 			let cachedPreviewWindow: number | undefined;
 			let cachedSnapshot: ToolCardSnapshot | undefined;
+			let cachedElapsedSecond: number | undefined;
 			const dropSnapshot = () => {
 				cachedSnapshot = undefined;
 				cachedWidth = undefined;
@@ -536,6 +543,7 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 				cachedRawOutput = undefined;
 				cachedIsPartial = undefined;
 				cachedPreviewWindow = undefined;
+				cachedElapsedSecond = undefined;
 			};
 
 			return framedToolCard(
@@ -553,6 +561,11 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 
 					const isPartial = options.isPartial === true;
 					const previewWindow = previewWindowRows();
+					// A running command shows its live elapsed time in the bottom
+					// border; key the cache on whole seconds so it advances once a
+					// second instead of rebuilding every spinner frame.
+					const liveElapsedMs = isPartial && details?.wallTimeMs === undefined ? options.elapsedMs : undefined;
+					const elapsedSecond = liveElapsedMs === undefined ? undefined : Math.floor(liveElapsedMs / 1000);
 
 					if (
 						cachedSnapshot !== undefined &&
@@ -561,7 +574,8 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 						cachedExpanded === expanded &&
 						cachedRawOutput === rawOutput &&
 						cachedIsPartial === isPartial &&
-						cachedPreviewWindow === previewWindow
+						cachedPreviewWindow === previewWindow &&
+						cachedElapsedSecond === elapsedSecond
 					) {
 						return cachedSnapshot;
 					}
@@ -576,13 +590,11 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 						rawOutputArtifact.artifactId,
 						isError,
 					);
-					const timeoutLine =
-						statsParts.length > 0
-							? uiTheme.fg(
-									"dim",
-									`${uiTheme.format.bracketLeft}${statsParts.join(" | ")}${uiTheme.format.bracketRight}`,
-								)
-							: undefined;
+					if (elapsedSecond !== undefined && elapsedSecond > 0) {
+						statsParts.unshift(`elapsed ${formatDuration(elapsedSecond * 1000)}`);
+					}
+					const footerMeta =
+						statsParts.length > 0 ? uiTheme.fg("dim", statsParts.join(uiTheme.sep.dot)) : undefined;
 					let warningLine: string | undefined;
 					if (details?.meta?.artifactError || (details?.meta?.truncation && !showingFullOutput)) {
 						warningLine = formatStyledTruncationWarning(details.meta, uiTheme) ?? undefined;
@@ -610,12 +622,12 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 						uiTheme,
 					);
 					const outputLines: string[] = [...formatted.lines];
-					if (timeoutLine) outputLines.push(timeoutLine);
 					if (warningLine) outputLines.push(warningLine);
 
 					const snapshot: ToolCardSnapshot = {
 						header,
 						phase: isPartial ? "partial" : isError ? (isTimeout ? "warning" : "error") : "success",
+						footerMeta,
 						sections: [
 							{
 								// Viewport-sized tail window in every state — streaming and final
@@ -636,6 +648,7 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 					cachedRawOutput = rawOutput;
 					cachedIsPartial = isPartial;
 					cachedPreviewWindow = previewWindow;
+					cachedElapsedSecond = elapsedSecond;
 					cachedSnapshot = snapshot;
 					return snapshot;
 				},
@@ -714,6 +727,9 @@ export function createShellRenderer<TArgs>(config: ShellRendererConfig<TArgs>) {
 		},
 		mergeCallAndResult: true,
 		inline: true,
+		// The live elapsed footer reads `options.elapsedMs` at render time; a
+		// once-a-second repaint keeps it moving for a quiet running command.
+		tickElapsed: true,
 	} satisfies ToolRenderer<TArgs, BashToolDetails>;
 }
 

package/src/tools/default-renderer.d.ts

@@ -23,6 +23,9 @@ export declare function formatDefaultToolExecution(input: DefaultToolRenderInput
 /**
  * TSP view of the generic fallback card: the tool label with a one-line args
  * summary as the head target; the result as a JSON tree or raw `ansi` output.
+ * The complete output goes over the wire — the card-level disclosure clamp the
+ * terminal applies is the only bound, so an expanded card keeps every row. JSON
+ * the tree's depth, node or scalar caps would cut keeps the raw path instead.
  */
 export declare function describeDefaultToolExecution(input: DefaultToolRenderInput): NativeToolView;
 /** Render the generic fallback as the state-tinted card used by direct custom tools. */