zidane-ui 9.0.4 → 9.1.3

package/dist/onboarding/sources/SourceBrowser.d.ts

@@ -0,0 +1,87 @@
+import { SkillSourceImages } from "../headless/host.js";
+import { SourceCard } from "../skills/parts.js";
+import { CSSProperties, ReactNode } from "react";
+import { RecommendedSkillSource } from "zidane/chat/pure";
+//#region src/onboarding/sources/SourceBrowser.d.ts
+/** A pick: anything with a key that is stable across listings of the same source. */
+interface SourcePick {
+  /** Identifies the pick among all picks, from any source. */
+  key: string;
+}
+/** The words of a {@link SourceBrowser} that depend on what it lists. */
+interface SourceBrowserWords {
+  /** How many rows the open source holds: `12 skills`. */
+  count: (count: number) => string;
+  /** The open source holds nothing to install. */
+  empty: string;
+  /** Under {@link SourceBrowserWords.empty}. */
+  emptyHint: string;
+  /** The filter field's label and placeholder. */
+  filter: string;
+  /** No row matches the filter. */
+  noMatch: string;
+}
+/** What {@link SourceBrowserProps.renderRow} gets for one row. */
+interface SourceBrowserRow<L, I, P extends SourcePick> {
+  /** The row's item. */
+  item: I;
+  /** The listing it comes from. */
+  listing: L;
+  /** Its pick. */
+  pick: P;
+  /** It is picked. */
+  picked: boolean;
+  /** Picks or unpicks it. */
+  onToggle: (on: boolean) => void;
+}
+/** Props of {@link SourceBrowser}. */
+interface SourceBrowserProps<L, I, P extends SourcePick> {
+  /** Lists a source. A rejection shows as a source that did not load, with Retry. */
+  browse: (input: string) => Promise<L>;
+  /** The rows of a listing. */
+  itemsOf: (listing: L) => readonly I[];
+  /** The card over a listing's rows: its name, picture, link and description. */
+  cardOf: (listing: L) => SourceCard;
+  /** A row's pick. */
+  pickOf: (item: I, listing: L) => P;
+  /** Whether a row can be picked (not installed yet, installable). Select all takes these. */
+  selectable: (item: I, listing: L) => boolean;
+  /** Draws one row. */
+  renderRow: (row: SourceBrowserRow<L, I, P>) => ReactNode;
+  /** The texts the filter matches on. */
+  searchText: (item: I) => readonly string[];
+  /** The words that depend on what it lists. */
+  words: SourceBrowserWords;
+  /** The picks so far, from any source. */
+  picks: readonly P[];
+  /** Picks or unpicks rows: one row, or a whole source. */
+  onToggle: (picks: readonly P[], on: boolean) => void;
+  /** A listing that holds why it could not be read, and nothing to show: it shows as a failed source. */
+  failureOf?: (listing: L) => string | undefined;
+  /** A calm note over a listing's rows (a source out of reach, the rows from the app's own catalog). */
+  noteOf?: (listing: L) => ReactNode;
+  /** The listing stopped early. */
+  truncatedOf?: (listing: L) => boolean;
+  /** Called once per source when its listing first arrives (a preselection to pick). */
+  onListed?: (listing: L) => void;
+  /** The sources to suggest. */
+  sources: readonly RecommendedSkillSource[];
+  /** Where the avatars and previews come from. */
+  images: SkillSourceImages;
+  /** A source to open at once. */
+  initial?: string;
+  /** The small version: the recommended sources as chips, and no preview images. */
+  compact?: boolean;
+  /** Extra classes on the browser. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+/**
+ * Renders a source browser: a field, the recommended sources, and the rows of the open source.
+ *
+ * @param props - Component props.
+ */
+declare function SourceBrowser<L, I, P extends SourcePick>({ browse, itemsOf, cardOf, pickOf, selectable: canPick, renderRow, searchText, words, picks, onToggle, failureOf, noteOf, truncatedOf, onListed, sources, images, initial, compact, className, style }: SourceBrowserProps<L, I, P>): import("react").JSX.Element;
+//#endregion
+export { SourceBrowser, SourceBrowserProps, SourceBrowserRow, SourceBrowserWords, type SourceCard, SourcePick };

package/dist/onboarding/sources/SourceBrowser.js

@@ -0,0 +1,292 @@
+import { buttonClass } from "../../components/button.js";
+import { EmptyState } from "../../components/Surface.js";
+import { ErrorNote, INPUT_CLASS } from "../../components/Form.js";
+import { useOnboardingLabels } from "../OnboardingProvider.js";
+import { SkeletonListing, SourceChips, SourceHeader, SourceRows } from "../skills/parts.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/onboarding/sources/SourceBrowser.tsx
+/**
+* Finds things to install in a repository or a package, and picks them: the
+* one source browser of Skills and Extensions. A field takes any source the
+* installer takes. Until a source opens, the recommended sources show as
+* rows with their preview image. Once one opens, they turn into chips above
+* it, and the source shows its card over its rows, to check. The compact
+* version, for a Settings page, keeps the chips at all times and shows no
+* preview image. Picks can span sources: the parent keeps them (a wizard
+* draft, a Settings form) and installs them.
+*
+* What a listing holds and how a row draws come from the caller
+* (`SkillSourceBrowser`, `ExtensionSourceBrowser`): this owns the field, the
+* chips, the card, the filter, the states and the picks.
+*
+* A source lists once per mount: switching back to it is instant. A late
+* answer for a source the user left is dropped.
+*/
+/** Above this many rows, a filter field shows over the list. */
+const FILTER_FROM = 12;
+function messageOf(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+/**
+* Renders a source browser: a field, the recommended sources, and the rows of the open source.
+*
+* @param props - Component props.
+*/
+function SourceBrowser({ browse, itemsOf, cardOf, pickOf, selectable: canPick, renderRow, searchText, words, picks, onToggle, failureOf, noteOf, truncatedOf, onListed, sources, images, initial, compact = false, className = "", style }) {
+	const labels = useOnboardingLabels();
+	const id = useId();
+	const [field, setField] = useState("");
+	const [filter, setFilter] = useState("");
+	const [opened, setOpened] = useState(() => initial ? {
+		input: initial.trim(),
+		kind: "loading"
+	} : null);
+	const listings = useRef(/* @__PURE__ */ new Map());
+	const seq = useRef(0);
+	const panel = useRef(null);
+	const latest = useRef({
+		onListed,
+		failureOf
+	});
+	useEffect(() => {
+		latest.current = {
+			onListed,
+			failureOf
+		};
+	});
+	const load = useCallback((text, n) => {
+		browse(text).then((listing) => {
+			const failure = latest.current.failureOf?.(listing);
+			if (failure) {
+				if (seq.current === n) setOpened({
+					input: text,
+					kind: "error",
+					message: failure
+				});
+				return;
+			}
+			listings.current.set(text, listing);
+			if (seq.current !== n) return;
+			setOpened({
+				input: text,
+				kind: "ready",
+				listing
+			});
+			latest.current.onListed?.(listing);
+		}, (error) => {
+			if (seq.current === n) setOpened({
+				input: text,
+				kind: "error",
+				message: messageOf(error)
+			});
+		});
+	}, [browse]);
+	const open = useCallback((input) => {
+		const text = input.trim();
+		if (!text) return;
+		const n = ++seq.current;
+		setFilter("");
+		const known = listings.current.get(text);
+		if (known) {
+			setOpened({
+				input: text,
+				kind: "ready",
+				listing: known
+			});
+			return;
+		}
+		setOpened({
+			input: text,
+			kind: "loading"
+		});
+		load(text, n);
+	}, [load]);
+	useEffect(() => {
+		const counter = seq;
+		if (initial?.trim()) load(initial.trim(), counter.current);
+		return () => {
+			counter.current++;
+		};
+	}, []);
+	const pickKeys = useMemo(() => new Set(picks.map((pick) => pick.key)), [picks]);
+	const pickedIn = (listing) => itemsOf(listing).filter((item) => pickKeys.has(pickOf(item, listing).key)).length;
+	const pickedFrom = (source) => {
+		const listing = listings.current.get(source.spec);
+		return listing ? pickedIn(listing) : 0;
+	};
+	const openSource = (source) => {
+		setField("");
+		open(source.spec);
+		panel.current?.scrollIntoView?.({ block: "nearest" });
+	};
+	const close = () => {
+		seq.current++;
+		setOpened(null);
+	};
+	const submit = (event) => {
+		event.preventDefault();
+		open(field);
+	};
+	const listing = opened?.kind === "ready" ? opened.listing : null;
+	const items = listing ? itemsOf(listing) : [];
+	const selectable = listing ? items.filter((item) => canPick(item, listing)) : [];
+	const query = filter.trim().toLowerCase();
+	const shown = query ? items.filter((item) => searchText(item).some((text) => text.toLowerCase().includes(query))) : items;
+	const picked = listing ? pickedIn(listing) : 0;
+	const allPicked = selectable.length > 0 && selectable.every((item) => pickKeys.has(pickOf(item, listing).key));
+	const card = listing ? cardOf(listing) : null;
+	const note = listing ? noteOf?.(listing) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `zg-source flex flex-col gap-3 min-w-0 ${className}`,
+		style,
+		children: [
+			/* @__PURE__ */ jsxs("form", {
+				onSubmit: submit,
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: `${id}-source`,
+					className: "sr-only",
+					children: labels.sourceField
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "relative flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-zg-label text-[var(--zg-text-muted)] pointer-events-none"
+						}), /* @__PURE__ */ jsx("input", {
+							id: `${id}-source`,
+							value: field,
+							onChange: (event) => setField(event.target.value),
+							placeholder: labels.sourcePlaceholder,
+							spellCheck: false,
+							autoComplete: "off",
+							className: `${INPUT_CLASS} pl-8 text-ellipsis`
+						})]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						disabled: !field.trim(),
+						className: buttonClass({ variant: "secondary" }),
+						children: labels.browse
+					})]
+				})]
+			}),
+			opened && !compact ? /* @__PURE__ */ jsx(SourceChips, {
+				sources,
+				images,
+				current: opened.input,
+				picked: pickedFrom,
+				onOpen: openSource,
+				onClose: close
+			}) : /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-labelledby": `${id}-recommended`,
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: `${id}-recommended`,
+					className: "zg-section-label m-0 px-1",
+					children: labels.recommendedSources
+				}), compact ? /* @__PURE__ */ jsx(SourceChips, {
+					sources,
+					images,
+					current: opened?.input,
+					picked: pickedFrom,
+					onOpen: openSource,
+					...opened ? { onClose: close } : {}
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "zg-tray rounded-zg-xl p-2",
+					children: /* @__PURE__ */ jsx(SourceRows, {
+						sources,
+						images,
+						picked: pickedFrom,
+						onOpen: openSource
+					})
+				})]
+			}),
+			opened && /* @__PURE__ */ jsxs("div", {
+				ref: panel,
+				className: "zg-tray rounded-zg-xl p-2 flex flex-col gap-1 min-w-0",
+				"aria-busy": opened.kind === "loading",
+				children: [
+					opened.kind === "loading" && /* @__PURE__ */ jsx(SkeletonListing, {
+						label: labels.browsing(opened.input),
+						preview: !compact
+					}),
+					opened.kind === "error" && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-3 p-3",
+						children: [/* @__PURE__ */ jsx(ErrorNote, { children: labels.browseFailed(opened.message) }), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => open(opened.input),
+							className: `${buttonClass({
+								variant: "secondary",
+								size: "sm"
+							})} self-start`,
+							children: labels.retry
+						})]
+					}),
+					listing && card && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(SourceHeader, {
+							source: card,
+							count: words.count(items.length),
+							images,
+							picked,
+							allPicked,
+							selectable: selectable.length > 0,
+							preview: !compact,
+							onSelectAll: (on) => onToggle(selectable.map((item) => pickOf(item, listing)), on)
+						}),
+						note && /* @__PURE__ */ jsx("p", {
+							className: "m-0 px-3 pb-2 text-zg-label text-[var(--zg-text-muted)] text-pretty",
+							children: note
+						}),
+						truncatedOf?.(listing) && /* @__PURE__ */ jsx("p", {
+							className: "m-0 px-3 pb-2 text-zg-meta text-zg-warn",
+							children: labels.listingTruncated
+						}),
+						items.length > FILTER_FROM && /* @__PURE__ */ jsxs("div", {
+							className: "relative px-1 pb-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-funnel-simple absolute left-3.5 top-1/2 -translate-y-1/2 -mt-0.5 text-zg-label text-[var(--zg-text-muted)] pointer-events-none"
+							}), /* @__PURE__ */ jsx("input", {
+								value: filter,
+								onChange: (event) => setFilter(event.target.value),
+								placeholder: words.filter,
+								"aria-label": words.filter,
+								spellCheck: false,
+								className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled pl-8`
+							})]
+						}),
+						items.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+							icon: "i-ph-folder-dashed",
+							title: words.empty,
+							hint: words.emptyHint,
+							framed: false,
+							compact: true
+						}) : shown.length === 0 ? /* @__PURE__ */ jsx("p", {
+							className: "m-0 px-3 py-4 text-zg-label text-[var(--zg-text-muted)]",
+							children: words.noMatch
+						}) : /* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-label": card.label,
+							className: "flex flex-col",
+							children: shown.map((item) => {
+								const pick = pickOf(item, listing);
+								const on = pickKeys.has(pick.key);
+								return /* @__PURE__ */ jsx(Fragment$1, { children: renderRow({
+									item,
+									listing,
+									pick,
+									picked: on,
+									onToggle: (next) => onToggle([pick], next)
+								}) }, pick.key);
+							})
+						})
+					] })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { SourceBrowser };

package/dist/onboarding/steps/ConnectStep.js

@@ -3,8 +3,8 @@ import { MetaChip } from "../../components/Form.js";
 import { ChoiceCards } from "../../components/ChoiceCards.js";
 import { useReadable } from "../../chat/headless/store.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
-import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { ProviderMark } from "../marks.js";
+import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { ProviderPanel } from "./connect/ProviderPanel.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";

package/dist/onboarding/steps/ConnectorsStep.js

@@ -5,6 +5,7 @@ import { ToggleCard } from "../../components/ToggleCard.js";
 import { constant, useReadable } from "../../chat/headless/store.js";
 import { connectorsFromImport } from "../headless/controller.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
+import { RoutedLink } from "../../extensions/links.js";
 import { Tutorial } from "../tutorials.js";
 import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { StepSection, StepTray } from "./StepSection.js";
@@ -171,10 +172,9 @@ function TokenField({ entry, auth, value, onChange }) {
 						size: "sm"
 					}),
 					children: labels.useGhLogin
-				}), /* @__PURE__ */ jsxs("a", {
+				}), /* @__PURE__ */ jsxs(RoutedLink, {
 					href: auth.createUrl,
-					target: "_blank",
-					rel: "noreferrer",
+					source: "auth",
 					className: buttonClass({
 						variant: "ghost",
 						size: "sm"

package/dist/onboarding/steps/ConversationStep.js

@@ -27,7 +27,8 @@ const TOGGLES = [
 	"hideSubagentOutput",
 	"showFullShellOutput",
 	"showCacheNotices",
-	"showCompactionSummary"
+	"showCompactionSummary",
+	"renderDiagrams"
 ];
 const CHOICES = [
 	"transcriptDensity",

package/dist/onboarding/steps/ExtensionsStep.js

@@ -3,10 +3,10 @@ import { ToggleCard } from "../../components/ToggleCard.js";
 import { constant, useReadable } from "../../chat/headless/store.js";
 import { connectorsFromImport } from "../headless/controller.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
+import { ExtensionMark as ExtensionMark$1 } from "../marks.js";
 import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { StepSection, StepTray } from "./StepSection.js";
 import { TaskChip, TaskFailure } from "./tasks.js";
-import { ExtensionMark } from "../marks.js";
 import { ExtensionDemo } from "../demos/extensions.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { NATIVE_EXTENSIONS, NATIVE_EXTENSION_GROUPS, connectorById, nativeExtensionNeedText } from "zidane/chat/pure";
@@ -66,7 +66,7 @@ function ExtensionCard({ entry, installed }) {
 	].some((ids) => ids.includes(need.id)) ? connectorById(need.id) : void 0;
 	const meta = "block mt-1.5 text-zg-meta text-[var(--zg-text-muted)]";
 	return /* @__PURE__ */ jsx(ToggleCard, {
-		lead: /* @__PURE__ */ jsx(ExtensionMark, { entry }),
+		lead: /* @__PURE__ */ jsx(ExtensionMark$1, { entry }),
 		media: /* @__PURE__ */ jsx(ExtensionDemo, {
 			name: entry.name,
 			on: installed || picked

package/dist/onboarding/steps/ReadyStep.js

@@ -4,11 +4,11 @@ import { BrowserSignIn } from "../../components/BrowserSignIn.js";
 import { presetFor } from "../../theme/accents.js";
 import { constant, useReadable } from "../../chat/headless/store.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
+import { ExtensionMark as ExtensionMark$1, ProviderMark } from "../marks.js";
 import { useSignIn } from "../useSignIn.js";
 import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { StepSection } from "./StepSection.js";
 import { TaskChip } from "./tasks.js";
-import { ExtensionMark, ProviderMark } from "../marks.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useEffect, useState } from "react";
 import { APPROVAL_MODE_OPTIONS, TRANSCRIPT_PRESETS, connectorById, nativeExtensionByName, onboardingImportParts, onboardingSwitchedFeatures, transcriptPresetOf } from "zidane/chat/pure";
@@ -70,7 +70,7 @@ function recapOf(step, { state, providers, models, themes, icons, labels }) {
 			return {
 				key: name,
 				label: entry.label,
-				mark: /* @__PURE__ */ jsx(ExtensionMark, {
+				mark: /* @__PURE__ */ jsx(ExtensionMark$1, {
 					entry,
 					size: "sm"
 				})

package/dist/onboarding/steps/connect/ProviderPanel.js

@@ -3,8 +3,8 @@ import { Segmented } from "../../../components/Segmented.js";
 import { ErrorNote, FormCard, OpLine } from "../../../components/Form.js";
 import { BrowserSignIn } from "../../../components/BrowserSignIn.js";
 import { useOnboarding, useOnboardingLabels } from "../../OnboardingProvider.js";
-import { useSignIn } from "../../useSignIn.js";
 import { ProviderMark } from "../../marks.js";
+import { useSignIn } from "../../useSignIn.js";
 import { KeyForm } from "./KeyForm.js";
 import { ProviderReady } from "./ProviderReady.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/palette/app-sources.js

@@ -1,5 +1,5 @@
-import { getMergedKeybindings } from "../keybindings/headless/overrides.js";
 import { usePendingApprovals } from "../approvals/ApprovalsProvider.js";
+import { getMergedKeybindings } from "../keybindings/headless/overrides.js";
 import { useKeybindingsHost } from "../keybindings/KeybindingsProvider.js";
 import { useKeyCommandActions, useKeyCommandRegistry } from "../keybindings/KeyCommands.js";
 import { usePresenceMap } from "../machines/MachinesProvider.js";

package/dist/path.d.ts

@@ -2,7 +2,9 @@
 /**
  * Path helpers for display, browser-safe (no `node:path`), POSIX paths:
  * the last segment, a split into folder and name, a long path shortened
- * from the middle, and a project path shown relative to a cwd.
+ * from the middle, a project path shown relative to a cwd, and a home
+ * folder shown as `~` (`tildePath`, `tildeText`; the home folder comes from
+ * the host, see `hooks/useDisplayPath.tsx`).
  */
 /**
  * The last segment of a path (`/` or `\` separated); trailing separators are ignored.
@@ -49,5 +51,25 @@ declare function compactPath(path: string, maxChars?: number): string;
  * @param cwd - The folder the path is shown from.
  */
 declare function formatPathForCwd(projectRelativePath: string, projectRoot: string, cwd: string): string;
+/**
+ * `path` with a leading `home` folder shown as `~`: `/Users/ada/code/app` →
+ * `~/code/app`, `/Users/ada` → `~`. Anything else (another user's folder,
+ * `/Users/adam`, a relative path) comes back unchanged. For display only:
+ * never pass the result to anything that reads the disk.
+ *
+ * @param path - The path.
+ * @param home - The home folder of the machine the path is on. Absent or empty: `path` unchanged.
+ */
+declare function tildePath(path: string, home: string | null | undefined): string;
+/**
+ * `text` with each path in it under `home` shown as `~` (`in /Users/ada/x` →
+ * `in ~/x`): only where the home folder starts a path (the line's start,
+ * after a space, a quote or a bracket) and ends at a path boundary. For
+ * display only.
+ *
+ * @param text - A line that may hold paths.
+ * @param home - The home folder of the machine the paths are on. Absent or empty: `text` unchanged.
+ */
+declare function tildeText(text: string, home: string | null | undefined): string;
 //#endregion
-export { basename, compactPath, formatPathForCwd, splitPath };
+export { basename, compactPath, formatPathForCwd, splitPath, tildePath, tildeText };

package/dist/path.js

@@ -2,7 +2,9 @@
 /**
 * Path helpers for display, browser-safe (no `node:path`), POSIX paths:
 * the last segment, a split into folder and name, a long path shortened
-* from the middle, and a project path shown relative to a cwd.
+* from the middle, a project path shown relative to a cwd, and a home
+* folder shown as `~` (`tildePath`, `tildeText`; the home folder comes from
+* the host, see `hooks/useDisplayPath.tsx`).
 */
 /**
 * The last segment of a path (`/` or `\` separated); trailing separators are ignored.
@@ -110,5 +112,35 @@ function posixRelative(from, to) {
 	for (let j = i; j < fromParts.length; j++) ups.push("..");
 	return [...ups, ...toParts.slice(i)].join("/");
 }
+/**
+* `path` with a leading `home` folder shown as `~`: `/Users/ada/code/app` →
+* `~/code/app`, `/Users/ada` → `~`. Anything else (another user's folder,
+* `/Users/adam`, a relative path) comes back unchanged. For display only:
+* never pass the result to anything that reads the disk.
+*
+* @param path - The path.
+* @param home - The home folder of the machine the path is on. Absent or empty: `path` unchanged.
+*/
+function tildePath(path, home) {
+	const root = home ? home.replace(/\/+$/, "") : "";
+	if (!root || root === "/") return path;
+	if (path === root || path === `${root}/`) return "~";
+	return path.startsWith(`${root}/`) ? `~${path.slice(root.length)}` : path;
+}
+/**
+* `text` with each path in it under `home` shown as `~` (`in /Users/ada/x` →
+* `in ~/x`): only where the home folder starts a path (the line's start,
+* after a space, a quote or a bracket) and ends at a path boundary. For
+* display only.
+*
+* @param text - A line that may hold paths.
+* @param home - The home folder of the machine the paths are on. Absent or empty: `text` unchanged.
+*/
+function tildeText(text, home) {
+	const root = home ? home.replace(/\/+$/, "") : "";
+	if (!root || root === "/" || !text.includes(root)) return text;
+	const escaped = root.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	return text.replace(new RegExp(`(^|[\\s"'\`(\\[=])${escaped}(?=$|[/\\s"'\`)\\]:,;])`, "g"), "$1~");
+}
 //#endregion
-export { basename, compactPath, formatPathForCwd, splitPath };
+export { basename, compactPath, formatPathForCwd, splitPath, tildePath, tildeText };

package/dist/session/ArtifactRowChips.js

@@ -1,3 +1,4 @@
+import { useLinkRouter } from "../extensions/links.js";
 import { useSessionLabels } from "./useSessionLabels.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isBadgeColor } from "zidane/chat/pure";
@@ -79,6 +80,7 @@ const BADGE_ICONS = [
 */
 function DiffFacts({ added, removed, files, href, className = "", style }) {
 	const labels = useSessionLabels();
+	const onLink = useLinkRouter().anchorClick(href, { source: "panel" });
 	const counts = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("span", {
 			className: added > 0 ? "text-zg-success" : "text-[var(--zg-text-subtle)]",
@@ -101,7 +103,10 @@ function DiffFacts({ added, removed, files, href, className = "", style }) {
 		target: "_blank",
 		rel: "noreferrer",
 		title: href,
-		onClick: (e) => e.stopPropagation(),
+		onClick: (e) => {
+			e.stopPropagation();
+			onLink?.(e);
+		},
 		className: `inline-flex items-center gap-1 tabular-nums no-underline hover:underline hover:decoration-[var(--zg-text-subtle)] ${className}`,
 		style,
 		children: counts
@@ -113,12 +118,16 @@ function DiffFacts({ added, removed, files, href, className = "", style }) {
 }
 const CHIP = "zg-track-chip inline-flex items-center gap-1 h-[18px] px-1.5 text-zg-meta leading-4 whitespace-nowrap max-w-full min-w-0";
 function Chip({ href, title, className = "", children }) {
+	const onLink = useLinkRouter().anchorClick(href, { source: "panel" });
 	return href ? /* @__PURE__ */ jsx("a", {
 		href,
 		target: "_blank",
 		rel: "noreferrer",
 		title: title ?? href,
-		onClick: (e) => e.stopPropagation(),
+		onClick: (e) => {
+			e.stopPropagation();
+			onLink?.(e);
+		},
 		className: `${CHIP} ${className} no-underline hover:bg-[var(--zg-row-hover)] hover:text-[var(--zg-text)]`,
 		children
 	}) : /* @__PURE__ */ jsx("span", {

package/dist/session/ArtifactsPanel.d.ts

@@ -13,6 +13,8 @@ interface ArtifactOpenEvent {
   metaKey?: boolean;
   /** Ctrl was held. */
   ctrlKey?: boolean;
+  /** Alt was held: the path opens the app's way, past the extensions' link handlers. */
+  altKey?: boolean;
 }
 /** Props for {@link ArtifactsPanel}. */
 interface ArtifactsPanelProps {