@linxiraos/pi-tui 1.2.1 → 1.3.0

package/src/chat/messages.d.ts

@@ -173,7 +173,9 @@ export declare function isUserInvokedSkillPrompt(message: CustomMessage): boolea
  * reminders, and auto-continues are not turn starts.
  */
 export declare function isUserTurnInitiator(message: CustomMessage): boolean;
-export type AdvisorSeverity = "nit" | "concern" | "blocker";
+/** Advisor note severities, weakest first; ranks severity thresholds such as `advisor.continueSeverity`. */
+export declare const ADVISOR_SEVERITIES: readonly ["nit", "concern", "blocker"];
+export type AdvisorSeverity = (typeof ADVISOR_SEVERITIES)[number];
 /** One queued advice note. */
 export interface AdvisorNote {
     note: string;

package/src/chat/messages.ts

@@ -294,7 +294,10 @@ export function isUserTurnInitiator(message: CustomMessage): boolean {
 	);
 }
 
-export type AdvisorSeverity = "nit" | "concern" | "blocker";
+/** Advisor note severities, weakest first; ranks severity thresholds such as `advisor.continueSeverity`. */
+export const ADVISOR_SEVERITIES = ["nit", "concern", "blocker"] as const;
+
+export type AdvisorSeverity = (typeof ADVISOR_SEVERITIES)[number];
 
 /** One queued advice note. */
 export interface AdvisorNote {

package/src/chat/read-tool-group.d.ts

@@ -74,8 +74,8 @@ export declare class ReadToolGroupComponent extends Container implements ToolExe
      * The read run as one inline `tool` on terminals that list the kind, else
      * the fallback: a bare `card` (role `zeta.tool.read`) with `Read <path>` or
      * `Read (N)` in the head, a `list` of path items (status tone, link,
-     * correction and conflict detail, nested usage) and, with content previews
-     * on, a `code` block per read clamped by the card's preview while collapsed.
+     * correction and conflict detail, nested usage) and a clamped preview per
+     * read when content previews are on.
      */
     describe(cx?: DescribeContext): NativeNode;
 }

package/src/chat/read-tool-group.ts

@@ -10,19 +10,22 @@ import {
 	type ReadRenderArgs,
 	type ReadToolDetails,
 	readContentCode,
+	readResultIsMarkdown,
 	readSourceFsPath,
 	splitPathAndSel,
 } from "../tools/read";
 import { PREVIEW_LIMITS, shortenPath } from "../render/render-utils";
-import { fileHyperlink, renderCodeCell } from "../render";
+import { fileHyperlink, renderCodeCell, renderMarkdownCell } from "../render";
+import { wrapTreeLine } from "../render/hanging-wrap";
+import { wrapTextWithAnsi } from "../utils";
 import { canonicalizeMessage } from "./thinking-display";
 import { internalUrlSchemeSpec, splitUrlScheme } from "../tools/url-scheme-host";
 import type { ToolExecutionHandle } from "./tool-execution";
 import { formatUsageRow } from "../overlays/usage-row";
-import { formatCount } from "@linxiraos/pi-utils";
+import { formatCount, sanitizeText, sanitizeTextDeep } from "@linxiraos/pi-utils";
 import type { TspCardStatus, TspSpan, TspText } from "@linxiraos/pi-wire";
 import type { NativeToolHead } from "../tools/renderer";
-import { card, code, keyed, node, span, text, withHidden } from "../native/describe";
+import { card, code, keyed, md, node, span, text, withHidden } from "../native/describe";
 import {
 	type DescribeContext,
 	type NativeChild,
@@ -121,11 +124,23 @@ type ReadEntry = {
 	status: "pending" | "success" | "warning" | "error";
 	correctedFrom?: string;
 	contentText?: string;
+	/** The result's `details.contentType`; see {@link previewsMarkdown}. */
+	contentType?: string;
+	/** The call's `raw` arg, which keeps Markdown previews as source. */
+	raw?: boolean;
 	conflictCount?: number;
 	codeStartLine?: number;
 	codeLineNumbers?: Array<number | null>;
 };
 
+/**
+ * Whether an entry previews as rendered Markdown instead of numbered source.
+ * Derived on each render so `raw`/path args that land after the result still apply.
+ */
+function previewsMarkdown(entry: ReadEntry): boolean {
+	return readResultIsMarkdown({ contentType: entry.contentType }, { path: entry.path, raw: entry.raw });
+}
+
 type ReadUsageRow = {
 	toolCallIds: readonly string[];
 	usage: Usage;
@@ -135,13 +150,12 @@ type ReadUsageRow = {
 	turnElapsedMs?: number;
 };
 
-/** Number of code lines to show in collapsed preview mode */
+/** Number of preview rows to show per read while collapsed. */
 const COLLAPSED_PREVIEW_LINES = PREVIEW_LIMITS.OUTPUT_COLLAPSED;
 
 /**
- * Collapsed clamp for a data-first group whose previews are already trimmed
- * to {@link COLLAPSED_PREVIEW_LINES}: large enough never to cut the trimmed
- * body, so collapsed shows every file and the head of each preview.
+ * The outer data-first group must not cut off later files: code is trimmed by
+ * source line and Markdown is clamped by each file's native card after rendering.
  */
 const TRIMMED_BODY_PREVIEW = { lines: 1000 } as const;
 
@@ -174,9 +188,12 @@ const READ_STATUS_RANK: Record<ReadEntry["status"], number> = {
 	error: 3,
 };
 
-function getDisplayReadTargets(details: ReadToolDetails | undefined): ReadDisplayPathSpec[] | undefined {
+function getDisplayReadTargets(
+	details: ReadToolDetails | undefined,
+	rawDetails: ReadToolDetails | undefined,
+): ReadDisplayPathSpec[] | undefined {
 	if (!Array.isArray(details?.displayReadTargets)) return undefined;
-	const links = Array.isArray(details.displayReadTargetLinks) ? details.displayReadTargetLinks : undefined;
+	const links = Array.isArray(rawDetails?.displayReadTargetLinks) ? rawDetails.displayReadTargetLinks : undefined;
 	const targets: ReadDisplayPathSpec[] = [];
 	details.displayReadTargets.forEach((raw, index) => {
 		if (typeof raw !== "string") return;
@@ -423,12 +440,15 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		if (!toolCallId) return;
 		const rawPath =
 			typeof args.file_path === "string" ? args.file_path : typeof args.path === "string" ? args.path : "";
+		const displayPath = sanitizeText(rawPath);
 		const entry: ReadEntry = this.#entries.get(toolCallId) ?? {
 			toolCallId,
-			path: rawPath,
+			path: displayPath,
 			status: "pending",
 		};
-		entry.path = rawPath;
+		entry.path = displayPath;
+		entry.linkPath = path.isAbsolute(rawPath) ? rawPath : undefined;
+		entry.raw = args.raw === true;
 		this.#entries.set(toolCallId, entry);
 		this.#updateDisplay();
 	}
@@ -469,12 +489,15 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		if (!entry) return;
 		if (isPartial) return;
 		this.#blockVersion++;
-		const details = result.details as ReadToolDetails | undefined;
+		// `details` can contain raw file text and filesystem paths. Keep the
+		// latter for links while only the sanitized copy supplies display labels.
+		const rawDetails = result.details as ReadToolDetails | undefined;
+		const details = sanitizeTextDeep(rawDetails) as ReadToolDetails | undefined;
 		const suffixResolution = getSuffixResolution(details);
-		const displayPaths = getDisplayReadTargets(details);
-		entry.linkPath = readResultLinkPath(details);
+		const displayPaths = getDisplayReadTargets(details, rawDetails);
+		entry.linkPath = readResultLinkPath(rawDetails) ?? entry.linkPath;
 		if (suffixResolution) {
-			entry.path = displayPathWithSuffixResolution(entry.path, suffixResolution);
+			entry.path = sanitizeText(displayPathWithSuffixResolution(entry.path, suffixResolution));
 			entry.correctedFrom = suffixResolution.from;
 			entry.displayPaths = undefined;
 		} else {
@@ -485,6 +508,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 			typeof details?.conflictCount === "number" && details.conflictCount > 0 ? details.conflictCount : undefined;
 		entry.conflictCount = conflictCount;
 		entry.status = result.isError ? "error" : suffixResolution ? "warning" : "success";
+		entry.contentType = details?.contentType;
 		// Store clean display content for preview/expanded display when the read
 		// tool provides it; fall back to model-facing text for legacy results.
 		const displayContent = details?.displayContent;
@@ -578,8 +602,8 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	 * The read run as one inline `tool` on terminals that list the kind, else
 	 * the fallback: a bare `card` (role `zeta.tool.read`) with `Read <path>` or
 	 * `Read (N)` in the head, a `list` of path items (status tone, link,
-	 * correction and conflict detail, nested usage) and, with content previews
-	 * on, a `code` block per read clamped by the card's preview while collapsed.
+	 * correction and conflict detail, nested usage) and a clamped preview per
+	 * read when content previews are on.
 	 */
 	override describe(cx?: DescribeContext): NativeNode {
 		const dataFirst = cx?.supports("tool") === true;
@@ -593,8 +617,8 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	 * The data-first read (§7.3 read, read group, read error): one inline
 	 * `tool` (role `zeta.tool.read`). One file: `Read path:13-36`, a failure's
 	 * message in the head. Several: `Read 3 files` over one 22px row per file
-	 * (glyph, dim dir, strong name, range). Content previews are numbered
-	 * `code` (a section per file in a group), trimmed while collapsed.
+	 * (glyph, dim dir, strong name, range). Each content preview is numbered
+	 * code or rendered Markdown, clamped per file while collapsed.
 	 */
 	#describeTool(): NativeNode {
 		const entries = [...this.#entries.values()];
@@ -715,8 +739,21 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		);
 	}
 
-	/** One read's content as numbered `code`, trimmed to its first lines (plus a count) while collapsed. */
+	/** One read's content, clamped per file while the group is collapsed. */
 	#nativePreview(entry: ReadEntry): NativeChild[] {
+		if (previewsMarkdown(entry)) {
+			return [
+				card(
+					{
+						variant: "bare",
+						collapsible: true,
+						collapsed: !this.#expanded,
+						preview: { lines: COLLAPSED_PREVIEW_LINES },
+					},
+					[md(entry.contentText ?? "")],
+				),
+			];
+		}
 		const split = splitPathAndSel(entry.path);
 		const lines = (entry.contentText ?? "").split("\n");
 		const shown = this.#expanded ? lines.length : Math.min(lines.length, COLLAPSED_PREVIEW_LINES);
@@ -724,7 +761,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 			lines.slice(0, shown).join("\n"),
 			entry.codeStartLine ?? firstSelectorLine(split.sel) ?? 1,
 			entry.codeLineNumbers?.slice(0, shown),
-			getLanguageFromPath(split.path),
+			split.path,
 		);
 		const hidden = lines.length - shown;
 		if (hidden > 0) {
@@ -796,11 +833,14 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 						preview: { lines: COLLAPSED_PREVIEW_LINES },
 					},
 					[
-						code(entry.contentText ?? "", {
-							lang: getLanguageFromPath(split.path),
-							start: entry.codeStartLine,
-							numbers: true,
-						}),
+						previewsMarkdown(entry)
+							? md(entry.contentText ?? "")
+							: code(entry.contentText ?? "", {
+									path: split.path,
+									start: entry.codeStartLine,
+									numbers: true,
+									wrap: true,
+								}),
 					],
 					`p${entry.toolCallId}`,
 				),
@@ -862,7 +902,9 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 
 		// Clear previous children and rebuild the summary and preview blocks.
 		this.clear();
-		this.#text = new Text("", 0, 0);
+		this.#text = new Text("", 0, 0).setWrapLine(
+			(line, width) => wrapTreeLine(line, width, theme) ?? wrapTextWithAnsi(line, width),
+		);
 
 		if (displayRows.length === 0) {
 			this.#text.setText(` ${theme.format.bullet} ${theme.fg("toolTitle", theme.bold("Read"))}`);
@@ -1124,7 +1166,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	}
 
 	/**
-	 * Add a code-cell content preview below the entry summary.
+	 * Add a code-cell (or Markdown-cell) content preview below the entry summary.
 	 * When collapsed: shows first COLLAPSED_PREVIEW_LINES lines with a "… N more lines ⟨<key>: Expand⟩" hint.
 	 * When expanded: shows full content.
 	 */
@@ -1151,20 +1193,33 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		const component: Component = {
 			render: (width: number) => {
 				if (cachedLines && cachedWidth === width) return cachedLines;
-				cachedLines = renderCodeCell(
-					{
-						code: entry.contentText ?? "",
-						language: lang,
-						title,
-						status: entry.status === "success" ? "complete" : entry.status,
-						expanded,
-						codeMaxLines: expanded ? undefined : COLLAPSED_PREVIEW_LINES,
-						codeStartLine: entry.codeStartLine,
-						codeLineNumbers: entry.codeLineNumbers,
-						width,
-					},
-					theme,
-				);
+				const status = entry.status === "success" ? "complete" : entry.status;
+				cachedLines = previewsMarkdown(entry)
+					? renderMarkdownCell(
+							{
+								content: entry.contentText ?? "",
+								title,
+								status,
+								expanded,
+								contentMaxLines: COLLAPSED_PREVIEW_LINES,
+								width,
+							},
+							theme,
+						)
+					: renderCodeCell(
+							{
+								code: entry.contentText ?? "",
+								language: lang,
+								title,
+								status,
+								expanded,
+								codeMaxLines: expanded ? undefined : COLLAPSED_PREVIEW_LINES,
+								codeStartLine: entry.codeStartLine,
+								codeLineNumbers: entry.codeLineNumbers,
+								width,
+							},
+							theme,
+						);
 				cachedWidth = width;
 				return cachedLines;
 			},

package/src/chat/svg-figure.ts

@@ -17,7 +17,7 @@ import { hexToOklch, hueDistance, logger, oklchCusp, oklchToHex } from "@linxira
 import { Image, type ImageBudget, imageMaxColumns } from "../components/image";
 import { fencedCode, type Markdown } from "../components/markdown";
 import { type CellDimensions, getCellDimensions, getImageDimensions } from "../terminal-capabilities";
-import { getThemeEpoch, type ThemeColor, theme } from "../theme";
+import { ensureThemeSync, getThemeEpoch, type ThemeColor, theme } from "../theme";
 import type { Component } from "../tui";
 import { closePartialSvg, prepareSvg } from "./svg-source";
 
@@ -59,6 +59,7 @@ const SERIES_CHROMA = 0.19;
 
 /** The active theme's color per figure token, for resolving a figure with `prepareSvg`. */
 export function svgFigurePalette(): Record<string, string> {
+	ensureThemeSync();
 	const palette: Record<string, string> = { surface: theme.getBgHex("selectedBg") };
 	for (const token in PALETTE) palette[token] = theme.getColorHex(PALETTE[token]!);
 	seriesColors(palette.accent!, theme.isLight).forEach((color, at) => {
@@ -181,6 +182,7 @@ export class SvgFigure implements Component {
 	#placeholder: readonly string[] | undefined;
 
 	constructor(options: SvgFigureOptions) {
+		ensureThemeSync();
 		this.#options = options;
 	}
 

package/src/chat/svg-source.ts

@@ -35,9 +35,12 @@ export function splitSvgFences(markdown: string): FigureSegment[] {
 	let proseStart = 0;
 	let lineStart = 0;
 	while (lineStart <= markdown.length) {
-		const newline = markdown.indexOf("\n", lineStart);
-		const lineEnd = newline < 0 ? markdown.length : newline;
-		const next = newline < 0 ? markdown.length + 1 : newline + 1;
+		let lineEnd = lineStart;
+		while (lineEnd < markdown.length && markdown[lineEnd] !== "\n" && markdown[lineEnd] !== "\r") lineEnd++;
+		const next =
+			lineEnd === markdown.length
+				? markdown.length + 1
+				: lineEnd + (markdown[lineEnd] === "\r" && markdown[lineEnd + 1] === "\n" ? 2 : 1);
 		const line = markdown.slice(lineStart, lineEnd);
 		if (fence) {
 			if (closesFence(line, fence.marker)) {

package/src/chat/table-chart.d.ts

@@ -2,7 +2,6 @@ import type { Tokens } from "@linxiraos/pi-utils/marked";
 import { type ChartPlan } from "../charts/chart-plan";
 import { type TableAnalysis } from "../charts/table-data";
 import type { ImageBudget } from "../components/image";
-import type { NativeNode } from "../native/node";
 import type { Component } from "../tui";
 /**
  * `smart`: a model refines the local guess where meaning decides (kind,
@@ -24,17 +23,11 @@ export interface TableChartRequest {
  * for no chart. A rejection falls back to the local guess.
  */
 export type TableChartPlanner = (request: TableChartRequest) => Promise<ChartPlan | null>;
-/** A drawn chart, ready to resolve against the theme. */
-export interface TableChart {
-    /** SVG colored with figure tokens (`var(--accent)`, …). */
-    readonly svg: string;
-    readonly alt: string;
-    /** Size in SVG user units. */
-    readonly width: number;
-    readonly height: number;
-}
-/** The chart under a table: drawn, none, or a smart pick on its way (the promise settles once the cache holds it). */
-export type ChartLookup = TableChart | null | Promise<void>;
+/**
+ * The chart under a table: its SVG, colored with figure tokens (`var(--accent)`, …)
+ * still to resolve; none; or a smart pick on its way (the promise settles once the cache holds it).
+ */
+export type ChartLookup = string | null | Promise<void>;
 /** One run of a Markdown block: prose (ending at a charted table), or the chart drawn after that table. */
 export type ChartSegment = {
     readonly kind: "markdown";
@@ -60,10 +53,13 @@ export declare function splitTableCharts(markdown: string, streaming: boolean):
  */
 export declare function lookupTableChart(table: Tokens.Table): ChartLookup;
 /**
- * A native `image` node drawing `chart` from its SVG — no raster — resolved
- * against the active theme; rebuilt when the theme changes.
+ * Chart `svg` as a Markdown ```svg fence, for a TSP terminal's `md` node. Its
+ * figure tokens stay unresolved: the terminal draws the fence as a figure in
+ * the palette it shows the prose in, so the chart cannot fall out of step with
+ * the page when omp's own idea of the appearance does, and a theme switch
+ * recolors it without a resend.
  */
-export declare function describeTableChart(chart: TableChart, key: string): NativeNode;
+export declare function chartFence(svg: string): string;
 export interface TableChartFigureOptions {
     /** Shared inline-image budget. */
     budget?: ImageBudget;

package/src/chat/table-chart.ts

@@ -5,24 +5,19 @@
  * and draws that chart — locally under `always`, through the host's
  * model-backed {@link TableChartPlanner} under `smart` for the tables
  * {@link shouldJudge} picks — and caches it per table source. {@link TableChartFigure} shows it
- * as a rasterized terminal image; {@link describeTableChart} hands a TSP
- * terminal the SVG itself. Both resolve the figure tokens against the live
- * theme, so a chart follows theme switches like the prose around it.
+ * as a terminal image rasterized in omp's theme; {@link chartFence} hands a
+ * TSP terminal the SVG as an ```svg fence, which it draws in the palette it
+ * shows. Either way a chart follows theme switches like the prose around it.
  */
 import { logger } from "@linxiraos/pi-utils";
 import type { Token, Tokens } from "@linxiraos/pi-utils/marked";
 import { type ChartPlan, buildChart, planChart, shouldJudge, worthCharting } from "../charts/chart-plan";
-import { chartAlt, renderChartSvg } from "../charts/chart-svg";
+import { renderChartSvg } from "../charts/chart-svg";
 import { analyzeTable, type TableAnalysis } from "../charts/table-data";
 import type { ImageBudget } from "../components/image";
 import { lexDocument } from "../components/markdown";
-import { keyed } from "../native/describe";
-import { nativeImageNode } from "../native/blobs";
-import type { NativeNode } from "../native/node";
-import { getThemeEpoch } from "../theme";
 import type { Component } from "../tui";
-import { SvgFigure, svgFigurePalette } from "./svg-figure";
-import { prepareSvg } from "./svg-source";
+import { SvgFigure } from "./svg-figure";
 
 /**
  * `smart`: a model refines the local guess where meaning decides (kind,
@@ -47,18 +42,11 @@ export interface TableChartRequest {
  */
 export type TableChartPlanner = (request: TableChartRequest) => Promise<ChartPlan | null>;
 
-/** A drawn chart, ready to resolve against the theme. */
-export interface TableChart {
-	/** SVG colored with figure tokens (`var(--accent)`, …). */
-	readonly svg: string;
-	readonly alt: string;
-	/** Size in SVG user units. */
-	readonly width: number;
-	readonly height: number;
-}
-
-/** The chart under a table: drawn, none, or a smart pick on its way (the promise settles once the cache holds it). */
-export type ChartLookup = TableChart | null | Promise<void>;
+/**
+ * The chart under a table: its SVG, colored with figure tokens (`var(--accent)`, …)
+ * still to resolve; none; or a smart pick on its way (the promise settles once the cache holds it).
+ */
+export type ChartLookup = string | null | Promise<void>;
 
 /** One run of a Markdown block: prose (ending at a charted table), or the chart drawn after that table. */
 export type ChartSegment =
@@ -67,8 +55,6 @@ export type ChartSegment =
 
 /** Tables cached per source; a long session keeps its recent charts without growing without bound. */
 const CACHE_LIMIT = 256;
-/** SVG user units per terminal column (16 per row on 1:2 cells), sizing native images. */
-const UNITS_PER_COLUMN = 8;
 /** A GFM delimiter row (`|---|:--:|`), the cheap test before lexing a block. */
 const DELIMITER_ROW = /^ {0,3}\|?[ \t]*:?-+:?[ \t]*\|/m;
 
@@ -78,20 +64,14 @@ interface ChartEntry {
 	readonly guess: ChartPlan | undefined;
 	/** The host's planner picks this table's chart. */
 	readonly smart: boolean;
-	/** `undefined` until drawn (or judged chartless). */
-	chart?: TableChart | null;
+	/** The chart's SVG; `undefined` until drawn (or judged chartless). */
+	chart?: string | null;
 	pending?: Promise<void>;
 }
 
 let chartMode: TableChartMode = "off";
 let chartPlanner: TableChartPlanner | undefined;
 const charts = new Map<string, ChartEntry>();
-/** The theme-resolved image node owning a chart's native bytes. */
-const kNativeImage = Symbol("tableChart.nativeImage");
-
-interface NativeTagged extends TableChart {
-	[kNativeImage]?: { epoch: number; image: NativeNode };
-}
 
 /** Set how tables become charts (the host's `tui.autoGraph`) and its `smart` planner; the host rebuilds the transcript after. */
 export function setTableCharts(mode: TableChartMode, planner?: TableChartPlanner): void {
@@ -188,34 +168,21 @@ function chartEntry(table: Tokens.Table): ChartEntry {
  * Draw `plan`. A guess must also pass {@link worthCharting}; a model's pick
  * already judged the chart worth drawing.
  */
-function drawChart(analysis: TableAnalysis, plan: ChartPlan, guessed = false): TableChart | null {
+function drawChart(analysis: TableAnalysis, plan: ChartPlan, guessed = false): string | null {
 	const spec = buildChart(analysis, plan);
 	if (!spec || (guessed && !worthCharting(spec))) return null;
-	return { ...renderChartSvg(spec), alt: chartAlt(spec) };
+	return renderChartSvg(spec);
 }
 
 /**
- * A native `image` node drawing `chart` from its SVG — no raster — resolved
- * against the active theme; rebuilt when the theme changes.
+ * Chart `svg` as a Markdown ```svg fence, for a TSP terminal's `md` node. Its
+ * figure tokens stay unresolved: the terminal draws the fence as a figure in
+ * the palette it shows the prose in, so the chart cannot fall out of step with
+ * the page when omp's own idea of the appearance does, and a theme switch
+ * recolors it without a resend.
  */
-export function describeTableChart(chart: TableChart, key: string): NativeNode {
-	const epoch = getThemeEpoch();
-	const tagged: NativeTagged = chart;
-	let entry = tagged[kNativeImage];
-	if (entry?.epoch !== epoch) {
-		const svg = prepareSvg(chart.svg, svgFigurePalette());
-		entry = {
-			epoch,
-			image: nativeImageNode(new TextEncoder().encode(svg), "image/svg+xml", {
-				alt: chart.alt,
-				w: chart.width,
-				h: chart.height,
-				max: { w: `${Math.round(chart.width / UNITS_PER_COLUMN)}ch` },
-			}),
-		};
-		tagged[kNativeImage] = entry;
-	}
-	return keyed(entry.image, key);
+export function chartFence(svg: string): string {
+	return `\`\`\`svg\n${svg}\n\`\`\``;
 }
 
 export interface TableChartFigureOptions {
@@ -235,8 +202,8 @@ export class TableChartFigure implements Component {
 	readonly #options: TableChartFigureOptions;
 	readonly #figure: SvgFigure;
 	#table: Tokens.Table | undefined;
-	/** `undefined` while not looked up or waiting for a pick. */
-	#chart: TableChart | null | undefined;
+	/** The chart's SVG; `undefined` while not looked up or waiting for a pick. */
+	#chart: string | null | undefined;
 	#waiting = false;
 	#disposed = false;
 
@@ -289,6 +256,6 @@ export class TableChartFigure implements Component {
 			return;
 		}
 		this.#chart = found;
-		if (found) this.#figure.update(found.svg, true);
+		if (found) this.#figure.update(found, true);
 	}
 }

package/src/chat/tool-execution.d.ts

@@ -17,19 +17,21 @@ export interface ToolExecutionOptions {
     /** Allow the name-keyed renderer registry only when the active tool is the built-in implementation. */
     useBuiltInRenderer?: boolean;
 }
+/** A tool result or progress frame as a card shows it. */
+export interface ToolResultFrame {
+    content: Array<{
+        type: string;
+        text?: string;
+        data?: string;
+        mimeType?: string;
+    }>;
+    details?: unknown;
+    isError?: boolean;
+}
 export interface ToolExecutionHandle extends Component {
     updateArgs(args: unknown, toolCallId?: string): void;
     updateStreamPreview?(update: unknown): void;
-    updateResult(result: {
-        content: Array<{
-            type: string;
-            text?: string;
-            data?: string;
-            mimeType?: string;
-        }>;
-        details?: unknown;
-        isError?: boolean;
-    }, isPartial?: boolean, toolCallId?: string): void;
+    updateResult(result: ToolResultFrame, isPartial?: boolean, toolCallId?: string): void;
     setArgsComplete(toolCallId?: string): void;
     setExecutionStarted(toolCallId?: string): void;
     setExpanded(expanded: boolean): void;
@@ -39,6 +41,25 @@ export interface ToolExecutionHandle extends Component {
     /** Seal the block as final history and stop its animations. */
     seal(): void;
 }
+/**
+ * Whether a call that returned with `details.async.state === "running"` stays
+ * parked ({@link ToolExecutionHandle.parkAsBackground}) so its job's later
+ * frames keep filling the card until a `completed`/`failed` frame settles it.
+ * Detached `task` spawns always do; backgrounded `bash`/`eval` jobs only under
+ * native rendering, where the terminal transcript keeps them frozen instead.
+ * Shared by the live event controller and the transcript rebuild.
+ */
+export declare function parksAsBackground(toolName: string, details: unknown): boolean;
+/** The background job state a tool result reports (`details.async.state`: running, completed, failed, cancelled). */
+export declare function asyncJobState(details: unknown): string | undefined;
+/** Whether a frame is a background job's last one: it completed, failed or was cancelled. */
+export declare function isSettledJobFrame(details: unknown): boolean;
+/**
+ * Settle a parked card ({@link parksAsBackground}) with its job's last frame
+ * ({@link isSettledJobFrame}): a completed or failed job is the call's result;
+ * a cancelled one keeps the output it got to and seals the card as cancelled.
+ */
+export declare function settleWithJobFrame(component: ToolExecutionHandle, frame: ToolResultFrame, toolCallId: string): void;
 /** Phase-locked spinner glyph index shared by every live tool block so parallel
  * spinners advance in lockstep instead of each tracking its own start time. */
 export declare function sharedSpinnerFrame(frameCount: number, now?: number): number;
@@ -74,16 +95,7 @@ export declare class ToolExecutionComponent extends Container {
      */
     whenPreviewSettled(timeoutMs?: number): Promise<void>;
     updateStreamPreview(update: unknown): void;
-    updateResult(result: {
-        content: Array<{
-            type: string;
-            text?: string;
-            data?: string;
-            mimeType?: string;
-        }>;
-        details?: unknown;
-        isError?: boolean;
-    }, isPartial?: boolean, _toolCallId?: string): void;
+    updateResult(result: ToolResultFrame, isPartial?: boolean, _toolCallId?: string): void;
     /**
      * Advance to the shared spinner glyph and repaint just this block. Driven by
      * the single shared spinner ticker (see `registerSpinnerBlock`); the tick is