zidane-ui 9.0.4 → 9.1.3

package/dist/chat/SessionHostHeader.js

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

package/dist/chat/SessionList.js

@@ -4,8 +4,8 @@ import { Overlay } from "../components/Overlay.js";
 import { PanelEmpty } from "../components/PanelEmpty.js";
 import { useChatHost, useHostSessions } from "./ChatProvider.js";
 import { useChatLabels } from "./useChatLabels.js";
-import { GroupGlyph, SessionGroupHeader, ShowMoreRow } from "./SessionGroupHeader.js";
 import { buildSessionRows, filterSessions, relativeTime } from "./headless/session-list.js";
+import { GroupGlyph, SessionGroupHeader, ShowMoreRow } from "./SessionGroupHeader.js";
 import { dotStateFor } from "./StatusDot.js";
 import { SessionListRow } from "./SessionListRow.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/chat/SessionListRow.d.ts

@@ -57,6 +57,13 @@ interface SessionListRowProps {
   onRenameCancel?: () => void;
   /** Row actions; none hides the trigger. */
   menuItems?: readonly RowActionItem[];
+  /** The actions trigger's accessible name. Default: `labels.sessionActions` (a row that is no session names its own). */
+  menuLabel?: string;
+  /**
+   * The row folds rows under it and a click toggles them: `true` while they show, `false` while
+   * folded (`aria-expanded` on the row's button). Absent: the row folds nothing.
+   */
+  expanded?: boolean;
   /** Controlled menu (one open menu across a list); uncontrolled when omitted. */
   menuOpen?: boolean;
   /** Called with `id` when the row asks to open its actions menu. Used with a controlled `menuOpen`. */
@@ -71,6 +78,6 @@ interface SessionListRowProps {
   style?: CSSProperties;
 }
 /** Renders one session in a list: status dot, title with inline rename, badges, meta, an optional second line, and an actions menu behind a 3-dots trigger and right-click. */
-declare const SessionListRow: import("react").MemoExoticComponent<({ id, title, active, archived, status, dot, titleDisplay, badges, meta, sub, subClassName, onSelect, renaming, renameValue, onStartRename, onRenameChange, onRenameCommit, onRenameCancel, menuItems, menuOpen: menuOpenProp, onOpenMenu, onCloseMenu, arrived, className, style }: SessionListRowProps) => import("react").JSX.Element>;
+declare const SessionListRow: import("react").MemoExoticComponent<({ id, title, active, archived, status, dot, titleDisplay, badges, meta, sub, subClassName, onSelect, renaming, renameValue, onStartRename, onRenameChange, onRenameCommit, onRenameCancel, menuItems, menuLabel, expanded, menuOpen: menuOpenProp, onOpenMenu, onCloseMenu, arrived, className, style }: SessionListRowProps) => import("react").JSX.Element>;
 //#endregion
 export { type RowActionItem, SessionListRow, SessionListRowProps };

package/dist/chat/SessionListRow.js

@@ -47,7 +47,7 @@ function armTitleSlide(clip) {
 	title.setAttribute("data-slide", "");
 }
 /** Renders one session in a list: status dot, title with inline rename, badges, meta, an optional second line, and an actions menu behind a 3-dots trigger and right-click. */
-const SessionListRow = memo(function SessionListRow({ id, title, active = false, archived = false, status, dot = "idle", titleDisplay, badges, meta, sub, subClassName = "", onSelect, renaming = false, renameValue = "", onStartRename, onRenameChange, onRenameCommit, onRenameCancel, menuItems, menuOpen: menuOpenProp, onOpenMenu, onCloseMenu, arrived = false, className, style }) {
+const SessionListRow = memo(function SessionListRow({ id, title, active = false, archived = false, status, dot = "idle", titleDisplay, badges, meta, sub, subClassName = "", onSelect, renaming = false, renameValue = "", onStartRename, onRenameChange, onRenameCommit, onRenameCancel, menuItems, menuLabel, expanded, menuOpen: menuOpenProp, onOpenMenu, onCloseMenu, arrived = false, className, style }) {
 	const labels = useChatLabels();
 	const trigger = useRef(null);
 	const [ownOpen, setOwnOpen] = useState(false);
@@ -99,7 +99,8 @@ const SessionListRow = memo(function SessionListRow({ id, title, active = false,
 				...renaming ? {} : {
 					type: "button",
 					"data-row-select": true,
-					onClick: () => onSelect(id)
+					onClick: () => onSelect(id),
+					...expanded !== void 0 ? { "aria-expanded": expanded } : {}
 				},
 				className: `block w-full text-left bg-transparent border-0 rounded-[var(--zg-radius-md)] p-0 ${renaming ? "" : "zg-press-subtle cursor-pointer"}`,
 				children: [/* @__PURE__ */ jsxs("div", {
@@ -138,14 +139,14 @@ const SessionListRow = memo(function SessionListRow({ id, title, active = false,
 			}), hasMenu && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
 				ref: trigger,
 				icon: "i-ph-dots-three",
-				label: labels.sessionActions,
+				label: menuLabel ?? labels.sessionActions,
 				title: labels.moreActions,
 				size: "sm",
 				active: menuOpen,
 				"aria-haspopup": "menu",
 				"aria-expanded": menuOpen,
 				"data-open": menuOpen ? "" : void 0,
-				className: "zg-row-dots zg-hit-extend absolute top-0.5 right-1.5",
+				className: "zg-row-dots zg-hit-extend absolute top-0.5 right-0.5",
 				onClick: (e) => {
 					e.stopPropagation();
 					if (menuOpen) close();

package/dist/chat/Throbber.js

@@ -1,5 +1,4 @@
 import { useAppearanceReducedMotion, useTheme } from "../appearance/AppearanceProvider.js";
-import { useChatLabels } from "./useChatLabels.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useState } from "react";
 import { blendHsl } from "zidane/chat/pure";
@@ -35,7 +34,6 @@ const ELLIPSIS_CYCLE = [
 */
 function Throbber({ size = 15, colors, variant = "accent", hideEllipsis = false, className, style }) {
 	const theme = useTheme();
-	const labels = useChatLabels();
 	const extra = className ? ` ${className}` : "";
 	const [a, b] = useMemo(() => {
 		if (colors) return colors;
@@ -124,7 +122,6 @@ function Throbber({ size = 15, colors, variant = "accent", hideEllipsis = false,
 			className: "inline-block w-[3ch] text-left",
 			style: { color: a },
 			"aria-hidden": "true",
-			title: labels.throbberEllipsis,
 			children: ellipsis
 		})]
 	});

package/dist/chat/Transcript.d.ts

@@ -7,7 +7,7 @@ import { RunRetry } from "zidane/chat/pure";
 import { Settings } from "zidane/chat";
 //#region src/chat/Transcript.d.ts
 /** The display settings a transcript reads: zidane's `Settings` fields of the same names. */
-type TranscriptOptions = Pick<Settings, 'showRowIcons' | 'showThinking' | 'showToolResults' | 'showEditDiffs' | 'showFullShellOutput' | 'groupToolCalls' | 'toolCallDisplay' | 'transcriptDensity' | 'hideSubagentOutput' | 'showRunReceipt' | 'thinkingAutoExpand' | 'showCacheNotices' | 'codemodeShowCalls' | 'showToolAttachments'>;
+type TranscriptOptions = Pick<Settings, 'showRowIcons' | 'showThinking' | 'showToolResults' | 'showEditDiffs' | 'showFullShellOutput' | 'groupToolCalls' | 'toolCallDisplay' | 'transcriptDensity' | 'hideSubagentOutput' | 'showRunReceipt' | 'thinkingAutoExpand' | 'showCacheNotices' | 'codemodeShowCalls' | 'showToolAttachments' | 'renderDiagrams'>;
 /** zidane's defaults for those settings. */
 declare const DEFAULT_TRANSCRIPT_OPTIONS: TranscriptOptions;
 /** Select-turn mode, driven by the app (its keys move `selected`). */

package/dist/chat/Transcript.js

@@ -1,8 +1,12 @@
-import { firstRowId } from "./headless/transcript/rows.js";
-import { stopForRow } from "./headless/transcript/select-stops.js";
+import { useExtensionItems } from "../extensions/ExtensionsProvider.js";
+import { LinkSessionScope } from "../extensions/links.js";
+import { CvRow, TranscriptSettling } from "./transcript/LazyRow.js";
+import { MarkdownDiagrams } from "./transcript/markdown.js";
 import { useTranscriptActions } from "./transcript/actions.js";
 import { RowIconsContext } from "./transcript/frame.js";
-import { CvRow, TranscriptSettling } from "./transcript/LazyRow.js";
+import { firstRowId } from "./headless/transcript/rows.js";
+import { ExtensionSlot } from "../extensions/ExtensionSlot.js";
+import { rowTurnIds, stopForRow } from "./headless/transcript/select-stops.js";
 import { rowCvStyle, rowEstimatePx } from "./transcript/row-estimate.js";
 import { SelectCursor } from "./transcript/SelectCursor.js";
 import { SubagentBlock } from "./transcript/SubagentBlock.js";
@@ -32,6 +36,10 @@ import { DEFAULT_SETTINGS, runTailActivity } from "zidane/chat/pure";
 * inputs did not change reuses its element (React skips it without a props
 * compare), and root rows mount on approach (`LazyRow`) except the last
 * `EAGER_TAIL`.
+*
+* The extensions' `transcript.turn-end` items draw after the turn they name
+* (`turnId`: after the last root row holding it; none holds it, not drawn),
+* the rest once at the end when the run has ended.
 */
 /** zidane's defaults for those settings. */
 const DEFAULT_TRANSCRIPT_OPTIONS = {
@@ -48,7 +56,8 @@ const DEFAULT_TRANSCRIPT_OPTIONS = {
 	thinkingAutoExpand: DEFAULT_SETTINGS.thinkingAutoExpand,
 	showCacheNotices: DEFAULT_SETTINGS.showCacheNotices,
 	codemodeShowCalls: DEFAULT_SETTINGS.codemodeShowCalls,
-	showToolAttachments: DEFAULT_SETTINGS.showToolAttachments
+	showToolAttachments: DEFAULT_SETTINGS.showToolAttachments,
+	renderDiagrams: DEFAULT_SETTINGS.renderDiagrams
 };
 /**
 * Top-level rows at the end of the transcript that mount at once (the rest
@@ -121,6 +130,24 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 		showRunReceipt: o.showRunReceipt,
 		compact: o.transcriptDensity === "compact"
 	});
+	const slotEntries = useExtensionItems("slot");
+	const turnEnds = useMemo(() => {
+		const wanted = /* @__PURE__ */ new Set();
+		for (const { item } of slotEntries) if (item.at === "transcript.turn-end" && item.turnId && (item.sessionId === void 0 || item.sessionId === sessionId)) wanted.add(item.turnId);
+		if (wanted.size === 0) return null;
+		const lastRow = /* @__PURE__ */ new Map();
+		for (const cluster of clusters) {
+			if (cluster.kind !== "single") continue;
+			for (const id of rowTurnIds(cluster.row)) if (wanted.has(id)) lastRow.set(id, cluster.row.id);
+		}
+		const byRow = /* @__PURE__ */ new Map();
+		for (const [turnId, rowId] of lastRow) byRow.set(rowId, [...byRow.get(rowId) ?? [], turnId]);
+		return byRow;
+	}, [
+		slotEntries,
+		sessionId,
+		clusters
+	]);
 	const selectedTurnId = selection?.selected ?? null;
 	const stops = useSelectStops(visibleRows, events, showThinking, selectedTurnId !== null, selection?.registerStops);
 	const containerRef = useRef(null);
@@ -154,6 +181,7 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 	const slotCache = useRef(/* @__PURE__ */ new Map());
 	const groupCache = useRef(/* @__PURE__ */ new WeakMap());
 	const renderClustersRef = useRef(() => []);
+	const showRunReceipt = o.showRunReceipt;
 	const foldEpoch = useMemo(() => ({}), [
 		rowCtx,
 		selectedTurnId,
@@ -161,7 +189,8 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 		resumableId,
 		showThinking,
 		collapseSubagents,
-		streaming
+		streaming,
+		showRunReceipt
 	]);
 	const renderFoldRows = useMemo(() => (list, lazy) => renderClustersRef.current(list, lazy), [foldEpoch]);
 	const waiting = runStatus !== void 0 && streaming && runTailActivity(events) === "waiting";
@@ -197,6 +226,7 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 		const key = groupRowId(cluster, ci);
 		const deps = groupDeps(cluster, [
 			key,
+			sessionId,
 			parentDepth,
 			collapseSubagents,
 			streaming,
@@ -216,6 +246,7 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 	const buildGroup = (cluster, key, parentDepth) => /* @__PURE__ */ jsx(SubagentBlock, {
 		"data-row": key,
 		childId: cluster.childId,
+		...sessionId ? { sessionId } : {},
 		depth: cluster.depth,
 		...parentDepth !== void 0 ? { parentDepth } : {},
 		rows: cluster.rows,
@@ -236,49 +267,59 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 		const out = [];
 		const nextSlotCache = lazy ? /* @__PURE__ */ new Map() : slotCache.current;
 		const eagerFrom = lazy ? eagerTailStart(list, (row) => isHiddenRow(row, showThinking)) : 0;
+		const renderSingle = (cluster, ci) => {
+			if (isHiddenRow(cluster.row, showThinking)) return;
+			const stop = stops ? stopForRow(cluster.row, stops) : null;
+			const sel = stop !== null && stop === selectedTurnId ? "" : void 0;
+			if (lazy) {
+				const props = rowProps(cluster.row, true);
+				const eager = ci >= eagerFrom;
+				const deps = [
+					props.row,
+					props.showCaret,
+					props.receipt,
+					props.resumable,
+					props.ctx,
+					props.renderRows,
+					props.status,
+					eager,
+					stop,
+					sel
+				];
+				const hit = slotCache.current.get(cluster.row.id);
+				const element = hit && hit.deps.every((d, i) => Object.is(d, deps[i])) ? hit.element : /* @__PURE__ */ jsx(TranscriptRowSlot, {
+					eager,
+					estimatePx: rowEstimatePx(cluster.row),
+					style: rowCvStyle(cluster.row),
+					stop: stop ?? void 0,
+					sel,
+					...props
+				}, cluster.row.id);
+				nextSlotCache.set(cluster.row.id, {
+					deps,
+					element
+				});
+				out.push(element);
+				return;
+			}
+			out.push(/* @__PURE__ */ jsx(CvRow, {
+				style: rowCvStyle(cluster.row),
+				"data-stop": stop ?? void 0,
+				"data-sel": sel,
+				"data-row": cluster.row.id,
+				children: /* @__PURE__ */ jsx(TranscriptRow, { ...rowProps(cluster.row) })
+			}, cluster.row.id));
+		};
 		list.forEach((cluster, ci) => {
 			if (cluster.kind === "single") {
-				if (isHiddenRow(cluster.row, showThinking)) return;
-				const stop = stops ? stopForRow(cluster.row, stops) : null;
-				const sel = stop !== null && stop === selectedTurnId ? "" : void 0;
-				if (lazy) {
-					const props = rowProps(cluster.row, true);
-					const eager = ci >= eagerFrom;
-					const deps = [
-						props.row,
-						props.showCaret,
-						props.receipt,
-						props.resumable,
-						props.ctx,
-						props.renderRows,
-						props.status,
-						eager,
-						stop,
-						sel
-					];
-					const hit = slotCache.current.get(cluster.row.id);
-					const element = hit && hit.deps.every((d, i) => Object.is(d, deps[i])) ? hit.element : /* @__PURE__ */ jsx(TranscriptRowSlot, {
-						eager,
-						estimatePx: rowEstimatePx(cluster.row),
-						style: rowCvStyle(cluster.row),
-						stop: stop ?? void 0,
-						sel,
-						...props
-					}, cluster.row.id);
-					nextSlotCache.set(cluster.row.id, {
-						deps,
-						element
-					});
-					out.push(element);
-					return;
-				}
-				out.push(/* @__PURE__ */ jsx(CvRow, {
-					style: rowCvStyle(cluster.row),
-					"data-stop": stop ?? void 0,
-					"data-sel": sel,
-					"data-row": cluster.row.id,
-					children: /* @__PURE__ */ jsx(TranscriptRow, { ...rowProps(cluster.row) })
-				}, cluster.row.id));
+				renderSingle(cluster, ci);
+				const ends = lazy && sessionId ? turnEnds?.get(cluster.row.id) : void 0;
+				for (const turnId of ends ?? []) out.push(/* @__PURE__ */ jsx(ExtensionSlot, {
+					at: "transcript.turn-end",
+					sessionId,
+					turnId,
+					className: "py-1"
+				}, `turn-end:${turnId}`));
 				return;
 			}
 			out.push(renderGroup(cluster, ci));
@@ -293,17 +334,31 @@ const Transcript = memo(function Transcript({ events, streaming, sessionId, opti
 		value: settling,
 		children: /* @__PURE__ */ jsx(RowIconsContext.Provider, {
 			value: o.showRowIcons,
-			children: /* @__PURE__ */ jsxs("div", {
-				ref: containerRef,
-				className,
-				style,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "zg-timeline relative pl-2 pr-1 py-1",
-					children: [/* @__PURE__ */ jsx(SelectCursor, {
-						selected: selectedTurnId,
-						layout: stops
-					}), rootRows]
-				}), children]
+			children: /* @__PURE__ */ jsx(MarkdownDiagrams, {
+				enabled: o.renderDiagrams,
+				children: /* @__PURE__ */ jsx(LinkSessionScope, {
+					sessionId,
+					children: /* @__PURE__ */ jsxs("div", {
+						ref: containerRef,
+						className,
+						style,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "zg-timeline relative pl-2 pr-1 py-1",
+								children: [/* @__PURE__ */ jsx(SelectCursor, {
+									selected: selectedTurnId,
+									layout: stops
+								}), rootRows]
+							}),
+							sessionId && !streaming && events.length > 0 && /* @__PURE__ */ jsx(ExtensionSlot, {
+								at: "transcript.turn-end",
+								sessionId,
+								className: "pl-2 pr-1 py-1"
+							}),
+							children
+						]
+					})
+				})
 			})
 		})
 	});

package/dist/chat/composer/ComposerEditor.js

@@ -2,8 +2,8 @@ import { plainTextToDocJson } from "./prompt-history-nav.js";
 import { suggestionExtension } from "./suggestion-extension.js";
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect } from "react";
-import { EditorContent, useEditor } from "@tiptap/react";
 import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 //#region src/chat/composer/ComposerEditor.tsx
 /**

package/dist/chat/composer/ConversationBadges.js

@@ -1,10 +1,11 @@
 import { useComposerLabels } from "./ComposerHostProvider.js";
+import { useExtensionItems, useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
 import { useSessionHost, useSessionQueue, useSessionRunningWork, useSessionTodos } from "../../session/SessionProvider.js";
+import { slotItems } from "../../extensions/headless/select.js";
 import { ComposerBadges } from "./ComposerBadges.js";
 import { mergeBadgeOrder, orderComposerBadges } from "./badge-order.js";
 import { usePendingInteractions } from "../interactions/hooks.js";
 import { conversationBadges } from "../headless/composer/conversation-badges.js";
-import { useHudBadges, useHudStatuses } from "./use-hud.js";
 import { useSustainedWork } from "./use-sustained-work.js";
 import { jsx } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
@@ -13,8 +14,10 @@ import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 * The composer's badge strip for one conversation (`ComposerBadges`, drawn
 * at the top of the composer's tray): what waits in the inbox, the todos'
 * progress, the queued messages, the running work you can stop, and what
-* extensions show with the session (`ComposerHost.hud`). What goes in, in
-* which default order, is `conversationBadges` (`zidane-ui/chat/headless`).
+* extensions show with the session: their `composer.badges` slot items
+* (`ExtensionsHost`, a click runs the item's command or opens its panel).
+* What goes in, in which default order
+* and how many per extension, is `conversationBadges` (`zidane-ui/chat/headless`).
 *
 * The session's todos, queue and running work come from the `SessionHost`
 * (`zidane-ui/session`), its pending requests from the `ChatHost`
@@ -36,8 +39,9 @@ const ConversationBadges = memo(function ConversationBadges({ sessionId, showTod
 	const todos = useSessionTodos(sessionId);
 	const fetchTodos = useSessionHost().todos?.refresh;
 	const queued = useSessionQueue(sessionId).length;
-	const statuses = useHudStatuses(sessionId);
-	const extensionBadges = useHudBadges(sessionId);
+	const slots = useExtensionItems("slot");
+	const slotBadges = useMemo(() => slotItems(slots, "composer.badges", sessionId ?? void 0), [slots, sessionId]);
+	const runCommand = useExtensionsHost()?.commands?.run;
 	const work = useSustainedWork(sessionId, useSessionRunningWork(sessionId));
 	useEffect(() => {
 		if (sessionId) fetchTodos?.(sessionId);
@@ -54,8 +58,7 @@ const ConversationBadges = memo(function ConversationBadges({ sessionId, showTod
 		showTodos,
 		queued,
 		work,
-		statuses,
-		extensionBadges,
+		slotBadges,
 		panels
 	}, labels), [
 		head,
@@ -64,8 +67,7 @@ const ConversationBadges = memo(function ConversationBadges({ sessionId, showTod
 		showTodos,
 		queued,
 		work,
-		statuses,
-		extensionBadges,
+		slotBadges,
 		panels,
 		labels
 	]);
@@ -85,11 +87,15 @@ const ConversationBadges = memo(function ConversationBadges({ sessionId, showTod
 		onOpenPanel,
 		onClosePanel
 	]);
-	const badges = useMemo(() => orderComposerBadges(data, order).map(({ panel, opensWork, ...badge }) => {
+	const badges = useMemo(() => orderComposerBadges(data, order).map(({ panel, opensWork, command, ...badge }) => {
 		if (opensWork && sessionId && onOpenRunningWork) return {
 			...badge,
 			onSelect: () => onOpenRunningWork(sessionId)
 		};
+		if (command && runCommand) return {
+			...badge,
+			onSelect: () => void runCommand(command, sessionId ? { sessionId } : void 0).catch(() => void 0)
+		};
 		return panel && onOpenPanel ? {
 			...badge,
 			active: panel === onScreen,
@@ -102,7 +108,8 @@ const ConversationBadges = memo(function ConversationBadges({ sessionId, showTod
 		select,
 		sessionId,
 		onOpenRunningWork,
-		onOpenPanel
+		onOpenPanel,
+		runCommand
 	]);
 	const reorder = useCallback((ids) => onOrderChange?.((saved) => mergeBadgeOrder(saved, ids)), [onOrderChange]);
 	return /* @__PURE__ */ jsx("div", {

package/dist/chat/composer/HostPicker.js

@@ -1,7 +1,7 @@
 import { Menu, MenuRow, MenuSection } from "../../components/Menu.js";
 import { Popover } from "../../components/floating/Popover.js";
-import { hostReachable, hostStatusLabel } from "../headless/hosts.js";
 import { useChatLabels } from "../useChatLabels.js";
+import { hostReachable, hostStatusLabel } from "../headless/hosts.js";
 import { HostStatusDot } from "../HostStatusDot.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer/HostPicker.tsx

package/dist/chat/composer/ProjectMenu.d.ts

@@ -1,3 +1,4 @@
+import { PopoverProps } from "../../components/floating/Popover.js";
 import { CSSProperties, ReactNode } from "react";
 //#region src/chat/composer/ProjectMenu.d.ts
 /** Props for {@link ProjectMenu}. */
@@ -20,6 +21,8 @@ interface ProjectMenuProps {
   current: string | null;
   /** Picks a project. */
   onPick: (folder: string) => void;
+  /** The host the projects are on (`HostView.id`), for showing their paths. Absent: this computer. */
+  hostId?: string;
   /** Rows above the projects; `close` closes the menu. */
   leading?: (close: () => void) => ReactNode;
   /** Imports a repository. Absent: not offered. */
@@ -28,6 +31,10 @@ interface ProjectMenuProps {
   onSelectDirectory?: () => void | Promise<void>;
   /** "Select directory…" shows this in the menu instead; `close` closes the menu. */
   browse?: (close: () => void) => ReactNode;
+  /** Draws the element that opens the menu instead of the pill (`label`, `title`, `icon`, `active` then unused). */
+  trigger?: PopoverProps['trigger'];
+  /** How the menu lines up with its trigger. Default: its end. */
+  align?: PopoverProps['align'];
   /** Extra classes on the pill. */
   className?: string;
   /** Inline styles on the pill. */
@@ -38,6 +45,6 @@ interface ProjectMenuProps {
  *
  * @param props - The {@link ProjectMenuProps}.
  */
-declare function ProjectMenu({ label, title, icon, active, disabled, ariaLabel, projects, current, onPick, leading, onImportRepo, onSelectDirectory, browse, className, style }: ProjectMenuProps): import("react").JSX.Element;
+declare function ProjectMenu({ label, title, icon, active, disabled, ariaLabel, projects, current, onPick, hostId, leading, onImportRepo, onSelectDirectory, browse, trigger, align, className, style }: ProjectMenuProps): import("react").JSX.Element;
 //#endregion
 export { ProjectMenu, ProjectMenuProps };

package/dist/chat/composer/ProjectMenu.js

@@ -1,8 +1,9 @@
 import { Menu, MenuRow, MenuSeparator } from "../../components/Menu.js";
 import { Popover } from "../../components/floating/Popover.js";
 import { basename, compactPath } from "../../path.js";
+import { useDisplayPath } from "../../hooks/useDisplayPath.js";
 import { useComposerLabels } from "./ComposerHostProvider.js";
-import { SCOPE_SIDE, scopeTone } from "./scope-side.js";
+import { scopeTone } from "./scope-side.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/chat/composer/ProjectMenu.tsx
@@ -17,33 +18,35 @@ import { useState } from "react";
 * (a server: `RemoteFolderBrowser`), with a row back to the projects.
 *
 * `ScopeToggle` (this computer) and `ServerScopeToggle` (a saved server) are
-* built on it, so both look and behave alike.
+* built on it, so both look and behave alike. With `trigger`, the same menu
+* opens from another element (the project home's name).
 */
 /**
 * Renders the folder pill and its project menu (see the header).
 *
 * @param props - The {@link ProjectMenuProps}.
 */
-function ProjectMenu({ label, title, icon = "i-ph-folder", active, disabled = false, ariaLabel, projects, current, onPick, leading, onImportRepo, onSelectDirectory, browse, className, style }) {
+function ProjectMenu({ label, title, icon = "i-ph-folder", active, disabled = false, ariaLabel, projects, current, onPick, hostId, leading, onImportRepo, onSelectDirectory, browse, trigger, align = "end", className, style }) {
 	const labels = useComposerLabels();
+	const display = useDisplayPath();
 	const [browsing, setBrowsing] = useState(false);
 	const canSelect = Boolean(browse || onSelectDirectory);
 	return /* @__PURE__ */ jsx(Popover, {
 		role: "menu",
 		ariaLabel,
-		align: "end",
+		align,
 		onOpenChange: (open) => {
 			if (!open) setBrowsing(false);
 		},
 		className: browsing ? "w-[340px] max-w-[92vw]" : "min-w-[240px] max-w-[320px]",
-		trigger: (props) => /* @__PURE__ */ jsxs("button", {
+		trigger: trigger ?? ((props) => /* @__PURE__ */ jsxs("button", {
 			...props,
 			type: "button",
 			"aria-pressed": active,
 			"data-active": active ? "" : void 0,
 			disabled,
 			title,
-			className: `${SCOPE_SIDE} ${scopeTone(active)} disabled:cursor-default${className ? ` ${className}` : ""}`,
+			className: `zg-segment-item zg-press-subtle inline-flex items-center gap-1 h-6 px-2 rounded-full text-xs border-0 bg-transparent cursor-pointer whitespace-nowrap ${scopeTone(active)} disabled:cursor-default${className ? ` ${className}` : ""}`,
 			style,
 			children: [/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
@@ -52,7 +55,7 @@ function ProjectMenu({ label, title, icon = "i-ph-folder", active, disabled = fa
 				className: "max-w-[min(140px,18cqi)] truncate",
 				children: label
 			})]
-		}),
+		})),
 		children: (close) => browsing && browse ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col",
 			children: [/* @__PURE__ */ jsx(Menu, {
@@ -83,7 +86,7 @@ function ProjectMenu({ label, title, icon = "i-ph-folder", active, disabled = fa
 					checked: dir === current,
 					trailing: /* @__PURE__ */ jsx("span", {
 						className: "zg-meta truncate max-w-[140px]",
-						children: compactPath(dir, 24)
+						children: compactPath(display.path(dir, hostId), 24)
 					}),
 					onClick: () => {
 						close();

package/dist/chat/composer/RetryPill.js

@@ -17,7 +17,7 @@ function RetryPill({ retry, className, style }) {
 			...style
 		} : WARN,
 		className: `zg-segment-item inline-flex items-center h-6 px-2 rounded-full text-xs font-medium shrink-0 tabular-nums cursor-default${className ? ` ${className}` : ""}`,
-		title: labels.retryHint(retry.attempt, retry.max),
+		title: labels.retryStallHint(retry.attempt, retry.max),
 		children: retryLabel(retry)
 	});
 }

package/dist/chat/composer/SelectTurnHint.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from "react";
+//#region src/chat/composer/SelectTurnHint.d.ts
+/** Props for {@link SelectTurnHint}. */
+interface SelectTurnHintProps {
+  /** The composer's session: the row shows while select-turn mode is on in it. */
+  sessionId: string | null;
+  /** Extra classes on the card. */
+  className?: string;
+  /** Inline styles on the card. */
+  style?: CSSProperties;
+}
+/**
+ * Renders select-turn mode's keys and its exit in the composer's dock, or nothing while the mode is off here.
+ *
+ * @param props - The `sessionId`, `className` and `style`.
+ */
+declare function SelectTurnHint({ sessionId, className, style }: SelectTurnHintProps): import("react").JSX.Element | null;
+//#endregion
+export { SelectTurnHint, SelectTurnHintProps };

package/dist/chat/composer/SelectTurnHint.js

@@ -0,0 +1,28 @@
+import { DockCard, DockRow } from "./DockCard.js";
+import { useSelectTurn } from "../transcript/SelectTurnProvider.js";
+import { SelectTurnExit, SelectTurnHintKeys } from "../transcript/SelectTurnHint.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/chat/composer/SelectTurnHint.tsx
+/**
+* Renders select-turn mode's keys and its exit in the composer's dock, or nothing while the mode is off here.
+*
+* @param props - The `sessionId`, `className` and `style`.
+*/
+function SelectTurnHint({ sessionId, className, style }) {
+	const sel = useSelectTurn().state;
+	if (!sel || sel.sessionId !== sessionId) return null;
+	return /* @__PURE__ */ jsx(DockCard, {
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(DockRow, {
+			glyph: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "i-ph-cursor-text text-zg-label text-[var(--zg-accent)]"
+			}),
+			trailing: /* @__PURE__ */ jsx(SelectTurnExit, {}),
+			children: /* @__PURE__ */ jsx(SelectTurnHintKeys, { sessionId })
+		})
+	});
+}
+//#endregion
+export { SelectTurnHint };

package/dist/chat/composer/ServerScopeToggle.js

@@ -1,5 +1,6 @@
 import { MenuRow } from "../../components/Menu.js";
 import { basename, compactPath } from "../../path.js";
+import { useDisplayPath } from "../../hooks/useDisplayPath.js";
 import { useComposerLabels } from "./ComposerHostProvider.js";
 import { ProjectMenu } from "./ProjectMenu.js";
 import { RemoteFolderBrowser } from "../../git/RemoteFolderPicker.js";
@@ -12,6 +13,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 */
 function ServerScopeToggle({ hostId, hostName, folder, onChange, projects, root = null, clone = null, cloning = false, onImportRepo, className, style }) {
 	const labels = useComposerLabels();
+	const display = useDisplayPath();
 	const pending = folder === null && clone?.state !== "off" ? clone : null;
 	const label = folder ? basename(folder) : pending ? cloning ? labels.scopeCloning(pending.name) : pending.state === "clone" ? labels.scopeCloneWill(pending.name) : pending.name : labels.scopeServerDefault;
 	const title = folder ? labels.scopeServerFolderHint(folder, hostName) : pending ? cloneHint(pending) : labels.scopeServerDefaultHint(hostName);
@@ -38,6 +40,7 @@ function ServerScopeToggle({ hostId, hostName, folder, onChange, projects, root
 			projects: listed,
 			current: folder,
 			onPick: onChange,
+			hostId,
 			leading: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [clone && /* @__PURE__ */ jsx(MenuRow, {
 				role: "menuitem",
 				icon: /* @__PURE__ */ jsx("span", {
@@ -67,7 +70,7 @@ function ServerScopeToggle({ hostId, hostName, folder, onChange, projects, root
 				checked: defaultPicked,
 				...root ? { trailing: /* @__PURE__ */ jsx("span", {
 					className: "zg-meta truncate max-w-[140px]",
-					children: compactPath(root, 24)
+					children: compactPath(display.path(root, hostId), 24)
 				}) } : {},
 				onClick: () => {
 					close();