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

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## [18.14.1] - 2026-10-31
+
+### Added
+
+- Added a `maxRows` callback to `FigureMarkdown`, `SvgFigure` and `TableChartFigure` so surfaces shorter than the screen can fit their figures; zero hides a figure without delaying transcript completion ([#15661](https://github.com/can1357/oh-my-pi/issues/15661), [#15853](https://github.com/can1357/oh-my-pi/pull/15853) by [@KunoLu](https://github.com/KunoLu))
+
+### Fixed
+
+- Fixed IME composition text in the BTW history `Follow up:` input appearing at the left edge instead of at the caret when the hardware cursor is enabled ([#17427](https://github.com/can1357/oh-my-pi/issues/17427))
+- Fixed session tree rows overlapping when messages, tool arguments, or labels contain carriage returns or Unicode line/paragraph separators (`U+2028`, `U+2029`), while keeping multiline formatting in the selected entry preview ([#17430](https://github.com/can1357/oh-my-pi/pull/17430) by [@lincicomb](https://github.com/lincicomb)).
+- Fixed the Background jobs sheet dropping a finished job and its output while you were reading it; the selected job now stays until you select another ([#17506](https://github.com/can1357/oh-my-pi/pull/17506) by [@H4vC](https://github.com/H4vC))
+
 ## [18.14.0] - 2026-10-29
 
 ### Breaking Changes

package/README.md

@@ -521,6 +521,12 @@ SIXEL images encode off the JavaScript thread: the first render reserves the ima
 
 Supported formats: PNG, JPEG, GIF, WebP. Dimensions are parsed from the image headers automatically.
 
+### Figures
+
+`FigureMarkdown`, `SvgFigure`, and `TableChartFigure` size their images to a share of the terminal viewport. A surface shorter than the screen (an overlay, a pane) passes `maxRows: () => rows`, read on every render: the rows each figure may fill, a table chart's separator included. Zero hides a figure and keeps it from holding up transcript completion. Callers reserve room for prose and chrome themselves.
+
+Lowering the ceiling refits the drawn image at once and redraws it at the new size; a SIXEL reserves its rows while each re-encode runs off the JavaScript thread, as for a width change. Changing the ceiling of rows already committed to native scrollback forces a resync, so leave committed figures alone.
+
 ## Autocomplete
 
 ### CombinedAutocompleteProvider

package/dist/types/chat/figure-markdown.d.ts

@@ -8,6 +8,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;
 }

package/dist/types/chat/svg-figure.d.ts

@@ -16,6 +16,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;
 }

package/dist/types/chat/table-chart.d.ts

@@ -64,6 +64,8 @@ export declare 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;
 }

package/dist/types/components/image.d.ts

@@ -205,6 +205,12 @@ export declare class Image implements Component {
     /** Return source metadata without exposing the encoded image buffer. */
     debugState(): Record<string, unknown>;
     invalidate(): void;
+    /**
+     * 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;
     releaseRenderCaches(): void;
     /**
      * A native `image` backed by a content-addressed blob; the terminal fits

package/dist/types/overlays/btw-history-panel.d.ts

@@ -33,6 +33,8 @@ export declare class BtwHistoryPanel implements Component, Focusable {
     constructor(options: BtwHistoryPanelOptions);
     get focused(): boolean;
     set focused(value: boolean);
+    /** Keep the follow-up input's cursor mode aligned so the hardware cursor (and IME preedit) lands on its caret. */
+    setUseTerminalCursor(useTerminalCursor: boolean): void;
     update(records: readonly BtwHistoryRecord[]): void;
     /** Visual confirmation that `c` copied this record's answer to the clipboard. */
     markCopied(recordId: string, text: string): void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "18.14.0",
+	"version": "18.14.1",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": {
@@ -41,14 +41,14 @@
 		"gen:glyphs": "bun scripts/gen-glyphs.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/omptype": "18.14.0",
-		"@oh-my-pi/pi-agent-core": "18.14.0",
-		"@oh-my-pi/pi-ai": "18.14.0",
-		"@oh-my-pi/pi-catalog": "18.14.0",
-		"@oh-my-pi/pi-natives": "18.14.0",
-		"@oh-my-pi/pi-utils": "18.14.0",
-		"@oh-my-pi/pi-wire": "18.14.0",
-		"@oh-my-pi/snapcompact": "18.14.0"
+		"@oh-my-pi/omptype": "18.14.1",
+		"@oh-my-pi/pi-agent-core": "18.14.1",
+		"@oh-my-pi/pi-ai": "18.14.1",
+		"@oh-my-pi/pi-catalog": "18.14.1",
+		"@oh-my-pi/pi-natives": "18.14.1",
+		"@oh-my-pi/pi-utils": "18.14.1",
+		"@oh-my-pi/pi-wire": "18.14.1",
+		"@oh-my-pi/snapcompact": "18.14.1"
 	},
 	"devDependencies": {
 		"kitty-vt-wasm": "^0.2.0"

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/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/overlays/btw-history-panel.ts

@@ -150,6 +150,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 	#listScroll = 0;
 	#listHeight = 1;
 	#focused = false;
+	#useTerminalCursor = false;
 	#composer: FollowUpComposer | undefined;
 	readonly #pasteHandler = new BracketedPasteHandler();
 	#followUpPending = false;
@@ -225,6 +226,12 @@ export class BtwHistoryPanel implements Component, Focusable {
 		this.#focused = value;
 	}
 
+	/** Keep the follow-up input's cursor mode aligned so the hardware cursor (and IME preedit) lands on its caret. */
+	setUseTerminalCursor(useTerminalCursor: boolean): void {
+		this.#useTerminalCursor = useTerminalCursor;
+		this.#composer?.input.setUseTerminalCursor(useTerminalCursor);
+	}
+
 	update(records: readonly BtwHistoryRecord[]): void {
 		this.#records = records;
 		this.#detailDirty = true;
@@ -329,6 +336,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 		const input = new Input();
 		input.prompt = theme.fg("accent", "Follow up: ");
 		input.placeholder = "Ask about this answer…";
+		input.setUseTerminalCursor(this.#useTerminalCursor);
 		if (this.#options.spaceHoldKeys !== undefined) input.spaceHold.keys = this.#options.spaceHoldKeys;
 		input.spaceHold.handler = this.#options.spaceHold?.(input);
 		const composer: FollowUpComposer = {

package/src/overlays/jobs-panel.ts

@@ -130,6 +130,12 @@ export class JobsSheet implements Component {
 	#native: { key: string; output: string | undefined; node: NativeNode } | undefined;
 	/** Fallback output tail, reused while the selected job's output is unchanged. */
 	#tail: { id: string; output: string; lines: readonly string[] } | undefined;
+	/**
+	 * The selected job as last seen: its row, detail and the subagents placing
+	 * it. The session evicts settled jobs on its own clock; while the user keeps
+	 * one selected it stays listed with its last output, until they select another.
+	 */
+	#held: { job: JobsPanelJob; detail: JobsPanelDetail | undefined; agents: readonly JobTreeAgent[] } | undefined;
 
 	constructor(source: JobsSheetSource) {
 		this.#source = source;
@@ -137,7 +143,7 @@ export class JobsSheet implements Component {
 
 	describe(_cx: DescribeContext): NativeNode {
 		const { rows, jobs, selected, cancellable } = this.#current();
-		const detail = selected && this.#source.inspect(selected.id);
+		const detail = selected && this.#inspect(selected.id);
 		const now = Date.now();
 		// Elapsed nodes tick on their own; list values and the output pane redraw
 		// when a job starts, settles, leaves or moves in the tree, its process
@@ -201,7 +207,7 @@ export class JobsSheet implements Component {
 				),
 			);
 		}
-		const detail = selected && this.#source.inspect(selected.id);
+		const detail = selected && this.#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.
@@ -262,15 +268,43 @@ export class JobsSheet implements Component {
 		selected: JobsPanelJob | undefined;
 		cancellable: boolean;
 	} {
-		const { running, recent, rootId, agents } = this.#source.load();
-		const rows = buildJobTree([...running, ...recent], agents ?? [], rootId);
+		const snapshot = this.#source.load();
+		const { running, rootId } = snapshot;
+		let { recent, agents = [] } = snapshot;
+		// A settled job the session evicted stays listed while it is selected.
+		const held = this.#held?.job.id === this.#selectedId ? this.#held : undefined;
+		const evicted =
+			held !== undefined &&
+			held.job.status !== "running" &&
+			!running.some(job => job.id === held.job.id) &&
+			!recent.some(job => job.id === held.job.id);
+		if (evicted) {
+			recent = [...recent, held.job];
+			const known = new Set(agents.map(agent => agent.id));
+			agents = [...agents, ...held.agents.filter(agent => !known.has(agent.id))];
+		}
+		const rows = buildJobTree([...running, ...recent], agents, rootId);
 		const jobs = rows.flatMap(entry => (entry.kind === "job" ? [entry.job] : []));
 		const selected = jobs.find(job => job.id === this.#selectedId) ?? jobs[0];
 		this.#selectedId = selected?.id;
+		if (!selected) this.#held = undefined;
+		else if (!evicted) {
+			const detail = held?.job.id === selected.id ? held.detail : undefined;
+			this.#held = { job: selected, detail, agents: snapshot.agents ?? [] };
+		}
 		const owned = selected?.ownerId === undefined || selected.ownerId === rootId;
 		return { rows, jobs, selected, cancellable: this.#source.cancel !== undefined && owned };
 	}
 
+	/** The job's detail from the source, else the last one seen while it was held. */
+	#inspect(id: string): JobsPanelDetail | undefined {
+		const detail = this.#source.inspect(id);
+		const held = this.#held?.job.id === id ? this.#held : undefined;
+		if (!held) return detail;
+		if (detail) held.detail = detail;
+		return held.detail;
+	}
+
 	#tailLines(id: string, output: string): readonly string[] {
 		const cached = this.#tail;
 		if (cached?.id === id && cached.output === output) return cached.lines;

package/src/overlays/tree-selector.ts

@@ -94,10 +94,15 @@ interface AdvisorTreeDisplay {
  */
 function sanitizeTreeField(value: string): string {
 	return sanitizeText(value)
-		.replace(/[\n\t]/g, " ")
+		.replace(/[\r\n\t\u2028\u2029]/g, " ")
 		.trim();
 }
 
+/** Strip ANSI/control characters and fold line breaks for single-line tree rows and headers. */
+function treeRowText(value: string): string {
+	return plainText(value.replace(/[\r\n\u2028\u2029]/g, " "));
+}
+
 /**
  * Extract display metadata from an advisor custom-message's `details.notes`,
  * ignoring the model-facing `<advisory>` wrapper stored in `content`. Collects
@@ -734,9 +739,7 @@ class TreeList implements Component {
 	#pickerItem(row: TreeRow<TreeSelectorNode, string>, open: boolean): TspPickerItem {
 		const item = row.item;
 		const entry = item.entry;
-		const label = this.#entryParts(item).map(part =>
-			span(part.t.includes("\x1b") ? plainText(part.t) : part.t, part.s),
-		);
+		const label = this.#entryParts(item).map(part => span(treeRowText(part.t), part.s));
 		let kind: TspPickerItem["node"] = "marker";
 		let role: string | undefined;
 		if (isUserRequestEntry(entry)) {
@@ -755,7 +758,7 @@ class TreeList implements Component {
 			node: kind,
 			...(role ? { role } : {}),
 			...(open ? { open: true } : {}),
-			...(item.label ? { badges: [{ text: plainText(item.label), tone: "warning" as const }] } : {}),
+			...(item.label ? { badges: [{ text: treeRowText(item.label), tone: "warning" as const }] } : {}),
 			...(this.#activePathIds.has(row.key) ? { dot: "accent" as const } : {}),
 		};
 	}
@@ -772,7 +775,7 @@ class TreeList implements Component {
 		if (selected) {
 			const entry = selected.entry;
 			const parts = this.#entryParts(selected)
-				.map(part => (part.t.includes("\x1b") ? plainText(part.t) : part.t))
+				.map(part => treeRowText(part.t))
 				.join("");
 			if (entry.type === "message" || entry.type === "custom_message") {
 				const target: OutlineTarget = {
@@ -784,12 +787,14 @@ class TreeList implements Component {
 					entries: [entry],
 				};
 				const copy = targetCopy(target, collectBlocks(target.entries));
-				preview.push(text(`${copy.label[0]!.toUpperCase()}${copy.label.slice(1)}`, { role: "omp.picker.title" }));
-				if (selected.label) preview.push(text([span(plainText(selected.label), "warning")]));
+				preview.push(
+					text(treeRowText(`${copy.label[0]!.toUpperCase()}${copy.label.slice(1)}`), { role: "omp.picker.title" }),
+				);
+				if (selected.label) preview.push(text([span(treeRowText(selected.label), "warning")]));
 				preview.push(turnPreview(target, copy.content || parts));
 			} else {
 				preview.push(text(parts, { role: "omp.picker.title" }));
-				if (selected.label) preview.push(text([span(plainText(selected.label), "warning")]));
+				if (selected.label) preview.push(text([span(treeRowText(selected.label), "warning")]));
 			}
 		}
 		this.#previewMemo = { node: selected, labels: this.#labelVersion, preview };
@@ -859,9 +864,9 @@ class TreeList implements Component {
 		if (cached !== undefined && cached.label === item.label && cached.branch === branch) return cached.node;
 		const label: TspSpan[] = [];
 		if (this.#activePathIds.has(row.key)) label.push(span(`${theme.md.bullet} `, "accent"));
-		if (item.label) label.push(span(`[${plainText(item.label)}] `, "warning"));
+		if (item.label) label.push(span(`[${treeRowText(item.label)}] `, "warning"));
 		for (const part of this.#entryParts(item)) {
-			label.push(span(part.t.includes("\x1b") ? plainText(part.t) : part.t, part.s));
+			label.push(span(treeRowText(part.t), part.s));
 		}
 		const described = node("item", { label, icon: branch ? "branch" : undefined }, undefined, row.key);
 		this.#itemCache.set(row.key, { label: item.label, branch, node: described });
@@ -954,7 +959,7 @@ class TreeList implements Component {
 		// Active path marker - shown right before the entry text
 		const isOnActivePath = this.#activePathIds.has(node.entry.id);
 		const pathMarker = isOnActivePath ? theme.fg("accent", `${theme.md.bullet} `) : "";
-		const label = node.label ? theme.fg("warning", `[${node.label}] `) : "";
+		const label = node.label ? theme.fg("warning", `[${treeRowText(node.label)}] `) : "";
 		return `${pathMarker}${label}${this.#getEntryDisplayText(node, selected)}`;
 	}
 
@@ -1050,7 +1055,10 @@ class TreeList implements Component {
 
 	#getEntryDisplayText(node: TreeSelectorNode, isSelected: boolean): string {
 		let result = "";
-		for (const part of this.#entryParts(node)) result += part.s ? theme.fg(part.s, part.t) : part.t;
+		for (const part of this.#entryParts(node)) {
+			const value = treeRowText(part.t);
+			result += part.s ? theme.fg(part.s, value) : value;
+		}
 		return isSelected ? theme.bold(result) : result;
 	}