zidane-ui 9.0.4 → 9.1.3

package/dist/appearance/index.d.ts

@@ -1,4 +1,4 @@
+import { codeThemeTypeOf, codeThemesOf } from "../code/code-themes.js";
 import { AppearanceApi, AppearanceProvider, AppearanceProviderProps, CodeTheme, resolveCodeTheme, useAppearance, useAppearanceHost, useAppearanceMotion, useAppearanceReducedMotion, useAppearanceState, useColors, useOsReducedMotion, usePalette, useShikiTheme, useTheme } from "./AppearanceProvider.js";
 import { ApplyPaletteOptions, applyPalette } from "./apply.js";
-import { codeThemeTypeOf, codeThemesOf } from "../code/code-themes.js";
 export { AppearanceApi, AppearanceProvider, AppearanceProviderProps, ApplyPaletteOptions, CodeTheme, applyPalette, codeThemeTypeOf, codeThemesOf, resolveCodeTheme, useAppearance, useAppearanceHost, useAppearanceMotion, useAppearanceReducedMotion, useAppearanceState, useColors, useOsReducedMotion, usePalette, useShikiTheme, useTheme };

package/dist/approvals/ApprovalBar.js

@@ -1,6 +1,7 @@
 import { buttonClass } from "../components/button.js";
 import { KeyCombo } from "../components/Keycap.js";
 import { HighlightedCode } from "../code/HighlightedCode.js";
+import { useDisplayPath } from "../hooks/useDisplayPath.js";
 import { useApprovalsLabels, useResolveApproval, useSessionApprovalHead } from "./ApprovalsProvider.js";
 import { useTranscriptRendererOverrides } from "../chat/transcript/renderer-slots.js";
 import { ApprovalConcern } from "./ApprovalConcern.js";
@@ -9,6 +10,7 @@ import { FileEditApproval } from "./FileEditApproval.js";
 import { isEditorKeyEvent, isTypingFocused } from "./key-scope.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef } from "react";
+import { parseSessionKey } from "zidane/chat/pure";
 //#region src/approvals/ApprovalBar.tsx
 /**
 * The approval that waits above a session's composer: the inline card for a
@@ -61,7 +63,11 @@ function ApprovalCard({ request, onResolve, renderFrame, className = "", style }
 	const CodeBlock = useTranscriptRendererOverrides().CodeBlock ?? HighlightedCode;
 	const titleId = useId();
 	const cardRef = useRef(null);
-	const preview = approvalPreview(request.input, labels);
+	const display = useDisplayPath();
+	const preview = approvalPreview(request.input, {
+		approvalCwd: (cwd) => labels.approvalCwd(display.path(cwd, parseSessionKey(request.sessionId).hostKey)),
+		approvalTimeout: labels.approvalTimeout
+	});
 	const Frame = renderFrame ?? DefaultFrame;
 	useEffect(() => {
 		if (!isTypingFocused()) cardRef.current?.focus();

package/dist/approvals/FileEditApproval.js

@@ -2,6 +2,7 @@ import { BTN_LG_DANGER, BTN_LG_SECONDARY, BTN_LG_SOLID } from "../components/but
 import { CodePanel } from "../components/Surface.js";
 import { MetaChip } from "../components/Form.js";
 import { Keycap } from "../components/Keycap.js";
+import { useDisplayPath } from "../hooks/useDisplayPath.js";
 import { useApprovalsHost, useApprovalsLabels, useResolveApproval } from "./ApprovalsProvider.js";
 import { ApprovalConcern } from "./ApprovalConcern.js";
 import { ApprovalShell } from "./ApprovalShell.js";
@@ -9,6 +10,7 @@ import { allowDecision, approvalPath, initialHunkMask } from "./headless/preview
 import { MultiHunkChecklist, SingleHunkPreview } from "./HunkPreviews.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { parseSessionKey } from "zidane/chat/pure";
 //#region src/approvals/FileEditApproval.tsx
 /**
 * The file-edit review for `edit` / `multi_edit` / `write_file`.
@@ -50,6 +52,8 @@ function FileEditApproval({ request, onDone, renderShell, className, style }) {
 	const edit = request.edit;
 	const preview = request.preview;
 	const path = approvalPath(request);
+	const display = useDisplayPath();
+	const shownPath = path === null ? null : display.path(path, parseSessionKey(request.sessionId).hostKey);
 	const isWriteFile = request.tool === "write_file";
 	const hunkCount = edit?.hunks.length ?? 0;
 	const isMultiHunk = hunkCount > 1;
@@ -164,7 +168,7 @@ function FileEditApproval({ request, onDone, renderShell, className, style }) {
 				children: [path && /* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					title: path,
-					children: path
+					children: shownPath
 				}), originatorLabel && /* @__PURE__ */ jsxs(MetaChip, {
 					tone: "text",
 					className: "ml-auto",
@@ -186,7 +190,7 @@ function FileEditApproval({ request, onDone, renderShell, className, style }) {
 			}) : edit && preview ? /* @__PURE__ */ jsx(SingleHunkPreview, {
 				edit,
 				preview,
-				path,
+				path: shownPath,
 				isWriteFile
 			}) : /* @__PURE__ */ jsx(CodePanel, {
 				maxHeight: 420,
@@ -196,7 +200,7 @@ function FileEditApproval({ request, onDone, renderShell, className, style }) {
 		]
 	});
 	const shell = {
-		title: labels.approvalFileEditTitle(request.tool, path),
+		title: labels.approvalFileEditTitle(request.tool, shownPath),
 		description: path ? labels.approvalFileEditReview : labels.approvalFileEditNoPath,
 		onClose: () => decide("deny"),
 		...footer ? { footer } : {},

package/dist/approvals/headless/index.js

@@ -1,6 +1,6 @@
-import { createPendingApprovals } from "./pending.js";
-import { createSafelist } from "./safelist.js";
 import { createApprovalHeads } from "./heads.js";
 import { DEFAULT_APPROVALS_LABELS } from "./labels.js";
+import { createPendingApprovals } from "./pending.js";
+import { createSafelist } from "./safelist.js";
 import { FILE_EDIT_TOOLS, allowDecision, approvalPath, approvalPreview, initialHunkMask, isFileEditApproval } from "./preview.js";
 export { DEFAULT_APPROVALS_LABELS, FILE_EDIT_TOOLS, allowDecision, approvalPath, approvalPreview, createApprovalHeads, createPendingApprovals, createSafelist, initialHunkMask, isFileEditApproval };

package/dist/approvals/headless/labels.js

@@ -31,11 +31,11 @@ const DEFAULT_APPROVALS_LABELS = {
 	hunkTitle: (index, total) => `Hunk ${index}/${total}`,
 	hunkReplaceAll: "replace all",
 	hunkAmbiguous: (matches) => `ambiguous (${matches} matches)`,
-	hunkAmbiguousHint: (matches) => `The old_string matches ${matches} places in the file. The edit needs replace_all or a unique snippet.`,
+	hunkAmbiguousHint: (matches) => `The text to replace appears ${matches} times in the file. The edit needs a unique snippet, or to replace every match.`,
 	hunkNotInFile: "not in file",
-	hunkNotInFileHint: "The old_string is not in the file. The file may have changed since the model read it. If you allow this hunk, it fails.",
+	hunkNotInFileHint: "The text to replace is not in the file. The file may have changed since the model read it. If you allow this hunk, it fails.",
 	hunkVia: (via) => `via ${via}`,
-	hunkViaHint: (via) => `The exact old_string is not in the file. A close variant matched (${via}).`,
+	hunkViaHint: (via) => `The exact text to replace is not in the file. A close variant matched (${via}).`,
 	hunkFile: "(file)",
 	hunkNewFile: "new file",
 	hunkAdded: (count) => `+${count}`,

package/dist/chat/HostBadge.js

@@ -1,5 +1,5 @@
-import { hostStatusLabel } from "./headless/hosts.js";
 import { useChatLabels } from "./useChatLabels.js";
+import { hostStatusLabel } from "./headless/hosts.js";
 import { HostStatusDot } from "./HostStatusDot.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/HostBadge.tsx

package/dist/chat/HostStatusDot.js

@@ -1,5 +1,5 @@
-import { hostStatusLabel } from "./headless/hosts.js";
 import { useChatLabels } from "./useChatLabels.js";
+import { hostStatusLabel } from "./headless/hosts.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/chat/HostStatusDot.tsx
 const TONE = {

package/dist/chat/HostTranscript.d.ts

@@ -6,12 +6,14 @@ interface HostTranscriptProps extends Omit<TranscriptProps, 'events' | 'streamin
   sessionId: string;
   /** Shows another session the transcript names (a worker, a reporting session). Absent: names are plain text. */
   onOpenSession?(sessionId: string): void;
+  /** Opens a new terminal of the session and types `input` into it (a reply's shell block). Absent: blocks offer no Run in a terminal. */
+  onRunInTerminal?(input: string): void;
 }
 /**
  * Renders a session's transcript from the {@link ChatHost} in context, with loading, earlier-messages, and row actions wired to the host.
  *
  * @param props - The {@link HostTranscriptProps}; other props pass through to {@link Transcript}.
  */
-declare function HostTranscript({ sessionId, onOpenSession, ...props }: HostTranscriptProps): import("react").JSX.Element;
+declare function HostTranscript({ sessionId, onOpenSession, onRunInTerminal, ...props }: HostTranscriptProps): import("react").JSX.Element;
 //#endregion
 export { HostTranscript, HostTranscriptProps };

package/dist/chat/HostTranscript.js

@@ -26,7 +26,7 @@ const RING_STYLE = {
 *
 * @param props - The {@link HostTranscriptProps}; other props pass through to {@link Transcript}.
 */
-function HostTranscript({ sessionId, onOpenSession, ...props }) {
+function HostTranscript({ sessionId, onOpenSession, onRunInTerminal, ...props }) {
 	const host = useChatHost();
 	const labels = useChatLabels();
 	const transcript = useMemo(() => host.transcript(sessionId), [host, sessionId]);
@@ -39,11 +39,13 @@ function HostTranscript({ sessionId, onOpenSession, ...props }) {
 		...host.send ? { resume: (prompt) => void host.send({
 			sessionId,
 			prompt
-		}) } : {}
+		}) } : {},
+		...onRunInTerminal ? { runInTerminal: onRunInTerminal } : {}
 	}), [
 		host,
 		sessionId,
-		onOpenSession
+		onOpenSession,
+		onRunInTerminal
 	]);
 	if (!state.hydrated) return /* @__PURE__ */ jsx("div", {
 		role: "status",

package/dist/chat/RunEstimateChip.d.ts

@@ -0,0 +1,53 @@
+import { RunEstimatesStore } from "./headless/sidebar/estimates.js";
+import { CSSProperties, ReactNode } from "react";
+import { RunEstimateView } from "zidane/chat/pure";
+//#region src/chat/RunEstimateChip.d.ts
+/** Props of {@link RunEstimatesProvider}. */
+interface RunEstimatesProviderProps {
+  /** The app's estimates store (`createRunEstimates`). */
+  store: RunEstimatesStore;
+  /** What reads it. */
+  children?: ReactNode;
+}
+/**
+ * Hands the app's run estimates to what shows them (a subagent's header in
+ * the transcript). Without it, nothing shows an estimate.
+ *
+ * @param props - The `store` and `children`.
+ */
+declare function RunEstimatesProvider({ store, children }: RunEstimatesProviderProps): import("react").JSX.Element;
+/**
+ * The estimate of a session's own run, or of its subagent `label`, while one
+ * is known; `undefined` otherwise.
+ *
+ * @param sessionId - The session, `undefined` for none.
+ * @param label - A subagent's label (`child-3`); absent for the session's own run.
+ * @param store - The store to read. Default: the one {@link RunEstimatesProvider} gives.
+ */
+declare function useRunEstimate(sessionId: string | undefined, label?: string, store?: RunEstimatesStore): RunEstimateView | undefined;
+/** Props of {@link RunEstimateChip}. */
+interface RunEstimateChipProps {
+  /** The estimate to count down. */
+  estimate: RunEstimateView;
+  /**
+   * A line after the chip's own in its tooltip. A function is read when the
+   * tooltip is about to show (pointer over, focus): a line that changes every
+   * second (the sidebar's elapsed time) costs no render until then.
+   */
+  detail?: string | (() => string);
+  /** Extra classes on the chip. */
+  className?: string;
+  /** Inline styles on the chip. */
+  style?: CSSProperties;
+}
+/**
+ * The time a run has left, counting down (`~11m`), in the info tint;
+ * `almost done` once the estimate is spent, dimmed while the run waits on
+ * the user, and `over` in the warning tint once the run is past its
+ * estimate.
+ *
+ * @param props - The `estimate`, a tooltip `detail`, `className` and `style`.
+ */
+declare function RunEstimateChip({ estimate, detail, className, style }: RunEstimateChipProps): import("react").JSX.Element;
+//#endregion
+export { RunEstimateChip, RunEstimateChipProps, RunEstimatesProvider, RunEstimatesProviderProps, useRunEstimate };

package/dist/chat/RunEstimateChip.js

@@ -0,0 +1,116 @@
+import { useChatLabels } from "./useChatLabels.js";
+import { pickRunEstimate } from "./headless/sidebar/estimates.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { estimateReadout, formatEstimate } from "zidane/chat/pure";
+//#region src/chat/RunEstimateChip.tsx
+/**
+* Run time estimates in a component (`Settings.runEstimates`): the app's
+* estimates store ({@link RunEstimatesProvider}), a session's or a
+* subagent's estimate ({@link useRunEstimate}), and the chip that counts it
+* down ({@link RunEstimateChip}).
+*/
+const RunEstimatesContext = createContext(null);
+/**
+* Hands the app's run estimates to what shows them (a subagent's header in
+* the transcript). Without it, nothing shows an estimate.
+*
+* @param props - The `store` and `children`.
+*/
+function RunEstimatesProvider({ store, children }) {
+	return /* @__PURE__ */ jsx(RunEstimatesContext.Provider, {
+		value: store,
+		children
+	});
+}
+const noSubscription = () => () => void 0;
+/**
+* The estimate of a session's own run, or of its subagent `label`, while one
+* is known; `undefined` otherwise.
+*
+* @param sessionId - The session, `undefined` for none.
+* @param label - A subagent's label (`child-3`); absent for the session's own run.
+* @param store - The store to read. Default: the one {@link RunEstimatesProvider} gives.
+*/
+function useRunEstimate(sessionId, label, store) {
+	const provided = useContext(RunEstimatesContext);
+	const source = store ?? provided;
+	const follow = useCallback((listener) => source && sessionId ? source.subscribe(sessionId, listener) : noSubscription(), [source, sessionId]);
+	const read = () => source && sessionId ? pickRunEstimate(source.get(sessionId), label) : void 0;
+	return useSyncExternalStore(source && sessionId ? follow : noSubscription, read, read);
+}
+function shownAt(estimate, now) {
+	const readout = estimateReadout(estimate, now);
+	return {
+		state: readout.state,
+		text: formatEstimate(readout.remainingMs)
+	};
+}
+/** States that change with the clock; paused and over hold until the next estimate. */
+const TICKING = /* @__PURE__ */ new Set(["live", "due"]);
+/**
+* What `estimate` says now, read once a second while it counts: it
+* re-renders only when its text or state changes, and stops reading the
+* clock once paused or over.
+*
+* @param estimate - The estimate.
+*/
+function useEstimateShown(estimate) {
+	const [shown, setShown] = useState(() => shownAt(estimate, Date.now()));
+	useEffect(() => {
+		let id;
+		const tick = () => {
+			const next = shownAt(estimate, Date.now());
+			setShown((prev) => prev.state === next.state && prev.text === next.text ? prev : next);
+			if (!TICKING.has(next.state) && id !== void 0) {
+				window.clearInterval(id);
+				id = void 0;
+			}
+			return next;
+		};
+		if (TICKING.has(tick().state)) id = window.setInterval(tick, 1e3);
+		return () => {
+			if (id !== void 0) window.clearInterval(id);
+		};
+	}, [estimate]);
+	return shown;
+}
+const TONE = {
+	live: "text-zg-info",
+	due: "text-zg-info",
+	paused: "text-[var(--zg-text-subtle)]",
+	over: "text-zg-warn"
+};
+/**
+* The time a run has left, counting down (`~11m`), in the info tint;
+* `almost done` once the estimate is spent, dimmed while the run waits on
+* the user, and `over` in the warning tint once the run is past its
+* estimate.
+*
+* @param props - The `estimate`, a tooltip `detail`, `className` and `style`.
+*/
+function RunEstimateChip({ estimate, detail, className, style }) {
+	const labels = useChatLabels();
+	const { state, text } = useEstimateShown(estimate);
+	const [readDetail, setReadDetail] = useState();
+	const onShow = typeof detail === "function" ? () => setReadDetail(detail()) : void 0;
+	const line = typeof detail === "function" ? readDetail : detail;
+	const title = state === "over" ? labels.estimateOverTitle : state === "due" ? labels.estimateDueTitle : state === "paused" ? labels.estimatePausedTitle(text) : labels.estimateTitle(text);
+	return /* @__PURE__ */ jsx("span", {
+		"data-testid": "run-estimate",
+		"data-state": state,
+		title: line ? `${title}\n${line}` : title,
+		"aria-label": title,
+		onPointerEnter: onShow,
+		onFocus: onShow,
+		className: [
+			"zg-meta shrink-0",
+			TONE[state],
+			className
+		].filter(Boolean).join(" "),
+		style,
+		children: state === "over" ? labels.estimateOver : state === "due" ? labels.estimateDue : text
+	});
+}
+//#endregion
+export { RunEstimateChip, RunEstimatesProvider, useRunEstimate };

package/dist/chat/SessionFilterMenu.d.ts

@@ -6,10 +6,78 @@ type SessionArchiveFilter = 'active' | 'archived' | 'all';
 /** Last-activity window of the activity filter: sessions active within `1d`, `3d`, `7d`, or `30d`, or `all`. */
 type SessionActivityFilter = 'all' | '1d' | '3d' | '7d' | '30d';
 /**
- * A choice of the view axis: a grouping of the list model, or `host`, one
- * section per host, which the app lays out itself (the desktop sidebar's Per host).
+ * A choice of the view axis: a grouping of the list model, `host`, one
+ * section per host, which the app lays out itself (the desktop sidebar's Per host),
+ * or `agent`, one group per agent.
  */
-type SessionView = SessionGroupBy | 'host';
+type SessionView = SessionGroupBy | 'host' | 'agent';
+/** Where an extra row sits: with the view, the filters or the sort. */
+type SessionFilterPlacement = 'view' | 'filter' | 'sort';
+/** An extra row of the menu: one choice among options, an on/off toggle, or several picks. */
+type SessionFilterExtra = {
+  kind: 'choice';
+  /** Unique among the extras. */
+  id: string;
+  /** The row's label. */
+  label: string;
+  /** The group it sits in. */
+  placement: SessionFilterPlacement;
+  /** The current choice, as the row shows it. */
+  value: string;
+  /** Muted at the default; accent otherwise. */
+  atDefault: boolean;
+  /** The choices, in menu order. */
+  options: readonly {
+    id: string;
+    label: string;
+  }[];
+  /** The chosen option's id. */
+  current: string;
+  /** Called with the option the user picks. */
+  onChange: (next: string) => void;
+} | {
+  kind: 'toggle';
+  /** Unique among the extras. */
+  id: string;
+  /** The row's label. */
+  label: string;
+  /** The group it sits in. */
+  placement: SessionFilterPlacement;
+  /** On. */
+  checked: boolean;
+  /** Called with the new state. */
+  onChange: (checked: boolean) => void;
+} | {
+  kind: 'multi';
+  /** Unique among the extras. */
+  id: string;
+  /** The row's label. */
+  label: string;
+  /** The group it sits in. */
+  placement: SessionFilterPlacement;
+  /** What is picked, as the row shows it. */
+  value: string;
+  /** The options, in menu order. */
+  options: readonly {
+    id: string;
+    label: string;
+  }[];
+  /** The picked options' ids. */
+  current: readonly string[];
+  /** Called with the picked ids. */
+  onChange: (next: readonly string[]) => void;
+};
+/** A row that does something and closes the menu (Save view as space). */
+interface SessionFilterAction {
+  /** Unique among the actions. */
+  id: string;
+  /** The row's label. */
+  label: string;
+  /** An icon class before the label. */
+  icon?: string;
+  /** Runs it. */
+  onSelect: () => void;
+}
 /** One axis: its value, the choices in menu order (default: the app's), and the change handler. */
 interface SessionFilterAxis<T extends string> {
   /** Currently selected choice. */
@@ -40,6 +108,10 @@ interface SessionFilterMenuProps<V extends SessionView = SessionGroupBy> {
   activity?: SessionFilterAxis<SessionActivityFilter>;
   /** Sort axis: `alphabetical`, `createdTime`, or `recency`. */
   sort?: SessionFilterAxis<SessionSortBy>;
+  /** More rows, each in the group its `placement` names, after the built-in ones. */
+  extras?: readonly SessionFilterExtra[];
+  /** Rows that act, in a last group. */
+  actions?: readonly SessionFilterAction[];
   /** Extra classes on the root element (the faders trigger button). */
   className?: string;
   /** Inline styles on the root element, merged after the component's own. */
@@ -50,6 +122,6 @@ interface SessionFilterMenuProps<V extends SessionView = SessionGroupBy> {
  *
  * @param props - The {@link SessionFilterMenuProps}.
  */
-declare function SessionFilterMenu<V extends SessionView = SessionGroupBy>({ view, status, project, activity, sort, className, style }: SessionFilterMenuProps<V>): import("react").JSX.Element;
+declare function SessionFilterMenu<V extends SessionView = SessionGroupBy>({ view, status, project, activity, sort, extras, actions, className, style }: SessionFilterMenuProps<V>): import("react").JSX.Element;
 //#endregion
-export { SessionActivityFilter, SessionArchiveFilter, SessionFilterAxis, SessionFilterMenu, SessionFilterMenuProps, SessionProjectAxis, SessionView };
+export { SessionActivityFilter, SessionArchiveFilter, SessionFilterAction, SessionFilterAxis, SessionFilterExtra, SessionFilterMenu, SessionFilterMenuProps, SessionFilterPlacement, SessionProjectAxis, SessionView };

package/dist/chat/SessionFilterMenu.js

@@ -46,12 +46,13 @@ const SURFACE_CLASS = "zg-float zg-menu-motion zg-radix-menu z-zg-float p-1";
 *
 * @param props - The {@link SessionFilterMenuProps}.
 */
-function SessionFilterMenu({ view, status, project, activity, sort, className, style }) {
+function SessionFilterMenu({ view, status, project, activity, sort, extras = NO_EXTRAS, actions = NO_ACTIONS, className, style }) {
 	const labels = useChatLabels();
 	const choices = (ids, names) => ids.map((id) => ({
 		id,
 		label: names[id]
 	}));
+	const extraRows = (placement) => extras.filter((e) => e.placement === placement).map((extra) => /* @__PURE__ */ jsx(ExtraRow, { extra }, `x-${extra.id}`));
 	const shown = [
 		[view && /* @__PURE__ */ jsx(FilterSub, {
 			label: labels.filterView,
@@ -60,7 +61,7 @@ function SessionFilterMenu({ view, status, project, activity, sort, className, s
 			options: choices(view.options ?? VIEWS, labels.filterViews),
 			current: view.value,
 			onChange: (v) => view.onChange(v)
-		}, "view")],
+		}, "view"), ...extraRows("view")],
 		[
 			status && /* @__PURE__ */ jsx(FilterSub, {
 				label: labels.filterStatus,
@@ -92,7 +93,8 @@ function SessionFilterMenu({ view, status, project, activity, sort, className, s
 				options: choices(activity.options ?? ACTIVITIES, labels.filterActivities),
 				current: activity.value,
 				onChange: (v) => activity.onChange(v)
-			}, "activity")
+			}, "activity"),
+			...extraRows("filter")
 		],
 		[sort && /* @__PURE__ */ jsx(FilterSub, {
 			label: labels.filterSort,
@@ -101,7 +103,19 @@ function SessionFilterMenu({ view, status, project, activity, sort, className, s
 			options: choices(sort.options ?? SORTS, labels.filterSorts),
 			current: sort.value,
 			onChange: (v) => sort.onChange(v)
-		}, "sort")]
+		}, "sort"), ...extraRows("sort")],
+		actions.map((action) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+			"data-size": "sm",
+			className: ROW_CLASS,
+			onSelect: action.onSelect,
+			children: [action.icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `${action.icon} text-zg-ui text-[var(--zg-text-muted)]`
+			}), /* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children: action.label
+			})]
+		}, `a-${action.id}`))
 	].map((group) => group.filter(Boolean)).filter((group) => group.length > 0);
 	return /* @__PURE__ */ jsxs(DropdownMenu.Root, {
 		modal: false,
@@ -122,6 +136,74 @@ function SessionFilterMenu({ view, status, project, activity, sort, className, s
 		}) })]
 	});
 }
+const NO_EXTRAS = [];
+const NO_ACTIONS = [];
+function ExtraRow({ extra }) {
+	if (extra.kind === "choice") return /* @__PURE__ */ jsx(FilterSub, {
+		label: extra.label,
+		value: extra.value,
+		atDefault: extra.atDefault,
+		options: extra.options,
+		current: extra.current,
+		onChange: extra.onChange
+	});
+	if (extra.kind === "toggle") return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+		"data-size": "sm",
+		className: ROW_CLASS,
+		checked: extra.checked,
+		onCheckedChange: (checked) => extra.onChange(checked === true),
+		onSelect: (event) => event.preventDefault(),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate",
+			children: extra.label
+		}), /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, {
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "i-ph-check text-zg-ui text-[var(--zg-accent)]"
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [/* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
+		"data-size": "sm",
+		className: ROW_CLASS,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children: extra.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: extra.current.length === 0 ? "text-[var(--zg-text-muted)]" : "text-[var(--zg-accent)]",
+				children: extra.value
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "i-ph-caret-right text-zg-label text-[var(--zg-text-muted)] shrink-0",
+				"aria-hidden": true
+			})
+		]
+	}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
+		className: `${SURFACE_CLASS} min-w-[10rem] max-h-[60vh] overflow-y-auto`,
+		sideOffset: 6,
+		alignOffset: -4,
+		children: extra.options.map((option) => /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+			"data-size": "sm",
+			className: ROW_CLASS,
+			checked: extra.current.includes(option.id),
+			onCheckedChange: (checked) => extra.onChange(checked === true ? [...extra.current.filter((id) => id !== option.id), option.id] : extra.current.filter((id) => id !== option.id)),
+			onSelect: (event) => event.preventDefault(),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children: option.label
+			}), /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, {
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "i-ph-check text-zg-ui text-[var(--zg-accent)]"
+				})
+			})]
+		}, option.id))
+	}) })] });
+}
 function FilterSub({ label, value, atDefault, options, current, onChange, emptyHint }) {
 	return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [/* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
 		"data-size": "sm",

package/dist/chat/SessionGroupHeader.d.ts

@@ -27,8 +27,12 @@ interface SessionGroupHeaderProps {
   icon?: ReactNode;
   /** Trailing control (a "new session here" button), revealed on hover and focus. */
   action?: ReactNode;
-  /** Called with the group `id` when the user toggles the label. */
+  /** Called with the group `id` when the user toggles the label (or, with `onOpen`, the chevron). */
   onToggle: (id: string) => void;
+  /** Called with the group `id` when the user clicks the label: it opens the group's page. Absent: the label toggles. */
+  onOpen?: (id: string) => void;
+  /** The group's page is the one shown (`onOpen`): the heading wears the active row's chip. */
+  active?: boolean;
   /** A right-click on the heading (the group's own actions menu). */
   onContextMenu?: (event: React.MouseEvent<HTMLLIElement>) => void;
   /** Extra class names for the heading's `<li>` (an app's sticky headers). */
@@ -41,7 +45,7 @@ interface SessionGroupHeaderProps {
  *
  * @param props - Header props: `id`, `label`, `collapsed`, `icon`, `action`, `onToggle`, and `className`.
  */
-declare function SessionGroupHeader({ id, label, collapsed, icon, action, onToggle, onContextMenu, className, style }: SessionGroupHeaderProps): import("react").JSX.Element;
+declare function SessionGroupHeader({ id, label, collapsed, icon, action, onToggle, onOpen, active, onContextMenu, className, style }: SessionGroupHeaderProps): import("react").JSX.Element;
 /** Props for {@link ShowMoreRow}. */
 interface ShowMoreRowProps {
   /** Number of rows still hidden, shown in parentheses after the label. */

package/dist/chat/SessionGroupHeader.js

@@ -20,8 +20,40 @@ function GroupGlyph({ icon, className, style }) {
 *
 * @param props - Header props: `id`, `label`, `collapsed`, `icon`, `action`, `onToggle`, and `className`.
 */
-function SessionGroupHeader({ id, label, collapsed, icon, action, onToggle, onContextMenu, className = "", style }) {
+function SessionGroupHeader({ id, label, collapsed, icon, action, onToggle, onOpen, active = false, onContextMenu, className = "", style }) {
 	const labels = useChatLabels();
+	const toggleTitle = collapsed ? labels.expandGroup(label) : labels.collapseGroup(label);
+	const caretClass = `shrink-0 ${collapsed ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`;
+	if (onOpen) return /* @__PURE__ */ jsxs("li", {
+		className: `zg-group-head group flex items-center gap-1.5 -mx-2 px-3 pt-3 pb-1 text-sm text-[var(--zg-text-muted)] select-none ${className}`,
+		style,
+		onContextMenu,
+		"data-active": active ? "true" : void 0,
+		children: [
+			icon,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onOpen(id),
+				"aria-current": active ? "page" : void 0,
+				title: labels.openGroup(label),
+				className: `zg-press-soft flex flex-1 items-center min-w-0 bg-transparent border-0 cursor-pointer p-0 font-medium hover:text-[var(--zg-text)] transition-colors ${active ? "text-[var(--zg-text)]" : "text-[var(--zg-text-muted)]"}`,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: label
+				})
+			}),
+			action,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onToggle(id),
+				"aria-expanded": !collapsed,
+				"aria-label": toggleTitle,
+				title: toggleTitle,
+				className: `zg-press-soft shrink-0 inline-flex items-center justify-center w-5 h-5 bg-transparent border-0 cursor-pointer p-0 text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors ${caretClass}`,
+				children: /* @__PURE__ */ jsx(Caret, { open: !collapsed })
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("li", {
 		className: `group flex items-center gap-1.5 -mx-2 px-3 pt-3 pb-1 text-sm text-[var(--zg-text-muted)] select-none ${className}`,
 		style,
@@ -32,14 +64,14 @@ function SessionGroupHeader({ id, label, collapsed, icon, action, onToggle, onCo
 				type: "button",
 				onClick: () => onToggle(id),
 				"aria-expanded": !collapsed,
-				title: collapsed ? labels.expandGroup(label) : labels.collapseGroup(label),
+				title: toggleTitle,
 				className: "zg-press-soft flex flex-1 items-center gap-1 min-w-0 bg-transparent border-0 cursor-pointer p-0 font-medium text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: label
 				}), /* @__PURE__ */ jsx(Caret, {
 					open: !collapsed,
-					className: `shrink-0 ${collapsed ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`
+					className: caretClass
 				})]
 			}),
 			action