zidane-ui 9.1.13 → 9.1.14

package/dist/chat/interactions/card-ui.js

@@ -1,4 +1,5 @@
 import { buttonClass } from "../../components/button.js";
+import { Notice } from "../../components/Notice.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 //#region src/chat/interactions/card-ui.tsx
@@ -27,15 +28,16 @@ const INPUT = `${FIELD} w-full placeholder:text-[var(--zg-text-subtle)]`;
 /**
 * Renders an inline error message, or nothing when there is none.
 *
-* @param props - Component props: the `error` text.
+* @param props - Component props: the `error` message and its raw `detail`.
 */
-function CardError({ error, className, style }) {
+function CardError({ error, detail, className, style }) {
 	if (!error) return null;
-	return /* @__PURE__ */ jsx("span", {
-		role: "alert",
-		className: ["min-w-0 truncate text-zg-meta text-[var(--zg-error)]", className].filter(Boolean).join(" "),
-		style,
-		title: error,
+	return /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		compact: true,
+		...detail ? { detail } : {},
+		className: ["min-w-0", className].filter(Boolean).join(" "),
+		...style ? { style } : {},
 		children: error
 	});
 }

package/dist/chat/sidebar/SessionSidebar.js

@@ -1,4 +1,5 @@
 import { useWithFade } from "../../motion/springs.js";
+import { errorMessage } from "../../components/report-error.js";
 import { basename } from "../../path.js";
 import { useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
 import { useSidebarNotice } from "./SidebarHostProvider.js";
@@ -133,7 +134,6 @@ function NewSessionButton({ onNewSession, isActive, className = "", style }) {
 		})
 	});
 }
-const messageOf = (err) => err?.message ?? String(err);
 const NO_ITEMS = [];
 const NO_DECORATIONS = [];
 /**
@@ -339,14 +339,14 @@ function SessionSidebar(props) {
 		});
 	}, [onDelete]);
 	const onRowMoveToSpace = useCallback((sessionId, spaceId) => {
-		onMoveToSpace?.(sessionId, spaceId).catch((err) => notify(labels.moveSessionFailed(messageOf(err))));
+		onMoveToSpace?.(sessionId, spaceId).catch((err) => notify(labels.moveSessionFailed(errorMessage(err))));
 	}, [
 		onMoveToSpace,
 		notify,
 		labels
 	]);
 	const onRowMoveProjectToSpace = useCallback((project, spaceId) => {
-		onMoveProjectToSpace?.(project, spaceId).catch((err) => notify(labels.moveProjectFailed(messageOf(err))));
+		onMoveProjectToSpace?.(project, spaceId).catch((err) => notify(labels.moveProjectFailed(errorMessage(err))));
 	}, [
 		onMoveProjectToSpace,
 		notify,
@@ -361,7 +361,7 @@ function SessionSidebar(props) {
 		if (!open) return;
 		if (onOpenItem) return onOpenItem(open, entry);
 		if ("session" in open) commitImmediate(open.session);
-		else if ("command" in open) runCommand?.(open.command, { args: entry.item.args }).catch((err) => notify(labels.itemOpenFailed(messageOf(err))));
+		else if ("command" in open) runCommand?.(open.command, { args: entry.item.args }).catch((err) => notify(labels.itemOpenFailed(errorMessage(err))));
 		else if ("panel" in open) workspace?.focusTab(open.panel);
 		else openScreen(open.screen);
 	}, [
@@ -375,7 +375,7 @@ function SessionSidebar(props) {
 	]);
 	const onRunItemAction = useCallback((entry, action) => {
 		if (!action.command || !runCommand) return;
-		runCommand(action.command, { args: entry.item.args }).catch((err) => notify(labels.itemOpenFailed(messageOf(err))));
+		runCommand(action.command, { args: entry.item.args }).catch((err) => notify(labels.itemOpenFailed(errorMessage(err))));
 	}, [
 		runCommand,
 		notify,

package/dist/chat/sidebar/SidebarFilterMenu.js

@@ -1,6 +1,7 @@
 import { useChatLabels } from "../useChatLabels.js";
 import { SessionFilterMenu } from "../SessionFilterMenu.js";
 import { VIEW_CHOICE } from "../headless/sidebar/types.js";
+import { DEFAULT_SIDEBAR_VIEW } from "../headless/sidebar/view.js";
 import { useAgentNames } from "./useAgentNames.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
@@ -23,6 +24,7 @@ const VIEWS_WITH_HOST = [
 const SORTS = [
 	"alphabetical",
 	"createdTime",
+	"lastUserMessage",
 	"recency"
 ];
 const ALL_AGENTS = "__all__";
@@ -179,7 +181,7 @@ function SidebarFilterMenu({ view, projects, onChange, hosts = false, agents, ag
 				label: labels.filterSort,
 				placement: "sort",
 				value: options.find((o) => o.id === current)?.label ?? current,
-				atDefault: current === (space?.sortBy ? SPACE : "recency"),
+				atDefault: current === (space?.sortBy ? SPACE : DEFAULT_SIDEBAR_VIEW.sortBy),
 				options,
 				current,
 				onChange: (next) => {

package/dist/chat/sidebar/SidebarFrame.d.ts

@@ -22,6 +22,10 @@ interface SidebarFrameState {
   mounted: boolean;
   /** Fully open (not entering or closing). */
   open: boolean;
+  /** Open over the chat: the window is too narrow to dock it (`LayoutBudget.sidebarPeek`). */
+  overlay: boolean;
+  /** Closes it when it is open over the chat. */
+  closeOverlay: () => void;
   /** The width shown (px). */
   width: number;
   /** The aside, for the drag's live CSS var. */

package/dist/chat/sidebar/SidebarFrame.js

@@ -2,8 +2,8 @@ import { readPanelMs, usePresence } from "../../motion/presence.js";
 import { useResizeDrag } from "../../hooks/useResizeDrag.js";
 import { DEFAULT_APPEARANCE, LIMITS } from "../../appearance/headless/prefs.js";
 import { useLayoutBudgetOptional } from "../../workspace/LayoutBudget.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 //#region src/chat/sidebar/SidebarFrame.tsx
 /**
 * The frame's presence, width and drag.
@@ -13,11 +13,13 @@ import { useRef } from "react";
 function useSidebarFrame(options) {
 	const { collapsed, width: wanted, onWidthCommit, minWidth = LIMITS.sidebarWidth.min, maxWidth = LIMITS.sidebarWidth.max, defaultWidth = DEFAULT_APPEARANCE.sidebarWidth } = options;
 	const budget = useLayoutBudgetOptional();
-	const presence = usePresence(!collapsed && !(budget?.sidebarForcedCollapsed ?? false), {
+	const forced = budget?.sidebarForcedCollapsed ?? false;
+	const overlay = forced && (budget?.sidebarPeek ?? false);
+	const presence = usePresence(forced ? overlay : !collapsed, {
 		enter: true,
 		exitMs: readPanelMs
 	});
-	const width = budget && budget.sidebarWidth > 0 ? budget.sidebarWidth : wanted;
+	const width = overlay ? Math.min(wanted, Math.max(minWidth, (budget?.chatWidth ?? wanted) - 48)) : budget && budget.sidebarWidth > 0 ? budget.sidebarWidth : wanted;
 	const asideRef = useRef(null);
 	const max = budget ? Math.max(minWidth, budget.getCaps().sidebarMax) : maxWidth;
 	const drag = useResizeDrag({
@@ -32,9 +34,12 @@ function useSidebarFrame(options) {
 		},
 		onCommit: onWidthCommit
 	});
+	const closeOverlay = () => budget?.peekSidebar(false);
 	return {
 		mounted: presence.mounted,
 		open: presence.state === "open",
+		overlay,
+		closeOverlay,
 		width,
 		asideRef,
 		drag
@@ -46,13 +51,26 @@ function useSidebarFrame(options) {
 * @param props - The frame state, the chrome inset, the content, its name, `className` and `style`.
 */
 function SidebarFrame({ frame, chromeInset, children, ariaLabel, className = "", style }) {
-	const { open, width, asideRef, drag } = frame;
-	return /* @__PURE__ */ jsxs("aside", {
+	const { open, overlay, closeOverlay, width, asideRef, drag } = frame;
+	useEffect(() => {
+		if (!overlay) return void 0;
+		const onKey = (event) => {
+			if (event.key === "Escape") closeOverlay();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [overlay, closeOverlay]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [overlay && /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: "fixed inset-0 z-40 bg-black/30",
+		onClick: closeOverlay
+	}), /* @__PURE__ */ jsxs("aside", {
 		ref: asideRef,
 		...ariaLabel ? { "aria-label": ariaLabel } : {},
 		"data-collapsed": !open,
 		"aria-hidden": !open,
-		className: `zg-sidebar relative z-[2] shrink-0 h-full bg-[var(--zg-tray)]${className ? ` ${className}` : ""}`,
+		"data-overlay": overlay || void 0,
+		className: `zg-sidebar ${overlay ? "fixed left-0 top-0 z-zg-overlay shadow-[var(--zg-shadow-float)]" : "relative z-[2]"} shrink-0 h-full bg-[var(--zg-tray)]${className ? ` ${className}` : ""}`,
 		style: {
 			"--zg-sidebar-w": `${width}px`,
 			...style
@@ -68,12 +86,12 @@ function SidebarFrame({ frame, chromeInset, children, ariaLabel, className = "",
 					style: { width: chromeInset.width }
 				})
 			}), children]
-		}), open && /* @__PURE__ */ jsx("div", {
+		}), open && !overlay && /* @__PURE__ */ jsx("div", {
 			...drag.handleProps,
 			"data-active": drag.active,
 			className: "zg-resize-handle zg-no-drag -right-1"
 		})]
-	});
+	})] });
 }
 //#endregion
 export { SidebarFrame, useSidebarFrame };

package/dist/chat/sidebar/SidebarGroupHeader.js

@@ -144,7 +144,7 @@ function SidebarGroupHeader({ row, groupBy, icon, onAssignIcon, onToggle, onNewS
 			label: pinned ? labels.unpinNamed(row.label) : labels.pinNamed(row.label),
 			size: "xs",
 			"aria-pressed": pinned,
-			className: pinned ? void 0 : "zg-row-dots",
+			className: "zg-row-dots",
 			onClick: (event) => {
 				event.stopPropagation();
 				onSetPinned(row.fullPath, !pinned);

package/dist/chat/sidebar/SidebarHostProvider.d.ts

@@ -1,12 +1,15 @@
 import { SidebarHost } from "../headless/sidebar/host.js";
+import { NoticeTone } from "../../components/Notice.js";
 import { ReactNode } from "react";
 //#region src/chat/sidebar/SidebarHostProvider.d.ts
+/** Tells the user a command's outcome, worded for people: `error` unless a `tone` says otherwise. */
+type SidebarNotify = (message: string, tone?: NoticeTone) => void;
 /** Props of {@link SidebarHostProvider}. */
 interface SidebarHostProviderProps {
   /** The platform's sidebar capabilities. */
   host: SidebarHost;
-  /** Tells the user a command's outcome or failure. Default: the browser's `alert`. */
-  notify?: (message: string) => void;
+  /** Tells the user a command's outcome or failure. Default: the app's notice stack (`useNotify`). */
+  notify?: SidebarNotify;
   /** The app's components. */
   children: ReactNode;
 }
@@ -18,7 +21,7 @@ interface SidebarHostProviderProps {
 declare function SidebarHostProvider({ host, notify, children }: SidebarHostProviderProps): import("react").JSX.Element;
 /** The nearest {@link SidebarHost}; an empty host (every capability left out) outside a provider. */
 declare function useSidebarHost(): SidebarHost;
-/** How the nearest {@link SidebarHostProvider} tells the user something. */
-declare function useSidebarNotice(): (message: string) => void;
+/** How the nearest {@link SidebarHostProvider} tells the user something: its `notify`, else the app's notice stack. */
+declare function useSidebarNotice(): SidebarNotify;
 //#endregion
-export { SidebarHostProvider, SidebarHostProviderProps, useSidebarHost, useSidebarNotice };
+export { SidebarHostProvider, SidebarHostProviderProps, SidebarNotify, useSidebarHost, useSidebarNotice };

package/dist/chat/sidebar/SidebarHostProvider.js

@@ -1,27 +1,25 @@
+import { useNotify } from "../../app/NoticeStack.js";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
 //#region src/chat/sidebar/SidebarHostProvider.tsx
 /**
 * Puts a `SidebarHost` in context for the sidebar's rows and every other
 * surface that offers a session's menu (the session header), with the way
 * the app tells the user a command's outcome (`notify`).
 */
-const browserAlert = (message) => {
-	globalThis.alert?.(message);
-};
 const SidebarHostContext = createContext({
 	host: {},
-	notify: browserAlert
+	notify: null
 });
 /**
 * Provides a {@link SidebarHost} to the sidebar and the session menus below.
 *
 * @param props - The `host`, an optional `notify` and the `children`.
 */
-function SidebarHostProvider({ host, notify = browserAlert, children }) {
+function SidebarHostProvider({ host, notify = void 0, children }) {
 	const value = useMemo(() => ({
 		host,
-		notify
+		notify: notify ?? null
 	}), [host, notify]);
 	return /* @__PURE__ */ jsx(SidebarHostContext.Provider, {
 		value,
@@ -32,9 +30,15 @@ function SidebarHostProvider({ host, notify = browserAlert, children }) {
 function useSidebarHost() {
 	return useContext(SidebarHostContext).host;
 }
-/** How the nearest {@link SidebarHostProvider} tells the user something. */
+/** How the nearest {@link SidebarHostProvider} tells the user something: its `notify`, else the app's notice stack. */
 function useSidebarNotice() {
-	return useContext(SidebarHostContext).notify;
+	const own = useContext(SidebarHostContext).notify;
+	const notify = useNotify();
+	const viaStack = useCallback((message, tone = "error") => notify({
+		tone,
+		message
+	}), [notify]);
+	return own ?? viaStack;
 }
 //#endregion
 export { SidebarHostProvider, useSidebarHost, useSidebarNotice };

package/dist/chat/sidebar/SidebarToggleButton.js

@@ -11,12 +11,16 @@ import { jsx } from "react/jsx-runtime";
 function SidebarToggleButton({ collapsed: collapsedProp, onClick, className = "", style }) {
 	const labels = useSidebarLabels();
 	const budget = useLayoutBudgetOptional();
-	const collapsed = collapsedProp || (budget?.sidebarForcedCollapsed ?? false);
+	const forced = budget?.sidebarForcedCollapsed ?? false;
+	const collapsed = forced ? !budget?.sidebarPeek : collapsedProp;
 	return /* @__PURE__ */ jsx(IconButton, {
 		icon: "i-ph-sidebar",
 		label: collapsed ? labels.expandSidebar : labels.collapseSidebar,
-		onClick,
-		style,
+		onClick: forced ? () => budget?.peekSidebar(!budget.sidebarPeek) : onClick,
+		style: forced && budget?.sidebarPeek ? {
+			...style,
+			zIndex: 51
+		} : style,
 		className: `zg-hit-extend ${className}`
 	});
 }

package/dist/chat/sidebar/index.d.ts

@@ -10,7 +10,7 @@ import { NewSessionButton, NewSessionButtonProps, SessionSidebar, SessionSidebar
 import { SidebarChip, SidebarChipProps, SidebarDecoration, SidebarDecorationProps } from "./SidebarDecoration.js";
 import { SidebarFilterMenu, SidebarFilterMenuProps } from "./SidebarFilterMenu.js";
 import { SidebarCompactingIndicator, SidebarCompactingIndicatorProps, SidebarFooter, SidebarFooterProps, SidebarSettingsNote, SidebarSignInPrompt, SidebarSignInPromptProps, SidebarUsageIndicator, SidebarUsageIndicatorProps } from "./SidebarFooter.js";
-import { SidebarHostProvider, SidebarHostProviderProps, useSidebarHost, useSidebarNotice } from "./SidebarHostProvider.js";
+import { SidebarHostProvider, SidebarHostProviderProps, SidebarNotify, useSidebarHost, useSidebarNotice } from "./SidebarHostProvider.js";
 import { SidebarRowView, SidebarRowViewProps } from "./SidebarRowView.js";
 import { SidebarSearchRow, SidebarSearchRowProps } from "./SidebarSearchRow.js";
 import { SidebarRowHandlers, SidebarSessionRow, SidebarSessionRowProps } from "./SidebarSessionRow.js";
@@ -27,4 +27,4 @@ import { SessionDirectoryView, useSessionDirectoryView } from "./useSessionDirec
 import { useMainSession } from "./use-main-session.js";
 import { useSaveViewAsSpace } from "./useSaveViewAsSpace.js";
 import { SidebarKeyboardNavOptions, useSidebarKeyboardNav } from "./useSidebarKeyboardNav.js";
-export { ARRIVAL_MS, type BadgeCardPlacement, EnvironmentChip, type EnvironmentChipProps, ICON_PICKER_WIDTH, IconPicker, type IconPickerProps, MainSessionRow, type MainSessionRowProps, NewSessionButton, type NewSessionButtonProps, ProjectChip, type ProjectChipProps, ProjectIconButton, type ProjectIconButtonProps, ProjectIconGlyph, type ProjectIconGlyphProps, type RowProject, type SessionContentSearch, type SessionDirectoryView, type SessionMenuActions, type SessionMenuContext, type SessionMenuSurfaceActions, type SessionMenuTarget, SessionSidebar, type SessionSidebarProps, type SidebarBadgeFocus, SidebarChip, type SidebarChipProps, type SidebarChromeInset, type SidebarCollapsedStore, SidebarCompactingIndicator, type SidebarCompactingIndicatorProps, SidebarDecoration, type SidebarDecorationProps, SidebarFilterMenu, type SidebarFilterMenuProps, SidebarFooter, type SidebarFooterProps, SidebarFrame, type SidebarFrameOptions, type SidebarFrameProps, type SidebarFrameState, SidebarGroupHeader, type SidebarGroupHeaderProps, type SidebarHeaderRow, SidebarHostProvider, type SidebarHostProviderProps, type SidebarKeyboardNavOptions, type SidebarLive, type SidebarLiveOptions, type SidebarProject, type SidebarProjectRef, type SidebarRowArtifactsProps, type SidebarRowHandlers, type SidebarRowMetaProps, type SidebarRowSession, SidebarRowView, type SidebarRowViewProps, SidebarSearchRow, type SidebarSearchRowProps, SidebarSessionRow, type SidebarSessionRowProps, type SidebarSettingsNote, SidebarSignInPrompt, type SidebarSignInPromptProps, type SidebarSpaceSlide, SidebarToggleButton, type SidebarToggleButtonProps, SidebarUsageIndicator, type SidebarUsageIndicatorProps, SpaceGlyph, type SpaceGlyphProps, SpaceSwitcher, type SpaceSwitcherProps, SpacesSection, type SpacesSectionProps, archiveProjectPrompt, createSidebarCollapsed, createSidebarLive, deleteProjectPrompt, sessionMenuItems, spaceRows, useArrival, useCompactionProgress, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useMainSession, usePinnedProjects, useProjectIcons, useProjectSessionActions, useSaveViewAsSpace, useSessionActivity, useSessionBadges, useSessionDirectoryView, useSessionMenuItems, useSessionSearch, useSidebarFrame, useSidebarHost, useSidebarKeyboardNav, useSidebarLabels, useSidebarNotice };
+export { ARRIVAL_MS, type BadgeCardPlacement, EnvironmentChip, type EnvironmentChipProps, ICON_PICKER_WIDTH, IconPicker, type IconPickerProps, MainSessionRow, type MainSessionRowProps, NewSessionButton, type NewSessionButtonProps, ProjectChip, type ProjectChipProps, ProjectIconButton, type ProjectIconButtonProps, ProjectIconGlyph, type ProjectIconGlyphProps, type RowProject, type SessionContentSearch, type SessionDirectoryView, type SessionMenuActions, type SessionMenuContext, type SessionMenuSurfaceActions, type SessionMenuTarget, SessionSidebar, type SessionSidebarProps, type SidebarBadgeFocus, SidebarChip, type SidebarChipProps, type SidebarChromeInset, type SidebarCollapsedStore, SidebarCompactingIndicator, type SidebarCompactingIndicatorProps, SidebarDecoration, type SidebarDecorationProps, SidebarFilterMenu, type SidebarFilterMenuProps, SidebarFooter, type SidebarFooterProps, SidebarFrame, type SidebarFrameOptions, type SidebarFrameProps, type SidebarFrameState, SidebarGroupHeader, type SidebarGroupHeaderProps, type SidebarHeaderRow, SidebarHostProvider, type SidebarHostProviderProps, type SidebarKeyboardNavOptions, type SidebarLive, type SidebarLiveOptions, type SidebarNotify, type SidebarProject, type SidebarProjectRef, type SidebarRowArtifactsProps, type SidebarRowHandlers, type SidebarRowMetaProps, type SidebarRowSession, SidebarRowView, type SidebarRowViewProps, SidebarSearchRow, type SidebarSearchRowProps, SidebarSessionRow, type SidebarSessionRowProps, type SidebarSettingsNote, SidebarSignInPrompt, type SidebarSignInPromptProps, type SidebarSpaceSlide, SidebarToggleButton, type SidebarToggleButtonProps, SidebarUsageIndicator, type SidebarUsageIndicatorProps, SpaceGlyph, type SpaceGlyphProps, SpaceSwitcher, type SpaceSwitcherProps, SpacesSection, type SpacesSectionProps, archiveProjectPrompt, createSidebarCollapsed, createSidebarLive, deleteProjectPrompt, sessionMenuItems, spaceRows, useArrival, useCompactionProgress, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useMainSession, usePinnedProjects, useProjectIcons, useProjectSessionActions, useSaveViewAsSpace, useSessionActivity, useSessionBadges, useSessionDirectoryView, useSessionMenuItems, useSessionSearch, useSidebarFrame, useSidebarHost, useSidebarKeyboardNav, useSidebarLabels, useSidebarNotice };

package/dist/chat/sidebar/session-menu.js

@@ -1,3 +1,4 @@
+import { errorMessage } from "../../components/report-error.js";
 import { useSidebarHost, useSidebarNotice } from "./SidebarHostProvider.js";
 import { useLinkRouter } from "../../extensions/links.js";
 import { useConfirm } from "../../app/useConfirm.js";
@@ -163,7 +164,6 @@ function useEnvironmentActions(sessionId, enabled) {
 	]);
 	return actions;
 }
-const messageOf = (err) => err?.message ?? String(err);
 /**
 * Running an environment command (open what it returns, else say what happened) and setting a failed
 * environment up again, worded through the labels and told with the provider's `notify`. Stable identities.
@@ -180,8 +180,8 @@ function useEnvironmentCommands() {
 				source: "other",
 				sessionId
 			});
-			else notify(result.message);
-		}).catch((err) => notify(labels.environmentActionFailed(label, messageOf(err))));
+			else notify(result.message, "info");
+		}).catch((err) => notify(labels.environmentActionFailed(label, errorMessage(err))));
 	}, [
 		environment,
 		notify,
@@ -189,7 +189,7 @@ function useEnvironmentCommands() {
 		links
 	]);
 	const retry = useCallback((sessionId) => {
-		environment?.retry(sessionId).catch((err) => notify(labels.retryEnvironmentFailed(messageOf(err))));
+		environment?.retry(sessionId).catch((err) => notify(labels.retryEnvironmentFailed(errorMessage(err))));
 	}, [
 		environment,
 		notify,

package/dist/chat/sidebar/useSaveViewAsSpace.js

@@ -1,3 +1,4 @@
+import { errorMessage } from "../../components/report-error.js";
 import { useSidebarNotice } from "./SidebarHostProvider.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { nextSavedViewName } from "../headless/sidebar/query.js";
@@ -9,7 +10,6 @@ import { useCallback, useRef } from "react";
 * the user when the save fails (`labels.saveViewFailed` through the nearest
 * `SidebarHostProvider`'s `notify`), so every app saves views the same way.
 */
-const messageOf = (err) => err instanceof Error ? err.message : String(err);
 /**
 * The filter menu's `onSaveView` over a directory's `saveViewAsSpace`: saves the shown view under
 * the next free saved-view name; a failure (an invalid query, a settings write that failed) shows
@@ -36,7 +36,7 @@ function useSaveViewAsSpace(save, spaces) {
 	const onSave = useCallback(() => {
 		const { save: run, spaces: all, labels: words, notify: tell } = latest.current;
 		if (!run) return;
-		run(nextSavedViewName(all, words.savedViewName)).catch((err) => tell(words.saveViewFailed(messageOf(err))));
+		run(nextSavedViewName(all, words.savedViewName)).catch((err) => tell(words.saveViewFailed(errorMessage(err))));
 	}, []);
 	return save ? onSave : void 0;
 }

package/dist/chat/testing/contract.js

@@ -524,9 +524,9 @@ function describeChatHostContract(name, makeHarness, capabilities) {
 		it.skipIf(!has("sessions", "sessions.onChanged", "sessions.rename"))("signals a changed session", async () => {
 			const { host } = await setup();
 			const seen = [];
-			cleanup.push(host.sessions.onChanged((id) => seen.push(id)));
+			cleanup.push(host.sessions.onChanged((change) => seen.push(change.op === "delete" ? "" : change.row?.title ?? "")));
 			await host.sessions.rename("c-2", "Renamed");
-			await waitFor(() => expect(seen).toContain("c-2"));
+			await waitFor(() => expect(seen).toContain("Renamed"));
 		});
 		it.skipIf(!has("sessions", "sessions.views"))("keeps the sidebar views and the shown space", async () => {
 			const { host } = await setup();

package/dist/chat/transcript/AuthFailureCard.js

@@ -1,4 +1,5 @@
 import { buttonClass } from "../../components/button.js";
+import { Notice } from "../../components/Notice.js";
 import "../../components/Form.js";
 import { useReadable } from "../headless/store.js";
 import { RoutedLink } from "../../extensions/links.js";
@@ -216,10 +217,11 @@ const AuthFailureCard = memo(function AuthFailureCard({ auth, text, detail, fail
 				onCancel: signIn.cancel
 			}) : flow?.kind === "error" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ jsx("div", {
-					role: "alert",
-					className: "text-zg-danger break-words",
-					children: labels.authFailed(flow.message)
+				children: [/* @__PURE__ */ jsx(Notice, {
+					tone: "error",
+					compact: true,
+					detail: flow.message,
+					children: labels.authSignInFailed
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap items-center gap-1.5",
 					children: [/* @__PURE__ */ jsx("button", {
@@ -236,10 +238,11 @@ const AuthFailureCard = memo(function AuthFailureCard({ auth, text, detail, fail
 				})]
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1.5",
-				children: [switching?.error !== void 0 && /* @__PURE__ */ jsx("div", {
-					role: "alert",
-					className: "text-zg-danger break-words",
-					children: labels.authFailed(switching.error)
+				children: [switching?.error !== void 0 && /* @__PURE__ */ jsx(Notice, {
+					tone: "error",
+					compact: true,
+					detail: switching.error,
+					children: labels.authSignInFailed
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap items-center gap-1.5",
 					children: [

package/dist/chat/transcript/BadgeMenu.js

@@ -1,6 +1,8 @@
+import { errorMessage } from "../../components/report-error.js";
 import { RowActionsMenu } from "../../components/RowActionsMenu.js";
 import { useOptionalChatHost } from "../ChatProvider.js";
 import { useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
+import { useNotify } from "../../app/NoticeStack.js";
 import { openInNewTab } from "../../extensions/headless/links.js";
 import { useLinkRouter } from "../../extensions/links.js";
 import { extensionsBadgeActions } from "../headless/extension-sources.js";
@@ -67,6 +69,7 @@ function BadgeMenuProvider({ composer, system, browser, children }) {
 	const badges = useOptionalChatHost()?.badges ?? extensionsBadgeActions(extensions);
 	const labels = useChatLabels();
 	const links = useLinkRouter();
+	const notify = useNotify();
 	const [open, setOpen] = useState(null);
 	const [notice, setNotice] = useState(null);
 	const seq = useRef(0);
@@ -124,7 +127,14 @@ function BadgeMenuProvider({ composer, system, browser, children }) {
 					return;
 				}
 				(async () => {
-					const text = await applyBadgeEffect(item.source === "builtin" ? builtinBadgeEffect(item.id, target) ?? {} : await (badges?.run(cwd, item.source, item.id, target) ?? Promise.resolve({})).catch((err) => ({ notice: err instanceof Error ? err.message : String(err) })), {
+					const text = await applyBadgeEffect(item.source === "builtin" ? builtinBadgeEffect(item.id, target) ?? {} : await (badges?.run(cwd, item.source, item.id, target) ?? Promise.resolve({})).catch((err) => {
+						notify({
+							tone: "error",
+							message: labels.badgeActionFailed,
+							detail: errorMessage(err)
+						});
+						return {};
+					}), {
 						target,
 						cwd,
 						builtin: item.source === "builtin" ? item.id : null,
@@ -148,7 +158,8 @@ function BadgeMenuProvider({ composer, system, browser, children }) {
 		system,
 		browser,
 		labels,
-		links
+		links,
+		notify
 	]);
 	return /* @__PURE__ */ jsxs(BadgeMenuContext.Provider, {
 		value: show,

package/dist/chat/transcript/MermaidDiagram.js

@@ -1,3 +1,4 @@
+import { Notice } from "../../components/Notice.js";
 import { CodeFrame } from "../../components/CodeFrame.js";
 import { useNearViewport } from "../../hooks/useNearViewport.js";
 import { HighlightedCode } from "../../code/HighlightedCode.js";
@@ -159,9 +160,12 @@ const MermaidDiagram = memo(function MermaidDiagram({ code, streaming = false, c
 				language: "mermaid",
 				className: "mb-1",
 				copyLabel: labels.copyDiagramSource
-			}), /* @__PURE__ */ jsx("p", {
-				className: "zg-meta m-0 mb-2 whitespace-pre-wrap",
-				children: labels.diagramError(failed.message, at)
+			}), /* @__PURE__ */ jsx(Notice, {
+				tone: "warning",
+				compact: true,
+				detail: failed.message,
+				className: "mb-2",
+				children: labels.diagramNotDrawn(at)
 			})]
 		});
 	}

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

@@ -41,6 +41,10 @@ interface FoldHeaderProps {
  * a toggle with its caret when opening shows something more, otherwise the
  * same line, inert. Same box, tone and spacing either way.
  *
+ * One element in both states: swapping a `<div>` for a `<button>` remounted
+ * the line's content, so a live fold turning expandable (its 4th step) replayed
+ * the enter of everything in it, its elapsed chip popping in again.
+ *
  * @param props - Header props: `expandable`, `open`, `onToggle`, and the `children` of the line.
  */
 declare function FoldHeader({ expandable, open, onToggle, children, className, style }: FoldHeaderProps): import("react").JSX.Element;

package/dist/chat/transcript/fold.js

@@ -187,23 +187,35 @@ function FoldOutcomes({ ok, failed }) {
 * a toggle with its caret when opening shows something more, otherwise the
 * same line, inert. Same box, tone and spacing either way.
 *
+* One element in both states: swapping a `<div>` for a `<button>` remounted
+* the line's content, so a live fold turning expandable (its 4th step) replayed
+* the enter of everything in it, its elapsed chip popping in again.
+*
 * @param props - Header props: `expandable`, `open`, `onToggle`, and the `children` of the line.
 */
 function FoldHeader({ expandable, open, onToggle, children, className, style }) {
 	const line = "flex items-baseline gap-2 h-[22.4px] min-w-0 max-w-full text-[var(--zg-text-muted)]";
-	if (!expandable) return /* @__PURE__ */ jsx("div", {
-		"data-testid": "fold-head",
-		className: [line, className].filter(Boolean).join(" "),
-		style,
-		children
-	});
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: onToggle,
+	const toggle = expandable ? {
+		role: "button",
+		tabIndex: 0,
 		"aria-expanded": open,
-		className: [`zg-disclosure zg-press-subtle ${line}`, className].filter(Boolean).join(" "),
+		onClick: onToggle,
+		onKeyDown: (e) => {
+			if (e.key !== "Enter" && e.key !== " ") return;
+			e.preventDefault();
+			onToggle();
+		}
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "fold-head",
+		className: [
+			expandable ? "zg-disclosure zg-press-subtle" : "",
+			line,
+			className
+		].filter(Boolean).join(" "),
 		style,
-		children: [children, /* @__PURE__ */ jsx(Caret, {
+		...toggle,
+		children: [children, expandable && /* @__PURE__ */ jsx(Caret, {
 			open,
 			className: "shrink-0 self-center"
 		})]
@@ -224,6 +236,7 @@ function FoldActions({ items, all, openIds, onToggle, renderRows }) {
 			children: items.map((item) => /* @__PURE__ */ jsx(Grow, {
 				as: "li",
 				appear: !firstIds.has(item.id),
+				symmetric: !all,
 				className: "-mx-1.5 px-1.5",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "pt-[var(--zg-fold-gap)]",
@@ -260,20 +273,38 @@ function ActionWithDetails({ item, openIds, onToggle, renderRows }) {
 				})
 			})
 		}),
-		item.children && item.children.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: "list-none m-0 p-0 pl-7",
-			"data-testid": "fold-action-children",
-			children: item.children.map((child) => /* @__PURE__ */ jsx("li", {
-				className: "pt-[var(--zg-fold-gap)]",
-				children: /* @__PURE__ */ jsx(ActionWithDetails, {
-					item: child,
-					openIds,
-					onToggle,
-					renderRows
+		item.children && item.children.length > 0 && /* @__PURE__ */ jsx(ActionChildren, {
+			items: item.children,
+			openIds,
+			onToggle,
+			renderRows
+		})
+	] });
+}
+/** The calls an action made, one step in. A call made after the list showed grows in instead of snapping the rows below down. */
+function ActionChildren({ items, openIds, onToggle, renderRows }) {
+	const [firstIds] = useState(() => new Set(items.map((i) => i.id)));
+	return /* @__PURE__ */ jsx("ul", {
+		className: "list-none m-0 p-0 pl-7",
+		"data-testid": "fold-action-children",
+		children: /* @__PURE__ */ jsx(GrowPresence, {
+			initial: false,
+			children: items.map((child) => /* @__PURE__ */ jsx(Grow, {
+				as: "li",
+				appear: !firstIds.has(child.id),
+				className: "-mx-1.5 px-1.5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-[var(--zg-fold-gap)]",
+					children: /* @__PURE__ */ jsx(ActionWithDetails, {
+						item: child,
+						openIds,
+						onToggle,
+						renderRows
+					})
 				})
 			}, child.id))
 		})
-	] });
+	});
 }
 /** The item or one of the calls nested under it has its details open. */
 function openWithin(item, openIds) {

package/dist/chat/transcript/script-input.d.ts

@@ -1,6 +1,6 @@
 import { ToolRowModel } from "../headless/transcript/rows.js";
 import "../headless/transcript/index.js";
-import { Yw as ScriptProgress } from "../../dist/index-Bq87OcGy.js";
+import { iT as ScriptProgress } from "../../dist/index-C6rzc-tt.js";
 //#region src/chat/transcript/script-input.d.ts
 /**
  * A tool row's progress and how it ended, as `ToolInput` takes them for a Codemode script.