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

package/src/app-keybindings.ts

@@ -60,6 +60,7 @@ interface AppKeybindings {
 	"app.tree.unfoldOrDown": true;
 	"app.plan.toggle": true;
 	"app.history.search": true;
+	"app.stt.pushToTalk": true;
 	"app.stt.toggle": true;
 	"app.live.toggle": true;
 }
@@ -237,9 +238,13 @@ export const KEYBINDINGS = {
 		defaultKeys: "ctrl+r",
 		description: "Search history",
 	},
+	"app.stt.pushToTalk": {
+		defaultKeys: "space",
+		description: "Hold to record speech-to-text",
+	},
 	"app.stt.toggle": {
 		defaultKeys: [],
-		description: "Toggle speech-to-text (default gesture: hold Space)",
+		description: "Toggle speech-to-text recording",
 	},
 	"app.live.toggle": {
 		defaultKeys: "ctrl+l",

package/src/apps/git/diff-pane.ts

@@ -601,6 +601,12 @@ export class DiffPane {
 	#layoutCache: { key: string; visuals: Visual[] } | undefined;
 	/** Per visible row: clickable hunk-button ranges recorded during render. */
 	#hits: ({ hunk: number; primary?: [number, number]; discard?: [number, number] } | undefined)[] = [];
+	/**
+	 * Asset images from the last render, by placement and size. Reusing them
+	 * lets a SIXEL image show the sequence its off-thread encode delivers on a
+	 * later render; a fresh `Image` per render would restart the encode forever.
+	 */
+	#assetImages = new Map<string, Image>();
 	constructor(imageBudget?: ImageBudget) {
 		this.#imageBudget = imageBudget;
 	}
@@ -1103,8 +1109,16 @@ export class DiffPane {
 		const leftWidth = Math.max(1, Math.floor((width - 1) / 2));
 		const rightWidth = Math.max(1, width - leftWidth - 1);
 		const bodyHeight = Math.max(0, height - 1);
-		const oldLines = this.#renderAssetSide(asset.old, leftWidth, bodyHeight, `old:${asset.filePath}`);
-		const newLines = this.#renderAssetSide(asset.new, rightWidth, bodyHeight, `new:${asset.filePath}`);
+		const previousImages = this.#assetImages;
+		this.#assetImages = new Map();
+		const oldLines = this.#renderAssetSide(asset.old, leftWidth, bodyHeight, `old:${asset.filePath}`, previousImages);
+		const newLines = this.#renderAssetSide(
+			asset.new,
+			rightWidth,
+			bodyHeight,
+			`new:${asset.filePath}`,
+			previousImages,
+		);
 		const border = theme.fg("borderMuted", "│");
 		const lines: string[] = [];
 		for (let index = 0; index < height; index++) {
@@ -1125,24 +1139,36 @@ export class DiffPane {
 		return lines;
 	}
 
-	#renderAssetSide(side: FileAssetSide, width: number, height: number, placementKey: string): readonly string[] {
+	#renderAssetSide(
+		side: FileAssetSide,
+		width: number,
+		height: number,
+		placementKey: string,
+		previousImages: ReadonlyMap<string, Image>,
+	): readonly string[] {
 		if (height <= 0) return [];
 		let content: readonly string[];
 		if (side.kind === "image") {
 			const image = side.image;
-			content = new Image(
-				image.data,
-				image.mimeType,
-				{ fallbackColor: text => theme.fg("dim", text) },
-				{
-					maxWidthCells: Math.max(1, width - 2),
-					maxHeightCells: height,
-					filename: this.#asset?.filePath,
-					budget: this.#imageBudget,
-					imageKey: `git-review:${placementKey}:${image.key}`,
-				},
-				{ widthPx: image.widthPx, heightPx: image.heightPx },
-			).render(width);
+			const imageKey = `git-review:${placementKey}:${image.key}`;
+			const cacheKey = `${imageKey}:${width}x${height}`;
+			const component =
+				previousImages.get(cacheKey) ??
+				new Image(
+					image.data,
+					image.mimeType,
+					{ fallbackColor: text => theme.fg("dim", text) },
+					{
+						maxWidthCells: Math.max(1, width - 2),
+						maxHeightCells: height,
+						filename: this.#asset?.filePath,
+						budget: this.#imageBudget,
+						imageKey,
+					},
+					{ widthPx: image.widthPx, heightPx: image.heightPx },
+				);
+			this.#assetImages.set(cacheKey, component);
+			content = component.render(width);
 		} else {
 			let details: string[];
 			switch (side.kind) {

package/src/apps/git/git-tui.ts

@@ -26,7 +26,7 @@
  */
 
 import type { TspSpan } from "@oh-my-pi/pi-wire";
-import { formatKeyHint, formatKeyHints } from "../../app-keybindings";
+import { formatKeyHint, formatKeyHints, formatTooltipKey } from "../../app-keybindings";
 import { SplitPane } from "../../components/layout/split-pane";
 import { Stack } from "../../components/layout/stack";
 import { matchesKey } from "../../keys";
@@ -1030,8 +1030,8 @@ class GitTuiComponent implements Component {
 		const right: NativeNode[] = [
 			row(
 				[
-					iconButton("chev-up", "prev-hunk", `Previous change (${formatKeyHint("alt+up")})`),
-					iconButton("chev", "next-hunk", `Next change (${formatKeyHint("alt+down")})`),
+					iconButton("chev-up", "prev-hunk", `Previous change (${formatTooltipKey("alt+up")})`),
+					iconButton("chev", "next-hunk", `Next change (${formatTooltipKey("alt+down")})`),
 				],
 				{ gap: "none", align: "center" },
 			),
@@ -1052,13 +1052,13 @@ class GitTuiComponent implements Component {
 					"type",
 					"whitespace",
 					this.#whitespace === "off"
-						? `Ignore whitespace (${formatKeyHint("b")})`
+						? `Ignore whitespace (${formatTooltipKey("b")})`
 						: this.#whitespace === "whitespace"
-							? `Ignoring whitespace; also ignore formatting (${formatKeyHint("b")})`
-							: `Ignoring formatting and imports; show all (${formatKeyHint("b")})`,
+							? `Ignoring whitespace; also ignore formatting (${formatTooltipKey("b")})`
+							: `Ignoring formatting and imports; show all (${formatTooltipKey("b")})`,
 					this.#whitespace !== "off",
 				),
-				iconButton("corner-down-right", "wrap", `Wrap lines (${formatKeyHint("w")})`, this.#pane.wrap),
+				iconButton("corner-down-right", "wrap", `Wrap lines (${formatTooltipKey("w")})`, this.#pane.wrap),
 			);
 		}
 		if (file?.area === "unstaged" || file?.area === "staged") {
@@ -1070,8 +1070,8 @@ class GitTuiComponent implements Component {
 			);
 		}
 		right.push(
-			iconButton("keyboard", "help", `Keyboard shortcuts (${formatKeyHint("?")})`),
-			iconButton("x", "close", `Close (${formatKeyHint("q")})`),
+			iconButton("keyboard", "help", `Keyboard shortcuts (${formatTooltipKey("?")})`),
+			iconButton("x", "close", `Close (${formatTooltipKey("q")})`),
 		);
 		return keyed(
 			row(

package/src/apps/git/sidebar.ts

@@ -1699,7 +1699,12 @@ export class Sidebar {
 					png,
 					"image/png",
 					{ fallbackColor: text => theme.fg("dim", text) },
-					{ maxHeightCells: 3, budget: this.#imageBudget, imageKey: `git-avatar:${email}` },
+					{
+						maxHeightCells: 3,
+						budget: this.#imageBudget,
+						imageKey: `git-avatar:${email}`,
+						requestRender: this.#requestRender,
+					},
 				),
 			};
 		}

package/src/chat/assistant-message.ts

@@ -456,6 +456,7 @@ export class AssistantMessageComponent extends Container {
 	readonly #thinkingRenderers: readonly AssistantThinkingRenderer[];
 	readonly #imageBudget?: ImageBudget;
 	#proseOnlyThinking: boolean;
+	#expandThinkingBlocks: boolean;
 
 	constructor(
 		message?: AssistantMessage,
@@ -465,6 +466,7 @@ export class AssistantMessageComponent extends Container {
 		imageBudget?: ImageBudget,
 		proseOnlyThinking = true,
 		linkTargets?: ReadonlyMap<string, string>,
+		expandThinkingBlocks = false,
 	) {
 		super();
 		this.#hideThinkingBlock = hideThinkingBlock;
@@ -472,6 +474,7 @@ export class AssistantMessageComponent extends Container {
 		this.#thinkingRenderers = thinkingRenderers;
 		this.#imageBudget = imageBudget;
 		this.#proseOnlyThinking = proseOnlyThinking;
+		this.#expandThinkingBlocks = expandThinkingBlocks;
 
 		ensureThemeSync();
 		this.#transcriptBlockFinalized = message !== undefined;
@@ -560,6 +563,16 @@ export class AssistantMessageComponent extends Container {
 		this.#proseOnlyThinking = proseOnly;
 	}
 
+	/**
+	 * Keep finished thinking sections expanded instead of folding them to "Thought for 12s".
+	 * Sections the user folded or unfolded by hand keep that choice.
+	 */
+	setExpandThinkingBlocks(expand: boolean): void {
+		if (this.#expandThinkingBlocks === expand) return;
+		this.#expandThinkingBlocks = expand;
+		this.#nativeViewVersion++;
+	}
+
 	override dispose(): void {
 		this.#stopThinkingAnimation();
 		super.dispose();
@@ -831,8 +844,10 @@ export class AssistantMessageComponent extends Container {
 								// `.live` while streaming: the body clamps to its tail under a fade.
 								role: thinkingLive ? "omp.thinking.live" : "omp.thinking",
 								collapsible: true,
-								// Open while it streams; a finished thought folds to its "Thought for 12s" line.
-								collapsed: this.#thinkingCollapsed.get(index) ?? (this.#hideThinkingBlock || !thinkingLive),
+								// Open while it streams; a finished thought folds to its "Thought for 12s" line unless the user keeps thinking expanded.
+								collapsed:
+									this.#thinkingCollapsed.get(index) ??
+									(this.#hideThinkingBlock || (!thinkingLive && !this.#expandThinkingBlocks)),
 								// Tern's fold head sums it into "Worked for 12s".
 								took: clock?.end === undefined ? undefined : Math.max(0, Math.round(clock.end - clock.start)),
 							},
@@ -1373,7 +1388,12 @@ export class AssistantMessageComponent extends Container {
 						displayImage.data,
 						displayImage.mimeType,
 						{ fallbackColor: (text: string) => theme.fg("toolOutput", text) },
-						{ ...resolveImageOptions(), budget: this.#imageBudget, imageKey: key },
+						{
+							...resolveImageOptions(),
+							budget: this.#imageBudget,
+							imageKey: key,
+							requestRender: this.#onImageUpdate,
+						},
 					),
 				);
 				continue;
@@ -1415,7 +1435,9 @@ export class AssistantMessageComponent extends Container {
 	}
 
 	#computeShapeKey(message: AssistantMessage): string {
-		const parts: string[] = [`htb:${this.#hideThinkingBlock ? 1 : 0}|pot:${this.#proseOnlyThinking ? 1 : 0}`];
+		const parts: string[] = [
+			`htb:${this.#hideThinkingBlock ? 1 : 0}|pot:${this.#proseOnlyThinking ? 1 : 0}|etb:${this.#expandThinkingBlocks ? 1 : 0}`,
+		];
 		for (const content of message.content) {
 			if (content.type === "text") {
 				parts.push(canonicalizeMessage(content.text) ? "T1" : "T0");

package/src/chat/chat-transcript-builder.ts

@@ -80,6 +80,7 @@ export interface ChatTranscriptBuilderDeps {
 	cwd: string;
 	hideThinkingBlock?: () => boolean;
 	proseOnlyThinking?: () => boolean;
+	expandThinkingBlocks?: () => boolean;
 	/** Session-scoped resolved destinations for model-authored Markdown links. */
 	linkTargets?: ReadonlyMap<string, string>;
 	requestRender: () => void;
@@ -404,6 +405,7 @@ export class ChatTranscriptBuilder {
 	#appendAssistantMessage(message: Extract<AgentMessage, { role: "assistant" }>): void {
 		const hideThinkingBlock = this.#deps.hideThinkingBlock?.() ?? false;
 		const proseOnlyThinking = this.#deps.proseOnlyThinking ? this.#deps.proseOnlyThinking() : true;
+		const expandThinkingBlocks = this.#deps.expandThinkingBlocks?.() ?? false;
 		const timeline = splitAssistantMessageToolTimeline(message);
 		const assistantComponent = new AssistantMessageComponent(
 			timeline.beforeTools,
@@ -413,6 +415,7 @@ export class ChatTranscriptBuilder {
 			this.#deps.ui.imageBudget,
 			proseOnlyThinking,
 			this.#deps.linkTargets,
+			expandThinkingBlocks,
 		);
 		assistantComponent.setImagesVisible(displayPreferences.showImages);
 		assistantComponent.setToolResultImagesVisible(!displayPreferences.hideToolActivity);
@@ -450,6 +453,7 @@ export class ChatTranscriptBuilder {
 				undefined,
 				proseOnlyThinking,
 				this.#deps.linkTargets,
+				expandThinkingBlocks,
 			);
 			component.setImagesVisible(displayPreferences.showImages);
 			component.setToolResultImagesVisible(!displayPreferences.hideToolActivity);

package/src/chat/tool-execution.ts

@@ -1639,7 +1639,12 @@ export class ToolExecutionComponent extends Container {
 						imageData,
 						imageMimeType,
 						{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
-						{ ...resolveImageOptions(), budget: this.#ui.imageBudget, imageKey: `te${this.#instanceId}:${i}` },
+						{
+							...resolveImageOptions(),
+							budget: this.#ui.imageBudget,
+							imageKey: `te${this.#instanceId}:${i}`,
+							requestRender: () => this.#ui.requestRender(),
+						},
 					);
 					this.#imageComponents.push(imageComponent);
 					this.addChild(imageComponent);

package/src/chat/user-message.ts

@@ -24,7 +24,13 @@ import type { ReactionTarget } from "./reaction";
 import { card, md, node, row, span, text } from "../native/describe";
 import { base64ImageNode } from "../native/blobs";
 import { hasTranscriptActions, runTranscriptAction } from "./transcript-actions";
-import { type NativeChild, type NativeNode, type NativeUiEvent, rootToggleExpanded } from "../native/node";
+import {
+	type DescribeContext,
+	type NativeChild,
+	type NativeNode,
+	type NativeUiEvent,
+	rootToggleExpanded,
+} from "../native/node";
 import { Memo } from "../native/memo";
 
 // OSC 133 shell integration: marks prompt zones for terminal multiplexers.
@@ -137,6 +143,8 @@ export class UserMessageComponent extends Container implements ReactionTarget {
 	readonly #tokens: RegExp;
 	#reaction: string | undefined;
 	#native: NativeNode | undefined;
+	/** The terminal's clock {@link #native} was described with. */
+	#nativeHour12: boolean | undefined;
 
 	constructor(text: string, options: UserBubbleOptions = {}) {
 		super();
@@ -184,17 +192,20 @@ export class UserMessageComponent extends Container implements ReactionTarget {
 	 * agent's reaction are chips at the bottom-right, so a reaction landing
 	 * later updates the frame in place, even deep in scrollback.
 	 */
-	override describe(): NativeNode {
-		if (this.#native) return this.#native;
+	override describe(cx?: DescribeContext): NativeNode {
+		// The terminal's clock: Bun's own default locale ignores the user's.
+		const hour12 = cx?.hour12;
+		if (this.#native && this.#nativeHour12 === hour12) return this.#native;
+		this.#nativeHour12 = hour12;
 		const children: NativeChild[] = [];
 		if (!this.#synthetic && hasTranscriptActions()) {
 			const tools: NativeChild[] = [];
 			if (this.#timestamp !== undefined) {
 				const at = new Date(this.#timestamp);
 				tools.push(
-					text([span(at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), "dim mono")], {
+					text([span(at.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12 }), "dim mono")], {
 						role: "omp.user.time",
-						title: at.toLocaleString(),
+						title: at.toLocaleString([], { hour12 }),
 					}),
 				);
 			}

package/src/chrome/status-notice.ts

@@ -1,6 +1,6 @@
 import { Spacer } from "../components/spacer";
 import { Text } from "../components/text";
-import { node } from "../native/describe";
+import { EMPTY_NODE, node } from "../native/describe";
 import type { NativeNode } from "../native/node";
 import { styledSpans } from "../native/spans";
 import { Container } from "../tui";
@@ -8,33 +8,51 @@ import { Container } from "../tui";
 /** How long a native status toast stays up (ms). */
 const TOAST_TTL = 2400;
 
+/** How a {@link StatusNotice} shows. */
+export interface StatusNoticeOptions {
+	/** Styles the ANSI line; resolved at render so a theme change re-shapes it. */
+	styleFn?: (text: string) => string;
+	/**
+	 * Whether a native terminal toasts it (default). False keeps the notice to
+	 * the ANSI transcript: background chatter such as MCP connection progress,
+	 * which would otherwise re-toast on every server that connects or fails.
+	 */
+	toast?: boolean;
+}
+
 /**
  * A transient status notice (`showStatus`: "Thinking blocks: hidden", "Copied
  * to clipboard"). The ANSI render appends a blank row and the dim line to the
  * transcript; a native terminal shows it as a toast instead, so notices never
- * pile up in the history. Updating the text re-shows the toast.
+ * pile up in the history. Updating the text re-shows the toast; a notice
+ * with `toast: false` describes nothing natively.
  */
 export class StatusNotice extends Container {
 	readonly #text: Text;
 	#message: string;
+	#toast: boolean;
 	#native: NativeNode | undefined;
 
-	constructor(message: string, styleFn?: (text: string) => string) {
+	constructor(message: string, options: StatusNoticeOptions = {}) {
 		super();
 		this.#message = message;
-		this.#text = new Text(message, 1, 0).setStyleFn(styleFn);
+		this.#toast = options.toast ?? true;
+		this.#text = new Text(message, 1, 0).setStyleFn(options.styleFn);
 		this.addChild(new Spacer(1));
 		this.addChild(this.#text);
 	}
 
-	setMessage(message: string, styleFn?: (text: string) => string): void {
-		this.#text.setStyleFn(styleFn);
+	setMessage(message: string, options: StatusNoticeOptions = {}): void {
+		const toast = options.toast ?? true;
+		this.#text.setStyleFn(options.styleFn);
 		this.#text.setText(message);
-		if (message !== this.#message) this.#native = undefined;
+		if (message !== this.#message || toast !== this.#toast) this.#native = undefined;
 		this.#message = message;
+		this.#toast = toast;
 	}
 
 	override describe(): NativeNode {
+		if (!this.#toast) return EMPTY_NODE;
 		if (this.#native) return this.#native;
 		// Callers may pass pre-styled text; a toast takes plain text.
 		const plain = styledSpans(this.#message)

package/src/chrome/transcript-container.ts

@@ -1,6 +1,7 @@
 import { type Component, Container, type HistoryBatch } from "../tui";
 import * as logger from "@oh-my-pi/pi-utils/logger";
 import { popLoopPhase, pushLoopPhase } from "@oh-my-pi/pi-utils";
+import { renderForScrollback } from "../components/image";
 import { col } from "../native/describe";
 import type { NativeNode } from "../native/node";
 import { isNativeSettled, settleNative } from "../native/settle";
@@ -1000,9 +1001,11 @@ export class TranscriptContainer extends Container {
 			// Only the range head is sliced by its emitted stable prefix; every other
 			// entry renders whole, so the append-only verification pass (a second
 			// full render of the block's stable prefix) is skipped for them. This
-			// keeps a complete-ledger replay at one render per block.
-			const rendered =
-				index === start ? this.#renderEntry(entry, width) : trimBlankEdges(entry.component.render(width));
+			// keeps a complete-ledger replay at one render per block. These rows go
+			// to native scrollback, where nothing can repaint them.
+			const rendered = renderForScrollback(() =>
+				index === start ? this.#renderEntry(entry, width) : trimBlankEdges(entry.component.render(width)),
+			);
 			const emittedRows = index === start ? this.#renderStablePrefix(entry, entry.emitted, width).length : 0;
 			const block = rendered.slice(emittedRows);
 			reached = index + 1;

package/src/components/editor.ts

@@ -3042,6 +3042,20 @@ export class Editor implements Component, Focusable {
 		return true;
 	}
 
+	/** Whether a character-jump hotkey is waiting for its target character. */
+	get isJumpPending(): boolean {
+		return this.#jumpMode !== null;
+	}
+
+	/** Type literal text through the character-editing pipeline without keybinding dispatch. */
+	typeCharacter(text: string): void {
+		// Same as #handleInputChunk: typed input wins over a stale in-flight provider lookup.
+		if (this.#autocompleteRequestRunning && this.#autocompleteState === null) {
+			this.#invalidateAutocompleteRequests();
+		}
+		this.#insertCharacter(text);
+	}
+
 	#insertCharacter(char: string): void {
 		this.#exitHistoryForEditing();
 		// Undo coalescing: consecutive word typing collapses into one undo unit

package/src/components/image.ts

@@ -1,5 +1,7 @@
+import { encodeSixelAsync } from "@oh-my-pi/pi-natives";
 import { getKittyGraphics } from "../kitty-graphics";
 import {
+	encodeSixelNow,
 	getCellDimensions,
 	getImageDimensions,
 	type ImageDimensions,
@@ -29,6 +31,29 @@ export interface ImageOptions {
 	 * repaint replaces the placement instead of stacking a duplicate.
 	 */
 	imageKey?: string;
+	/**
+	 * Schedules a repaint once this image's off-thread SIXEL encode lands.
+	 * Defaults to the budget's repaint; a host without a budget must pass one,
+	 * or the image's reserved rows stay blank until an unrelated repaint.
+	 */
+	requestRender?: () => void;
+}
+
+/** Renders in progress whose rows are bound for native scrollback. */
+let scrollbackRenderDepth = 0;
+
+/**
+ * Run `render` for rows bound for native scrollback. Those rows are never
+ * repainted, so an image whose off-thread SIXEL encode has not landed encodes
+ * synchronously instead of committing its reserved blank rows.
+ */
+export function renderForScrollback<T>(render: () => T): T {
+	scrollbackRenderDepth++;
+	try {
+		return render();
+	} finally {
+		scrollbackRenderDepth--;
+	}
 }
 
 const EMPTY_IDS: readonly number[] = [];
@@ -227,6 +252,11 @@ export class ImageBudget {
 		this.#requestRender = requestRender;
 	}
 
+	/** Ask for a repaint, e.g. once an image's off-thread encode settles. */
+	requestRender(): void {
+		this.#requestRender();
+	}
+
 	setCap(cap: number): void {
 		const next = normalizeCap(cap);
 		if (next === this.#cap) return;
@@ -735,6 +765,8 @@ export class Image implements Component {
 	// (its rows may already be committed to native scrollback).
 	#renderedGraphicRows = 0;
 	#native?: NativeNode;
+	/** Newest SIXEL encode: its target size and, once settled, the sequence (`null` on failure). */
+	#sixel?: { widthPx: number; heightPx: number; sequence?: string | null };
 
 	constructor(
 		base64Data: string,
@@ -768,6 +800,38 @@ export class Image implements Component {
 		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
+	 * invalidates the cached lines and requests a repaint. A render bound for
+	 * scrollback cannot wait, so it encodes synchronously.
+	 */
+	#sixelSequence(widthPx: number, heightPx: number): string | null | undefined {
+		const current = this.#sixel;
+		const sameSize = current !== undefined && current.widthPx === widthPx && current.heightPx === heightPx;
+		if (sameSize && current.sequence !== undefined) return current.sequence;
+		if (scrollbackRenderDepth > 0) {
+			// Replacing the entry makes a still-pending async encode settle as stale.
+			const sequence = encodeSixelNow(this.#base64Data, widthPx, heightPx);
+			this.#sixel = { widthPx, heightPx, sequence };
+			return sequence;
+		}
+		if (sameSize) return undefined;
+		const request: { widthPx: number; heightPx: number; sequence?: string | null } = { widthPx, heightPx };
+		this.#sixel = request;
+		const settle = (sequence: string | null): void => {
+			request.sequence = sequence;
+			if (this.#sixel !== request) return;
+			this.invalidate();
+			if (this.#options.requestRender) this.#options.requestRender();
+			else this.#budget?.requestRender();
+		};
+		encodeSixelAsync(new Uint8Array(Buffer.from(this.#base64Data, "base64")), widthPx, heightPx).then(settle, () =>
+			settle(null),
+		);
+		return undefined;
+	}
+
 	/**
 	 * A native `image` backed by a content-addressed blob; the terminal fits
 	 * it. Cell caps become `ch`/`lines` bounds. The inline-image budget and
@@ -820,7 +884,9 @@ export class Image implements Component {
 			this.#cachedCellWidthPx === cellDimensions.widthPx &&
 			this.#cachedCellHeightPx === cellDimensions.heightPx &&
 			this.#cachedKittyUnicodePlaceholders === kittyUnicodePlaceholders &&
-			(!transmitsSeparately || this.#budget?.shouldTransmit(imageId) !== true)
+			(!transmitsSeparately || this.#budget?.shouldTransmit(imageId) !== true) &&
+			// Cached rows reserved for a pending SIXEL encode must not reach scrollback.
+			!(scrollbackRenderDepth > 0 && this.#sixel !== undefined && this.#sixel.sequence === undefined)
 		) {
 			return this.#cachedLines;
 		}
@@ -839,6 +905,7 @@ export class Image implements Component {
 				maxHeightCells: this.#options.maxHeightCells,
 				imageId: this.#imageId,
 				includeTransmit: needsTransmit,
+				sixel: (widthPx, heightPx) => this.#sixelSequence(widthPx, heightPx),
 			});
 
 			if (result?.transmit && this.#imageId != null && this.#budget !== undefined) {

package/src/components/input.ts

@@ -1,6 +1,6 @@
 import { BracketedPasteHandler, decodeReencodedPasteControls } from "../bracketed-paste";
-import { getKeybindings } from "../keybindings";
-import { extractPrintableText, matchesKey } from "../keys";
+import { canonicalKeyId, getKeybindings } from "../keybindings";
+import { extractPrintableText, parseKey } from "../keys";
 import { KillRing } from "../kill-ring";
 import type { TspInputProps } from "@oh-my-pi/pi-wire";
 import { node } from "../native/describe";
@@ -14,7 +14,7 @@ import {
 	type NativeUiEvent,
 	resolveTextEdit,
 } from "../native/node";
-import { SpaceHoldGesture } from "../space-hold";
+import { getSpaceHoldText, SpaceHoldGesture } from "../space-hold";
 import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
 import { cursorColumnWindow } from "./scroll-viewport";
 import {
@@ -134,6 +134,10 @@ export class Input implements Component, Focusable {
 		return this.#useTerminalCursor;
 	}
 
+	capturesInput(data: string): boolean {
+		return this.spaceHold.shouldRoute(data);
+	}
+
 	/**
 	 * Apply one key: the editor's text bindings (motion, deletion, kill ring,
 	 * undo), pastes and printable text. Returns whether the key was the
@@ -154,10 +158,14 @@ export class Input implements Component, Focusable {
 			return true;
 		}
 
-		// Space-hold push-to-talk: a sustained space bar starts/stops STT instead of typing spaces.
-		switch (this.spaceHold.process(matchesKey(data, "space"))) {
+		// Reserve configured keys before text bindings or submit/delete handlers can consume them.
+		const parsedKey = parseKey(data);
+		const canonical = parsedKey !== undefined ? canonicalKeyId(parsedKey) : undefined;
+		const spaceHoldText = getSpaceHoldText(data, canonical);
+		switch (this.spaceHold.process(canonical, spaceHoldText?.length ?? 0)) {
 			case "type":
-				this.#insertCharacter(" ");
+				this.#insertCharacter(spaceHoldText!);
+				this.spaceHold.recordTyped(spaceHoldText!.length);
 				return true;
 			case "swallow":
 				return true;