zidane-ui 9.0.4 → 9.1.3

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

@@ -1,15 +1,18 @@
 import { useStaysMounted } from "../../motion/collapse.js";
+import { useDisplayPath } from "../../hooks/useDisplayPath.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { useModelName } from "./actions.js";
 import { Caret, FailedMark } from "./frame.js";
-import { useTranscriptRenderers } from "./renderers.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,
@@ -30,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;
@@ -90,6 +93,7 @@ function ModelVerdict({ approval, className, style }) {
 /** Renders a tool call as a collapsible row: glyph, name and target, timing, and, when opened, its input, output, diff, or media. */
 const ToolRow = memo(({ tool, mode, showResult, showDiff, lineState, className, style }) => {
 	const labels = useChatLabels();
+	const display = useDisplayPath();
 	const { SessionTitle, ToolBody, hasToolBody } = useTranscriptRenderers();
 	const [open, setOpen] = useState(false);
 	/** Output revealed on demand while the "Tool outputs" setting is off. */
@@ -118,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,
@@ -129,69 +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", {
-							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
-							}) : 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: 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", {
@@ -218,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 } : {}
 					})] })
 				})
 			}),
@@ -237,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", {
@@ -276,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/useTranscriptScroll.js

@@ -1,3 +1,4 @@
+import { createRecentMap } from "./recent-map.js";
 import { useFillViewportScrollback } from "./EarlierHistory.js";
 import { useWheelHoverPause } from "./useWheelHoverPause.js";
 import { useStickToBottom } from "./useStickToBottom.js";
@@ -18,9 +19,9 @@ const LOAD_EARLIER_PX = 600;
 * (Settings › Interface › Conversation › Keep scroll position). In memory
 * only: a position names rows by ids that last as long as the loaded events,
 * so after a reload, or once a transcript left the cache, it reopens at the
-* bottom.
+* bottom. Capped: a forgotten conversation reopens at the bottom too.
 */
-const positions = /* @__PURE__ */ new Map();
+const positions = createRecentMap(500);
 /**
 * The transcript's scroll: stick-to-bottom, where a conversation opens, the from-top signal and lazy scrollback (see the module comment).
 *

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/chat/transcript-options.d.ts

@@ -0,0 +1,15 @@
+import { TranscriptOptions } from "./Transcript.js";
+//#region src/chat/transcript-options.d.ts
+/** The settings a transcript reads, in one order. */
+declare const TRANSCRIPT_OPTION_KEYS: readonly ["showRowIcons", "showThinking", "showToolResults", "showEditDiffs", "showFullShellOutput", "groupToolCalls", "toolCallDisplay", "transcriptDensity", "hideSubagentOutput", "showRunReceipt", "thinkingAutoExpand", "showCacheNotices", "codemodeShowCalls", "showToolAttachments", "renderDiagrams"];
+/**
+ * Picks the transcript's options out of `values` (only those set: the transcript keeps zidane's defaults for the
+ * rest). The result keeps its identity while those settings do, so a change to any other setting leaves the
+ * transcript alone.
+ *
+ * @param values - A settings document's values, or `null` while it loads.
+ * @returns The options to pass to `Transcript` / `HostTranscript`.
+ */
+declare function useTranscriptOptions(values: Partial<TranscriptOptions> | null | undefined): Partial<TranscriptOptions>;
+//#endregion
+export { TRANSCRIPT_OPTION_KEYS, useTranscriptOptions };

package/dist/chat/transcript-options.js

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+//#region src/chat/transcript-options.ts
+/**
+* The transcript's display options (`TranscriptOptions`) out of a settings
+* document: the desktop app's settings, a server's settings document on the
+* web app. Both apps show a transcript the same way for the same settings.
+*/
+/** The settings a transcript reads, in one order. */
+const TRANSCRIPT_OPTION_KEYS = [
+	"showRowIcons",
+	"showThinking",
+	"showToolResults",
+	"showEditDiffs",
+	"showFullShellOutput",
+	"groupToolCalls",
+	"toolCallDisplay",
+	"transcriptDensity",
+	"hideSubagentOutput",
+	"showRunReceipt",
+	"thinkingAutoExpand",
+	"showCacheNotices",
+	"codemodeShowCalls",
+	"showToolAttachments",
+	"renderDiagrams"
+];
+/**
+* Picks the transcript's options out of `values` (only those set: the transcript keeps zidane's defaults for the
+* rest). The result keeps its identity while those settings do, so a change to any other setting leaves the
+* transcript alone.
+*
+* @param values - A settings document's values, or `null` while it loads.
+* @returns The options to pass to `Transcript` / `HostTranscript`.
+*/
+function useTranscriptOptions(values) {
+	const picked = TRANSCRIPT_OPTION_KEYS.map((key) => values?.[key]);
+	const key = JSON.stringify(picked);
+	return useMemo(() => Object.fromEntries(TRANSCRIPT_OPTION_KEYS.flatMap((name, i) => picked[i] === void 0 ? [] : [[name, picked[i]]])), [key]);
+}
+//#endregion
+export { TRANSCRIPT_OPTION_KEYS, useTranscriptOptions };

package/dist/code/CodeHighlightProvider.d.ts

@@ -6,13 +6,13 @@ import { ReactNode } from "react";
 interface CodeHighlightProviderProps {
   /** The highlighter (its cache and worker). Default: the enclosing one, or a main-thread highlighter. */
   highlighter?: CodeHighlighter;
-  /** A bundled shiki theme id. Default: the enclosing one, or the document's appearance's GitHub theme. */
+  /** A bundled code theme id. Default: the enclosing one, or the document's appearance's GitHub theme. */
   theme?: string;
   /** The code blocks that read it. */
   children: ReactNode;
 }
 /**
- * Sets the highlighter and the shiki theme of every code block below.
+ * Sets the highlighter and the code theme of every code block below.
  *
  * @param props - The {@link CodeHighlightProviderProps}.
  */
@@ -23,7 +23,7 @@ declare function CodeHighlightProvider({ highlighter, theme, children }: CodeHig
  * @param watch - Follow class changes. Off when the caller has its own theme and only needs a value.
  */
 declare function useDocumentAppearance(watch?: boolean): Appearance;
-/** Returns the highlighter and the shiki theme in effect for a code block. */
+/** Returns the highlighter and the code theme in effect for a code block. */
 declare function useCodeHighlight(): {
   highlighter: CodeHighlighter;
   theme: string;

package/dist/code/CodeHighlightProvider.js

@@ -4,17 +4,17 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
 //#region src/code/CodeHighlightProvider.tsx
 /**
-* Which highlighter and which shiki theme the code blocks below use.
+* Which highlighter and which code theme the code blocks below use.
 *
 * Without a provider, blocks highlight on the main thread and follow the
 * document's appearance (the `.light` class on <html>, else dark) with the
 * neutral GitHub themes, as the site's own code does. An app passes its
 * worker-backed highlighter (`createCodeHighlighter({ createWorker })`) and,
-* to follow its own theme, the shiki theme for it (`shikiThemeFor`).
+* to follow its own theme, the code theme for it (`shikiThemeFor`).
 */
 const CodeHighlightContext = createContext({ highlighter: createCodeHighlighter() });
 /**
-* Sets the highlighter and the shiki theme of every code block below.
+* Sets the highlighter and the code theme of every code block below.
 *
 * @param props - The {@link CodeHighlightProviderProps}.
 */
@@ -61,7 +61,7 @@ const serverAppearance = () => "dark";
 function useDocumentAppearance(watch = true) {
 	return useSyncExternalStore(watch ? subscribeAppearance : noSubscription, documentAppearance, serverAppearance);
 }
-/** Returns the highlighter and the shiki theme in effect for a code block. */
+/** Returns the highlighter and the code theme in effect for a code block. */
 function useCodeHighlight() {
 	const { highlighter, theme } = useContext(CodeHighlightContext);
 	const appearance = useDocumentAppearance(!theme);

package/dist/code/HighlightedCode.d.ts

@@ -1,15 +1,20 @@
+import { CodeFrameProps } from "../components/CodeFrame.js";
 import { CSSProperties } from "react";
 //#region src/code/HighlightedCode.d.ts
 /** Props of {@link HighlightedCode}. */
 interface HighlightedCodeProps {
   /** The code to show, without the closing newline. */
   code: string;
-  /** A shiki language id (`plaintext` when the code names none). */
+  /** A language name or alias (`plaintext` when the code names none). */
   language: string;
   /** Extra classes on the root element. */
   className?: string;
   /** Inline styles on the root element, merged after the component's own. */
   style?: CSSProperties;
+  /** Accessible name of the copy button. Defaults to the frame's. */
+  copyLabel?: string;
+  /** Extra controls before Wrap and Copy: {@link CodeFrameProps.actions}. */
+  actions?: CodeFrameProps['actions'];
 }
 /**
  * Highlighted code with a copy button, plain until it nears the viewport. The highlighter and
@@ -17,6 +22,6 @@ interface HighlightedCodeProps {
  *
  * @param props - The {@link HighlightedCodeProps}.
  */
-declare function HighlightedCode({ code, language, className, style }: HighlightedCodeProps): import("react").JSX.Element;
+declare function HighlightedCode({ code, language, className, style, copyLabel, actions }: HighlightedCodeProps): import("react").JSX.Element;
 //#endregion
 export { HighlightedCode, HighlightedCodeProps };

package/dist/code/HighlightedCode.js

@@ -1,11 +1,11 @@
 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 shiki-highlighted code block in the design system's code frame: the
+* A highlighted code block in the design system's code frame: the
 * transcript's fenced blocks, tool inputs and files read.
 *
 * Viewport-gated highlighting. `content-visibility: auto` on timeline rows
@@ -24,16 +24,18 @@ import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 *
 * @param props - The {@link HighlightedCodeProps}.
 */
-function HighlightedCode({ code, language, className, style }) {
+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,
 		code,
 		className: ["zg-shiki my-2 text-xs", className].filter(Boolean).join(" "),
 		style,
+		...copyLabel ? { copyLabel } : {},
+		...actions ? { actions } : {},
 		children: html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("pre", {
 			"data-zg-highlight": pending ? "pending" : void 0,
 			className: "px-3 py-2 m-0 whitespace-pre font-mono text-[length:var(--zg-font-size-code)] leading-[1.5] text-[var(--zg-code-fg)]",
@@ -41,71 +43,5 @@ function HighlightedCode({ code, language, className, style }) {
 		})
 	});
 }
-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 };