zidane-ui 9.0.4 → 9.1.3

package/dist/chat/testing/fixture-composer-chrome.js

@@ -67,11 +67,6 @@ function createFixtureComposerChrome(options = {}) {
 	let prefs = { ...options.prefs };
 	const context = options.context ?? {};
 	const meter = createRunMeter();
-	const hudListeners = /* @__PURE__ */ new Set();
-	let hud = options.hud ?? {
-		sessions: {},
-		badges: {}
-	};
 	const write = (sessionId, patch) => {
 		sessions[sessionId] = {
 			...sessions[sessionId],
@@ -120,18 +115,7 @@ function createFixtureComposerChrome(options = {}) {
 			noteProgress: meter.noteProgress,
 			settleCost: meter.settleCost
 		},
-		hud: {
-			get: async () => hud,
-			onState: (listener) => {
-				hudListeners.add(listener);
-				return () => void hudListeners.delete(listener);
-			}
-		},
-		runSignal: (signal) => meter.handle(signal),
-		pushHud(snapshot) {
-			hud = snapshot;
-			for (const listener of hudListeners) listener(snapshot);
-		}
+		runSignal: (signal) => meter.handle(signal)
 	};
 }
 //#endregion

package/dist/chat/transcript/AnsiText.d.ts

@@ -0,0 +1,27 @@
+import { AnsiSpan } from "zidane/chat/pure";
+//#region src/chat/transcript/AnsiText.d.ts
+/** Props for {@link AnsiSpans}. */
+interface AnsiSpansProps {
+  /** One line's spans, as the parser gave them. */
+  spans: readonly AnsiSpan[];
+}
+/**
+ * One line of terminal output, already parsed (an output line's `spans`).
+ *
+ * @param props - The {@link AnsiSpansProps}.
+ */
+declare const AnsiSpans: import("react").MemoExoticComponent<({ spans }: AnsiSpansProps) => import("react").JSX.Element>;
+/** Props for {@link AnsiText}. */
+interface AnsiTextProps {
+  /** Terminal output, with or without ANSI codes. */
+  text: string;
+}
+/**
+ * Terminal output in the theme's colors, a line per line; parsed only when it holds an escape (else the text as
+ * is), once per text.
+ *
+ * @param props - The {@link AnsiTextProps}.
+ */
+declare const AnsiText: import("react").MemoExoticComponent<({ text }: AnsiTextProps) => import("react").JSX.Element>;
+//#endregion
+export { AnsiSpans, AnsiSpansProps, AnsiText, AnsiTextProps };

package/dist/chat/transcript/AnsiText.js

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { hasAnsi, parseAnsi } from "zidane/chat/pure";
+//#region src/chat/transcript/AnsiText.tsx
+/**
+* Terminal output in the theme's colors. ANSI codes become spans
+* (`zidane/chat/pure`'s parser): the 16 base colors are the theme's tokens
+* (`--zg-ansi-N`, set by `.zg-ansi` in transcript.css), so output reads in
+* light and dark alike; the 256-color palette and 24-bit colors are their
+* own. Text with no escape renders as is, never parsed.
+*/
+const CUBE = [
+	0,
+	95,
+	135,
+	175,
+	215,
+	255
+];
+/** A color as CSS: one of the theme's 16 (its token), a palette entry past them, or a hex color. */
+function paletteColor(color) {
+	if (typeof color === "string") return color;
+	if (color < 16) return `var(--zg-ansi-${color})`;
+	if (color >= 232) {
+		const v = 8 + (color - 232) * 10;
+		return `rgb(${v} ${v} ${v})`;
+	}
+	const n = color - 16;
+	return `rgb(${CUBE[Math.floor(n / 36) % 6]} ${CUBE[Math.floor(n / 6) % 6]} ${CUBE[n % 6]})`;
+}
+/** One styled span. */
+function Span({ span }) {
+	const style = span.style;
+	if (!style) return span.text;
+	const fg = style.inverse ? style.bg ?? null : style.fg;
+	const bg = style.inverse ? style.fg ?? null : style.bg;
+	const classes = [];
+	const css = {};
+	if (fg === null) css.color = "var(--zg-code-bg)";
+	else if (fg !== void 0) css.color = paletteColor(fg);
+	if (bg === null) css.backgroundColor = "var(--zg-text)";
+	else if (bg !== void 0) css.backgroundColor = `color-mix(in srgb, ${paletteColor(bg)} 25%, transparent)`;
+	if (style.bold) classes.push("font-semibold");
+	if (style.dim) classes.push("opacity-60");
+	if (style.italic) classes.push("italic");
+	if (style.underline) classes.push("underline");
+	return /* @__PURE__ */ jsx("span", {
+		className: classes.join(" ") || void 0,
+		style: Object.keys(css).length > 0 ? css : void 0,
+		children: span.text
+	});
+}
+/**
+* One line of terminal output, already parsed (an output line's `spans`).
+*
+* @param props - The {@link AnsiSpansProps}.
+*/
+const AnsiSpans = memo(function AnsiSpans({ spans }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: spans.map((span, i) => /* @__PURE__ */ jsx(Span, { span }, i)) });
+});
+/**
+* Terminal output in the theme's colors, a line per line; parsed only when it holds an escape (else the text as
+* is), once per text.
+*
+* @param props - The {@link AnsiTextProps}.
+*/
+const AnsiText = memo(function AnsiText({ text }) {
+	const lines = useMemo(() => hasAnsi(text) ? parseAnsi(text) : null, [text]);
+	if (!lines) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	return /* @__PURE__ */ jsx(Fragment, { children: lines.map((spans, i) => /* @__PURE__ */ jsxs("span", { children: [i > 0 && "\n", /* @__PURE__ */ jsx(AnsiSpans, { spans })] }, i)) });
+});
+//#endregion
+export { AnsiSpans, AnsiText };

package/dist/chat/transcript/BadgeMenu.d.ts

@@ -36,6 +36,8 @@ interface BadgeEffectContext {
   system?: BadgeMenuSystem | undefined;
   /** The notices' words. */
   labels: Pick<ChatLabels, 'badgePathUnavailable' | 'badgeNoComposer' | 'badgeCopied'>;
+  /** Offers an `open` link to the extensions' link handlers, calling `fallback` when none takes it. Absent: `fallback` at once. */
+  openLink?: ((url: string, fallback: () => void) => Promise<boolean>) | undefined;
 }
 /** Props for {@link BadgeMenuProvider}. */
 interface BadgeMenuProviderProps {

package/dist/chat/transcript/BadgeMenu.js

@@ -1,5 +1,9 @@
 import { RowActionsMenu } from "../../components/RowActionsMenu.js";
 import { useOptionalChatHost } from "../ChatProvider.js";
+import { useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
+import { openInNewTab } from "../../extensions/headless/links.js";
+import { useLinkRouter } from "../../extensions/links.js";
+import { extensionsBadgeActions } from "../headless/extension-sources.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -12,7 +16,8 @@ import { builtinBadgeActions, builtinBadgeEffect, mergeBadgeMenu } from "zidane/
 * A badge describes what it stands for (`BadgeTarget`) and calls
 * `useBadgeMenu()(event, target, cwd)`. The menu shows the built-in actions
 * at once (copy, add to prompt, open: `zidane/chat/pure`), asks the host for
-* the extensions' items (`ChatHost.badges`) and merges them in when they
+* the extensions' items (`ChatHost.badges`, else the extensions host's
+* `BadgeAction` items: `extensionsBadgeActions`) and merges them in when they
 * land, and applies what a picked action answers (`BadgeActionEffect`):
 * clipboard, composer, opener, a brief notice. Opening stops the event, so
 * the turn's own menu never opens over a badge.
@@ -36,8 +41,15 @@ async function applyBadgeEffect(effect, ctx) {
 		else composer.insert(`${effect.insert} `);
 	}
 	if (effect.open !== void 0) {
-		if (/^https?:\/\//i.test(effect.open)) window.open(effect.open, "_blank", "noopener");
-		else if (!await (system?.openPath(effect.open) ?? Promise.resolve(false)).catch(() => false)) return labels.badgePathUnavailable;
+		const url = effect.open;
+		let unavailable = Promise.resolve(false);
+		const fallback = () => {
+			if (/^https?:\/\//i.test(url)) openInNewTab(url);
+			else unavailable = (system?.openPath(url) ?? Promise.resolve(false)).catch(() => false).then((ok) => !ok);
+		};
+		if (ctx.openLink) await ctx.openLink(url, fallback);
+		else fallback();
+		if (await unavailable) return labels.badgePathUnavailable;
 	}
 	if (effect.reveal !== void 0 && !await (system?.revealPath(effect.reveal) ?? Promise.resolve(false)).catch(() => false)) return labels.badgePathUnavailable;
 	if (dropped) return labels.badgeNoComposer;
@@ -49,8 +61,10 @@ async function applyBadgeEffect(effect, ctx) {
 * @param props - The composer and the path opener the effects use, and the children.
 */
 function BadgeMenuProvider({ composer, system, children }) {
-	const badges = useOptionalChatHost()?.badges;
+	const extensions = useExtensionsHost();
+	const badges = useOptionalChatHost()?.badges ?? extensionsBadgeActions(extensions);
 	const labels = useChatLabels();
+	const links = useLinkRouter();
 	const [open, setOpen] = useState(null);
 	const [notice, setNotice] = useState(null);
 	const seq = useRef(0);
@@ -100,7 +114,8 @@ function BadgeMenuProvider({ composer, system, children }) {
 						builtin: item.source === "builtin" ? item.id : null,
 						composer,
 						system,
-						labels
+						labels,
+						...links.routed ? { openLink: (url, fallback) => links.open(url, { source: "badge" }, fallback) } : {}
 					});
 					if (text) setNotice({
 						text,
@@ -115,7 +130,8 @@ function BadgeMenuProvider({ composer, system, children }) {
 		badges,
 		composer,
 		system,
-		labels
+		labels,
+		links
 	]);
 	return /* @__PURE__ */ jsxs(BadgeMenuContext.Provider, {
 		value: show,

package/dist/chat/transcript/CardMarkdown.js

@@ -1,3 +1,4 @@
+import { useLinkRouter } from "../../extensions/links.js";
 import { INLINE_CODE_CLASS } from "./markdown-context.js";
 import { jsx } from "react/jsx-runtime";
 import { memo, useLayoutEffect, useRef, useState } from "react";
@@ -19,6 +20,21 @@ const heading = ({ children }) => /* @__PURE__ */ jsx("p", {
 	className: "m-0 font-medium text-[var(--zg-text)]",
 	children
 });
+/** A link in a card: offered to the extensions' link handlers first, else a new tab. */
+function CardLink({ href, children }) {
+	const onClick = useLinkRouter().anchorClick(href, { source: "transcript" });
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: "text-[var(--zg-text)] no-underline hover:underline",
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick?.(e);
+		},
+		children
+	});
+}
 const COMPONENTS = {
 	h1: heading,
 	h2: heading,
@@ -46,12 +62,8 @@ const COMPONENTS = {
 		className: "m-0 pl-2 border-l-2 border-[var(--zg-hairline)]",
 		children
 	}),
-	a: ({ href, children }) => /* @__PURE__ */ jsx("a", {
+	a: ({ href, children }) => /* @__PURE__ */ jsx(CardLink, {
 		href,
-		target: "_blank",
-		rel: "noreferrer",
-		className: "text-[var(--zg-text)] no-underline hover:underline",
-		onClick: (e) => e.stopPropagation(),
 		children
 	}),
 	code: ({ children }) => /* @__PURE__ */ jsx("code", {

package/dist/chat/transcript/ChipCard.js

@@ -1,4 +1,5 @@
 import { HoverCard } from "../../components/floating/HoverCard.js";
+import { useLinkRouter } from "../../extensions/links.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { DiffFacts, badgeColorStyle, badgeToneClass } from "../../session/ArtifactRowChips.js";
 import { CardMarkdown } from "./CardMarkdown.js";
@@ -30,6 +31,7 @@ const TITLE = "font-medium text-[var(--zg-text)] text-zg-ui leading-[18px]";
 */
 function ChipCard({ view, loading = false, onTitle, mono = false, className, style }) {
 	const labels = useChatLabels();
+	const links = useLinkRouter();
 	const card = view.card;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex flex-col gap-1.5 px-3 py-2.5 text-zg-label leading-4${className ? ` ${className}` : ""}`,
@@ -64,6 +66,7 @@ function ChipCard({ view, loading = false, onTitle, mono = false, className, sty
 				href: view.href,
 				target: "_blank",
 				rel: "noreferrer",
+				onClick: links.anchorClick(view.href, { source: "chip" }),
 				className: `${TITLE} no-underline hover:underline`,
 				children: view.title
 			}) : /* @__PURE__ */ jsx("div", {
@@ -74,6 +77,7 @@ function ChipCard({ view, loading = false, onTitle, mono = false, className, sty
 				href: card.subtitleHref,
 				target: "_blank",
 				rel: "noreferrer",
+				onClick: links.anchorClick(card.subtitleHref, { source: "chip" }),
 				className: "zg-meta truncate no-underline hover:underline hover:text-[var(--zg-text)]",
 				children: card.subtitle
 			}) : /* @__PURE__ */ jsx("div", {
@@ -104,6 +108,7 @@ function ChipCard({ view, loading = false, onTitle, mono = false, className, sty
 }
 /** A fact's value: a change size in the diff colors, a link, or text. */
 function CardFactValue({ fact }) {
+	const onClick = useLinkRouter().anchorClick(fact.href, { source: "chip" });
 	if (fact.diff) {
 		const { added, removed, files } = fact.diff;
 		return /* @__PURE__ */ jsx(DiffFacts, {
@@ -117,6 +122,7 @@ function CardFactValue({ fact }) {
 		href: fact.href,
 		target: "_blank",
 		rel: "noreferrer",
+		onClick,
 		className: "text-[var(--zg-text)] no-underline hover:underline",
 		children: fact.value
 	});

package/dist/chat/transcript/ChipCards.js

@@ -1,8 +1,8 @@
 import { useChatLabels } from "../useChatLabels.js";
-import { commandView, commitView, sessionView, skillView } from "../headless/chip-views.js";
-import { useCommand, useCommitInfo, useReferencedSession, useSkill } from "./chip-details.js";
 import { CommandScopeContext, OpenSessionContext } from "./markdown-context.js";
 import { ChipCard } from "./ChipCard.js";
+import { commandView, commitView, sessionView, skillView } from "../headless/chip-views.js";
+import { useCommand, useCommitInfo, useReferencedSession, useSkill } from "./chip-details.js";
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 //#region src/chat/transcript/ChipCards.tsx

package/dist/chat/transcript/CodemodeScript.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode } from "react";
+import { ScriptProgress } from "zidane/chat/pure";
+//#region src/chat/transcript/CodemodeScript.d.ts
+/** Props for {@link CodemodeScript}. */
+interface CodemodeScriptProps {
+  /** The script, as the model wrote it. */
+  code: string;
+  /** Its live progress (the row's `scriptProgress`). Without it, the lines show no state. */
+  progress?: ScriptProgress;
+  /** The script ended. */
+  finished?: boolean;
+  /** It ended without error. */
+  ok?: boolean;
+  /** Its result text: a failed script's names the line it threw at. */
+  result?: string | null;
+  /**
+   * Its output once it ends (the tool row's output panel), shown in the box its live lines were in: the
+   * end swaps the lines for it in place. Without it, the box closes at the end.
+   */
+  output?: ReactNode;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element, merged after the component's own. */
+  style?: CSSProperties;
+}
+/**
+ * A codemode script with its line numbers and, while it streams its progress, the state of each line.
+ *
+ * @param props - The script, its progress and how it ended.
+ */
+declare const CodemodeScript: import("react").MemoExoticComponent<({ code, progress, finished, ok, result, output, className, style }: CodemodeScriptProps) => import("react").JSX.Element>;
+//#endregion
+export { CodemodeScript, CodemodeScriptProps };

package/dist/chat/transcript/CodemodeScript.js

@@ -0,0 +1,212 @@
+import { Tooltip } from "../../components/Tooltip.js";
+import { CodeFrame } from "../../components/CodeFrame.js";
+import { useNearViewport } from "../../hooks/useNearViewport.js";
+import { useHighlightedHtml } from "../../code/use-highlighted-html.js";
+import { useChatLabels } from "../useChatLabels.js";
+import { FailedMark } from "./frame.js";
+import { highlightedLines } from "../../code/highlight-lines.js";
+import { LiveOutput } from "./LiveOutput.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { SCRIPT_OUTPUT_TAIL_LINES, formatRunDuration, scriptProgressView } from "zidane/chat/pure";
+//#region src/chat/transcript/CodemodeScript.tsx
+/**
+* A codemode script, line by line: a gutter with each line's number and, while
+* the script streams its progress (`Settings.codemodeStreamProgress`), the
+* state of the line's latest call (running, done, failed). Lines the script
+* has not reached yet stay dim; the running line carries the accent and the
+* transcript's running sweep; a call that ends shows its check over a short
+* wash; the line a failed script threw at is red, its error under it. Under
+* the script, the last lines it printed or its shell calls wrote, until it
+* ends. A long script keeps its running line in view until the reader scrolls.
+*
+* The highlighter's HTML is split into lines (`highlightedLines`), so each
+* line is its own element and wraps with the frame's Wrap toggle.
+*/
+/** Lines a running script shows before it scrolls to follow its running line. */
+const SCRIPT_FOLLOW_LINES = 15;
+/**
+* A codemode script with its line numbers and, while it streams its progress, the state of each line.
+*
+* @param props - The script, its progress and how it ended.
+*/
+const CodemodeScript = memo(function CodemodeScript({ code, progress, finished = false, ok = true, result, output, className, style }) {
+	const labels = useChatLabels();
+	const view = useMemo(() => scriptProgressView(code, progress, finished, ok, result), [
+		code,
+		progress,
+		finished,
+		ok,
+		result
+	]);
+	const source = useMemo(() => view.lines.map((line) => line.text).join("\n"), [view.lines]);
+	const frameRef = useRef(null);
+	const near = useNearViewport(frameRef);
+	const html = useHighlightedHtml(source, "javascript", near);
+	const tokens = useMemo(() => html ? highlightedLines(html, view.lines.length) : null, [html, view.lines.length]);
+	const follow = view.tracked && !finished && view.lines.length > SCRIPT_FOLLOW_LINES;
+	const listRef = useRef(null);
+	const [userScrolled, setUserScrolled] = useState(false);
+	const stopFollowing = () => setUserScrolled(true);
+	useEffect(() => {
+		const list = listRef.current;
+		if (!follow || userScrolled || !list || view.active === void 0) return;
+		const line = list.querySelector(`[data-line="${view.active}"]`);
+		if (line) list.scrollTop = line.offsetTop - list.clientHeight / 2 + line.offsetHeight / 2;
+	}, [
+		follow,
+		userScrolled,
+		view.active
+	]);
+	const digits = String(view.lines.at(-1)?.label ?? 1).length;
+	const showLive = view.tracked && !finished && view.output.length > 0;
+	const showEnd = view.tracked && finished && output != null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["my-2", className].filter(Boolean).join(" "),
+		style,
+		"data-testid": "codemode-script",
+		children: [/* @__PURE__ */ jsx(CodeFrame, {
+			ref: frameRef,
+			code: source,
+			className: "zg-shiki zg-script-frame text-xs",
+			...view.options ? { actions: (buttonClass) => /* @__PURE__ */ jsx(ScriptOptionsButton, {
+				options: view.options,
+				buttonClass
+			}) } : {},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: listRef,
+				className: "zg-script-lines",
+				"data-follow": follow ? "" : void 0,
+				style: { "--zg-script-digits": `${digits}ch` },
+				...follow ? {
+					onWheel: stopFollowing,
+					onTouchMove: stopFollowing
+				} : {},
+				children: view.lines.map((line, i) => /* @__PURE__ */ jsx(ScriptLine, {
+					number: line.number,
+					label: line.label,
+					text: line.text,
+					tokens: tokens?.[i],
+					state: line.state,
+					tracked: view.tracked,
+					error: view.error?.line === line.number ? view.error.message : void 0
+				}, line.number))
+			})
+		}), view.tracked && /* @__PURE__ */ jsx("div", {
+			className: "zg-collapsible",
+			"data-open": showLive || showEnd,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "zg-collapsible-inner",
+				children: showEnd ? output : /* @__PURE__ */ jsx(LiveOutput, {
+					lines: view.output,
+					window: SCRIPT_OUTPUT_TAIL_LINES,
+					label: labels.scriptLiveOutput
+				})
+			})
+		})]
+	});
+});
+const ScriptLine = memo(function ScriptLine({ number, label, text, tokens, state, tracked, error }) {
+	const labels = useChatLabels();
+	const previous = useRef(state);
+	const [settling, setSettling] = useState(false);
+	useEffect(() => {
+		if (previous.current !== state && state === "done") setSettling(true);
+		previous.current = state;
+	}, [state]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "zg-script-line",
+		"data-line": number,
+		"data-state": tracked ? state : void 0,
+		"data-settling": settling ? "" : void 0,
+		onAnimationEnd: settling ? () => setSettling(false) : void 0,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "zg-script-gutter",
+			children: [tracked && /* @__PURE__ */ jsx(LineMark, { state }), /* @__PURE__ */ jsx("span", {
+				className: "zg-script-number",
+				"aria-hidden": true,
+				children: label
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "zg-script-code",
+			children: [tokens ? tokens.map((token, k) => /* @__PURE__ */ jsx("span", {
+				style: {
+					color: token.color,
+					fontStyle: token.fontStyle,
+					fontWeight: token.fontWeight
+				},
+				children: token.text
+			}, k)) : text, text === "" && "\n"]
+		})]
+	}), error !== void 0 && /* @__PURE__ */ jsxs("div", {
+		className: "zg-script-line zg-script-error",
+		role: "note",
+		"aria-label": labels.stepFailed,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "zg-script-gutter",
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("span", { className: "zg-script-mark i-ph-arrow-elbow-down-right" })
+		}), /* @__PURE__ */ jsx("span", {
+			className: "zg-script-code",
+			children: error
+		})]
+	})] });
+});
+/** The script's `// @options`, behind a button beside Copy: each setting in words. */
+function ScriptOptionsButton({ options, buttonClass }) {
+	const labels = useChatLabels();
+	const rows = [
+		...options.timeoutMs !== void 0 ? [[labels.scriptOptionTimeout, formatRunDuration(options.timeoutMs)]] : [],
+		...options.maxOutputTokens !== void 0 ? [[labels.scriptOptionOutput, labels.scriptOptionTokens(options.maxOutputTokens)]] : [],
+		...options.other.map(({ key, value }) => [key, value]),
+		...options.raw !== void 0 ? [[labels.scriptOptions, options.raw]] : []
+	];
+	return /* @__PURE__ */ jsx(Tooltip, {
+		portal: true,
+		align: "end",
+		maxWidth: 280,
+		label: /* @__PURE__ */ jsx("span", {
+			className: "grid grid-cols-[auto_auto] gap-x-3 gap-y-0.5 py-0.5",
+			children: rows.map(([name, value]) => /* @__PURE__ */ jsxs("span", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[var(--zg-text-muted)]",
+					children: name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-right",
+					children: value
+				})]
+			}, name))
+		}),
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": labels.scriptOptions,
+			className: buttonClass,
+			onClick: (event) => event.stopPropagation(),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "i-ph-sliders-horizontal text-zg-label",
+				"aria-hidden": true
+			})
+		})
+	});
+}
+function LineMark({ state }) {
+	const labels = useChatLabels();
+	if (state === "running") return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": labels.stepRunning,
+		className: "zg-script-mark i-ph-circle-notch animate-spin"
+	});
+	if (state === "done") return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": labels.stepDone,
+		className: "zg-script-mark i-ph-check"
+	});
+	if (state === "failed") return /* @__PURE__ */ jsx(FailedMark, { className: "zg-script-mark" });
+	return /* @__PURE__ */ jsx("span", {
+		className: "zg-script-mark",
+		"aria-hidden": true
+	});
+}
+//#endregion
+export { CodemodeScript };

package/dist/chat/transcript/EditDiffBlock.js

@@ -1,4 +1,5 @@
 import { CopyButton } from "../../components/CopyButton.js";
+import { useDisplayPath } from "../../hooks/useDisplayPath.js";
 import { DiffLines } from "./DiffLines.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
@@ -16,6 +17,7 @@ const EditDiffBlock = memo(({ edit, className, style }) => {
 	const outcomes = edit.outcomes;
 	const counts = useMemo(() => summarizeOutcomes(outcomes), [outcomes]);
 	const hunks = edit.hunks;
+	const shownPath = useDisplayPath().path(edit.path);
 	const perHunkLines = useMemo(() => hunks.map((h) => computeLineDiff(h.oldString, h.newString)), [hunks]);
 	const hasMixedOutcomes = outcomes != null && (counts.denied > 0 || counts.skipped > 0 || counts.failed > 0 || counts.pending > 0);
 	const usePerHunkLayout = outcomes != null && (hunks.length > 1 || hasMixedOutcomes);
@@ -26,7 +28,8 @@ const EditDiffBlock = memo(({ edit, className, style }) => {
 			className: `pl-2.5 border-b border-[var(--zg-hairline)] flex items-center gap-3 text-zg-meta ${hasMixedOutcomes ? "py-1.5 pr-2.5" : "h-8 pr-1"}`,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "zg-meta text-[var(--zg-text)] truncate",
-				children: edit.path
+				title: edit.path,
+				children: shownPath
 			}), hasMixedOutcomes ? /* @__PURE__ */ jsx(OutcomeSummary, { counts }) : /* @__PURE__ */ jsx(CopyButton, {
 				text: edit.path,
 				label: "Copy file path",

package/dist/chat/transcript/FileChip.js

@@ -1,13 +1,14 @@
+import { useLinkRouter } from "../../extensions/links.js";
+import { classifyInlineCode, resolveChipPath } from "../headless/file-chip.js";
 import { useChatLabels } from "../useChatLabels.js";
-import { classifyInlineRef, refHref } from "./remark-refs.js";
-import { useChipResolution, useResolveChipNow } from "./chip-resolve.js";
 import { useBadgeMenu } from "./BadgeMenu.js";
-import { INLINE_CODE_CLASS, MarkdownContext } from "./markdown-context.js";
-import { classifyInlineCode, resolveChipPath } from "../headless/file-chip.js";
 import { FileBadgeIcon, fileBadgeName } from "./badges.js";
+import { INLINE_CODE_CLASS, MarkdownContext } from "./markdown-context.js";
 import { ChipHover } from "./ChipCard.js";
 import { CommitCard } from "./ChipCards.js";
+import { useChipResolution, useResolveChipNow } from "./chip-resolve.js";
 import { ReferenceChip } from "./ReferenceText.js";
+import { classifyInlineRef, refHref } from "./remark-refs.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { GITHUB_ISSUE_PROVIDER_ID, GITHUB_PULL_PROVIDER_ID, githubRefKey } from "zidane/chat/pure";
@@ -82,6 +83,7 @@ function PlainRefChip({ parsed, label, link }) {
 	const href = link ?? refHref(parsed, repoWebBase);
 	const icon = parsed.kind === "sha" ? "i-ph-git-commit" : link && NUMBER_LINK_RE.exec(link)?.[3] === "pull" ? "i-ph-git-pull-request" : "i-ph-hash";
 	const text = parsed.kind === "sha" ? label.slice(0, 7) : label;
+	const onClick = useLinkRouter().anchorClick(href ?? void 0, { source: "chip" });
 	const onContextMenu = useChipMenu({
 		kind: parsed.kind === "number" ? "pull_request" : "commit",
 		text: parsed.kind === "sha" ? parsed.value : label,
@@ -102,6 +104,7 @@ function PlainRefChip({ parsed, label, link }) {
 		rel: "noreferrer",
 		title: card ? void 0 : href,
 		className: CHIP_CLASS,
+		onClick,
 		onContextMenu,
 		children: inner
 	}) : /* @__PURE__ */ jsx("span", {
@@ -190,6 +193,7 @@ function BranchChip({ branch, text }) {
 		text,
 		...href ? { href } : {}
 	});
+	const onClick = useLinkRouter().anchorClick(href ?? void 0, { source: "chip" });
 	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		className: "zg-badge-icon i-ph-git-branch"
@@ -204,6 +208,7 @@ function BranchChip({ branch, text }) {
 		title: href,
 		"data-kind": "branch",
 		className: CHIP_CLASS,
+		onClick,
 		onContextMenu,
 		children: inner
 	}) : /* @__PURE__ */ jsx("span", {
@@ -235,6 +240,7 @@ function LocalFileChip({ chip, resolution }) {
 	const { cwd, open: openPath } = useContext(MarkdownContext);
 	const [failed, setFailed] = useState(false);
 	const resolveChipNow = useResolveChipNow();
+	const links = useLinkRouter();
 	const target = resolution ? resolution.path : resolveChipPath(chip, cwd);
 	const shown = resolution && resolution.kind !== chip.kind ? resolution.kind === "dir" ? {
 		...chip,
@@ -254,9 +260,16 @@ function LocalFileChip({ chip, resolution }) {
 		if (fresh && fresh.kind !== "file" && fresh.kind !== "dir") return;
 		const path = fresh ? fresh.path : target;
 		if (!path) return;
-		if (!openPath) return;
-		const ok = await openPath(path, (fresh ?? resolution ?? chip).kind === "dir" ? "dir" : "file", event);
-		if (ok !== void 0) setFailed(!ok);
+		const kind = (fresh ?? resolution ?? chip).kind === "dir" ? "dir" : "file";
+		await links.open(path, {
+			source: "chip",
+			...event ? { event } : {}
+		}, () => {
+			if (!openPath) return;
+			openPath(path, kind, event).then((ok) => {
+				if (ok !== void 0) setFailed(!ok);
+			});
+		});
 	};
 	const inner = /* @__PURE__ */ jsx(ChipFace, { chip: shown });
 	if (!target) return /* @__PURE__ */ jsx("span", {

package/dist/chat/transcript/InlineChipText.js

@@ -1,6 +1,6 @@
-import { findRefs } from "./remark-refs.js";
 import { urlRefs } from "../headless/badge-refs.js";
 import { LinkBadge } from "./badges.js";
+import { findRefs } from "./remark-refs.js";
 import { InlineCode, RefChip } from "./FileChip.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/chat/transcript/InlineChipText.tsx