@oh-my-pi/pi-tui 18.6.3 → 18.7.0

package/src/chat/table-chart.ts

@@ -0,0 +1,301 @@
+/**
+ * Charts drawn under numeric tables in assistant answers (the host's
+ * `tui.autoGraph`). {@link splitTableCharts} cuts a Markdown block after each
+ * top-level table that gets a chart; {@link lookupTableChart} plans, builds
+ * and draws that chart — locally under `always`, through the host's
+ * model-backed {@link TableChartPlanner} for multi-series tables under
+ * `smart` — and caches it per table source. {@link TableChartFigure} shows it
+ * as a rasterized terminal image; {@link describeTableChart} hands a TSP
+ * terminal the SVG itself. Both resolve the figure tokens against the live
+ * theme, so a chart follows theme switches like the prose around it.
+ */
+import { logger } from "@oh-my-pi/pi-utils";
+import type { Token, Tokens } from "@oh-my-pi/pi-utils/marked";
+import { type ChartPlan, buildChart, planChart, worthCharting } from "../charts/chart-plan";
+import { chartAlt, renderChartSvg } from "../charts/chart-svg";
+import { analyzeTable, type TableAnalysis } from "../charts/table-data";
+import type { ImageBudget } from "../components/image";
+import { lexDocument } from "../components/markdown";
+import { node } from "../native/describe";
+import { registerNativeBlob } from "../native/blobs";
+import type { NativeNode } from "../native/node";
+import { getThemeEpoch } from "../theme";
+import type { Component } from "../tui";
+import { SvgFigure, svgFigurePalette } from "./svg-figure";
+import { prepareSvg } from "./svg-source";
+
+/**
+ * `smart`: a model picks the kind and columns of multi-series tables;
+ * `always`: the local best guess charts every table it reads as numeric;
+ * `off`: tables stay tables.
+ */
+export type TableChartMode = "smart" | "always" | "off";
+
+/** A multi-series table the host's planner picks a chart for. */
+export interface TableChartRequest {
+	/** The table's Markdown source. */
+	readonly markdown: string;
+	readonly table: TableAnalysis;
+	/** The local best guess; the planner may keep it. */
+	readonly guess: ChartPlan;
+}
+
+/**
+ * Picks the chart for a multi-series table under `smart`: a plan, or `null`
+ * for no chart. A rejection falls back to the local guess.
+ */
+export type TableChartPlanner = (request: TableChartRequest) => Promise<ChartPlan | null>;
+
+/** A drawn chart, ready to resolve against the theme. */
+export interface TableChart {
+	/** SVG colored with figure tokens (`var(--accent)`, …). */
+	readonly svg: string;
+	readonly alt: string;
+	/** Size in SVG user units. */
+	readonly width: number;
+	readonly height: number;
+}
+
+/** The chart under a table: drawn, none, or a smart pick on its way (the promise settles once the cache holds it). */
+export type ChartLookup = TableChart | null | Promise<void>;
+
+/** One run of a Markdown block: prose (ending at a charted table), or the chart drawn after that table. */
+export type ChartSegment =
+	| { readonly kind: "markdown"; readonly text: string }
+	| { readonly kind: "chart"; readonly table: Tokens.Table };
+
+/** Tables cached per source; a long session keeps its recent charts without growing without bound. */
+const CACHE_LIMIT = 256;
+/** SVG user units per terminal column (16 per row on 1:2 cells), sizing native images. */
+const UNITS_PER_COLUMN = 8;
+/** A GFM delimiter row (`|---|:--:|`), the cheap test before lexing a block. */
+const DELIMITER_ROW = /^ {0,3}\|?[ \t]*:?-+:?[ \t]*\|/m;
+
+/** A table read once per source: its local guess and, once known, its chart. */
+interface ChartEntry {
+	readonly analysis: TableAnalysis;
+	readonly guess: ChartPlan | undefined;
+	/** The host's planner picks this table's chart. */
+	readonly smart: boolean;
+	/** `undefined` until drawn (or judged chartless). */
+	chart?: TableChart | null;
+	pending?: Promise<void>;
+}
+
+let chartMode: TableChartMode = "off";
+let chartPlanner: TableChartPlanner | undefined;
+const charts = new Map<string, ChartEntry>();
+/** The theme-resolved native blob last registered for a chart. */
+const kNativeBlob = Symbol("tableChart.nativeBlob");
+
+interface NativeTagged extends TableChart {
+	[kNativeBlob]?: { epoch: number; blob: string };
+}
+
+/** Set how tables become charts (the host's `tui.autoGraph`) and its `smart` planner; the host rebuilds the transcript after. */
+export function setTableCharts(mode: TableChartMode, planner?: TableChartPlanner): void {
+	chartMode = mode;
+	chartPlanner = planner;
+	charts.clear();
+}
+
+/** How assistant tables currently become charts. */
+export function tableChartMode(): TableChartMode {
+	return chartMode;
+}
+
+/** Whether `markdown` may hold a table {@link splitTableCharts} would chart. */
+export function hasChartTable(markdown: string): boolean {
+	return chartMode !== "off" && markdown.includes("|") && DELIMITER_ROW.test(markdown);
+}
+
+/**
+ * Split `markdown` after each top-level table that has (or may get) a chart.
+ * A table still streaming at the block's tail is left whole: rows may follow.
+ */
+export function splitTableCharts(markdown: string, streaming: boolean): ChartSegment[] {
+	if (chartMode === "off") return [{ kind: "markdown", text: markdown }];
+	const tokens = lexDocument(markdown);
+	const segments: ChartSegment[] = [];
+	let prose = "";
+	tokens.forEach((token, index) => {
+		prose += token.raw;
+		if (!isTable(token)) return;
+		const closed = !streaming || tokens.slice(index + 1).some(next => next.type !== "space");
+		const entry = closed ? chartEntry(token) : undefined;
+		if (!entry?.guess || entry.chart === null) return;
+		segments.push({ kind: "markdown", text: prose }, { kind: "chart", table: token });
+		prose = "";
+	});
+	if (prose.trim() || segments.length === 0) segments.push({ kind: "markdown", text: prose });
+	return segments;
+}
+
+function isTable(token: Token): token is Tokens.Table {
+	return token.type === "table";
+}
+
+/**
+ * The chart for `table` under the current mode, read once per table source.
+ * Under `smart` the first lookup of a multi-series table asks the planner.
+ */
+export function lookupTableChart(table: Tokens.Table): ChartLookup {
+	if (chartMode === "off") return null;
+	const entry = chartEntry(table);
+	if (entry.chart !== undefined) return entry.chart;
+	if (entry.pending) return entry.pending;
+	const { analysis, guess } = entry;
+	entry.pending = chartPlanner!({ markdown: table.raw, table: analysis, guess: guess! }).then(
+		plan => {
+			entry.chart = plan ? drawChart(analysis, plan) : null;
+		},
+		(error: unknown) => {
+			logger.debug("Smart table chart failed; drawing the local guess", { error: String(error) });
+			entry.chart = drawChart(analysis, guess!, true);
+		},
+	);
+	return entry.pending;
+}
+
+/**
+ * `table` read under the current mode, cached per source. A table the local
+ * guess decides is drawn at once; a smart pick waits for its first lookup.
+ */
+function chartEntry(table: Tokens.Table): ChartEntry {
+	const key = table.raw;
+	const cached = charts.get(key);
+	if (cached) {
+		// Re-insert so eviction drops the least recently read table.
+		charts.delete(key);
+		charts.set(key, cached);
+		return cached;
+	}
+	if (charts.size >= CACHE_LIMIT) charts.delete(charts.keys().next().value!);
+	const analysis = analyzeTable(
+		table.header.map(cell => cell.text),
+		table.rows.map(row => row.map(cell => cell.text)),
+	);
+	const guess = planChart(analysis);
+	const smart =
+		guess !== undefined &&
+		chartMode === "smart" &&
+		chartPlanner !== undefined &&
+		analysis.measures.length >= 2 &&
+		analysis.rows.length >= 3;
+	const entry: ChartEntry = { analysis, guess, smart };
+	if (!smart) entry.chart = guess ? drawChart(analysis, guess, true) : null;
+	charts.set(key, entry);
+	return entry;
+}
+
+/**
+ * Draw `plan`. A guess must also pass {@link worthCharting}; a model's pick
+ * already judged the chart worth drawing.
+ */
+function drawChart(analysis: TableAnalysis, plan: ChartPlan, guessed = false): TableChart | null {
+	const spec = buildChart(analysis, plan);
+	if (!spec || (guessed && !worthCharting(spec))) return null;
+	return { ...renderChartSvg(spec), alt: chartAlt(spec) };
+}
+
+/**
+ * A native `image` node drawing `chart` from its SVG — no raster — resolved
+ * against the active theme; rebuilt when the theme changes.
+ */
+export function describeTableChart(chart: TableChart, key: string): NativeNode {
+	const epoch = getThemeEpoch();
+	const tagged: NativeTagged = chart;
+	let entry = tagged[kNativeBlob];
+	if (entry?.epoch !== epoch) {
+		const svg = prepareSvg(chart.svg, svgFigurePalette());
+		entry = { epoch, blob: registerNativeBlob(new TextEncoder().encode(svg), "image/svg+xml") };
+		tagged[kNativeBlob] = entry;
+	}
+	return node(
+		"image",
+		{
+			blob: entry.blob,
+			alt: chart.alt,
+			w: chart.width,
+			h: chart.height,
+			max: { w: `${Math.round(chart.width / UNITS_PER_COLUMN)}ch` },
+		},
+		undefined,
+		key,
+	);
+}
+
+export interface TableChartFigureOptions {
+	/** Shared inline-image budget. */
+	budget?: ImageBudget;
+	/** The chart's rows changed outside a text update: its pick or raster landed. */
+	onChange: () => void;
+}
+
+/**
+ * The chart under one table, as a terminal image a blank row below it. Looks
+ * the chart up on first render — a block rebuilt mid-stream never asks for a
+ * pick it drops — and renders nothing until it is drawn, or when the table
+ * gets no chart.
+ */
+export class TableChartFigure implements Component {
+	readonly #options: TableChartFigureOptions;
+	readonly #figure: SvgFigure;
+	#table: Tokens.Table | undefined;
+	/** `undefined` while not looked up or waiting for a pick. */
+	#chart: TableChart | null | undefined;
+	#waiting = false;
+	#disposed = false;
+
+	constructor(options: TableChartFigureOptions) {
+		this.#options = options;
+		this.#figure = new SvgFigure({ budget: options.budget, onChange: options.onChange });
+	}
+
+	/** Point the figure at `table`. */
+	update(table: Tokens.Table): void {
+		if (table.raw === this.#table?.raw) return;
+		this.#table = table;
+		this.#chart = undefined;
+		this.#waiting = false;
+	}
+
+	/** 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));
+	}
+
+	render(width: number): readonly string[] {
+		if (this.#chart === undefined && !this.#waiting) this.#resolve();
+		if (!this.#chart) return [];
+		const rows = this.#figure.render(width);
+		return rows.length ? ["", ...rows] : rows;
+	}
+
+	invalidate(): void {
+		this.#figure.invalidate();
+	}
+
+	dispose(): void {
+		this.#disposed = true;
+		this.#figure.dispose();
+	}
+
+	#resolve(): void {
+		const table = this.#table;
+		if (!table) return;
+		const found = lookupTableChart(table);
+		if (found instanceof Promise) {
+			this.#waiting = true;
+			void found.then(() => {
+				if (this.#disposed || this.#table !== table) return;
+				this.#waiting = false;
+				this.#resolve();
+				this.#options.onChange();
+			});
+			return;
+		}
+		this.#chart = found;
+		if (found) this.#figure.update(found.svg, true);
+	}
+}

package/src/chrome/transcript-container.ts

@@ -57,6 +57,12 @@ export interface AppendOnlyTranscriptBlock {
 
 interface FinalizableBlock {
 	isTranscriptBlockFinalized?(): boolean;
+	/**
+	 * A finalized block whose rows still wait on async work (an SVG figure's
+	 * raster). Retirement holds until it lands: committed rows can never be
+	 * repainted, so retiring early would freeze a placeholder into scrollback.
+	 */
+	isTranscriptBlockPending?(): boolean;
 	/** Render the row that must remain represented under emergency viewport pressure. */
 	renderTranscriptBlockEmergencyRow?(width: number): string | undefined;
 }
@@ -121,7 +127,7 @@ const EMPTY_STABLE_ROWS: readonly TranscriptStableRow[] = [];
 
 function isFinalized(component: Component): boolean {
 	const block = component as Component & FinalizableBlock;
-	return block.isTranscriptBlockFinalized?.() ?? true;
+	return (block.isTranscriptBlockFinalized?.() ?? true) && block.isTranscriptBlockPending?.() !== true;
 }
 
 function blockMode(component: Component): TranscriptBlockMode {

package/src/components/editor.ts

@@ -737,9 +737,6 @@ export class Editor implements Component, Focusable {
 	#undoStack: EditorState[] = [];
 	#suspendUndo = false;
 
-	// Debounce timer for autocomplete updates
-	#autocompleteTimeout?: NodeJS.Timeout;
-
 	onSubmit?: (text: string) => void | Promise<void>;
 	onAltEnter?: (text: string) => void;
 	onChange?: (text: string) => void;
@@ -1907,7 +1904,7 @@ export class Editor implements Component, Focusable {
 				if (kb.matchesCanonical(canonical, "tui.input.tab") || rightArrowAccepts) {
 					const selected = this.#autocompleteList.getSelectedItem();
 					// Check for stale autocomplete state due to buffer edits since last refresh
-					// (destructive keys or paste can outrun the debounced update).
+					// (destructive keys or paste can outrun the async refresh).
 					const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
 					const currentTextBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
 					if (!this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected)) {
@@ -1917,7 +1914,7 @@ export class Editor implements Component, Focusable {
 					}
 					if (!selected) {
 						// An `@` popup whose narrowing filter matched nothing stays open with no
-						// candidate (see #debouncedUpdateAutocomplete). Nothing to accept: cancel the
+						// candidate (see #refreshAutocomplete). Nothing to accept: cancel the
 						// popup and fall through so Tab keeps its normal completion role and a right
 						// arrow at end of line moves the cursor.
 						this.#cancelAutocomplete();
@@ -1939,7 +1936,7 @@ export class Editor implements Component, Focusable {
 					!this.#selectedCompletionIsSkillNamespace()
 				) {
 					const selected = this.#autocompleteList.getSelectedItem();
-					// Check for stale autocomplete state due to debounce
+					// Check for stale autocomplete state while an async refresh is pending
 					const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
 					const currentTextBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
 					if (!this.#autocompletePrefixMatchesCursorText(currentTextBeforeCursor, selected)) {
@@ -2116,15 +2113,18 @@ export class Editor implements Component, Focusable {
 				const textBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
 				if (
 					findLeadingSlashCommandStart(textBeforeCursor) !== null &&
+					textBeforeCursor.trim() !== "/" &&
 					this.#isInSubmittedSlashCommandContext() &&
 					this.#autocompleteProvider?.trySyncSlashCompletion
 				) {
 					const syncResult = this.#autocompleteProvider.trySyncSlashCompletion(textBeforeCursor);
-					if (syncResult && syncResult.items.length > 0) {
+					// The collapsed `/skill:` namespace row is not a runnable command; Enter submits
+					// immediately after applying, so only a real command may be completed here.
+					const selected = syncResult?.items.find(item => item.value !== SKILL_NAMESPACE);
+					if (syncResult && selected) {
 						// Invalidate any pending async autocomplete so its stale results are discarded
 						this.#autocompleteRequestId += 1;
 						// Apply the best match and submit the completed command
-						const selected = syncResult.items[0]!;
 						const result = this.#autocompleteProvider.applyCompletion(
 							this.#state.lines,
 							this.#state.cursorLine,
@@ -2774,7 +2774,7 @@ export class Editor implements Component, Focusable {
 	 *  Mirrors the transient state the key dispatch tears down before this action so the two
 	 *  cannot diverge: a pending character jump is cancelled by any other key, and an open
 	 *  spelling-assist popup is dismissed by anything that is not one of its accept keys (its
-	 *  debounced refresh skips assist mode, so a surviving list would hang around forever).
+	 *  refresh skips assist mode, so a surviving list would hang around forever).
 	 *  While Vim owns the buffer (Normal or Visual) the operation is Vim's `x` — deleting the
 	 *  selection and returning to Normal in Visual mode, the grapheme under the cursor
 	 *  otherwise. Only Insert mode and Vim-off editors delete straight through. */
@@ -3184,7 +3184,7 @@ export class Editor implements Component, Focusable {
 				}
 			}
 		} else {
-			this.#debouncedUpdateAutocomplete();
+			this.#refreshAutocomplete();
 		}
 	}
 
@@ -3280,7 +3280,7 @@ export class Editor implements Component, Focusable {
 	/** Re-evaluate autocomplete triggers for the text ending at the cursor (used after bulk edits). */
 	#retriggerAutocompleteAtCursor(): void {
 		if (this.#autocompleteState) {
-			this.#debouncedUpdateAutocomplete();
+			this.#refreshAutocomplete();
 			return;
 		}
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
@@ -3462,7 +3462,7 @@ export class Editor implements Component, Focusable {
 				this.#cancelAutocomplete();
 				this.onAutocompleteUpdate?.();
 			} else {
-				this.#debouncedUpdateAutocomplete();
+				this.#refreshAutocomplete();
 			}
 		} else {
 			// If autocomplete was cancelled (no matches), re-trigger if we're in a completable context
@@ -3642,7 +3642,7 @@ export class Editor implements Component, Focusable {
 		this.#notifyChange();
 
 		if (this.#autocompleteState) {
-			this.#debouncedUpdateAutocomplete();
+			this.#refreshAutocomplete();
 		} else {
 			const currentLine = this.#state.lines[this.#state.cursorLine] || "";
 			const textBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
@@ -3976,7 +3976,7 @@ export class Editor implements Component, Focusable {
 
 		// Update or re-trigger autocomplete after forward delete
 		if (this.#autocompleteState) {
-			this.#debouncedUpdateAutocomplete();
+			this.#refreshAutocomplete();
 		} else {
 			const currentLine = this.#state.lines[this.#state.cursorLine] || "";
 			const textBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
@@ -4260,7 +4260,7 @@ export class Editor implements Component, Focusable {
 				if (!token.includes(" ") && !token.slice(1).includes("/")) {
 					// Guard the timing window where the popup was built for an earlier
 					// query (e.g. bare `/`) and the user typed further characters before
-					// the 100 ms debounced refresh fired: accept the stale skill only
+					// the async refresh landed: accept the stale skill only
 					// when the refreshed popup would still surface it (same gate as
 					// buildMidPromptSkillCompletions). `tmp` after a bare slash
 					// therefore falls through to file completion instead of rewriting
@@ -4547,7 +4547,6 @@ export class Editor implements Component, Focusable {
 
 	#cancelAutocomplete(notifyCancel: boolean = false): void {
 		const wasAutocompleting = this.#autocompleteState !== null;
-		this.#clearAutocompleteTimeout();
 		this.#invalidateAutocompleteRequests();
 		this.#autocompleteState = null;
 		this.#autocompleteList = undefined;
@@ -4666,7 +4665,7 @@ export class Editor implements Component, Focusable {
 		this.onAutocompleteUpdate?.();
 	}
 
-	/** Filter a shown `@` file list to the live `@` token until the debounced refresh replaces it. */
+	/** Filter a shown `@` file list to the live `@` token until the async refresh replaces it. */
 	#narrowAtFileList(): void {
 		if (!this.#autocompleteList || !this.#autocompletePrefix.startsWith("@")) return;
 		const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
@@ -4682,22 +4681,45 @@ export class Editor implements Component, Focusable {
 		for (const resolve of waiters) resolve();
 	}
 
-	#debouncedUpdateAutocomplete(): void {
-		if (this.#autocompleteState !== "assist") this.#narrowAtFileList();
-		if (this.#autocompleteTimeout) {
-			clearTimeout(this.#autocompleteTimeout);
-		}
-		this.#autocompleteTimeout = setTimeout(() => {
-			void this.#updateAutocomplete();
-			this.#autocompleteTimeout = undefined;
-		}, 100);
+	/**
+	 * Re-query suggestions for the live text after an edit while the popup is open. Runs on
+	 * every edit; the request queue coalesces bursts (a newer request replaces the pending one
+	 * and aborts the in-flight one), so no timer delays the popup behind the typing.
+	 */
+	#refreshAutocomplete(): void {
+		if (this.#autocompleteState === "assist") return;
+		if (this.#refreshSlashCommandListSync()) return;
+		this.#narrowAtFileList();
+		void this.#updateAutocomplete();
 	}
 
-	#clearAutocompleteTimeout(): void {
-		if (this.#autocompleteTimeout) {
-			clearTimeout(this.#autocompleteTimeout);
-			this.#autocompleteTimeout = undefined;
+	/**
+	 * Rebuild a shown slash command-name popup from the live token synchronously. An async
+	 * refresh resolves a microtask later at best, so Enter/Tab arriving in the same input
+	 * batch would accept a row computed for an earlier query (`/` → `mod` → Enter ran `/login`).
+	 * Returns false when the async refresh must handle the edit (arguments, mid-prompt
+	 * skills, absolute-path fall-through).
+	 */
+	#refreshSlashCommandListSync(): boolean {
+		const provider = this.#autocompleteProvider;
+		if (this.#autocompleteState !== "regular" || !provider?.trySyncSlashCompletion) return false;
+		if (!this.#isInSubmittedSlashCommandContext()) return false;
+		const currentLine = this.#state.lines[this.#state.cursorLine] ?? "";
+		const textBeforeCursor = currentLine.slice(0, this.#state.cursorCol);
+		const token = textBeforeCursor.trimStart();
+		if (token.includes(" ")) return false;
+		const suggestions = provider.trySyncSlashCompletion(textBeforeCursor);
+		if (suggestions) {
+			this.#invalidateAutocompleteRequests();
+			this.#showAutocompleteSuggestions(suggestions, "regular");
+			return true;
 		}
+		// No command matches: an inner slash may still be an absolute path, which needs the
+		// async file lookup. Otherwise the async refresh would only close the popup.
+		if (token.slice(1).includes("/")) return false;
+		this.#cancelAutocomplete();
+		this.onAutocompleteUpdate?.();
+		return true;
 	}
 
 	/**

package/src/components/image.ts

@@ -65,6 +65,11 @@ const RESTORE_CURSOR = "\x1b8";
 // non-plain so transcript blank-edge trimming does not collapse image-only blocks.
 const RESERVED_IMAGE_ROW = "\x1b[0m";
 
+/** Widest an {@link Image} rendered at `width` columns draws; callers sizing a raster for it (`SvgFigure`) match it. */
+export function imageMaxColumns(width: number): number {
+	return Math.max(1, width - 2);
+}
+
 /** Default count of inline images kept as live graphics before older ones fall back to text. */
 export const DEFAULT_MAX_INLINE_IMAGES = 8;
 
@@ -234,6 +239,8 @@ export class ImageBudget {
 	 * placements) instead of every image ever registered.
 	 */
 	#watchedPlacements = new Set<PlacementEmitState>();
+	/** Ids whose owner replaced them for good ({@link release}); retired once no frame shows them. */
+	#released = new Set<number>();
 
 	constructor(cap: number = DEFAULT_MAX_INLINE_IMAGES, requestRender: () => void = () => {}) {
 		this.#cap = normalizeCap(cap);
@@ -284,6 +291,17 @@ export class ImageBudget {
 		return id;
 	}
 
+	/**
+	 * Retire the graphic held under `key` as soon as no frame shows it, instead
+	 * of when the residency sweep reaches it. For an owner that replaced the
+	 * image for good — a streaming SVG figure's earlier raster — so superseded
+	 * revisions never push older images (scrollback included) out of the store.
+	 */
+	release(key: string): void {
+		const id = this.#keyToId.get(key);
+		if (id !== undefined) this.#released.add(id);
+	}
+
 	/**
 	 * Start an alternate-buffer lifecycle. Call once per `?1049h`, before the
 	 * first pass of the fullscreen overlay or resize borrow that owns the buffer.
@@ -405,6 +423,13 @@ export class ImageBudget {
 			if (this.#passShowsLive(id)) liveIds.add(id);
 		}
 		const transmitted = this.#transmitted[this.#surface];
+		for (const id of this.#released) {
+			// #retire refuses while this pass or the other surface still shows it.
+			if (transmitted.has(id)) this.#retire(id);
+			if (this.#isTransmitted(id)) continue;
+			this.#forgetKeyForId(id);
+			this.#released.delete(id);
+		}
 		if (this.#cap <= 0 || transmitted.size <= this.#cap) return;
 		for (const id of transmitted) {
 			if (transmitted.size <= this.#cap) break;
@@ -501,6 +526,7 @@ export class ImageBudget {
 		this.#idToKey.clear();
 		this.#placementState.clear();
 		this.#watchedPlacements.clear();
+		this.#released.clear();
 		for (const surface of SURFACES) this.#liveIds[surface].clear();
 		return [...ids];
 	}
@@ -892,7 +918,7 @@ export class Image implements Component {
 		}
 
 		const cap = this.#options.maxWidthCells;
-		const maxWidth = cap != null && cap > 0 ? Math.min(width - 2, cap) : width - 2;
+		const maxWidth = cap != null && cap > 0 ? Math.min(imageMaxColumns(width), cap) : imageMaxColumns(width);
 
 		let lines: string[];
 

package/src/components/markdown.ts

@@ -1343,10 +1343,13 @@ function probeBoundary(text: string, offset: number, size: number, mathBlocks: M
 }
 
 /**
- * Lex a whole document, windowing anything large enough for the quadratic scan
- * to bite. `links` holds every reference definition, at any nesting depth.
+ * Lex a whole document with the renderer's rules (math, custom rules,
+ * strikethrough), windowing anything large enough for the quadratic scan to
+ * bite. `links` holds every reference definition, at any nesting depth. Callers
+ * that split a document along its blocks (table charts) lex through this so
+ * they see the blocks Markdown renders.
  */
-function lexDocument(text: string): TokensList {
+export function lexDocument(text: string): TokensList {
 	// A CR shifts every `raw` span (marked normalizes CRLF before tokenizing), so
 	// window offsets would address the wrong characters — lex those in one pass.
 	if (text.length < WINDOWED_LEX_MIN_BYTES || text.includes("\r")) return markdownParser.lexer(text);