@linxiraos/pi-tui 1.1.27 → 1.2.0

package/src/chat/execution-shared.ts

@@ -20,6 +20,7 @@ import { DEFAULT_TERMINAL_PREVIEW_LINES, expandKeyHint } from "../render/render-
 import type { TspCardStatus, TspSpan, TspText, TspTone } from "@linxiraos/pi-wire";
 import { card, node, span, text } from "../native/describe";
 import type { NativeChild, NativeNode } from "../native/node";
+import { runBox, runFoot, runInput, runOutput, type RunState } from "../tools/native-view";
 
 /** Output rows shown while an execution is collapsed. */
 export const PREVIEW_LINES = 20;
@@ -190,7 +191,7 @@ export interface ExecutionToolInput {
 	/** Tool name for the head icon (`bash`, `eval`). */
 	readonly name: string;
 	readonly title: string;
-	/** The command / cell source, shown once in the head. */
+	/** The command / cell source: the run box's input and the head's Copy command. */
 	readonly command: string;
 	readonly lang: string;
 	/** Excluded from context (`!!`/`$$`). */
@@ -208,39 +209,55 @@ export interface ExecutionToolInput {
 	readonly artifactError?: OutputArtifactError;
 }
 
+const EXECUTION_RUN_STATE: Record<ExecutionStatus, RunState> = {
+	running: "running",
+	complete: "done",
+	cancelled: "cancelled",
+	error: "failed",
+};
+
 /**
- * A user `!`/`$` run as the agent's `tool` frame (§6.6): the command in the
- * head with a `you` badge (plus `not sent` when excluded from context), the
- * timer, exit chip and cancelled note; the body is the output as an `ansi`
- * mini terminal following its tail, then one quiet truncation line.
+ * A user `!`/`$` run as the agent's `tool` frame (§6.6): a head with a `you`
+ * badge (plus `not sent` when excluded from context) and the command for Copy
+ * command; the body is one run box — the source, the output as an `ansi` mini
+ * terminal following its tail, and the foot (state, time, truncation) — with
+ * any images below it. Timer, exit chip and cancelled note stay head data.
  */
 export function describeExecutionTool(input: ExecutionToolInput): NativeNode {
 	const running = input.status === "running";
-	const body: NativeChild[] = [];
-	if (input.output) body.push(node("ansi", { text: input.output, follow: running }, undefined, "output"));
-	if (input.images) body.push(...input.images);
-	const notes: string[] = [];
-	if (input.truncation) notes.push(formatTruncationMetaNotice(input.truncation));
-	if (input.artifactError) notes.push(formatArtifactErrorNotice(input.artifactError));
-	if (notes.length > 0) {
-		body.push({
-			...text([span(notes.join(" · "), "muted")], { wrap: "word", role: "zeta.tool.notice" }),
-			key: "foot",
-		});
-	}
+	const shell = input.name === "bash";
 	const ms = Math.max(0, Math.round((input.endedAt ?? performance.now()) - input.startedAt));
+	const state = EXECUTION_RUN_STATE[input.status];
+	const box = runBox(
+		[
+			runInput(input.command, {
+				role: shell ? "zeta.tool.bash.command" : "zeta.tool.eval.input",
+				lang: input.lang,
+				wrap: shell,
+			}),
+			input.output.length > 0 &&
+				runOutput(input.output, {
+					role: shell ? "zeta.tool.bash.output" : "zeta.tool.eval.output",
+					previewLines: DEFAULT_TERMINAL_PREVIEW_LINES,
+				}),
+			runFoot({
+				state,
+				exitCode: input.exitCode,
+				elapsedMs: ms,
+				meta: { truncation: input.truncation, artifactError: input.artifactError },
+			}),
+		],
+		{ key: "run", tone: state === "failed" ? "error" : undefined },
+	);
 	const badges: { text: string; tone?: TspTone; title?: string }[] = [{ text: "you", tone: "user" }];
 	if (input.excluded) badges.push({ text: "not sent", title: "Not sent to the model", tone: "muted" });
-	const hasBody = body.length > 0;
 	return node(
 		"tool",
 		{
 			role: input.role,
 			name: input.name,
 			title: input.title,
-			target: input.command,
-			targetKind: "command",
-			lang: input.lang,
+			command: input.command,
 			badges,
 			status: EXECUTION_CARD_STATUS[input.status],
 			age: running ? ms : undefined,
@@ -248,11 +265,11 @@ export function describeExecutionTool(input: ExecutionToolInput): NativeNode {
 			exit: input.status === "error" ? input.exitCode : undefined,
 			note: input.status === "cancelled" ? "cancelled" : undefined,
 			frame: "card",
-			collapsible: hasBody,
-			collapsed: hasBody ? !input.expanded : undefined,
-			preview: hasBody ? { tail: DEFAULT_TERMINAL_PREVIEW_LINES } : undefined,
+			collapsible: true,
+			collapsed: !input.expanded,
+			preview: "children",
 		},
-		body,
+		[box, ...(input.images ?? [])],
 	);
 }
 

package/src/chat/fence-figure.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A tool call's {@link ToolFigure} drawn under its card, the way assistant
+ * Markdown draws that fence: ```svg as an inline image ({@link SvgFigure}),
+ * redrawn as the body streams; ```mermaid as ASCII art once the body is
+ * final. The card already shows the source, so unlike the assistant's fence
+ * it never falls back to code: {@link FenceFigure.draws} turns down fences
+ * this terminal shows as code, and an svg that does not rasterize stays blank.
+ */
+import type { ImageBudget } from "../components/image";
+import type { ToolFigure } from "../tools/renderer";
+import type { Component } from "../tui";
+/** Fence languages a {@link FenceFigure} draws. */
+export type FenceFigureLang = "svg" | "mermaid";
+export interface FenceFigureOptions {
+    /** Shared inline-image budget for an svg's rasters. */
+    budget?: ImageBudget;
+    /** The figure's rows changed outside a render: a raster landed. */
+    onChange: () => void;
+}
+export declare class FenceFigure implements Component {
+    #private;
+    /**
+     * Whether this terminal draws `figure` now: an svg where inline images show
+     * (`showImages` and a graphics protocol), a closed mermaid fence when
+     * diagram rendering is on and the source renders.
+     */
+    static draws(figure: ToolFigure, options: {
+        showImages: boolean;
+    }): figure is ToolFigure & {
+        readonly lang: FenceFigureLang;
+    };
+    readonly lang: FenceFigureLang;
+    constructor(lang: FenceFigureLang, options: FenceFigureOptions);
+    /** Feed the fence as it stands; its `lang` is this figure's. */
+    update(figure: ToolFigure): void;
+    /** Whether a closed svg's raster is still on its way. */
+    get pending(): boolean;
+    /** The drawing; no rows while an svg draws, or when it does not. */
+    render(width: number): readonly string[];
+    invalidate(): void;
+    dispose(): void;
+}

package/src/chat/fence-figure.ts

@@ -0,0 +1,80 @@
+/**
+ * A tool call's {@link ToolFigure} drawn under its card, the way assistant
+ * Markdown draws that fence: ```svg as an inline image ({@link SvgFigure}),
+ * redrawn as the body streams; ```mermaid as ASCII art once the body is
+ * final. The card already shows the source, so unlike the assistant's fence
+ * it never falls back to code: {@link FenceFigure.draws} turns down fences
+ * this terminal shows as code, and an svg that does not rasterize stays blank.
+ */
+import type { ImageBudget } from "../components/image";
+import { fencedCode, Markdown } from "../components/markdown";
+import { TERMINAL } from "../terminal-capabilities";
+import { getMarkdownTheme } from "../theme";
+import type { ToolFigure } from "../tools/renderer";
+import type { Component } from "../tui";
+import { SvgFigure, svgFigureRendering } from "./svg-figure";
+
+/** Fence languages a {@link FenceFigure} draws. */
+export type FenceFigureLang = "svg" | "mermaid";
+
+export interface FenceFigureOptions {
+	/** Shared inline-image budget for an svg's rasters. */
+	budget?: ImageBudget;
+	/** The figure's rows changed outside a render: a raster landed. */
+	onChange: () => void;
+}
+
+export class FenceFigure implements Component {
+	/**
+	 * Whether this terminal draws `figure` now: an svg where inline images show
+	 * (`showImages` and a graphics protocol), a closed mermaid fence when
+	 * diagram rendering is on and the source renders.
+	 */
+	static draws(
+		figure: ToolFigure,
+		options: { showImages: boolean },
+	): figure is ToolFigure & { readonly lang: FenceFigureLang } {
+		if (figure.lang === "svg") return options.showImages && TERMINAL.imageProtocol !== null && svgFigureRendering();
+		if (figure.lang !== "mermaid" || !figure.closed) return false;
+		return getMarkdownTheme().resolveMermaidAscii?.(figure.source.trimEnd()) != null;
+	}
+
+	readonly lang: FenceFigureLang;
+	readonly #svg: SvgFigure | undefined;
+	#source = "";
+	/** The mermaid fence as assistant Markdown renders it; rebuilt after a theme change. */
+	#diagram: Markdown | undefined;
+
+	constructor(lang: FenceFigureLang, options: FenceFigureOptions) {
+		this.lang = lang;
+		if (lang === "svg") this.#svg = new SvgFigure({ budget: options.budget, onChange: options.onChange });
+	}
+
+	/** Feed the fence as it stands; its `lang` is this figure's. */
+	update(figure: ToolFigure): void {
+		if (figure.source !== this.#source) this.#diagram = undefined;
+		this.#source = figure.source;
+		this.#svg?.update(figure.source, figure.closed);
+	}
+
+	/** Whether a closed svg's raster is still on its way. */
+	get pending(): boolean {
+		return this.#svg?.pending === true;
+	}
+
+	/** The drawing; no rows while an svg draws, or when it does not. */
+	render(width: number): readonly string[] {
+		if (this.#svg) return this.#svg.render(width);
+		this.#diagram ??= new Markdown(fencedCode("mermaid", this.#source), 1, 0, getMarkdownTheme());
+		return this.#diagram.render(width);
+	}
+
+	invalidate(): void {
+		this.#svg?.invalidate();
+		this.#diagram = undefined;
+	}
+
+	dispose(): void {
+		this.#svg?.dispose();
+	}
+}

package/src/chat/figure-markdown.d.ts

@@ -0,0 +1,42 @@
+import type { ImageBudget } from "../components/image";
+import type { Markdown } from "../components/markdown";
+import { Container } from "../tui";
+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;
+}
+/**
+ * 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 declare class FigureMarkdown extends Container {
+    #private;
+    constructor(text: string, options: FigureMarkdownOptions);
+    /** Replace the source; returns whether it changed. */
+    setText(text: string): boolean;
+    get transientRenderCache(): boolean;
+    set transientRenderCache(value: boolean);
+    /**
+     * 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;
+    /** Whether a figure's final source still waits for its raster, or a chart for its pick or raster. */
+    get pending(): boolean;
+    /** Rebuild the prose runs through the Markdown factory after its theme changed; figures keep their rasters. */
+    restyle(): void;
+}

package/src/chat/figure-markdown.ts

@@ -0,0 +1,174 @@
+import type { Tokens } from "@linxiraos/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);
+		});
+	}
+}

package/src/chat/messages.d.ts

@@ -64,7 +64,7 @@ export interface SkillPromptDetails {
  *  `ui-helpers.addMessageToChat` (renderers), `AgentHubOverlayComponent
  *  #buildTranscriptLines`, `runPrintMode`, and `AcpAgent#replayAssistantMessage`
  *  (fallback error emission) read it via `isSilentAbort`. */
-export declare const SILENT_ABORT_MARKER = "__omp.silent_abort__";
+export declare const SILENT_ABORT_MARKER = "__zeta.silent_abort__";
 /** Type-guard for silent aborts. Renderers MUST call this helper so structured
  *  `errorId` and legacy persisted marker messages stay in lockstep. */
 export declare function isSilentAbort(message: Pick<AssistantMessage, "errorId" | "errorMessage">): boolean;

package/src/chat/messages.ts

@@ -86,7 +86,7 @@ export interface SkillPromptDetails {
  *  `ui-helpers.addMessageToChat` (renderers), `AgentHubOverlayComponent
  *  #buildTranscriptLines`, `runPrintMode`, and `AcpAgent#replayAssistantMessage`
  *  (fallback error emission) read it via `isSilentAbort`. */
-export const SILENT_ABORT_MARKER = "__omp.silent_abort__";
+export const SILENT_ABORT_MARKER = "__zeta.silent_abort__";
 
 /** Type-guard for silent aborts. Renderers MUST call this helper so structured
  *  `errorId` and legacy persisted marker messages stay in lockstep. */

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

@@ -1143,6 +1143,10 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		const title = pathDisplay ? `Read ${pathDisplay}` : "Read";
 		let cachedWidth: number | undefined;
 		let cachedLines: string[] | undefined;
+		const dropCache = () => {
+			cachedWidth = undefined;
+			cachedLines = undefined;
+		};
 		const expanded = this.#expanded;
 		const component: Component = {
 			render: (width: number) => {
@@ -1164,10 +1168,8 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 				cachedWidth = width;
 				return cachedLines;
 			},
-			invalidate: () => {
-				cachedWidth = undefined;
-				cachedLines = undefined;
-			},
+			invalidate: dropCache,
+			releaseRenderCaches: dropCache,
 		};
 		this.addChild(component);
 	}

package/src/chat/skill-message.ts

@@ -286,6 +286,12 @@ class SkillCallout implements Component {
 		this.#lines = undefined;
 	}
 
+	releaseRenderCaches(): void {
+		this.#source = undefined;
+		this.#lines = undefined;
+		this.#box.releaseRenderCaches();
+	}
+
 	render(width: number): readonly string[] {
 		const inner = this.#box.render(Math.max(1, width - 1));
 		if (this.#source === inner && this.#lines !== undefined) return this.#lines;

package/src/chat/svg-figure.d.ts

@@ -0,0 +1,33 @@
+import { type ImageBudget } from "../components/image";
+import { type Markdown } from "../components/markdown";
+import type { Component } from "../tui";
+/** The active theme's color per figure token, for resolving a figure with `prepareSvg`. */
+export declare function svgFigurePalette(): Record<string, string>;
+/** Turn lifting ```svg fences into images on or off (the host's `tui.renderSvg`); the host rebuilds the transcript after. */
+export declare function setSvgFigureRendering(enabled: boolean): void;
+/** Whether assistant ```svg fences render as images where the terminal can show them. */
+export declare function svgFigureRendering(): boolean;
+export interface SvgFigureOptions {
+    /**
+     * Markdown for the fenced-code fallback shown when the final source does not
+     * render. Without it the figure decorates content shown elsewhere (a chart
+     * under its table): it stays blank until drawn, and when it cannot be.
+     */
+    markdown?: (text: string) => Markdown;
+    /** Shared inline-image budget; superseded rasters are released from it. */
+    budget?: ImageBudget;
+    /** The figure's rows changed outside a text update: a raster landed or rendering fell back to code. */
+    onChange: () => void;
+}
+export declare class SvgFigure implements Component {
+    #private;
+    constructor(options: SvgFigureOptions);
+    /** Feed the fence body; `final` once the fence closed or the message stopped streaming. */
+    update(source: string, final: boolean): void;
+    /** Whether the final source still waits for its raster (or for failing to render). */
+    get pending(): boolean;
+    render(width: number): readonly string[];
+    invalidate(): void;
+    dispose(): void;
+    debugState(): Record<string, unknown>;
+}