@oh-my-pi/pi-tui 18.14.0 → 18.14.2

package/src/apps/git/sidebar.ts

@@ -20,6 +20,7 @@ import { matchesKey } from "../../keys";
 import { col, compact, item, keyed, list, node, row, span, stableKey, text } from "../../native/describe";
 import { Memo } from "../../native/memo";
 import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../../native/node";
+import { actionButton, iconButton, quietButton, segmentedTabs } from "../../native/overlay";
 import type { TspProps, TspSpan } from "@oh-my-pi/pi-wire";
 import { TERMINAL } from "../../terminal-capabilities";
 import { truncateToWidth, visibleWidth } from "../../utils";
@@ -236,11 +237,6 @@ class GitFileTree {
 	}
 }
 
-/** A quiet text button (`Stage all`): a clickable row the role sheet draws as `.btn.quiet`. */
-function quietButton(label: string, act: string, title: string): NativeNode {
-	return node("row", { role: "omp.app.qbtn", actions: { click: act }, title }, [text(label)], act);
-}
-
 /** A text field at rest: its value (or placeholder) as text; a click starts editing it. */
 function fieldText(
 	value: string,
@@ -1098,8 +1094,7 @@ export class Sidebar {
 	}
 
 	#describeStyleToggle(): NativeNode {
-		return node(
-			"tabs",
+		return segmentedTabs(
 			{
 				items: [
 					{ id: "path", label: "Path" },
@@ -1108,7 +1103,6 @@ export class Sidebar {
 				active: this.viewStyle,
 				role: "omp.app.seg",
 			},
-			undefined,
 			"style",
 		);
 	}
@@ -1127,18 +1121,10 @@ export class Sidebar {
 			area === "unstaged"
 				? [
 						quietButton("Stage all", "stage-all", "Stage every change (space on the head)"),
-						node(
-							"icon",
-							{
-								name: "wand",
-								role: "omp.app.ibtn",
-								title: "Stage by description…",
-								aria: "Stage by description",
-								actions: { click: "stage-ai" },
-							},
-							undefined,
-							"ai",
-						),
+						iconButton("wand", "stage-ai", "Stage by description…", {
+							key: "ai",
+							aria: "Stage by description",
+						}),
 					]
 				: [quietButton("Unstage all", "unstage-all", "Unstage every change (space on the head)")];
 		const head = row(
@@ -1263,8 +1249,13 @@ export class Sidebar {
 					"omp.app.git.body",
 				);
 		const hasChanges = this.#model.staged.length > 0 || this.#model.unstaged.length > 0 || this.amend;
-		const canCommit =
-			hasChanges && !this.generating && (summary.trim().length > 0 || description.trim().length === 0);
+		const blocked = !hasChanges
+			? "Nothing to commit"
+			: this.generating
+				? "Generating the commit message…"
+				: summary.trim().length === 0 && description.trim().length > 0
+					? "Write a summary line first"
+					: undefined;
 		const label = this.generating
 			? "Generating message…"
 			: summary.trim().length === 0 && description.trim().length === 0
@@ -1272,8 +1263,13 @@ export class Sidebar {
 				: this.#model.staged.length > 0
 					? "Commit"
 					: "Stage all & commit";
-		// The panels' button (omp-panels.css `omp.btn`): accent while the keyboard is on it, muted when it can't run.
-		const commitTone = !canCommit ? "muted" : on({ kind: "commit-button" }) ? "accent" : undefined;
+		// The panels' button: the primary while the keyboard is on it, disabled (saying why) when it can't run.
+		const commit = actionButton(label, "commit", {
+			title: this.#model.staged.length > 0 ? "Commit the staged changes" : "Stage everything, then commit",
+			busy: this.generating,
+			disabled: blocked,
+			tone: on({ kind: "commit-button" }) ? "accent" : undefined,
+		});
 		return col(
 			[
 				keyed(summaryField, "summary"),
@@ -1288,17 +1284,7 @@ export class Sidebar {
 								actions: { click: "amend" },
 								title: "Amend the previous commit",
 							}),
-							row(compact([this.generating && node("spinner", { style: "dots" }), text(label)]), {
-								gap: "xs",
-								align: "center",
-								role: "omp.btn",
-								tone: commitTone,
-								actions: canCommit ? { click: "commit" } : undefined,
-								title:
-									this.#model.staged.length > 0
-										? "Commit the staged changes"
-										: "Stage everything, then commit",
-							}),
+							commit,
 						],
 						{ justify: "between", align: "center", role: "omp.app.git.foot" },
 					),

package/src/apps/ps-top.ts

@@ -17,7 +17,7 @@ import { type Component, TUI } from "../tui";
 import type { TspSpan, TspText, TspTone } from "@oh-my-pi/pi-wire";
 import { col, compact, elapsed, keyed, node, row, span, stableKey, text } from "../native/describe";
 import type { NativeNode, NativeUiEvent } from "../native/node";
-import { actionBar, actionButton } from "../native/overlay";
+import { actionBar, actionButton, iconButton, segmentedTabs } from "../native/overlay";
 import { Memo } from "../native/memo";
 import { truncateToWidth } from "../utils";
 import { formatDuration } from "@oh-my-pi/pi-utils";
@@ -410,13 +410,7 @@ export class PsTopComponent implements Component {
 			);
 		} else {
 			left.push(
-				node("icon", {
-					name: "back",
-					role: "omp.app.ibtn",
-					title: "Back  esc",
-					aria: "Back",
-					actions: { click: "back" },
-				}),
+				iconButton("back", "back", "Back  esc", { aria: "Back" }),
 				text(
 					this.#view === "logs" ? `Logs · ${entry?.row.snapshot.name ?? "?"}` : (entry?.row.snapshot.name ?? "?"),
 					{
@@ -432,8 +426,7 @@ export class PsTopComponent implements Component {
 		const right: NativeNode[] = [];
 		if (this.#view === "table") {
 			right.push(
-				node(
-					"tabs",
+				segmentedTabs(
 					{
 						items: [
 							{
@@ -448,7 +441,6 @@ export class PsTopComponent implements Component {
 						active: this.#all ? "all" : "current",
 						role: "omp.app.seg",
 					},
-					undefined,
 					"scope",
 				),
 			);
@@ -468,7 +460,7 @@ export class PsTopComponent implements Component {
 						align: "center",
 						role: "omp.app.fresh",
 					}),
-			node("icon", { name: "x", role: "omp.app.ibtn", title: "Quit  q", aria: "Quit", actions: { click: "quit" } }),
+			iconButton("x", "quit", "Quit  q", { aria: "Quit" }),
 		);
 		return keyed(
 			row(

package/src/charts/chart-plan.ts

@@ -1523,10 +1523,6 @@ export function buildChart(table: TableAnalysis, plan: ChartPlan): ChartSpec | u
 	// its rows are in different units.
 	if (arrows.length === 1 && plan.kind !== "paired" && plan.kind !== "range" && !plan.transpose)
 		return buildChart(table, { ...plan, kind: arrows[0]!.mixed ? "change" : "paired", series: [arrows[0]!.index] });
-	// A dumbbell of two measures beside their ratio (`pi-walker | Go | Speedup`): the ratio restates the gap the
-	// dumbbell draws (on a log axis its length), so the pair draws alone.
-	const pair = plan.kind === "paired" && !plan.transpose ? ratioPair(table, columns) : undefined;
-	if (pair) return buildChart(table, { ...plan, series: pair.map(column => column.index) });
 	// Unitless before/after values spanning decades are rows of different quantities, and rows of very different
 	// sizes beside a baseline column share no readable axis; their factors do (`3.95M → 190k` is 21× less).
 	// Intervals keep their values: a range chart prints the factor between a pair's midpoints beside both.
@@ -2810,31 +2806,6 @@ function againstBaseline(
 	return [baseline, ...columns.filter(column => column !== baseline)];
 }
 
-/** Relative slack within which a ratio column restates the ratio of two others (`4.1×` for 75.3 / 18.2). */
-const RATIO_SLACK = 0.05;
-
-/**
- * Of three plotted columns, the two same-unit measures when the third is their ratio (`Speedup`
- * `4.1×`, a `ratio` column) matching `a ÷ b` or `b ÷ a` within {@link RATIO_SLACK}
- * in every row holding all three, two rows at least; else `undefined`.
- */
-function ratioPair(table: TableAnalysis, columns: readonly TableColumn[]): [TableColumn, TableColumn] | undefined {
-	if (columns.length !== 3) return undefined;
-	const ratio = columns.find(column => column.dim === "ratio");
-	const rest = columns.filter(column => column !== ratio);
-	const [a, b] = rest;
-	if (!ratio || !a || !b || a.dim !== b.dim || a.unit !== b.unit || a.dim === "ratio") return undefined;
-	const near = (value: number, target: number) => Math.abs(value - target) <= RATIO_SLACK * target;
-	let matched = 0;
-	for (const row of table.rows) {
-		const [x, y, r] = [a.cells[row], b.cells[row], ratio.cells[row]];
-		if (!isNumber(x) || !isNumber(y) || !isNumber(r) || x.value <= 0 || y.value <= 0) continue;
-		if (!near(r.value, x.value / y.value) && !near(r.value, y.value / x.value)) return undefined;
-		matched++;
-	}
-	return matched >= 2 ? [a, b] : undefined;
-}
-
 /**
  * Measure columns pairing a before condition with another over the same
  * metric (`Baseline Turns` → `Iter1 Turns`, `Baseline Tokens In` → `Iter1

package/src/charts/table-data.ts

@@ -108,8 +108,10 @@ export interface TableColumn {
 	/**
 	 * Index of the measure column this one restates, read from the values: a
 	 * proportional copy (`pass` 33/38 beside `pass%` 87%, `Samples` beside `% of
-	 * Total`, `Leverage vs $200` beside the cost) or a running total of it
-	 * (`Offset` summing `Verts`). Such a column is never a measure of its own.
+	 * Total`, `Leverage vs $200` beside the cost), a running total of it
+	 * (`Offset` summing `Verts`), or its ratio to another column of its unit
+	 * (`ratio` 0.997 for `Python (ms)` ÷ `C++ (ms)`, `Speedup` 4.1×: the
+	 * numerator's index). Such a column is never a measure of its own.
 	 */
 	readonly restates?: number;
 }
@@ -906,10 +908,11 @@ function plainValue(column: TableColumn, row: number): NumberCell | undefined {
 
 /**
  * Columns restating another column's values: `y = k·x` within the written
- * precision over three or more rows where `x` varies, or a running total
- * (`Offset` stepping by `Verts`). Of a proportional pair the first column
- * stays, unless the second is a share summing to 100% beside counts or the
- * table bolded more of its cells (`**87%**` beside `33/38`).
+ * precision over three or more rows where `x` varies, a running total
+ * (`Offset` stepping by `Verts`), or the ratio of two others ({@link quotient}).
+ * Of a proportional pair the first column stays, unless the second is a share
+ * summing to 100% beside counts or the table bolded more of its cells
+ * (`**87%**` beside `33/38`).
  */
 function restatedColumns(measures: readonly TableColumn[], rows: readonly number[]): Map<number, number> {
 	const restated = new Map<number, number>();
@@ -931,9 +934,55 @@ function restatedColumns(measures: readonly TableColumn[], rows: readonly number
 		const source = measures.find(other => other !== column && runningTotal(column, other, rows));
 		if (source) restated.set(column.index, source.index);
 	}
+	const kept = measures.filter(column => !restated.has(column.index));
+	for (const ratio of kept) {
+		if (restated.has(ratio.index)) continue;
+		const terms = kept.filter(column => column !== ratio && !restated.has(column.index));
+		const over = terms
+			.flatMap(a => terms.map(b => [a, b] as const))
+			.find(([a, b]) => a !== b && quotient(ratio, a, b, rows));
+		if (over) restated.set(ratio.index, over[0].index);
+	}
 	return restated;
 }
 
+/** Most relative rounding a row's quotient may carry to count toward proving it (`2×` beside its terms proves little). */
+const LOOSE_QUOTIENT = 0.05;
+
+/**
+ * `ratio = a ÷ b` in every row holding all three, `a` and `b` in one unit
+ * (`Python (ms)` ÷ `old C++ (ms)` = `0.997`; `Go` ÷ `pi-walker` = `4.1×`),
+ * within the precision each figure is written to, over three or more rows
+ * pinned to {@link LOOSE_QUOTIENT}. Percent columns are left alone: a part's
+ * share of a whole (`Share` = `Tokens` ÷ `Total`) is a measure the table states.
+ *
+ * Bare numbers all read as counts, and of three columns related so each is
+ * the others' quotient or product (`C++ = Python ÷ ratio` holds too), the
+ * ratio is the one that varies less from row to row than both its terms:
+ * workloads of different sizes move both timings, not their ratio. Where none
+ * does, none is taken for the ratio.
+ */
+function quotient(ratio: TableColumn, a: TableColumn, b: TableColumn, rows: readonly number[]): boolean {
+	if ((ratio.dim !== "count" && ratio.dim !== "ratio") || a.dim !== b.dim || a.unit !== b.unit) return false;
+	let tight = 0;
+	const matched: (readonly [number, number, number])[] = [];
+	for (const row of rows) {
+		const [r, x, y] = [plainValue(ratio, row), plainValue(a, row), plainValue(b, row)];
+		if (!r || !x || !y) continue;
+		if (x.value <= 0 || y.value <= 0 || r.value <= 0) return false;
+		const exact = x.value / y.value;
+		const slack = writtenSlack(r) + exact * (writtenSlack(x) / x.value + writtenSlack(y) / y.value) + 1e-9 * exact;
+		if (Math.abs(r.value - exact) > slack) return false;
+		if (slack <= LOOSE_QUOTIENT * exact) tight++;
+		matched.push([r.value, x.value, y.value]);
+	}
+	if (tight < 3) return false;
+	if (ratio.dim !== a.dim) return true;
+	const spread = (at: 0 | 1 | 2) =>
+		Math.max(...matched.map(values => values[at])) / Math.min(...matched.map(values => values[at]));
+	return spread(0) < spread(1) && spread(0) < spread(2);
+}
+
 /** How many of `rows` the table bolded in `column`. */
 function emphasized(column: TableColumn, rows: readonly number[]): number {
 	return rows.filter(row => column.cells[row]?.emphasis).length;

package/src/chat/figure-markdown.ts

@@ -14,6 +14,8 @@ export interface FigureMarkdownOptions {
 	charts: boolean;
 	/** Shared inline-image budget for the figures. */
 	budget?: ImageBudget;
+	/** Rows each figure may fill, read on every render; callers reserve prose, chrome and separators themselves. Unset or `undefined` takes a share of the terminal viewport. */
+	maxRows?: () => number | undefined;
 	/** A figure's rows changed outside a text update (raster landed, fell back to code). */
 	onChange: () => void;
 }
@@ -108,8 +110,8 @@ export class FigureMarkdown extends Container {
 					return old;
 				}
 				reshaped = true;
-				const { budget, onChange } = this.#options;
-				return { kind: "chart", figure: new TableChartFigure({ budget, onChange }), table: segment.table };
+				const { budget, maxRows, onChange } = this.#options;
+				return { kind: "chart", figure: new TableChartFigure({ budget, maxRows, onChange }), table: segment.table };
 			}
 			if (segment.kind === "markdown") {
 				const text = segment.text.trim();
@@ -127,10 +129,10 @@ export class FigureMarkdown extends Container {
 				return old;
 			}
 			reshaped = true;
-			const { markdown, budget, onChange } = this.#options;
+			const { markdown, budget, maxRows, onChange } = this.#options;
 			return {
 				kind: "svg",
-				figure: new SvgFigure({ markdown, budget, onChange }),
+				figure: new SvgFigure({ markdown, budget, maxRows, onChange }),
 				source: segment.source,
 				closed: segment.closed,
 			};

package/src/chat/svg-figure.ts

@@ -113,6 +113,11 @@ export interface SvgFigureOptions {
 	markdown?: (text: string) => Markdown;
 	/** Shared inline-image budget; superseded rasters are released from it. */
 	budget?: ImageBudget;
+	/**
+	 * Rows the figure may fill, fallback code included, read on every render;
+	 * zero hides it. Unset or `undefined` takes a share of the terminal viewport.
+	 */
+	maxRows?: () => number | undefined;
 	/** The figure's rows changed outside a text update: a raster landed or rendering fell back to code. */
 	onChange: () => void;
 }
@@ -149,12 +154,15 @@ interface Attempt {
 
 let nextFigureId = 0;
 
-/** Cells a figure rendered at `width` may fill: the image's width, a share of the viewport, and the raster edge cap. */
-function limitsFor(width: number, cell: CellDimensions): Limits {
-	const viewportRows = Math.floor((process.stdout.rows || 24) * MAX_VIEWPORT_SHARE);
+/** Cells a figure rendered at `width` may fill: the image's width, the caller's row ceiling (or a share of the viewport), and the raster edge cap. */
+function limitsFor(
+	width: number,
+	cell: CellDimensions,
+	maxRows = Math.floor((process.stdout.rows || 24) * MAX_VIEWPORT_SHARE),
+): Limits {
 	return {
 		columns: Math.min(imageMaxColumns(width), Math.floor(MAX_EDGE_PX / cell.widthPx)),
-		rows: Math.max(1, Math.min(viewportRows, Math.floor(MAX_EDGE_PX / cell.heightPx))),
+		rows: Math.max(1, Math.min(maxRows, Math.floor(MAX_EDGE_PX / cell.heightPx))),
 	};
 }
 
@@ -178,7 +186,14 @@ export class SvgFigure implements Component {
 	/** Last render width; rasters wait for the first render to know their room. */
 	#width: number | undefined;
 	#image: { raster: Raster; component: Image } | undefined;
-	#fallback: { source: string; md: Markdown } | undefined;
+	#fallback:
+		| {
+				source: string;
+				md: Markdown;
+				/** `rows` cut to a ceiling, kept so unchanged frames return the same array. */
+				clip?: { of: readonly string[]; rows: readonly string[] };
+		  }
+		| undefined;
 	#placeholder: readonly string[] | undefined;
 
 	constructor(options: SvgFigureOptions) {
@@ -203,21 +218,34 @@ export class SvgFigure implements Component {
 
 	/** Whether the final source still waits for its raster (or for failing to render). */
 	get pending(): boolean {
-		return this.#final && this.#raster?.source !== this.#source && this.#failed !== this.#source;
+		return (
+			this.#maxRows() !== 0 && this.#final && this.#raster?.source !== this.#source && this.#failed !== this.#source
+		);
+	}
+
+	/** The caller's row ceiling, if any; a surface shorter than its chrome leaves none. */
+	#maxRows(): number | undefined {
+		const rows = this.#options.maxRows?.();
+		return rows === undefined ? undefined : Math.max(0, Math.floor(rows));
 	}
 
 	render(width: number): readonly string[] {
 		// Width, cell size and theme are render-time inputs; a change re-rasterizes.
 		this.#width = width;
 		this.#schedule();
-		if (this.#failed === this.#source) return this.#fallbackRows(width);
+		const maxRows = this.#maxRows();
+		if (maxRows === 0) return [];
+		if (this.#failed === this.#source) return this.#fallbackRows(width, maxRows);
 		const raster = this.#raster;
 		if (!raster) {
 			if (!this.#options.markdown) return [];
 			this.#placeholder ??= [` ${theme.fg("dim", "Drawing SVG…")}`];
 			return this.#placeholder;
 		}
-		return this.#imageFor(raster).render(width);
+		const rows = this.#imageFor(raster, maxRows).render(width);
+		// A SIXEL band is six pixels whole: cells shorter than that reserve more
+		// rows than the ceiling, and a cut band would draw nothing anyway.
+		return maxRows !== undefined && rows.length > maxRows ? [] : rows;
 	}
 
 	invalidate(): void {
@@ -247,7 +275,7 @@ export class SvgFigure implements Component {
 		const attempt = this.#attempt;
 		if (this.#failed === this.#source) return false;
 		const cell = getCellDimensions();
-		const limits = limitsFor(width, cell);
+		const limits = limitsFor(width, cell, this.#maxRows());
 		return (
 			attempt === undefined ||
 			attempt.source !== this.#source ||
@@ -280,6 +308,7 @@ export class SvgFigure implements Component {
 	#schedule(): void {
 		const width = this.#width;
 		if (this.#disposed || this.#rasterizing || width === undefined) return;
+		if (this.#maxRows() === 0) return;
 		if (this.#final && this.#timer) {
 			clearTimeout(this.#timer);
 			this.#timer = undefined;
@@ -302,7 +331,7 @@ export class SvgFigure implements Component {
 		const attempt: Attempt = {
 			source: this.#source,
 			cell,
-			limits: limitsFor(width, cell),
+			limits: limitsFor(width, cell, this.#maxRows()),
 			themeEpoch: getThemeEpoch(),
 			final: this.#final,
 		};
@@ -364,13 +393,17 @@ export class SvgFigure implements Component {
 	/**
 	 * The image for `raster` over the whole cells it was padded to. At the
 	 * cell size and room it was drawn for that box is its pixels exactly; a
-	 * raster outdated by a resize is scaled by {@link Image} until its redraw lands.
+	 * raster outdated by a resize is scaled by {@link Image} until its redraw
+	 * lands. A caller's ceiling (`maxRows`) refits the shown image at once.
 	 */
-	#imageFor(raster: Raster): Image {
+	#imageFor(raster: Raster, maxRows = Number.POSITIVE_INFINITY): Image {
 		const current = this.#image;
-		if (current?.raster === raster) return current.component;
 		const columns = raster.widthPx / raster.cell.widthPx;
-		const rows = raster.heightPx / raster.cell.heightPx;
+		const rows = Math.min(raster.heightPx / raster.cell.heightPx, maxRows);
+		if (current?.raster === raster) {
+			current.component.setMaxHeightCells(rows);
+			return current.component;
+		}
 		const component = new Image(
 			raster.data,
 			"image/png",
@@ -390,12 +423,18 @@ export class SvgFigure implements Component {
 	}
 
 	/** The source as the fenced code block it was written as, fenced longer than any backtick run inside. */
-	#fallbackRows(width: number): readonly string[] {
+	#fallbackRows(width: number, maxRows?: number): readonly string[] {
 		const source = this.#source;
 		if (!this.#options.markdown) return [];
 		if (this.#fallback?.source !== source) {
 			this.#fallback = { source, md: this.#options.markdown(fencedCode("svg", source)) };
 		}
-		return this.#fallback.md.render(width);
+		const fallback = this.#fallback;
+		const rows = fallback.md.render(width);
+		if (maxRows === undefined || rows.length <= maxRows) return rows;
+		if (fallback.clip?.of !== rows || fallback.clip.rows.length !== maxRows) {
+			fallback.clip = { of: rows, rows: rows.slice(0, maxRows) };
+		}
+		return fallback.clip.rows;
 	}
 }

package/src/chat/table-chart.ts

@@ -194,6 +194,8 @@ export function chartFence(svg: string): string {
 export interface TableChartFigureOptions {
 	/** Shared inline-image budget. */
 	budget?: ImageBudget;
+	/** Rows the chart may fill, its separator included, read on every render; under two hides it. Unset or `undefined` takes a share of the terminal viewport. */
+	maxRows?: () => number | undefined;
 	/** The chart's rows changed outside a text update: its pick or raster landed. */
 	onChange: () => void;
 }
@@ -215,7 +217,17 @@ export class TableChartFigure implements Component {
 
 	constructor(options: TableChartFigureOptions) {
 		this.#options = options;
-		this.#figure = new SvgFigure({ budget: options.budget, onChange: options.onChange });
+		this.#figure = new SvgFigure({
+			budget: options.budget,
+			maxRows: () => this.#figureRows(),
+			onChange: options.onChange,
+		});
+	}
+
+	/** The image's share of the caller's ceiling: all but the separator row. */
+	#figureRows(): number | undefined {
+		const rows = this.#options.maxRows?.();
+		return rows === undefined ? undefined : Math.max(0, Math.floor(rows) - 1);
 	}
 
 	/** Point the figure at `table`. */
@@ -228,10 +240,15 @@ export class TableChartFigure implements Component {
 
 	/** Whether the chart is still being looked up, picked or drawn. */
 	get pending(): boolean {
-		return this.#table !== undefined && (this.#chart === undefined || (this.#chart !== null && this.#figure.pending));
+		return (
+			this.#figureRows() !== 0 &&
+			this.#table !== undefined &&
+			(this.#chart === undefined || (this.#chart !== null && this.#figure.pending))
+		);
 	}
 
 	render(width: number): readonly string[] {
+		if (this.#figureRows() === 0) return [];
 		if (this.#chart === undefined && !this.#waiting) this.#resolve();
 		if (!this.#chart) return [];
 		const rows = this.#figure.render(width);

package/src/chat/transcript-render-helpers.ts

@@ -137,9 +137,9 @@ export function buildLaunchCompletionBlock(message: CustomOrHookMessage): ToolAc
 }
 
 /**
- * Render a live IRC traffic custom message (`irc:incoming` / `irc:autoreply` /
- * `irc:relay`) as a transcript card. `getExpanded` supplies the live
- * expanded-state getter for the cached card.
+ * Render an IRC coordination custom message (`irc:incoming` / `irc:autoreply` /
+ * `irc:relay` / `irc:workpool`) as a tool-activity card. `getExpanded` supplies
+ * the live expanded-state getter for the cached card.
  */
 export function buildIrcMessageCard(message: CustomOrHookMessage, getExpanded: () => boolean): Component {
 	const details = (
@@ -161,19 +161,21 @@ export function buildIrcMessageCard(message: CustomOrHookMessage, getExpanded: (
 				: message.customType === "irc:workpool"
 					? ("workpool" as const)
 					: ("relay" as const);
-	return createIrcMessageCard(
-		{
-			kind,
-			from: details?.from,
-			to: details?.to,
-			body: kind === "incoming" ? details?.message : details?.body,
-			replyTo: details?.replyTo,
-			timestamp: message.timestamp,
-			pool: details?.pool,
-			mode: details?.mode,
-		},
-		getExpanded,
-		theme,
+	return new ToolActivityContainer(
+		createIrcMessageCard(
+			{
+				kind,
+				from: details?.from,
+				to: details?.to,
+				body: kind === "incoming" ? details?.message : details?.body,
+				replyTo: details?.replyTo,
+				timestamp: message.timestamp,
+				pool: details?.pool,
+				mode: details?.mode,
+			},
+			getExpanded,
+			theme,
+		),
 	);
 }
 

package/src/components/image.ts

@@ -744,6 +744,19 @@ export class Image implements Component {
 		this.#cachedWidth = undefined;
 	}
 
+	/**
+	 * Refit to a new row ceiling; a SIXEL reserves its rows until the off-thread
+	 * encode lands. A demoted fallback keeps the height already drawn only
+	 * within the new ceiling: the owner chose to shrink the block.
+	 */
+	setMaxHeightCells(maxHeightCells: number): void {
+		if (this.#options.maxHeightCells === maxHeightCells) return;
+		this.#options.maxHeightCells = maxHeightCells;
+		this.#renderedGraphicRows = Math.min(this.#renderedGraphicRows, maxHeightCells);
+		this.#native = undefined;
+		this.invalidate();
+	}
+
 	releaseRenderCaches(): void {
 		this.#cachedLines = undefined;
 		this.#cachedWidth = undefined;

package/src/native/backend.ts

@@ -48,7 +48,7 @@ import { encodeTspJson, encodeTspMessage, type TspHello, TspReader, splitTspMess
 import type { DescribeContext, NativeChild, NativeNode, NativeSurface, NativeUiEvent } from "./node";
 import { NARROW_SHEET_COLS } from "./overlay";
 import { nativeComponentId, Reconciler } from "./reconcile";
-import { setNativeRendering } from "./state";
+import { setNativeButtons, setNativeRendering } from "./state";
 
 /** A visible TUI overlay, bottom to top. */
 export interface NativeOverlay {
@@ -199,9 +199,10 @@ function sameSet(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
  * Kinds newer than some Tern builds that answer `TERM_PROGRAM=tern`: used only
  * once the real `hello` lists them, so the optimistic start never emits a node
  * an older terminal cannot draw (`media`: files Tern loads by path; `json`:
- * raw JSON values Tern draws as its own tree).
+ * raw JSON values Tern draws as its own tree; `button`: omp's buttons, which
+ * older builds get as role-styled rows).
  */
-const UNASSUMED_KINDS: Partial<Record<TspKind, true>> = { media: true, json: true };
+const UNASSUMED_KINDS: Partial<Record<TspKind, true>> = { media: true, json: true, button: true };
 
 /**
  * The reply a v1 terminal is assumed to give before its real `hello` arrives
@@ -380,6 +381,7 @@ export class NativeBackend {
 		this.#close(this.#inline, keep);
 		this.#inline.doc?.close();
 		setNativeRendering(false);
+		setNativeButtons(false);
 		this.#useNerdSymbols(false);
 		this.#clearStallTimer();
 		// Replies no longer reach the backend: forget the queries outright.
@@ -539,6 +541,8 @@ export class NativeBackend {
 		this.#limit = hello.apc !== undefined && hello.apc > 0 ? hello.apc : TSP_DEFAULT_APC_LIMIT;
 		this.#credits = hello.credits !== undefined && hello.credits > 0 ? hello.credits : TSP_DEFAULT_CREDITS;
 		this.#cx = new NativeContext(hello, hello.cols ?? this.#cx.cols);
+		// A changed vocabulary re-describes every component (`confirm`).
+		setNativeButtons(this.#cx.supports("button"));
 		this.#sawResize = false;
 	}
 

package/src/native/describe.ts

@@ -132,10 +132,15 @@ export function elapsed(age: number, stopped?: boolean): NativeNode {
 }
 
 /**
- * Keycap for one key id (`"ctrl+o"` → keys `["ctrl", "o"]`); the terminal
- * draws platform glyphs. A literal `+` key survives (`"+"`, `"ctrl++"`).
+ * The key names of one key id (`"ctrl+o"` → `["ctrl", "o"]`), as `kbd` and
+ * `button` `keys` take them. A literal `+` key survives (`"+"`, `"ctrl++"`).
  */
-export function kbd(key: string, nodeKey?: string): NativeNode {
+export function keyNames(key: string): string[] {
 	const keys = key === "+" ? ["+"] : key.endsWith("++") ? [...key.slice(0, -2).split("+"), "+"] : key.split("+");
-	return node("kbd", { keys: keys.filter(part => part.length > 0) }, undefined, nodeKey);
+	return keys.filter(part => part.length > 0);
+}
+
+/** Keycap for one key id ({@link keyNames}); the terminal draws platform glyphs. */
+export function kbd(key: string, nodeKey?: string): NativeNode {
+	return node("kbd", { keys: keyNames(key) }, undefined, nodeKey);
 }