@oh-my-pi/pi-tui 18.8.6 → 18.8.7

package/src/chrome/transcript-container.ts

@@ -206,6 +206,7 @@ export class TranscriptContainer extends Container {
 	 */
 	#frameRows = new Map<TranscriptEntry, readonly string[]>();
 	#frameRowsWidth = 0;
+	#releaseFailures = new WeakSet<Component>();
 	/** The `children` array `#entries` last mirrored; see {@link #syncEntries}. */
 	#syncedChildren: Component[] | undefined;
 	/** Forces the next {@link #syncEntries} to compare every entry, not just the live tail. */
@@ -583,7 +584,10 @@ export class TranscriptContainer extends Container {
 			popLoopPhase();
 		}
 		this.#replayPending = false;
-		if (rows.length === 0) return undefined;
+		if (rows.length === 0) {
+			this.#releaseCommittedRenderCaches();
+			return undefined;
+		}
 		const batch: HistoryBatch = { id: this.#nextBatchId++, rows, kind: "replay" };
 		this.#offered = { batch, kind: "replay" };
 		return batch;
@@ -747,6 +751,8 @@ export class TranscriptContainer extends Container {
 				this.#retireEntry(this.#entries[index]!);
 			}
 			this.#frontier = offered.end;
+		} else {
+			this.#releaseCommittedRenderCaches();
 		}
 		this.#offered = undefined;
 		if (this.#replayRequested) this.#startReplay();
@@ -766,6 +772,7 @@ export class TranscriptContainer extends Container {
 			const entry = this.#entries[index]!;
 			this.#setAllocation(entry.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
 			const block = trimBlankEdges(entry.component.render(width));
+			if (entry.state === "committed") this.#releaseRenderCaches(entry);
 			if (block.length === 0) continue;
 			if (rows.length > 0) rows.unshift("");
 			rows.unshift(...block);
@@ -813,6 +820,7 @@ export class TranscriptContainer extends Container {
 		for (const entry of this.#entries) {
 			this.#setAllocation(entry.component, Number.MAX_SAFE_INTEGER, this.#lastFrame);
 			const block = this.#renderEntry(entry, width);
+			if (entry.state === "committed") this.#releaseRenderCaches(entry);
 			if (block.length === 0) continue;
 			if (rows.length > 0) rows.push("");
 			this.#childStartRows.set(entry.component, rows.length);
@@ -1054,6 +1062,29 @@ export class TranscriptContainer extends Container {
 		entry.stableRows = EMPTY_STABLE_ROWS;
 		entry.renderedStableByWidth = new Map();
 		entry.stableRowCountByWidth = new Map();
+		this.#frameRows.delete(entry);
+		this.#releaseRenderCaches(entry);
+	}
+
+	#releaseCommittedRenderCaches(): void {
+		for (let index = 0; index < this.#frontier; index++) {
+			this.#releaseRenderCaches(this.#entries[index]!);
+		}
+	}
+
+	#releaseRenderCaches(entry: TranscriptEntry): void {
+		const release = entry.component.releaseRenderCaches;
+		if (release === undefined) return;
+		try {
+			release.call(entry.component);
+		} catch (err) {
+			if (this.#releaseFailures.has(entry.component)) return;
+			this.#releaseFailures.add(entry.component);
+			logger.warn("Transcript block failed to release render caches", {
+				component: entry.component.constructor.name,
+				error: String(err),
+			});
+		}
 	}
 
 	#startReplay(): void {

package/src/components/box.ts

@@ -135,6 +135,11 @@ export class Box implements Component {
 		}
 	}
 
+	releaseRenderCaches(): void {
+		this.#invalidateCache();
+		for (const child of this.children) child.releaseRenderCaches?.();
+	}
+
 	/**
 	 * A `card` when the box has a border or background: the background token
 	 * picks tone/role (user message, tool state, selection), a border colour

package/src/components/disclosure.ts

@@ -100,6 +100,14 @@ export class Disclosure implements Component {
 		this.#body?.invalidate?.();
 	}
 
+	releaseRenderCaches(): void {
+		this.#cache = undefined;
+		this.#boundedCache = undefined;
+		this.#summary?.releaseRenderCaches?.();
+		this.#collapsedBody?.releaseRenderCaches?.();
+		this.#body?.releaseRenderCaches?.();
+	}
+
 	dispose(): void {
 		if (this.#disposed) return;
 		this.#disposed = true;

package/src/components/image.ts

@@ -10,8 +10,7 @@ import {
 	renderImage,
 	TERMINAL,
 } from "../terminal-capabilities";
-import { registerNativeBlob } from "../native/blobs";
-import { node } from "../native/describe";
+import { nativeImageNode } from "../native/blobs";
 import type { DescribeContext, NativeNode } from "../native/node";
 import type { Component } from "../tui";
 
@@ -826,6 +825,11 @@ export class Image implements Component {
 		this.#cachedWidth = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#cachedLines = undefined;
+		this.#cachedWidth = undefined;
+	}
+
 	/**
 	 * SIXEL sequence for a target size. A new size starts the encode off the JS
 	 * thread and answers `undefined` until it settles; the settled encode
@@ -865,11 +869,9 @@ export class Image implements Component {
 	 */
 	describe(_cx: DescribeContext): NativeNode {
 		if (this.#native) return this.#native;
-		const blob = registerNativeBlob(Buffer.from(this.#base64Data, "base64"), this.#mimeType);
 		const maxW = this.#options.maxWidthCells;
 		const maxH = this.#options.maxHeightCells;
-		this.#native = node("image", {
-			blob,
+		this.#native = nativeImageNode(Buffer.from(this.#base64Data, "base64"), this.#mimeType, {
 			alt: imageFallback(this.#mimeType, this.#dimensions, this.#options.filename),
 			w: this.#dimensions.widthPx,
 			h: this.#dimensions.heightPx,

package/src/components/key-value-list.ts

@@ -54,6 +54,10 @@ export class KeyValueList implements Component {
 		this.#native = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#cache = undefined;
+	}
+
 	/** An aligned `kv` grid; label width and value wrapping are the terminal's. */
 	describe(_cx: DescribeContext): NativeNode {
 		this.#native ??= node("kv", {

package/src/components/layout/row.ts

@@ -168,6 +168,13 @@ export class Row implements Component, MouseRoutable {
 		}
 	}
 
+	releaseRenderCaches(): void {
+		this.#memo = undefined;
+		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
+			child.releaseRenderCaches?.();
+		}
+	}
+
 	dispose(): void {
 		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
 			child.dispose?.();

package/src/components/layout/stack.ts

@@ -140,6 +140,13 @@ export class Stack implements Component, MouseRoutable {
 		}
 	}
 
+	releaseRenderCaches(): void {
+		this.#memo = undefined;
+		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
+			child.releaseRenderCaches?.();
+		}
+	}
+
 	dispose(): void {
 		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
 			child.dispose?.();

package/src/components/markdown.ts

@@ -2016,6 +2016,14 @@ export class Markdown implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.invalidate();
+		this.#dropStreamPrefix();
+		this.#streamingHighlightCache = undefined;
+		this.#fastTail = undefined;
+		this.#lastTailCapture = undefined;
+	}
+
 	/**
 	 * The unrendered source as an `md` node, `stream` while the streaming
 	 * (transient) cache is on. Append-only growth yields a fresh node of the

package/src/components/scroll-view.ts

@@ -408,6 +408,11 @@ export class ScrollView implements Component {
 		this.#child?.invalidate?.();
 	}
 
+	releaseRenderCaches(): void {
+		this.#cache = undefined;
+		this.#child?.releaseRenderCaches?.();
+	}
+
 	/** Permanently release a wrapped child's timers, subscriptions, and other resources. */
 	dispose(): void {
 		if (this.#disposed) return;

package/src/components/section.ts

@@ -51,6 +51,11 @@ export class Section implements Component {
 		this.#cache = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#cache = undefined;
+		if (isComponent(this.#options.body)) this.#options.body.releaseRenderCaches?.();
+	}
+
 	dispose(): void {
 		if (this.#disposed) return;
 		this.#disposed = true;

package/src/components/table.ts

@@ -117,6 +117,10 @@ export class Table implements Component {
 		this.#native = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#cache = undefined;
+	}
+
 	/**
 	 * A native `table`. Column priorities carry over unchanged (lower gives
 	 * way first); truncating columns truncate at the end, the rest keep

package/src/components/text.ts

@@ -109,6 +109,13 @@ export class Text implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#cachedText = undefined;
+		this.#cachedWidth = undefined;
+		this.#cachedWidthConfigEpoch = undefined;
+		this.#cachedLines = undefined;
+	}
+
 	/**
 	 * Wrapped text; styling re-derived from the styled source so a theme swap
 	 * re-resolves tokens. A background fill becomes the node's tone.

package/src/components/truncated-text.ts

@@ -41,6 +41,11 @@ export class TruncatedText implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#cachedWidth = -1;
+		this.#cachedLines = undefined;
+	}
+
 	/** First line only, clamped to one visual line with an end ellipsis. */
 	describe(_cx: DescribeContext): NativeNode {
 		if (this.#native) return this.#native;

package/src/native/backend.ts

@@ -305,8 +305,8 @@ export class NativeBackend {
 	#paletteKey: string | undefined;
 	/** Serialized palette last sent, to skip resends of an unchanged theme. */
 	#paletteSent: string | undefined;
-	/** Blobs handled on this connection: asked about in a `blobs` query, or sent (or held by the terminal). */
-	#blobs = new Map<string, "asked" | "sent">();
+	/** Pending delivery owns bytes until sent or confirmed held; settled descriptions may already be released. */
+	#blobs = new Map<string, NativeBlob | "sent">();
 	/** `blobs` queries sent, oldest first: the terminal answers each once, in order. */
 	#blobQueries: BlobQuery[] = [];
 	/** The next pass with new blobs asks the terminal which it holds (a fresh connection). */
@@ -663,13 +663,13 @@ export class NativeBackend {
 		}
 		const dir = Bun.env.TERN_BLOB_DIR;
 		if (dir) {
-			for (const blob of fresh) this.#blobs.set(blob.id, "asked");
+			for (const blob of fresh) this.#blobs.set(blob.id, blob);
 			void this.#cacheBlobs(dir, fresh);
 			return;
 		}
 		if (this.#askHeld) {
 			this.#askHeld = false;
-			this.#askBlobs(fresh.map(blob => blob.id));
+			this.#askBlobs(fresh);
 			return;
 		}
 		for (const blob of fresh) this.#sendBlob(blob);
@@ -680,13 +680,14 @@ export class NativeBackend {
 		const epoch = this.#blobEpoch;
 		await Promise.all(blobs.map(blob => cacheBlob(dir, blob)));
 		if (epoch !== this.#blobEpoch) return;
-		const ids = blobs.map(blob => blob.id).filter(id => this.#blobs.get(id) === "asked");
-		if (ids.length > 0) this.#askBlobs(ids);
+		const pending = blobs.filter(blob => this.#blobs.get(blob.id) === blob);
+		if (pending.length > 0) this.#askBlobs(pending);
 	}
 
-	/** Ask the terminal which of `ids` it holds; the reply (or its absence) settles them. */
-	#askBlobs(ids: readonly string[]): void {
-		for (const id of ids) this.#blobs.set(id, "asked");
+	/** Ask the terminal which of `blobs` it holds; the reply (or its absence) settles them. */
+	#askBlobs(blobs: readonly NativeBlob[]): void {
+		for (const blob of blobs) this.#blobs.set(blob.id, blob);
+		const ids = blobs.map(blob => blob.id);
 		const query: BlobQuery = { ids, timer: undefined };
 		query.timer = this.#scheduler.scheduleRender(() => {
 			query.timer = undefined;
@@ -707,16 +708,16 @@ export class NativeBackend {
 	#onBlobsReply(have: readonly string[]): void {
 		const query = this.#blobQueries.shift();
 		for (const id of have) {
-			if (this.#blobs.get(id) !== "asked") continue;
-			this.#blobs.set(id, "sent");
+			const blob = this.#blobs.get(id);
+			if (blob === undefined || blob === "sent") continue;
 			// The bytes went another way; a recording still carries them so a replay without them shows the image.
-			const blob = this.#recordPath ? getNativeBlob(id) : undefined;
-			if (blob) {
+			if (this.#recordPath) {
 				const body = Buffer.from(blob.bytes.buffer, blob.bytes.byteOffset, blob.bytes.byteLength).toString(
 					"base64",
 				);
 				this.#record("out", "b", blobParams(blob), body);
 			}
+			this.#blobs.set(id, "sent");
 		}
 		if (!query?.timer) return;
 		query.timer.cancel();
@@ -727,8 +728,8 @@ export class NativeBackend {
 	/** Send inline every id of `ids` still waiting on a query. */
 	#sendMissing(ids: readonly string[]): void {
 		for (const id of ids) {
-			const blob = this.#blobs.get(id) === "asked" ? getNativeBlob(id) : undefined;
-			if (blob) this.#sendBlob(blob);
+			const blob = this.#blobs.get(id);
+			if (blob !== undefined && blob !== "sent") this.#sendBlob(blob);
 		}
 	}
 

package/src/native/blobs.ts

@@ -18,7 +18,13 @@ export interface NativeBlob {
 	readonly bytes: Uint8Array;
 }
 
-const blobs = new Map<string, NativeBlob>();
+const blobs = new Map<string, WeakRef<NativeBlob>>();
+const registeredBlobs = new Map<string, NativeBlob>();
+const releasedBlobs = new FinalizationRegistry<{ id: string; reference: WeakRef<NativeBlob> }>(({ id, reference }) => {
+	if (blobs.get(id) === reference) blobs.delete(id);
+});
+// Props spreads preserve ownership; wire serialization omits symbol keys.
+const kBlob = Symbol("native.blob");
 // Registration usually repeats with the same bytes object on every describe;
 // the tag skips rehashing it.
 const kBlobId = Symbol("native.blobId");
@@ -27,19 +33,42 @@ interface BlobTagged {
 	[kBlobId]?: string;
 }
 
-/** Register `bytes` and return their content address (sha256 hex) for `image.p.blob`. */
-export function registerNativeBlob(bytes: Uint8Array, mime: string): string {
+function getOrCreateBlob(bytes: Uint8Array, mime: string): NativeBlob {
 	const known = (bytes as BlobTagged)[kBlobId];
-	if (known !== undefined) return known;
-	const id = new Bun.CryptoHasher("sha256").update(bytes).digest("hex");
+	const id = known ?? new Bun.CryptoHasher("sha256").update(bytes).digest("hex");
 	(bytes as BlobTagged)[kBlobId] = id;
-	if (!blobs.has(id)) blobs.set(id, { id, mime, bytes });
-	return id;
+	let blob = blobs.get(id)?.deref();
+	if (!blob) {
+		blob = { id, mime, bytes };
+		const reference = new WeakRef(blob);
+		blobs.set(id, reference);
+		releasedBlobs.register(blob, { id, reference });
+	}
+	return blob;
+}
+
+/** Register bytes for process-lifetime, id-only use. Prefer {@link nativeImageNode} for owned images. */
+export function registerNativeBlob(bytes: Uint8Array, mime: string): string {
+	const blob = getOrCreateBlob(bytes, mime);
+	registeredBlobs.set(blob.id, blob);
+	return blob.id;
 }
 
 /** A registered blob by id. */
 export function getNativeBlob(id: string): NativeBlob | undefined {
-	return blobs.get(id);
+	return blobs.get(id)?.deref();
+}
+
+/** An image whose props own its bytes, including while hidden, unmounted, or awaiting upload. */
+export function nativeImageNode(
+	bytes: Uint8Array,
+	mime: string,
+	p?: Omit<TspProps<"image">, "blob" | "builtin">,
+	key?: string,
+): NativeNode {
+	const blob = getOrCreateBlob(bytes, mime);
+	const props = { ...p, blob: blob.id, [kBlob]: blob };
+	return node("image", props, undefined, key);
 }
 
 /**
@@ -53,9 +82,13 @@ export function base64ImageNode(
 	p?: Omit<TspProps<"image">, "blob" | "builtin" | "w" | "h">,
 	key?: string,
 ): NativeNode {
-	const blob = registerNativeBlob(Buffer.from(data, "base64"), mimeType);
 	const size = getImageDimensions(data, mimeType);
-	return node("image", size ? { ...p, blob, w: size.widthPx, h: size.heightPx } : { ...p, blob }, undefined, key);
+	return nativeImageNode(
+		Buffer.from(data, "base64"),
+		mimeType,
+		size ? { ...p, w: size.widthPx, h: size.heightPx } : p,
+		key,
+	);
 }
 
 /** `image` nodes for base64 payloads, one per slot key, rebuilt only when the slot's payload changes. */

package/src/native/reconcile.ts

@@ -30,6 +30,7 @@
 import * as logger from "@oh-my-pi/pi-utils/logger";
 import { TSP_TEXT_KINDS, type TspKind, type TspNode, type TspOp, type TspScrollBy } from "@oh-my-pi/pi-wire";
 import { type Component, Container, CURSOR_MARKER } from "../tui";
+import { getNativeBlob } from "./blobs";
 import { normalizeIconProps } from "./icons";
 import type { DescribeContext, NativeChild, NativeNode, NativeRevealAt } from "./node";
 import { isNativeSettled } from "./settle";
@@ -291,6 +292,7 @@ export class Reconciler {
 		this.#prevPortals = portals;
 		this.#regions = next;
 		for (const entry of this.#dels) this.#deleteEntry(entry);
+		this.#dels = [];
 		// Parked to survive a parent/child swap but absent from the new description.
 		for (const state of this.#parked) {
 			if (!state.parked) continue;
@@ -711,6 +713,8 @@ export class Reconciler {
 		owner: Owner,
 		entries: readonly Entry[],
 	): Readonly<Record<string, unknown>> | undefined {
+		// Dereferencing pins the blob through this synchronous reconcile/upload job, even after settling drops its node.
+		if (node.k === "image" && node.p?.blob) getNativeBlob(node.p.blob);
 		return normalizeIconProps(node.k, this.#resolveRefs(node, owner, entries));
 	}
 

package/src/overlays/session-selector.ts

@@ -525,12 +525,12 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 	readonly #getCurrentSessionPath: () => string | undefined;
 	readonly #historyMatcher?: SessionHistoryMatcher;
 	#historyMergeTimer: NodeJS.Timeout | undefined;
-	/** Re-render hook for async list updates (fuzzy scan chunks, history merge). */
+	/** Re-render hook for async list updates (fuzzy scan completion, history merge). */
 	onRequestRender?: () => void;
 
 	// ── Incremental search state ──────────────────────────────────────────
 	// The menu's visible list is always composed from these three inputs (see
-	// #composeFiltered), so late-arriving fuzzy chunks and the debounced
+	// #composeFiltered), so a late-finishing fuzzy scan and the debounced
 	// history merge can land in any order without clobbering each other.
 	/** Recency-ranked sessions whose text contains every query token verbatim. */
 	#literalRanked: RankedSessionMatch<T>[] = [];
@@ -543,8 +543,8 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 	#scanTimer: NodeJS.Timeout | undefined;
 	/**
 	 * True once the user moved the selection for the current query; blocks the
-	 * history merge from reordering the list under their cursor. (Fuzzy chunks
-	 * only append below the literal group, which never shifts existing rows.)
+	 * history merge from reordering the list under their cursor. (The fuzzy scan
+	 * only appends below the literal group, which never shifts existing rows.)
 	 */
 	#selectionMoved = false;
 	/** True after a nonempty query; empty refilter restores current only then. */
@@ -687,38 +687,48 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 		// Fuzzy pass: building a fuzzy index per session is too expensive to run
 		// across a huge listing inside one keystroke, so scan a bounded slice now
 		// and spill the remainder into async chunks.
-		this.#scanFuzzySlice(this.#scanGeneration, tokens, rest, 0, FUZZY_SCAN_INLINE_COUNT);
+		const inlineEnd = Math.min(rest.length, FUZZY_SCAN_INLINE_COUNT);
+		this.#scoreFuzzy(tokens, rest, 0, inlineEnd);
 		this.#composeFiltered();
+		if (inlineEnd < rest.length) {
+			this.#scheduleFuzzyScan(this.#scanGeneration, tokens, rest, inlineEnd, this.#fuzzyRanked.length);
+		}
 		// New query rebuilds ranking from scratch. Same-query refilter (delete)
-		// and async compose (fuzzy chunks / history merge) only clamp so an
+		// and async compose (fuzzy scan / history merge) only clamp so an
 		// arrow selection survives. A live-session index > 0 would otherwise
 		// land on a lower-ranked match after the first keystroke.
 		if (queryChanged) this.#menu.setSelectedIndex(0);
 		this.#scheduleHistoryMerge(query);
 	}
 
-	/**
-	 * Score up to `budget` sessions from `rest[start..]` (indexes into the
-	 * unfiltered list), then schedule the remainder on a macrotask so pending
-	 * input events run first. Chunks that added matches recompose the visible
-	 * list and request a render; a stale generation aborts silently.
-	 */
-	#scanFuzzySlice(generation: number, tokens: string[], rest: number[], start: number, budget: number): void {
+	/** Fuzzy-score `rest[start..end)` (indexes into the unfiltered list) into {@link #fuzzyRanked}. */
+	#scoreFuzzy(tokens: string[], rest: number[], start: number, end: number): void {
 		const all = this.#allSessions;
-		const end = Math.min(rest.length, start + budget);
 		for (let i = start; i < end; i++) {
 			const index = rest[i]!;
 			const session = all[index]!;
 			const match = scoreFuzzySession(session, index, tokens, new FuzzyText(sessionTextLower(session)));
 			if (match) this.#fuzzyRanked.push(match);
 		}
-		if (end >= rest.length) return;
+	}
+
+	/**
+	 * Score `rest[start..]` in {@link FUZZY_SCAN_CHUNK_COUNT}-session macrotask
+	 * chunks so pending input runs between them, then recompose the visible
+	 * list once if the scan matched more than the `shown` fuzzy hits already
+	 * composed. Publishing per chunk reorders the list dozens of times per
+	 * keystroke on a large listing, and the native picker replays its
+	 * row-arrival animation on every reorder. A stale generation aborts silently.
+	 */
+	#scheduleFuzzyScan(generation: number, tokens: string[], rest: number[], start: number, shown: number): void {
 		this.#scanTimer = setTimeout(() => {
 			this.#scanTimer = undefined;
 			if (generation !== this.#scanGeneration) return;
-			const before = this.#fuzzyRanked.length;
-			this.#scanFuzzySlice(generation, tokens, rest, end, FUZZY_SCAN_CHUNK_COUNT);
-			if (this.#fuzzyRanked.length > before) {
+			const end = Math.min(rest.length, start + FUZZY_SCAN_CHUNK_COUNT);
+			this.#scoreFuzzy(tokens, rest, start, end);
+			if (end < rest.length) {
+				this.#scheduleFuzzyScan(generation, tokens, rest, end, shown);
+			} else if (this.#fuzzyRanked.length > shown) {
 				this.#composeFiltered();
 				this.onRequestRender?.();
 			}
@@ -740,7 +750,7 @@ class SessionList<T extends SessionSelectorEntry> implements Component {
 			tokenizeSessionQuery(this.#searchInput.getValue()),
 			this.#literalRanked,
 		);
-		// Async chunks and the history merge only clamp the cursor so an arrow
+		// The fuzzy scan and the history merge only clamp the cursor so an arrow
 		// selection survives recomposition; the query path resets explicitly.
 		const keepIndex = Math.min(this.#menu.selectedIndex, Math.max(0, composed.length - 1));
 		this.#menu.setItems(composed, keepIndex >= 0 ? composed[keepIndex]?.path : undefined);

package/src/overlays/snapcompact-shape-preview.ts

@@ -31,7 +31,7 @@ import { theme } from "../theme/theme";
 import sampleDoc from "./snapcompact-shape-preview-doc.md" with { type: "text" };
 import type { DescribeContext, NativeNode } from "../native/node";
 import { col, node, span, text } from "../native/describe";
-import { registerNativeBlob } from "../native/blobs";
+import { nativeImageNode } from "../native/blobs";
 
 /** Mini-frame edge in px — a small page from the real rasterizer ≈ a zoomed crop. */
 const SRC_FRAME_PX = 128;
@@ -100,8 +100,7 @@ export class SnapcompactShapePreview implements Component {
 		else if (entry.state === "rendering") sample = node("spinner", { label: [span("rendering sample…", "dim")] });
 		else if (entry.state === "failed") sample = text([span("(sample render failed)", "dim")]);
 		else {
-			sample = node("image", {
-				blob: registerNativeBlob(entry.bytes, "image/png"),
+			sample = nativeImageNode(entry.bytes, "image/png", {
 				alt: `snapcompact ${label} sample`,
 				w: entry.edgePx,
 				h: entry.edgePx,

package/src/prompt/attachment-chips.ts

@@ -12,7 +12,7 @@ import {
 	visibleWidth,
 } from "../index";
 import { fileHyperlink } from "../render/hyperlink";
-import { registerNativeBlob } from "../native/blobs";
+import { nativeImageNode } from "../native/blobs";
 import { node, row, span } from "../native/describe";
 import { plainText } from "../native/spans";
 import type { DescribeContext, NativeNode } from "../native/node";
@@ -33,12 +33,9 @@ const RESET_FG = "\x1b[39m";
  *  (pastes are usually re-encoded JPEG/WebP) convert before transmit — the same pipeline
  *  the transcript uses. `null` = conversion in flight or failed. */
 const kImagePng = Symbol("omp.imagePng");
-/** Content address of the draft image's decoded bytes, registered once for TSP `image` nodes. */
-const kImageBlob = Symbol("omp.imageBlob");
 
 interface ImageContentWithPng extends ImageContent {
 	[kImagePng]?: ImageContent | null;
-	[kImageBlob]?: string;
 }
 
 /**
@@ -57,7 +54,9 @@ export class AttachmentChipsBand implements Component {
 		private readonly requestRender: () => void,
 	) {}
 
-	#native: { chips: readonly ComposerChipDescriptor[]; node: NativeNode } | undefined;
+	#native:
+		| { chips: readonly ComposerChipDescriptor[]; node: NativeNode; images: ReadonlyMap<ImageContent, NativeNode> }
+		| undefined;
 
 	/**
 	 * A wrapping `row` of chip `card`s (`omp.composer.chip`) titled with the
@@ -69,6 +68,7 @@ export class AttachmentChipsBand implements Component {
 		const chips = this.editor.composerChips();
 		if (this.#native?.chips === chips) return this.#native.node;
 		const cards: NativeNode[] = [];
+		const images = new Map<ImageContent, NativeNode>();
 		for (const chip of chips) {
 			const icon = theme.symbol(
 				chip.kind === "paste" ? "chip.paste" : chip.kind === "video" ? "chip.video" : "chip.image",
@@ -86,11 +86,14 @@ export class AttachmentChipsBand implements Component {
 			} else {
 				const dims = this.#imageDims(chip.image);
 				caption = dims ? `${dims.width}x${dims.height}` : "";
-				const image = chip.image as ImageContentWithPng;
-				const blob = image[kImageBlob] ?? registerNativeBlob(Buffer.from(image.data, "base64"), image.mimeType);
-				image[kImageBlob] = blob;
+				const image = chip.image;
+				const native =
+					images.get(image) ??
+					this.#native?.images.get(image) ??
+					nativeImageNode(Buffer.from(image.data, "base64"), image.mimeType);
+				images.set(image, native);
 				content = node("image", {
-					blob,
+					...native.p,
 					alt: title,
 					w: dims?.width,
 					h: dims?.height,
@@ -106,7 +109,7 @@ export class AttachmentChipsBand implements Component {
 			);
 		}
 		const described = row(cards, { gap: "sm", wrap: true, role: "omp.composer.chips", hidden: cards.length === 0 });
-		this.#native = { chips, node: described };
+		this.#native = { chips, node: described, images };
 		return described;
 	}
 

package/src/render/output-pane.ts

@@ -302,6 +302,12 @@ export class OutputPane implements Component {
 		this.#text.invalidate();
 	}
 
+	releaseRenderCaches(): void {
+		this.#renderKey = "";
+		this.#text.setText("");
+		this.#text.releaseRenderCaches();
+	}
+
 	#appendToTail(text: string): void {
 		if (!text) return;
 		if (this.#lines.length === 0) this.#lines.push("");