@simon_he/vue-tui 1.0.1 → 1.1.1

package/dist/agent.js

@@ -1,16 +1,1202 @@
-import "./create-terminal-C2oiWFJU.js";
-import "./hyperlink-Bn02UXJb.js";
-import "./sgr-BmzxEjAO.js";
-import { forEachTextCellSegment, sanitizeInlineText, sanitizeTextBlock, sliceByCells, spaces, textCellWidth$1 as textCellWidth, useTerminal, withTextWidthProvider } from "./wheel-scroll-vBRaQ7p-.js";
-import { TView } from "./linkify-D_gzn9Xq.js";
-import "./terminal-selection-DBinO6p5.js";
-import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, TText, computeCommandPaletteMatchRanges } from "./TSelect-HzILuti9.js";
-import "./frame-perf-C6Xfg85O.js";
-import "./path-mnSgEpCm.js";
-import { TVirtualMarkdown, createMarkdownBlockSource } from "./block-source-CKUOnkgT.js";
-import { TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TTranscriptView, TVirtualList, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults } from "./tlog-theme-CvLFNMwk.js";
-import { computed, defineComponent, h } from "vue";
+import "./create-terminal-DXuZ2fci.js";
+import "./width-GqllnV8C.js";
+import "./hyperlink-B35-O-cW.js";
+import { TerminalGraphicsActivityKey, forEachTextCellSegment, intersectRect, nowTerminalGraphicTraceTime, padEndByCells$1 as padEndByCells, recordTerminalGraphicTrace, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useTerminal, useVisibility, withTextWidthProvider } from "./rect-Ng-3eKzF.js";
+import { TView } from "./linkify-CuuquMQT.js";
+import "./frame-perf-BBhE-iuS.js";
+import "./env-DNCzvX8b.js";
+import "./terminal-selection-CQYr--26.js";
+import "./debug-logger-ChY_PXVk.js";
+import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, TText, computeCommandPaletteMatchRanges } from "./TSelect-CiyMvwl-.js";
+import "./path-BI9W15Zt.js";
+import "./wheel-scroll-CQ22Hcyj.js";
+import { TMermaid$1 as TMermaid, TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal } from "./TMermaidText-CXm_L969.js";
+import { TVirtualMarkdown, canDrawTerminalGraphicRect, createIterm2InlineImageSequence, createKittyDeleteGraphicsSequence, createKittyGraphicsSequence, createKittyPlacementSequence, createMarkdownBlockSource, detectTerminalGraphicsCapabilities, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, hashTerminalGraphicsString, isSafeTerminalGraphicsSequence, isTerminalGraphicsProtocol, normalizeTerminalGraphicSize, sanitizeTerminalFallbackText, stableTerminalGraphicNumericId, subscribeTerminalGraphicsOutput } from "./block-source-5CQp4tF8.js";
+import { TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TTranscriptView, TVirtualList, createAppendOnlyLogStore, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults } from "./tlog-theme-CopRt9SC.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, shallowRef, watch } from "vue";
 
+//#region src/vue/components/TAgentTerminalGraphic.ts
+const NO_GRAPHICS_CAPABILITIES = Object.freeze({
+	supported: false,
+	kitty: false,
+	iterm2: false,
+	sixel: false,
+	preferredProtocol: null,
+	protocol: "unicode",
+	candidates: [],
+	stdoutIsTTY: false,
+	insideTmux: false,
+	insideScreen: false,
+	insideZellij: false,
+	multiplexer: null,
+	passthrough: false,
+	forced: false,
+	reason: "no-terminal-graphics-output"
+});
+function splitTextOutput(value) {
+	const normalized = sanitizeTextBlock(sanitizeTerminalFallbackText(value).replace(/\r\n?/g, "\n"));
+	const lines = normalized.split("\n");
+	return lines.length ? lines : [""];
+}
+function hasVisibleOutput(value) {
+	return value.some((line) => line.trim().length > 0);
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+function positiveInt$1(value) {
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function finiteInt(value) {
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) ? n : void 0;
+}
+function clampNumber(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+function rectArea(rect) {
+	return Math.max(0, rect.w) * Math.max(0, rect.h);
+}
+function sameRect(a, b) {
+	return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}
+function subtractRect(rect, cover) {
+	const hit = intersectRect(rect, cover);
+	if (!hit) return [rect];
+	const out = [];
+	const rectRight = rect.x + rect.w;
+	const rectBottom = rect.y + rect.h;
+	const hitRight = hit.x + hit.w;
+	const hitBottom = hit.y + hit.h;
+	if (hit.y > rect.y) out.push({
+		x: rect.x,
+		y: rect.y,
+		w: rect.w,
+		h: hit.y - rect.y
+	});
+	if (hitBottom < rectBottom) out.push({
+		x: rect.x,
+		y: hitBottom,
+		w: rect.w,
+		h: rectBottom - hitBottom
+	});
+	if (hit.x > rect.x) out.push({
+		x: rect.x,
+		y: hit.y,
+		w: hit.x - rect.x,
+		h: hit.h
+	});
+	if (hitRight < rectRight) out.push({
+		x: hitRight,
+		y: hit.y,
+		w: rectRight - hitRight,
+		h: hit.h
+	});
+	return out.filter((part) => part.w > 0 && part.h > 0);
+}
+function largestUncoveredRect(rect, covers) {
+	let parts = [rect];
+	for (const cover of covers) {
+		parts = parts.flatMap((part) => subtractRect(part, cover));
+		if (!parts.length) return null;
+	}
+	parts.sort((a, b) => rectArea(b) - rectArea(a) || a.y - b.y || a.x - b.x);
+	return parts[0] ?? null;
+}
+function parseKittyClearControls(sequence) {
+	const prefix = "\x1B_G";
+	const terminator = "\x1B\\";
+	if (!sequence.startsWith(prefix) || !sequence.endsWith(terminator)) return null;
+	const body = sequence.slice(prefix.length, -terminator.length);
+	if (body.includes(terminator) || body.includes("\x1B") || body.includes("\x07")) return null;
+	const semicolon = body.indexOf(";");
+	const rawControls = semicolon >= 0 ? body.slice(0, semicolon) : body;
+	const controls = new Map();
+	for (const part of rawControls.split(",")) {
+		const eq = part.indexOf("=");
+		if (eq <= 0) return null;
+		controls.set(part.slice(0, eq), part.slice(eq + 1));
+	}
+	return controls;
+}
+function kittyClearTargetsComponent(sequence, imageId, placementId) {
+	const controls = parseKittyClearControls(sequence);
+	if (!controls) return false;
+	const mode = controls.get("d");
+	if (mode !== "i" && mode !== "I") return false;
+	return controls.get("i") === String(imageId) && controls.get("p") === String(placementId);
+}
+function isSafeComponentClearSequence(sequence, protocol, imageId, placementId) {
+	if (!isSafeTerminalGraphicsSequence(sequence, protocol, "clear")) return false;
+	return protocol !== "kitty" || kittyClearTargetsComponent(sequence, imageId, placementId);
+}
+let textEncoder = null;
+function stringByteLength(value) {
+	if (typeof TextEncoder !== "undefined") {
+		textEncoder ?? (textEncoder = new TextEncoder());
+		return textEncoder.encode(value).length;
+	}
+	let bytes = 0;
+	for (let index = 0; index < value.length; index++) {
+		const code = value.charCodeAt(index);
+		if (code <= 127) bytes += 1;
+		else if (code <= 2047) bytes += 2;
+		else if (code >= 55296 && code <= 56319 && index + 1 < value.length) {
+			bytes += 4;
+			index++;
+		} else bytes += 3;
+	}
+	return bytes;
+}
+function smallHash(input) {
+	let hash = 2166136261;
+	for (let i = 0; i < input.length; i++) {
+		hash ^= input.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(36);
+}
+const tAgentTerminalGraphicProps = {
+	x: {
+		type: Number,
+		required: true
+	},
+	y: {
+		type: Number,
+		required: true
+	},
+	w: {
+		type: Number,
+		required: true
+	},
+	h: {
+		type: Number,
+		default: void 0
+	},
+	zIndex: {
+		type: Number,
+		default: 0
+	},
+	content: {
+		type: String,
+		required: true
+	},
+	kind: {
+		type: String,
+		default: "image"
+	},
+	fallback: {
+		type: String,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	loadingStyle: {
+		type: Object,
+		default: void 0
+	},
+	errorStyle: {
+		type: Object,
+		default: void 0
+	},
+	clear: {
+		type: Boolean,
+		default: true
+	},
+	final: {
+		type: Boolean,
+		default: true
+	},
+	streaming: {
+		type: Boolean,
+		default: false
+	},
+	renderer: {
+		type: Function,
+		default: void 0
+	},
+	loadingText: {
+		type: String,
+		default: "Rendering terminal graphic..."
+	},
+	deferRenderUntilVisible: {
+		type: Boolean,
+		default: true
+	},
+	suspendRawWhileScrolling: {
+		type: Boolean,
+		default: true
+	},
+	suspendRenderWhileScrolling: {
+		type: Boolean,
+		default: true
+	},
+	scrolling: {
+		type: Boolean,
+		default: false
+	},
+	scrollVersion: {
+		type: Number,
+		default: 0
+	},
+	placementMoveWithoutClear: {
+		type: Boolean,
+		default: false
+	},
+	suspended: {
+		type: Boolean,
+		default: false
+	},
+	retainRawWhileCovered: {
+		type: Boolean,
+		default: false
+	},
+	ignoreRawCoverage: {
+		type: Boolean,
+		default: false
+	},
+	ignoreSamePlaneRawCoverage: {
+		type: Boolean,
+		default: false
+	},
+	cacheKey: {
+		type: String,
+		default: void 0
+	},
+	placementKey: {
+		type: String,
+		default: void 0
+	},
+	trace: {
+		type: Function,
+		default: void 0
+	}
+};
+function terminalDrawKey(current, rect, clearSequence, resizeSequence) {
+	return [
+		current.protocol,
+		rect.x,
+		rect.y,
+		rect.w,
+		rect.h,
+		current.sequenceHash,
+		clearSequence === current.clearSequence ? current.clearSequenceHash ?? "" : smallHash(clearSequence ?? ""),
+		resizeSequence === current.resizeSequence ? current.resizeSequenceHash ?? "" : smallHash(resizeSequence ?? "")
+	].join(":");
+}
+const TAgentTerminalGraphic = defineComponent({
+	name: "TAgentTerminalGraphic",
+	props: tAgentTerminalGraphicProps,
+	setup(props) {
+		const instance = getCurrentInstance();
+		const { terminal, defaultStyle, scheduler, widthProvider, render } = useTerminal();
+		const layout = useLayout();
+		const { visible, rootProps } = useVisibility();
+		const graphicsActivity = inject(TerminalGraphicsActivityKey, null);
+		const status = shallowRef("idle");
+		const error = shallowRef("");
+		const graphic = shallowRef(null);
+		const documentVersion = shallowRef(0);
+		let builtOnce = false;
+		let renderVersion = 0;
+		let renderAbort = null;
+		let alive = true;
+		let lastRenderedContent = "";
+		let lastRenderRawVisible = false;
+		let lastRenderProtocol = null;
+		let lastRenderGraphicsOutputVersion = 0;
+		const rawIdSeed = props.placementKey ? `placement:${props.placementKey}` : props.cacheKey ? `cache:${props.cacheKey}` : `instance:${instance?.uid ?? "unknown"}`;
+		const rawId = `TAgentTerminalGraphic:${smallHash(rawIdSeed)}`;
+		const frameTaskId = `${rawId}:render`;
+		const lastDrawnGraphic = shallowRef(null);
+		const rawClearPendingRepaint = shallowRef(null);
+		const rawDrawRejectedKey = shallowRef(null);
+		const reservedTerminalGraphicSize = shallowRef(null);
+		const terminalSizeVersion = shallowRef(0);
+		const renderNodeId = shallowRef(null);
+		let lastRawSkipScrollKey = "";
+		let lastDeferTraceKey = "";
+		const isParentScrolling = computed(() => props.scrolling || Boolean(graphicsActivity?.scrolling.value));
+		const graphicsActivityVersion = computed(() => (graphicsActivity?.version.value ?? 0) + Math.floor(Number(props.scrollVersion ?? 0)));
+		const graphicsOutput = () => getTerminalGraphicsOutput(terminal);
+		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
+		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+		});
+		const unsubscribeTerminalResize = terminal.on("resize", () => {
+			terminalSizeVersion.value++;
+		});
+		const fallbackText = () => props.fallback ?? (props.kind === "math" ? props.content : "");
+		const contentIdentity = computed(() => `${props.content.length}:${smallHash(props.content)}`);
+		const stableGraphicKey = computed(() => [
+			rawIdSeed,
+			props.cacheKey ?? "",
+			props.kind,
+			contentIdentity.value,
+			props.w,
+			props.h ?? "",
+			props.final ? "final" : "draft"
+		].join(""));
+		const imageId = computed(() => stableTerminalGraphicNumericId(`image:${stableGraphicKey.value}`));
+		const placementId = computed(() => stableTerminalGraphicNumericId(`placement:${stableGraphicKey.value}`));
+		function rememberTerminalGraphicSize(current) {
+			if (current.type !== "terminal") return;
+			const rows = positiveInt$1(current.rows);
+			if (!rows) return;
+			reservedTerminalGraphicSize.value = {
+				key: stableGraphicKey.value,
+				rows
+			};
+		}
+		function bump() {
+			documentVersion.value++;
+		}
+		function currentCapabilities() {
+			return graphicsOutput()?.capabilities ?? NO_GRAPHICS_CAPABILITIES;
+		}
+		function trace(type, extra = {}) {
+			const capabilities = currentCapabilities();
+			try {
+				props.trace?.({
+					type,
+					id: rawId,
+					kind: props.kind,
+					protocol: capabilities.protocol,
+					contentHash: smallHash(props.content),
+					...extra
+				});
+			} catch {}
+			const protocol = isTerminalGraphicsProtocol(capabilities.protocol) ? capabilities.protocol : void 0;
+			const key = props.cacheKey ?? smallHash(props.content);
+			if (type === "render-start") recordTerminalGraphicTrace({
+				type: "renderer-start",
+				id: rawId,
+				key,
+				protocol
+			});
+			else if (type === "render-end") recordTerminalGraphicTrace({
+				type: extra.reason ? "renderer-error" : "renderer-end",
+				id: rawId,
+				key,
+				protocol,
+				durationMs: extra.durationMs,
+				bytes: extra.sequenceBytes,
+				error: extra.reason
+			});
+			else if (type === "defer") recordTerminalGraphicTrace({
+				type: extra.reason === "scrolling" ? "skip-scrolling" : "skip-hidden",
+				id: rawId,
+				key,
+				protocol,
+				reason: extra.reason
+			});
+			else if (type === "raw-draw") {} else if (type === "render-abort") recordTerminalGraphicTrace({
+				type: "renderer-abort",
+				id: rawId,
+				key,
+				protocol,
+				reason: extra.reason
+			});
+			else if (type === "raw-clear") recordTerminalGraphicTrace({
+				type: "clear",
+				id: rawId,
+				key,
+				protocol
+			});
+			else if (type === "raw-skip-scroll") recordTerminalGraphicTrace({
+				type: "skip-scrolling",
+				id: rawId,
+				key,
+				protocol,
+				reason: extra.reason
+			});
+		}
+		function traceDeferOnce(reason) {
+			const key = [
+				reason,
+				graphicsActivityVersion.value,
+				stableGraphicKey.value
+			].join(":");
+			if (lastDeferTraceKey === key) return;
+			lastDeferTraceKey = key;
+			trace("defer", { reason });
+		}
+		function abortCurrentRender(reason) {
+			if (!renderAbort) return;
+			renderAbort.abort();
+			renderAbort = null;
+			trace("render-abort", { reason });
+		}
+		function normalizeResult(result) {
+			if (result == null) return {
+				type: "text",
+				text: fallbackText()
+			};
+			if (typeof result === "string") return {
+				type: "text",
+				text: result
+			};
+			if (typeof result !== "object") return {
+				type: "text",
+				text: fallbackText()
+			};
+			if ("type" in result && result.type === "text") return {
+				type: "text",
+				text: result.text
+			};
+			const maybeRaw = result;
+			const isRawCandidate = maybeRaw.type === "sequence" || "sequence" in result || "protocol" in result;
+			if (!isRawCandidate && "text" in result) return {
+				type: "text",
+				text: result.text
+			};
+			const sequence = typeof maybeRaw.sequence === "string" ? maybeRaw.sequence : "";
+			const protocol = isTerminalGraphicsProtocol(maybeRaw.protocol) ? maybeRaw.protocol : null;
+			const fallback = typeof maybeRaw.fallback === "string" ? sanitizeTerminalFallbackText(maybeRaw.fallback) : fallbackText();
+			const fallbackFromProps = typeof maybeRaw.fallback !== "string";
+			if (!sequence || !protocol || !isSafeTerminalGraphicsSequence(sequence, protocol, "draw")) return {
+				type: "text",
+				text: fallback
+			};
+			const rawClear = typeof maybeRaw.clearSequence === "string" ? maybeRaw.clearSequence : void 0;
+			const clearSequence = rawClear && isSafeComponentClearSequence(rawClear, protocol, imageId.value, placementId.value) ? rawClear : void 0;
+			const rawResize = typeof maybeRaw.resizeSequence === "string" ? maybeRaw.resizeSequence : void 0;
+			const resizeSequence = rawResize && isSafeTerminalGraphicsSequence(rawResize, protocol, "draw") ? rawResize : void 0;
+			const declaredRows = positiveInt$1(maybeRaw.rows);
+			const declaredCols = positiveInt$1(maybeRaw.cols);
+			const sourceWidth = positiveInt$1(maybeRaw.sourceWidth);
+			const sourceHeight = positiveInt$1(maybeRaw.sourceHeight);
+			const zIndex = finiteInt(maybeRaw.zIndex);
+			const declaredSize = declaredRows == null ? null : normalizeTerminalGraphicSize(declaredCols ?? props.w, declaredRows);
+			return {
+				type: "terminal",
+				protocol,
+				sequence,
+				sequenceHash: smallHash(sequence),
+				sequenceBytes: stringByteLength(sequence),
+				fallback,
+				fallbackFromProps,
+				clearSequence,
+				clearSequenceHash: clearSequence ? smallHash(clearSequence) : void 0,
+				resizeSequence,
+				resizeSequenceHash: resizeSequence ? smallHash(resizeSequence) : void 0,
+				cols: declaredRows == null ? declaredCols : declaredSize?.width,
+				rows: declaredSize?.height,
+				sourceWidth,
+				sourceHeight,
+				zIndex
+			};
+		}
+		function defaultClearSequence(protocol) {
+			return protocol === "kitty" ? createKittyDeleteGraphicsSequence({
+				imageId: imageId.value,
+				placementId: placementId.value
+			}) : "";
+		}
+		function resolveClearSequence(current) {
+			if (current.clearSequence) return current.clearSequence;
+			const candidate = defaultClearSequence(current.protocol);
+			if (!candidate) return void 0;
+			return isSafeComponentClearSequence(candidate, current.protocol, imageId.value, placementId.value) ? candidate : void 0;
+		}
+		function resolveResizeSequence(current, rect, full) {
+			if (current.protocol !== "kitty") return current.resizeSequence;
+			const sourceWidth = positiveInt$1(current.sourceWidth);
+			const sourceHeight = positiveInt$1(current.sourceHeight);
+			if (!sourceWidth || !sourceHeight || full.w <= 0 || full.h <= 0) return current.resizeSequence;
+			const offsetX = Math.max(0, rect.x - full.x);
+			const offsetY = Math.max(0, rect.y - full.y);
+			const visibleW = Math.max(0, Math.min(rect.w, full.w - offsetX));
+			const visibleH = Math.max(0, Math.min(rect.h, full.h - offsetY));
+			const x0 = clampNumber(Math.floor(offsetX * sourceWidth / full.w), 0, sourceWidth - 1);
+			const y0 = clampNumber(Math.floor(offsetY * sourceHeight / full.h), 0, sourceHeight - 1);
+			const x1 = Math.max(x0 + 1, clampNumber(Math.ceil((offsetX + visibleW) * sourceWidth / full.w), 1, sourceWidth));
+			const y1 = Math.max(y0 + 1, clampNumber(Math.ceil((offsetY + visibleH) * sourceHeight / full.h), 1, sourceHeight));
+			return createKittyPlacementSequence({
+				imageId: imageId.value,
+				placementId: placementId.value,
+				columns: rect.w,
+				rows: rect.h,
+				sourceX: x0,
+				sourceY: y0,
+				sourceWidth: x1 - x0,
+				sourceHeight: y1 - y0,
+				zIndex: current.zIndex
+			});
+		}
+		function queueClearLastGraphic(options = {}) {
+			const previous = lastDrawnGraphic.value;
+			if (!previous) return false;
+			const output = graphicsOutput();
+			let accepted = false;
+			if (output?.clear && !previous.retainOnClear) try {
+				accepted = Boolean(output.clear(previous.id));
+			} catch {
+				accepted = false;
+			}
+			if (!accepted && output && previous.clearSequence) try {
+				accepted = output.queue({
+					id: previous.id,
+					x: previous.x,
+					y: previous.y,
+					w: previous.w,
+					h: previous.h,
+					protocol: previous.protocol,
+					sequence: previous.clearSequence,
+					deferFlush: true,
+					retainOnClear: previous.retainOnClear,
+					op: "clear"
+				});
+			} catch {
+				accepted = false;
+			}
+			if (accepted) {
+				if (options.markPendingRepaint ?? true) rawClearPendingRepaint.value = previous;
+				lastDrawnGraphic.value = null;
+				trace("raw-clear", {
+					x: previous.x,
+					y: previous.y,
+					w: previous.w,
+					h: previous.h
+				});
+			}
+			return accepted;
+		}
+		function queueDrawGraphic(output, current, rect, full = rect, options = {}) {
+			const clearSequence = resolveClearSequence(current);
+			const resizeSequence = resolveResizeSequence(current, rect, full);
+			const drawKey = terminalDrawKey(current, rect, clearSequence, resizeSequence);
+			const activePrevious = lastDrawnGraphic.value;
+			const retainedPrevious = rawClearPendingRepaint.value;
+			const previous = activePrevious ?? retainedPrevious;
+			const previousIsRetained = activePrevious == null && retainedPrevious != null;
+			const previousStillActive = previous ? typeof output.isActive === "function" ? output.isActive(previous.id) : true : false;
+			if (!previousIsRetained && !options.force && previous?.drawKey === drawKey && previousStillActive) return false;
+			const canReusePlacementSequence = previousStillActive && previous?.protocol === current.protocol && previous.sequenceHash === current.sequenceHash && current.protocol === "kitty" && Boolean(resizeSequence);
+			const scrollVersion = Math.floor(Number(props.scrollVersion ?? 0));
+			const canMoveWithoutClear = canReusePlacementSequence && Boolean(options.placementMoveWithoutClear);
+			if (!previousIsRetained && previousStillActive && !resizeSequence && previous?.protocol === current.protocol && previous.sequenceHash === current.sequenceHash && previous.x === rect.x && previous.y === rect.y && rect.w <= previous.w && rect.h <= previous.h && (options.force || !sameRect(rect, full))) {
+				lastDrawnGraphic.value = {
+					...previous,
+					w: rect.w,
+					h: rect.h,
+					clearSequence,
+					resizeSequence,
+					drawKey,
+					activityVersion: graphicsActivityVersion.value,
+					scrollVersion
+				};
+				lastRawSkipScrollKey = "";
+				return false;
+			}
+			if (previousStillActive && !previousIsRetained && !canReusePlacementSequence) {
+				if (!queueClearLastGraphic({ markPendingRepaint: false })) return false;
+			} else if (previous) {
+				if (!previousStillActive) {
+					lastDrawnGraphic.value = null;
+					rawClearPendingRepaint.value = null;
+				}
+			}
+			let accepted = false;
+			try {
+				accepted = output.queue({
+					id: rawId,
+					x: rect.x,
+					y: rect.y,
+					w: rect.w,
+					h: rect.h,
+					protocol: current.protocol,
+					sequence: canReusePlacementSequence && resizeSequence ? resizeSequence : current.sequence,
+					resizeSequence,
+					clearSequence,
+					resizeRedraw: canReusePlacementSequence,
+					placementMoveWithoutClear: canMoveWithoutClear,
+					allowTextOverlay: options.allowTextOverlay,
+					forceDraw: options.force,
+					deferFlush: options.deferFlush ?? true,
+					fallbackText: current.fallback
+				});
+			} catch {
+				accepted = false;
+			}
+			if (!accepted) {
+				lastDrawnGraphic.value = null;
+				if (rawDrawRejectedKey.value !== drawKey) {
+					rawDrawRejectedKey.value = drawKey;
+					scheduler.invalidate({
+						priority: "low",
+						reason: "data"
+					});
+				}
+				return false;
+			}
+			rawDrawRejectedKey.value = null;
+			rawClearPendingRepaint.value = null;
+			lastDrawnGraphic.value = {
+				id: rawId,
+				x: rect.x,
+				y: rect.y,
+				w: rect.w,
+				h: rect.h,
+				protocol: current.protocol,
+				sequenceHash: current.sequenceHash,
+				clearSequence,
+				resizeSequence,
+				retainOnClear: Boolean(props.cacheKey && resizeSequence),
+				drawKey,
+				activityVersion: graphicsActivityVersion.value,
+				scrollVersion
+			};
+			lastRawSkipScrollKey = "";
+			return true;
+		}
+		function hasRetainedActiveRawGraphic() {
+			const output = graphicsOutput();
+			return Boolean(status.value === "loading" && !graphic.value && output && typeof output.isActive === "function" && output.isActive(rawId));
+		}
+		const showingInitialLoadingText = computed(() => status.value === "loading" && !graphic.value && !hasRetainedActiveRawGraphic());
+		const fullRect = computed(() => {
+			const current = graphic.value;
+			const reserved = reservedTerminalGraphicSize.value;
+			const reservedRows = current?.type === "terminal" ? void 0 : status.value === "idle" && reserved?.key === stableGraphicKey.value ? reserved.rows : void 0;
+			const textLines = current?.type === "text" ? splitTextOutput(current.text) : splitTextOutput(fallbackText());
+			const height = props.h ?? (current?.type === "terminal" ? current.rows : void 0) ?? reservedRows ?? Math.max(1, textLines.length);
+			return translateRect({
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: height
+			}, layout.originX, layout.originY);
+		});
+		const absRect = computed(() => {
+			terminalSizeVersion.value;
+			const translated = fullRect.value;
+			const size = terminal.size();
+			const terminalClip = {
+				x: 0,
+				y: 0,
+				w: Math.max(0, Math.floor(size.cols)),
+				h: Math.max(0, Math.floor(size.rows))
+			};
+			const clip = layout.clipRect ? intersectRect(layout.clipRect, terminalClip) : terminalClip;
+			if (!clip) return {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+			return intersectRect(translated, clip) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		const renderRect = computed(() => absRect.value);
+		function rawRectFitsTerminalViewport(rect) {
+			return canDrawTerminalGraphicRect(rect, terminal.size());
+		}
+		function rawCoveredByHigherRenderNode(rect = fullRect.value) {
+			if (props.retainRawWhileCovered) return false;
+			const id = renderNodeId.value;
+			return !props.ignoreRawCoverage && id != null && render.isRectCoveredByHigherNode(id, rect, { ignoreSamePlane: props.ignoreSamePlaneRawCoverage });
+		}
+		function retainedRawCoveredByHigherRenderNode(rect) {
+			if (!props.retainRawWhileCovered) return false;
+			const id = renderNodeId.value;
+			return Boolean(id != null && render.isRectCoveredByHigherNode(id, rect, { ignoreSamePlane: props.ignoreSamePlaneRawCoverage }));
+		}
+		function rawUncoveredRenderRect(rect) {
+			if (props.retainRawWhileCovered) return rect;
+			const id = renderNodeId.value;
+			if (id == null) return rect;
+			const covers = render.higherNodeCoverageRects(id, rect, { ignoreSamePlane: props.ignoreSamePlaneRawCoverage });
+			if (!covers.length) return rect;
+			if (!props.ignoreRawCoverage) return null;
+			return largestUncoveredRect(rect, covers);
+		}
+		const rawCanRender = computed(() => {
+			graphicsOutputVersion.value;
+			terminalSizeVersion.value;
+			const current = graphic.value;
+			const output = graphicsOutput();
+			const rect = absRect.value;
+			return current?.type === "terminal" && rawRectFitsTerminalViewport(rect) && Boolean(output?.capabilities.supported) && output?.capabilities.preferredProtocol === current.protocol;
+		});
+		const rawOutputCanRenderValue = computed(() => {
+			graphicsOutputVersion.value;
+			terminalSizeVersion.value;
+			return rawOutputCanRender();
+		});
+		const rawSuppressedByScroll = computed(() => props.suspended || props.suspendRawWhileScrolling && isParentScrolling.value);
+		const rawCanQueue = computed(() => rawCanRender.value && !rawSuppressedByScroll.value);
+		function traceRawSkipScrollOnce(reason) {
+			const r = absRect.value;
+			const key = [
+				reason,
+				graphicsActivityVersion.value,
+				stableGraphicKey.value,
+				r.x,
+				r.y,
+				r.w,
+				r.h
+			].join(":");
+			if (lastRawSkipScrollKey === key) return;
+			lastRawSkipScrollKey = key;
+			trace("raw-skip-scroll", { reason });
+		}
+		function hasPaintableRect() {
+			const r = absRect.value;
+			return visible.value && r.w > 0 && r.h > 0;
+		}
+		function rawOutputCanRender() {
+			const output = graphicsOutput();
+			const rect = absRect.value;
+			return rawRectFitsTerminalViewport(rect) && Boolean(output?.capabilities.supported);
+		}
+		function renderDeferReason() {
+			if (props.suspended) return "suspended";
+			if (props.deferRenderUntilVisible && !hasPaintableRect()) return "not-visible";
+			if (props.suspendRenderWhileScrolling && isParentScrolling.value) return "scrolling";
+			return null;
+		}
+		function shouldDeferRender() {
+			return renderDeferReason() != null;
+		}
+		function shouldRerenderForGraphicsOutputChange() {
+			if (!props.renderer) return false;
+			if (!props.content.trim()) return false;
+			if (shouldDeferRender()) return false;
+			if (rawSuppressedByScroll.value) return false;
+			const protocol = currentCapabilities().protocol;
+			return lastRenderProtocol != null && (lastRenderProtocol !== protocol || lastRenderGraphicsOutputVersion !== graphicsOutputVersion.value);
+		}
+		function shouldRetryTemporaryRawFallback(rawCovered = rawCoveredByHigherRenderNode()) {
+			return Boolean(props.renderer) && props.content.trim().length > 0 && graphic.value?.type === "text" && status.value !== "loading" && !lastRenderRawVisible && rawOutputCanRenderValue.value && !rawSuppressedByScroll.value && !rawCovered;
+		}
+		function setDeferredFallback(content) {
+			graphic.value = {
+				type: "text",
+				text: content.trim() ? fallbackText() : ""
+			};
+			lastRenderedContent = content;
+			status.value = "idle";
+			error.value = "";
+			bump();
+		}
+		function resolveRendererContext(signal) {
+			const capabilities = currentCapabilities();
+			const visibleNow = hasPaintableRect();
+			const rawVisible = rawOutputCanRenderValue.value && !rawSuppressedByScroll.value && !rawCoveredByHigherRenderNode();
+			return {
+				kind: props.kind,
+				width: props.w,
+				height: props.h,
+				final: props.final,
+				streaming: props.streaming,
+				protocol: capabilities.protocol,
+				capabilities,
+				signal,
+				imageId: imageId.value,
+				placementId: placementId.value,
+				visible: visibleNow,
+				rawVisible,
+				scrolling: isParentScrolling.value,
+				cacheKey: props.cacheKey,
+				viewport: {
+					visible: visibleNow,
+					rawVisible,
+					scrolling: isParentScrolling.value,
+					rect: absRect.value,
+					fullRect: fullRect.value
+				}
+			};
+		}
+		async function renderNow(version) {
+			const protocol = currentCapabilities().protocol;
+			recordTerminalGraphicTrace({
+				type: "request",
+				id: rawId,
+				key: props.cacheKey ?? smallHash(props.content),
+				protocol: isTerminalGraphicsProtocol(protocol) ? protocol : void 0
+			});
+			const content = props.content;
+			if (!content.trim()) {
+				abortCurrentRender("superseded");
+				if (!alive || version !== renderVersion) return;
+				graphic.value = {
+					type: "text",
+					text: ""
+				};
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = "";
+				bump();
+				return;
+			}
+			const renderer = props.renderer;
+			if (!renderer) {
+				abortCurrentRender("superseded");
+				if (!alive || version !== renderVersion) return;
+				graphic.value = {
+					type: "text",
+					text: fallbackText()
+				};
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = "";
+				bump();
+				return;
+			}
+			const deferred = renderDeferReason();
+			if (deferred) {
+				abortCurrentRender(deferred);
+				if (!alive || version !== renderVersion) return;
+				setDeferredFallback(content);
+				traceDeferOnce(deferred);
+				return;
+			}
+			abortCurrentRender("superseded");
+			lastDeferTraceKey = "";
+			const abort = new AbortController();
+			renderAbort = abort;
+			const startedAt = nowTerminalGraphicTraceTime();
+			status.value = "loading";
+			error.value = "";
+			trace("render-start");
+			bump();
+			try {
+				const contextGraphicsOutputVersion = graphicsOutputVersion.value;
+				const context = resolveRendererContext(abort.signal);
+				lastRenderRawVisible = context.rawVisible;
+				lastRenderProtocol = context.protocol;
+				lastRenderGraphicsOutputVersion = contextGraphicsOutputVersion;
+				const result = await renderer(content, context);
+				if (abort.signal.aborted) return;
+				if (!alive || version !== renderVersion) return;
+				const normalized = normalizeResult(result);
+				rememberTerminalGraphicSize(normalized);
+				graphic.value = normalized;
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = "";
+				trace("render-end", {
+					durationMs: nowTerminalGraphicTraceTime() - startedAt,
+					sequenceChars: normalized.type === "terminal" ? normalized.sequence.length : 0,
+					sequenceBytes: normalized.type === "terminal" ? normalized.sequenceBytes : 0
+				});
+				bump();
+				if (normalized.type === "terminal") scheduler.invalidate({
+					priority: "low",
+					reason: "data"
+				});
+			} catch (err) {
+				if (abort.signal.aborted) return;
+				if (!alive || version !== renderVersion) return;
+				graphic.value = {
+					type: "text",
+					text: fallbackText()
+				};
+				lastRenderedContent = content;
+				status.value = "ready";
+				error.value = errorMessage(err);
+				trace("render-end", {
+					durationMs: nowTerminalGraphicTraceTime() - startedAt,
+					reason: error.value
+				});
+				bump();
+			} finally {
+				if (renderAbort === abort) renderAbort = null;
+			}
+		}
+		function scheduleRender(options = {}) {
+			const version = ++renderVersion;
+			if (options.clearLastGraphic ?? true) queueClearLastGraphic();
+			if (!builtOnce || !props.streaming) {
+				builtOnce = true;
+				renderNow(version);
+				return;
+			}
+			const accepted = scheduler.queueFrameTask({
+				id: frameTaskId,
+				reason: "stream",
+				priority: "low",
+				sync: false,
+				run: () => {
+					if (!alive) return;
+					if (version !== renderVersion) return;
+					renderNow(version);
+				}
+			});
+			if (accepted === false) renderNow(version);
+		}
+		watch([
+			() => props.content,
+			() => props.kind,
+			() => props.renderer,
+			() => props.w,
+			() => props.h,
+			() => props.streaming,
+			() => props.final,
+			() => props.deferRenderUntilVisible,
+			() => props.suspendRawWhileScrolling,
+			() => props.suspendRenderWhileScrolling,
+			() => props.scrolling,
+			() => props.suspended,
+			() => props.retainRawWhileCovered,
+			() => props.ignoreRawCoverage,
+			() => props.ignoreSamePlaneRawCoverage,
+			() => props.cacheKey,
+			() => props.placementKey
+		], () => {
+			scheduleRender();
+		}, { immediate: true });
+		watch(() => props.fallback, () => {
+			const current = graphic.value;
+			if (current?.type === "terminal") {
+				if (current.fallbackFromProps) {
+					graphic.value = {
+						...current,
+						fallback: fallbackText()
+					};
+					bump();
+					scheduler.invalidate({
+						priority: "low",
+						reason: "data"
+					});
+					return;
+				}
+				scheduleRender({ clearLastGraphic: false });
+				return;
+			}
+			scheduleRender();
+		});
+		watch(() => [graphicsOutputVersion.value, rawOutputCanRenderValue.value], () => {
+			if (!props.renderer || !props.content.trim()) return;
+			if (graphic.value?.type === "terminal") return;
+			if (!rawOutputCanRenderValue.value || shouldDeferRender()) return;
+			scheduleRender({ clearLastGraphic: false });
+		});
+		watch(() => [
+			props.x,
+			props.y,
+			props.w,
+			props.h,
+			props.scrollVersion
+		], () => {
+			if (graphic.value?.type === "terminal") {
+				scheduler.invalidate({
+					priority: "low",
+					reason: "data"
+				});
+				return;
+			}
+			if (props.kind !== "image" || status.value !== "loading" || !props.renderer) return;
+			scheduleRender({ clearLastGraphic: false });
+		}, { flush: "sync" });
+		onBeforeUnmount(() => {
+			alive = false;
+			renderVersion++;
+			unsubscribeTerminalResize();
+			unsubscribeGraphicsOutput();
+			abortCurrentRender("unmount");
+			scheduler.cancelFrameTask?.(frameTaskId);
+			queueClearLastGraphic();
+		});
+		function resolveDisplayLines(rawPlaceholderAllowed) {
+			if (showingInitialLoadingText.value) return splitTextOutput(props.loadingText);
+			const current = graphic.value;
+			if (!current) return splitTextOutput(fallbackText());
+			if (current.type === "terminal" && rawPlaceholderAllowed) {
+				const clearSequence = resolveClearSequence(current);
+				const drawKey = terminalDrawKey(current, absRect.value, clearSequence, resolveResizeSequence(current, absRect.value, fullRect.value));
+				if (rawDrawRejectedKey.value !== drawKey) return markRaw([""]);
+			}
+			const text = current.type === "terminal" ? current.fallback : current.text;
+			const lines = splitTextOutput(text);
+			return text.trim().length > 0 && !hasVisibleOutput(lines) ? splitTextOutput(fallbackText()) : lines;
+		}
+		const displayLines = computed(() => {
+			return resolveDisplayLines(rawCanQueue.value);
+		});
+		const currentStyle = computed(() => {
+			if (error.value) return props.errorStyle ?? props.style ?? defaultStyle.value;
+			if (showingInitialLoadingText.value) return props.loadingStyle ?? props.style ?? defaultStyle.value;
+			return props.style ?? defaultStyle.value;
+		});
+		const renderNode = useRenderNode(() => ({
+			zIndex: props.zIndex,
+			rect: visible.value ? renderRect.value : {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			},
+			deps: [
+				visible.value,
+				renderRect.value,
+				fullRect.value,
+				displayLines.value,
+				currentStyle.value,
+				props.clear,
+				status.value,
+				error.value,
+				documentVersion.value,
+				rawOutputCanRenderValue.value,
+				rawCanRender.value,
+				rawCanQueue.value,
+				rawClearPendingRepaint.value,
+				rawDrawRejectedKey.value,
+				rawSuppressedByScroll.value,
+				props.placementMoveWithoutClear,
+				props.retainRawWhileCovered,
+				isParentScrolling.value,
+				graphicsActivityVersion.value,
+				graphicsOutputVersion.value
+			],
+			paint: (dirtyRows) => {
+				withTextWidthProvider(widthProvider, () => {
+					if (!visible.value) {
+						queueClearLastGraphic();
+						return;
+					}
+					const r = absRect.value;
+					const full = fullRect.value;
+					if (r.w <= 0 || r.h <= 0) {
+						queueClearLastGraphic();
+						return;
+					}
+					const style = currentStyle.value;
+					const dx = Math.max(0, Math.floor(r.x - full.x));
+					const fullY = Math.floor(full.y);
+					const current = graphic.value;
+					const output = graphicsOutput();
+					const retainedActiveRawGraphic = hasRetainedActiveRawGraphic();
+					const rawRectForPaint = rawUncoveredRenderRect(r);
+					const rawCoverageClipped = rawRectForPaint != null && props.ignoreRawCoverage && !sameRect(rawRectForPaint, r);
+					const rawCoveredForPaint = rawRectForPaint == null && rawCoveredByHigherRenderNode(r);
+					const rawCanQueueForPaint = current?.type === "terminal" && rawCanQueue.value && rawRectForPaint != null;
+					let preserveActiveRawGraphic = false;
+					let forceActiveRawRedraw = false;
+					let allowTextOverlay = false;
+					if (rawCanQueueForPaint && output) {
+						const previous = lastDrawnGraphic.value;
+						const previousStillActive = previous ? typeof output.isActive === "function" ? output.isActive(previous.id) : true : false;
+						if (previousStillActive && previous) {
+							const clearSequence = resolveClearSequence(current);
+							const resizeSequence = resolveResizeSequence(current, rawRectForPaint, full);
+							preserveActiveRawGraphic = rawClearPendingRepaint.value == null && previous.drawKey === terminalDrawKey(current, rawRectForPaint, clearSequence, resizeSequence);
+							allowTextOverlay = retainedRawCoveredByHigherRenderNode(r);
+							forceActiveRawRedraw = preserveActiveRawGraphic && (previous.activityVersion !== graphicsActivityVersion.value || allowTextOverlay);
+						}
+					}
+					const preserveActiveRawGraphicForPaint = preserveActiveRawGraphic;
+					let out = rawCanQueueForPaint ? displayLines.value : resolveDisplayLines(false);
+					const clearingRawGraphic = rawClearPendingRepaint.value != null || lastDrawnGraphic.value != null && !preserveActiveRawGraphicForPaint;
+					const clearOwnedRegion = preserveActiveRawGraphicForPaint || retainedActiveRawGraphic ? false : props.clear || clearingRawGraphic || Boolean(rawCanQueueForPaint);
+					const blank = clearOwnedRegion ? spaces(r.w) : "";
+					const paintRow = (y) => {
+						if (y < r.y || y >= r.y + r.h) return;
+						const rowIndex = y - fullY;
+						if (rowIndex < 0 || rowIndex >= out.length) {
+							if (clearOwnedRegion) terminal.write(blank, {
+								x: r.x,
+								y,
+								style
+							});
+							return;
+						}
+						const src = out[rowIndex] ?? "";
+						const clipped = dx > 0 ? sliceByCellsRange(src, dx, dx + r.w) : sliceByCells(src, r.w);
+						const value = clearOwnedRegion ? padEndByCells(clipped, r.w) : clipped;
+						if (value || clearOwnedRegion) terminal.write(value, {
+							x: r.x,
+							y,
+							style
+						});
+					};
+					const paintRows = () => {
+						if (dirtyRows?.length) for (const y of dirtyRows) paintRow(y);
+						else for (let y = r.y; y < r.y + r.h; y++) paintRow(y);
+					};
+					paintRows();
+					if (current?.type === "terminal" && output?.capabilities.supported && output.capabilities.preferredProtocol === current.protocol && rawCanQueueForPaint) {
+						const drawKey = terminalDrawKey(current, rawRectForPaint, resolveClearSequence(current), resolveResizeSequence(current, rawRectForPaint, full));
+						const queued = queueDrawGraphic(output, current, rawRectForPaint, full, {
+							force: forceActiveRawRedraw,
+							deferFlush: preserveActiveRawGraphicForPaint,
+							placementMoveWithoutClear: props.placementMoveWithoutClear || rawCoverageClipped,
+							allowTextOverlay
+						});
+						if (queued) trace("raw-draw", {
+							sequenceChars: current.sequence.length,
+							sequenceBytes: current.sequenceBytes,
+							x: rawRectForPaint.x,
+							y: rawRectForPaint.y,
+							w: rawRectForPaint.w,
+							h: rawRectForPaint.h
+						});
+						else if (rawDrawRejectedKey.value === drawKey) {
+							out = resolveDisplayLines(false);
+							paintRows();
+						}
+					} else {
+						if (current?.type === "terminal" && rawSuppressedByScroll.value) traceRawSkipScrollOnce(isParentScrolling.value ? "scrolling" : "suspended");
+						queueClearLastGraphic({ markPendingRepaint: false });
+						if (!shouldDeferRender() && shouldRetryTemporaryRawFallback(rawCoveredForPaint)) scheduleRender({ clearLastGraphic: false });
+					}
+					if (clearingRawGraphic) rawClearPendingRepaint.value = null;
+				});
+			}
+		}));
+		watch(renderNode.id, (id) => {
+			renderNodeId.value = id;
+		}, { immediate: true });
+		watch([
+			visible,
+			rawOutputCanRenderValue,
+			rawCanRender,
+			rawCanQueue,
+			rawSuppressedByScroll,
+			isParentScrolling,
+			graphicsActivityVersion,
+			graphicsOutputVersion,
+			() => renderRect.value.x,
+			() => renderRect.value.y,
+			() => renderRect.value.w,
+			() => renderRect.value.h,
+			() => fullRect.value.x,
+			() => fullRect.value.y,
+			() => fullRect.value.w,
+			() => fullRect.value.h
+		], () => {
+			if (!alive) return;
+			const deferred = renderDeferReason();
+			if (deferred) {
+				abortCurrentRender(deferred);
+				if (status.value === "loading" || !graphic.value || lastRenderedContent !== props.content) setDeferredFallback(props.content);
+				traceDeferOnce(deferred);
+			}
+			if (!visible.value || !rawCanQueue.value) queueClearLastGraphic();
+			const shouldRetryTemporaryFallback = shouldRetryTemporaryRawFallback();
+			const shouldRerenderForOutputChange = shouldRerenderForGraphicsOutputChange();
+			if (!shouldDeferRender() && (!graphic.value || status.value === "idle" || shouldRetryTemporaryFallback || shouldRerenderForOutputChange)) {
+				scheduleRender();
+				return;
+			}
+			scheduler.invalidate({
+				priority: "low",
+				reason: "data"
+			});
+		}, { flush: "post" });
+		return () => h("span", rootProps);
+	}
+});
+
+//#endregion
 //#region src/vue/agent/view-models.ts
 function resolveTUserMessageViewModel(opts) {
 	const indent = Math.max(0, Math.floor(opts.indent ?? 0));
@@ -825,4 +2011,505 @@ const TUserMessageView = defineComponent({
 });
 
 //#endregion
-export { TTranscriptView as TAgentTranscript, TBox, TCommandPalette, TDialog, TInput, TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TRenderPlane, TSelect, TText, TThinkingView, TToolCallView, TLogView as TToolLogView, TTranscriptView, TUserMessageView, TView, TVirtualList, TVirtualMarkdown, computeCommandPaletteMatchRanges, createAppendOnlyLogStore, createMarkdownBlockSource, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, detectTLogUrls, dispatchTLogPluginLinkAction, getTLogPluginMetadata, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, resolveTThinkingViewModel, resolveTToolCallViewModel, resolveTUserMessageViewModel, stripTLogAnsiText, tlogDarkPreset, tlogDarkTheme, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };
+//#region src/renderer/terminal-graphic-render-queue.ts
+const CACHE_MISS = Symbol("terminal-graphic-cache-miss");
+function now() {
+	return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function createAbortError() {
+	const error = new Error("Terminal graphic render aborted");
+	error.name = "AbortError";
+	return error;
+}
+function positiveFiniteInt(value, fallback) {
+	const n = Number(value);
+	if (!Number.isFinite(n)) return fallback;
+	const int = Math.floor(n);
+	return int > 0 ? int : fallback;
+}
+function throwIfAborted$1(signal) {
+	if (signal?.aborted) throw createAbortError();
+}
+function raceAbort(promise, signal) {
+	if (!signal) return promise;
+	if (signal.aborted) return Promise.reject(createAbortError());
+	return new Promise((resolve, reject) => {
+		const onAbort = () => reject(createAbortError());
+		signal.addEventListener("abort", onAbort, { once: true });
+		promise.then((value) => {
+			signal.removeEventListener("abort", onAbort);
+			resolve(value);
+		}, (error) => {
+			signal.removeEventListener("abort", onAbort);
+			reject(error);
+		});
+	});
+}
+function createTerminalGraphicRenderQueue(options = {}) {
+	const maxConcurrency = positiveFiniteInt(options.maxConcurrency, 2);
+	const maxEntries = positiveFiniteInt(options.maxEntries, 128);
+	const maxBytes = positiveFiniteInt(options.maxBytes, 32 * 1024 * 1024);
+	const ttlMs = positiveFiniteInt(options.ttlMs, 5 * 6e4);
+	const dedupeInflight = options.dedupeInflight ?? false;
+	let active = 0;
+	let cacheBytes = 0;
+	let generation = 0;
+	const waiters = [];
+	const cache = new Map();
+	const inflight = new Map();
+	function traceQueueState(event) {
+		recordTerminalGraphicTrace({
+			...event,
+			active,
+			waiting: waiters.length,
+			cacheEntries: cache.size,
+			cacheBytes
+		});
+	}
+	function evictUntilBudget() {
+		while (cache.size > maxEntries || cacheBytes > maxBytes) {
+			const oldestKey = cache.keys().next().value;
+			if (!oldestKey) break;
+			const entry = cache.get(oldestKey);
+			cache.delete(oldestKey);
+			if (entry) {
+				cacheBytes -= entry.bytes;
+				options.onMetric?.({
+					type: "evict",
+					key: oldestKey,
+					bytes: entry.bytes
+				});
+			}
+		}
+	}
+	function setCache(key, value, bytes) {
+		const prev = cache.get(key);
+		if (prev) {
+			cache.delete(key);
+			cacheBytes -= prev.bytes;
+		}
+		if (bytes > maxBytes) return;
+		cache.set(key, {
+			value,
+			bytes,
+			expiresAt: Date.now() + ttlMs
+		});
+		cacheBytes += bytes;
+		options.onMetric?.({
+			type: "cache-store",
+			key,
+			bytes
+		});
+		traceQueueState({
+			type: "cache-store",
+			id: key,
+			key,
+			bytes
+		});
+		evictUntilBudget();
+	}
+	function getCache(key) {
+		const entry = cache.get(key);
+		if (!entry) return CACHE_MISS;
+		if (entry.expiresAt < Date.now()) {
+			cache.delete(key);
+			cacheBytes -= entry.bytes;
+			return CACHE_MISS;
+		}
+		cache.delete(key);
+		cache.set(key, entry);
+		options.onMetric?.({
+			type: "cache-hit",
+			key
+		});
+		traceQueueState({
+			type: "cache-hit",
+			id: key,
+			key,
+			bytes: entry.bytes
+		});
+		return entry.value;
+	}
+	function release() {
+		active = Math.max(0, active - 1);
+		pump();
+	}
+	function once(fn) {
+		let called = false;
+		return () => {
+			if (called) return;
+			called = true;
+			fn();
+		};
+	}
+	function observeActiveRenderAbort(key, signal) {
+		if (!signal) return () => void 0;
+		const onAbort = () => {
+			options.onMetric?.({
+				type: "render-abort",
+				key
+			});
+			traceQueueState({
+				type: "renderer-abort",
+				id: key,
+				key
+			});
+		};
+		signal.addEventListener("abort", onAbort, { once: true });
+		return () => signal.removeEventListener("abort", onAbort);
+	}
+	function pump() {
+		while (active < maxConcurrency && waiters.length > 0) {
+			const waiter = waiters.shift();
+			active++;
+			traceQueueState({
+				type: "queue-depth",
+				id: waiter.key,
+				key: waiter.key
+			});
+			waiter.start();
+		}
+	}
+	function acquire(key, signal) {
+		throwIfAborted$1(signal);
+		if (active < maxConcurrency) {
+			active++;
+			traceQueueState({
+				type: "queue-depth",
+				id: key,
+				key
+			});
+			return Promise.resolve(release);
+		}
+		const waitStartedAt = now();
+		return new Promise((resolve, reject) => {
+			let onAbort = () => void 0;
+			const cleanup = () => {
+				signal?.removeEventListener("abort", onAbort);
+			};
+			const waiter = {
+				key,
+				start: () => {
+					cleanup();
+					const waitMs = now() - waitStartedAt;
+					options.onMetric?.({
+						type: "queue-wait",
+						key,
+						waitMs
+					});
+					traceQueueState({
+						type: "queue-wait",
+						id: key,
+						key,
+						durationMs: waitMs
+					});
+					resolve(release);
+				},
+				reject: (error) => {
+					cleanup();
+					reject(error);
+				}
+			};
+			onAbort = () => {
+				const index = waiters.indexOf(waiter);
+				if (index >= 0) waiters.splice(index, 1);
+				cleanup();
+				reject(createAbortError());
+			};
+			signal?.addEventListener("abort", onAbort, { once: true });
+			waiters.push(waiter);
+			traceQueueState({
+				type: "queue-depth",
+				id: key,
+				key
+			});
+		});
+	}
+	async function cached(key, signal, render, estimateBytes = () => 0, cachedOptions = {}) {
+		throwIfAborted$1(signal);
+		const cachedValue = getCache(key);
+		if (cachedValue !== CACHE_MISS) return cachedValue;
+		traceQueueState({
+			type: "cache-miss",
+			id: key,
+			key
+		});
+		const shouldDedupeInflight = cachedOptions.dedupeInflight ?? dedupeInflight;
+		const existing = shouldDedupeInflight ? inflight.get(key) : void 0;
+		if (existing) return raceAbort(existing, signal);
+		let promise;
+		promise = (async () => {
+			let releaseSlot = null;
+			let removeAbortObserver = null;
+			const renderGeneration = generation;
+			try {
+				releaseSlot = once(await acquire(key, signal));
+				removeAbortObserver = observeActiveRenderAbort(key, signal);
+				throwIfAborted$1(signal);
+				const cachedAfterWait = getCache(key);
+				if (cachedAfterWait !== CACHE_MISS) return cachedAfterWait;
+				const value = await render();
+				throwIfAborted$1(signal);
+				const rawBytes = Math.floor(Number(estimateBytes(value)));
+				const bytes = Number.isFinite(rawBytes) && rawBytes > 0 ? rawBytes : 0;
+				if (renderGeneration === generation) setCache(key, value, bytes);
+				return value;
+			} finally {
+				removeAbortObserver?.();
+				releaseSlot?.();
+				if (shouldDedupeInflight && inflight.get(key) === promise) inflight.delete(key);
+			}
+		})();
+		if (shouldDedupeInflight) inflight.set(key, promise);
+		return raceAbort(promise, signal);
+	}
+	return {
+		cached,
+		clear() {
+			generation++;
+			cache.clear();
+			inflight.clear();
+			const pending = waiters.splice(0);
+			for (const waiter of pending) waiter.reject(createAbortError());
+			cacheBytes = 0;
+		},
+		stats() {
+			return {
+				active,
+				waiting: waiters.length,
+				cacheEntries: cache.size,
+				cacheBytes
+			};
+		}
+	};
+}
+
+//#endregion
+//#region src/vue/agent/create-png-terminal-graphic-renderer.ts
+function positiveInt(value) {
+	const n = Math.floor(Number(value));
+	return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function abortError() {
+	const error = new Error("Terminal graphic render aborted");
+	error.name = "AbortError";
+	return error;
+}
+function base64PrefixBytes(value, byteCount) {
+	const data = String(value ?? "").replace(/\s+/g, "");
+	const chars = Math.ceil(byteCount / 3) * 4;
+	try {
+		const binary = atob(data.slice(0, chars));
+		const bytes = new Uint8Array(binary.length);
+		for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+		return bytes;
+	} catch {
+		return null;
+	}
+}
+function readPngDimensions(base64) {
+	const bytes = base64PrefixBytes(base64, 24);
+	if (!bytes || bytes.length < 24) return null;
+	if (bytes[0] !== 137 || bytes[1] !== 80 || bytes[2] !== 78 || bytes[3] !== 71 || bytes[4] !== 13 || bytes[5] !== 10 || bytes[6] !== 26 || bytes[7] !== 10) return null;
+	const width = (bytes[16] << 24 | bytes[17] << 16 | bytes[18] << 8 | bytes[19]) >>> 0;
+	const height = (bytes[20] << 24 | bytes[21] << 16 | bytes[22] << 8 | bytes[23]) >>> 0;
+	return width > 0 && height > 0 ? {
+		width,
+		height
+	} : null;
+}
+function throwIfAborted(signal) {
+	if (signal.aborted) throw abortError();
+}
+function defaultCacheKey(content, context, cacheSalt) {
+	const contentIdentity = context.cacheKey != null ? `cache:${context.cacheKey}` : `content:${hashTerminalGraphicsString(content)}`;
+	return [
+		context.kind,
+		context.width,
+		context.height ?? "",
+		context.final ? "final" : "draft",
+		cacheSalt,
+		contentIdentity
+	].join("");
+}
+function resolveCacheSalt(options, content, context) {
+	const salt = typeof options.cacheSalt === "function" ? options.cacheSalt(content, context) : options.cacheSalt;
+	return salt == null ? "" : String(salt);
+}
+function normalizeCachedPngFrame(frame, context) {
+	const fallbackCols = normalizeTerminalGraphicSize(context.width, 1)?.width ?? 1;
+	const requestedCols = positiveInt(frame.cols) ?? fallbackCols;
+	const cols = Math.min(requestedCols, fallbackCols);
+	const rawRows = positiveInt(frame.rows) ?? positiveInt(context.height);
+	const size = normalizeTerminalGraphicSize(cols, rawRows ?? 1);
+	if (rawRows != null && !size) return {
+		base64: "",
+		fallback: frame.fallback == null ? void 0 : sanitizeTerminalFallbackText(frame.fallback),
+		cols: fallbackCols
+	};
+	const base64 = String(frame.base64 ?? "").replace(/\s+/g, "");
+	const dimensions = readPngDimensions(base64);
+	return {
+		base64,
+		fallback: frame.fallback == null ? void 0 : sanitizeTerminalFallbackText(frame.fallback),
+		cols: size?.width ?? fallbackCols,
+		rows: rawRows == null ? void 0 : size?.height,
+		sourceWidth: dimensions?.width,
+		sourceHeight: dimensions?.height
+	};
+}
+function resolveKittyViewportPlacement(png, context) {
+	const rect = context.viewport.rect;
+	const full = context.viewport.fullRect;
+	const columns = positiveInt(rect.w) ?? png.cols;
+	const rows = positiveInt(rect.h) ?? png.rows;
+	const sourceWidth = positiveInt(png.sourceWidth);
+	const sourceHeight = positiveInt(png.sourceHeight);
+	if (!sourceWidth || !sourceHeight || full.w <= 0 || full.h <= 0) return {
+		columns,
+		rows
+	};
+	const offsetX = Math.max(0, rect.x - full.x);
+	const offsetY = Math.max(0, rect.y - full.y);
+	const visibleW = Math.max(0, Math.min(rect.w, full.w - offsetX));
+	const visibleH = Math.max(0, Math.min(rect.h, full.h - offsetY));
+	if (offsetX <= 0 && offsetY <= 0 && visibleW >= full.w && visibleH >= full.h) return {
+		columns,
+		rows
+	};
+	const x0 = Math.max(0, Math.min(sourceWidth - 1, Math.floor(offsetX * sourceWidth / full.w)));
+	const y0 = Math.max(0, Math.min(sourceHeight - 1, Math.floor(offsetY * sourceHeight / full.h)));
+	const x1 = Math.max(x0 + 1, Math.min(sourceWidth, Math.ceil((offsetX + visibleW) * sourceWidth / full.w)));
+	const y1 = Math.max(y0 + 1, Math.min(sourceHeight, Math.ceil((offsetY + visibleH) * sourceHeight / full.h)));
+	return {
+		columns,
+		rows,
+		sourceX: x0,
+		sourceY: y0,
+		sourceWidth: x1 - x0,
+		sourceHeight: y1 - y0
+	};
+}
+function pngFrameBytes(frame) {
+	return frame.base64.length + (frame.fallback?.length ?? 0);
+}
+function stringBytes(value) {
+	return value.length;
+}
+async function resolveFallbackText(options, content, context) {
+	throwIfAborted(context.signal);
+	if (!options.fallback) return void 0;
+	const value = await options.fallback(content, context);
+	throwIfAborted(context.signal);
+	return sanitizeTerminalFallbackText(value);
+}
+async function resolvePngFallbackText(frame, options, content, context) {
+	if (frame.fallback != null) return frame.fallback;
+	return resolveFallbackText(options, content, context);
+}
+function textFallbackResult(text) {
+	return text == null ? null : {
+		type: "text",
+		text
+	};
+}
+function createPngTerminalGraphicRenderer(options) {
+	const queue = options.queue ?? createTerminalGraphicRenderQueue({
+		maxConcurrency: 2,
+		maxEntries: 128,
+		maxBytes: 32 * 1024 * 1024,
+		dedupeInflight: options.dedupeInflight ?? false
+	});
+	return async (content, context) => {
+		throwIfAborted(context.signal);
+		const protocol = context.protocol;
+		if (!context.capabilities.supported || protocol === "unicode" || protocol === "none" || !context.visible || !context.rawVisible || protocol === "sixel" && !options.toSixel) return textFallbackResult(await resolveFallbackText(options, content, context));
+		const key = options.cacheKey?.(content, context) ?? defaultCacheKey(content, context, resolveCacheSalt(options, content, context));
+		throwIfAborted(context.signal);
+		const png = await queue.cached(`${key}\x1Fpng`, void 0, async () => {
+			throwIfAborted(context.signal);
+			const frame = await options.toPngBase64(content, context);
+			return normalizeCachedPngFrame(frame, context);
+		}, pngFrameBytes, { dedupeInflight: options.dedupeInflight ?? false });
+		throwIfAborted(context.signal);
+		let fallbackPromise;
+		const fallback = () => fallbackPromise ?? (fallbackPromise = resolvePngFallbackText(png, options, content, context));
+		const sequenceFallback = async () => {
+			if (png.fallback == null && !options.fallback) return {};
+			const text = await fallback();
+			return text == null ? {} : { fallback: text };
+		};
+		if (!png.base64) return textFallbackResult(await fallback());
+		if (protocol === "kitty") {
+			const placement = resolveKittyViewportPlacement(png, context);
+			const sequence = createKittyGraphicsSequence(png.base64, {
+				imageId: context.imageId,
+				placementId: context.placementId,
+				zIndex: options.zIndex,
+				...placement
+			});
+			const resizeSequence = createKittyPlacementSequence({
+				imageId: context.imageId,
+				placementId: context.placementId,
+				zIndex: options.zIndex,
+				...placement
+			});
+			if (!isSafeTerminalGraphicsSequence(sequence, "kitty", "draw")) return textFallbackResult(await fallback());
+			return {
+				type: "sequence",
+				protocol: "kitty",
+				sequence,
+				resizeSequence,
+				clearSequence: createKittyDeleteGraphicsSequence({
+					imageId: context.imageId,
+					placementId: context.placementId
+				}),
+				...await sequenceFallback(),
+				cols: png.cols,
+				rows: png.rows,
+				sourceWidth: png.sourceWidth,
+				sourceHeight: png.sourceHeight,
+				zIndex: options.zIndex
+			};
+		}
+		if (protocol === "iterm2") {
+			const sequence = createIterm2InlineImageSequence(png.base64, {
+				width: png.cols,
+				height: png.rows,
+				preserveAspectRatio: true,
+				doNotMoveCursor: true
+			});
+			if (!isSafeTerminalGraphicsSequence(sequence, "iterm2", "draw")) return textFallbackResult(await fallback());
+			return {
+				type: "sequence",
+				protocol: "iterm2",
+				sequence,
+				...await sequenceFallback(),
+				cols: png.cols,
+				rows: png.rows
+			};
+		}
+		if (protocol === "sixel") {
+			const sixel = await queue.cached(`${key}\x1Fsixel`, context.signal, async () => {
+				throwIfAborted(context.signal);
+				const sixel$1 = await options.toSixel(png.base64, context);
+				throwIfAborted(context.signal);
+				return sixel$1;
+			}, stringBytes, { dedupeInflight: options.dedupeInflight ?? false });
+			throwIfAborted(context.signal);
+			if (!isSafeTerminalGraphicsSequence(sixel, "sixel", "draw")) return textFallbackResult(await fallback());
+			return {
+				type: "sequence",
+				protocol: "sixel",
+				sequence: sixel,
+				...await sequenceFallback(),
+				cols: png.cols,
+				rows: png.rows
+			};
+		}
+		return textFallbackResult(await fallback());
+	};
+}
+
+//#endregion
+export { TAgentTerminalGraphic, TTranscriptView as TAgentTranscript, TBox, TCommandPalette, TDialog, TInput, TLogLinksPanel, TLogMinimap, TLogScrollbar, TLogSearchBar, TLogSearchPager, TLogSearchResults, TLogView, TLogVirtualLinksPanel, TLogVirtualSearchResults, TMermaid, TMermaidText, TRenderPlane, TSelect, TText, TThinkingView, TToolCallView, TLogView as TToolLogView, TTranscriptView, TUserMessageView, TView, TVirtualList, TVirtualMarkdown, computeCommandPaletteMatchRanges, createAppendOnlyLogStore, createIterm2InlineImageSequence, createKittyDeleteGraphicsSequence, createKittyGraphicsSequence, createKittyPlacementSequence, createMarkdownBlockSource, createPngTerminalGraphicRenderer, createTLogDensityBucketsFromMarkers, createTLogLevelPlugin, createTLogLineMatcherPlugin, createTLogLinkActionPlugin, createTLogOsc8LinkPlugin, createTLogUrlPlugin, createTerminalGraphicRenderQueue, detectTLogUrls, detectTerminalGraphicsCapabilities, dispatchTLogPluginLinkAction, getTLogPluginMetadata, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal, parseTLogAnnotatedText, resolveTLogLinksPanelTheme, resolveTLogMinimapTheme, resolveTLogScrollbarTheme, resolveTLogSearchBarTheme, resolveTLogSearchPagerTheme, resolveTLogSearchResultsTheme, resolveTLogViewTheme, resolveTThinkingViewModel, resolveTToolCallViewModel, resolveTUserMessageViewModel, stripTLogAnsiText, subscribeTerminalGraphicsOutput, tlogDarkPreset, tlogDarkTheme, tlogDefaultPreset, tlogDefaultTheme, tlogHighContrastPreset, tlogHighContrastTheme, toTLogExternalLinkFromVisibleLink, useTLogLinkController, useTLogRetainedIndex, useTLogSearchController, useTLogSearchResultsPage, useTLogVirtualSearchResults };