zidane-ui 9.1.1 → 9.1.3

package/dist/chat/transcript/tool-parts.d.ts

@@ -1,23 +1,35 @@
 import { ToolRowModel } from "../headless/transcript/rows.js";
 import "../headless/transcript/index.js";
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
+import { ScriptProgress } from "zidane/chat/pure";
 //#region src/chat/transcript/tool-parts.d.ts
 /** Tool input / output panels: set into the row on the code tone (quiet text, the code panel's inset edge). */
-declare const CODE_PANEL = "zg-code-panel px-3 py-2 text-xs !text-[var(--zg-text-muted)] whitespace-pre-wrap font-mono";
+declare const CODE_PANEL = "zg-code-panel zg-output zg-ansi";
 /** Props for {@link ToolInput}. */
 interface ToolInputProps {
   /** The tool's name. Some tools (Codemode) show their script instead of JSON. */
   name: string;
   /** The tool call's raw input, shown as JSON when no script is extracted. */
   input: Record<string, unknown>;
+  /** A Codemode script's live progress (`ToolRowModel.scriptProgress`): its lines show their state. */
+  scriptProgress?: ScriptProgress;
+  /** The call ended (`ok` tells how): a Codemode script stops showing its live output. */
+  finished?: boolean;
+  /** The call ended without error. */
+  ok?: boolean;
+  /** The call's result text: a failed Codemode script's names the line it threw at. */
+  result?: string | null;
+  /** A Codemode script's output, shown in the box its live lines were in once it ends. */
+  output?: ReactNode;
 }
 /**
- * A tool call's input panel, syntax-highlighted: the code it runs
- * (Codemode's script, via `toolInputCode`), or else its JSON input.
+ * A tool call's input panel, syntax-highlighted: the code it runs (a
+ * Codemode script line by line, `CodemodeScript`; a shell command, via
+ * `toolInputCode`), or else its JSON input.
  *
- * @param props - Panel props: the tool `name` and its `input`.
+ * @param props - Panel props: the tool `name`, its `input`, and a script's progress.
  */
-declare function ToolInput({ name, input }: ToolInputProps): import("react").JSX.Element;
+declare function ToolInput({ name, input, scriptProgress, finished, ok, result, output }: ToolInputProps): import("react").JSX.Element;
 /** Props for {@link ReadFileBlock}. */
 interface ReadFileBlockProps {
   /** The `read_file` call. Its `path` input picks the language. */

package/dist/chat/transcript/tool-parts.js

@@ -1,5 +1,6 @@
 import { useChatLabels } from "../useChatLabels.js";
 import { useTranscriptActions } from "./actions.js";
+import { CodemodeScript } from "./CodemodeScript.js";
 import { useTranscriptRenderers } from "./renderers.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -12,16 +13,25 @@ import { formatRunDuration, toolInputCode } from "zidane/chat/pure";
 * clipped output (`TranscriptActions.toolOutput`).
 */
 /** Tool input / output panels: set into the row on the code tone (quiet text, the code panel's inset edge). */
-const CODE_PANEL = "zg-code-panel px-3 py-2 text-xs !text-[var(--zg-text-muted)] whitespace-pre-wrap font-mono";
+const CODE_PANEL = "zg-code-panel zg-output zg-ansi";
 /**
-* A tool call's input panel, syntax-highlighted: the code it runs
-* (Codemode's script, via `toolInputCode`), or else its JSON input.
+* A tool call's input panel, syntax-highlighted: the code it runs (a
+* Codemode script line by line, `CodemodeScript`; a shell command, via
+* `toolInputCode`), or else its JSON input.
 *
-* @param props - Panel props: the tool `name` and its `input`.
+* @param props - Panel props: the tool `name`, its `input`, and a script's progress.
 */
-function ToolInput({ name, input }) {
+function ToolInput({ name, input, scriptProgress, finished, ok, result, output }) {
 	const { CodeBlock } = useTranscriptRenderers();
 	const script = toolInputCode(name, input);
+	if (script && name === "codemode" && typeof input.code === "string") return /* @__PURE__ */ jsx(CodemodeScript, {
+		code: input.code,
+		...scriptProgress ? { progress: scriptProgress } : {},
+		...finished !== void 0 ? { finished } : {},
+		...ok !== void 0 ? { ok } : {},
+		...result !== void 0 ? { result } : {},
+		...output !== void 0 ? { output } : {}
+	});
 	if (script) return /* @__PURE__ */ jsx(CodeBlock, {
 		code: script.code,
 		language: script.language

package/dist/chat/transcript/tool-payload.js

@@ -1,6 +1,8 @@
+import { AnsiText } from "./AnsiText.js";
 import { CODE_PANEL, LoadFullOutputButton, ReadFileBlock, ToolInput, useFullOutput } from "./tool-parts.js";
 import { EditDiffBlock } from "./EditDiffBlock.js";
 import { ToolMedia, useToolMedia } from "./tool-media.js";
+import { scriptInputProps } from "./script-input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/transcript/tool-payload.tsx
 /**
@@ -40,7 +42,7 @@ function ToolPayload({ tool, className, style }) {
 			}),
 			tool.name !== "read_file" && media.rest !== "" && /* @__PURE__ */ jsx("pre", {
 				className: pre,
-				children: media.rest
+				children: /* @__PURE__ */ jsx(AnsiText, { text: media.rest })
 			})
 		]
 	});
@@ -58,12 +60,13 @@ function ToolPayload({ tool, className, style }) {
 		children: [
 			tool.rawInput && Object.keys(tool.rawInput).length > 0 && /* @__PURE__ */ jsx(ToolInput, {
 				name: tool.name,
-				input: tool.rawInput
+				input: tool.rawInput,
+				...scriptInputProps(tool)
 			}),
 			loadButton,
 			output !== null && output.trim() !== "" && /* @__PURE__ */ jsx("pre", {
 				className: pre,
-				children: output
+				children: /* @__PURE__ */ jsx(AnsiText, { text: output })
 			})
 		]
 	});

package/dist/chat/transcript/tool-row.js

@@ -3,14 +3,16 @@ import { useDisplayPath } from "../../hooks/useDisplayPath.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { useModelName } from "./actions.js";
 import { Caret, FailedMark } from "./frame.js";
-import { LoadFullOutputButton, ReadFileBlock, ToolGlyph, ToolInput, ToolTiming, useFullOutput } from "./tool-parts.js";
+import { AnsiText } from "./AnsiText.js";
+import { CODE_PANEL, LoadFullOutputButton, ReadFileBlock, ToolGlyph, ToolInput, ToolTiming, useFullOutput } from "./tool-parts.js";
 import { EditDiffBlock } from "./EditDiffBlock.js";
 import { ToolMedia, useToolMedia } from "./tool-media.js";
+import { scriptInputProps } from "./script-input.js";
 import { useTranscriptRenderers } from "./renderers.js";
 import { ImageGenerationBlock, drawsImageGeneration } from "./ImageGenerationBlock.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, memo, useMemo, useState } from "react";
-import { computeLineDiff } from "zidane/chat/pure";
+import { computeLineDiff, scriptProgressView } from "zidane/chat/pure";
 //#region src/chat/transcript/tool-row.tsx
 /**
 * One tool call as a transcript row: a header line (glyph, name, target,
@@ -31,7 +33,7 @@ function toolRowPropsEqual(prev, next) {
 	if (prev.mode !== next.mode || prev.showResult !== next.showResult || prev.showDiff !== next.showDiff || prev.lineState !== next.lineState || prev.className !== next.className || prev.style !== next.style) return false;
 	const a = prev.tool;
 	const b = next.tool;
-	return a.name === b.name && a.displayName === b.displayName && a.result === b.result && a.ok === b.ok && a.edit === b.edit && a.rawInput === b.rawInput && a.resultClipped === b.resultClipped && a.callId === b.callId && a.startedAt === b.startedAt && a.durationMs === b.durationMs && a.waitingFor === b.waitingFor && a.resuming === b.resuming && a.approval === b.approval && formattedEqual(a.formatted, b.formatted);
+	return a.name === b.name && a.displayName === b.displayName && a.result === b.result && a.ok === b.ok && a.edit === b.edit && a.rawInput === b.rawInput && a.resultClipped === b.resultClipped && a.callId === b.callId && a.startedAt === b.startedAt && a.durationMs === b.durationMs && a.waitingFor === b.waitingFor && a.resuming === b.resuming && a.scriptProgress === b.scriptProgress && a.approval === b.approval && formattedEqual(a.formatted, b.formatted);
 }
 function formattedEqual(a, b) {
 	if (a === b) return true;
@@ -120,8 +122,30 @@ const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className,
 	const showInputPanel = mode === "formatted" && hasInput && !interaction;
 	const hasOutput = tool.result !== null && !interaction;
 	const showOutputPanel = hasOutput && (showResult || revealOutput);
+	const scriptInline = showInputPanel && tool.name === "codemode" && tool.scriptProgress !== void 0;
 	const hasExpandable = interaction || showInputPanel || hasOutput || mode === "full" && tool.rawInput || hasDiff;
 	const sweep = lineState === "running" && !tool.waitingFor;
+	const outputBody = showOutputPanel ? /* @__PURE__ */ jsxs(Fragment, { children: [bodyMounted && canLoadFull && tool.resultClipped && typeof fullResult !== "string" && /* @__PURE__ */ jsx(LoadFullOutputButton, {
+		loading: fullResult === "loading",
+		disabled: !fullReady,
+		onClick: loadFullResult,
+		className: "mt-1.5"
+	}), !bodyMounted ? null : media ? /* @__PURE__ */ jsxs("div", {
+		className: "mt-1.5 flex flex-col gap-1.5",
+		children: [(!drawsImageGeneration(tool) || tool.ok === false) && /* @__PURE__ */ jsx(ToolMedia, {
+			media: media.media,
+			url: media.url
+		}), tool.name !== "read_file" && media.rest !== "" && /* @__PURE__ */ jsx("pre", {
+			className: "zg-code-panel zg-output zg-ansi",
+			children: /* @__PURE__ */ jsx(AnsiText, { text: media.rest })
+		})]
+	}) : tool.name === "read_file" ? /* @__PURE__ */ jsx(ReadFileBlock, {
+		tool,
+		output: typeof fullResult === "string" ? fullResult : tool.result ?? ""
+	}) : /* @__PURE__ */ jsx("pre", {
+		className: `${CODE_PANEL} mt-1.5`,
+		children: /* @__PURE__ */ jsx(AnsiText, { text: (typeof fullResult === "string" ? fullResult : tool.result) ?? "" })
+	})] }) : null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: ["text-xs", className].filter(Boolean).join(" "),
 		style,
@@ -131,70 +155,78 @@ const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className,
 				onClick: () => setOpen((current) => !current),
 				"aria-expanded": open,
 				className: "zg-press-subtle flex flex-col items-stretch w-full zg-disclosure !text-[var(--zg-text)] text-left py-0.5",
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "flex items-baseline gap-2 min-w-0",
-					children: [
-						/* @__PURE__ */ jsx(ToolGlyph, { name: tool.name }),
-						/* @__PURE__ */ jsx("span", {
-							className: `font-medium shrink-0${sweep ? " zg-shimmer" : ""}`,
-							children: tool.displayName
-						}),
-						mode === "formatted" && tool.formatted?.target && /* @__PURE__ */ jsx("span", {
-							...!tool.formatted.sessionId && display.text(tool.formatted.target) !== tool.formatted.target ? { title: tool.formatted.target } : {},
-							className: `min-w-0 truncate ${tool.formatted.sessionId ? "font-medium text-[var(--zg-accent)]" : "font-mono text-[var(--zg-accent-hover)]"}`,
-							children: tool.formatted.sessionId ? /* @__PURE__ */ jsx(SessionTitle, {
-								id: tool.formatted.sessionId,
-								fallback: tool.formatted.target
-							}) : display.text(tool.formatted.target)
-						}),
-						editCounts && (editCounts.added > 0 || editCounts.removed > 0) && /* @__PURE__ */ jsxs("span", {
-							className: "zg-meta inline-flex items-baseline gap-1.5 shrink-0",
-							children: [/* @__PURE__ */ jsxs("span", {
-								className: "text-zg-success",
-								children: ["+", editCounts.added]
-							}), /* @__PURE__ */ jsxs("span", {
-								className: "text-zg-danger",
-								children: ["−", editCounts.removed]
-							})]
-						}),
-						mode === "formatted" && tool.formatted?.meta && tool.formatted.meta.length > 0 && /* @__PURE__ */ jsx("span", {
-							className: "zg-meta shrink-0 self-center inline-flex items-center gap-1",
-							children: tool.formatted.meta.map((value, i) => /* @__PURE__ */ jsx("span", {
-								className: "zg-meta-chip",
-								children: display.text(value)
-							}, i))
-						}),
-						mode === "full" && tool.rawInput && /* @__PURE__ */ jsx("span", {
-							className: "font-mono text-[var(--zg-text-muted)] min-w-0 truncate",
-							children: JSON.stringify(tool.rawInput)
-						}),
-						tool.approval && /* @__PURE__ */ jsx(ModelVerdict, { approval: tool.approval }),
-						tool.waitingFor ? /* @__PURE__ */ jsxs("span", {
-							"data-testid": "tool-waiting",
-							title: labels.waitingForSlot(tool.waitingFor.max),
-							className: "zg-meta shrink-0 inline-flex items-baseline gap-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "i-ph-pause-fill text-zg-badge self-center"
-							}), labels.stepWaiting]
-						}) : tool.ok === null && tool.startedAt !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [tool.resuming && /* @__PURE__ */ jsx("span", {
-							"data-testid": "tool-resuming",
-							className: "zg-meta shrink-0",
-							children: labels.stepResuming
-						}), /* @__PURE__ */ jsx(ToolTiming, {
-							startedAt: tool.startedAt,
-							running: true
-						})] }) : tool.durationMs !== void 0 ? /* @__PURE__ */ jsx(ToolTiming, { durationMs: tool.durationMs }) : null,
-						lineState === "failed" && /* @__PURE__ */ jsx(FailedMark, {}),
-						hasExpandable ? /* @__PURE__ */ jsx(Caret, {
-							open,
-							className: "self-center"
-						}) : null
-					]
-				}), mode === "formatted" && tool.formatted?.detail && /* @__PURE__ */ jsx("span", {
-					className: "zg-line-clamp-2 mt-0.5 text-[var(--zg-text-muted)]",
-					children: tool.formatted.detail
-				})]
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-baseline gap-2 min-w-0",
+						children: [
+							/* @__PURE__ */ jsx(ToolGlyph, { name: tool.name }),
+							/* @__PURE__ */ jsx("span", {
+								className: `font-medium shrink-0${sweep ? " zg-shimmer" : ""}`,
+								children: tool.displayName
+							}),
+							mode === "formatted" && tool.formatted?.target && /* @__PURE__ */ jsx("span", {
+								...!tool.formatted.sessionId && display.text(tool.formatted.target) !== tool.formatted.target ? { title: tool.formatted.target } : {},
+								className: `min-w-0 truncate ${tool.formatted.sessionId ? "font-medium text-[var(--zg-accent)]" : "font-mono text-[var(--zg-accent-hover)]"}`,
+								children: tool.formatted.sessionId ? /* @__PURE__ */ jsx(SessionTitle, {
+									id: tool.formatted.sessionId,
+									fallback: tool.formatted.target
+								}) : display.text(tool.formatted.target)
+							}),
+							editCounts && (editCounts.added > 0 || editCounts.removed > 0) && /* @__PURE__ */ jsxs("span", {
+								className: "zg-meta inline-flex items-baseline gap-1.5 shrink-0",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "text-zg-success",
+									children: ["+", editCounts.added]
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "text-zg-danger",
+									children: ["−", editCounts.removed]
+								})]
+							}),
+							mode === "formatted" && tool.formatted?.meta && tool.formatted.meta.length > 0 && /* @__PURE__ */ jsx("span", {
+								className: "zg-meta shrink-0 self-center inline-flex items-center gap-1",
+								children: tool.formatted.meta.map((value, i) => /* @__PURE__ */ jsx("span", {
+									className: "zg-meta-chip",
+									children: display.text(value)
+								}, i))
+							}),
+							mode === "full" && tool.rawInput && /* @__PURE__ */ jsx("span", {
+								className: "font-mono text-[var(--zg-text-muted)] min-w-0 truncate",
+								children: JSON.stringify(tool.rawInput)
+							}),
+							tool.approval && /* @__PURE__ */ jsx(ModelVerdict, { approval: tool.approval }),
+							tool.waitingFor ? /* @__PURE__ */ jsxs("span", {
+								"data-testid": "tool-waiting",
+								title: labels.waitingForSlot(tool.waitingFor.max),
+								className: "zg-meta shrink-0 inline-flex items-baseline gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "i-ph-pause-fill text-zg-badge self-center"
+								}), labels.stepWaiting]
+							}) : tool.ok === null && tool.startedAt !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								tool.scriptProgress && /* @__PURE__ */ jsx(ScriptProgressChips, { tool }),
+								tool.resuming && /* @__PURE__ */ jsx("span", {
+									"data-testid": "tool-resuming",
+									className: "zg-meta shrink-0",
+									children: labels.stepResuming
+								}),
+								/* @__PURE__ */ jsx(ToolTiming, {
+									startedAt: tool.startedAt,
+									running: true
+								})
+							] }) : tool.durationMs !== void 0 ? /* @__PURE__ */ jsx(ToolTiming, { durationMs: tool.durationMs }) : null,
+							lineState === "failed" && /* @__PURE__ */ jsx(FailedMark, {}),
+							hasExpandable ? /* @__PURE__ */ jsx(Caret, {
+								open,
+								className: "self-center"
+							}) : null
+						]
+					}),
+					tool.ok === null && tool.scriptProgress && /* @__PURE__ */ jsx(ScriptProgressBar, { tool }),
+					mode === "formatted" && tool.formatted?.detail && /* @__PURE__ */ jsx("span", {
+						className: "zg-line-clamp-2 mt-0.5 text-[var(--zg-text-muted)]",
+						children: tool.formatted.detail
+					})
+				]
 			}),
 			mode !== "hidden" && drawsImageGeneration(tool) && /* @__PURE__ */ jsx(ImageGenerationBlock, { tool }),
 			hasDiff && tool.edit && /* @__PURE__ */ jsx("div", {
@@ -221,9 +253,11 @@ const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className,
 				"data-open": open,
 				children: /* @__PURE__ */ jsx("div", {
 					className: "zg-collapsible-inner",
-					children: bodyMounted && /* @__PURE__ */ jsxs(Fragment, { children: [showOutputPanel && /* @__PURE__ */ jsx(PanelCaption, { children: labels.inputCaption }), /* @__PURE__ */ jsx(ToolInput, {
+					children: bodyMounted && /* @__PURE__ */ jsxs(Fragment, { children: [showOutputPanel && !scriptInline && /* @__PURE__ */ jsx(PanelCaption, { children: labels.inputCaption }), /* @__PURE__ */ jsx(ToolInput, {
 						name: tool.name,
-						input: tool.rawInput
+						input: tool.rawInput,
+						...scriptInputProps(tool),
+						...scriptInline && outputBody ? { output: outputBody } : {}
 					})] })
 				})
 			}),
@@ -240,36 +274,12 @@ const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className,
 					})
 				})
 			}),
-			showOutputPanel && /* @__PURE__ */ jsx("div", {
+			showOutputPanel && !scriptInline && /* @__PURE__ */ jsx("div", {
 				className: "zg-collapsible",
 				"data-open": open,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "zg-collapsible-inner",
-					children: [
-						bodyMounted && showInputPanel && /* @__PURE__ */ jsx(PanelCaption, { children: labels.outputCaption }),
-						bodyMounted && canLoadFull && tool.resultClipped && typeof fullResult !== "string" && /* @__PURE__ */ jsx(LoadFullOutputButton, {
-							loading: fullResult === "loading",
-							disabled: !fullReady,
-							onClick: loadFullResult,
-							className: "mt-1.5"
-						}),
-						!bodyMounted ? null : media ? /* @__PURE__ */ jsxs("div", {
-							className: "mt-1.5 flex flex-col gap-1.5",
-							children: [(!drawsImageGeneration(tool) || tool.ok === false) && /* @__PURE__ */ jsx(ToolMedia, {
-								media: media.media,
-								url: media.url
-							}), tool.name !== "read_file" && media.rest !== "" && /* @__PURE__ */ jsx("pre", {
-								className: "zg-code-panel px-3 py-2 text-xs !text-[var(--zg-text-muted)] whitespace-pre-wrap font-mono",
-								children: media.rest
-							})]
-						}) : tool.name === "read_file" ? /* @__PURE__ */ jsx(ReadFileBlock, {
-							tool,
-							output: typeof fullResult === "string" ? fullResult : tool.result ?? ""
-						}) : /* @__PURE__ */ jsx("pre", {
-							className: `zg-code-panel px-3 py-2 text-xs !text-[var(--zg-text-muted)] whitespace-pre-wrap font-mono mt-1.5`,
-							children: typeof fullResult === "string" ? fullResult : tool.result
-						})
-					]
+					children: [bodyMounted && showInputPanel && /* @__PURE__ */ jsx(PanelCaption, { children: labels.outputCaption }), outputBody]
 				})
 			}),
 			mode === "full" && tool.rawInput && /* @__PURE__ */ jsx("div", {
@@ -279,13 +289,62 @@ const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className,
 					className: "zg-collapsible-inner",
 					children: bodyMounted && /* @__PURE__ */ jsx(ToolInput, {
 						name: tool.name,
-						input: tool.rawInput
+						input: tool.rawInput,
+						...scriptInputProps(tool)
 					})
 				})
 			})
 		]
 	});
 }, toolRowPropsEqual);
+/** The view of a script row's progress, for its chips and bar. */
+function useScriptView(tool) {
+	const code = typeof tool.rawInput?.code === "string" ? tool.rawInput.code : "";
+	return useMemo(() => scriptProgressView(code, tool.scriptProgress, false), [code, tool.scriptProgress]);
+}
+/** A running script's counts: `3 of 4` and its percent when each call runs once at most, else done, running and failed. */
+function ScriptProgressChips({ tool }) {
+	const labels = useChatLabels();
+	const view = useScriptView(tool);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "zg-meta shrink-0 self-center inline-flex items-center gap-1",
+		"data-testid": "script-progress",
+		children: [view.total !== void 0 && view.percent !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "zg-meta-chip",
+			children: labels.scriptCallsOf(view.done, view.total)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "zg-meta-chip",
+			children: labels.scriptPercent(view.percent)
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "zg-meta-chip",
+			children: labels.scriptCallsDone(view.done)
+		}), view.running > 0 && /* @__PURE__ */ jsx("span", {
+			className: "zg-meta-chip",
+			children: labels.scriptCallsRunning(view.running)
+		})] }), view.failed > 0 && /* @__PURE__ */ jsx("span", {
+			className: "zg-meta-chip text-zg-danger",
+			children: labels.scriptCallsFailed(view.failed)
+		})]
+	});
+}
+/** A running script's progress bar under its header line. */
+function ScriptProgressBar({ tool }) {
+	const labels = useChatLabels();
+	const view = useScriptView(tool);
+	const exact = view.percent !== void 0;
+	return /* @__PURE__ */ jsx("span", {
+		role: "progressbar",
+		"aria-label": labels.scriptProgress,
+		...exact ? {
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": view.percent
+		} : {},
+		className: "zg-script-bar",
+		"data-indeterminate": exact ? void 0 : "",
+		style: exact ? { "--zg-script-progress": `${view.percent}%` } : void 0
+	});
+}
 /** Tiny caption above an expanded tool panel when input and output are both shown. */
 function PanelCaption({ children }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/chat/transcript/user-bash.js

@@ -1,6 +1,7 @@
 import { Crossfade } from "../../motion/swap.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { useTranscriptActions } from "./actions.js";
+import { AnsiText } from "./AnsiText.js";
 import { ToolTiming } from "./tool-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
@@ -93,8 +94,8 @@ const UserBashRow = memo(({ row, showFull, lineState, className, style }) => {
 				})
 			]
 		}), display !== null && /* @__PURE__ */ jsx("pre", {
-			className: `zg-code-panel px-3 py-2 text-xs !text-[var(--zg-text-muted)] whitespace-pre-wrap font-mono mt-1 leading-relaxed`,
-			children: display
+			className: `zg-code-panel zg-output zg-ansi mt-1`,
+			children: /* @__PURE__ */ jsx(AnsiText, { text: display })
 		})]
 	});
 });

package/dist/code/HighlightedCode.js

@@ -1,8 +1,8 @@
 import { CodeFrame } from "../components/CodeFrame.js";
-import { useCodeHighlight } from "./CodeHighlightProvider.js";
 import { useNearViewport } from "../hooks/useNearViewport.js";
+import { useHighlightedHtml } from "./use-highlighted-html.js";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useRef } from "react";
 //#region src/code/HighlightedCode.tsx
 /**
 * A highlighted code block in the design system's code frame: the
@@ -27,7 +27,7 @@ import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 function HighlightedCode({ code, language, className, style, copyLabel, actions }) {
 	const hostRef = useRef(null);
 	const near = useNearViewport(hostRef);
-	const html = useShikiHtml(code, language, near);
+	const html = useHighlightedHtml(code, language, near);
 	const pending = near && html === void 0;
 	return /* @__PURE__ */ jsx(CodeFrame, {
 		ref: hostRef,
@@ -43,71 +43,5 @@ function HighlightedCode({ code, language, className, style, copyLabel, actions
 		})
 	});
 }
-const noSubscription = () => () => {};
-/** False while hydrating server markup, true on any client render after. */
-function useHydrated() {
-	return useSyncExternalStore(noSubscription, () => true, () => false);
-}
-/**
-* Trailing debounce for re-highlights. A streaming fenced code block
-* changes `code` on every drain tick (about 60 a second). Highlighting each
-* change would queue stale tokenization work that competes with the stream
-* for the main thread. The first run highlights at once (opening a session
-* paints colored code without a delay). Only later changes wait. The plain
-* `<pre>` fallback shows the raw text meanwhile, so streaming does not look
-* stalled: HTML paints only for the code and language it was made from.
-*/
-const REHIGHLIGHT_DEBOUNCE_MS = 150;
-/** The block's HTML: `null` when its language colors nothing, `undefined` until it is highlighted. */
-function useShikiHtml(code, language, enabled) {
-	const { highlighter, theme } = useCodeHighlight();
-	const hydrated = useHydrated();
-	const [painted, setPainted] = useState(null);
-	const firstRunRef = useState(() => ({ done: false }))[0];
-	useEffect(() => {
-		if (!enabled) return;
-		const cached = highlighter.cached(code, language, theme);
-		if (cached !== void 0) {
-			firstRunRef.done = true;
-			setPainted({
-				code,
-				language,
-				html: cached
-			});
-			return;
-		}
-		let cancelled = false;
-		const run = () => {
-			highlighter.highlight(code, language, theme).then((html) => {
-				if (!cancelled) setPainted({
-					code,
-					language,
-					html
-				});
-			});
-		};
-		if (!firstRunRef.done) {
-			firstRunRef.done = true;
-			run();
-			return () => {
-				cancelled = true;
-			};
-		}
-		const timer = window.setTimeout(run, REHIGHLIGHT_DEBOUNCE_MS);
-		return () => {
-			cancelled = true;
-			window.clearTimeout(timer);
-		};
-	}, [
-		code,
-		language,
-		theme,
-		highlighter,
-		firstRunRef,
-		enabled
-	]);
-	if (painted && painted.code === code && painted.language === language) return painted.html;
-	return hydrated ? highlighter.cached(code, language, theme) : void 0;
-}
 //#endregion
 export { HighlightedCode };

package/dist/code/highlight-lines.d.ts

@@ -0,0 +1,24 @@
+//#region src/code/highlight-lines.d.ts
+/**
+ * Highlighted HTML split into lines of colored tokens, for views that draw
+ * code one line at a time (each line its own element: a gutter, a state).
+ * The highlighter wraps no line in an element of its own (a newline sits
+ * inside a token), so the split walks its text. Internal to the kit.
+ */
+/** A run of text in one style. */
+interface CodeToken {
+  text: string;
+  color?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+}
+/**
+ * The tokens of each line of highlighted HTML, or `null` where HTML cannot be
+ * parsed (no `DOMParser`: a server render) or holds no code.
+ *
+ * @param html - The highlighter's `<pre><code>…</code></pre>`.
+ * @param lineCount - Lines the code has: a closing newline adds none.
+ */
+declare function highlightedLines(html: string, lineCount: number): CodeToken[][] | null;
+//#endregion
+export { CodeToken, highlightedLines };

package/dist/code/highlight-lines.js

@@ -0,0 +1,41 @@
+//#region src/code/highlight-lines.ts
+/**
+* The tokens of each line of highlighted HTML, or `null` where HTML cannot be
+* parsed (no `DOMParser`: a server render) or holds no code.
+*
+* @param html - The highlighter's `<pre><code>…</code></pre>`.
+* @param lineCount - Lines the code has: a closing newline adds none.
+*/
+function highlightedLines(html, lineCount) {
+	if (typeof DOMParser === "undefined") return null;
+	const doc = new DOMParser().parseFromString(html, "text/html");
+	const root = doc.querySelector("pre code") ?? doc.querySelector("pre");
+	if (!root) return null;
+	const lines = [[]];
+	const push = (text, style) => {
+		text.split("\n").forEach((part, i) => {
+			if (i > 0) lines.push([]);
+			if (part !== "") lines[lines.length - 1].push({
+				text: part,
+				...style
+			});
+		});
+	};
+	const walk = (node, style) => {
+		for (const child of Array.from(node.childNodes)) if (child.nodeType === 3) push(child.textContent ?? "", style);
+		else if (child.nodeType === 1) {
+			const css = child.style;
+			walk(child, {
+				...style,
+				...css?.color ? { color: css.color } : {},
+				...css?.fontStyle ? { fontStyle: css.fontStyle } : {},
+				...css?.fontWeight ? { fontWeight: css.fontWeight } : {}
+			});
+		}
+	};
+	walk(root, {});
+	while (lines.length > lineCount && lines[lines.length - 1].length === 0) lines.pop();
+	return lines.length === lineCount ? lines : null;
+}
+//#endregion
+export { highlightedLines };

package/dist/code/use-highlighted-html.d.ts

@@ -0,0 +1,5 @@
+//#region src/code/use-highlighted-html.d.ts
+/** The block's HTML: `null` when its language colors nothing, `undefined` until it is highlighted. */
+declare function useHighlightedHtml(code: string, language: string, enabled: boolean): string | null | undefined;
+//#endregion
+export { useHighlightedHtml };