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

package/src/chat/assistant-message.ts

@@ -27,6 +27,10 @@ import { type ServedModelMismatch, ServedModelMarkerComponent } from "./served-m
 import { isReactionTarget, type ReactionSplit, type ReactionTarget, splitReaction } from "./reaction";
 import { isRowPrefix, type TranscriptStableRow, trimBlankEdges } from "../chrome/transcript-container";
 import { formatTurnUsage, type TurnUsageSummary } from "../overlays/usage-row";
+import { FigureMarkdown } from "./figure-markdown";
+import { svgFigureRendering } from "./svg-figure";
+import { hasSvgFence } from "./svg-source";
+import { describeTableChart, hasChartTable, lookupTableChart, splitTableCharts } from "./table-chart";
 
 /**
  * Max wrapped rows of a turn-ending provider error rendered inline in the
@@ -46,6 +50,15 @@ function thoughtLabel(clock: { start: number; end?: number } | undefined): strin
 }
 
 type ThinkingContentBlock = Extract<AssistantMessage["content"][number], { type: "thinking" }>;
+/** Renders one text or thinking block: Markdown, or {@link FigureMarkdown} for text holding a ```svg fence. */
+type ProseBlock = Markdown | FigureMarkdown;
+/** A streamed block the fast path updates in place. */
+interface FastPathItem {
+	md: ProseBlock;
+	contentIndex: number;
+	blockType: "text" | "thinking";
+	lastText: string;
+}
 type DisplayThinkingContentBlock = ThinkingContentBlock & { rawThinking?: string };
 type StablePartKind = "thinking" | "text";
 type StablePart = { kind: StablePartKind; text: string } | { kind: "spacer" };
@@ -230,7 +243,7 @@ export class AssistantMessageComponent extends Container {
 	#cacheMarker?: CacheInvalidationMarkerComponent;
 	#servedModelMarker?: ServedModelMarkerComponent;
 	#lastMessage?: AssistantMessage;
-	#emergencyText?: Markdown;
+	#emergencyText?: ProseBlock;
 	#toolImagesByCallId = new Map<string, ImageContent[]>();
 	/**
 	 * Payload keys ({@link imagePayloadKey}) whose Kitty PNG conversion this
@@ -246,6 +259,8 @@ export class AssistantMessageComponent extends Container {
 	#kittyConverted = new Map<string, ImageContent>();
 	#showImages = true;
 	#showToolResultImages = true;
+	/** Charts under numeric tables; off for subagent transcripts. */
+	#showTableCharts = true;
 	#transcriptBlockFinalized: boolean;
 	/** See {@link setMidStreamPublication}; the wire's `stream-revision` axis decides it. */
 	#midStreamPublication = true;
@@ -293,9 +308,13 @@ export class AssistantMessageComponent extends Container {
 	#lastUpdateTransient = false;
 	// Fast-path state: reuse Markdown children when message shape is stable during streaming.
 	#fastPathKey: string | undefined;
-	#fastPathItems:
-		| Array<{ md: Markdown; contentIndex: number; blockType: "text" | "thinking"; lastText: string }>
-		| undefined;
+	#fastPathItems: FastPathItem[] | undefined;
+	/**
+	 * Text blocks whose ```svg fences are lifted into figures, by content index.
+	 * Kept across slow-path rebuilds so a figure keeps its raster (and its
+	 * in-flight one) instead of starting over on every update.
+	 */
+	#figureBlocks = new Map<number, FigureMarkdown>();
 	/** Live "thinking" pulse shown in place of a hidden thinking block while it
 	 *  streams; undefined when not animating. Driven by {@link #thinkingDotsTimer}. */
 	#thinkingDots: Text | undefined;
@@ -356,6 +375,8 @@ export class AssistantMessageComponent extends Container {
 	/** Markdown nodes by key, reused while their text and streaming flag are unchanged. */
 	#nativeParts = new Map<string, { text: string; stream: boolean; node: NativeNode }>();
 	readonly #nativeImages = new NativeImageCache();
+	/** Smart table chart picks a TSP describe is waiting on. */
+	readonly #chartPicks = new Set<Promise<void>>();
 
 	setTextColorTransform(transform?: (text: string) => string): void {
 		this.#textColorTransform = transform;
@@ -387,6 +408,7 @@ export class AssistantMessageComponent extends Container {
 		this.#markdownTheme = undefined;
 		this.#fastPathKey = undefined;
 		this.#fastPathItems = undefined;
+		for (const block of this.#figureBlocks.values()) block.restyle();
 		if (this.#lastMessage) {
 			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
 		}
@@ -537,6 +559,7 @@ export class AssistantMessageComponent extends Container {
 		this.#markdownTheme = undefined;
 		this.#fastPathKey = undefined;
 		this.#fastPathItems = undefined;
+		for (const block of this.#figureBlocks.values()) block.restyle();
 		if (this.#lastMessage) {
 			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
 		}
@@ -713,6 +736,12 @@ export class AssistantMessageComponent extends Container {
 		return this.#transcriptBlockFinalized;
 	}
 
+	/** Whether a figure still waits for the raster of its final source; the transcript holds retirement meanwhile. */
+	isTranscriptBlockPending(): boolean {
+		for (const block of this.#figureBlocks.values()) if (block.pending) return true;
+		return false;
+	}
+
 	override render(width: number): readonly string[] {
 		const rows = super.render(width);
 		this.#publishStableSnapshot(rows, width);
@@ -806,7 +835,25 @@ export class AssistantMessageComponent extends Container {
 				const content = message.content[index]!;
 				const streaming = live && index === tailIndex;
 				if (content.type === "text" && canonicalizeMessage(content.text)) {
-					children.push(markdown(`t${index}`, `t${index}`, content.text.trim(), streaming));
+					const source = content.text.trim();
+					if (!this.#showImages || !this.#showTableCharts || !hasChartTable(source)) {
+						children.push(markdown(`t${index}`, `t${index}`, source, streaming));
+						continue;
+					}
+					// A chart follows its table as an SVG image node; the prose splits around it.
+					const segments = splitTableCharts(source, streaming);
+					segments.forEach((segment, part) => {
+						const slot = part === 0 ? `t${index}` : `t${index}.${part}`;
+						if (segment.kind === "markdown") {
+							children.push(
+								markdown(slot, slot, segment.text.trim(), streaming && part === segments.length - 1),
+							);
+							return;
+						}
+						const chart = lookupTableChart(segment.table);
+						if (chart instanceof Promise) this.#awaitChart(chart);
+						else if (chart) children.push(describeTableChart(chart, slot));
+					});
 				} else if (content.type === "thinking") {
 					const display = resolveThinkingDisplay(content, this.#proseOnlyThinking);
 					if (!display.visible) continue;
@@ -1089,12 +1136,18 @@ export class AssistantMessageComponent extends Container {
 		for (const child of this.#contentContainer.children) {
 			const item = items[itemIndex];
 			if (item?.md === child) {
+				const md = item.md;
+				if (md instanceof FigureMarkdown) {
+					// Plain Markdown reproduces only the prose ahead of the first figure.
+					if (md.leadingProse) parts.push({ kind: item.blockType, text: md.leadingProse });
+					break;
+				}
 				if (itemIndex === items.length - 1) {
 					// Streaming child: publish Markdown's frozen prefix, and only
 					// once non-blank content exists past it — the block's last
 					// non-blank line is still being written (thinking's prose fold
 					// may rewrite it) and must stay out of published bytes.
-					const raw = item.md.getLastRenderStableText();
+					const raw = md.getLastRenderStableText();
 					const frozen = raw.trim();
 					if (frozen.length > 0 && /\S/.test(item.lastText.slice(raw.length))) {
 						parts.push({ kind: item.blockType, text: frozen });
@@ -1122,7 +1175,7 @@ export class AssistantMessageComponent extends Container {
 	/**
 	 * Render the first `partCount` stable parts, the final one cut to
 	 * `lastLength`. Rows match fresh Markdown renders of each part byte for
-	 * byte — {@link #createStableMarkdown} mirrors the live children — but a
+	 * byte — {@link #createMarkdown} builds the live children too — but a
 	 * closed part renders once per width, and the growing final part reuses one
 	 * Markdown instance so its already-frozen blocks are not re-lexed.
 	 */
@@ -1172,7 +1225,7 @@ export class AssistantMessageComponent extends Container {
 		// Trim like the live children, dropping the trailing blank line a frozen
 		// prefix still carries.
 		const trimmed = text.trim();
-		if (this.#transcriptBlockFinalized) return this.#createStableMarkdown(kind, trimmed).render(width);
+		if (this.#transcriptBlockFinalized) return this.#createMarkdown(kind, trimmed).render(width);
 		const head = this.#stableHeadRenderer;
 		const replay = this.#stableReplayRenderer;
 		const renderer = role === "head" ? head : role === "replay" ? replay : head?.index === index ? head : replay;
@@ -1180,14 +1233,14 @@ export class AssistantMessageComponent extends Container {
 			renderer.md.setText(trimmed);
 			return renderer.md.render(width);
 		}
-		const md = this.#createStableMarkdown(kind, trimmed);
+		const md = this.#createMarkdown(kind, trimmed);
 		if (role === "head") this.#stableHeadRenderer = { index, kind, md };
 		else if (role === "replay") this.#stableReplayRenderer = { index, kind, md };
 		return md.render(width);
 	}
 
-	/** Constructor args mirror the live child Markdown so stable rows prefix the block render. */
-	#createStableMarkdown(kind: StablePartKind, text: string): Markdown {
+	/** Markdown for a text or thinking block; live children and stable-row renders share it so stable rows prefix the block render. */
+	#createMarkdown(kind: StablePartKind, text: string): Markdown {
 		return kind === "text"
 			? new Markdown(
 					text,
@@ -1203,6 +1256,58 @@ export class AssistantMessageComponent extends Container {
 				});
 	}
 
+	/**
+	 * Whether `text` holds a ```svg fence this terminal draws as a figure, or a
+	 * table it draws a chart under. Native (TSP) terminals receive the fence
+	 * verbatim in the `md` node and draw it themselves, and get charts as image
+	 * nodes from {@link describe}; image-less terminals keep fences as code and
+	 * tables as tables.
+	 */
+	#liftsFigures(text: string): boolean {
+		return (
+			this.#showImages &&
+			TERMINAL.imageProtocol !== null &&
+			!isNativeRendering() &&
+			((svgFigureRendering() && hasSvgFence(text)) || (this.#showTableCharts && hasChartTable(text)))
+		);
+	}
+
+	/** Re-describe once a smart table chart pick lands. */
+	#awaitChart(pick: Promise<void>): void {
+		if (this.#chartPicks.has(pick)) return;
+		this.#chartPicks.add(pick);
+		void pick.then(() => {
+			this.#chartPicks.delete(pick);
+			this.#blockVersion++;
+			this.#onImageUpdate?.();
+		});
+	}
+
+	/**
+	 * The component for text block `index`: Markdown, or a {@link FigureMarkdown}
+	 * when it holds a ```svg fence to lift or a table to chart — taken over from
+	 * `previous` so its figures keep their rasters across rebuilds.
+	 */
+	#proseBlock(index: number, text: string, previous: ReadonlyMap<number, FigureMarkdown>): ProseBlock {
+		if (!this.#liftsFigures(text)) return this.#createMarkdown("text", text);
+		let block = previous.get(index);
+		if (block) {
+			block.setText(text);
+		} else {
+			block = new FigureMarkdown(text, {
+				markdown: value => this.#createMarkdown("text", value),
+				charts: this.#showTableCharts,
+				budget: this.#imageBudget,
+				onChange: () => {
+					this.#blockVersion++;
+					this.#onImageUpdate?.();
+				},
+			});
+		}
+		this.#figureBlocks.set(index, block);
+		return block;
+	}
+
 	#stableLedger(width: number): StableRowLedger {
 		let ledger = this.#stableLedgers.get(width);
 		if (ledger === undefined) {
@@ -1322,6 +1427,18 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 
+	/** Toggle charts under numeric tables (the main session's transcript only, never a subagent's). */
+	setTableChartsVisible(visible: boolean): void {
+		if (this.#showTableCharts === visible) return;
+		this.#showTableCharts = visible;
+		// Figure blocks bake the switch in; rebuild them rather than reuse.
+		for (const block of this.#figureBlocks.values()) block.dispose();
+		this.#figureBlocks.clear();
+		if (this.#lastMessage) {
+			this.updateContent(this.#lastMessage, { transient: this.#lastUpdateTransient });
+		}
+	}
+
 	/** Toggle only images produced by tool results; assistant-native images remain governed by setImagesVisible. */
 	setToolResultImagesVisible(visible: boolean): void {
 		if (this.#showToolResultImages === visible) return;
@@ -1440,7 +1557,9 @@ export class AssistantMessageComponent extends Container {
 		];
 		for (const content of message.content) {
 			if (content.type === "text") {
-				parts.push(canonicalizeMessage(content.text) ? "T1" : "T0");
+				parts.push(
+					!canonicalizeMessage(content.text) ? "T0" : this.#liftsFigures(content.text.trim()) ? "TF" : "T1",
+				);
 			} else if (content.type === "thinking") {
 				if (this.#hideThinkingBlock) {
 					// Match the pulse's empty/nonempty transition without formatting hidden text.
@@ -1601,9 +1720,9 @@ export class AssistantMessageComponent extends Container {
 
 		// Determine if we should capture Markdown instances for next fast path
 		const shouldCapture = this.#canFastPath(message);
-		const captureItems:
-			| Array<{ md: Markdown; contentIndex: number; blockType: "text" | "thinking"; lastText: string }>
-			| undefined = shouldCapture ? [] : undefined;
+		const captureItems: FastPathItem[] | undefined = shouldCapture ? [] : undefined;
+		const previousFigures = this.#figureBlocks;
+		this.#figureBlocks = new Map();
 
 		const hasVisibleContent = message.content.some(
 			c =>
@@ -1622,8 +1741,7 @@ export class AssistantMessageComponent extends Container {
 			if (content.type === "text" && canonicalizeMessage(content.text)) {
 				// Set paddingY=0 to avoid extra spacing before tool executions
 				const trimmed = content.text.trim();
-				const mdOptions = this.#textColorTransform ? { color: this.#textColorTransform } : undefined;
-				const md = new Markdown(trimmed, 1, 0, this.#getProseTheme(), mdOptions, 0);
+				const md = this.#proseBlock(i, trimmed, previousFigures);
 				this.#contentContainer.addChild(md);
 				this.#emergencyText = md;
 				captureItems?.push({ md, contentIndex: i, blockType: "text", lastText: trimmed });
@@ -1648,10 +1766,7 @@ export class AssistantMessageComponent extends Container {
 					);
 
 				// Thinking traces in thinkingText color, italic
-				const md = new Markdown(thinkingText, 1, 0, getMarkdownTheme(), {
-					color: (text: string) => theme.fg("thinkingText", text),
-					italic: true,
-				});
+				const md = this.#createMarkdown("thinking", thinkingText);
 				md.transientRenderCache = this.#lastUpdateTransient;
 				this.#contentContainer.addChild(md);
 				captureItems?.push({ md, contentIndex: i, blockType: "thinking", lastText: thinkingText });
@@ -1666,6 +1781,9 @@ export class AssistantMessageComponent extends Container {
 				hasRenderedContent ||= this.#showImages;
 			}
 		}
+		for (const [index, block] of previousFigures) {
+			if (this.#figureBlocks.get(index) !== block) block.dispose();
+		}
 
 		if (this.#shouldAnimateThinking(message)) {
 			if (hasVisibleContent) this.#contentContainer.addChild(new Spacer(1));

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

@@ -83,6 +83,8 @@ export interface ChatTranscriptBuilderDeps {
 	expandThinkingBlocks?: () => boolean;
 	/** Session-scoped resolved destinations for model-authored Markdown links. */
 	linkTargets?: ReadonlyMap<string, string>;
+	/** Draw charts under numeric tables; false for transcripts that are not the main session's. Default: true. */
+	tableCharts?: boolean;
 	requestRender: () => void;
 }
 
@@ -419,6 +421,7 @@ export class ChatTranscriptBuilder {
 		);
 		assistantComponent.setImagesVisible(displayPreferences.showImages);
 		assistantComponent.setToolResultImagesVisible(!displayPreferences.hideToolActivity);
+		assistantComponent.setTableChartsVisible(this.#deps.tableCharts !== false);
 		this.#trackExpandable(assistantComponent);
 		assistantComponent.pickReactionTarget(this.container.children);
 		this.container.addChild(assistantComponent);
@@ -457,6 +460,7 @@ export class ChatTranscriptBuilder {
 			);
 			component.setImagesVisible(displayPreferences.showImages);
 			component.setToolResultImagesVisible(!displayPreferences.hideToolActivity);
+			component.setTableChartsVisible(this.#deps.tableCharts !== false);
 			this.#trackExpandable(component);
 			this.container.addChild(component);
 			lastAssistantComponent = component;

package/src/chat/figure-markdown.ts

@@ -0,0 +1,174 @@
+import type { Tokens } from "@oh-my-pi/pi-utils/marked";
+import type { ImageBudget } from "../components/image";
+import type { Markdown } from "../components/markdown";
+import { Spacer } from "../components/spacer";
+import { Container } from "../tui";
+import { SvgFigure, svgFigureRendering } from "./svg-figure";
+import { type FigureSegment, splitSvgFences } from "./svg-source";
+import { type ChartSegment, hasChartTable, splitTableCharts, TableChartFigure } from "./table-chart";
+
+export interface FigureMarkdownOptions {
+	/** Markdown for one prose run (and a failed figure's code fallback); FigureMarkdown drives its transience. */
+	markdown: (text: string) => Markdown;
+	/** Draw charts under numeric tables; off for transcripts that are not the main session's. */
+	charts: boolean;
+	/** Shared inline-image budget for the figures. */
+	budget?: ImageBudget;
+	/** A figure's rows changed outside a text update (raster landed, fell back to code). */
+	onChange: () => void;
+}
+
+type Part =
+	| { readonly kind: "markdown"; readonly md: Markdown; text: string }
+	| { readonly kind: "svg"; readonly figure: SvgFigure; source: string; closed: boolean }
+	| { readonly kind: "chart"; readonly figure: TableChartFigure; table: Tokens.Table };
+
+/**
+ * Assistant Markdown whose top-level ```svg fences are lifted out of the prose
+ * and drawn as images ({@link SvgFigure}), and whose numeric tables get a chart
+ * drawn under them ({@link TableChartFigure}), with ordinary {@link Markdown}
+ * for the prose between them. Stands in for Markdown on an assistant text
+ * block that holds an svg fence or a chartable table: {@link setText} streams
+ * in place, reusing every part whose kind is unchanged, and
+ * {@link transientRenderCache} marks the block's tail as still streaming — the
+ * last prose run renders transient, the last figure throttles its rasters
+ * until its fence closes, and a table at the tail waits for its last row.
+ */
+export class FigureMarkdown extends Container {
+	readonly #options: FigureMarkdownOptions;
+	#text = "";
+	#transient = false;
+	#parts: Part[] = [];
+
+	constructor(text: string, options: FigureMarkdownOptions) {
+		super();
+		this.#options = options;
+		this.setText(text);
+	}
+
+	/** Replace the source; returns whether it changed. */
+	setText(text: string): boolean {
+		if (text === this.#text) return false;
+		this.#text = text;
+		this.#reconcile();
+		return true;
+	}
+
+	get transientRenderCache(): boolean {
+		return this.#transient;
+	}
+
+	set transientRenderCache(value: boolean) {
+		if (this.#transient === value) return;
+		this.#transient = value;
+		// The end of the stream completes a tail table, which may now get its chart.
+		this.#reconcile();
+	}
+
+	/**
+	 * The trimmed prose ahead of the first figure, or "" when the block opens
+	 * with one. These are the only rows plain Markdown reproduces byte for
+	 * byte, so they are all a transcript may publish ahead of the figure.
+	 */
+	get leadingProse(): string {
+		const first = this.#parts[0];
+		return first?.kind === "markdown" ? first.text : "";
+	}
+
+	/** Whether a figure's final source still waits for its raster, or a chart for its pick or raster. */
+	get pending(): boolean {
+		return this.#parts.some(part => part.kind !== "markdown" && part.figure.pending);
+	}
+
+	/** Rebuild the prose runs through the Markdown factory after its theme changed; figures keep their rasters. */
+	restyle(): void {
+		this.#parts = this.#parts.map(part =>
+			part.kind === "markdown" ? { kind: "markdown", md: this.#options.markdown(part.text), text: part.text } : part,
+		);
+		this.#mount();
+		this.#syncTails();
+	}
+
+	#reconcile(): void {
+		const previous = this.#parts;
+		const segments = this.#segments();
+		let reshaped = previous.length !== segments.length;
+		this.#parts = segments.map((segment, index): Part => {
+			const old = previous[index];
+			if (segment.kind === "chart") {
+				if (old?.kind === "chart") {
+					old.table = segment.table;
+					return old;
+				}
+				reshaped = true;
+				const { budget, onChange } = this.#options;
+				return { kind: "chart", figure: new TableChartFigure({ budget, onChange }), table: segment.table };
+			}
+			if (segment.kind === "markdown") {
+				const text = segment.text.trim();
+				if (old?.kind === "markdown") {
+					old.md.setText(text);
+					old.text = text;
+					return old;
+				}
+				reshaped = true;
+				return { kind: "markdown", md: this.#options.markdown(text), text };
+			}
+			if (old?.kind === "svg") {
+				old.source = segment.source;
+				old.closed = segment.closed;
+				return old;
+			}
+			reshaped = true;
+			const { markdown, budget, onChange } = this.#options;
+			return {
+				kind: "svg",
+				figure: new SvgFigure({ markdown, budget, onChange }),
+				source: segment.source,
+				closed: segment.closed,
+			};
+		});
+		if (reshaped) {
+			for (const old of previous) {
+				if (old.kind !== "markdown" && !this.#parts.includes(old)) old.figure.dispose();
+			}
+			this.#mount();
+		}
+		this.#syncTails();
+	}
+
+	/**
+	 * The block as prose, ```svg fences (when figures are on) and charts after
+	 * complete tables (when charts are on); only the last run can still stream.
+	 */
+	#segments(): (FigureSegment | ChartSegment)[] {
+		const fences: FigureSegment[] = svgFigureRendering()
+			? splitSvgFences(this.#text)
+			: [{ kind: "markdown", text: this.#text }];
+		if (!this.#options.charts || !hasChartTable(this.#text)) return fences;
+		const last = fences.length - 1;
+		return fences.flatMap((segment, index): (FigureSegment | ChartSegment)[] =>
+			segment.kind === "markdown" ? splitTableCharts(segment.text, this.#transient && index === last) : [segment],
+		);
+	}
+
+	/** Mount the parts as children, a blank row between neighbours; a chart draws its own when it has rows. */
+	#mount(): void {
+		this.clear();
+		this.#parts.forEach((part, index) => {
+			if (index > 0 && part.kind !== "chart") this.addChild(new Spacer(1));
+			this.addChild(part.kind === "markdown" ? part.md : part.figure);
+		});
+	}
+
+	/** Push sources and streaming state down: only the last part can still be streaming. */
+	#syncTails(): void {
+		const last = this.#parts.length - 1;
+		this.#parts.forEach((part, index) => {
+			const streaming = this.#transient && index === last;
+			if (part.kind === "markdown") part.md.transientRenderCache = streaming;
+			else if (part.kind === "svg") part.figure.update(part.source, part.closed || !streaming);
+			else part.figure.update(part.table);
+		});
+	}
+}