zidane-ui 9.1.13 → 9.1.14

package/dist/app/ModalProvider.js

@@ -5,7 +5,7 @@ import { buttonClass } from "../components/button.js";
 import { ErrorBoundary, ErrorDetails } from "../components/ErrorBoundary.js";
 import { Keycap } from "../components/Keycap.js";
 import { useAppearanceState } from "../appearance/AppearanceProvider.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 //#region src/app/ModalProvider.tsx
@@ -411,21 +411,119 @@ function ModalShell({ title, description, onClose, onBack, footer, children, siz
 		]
 	});
 }
+/** Whether the window is narrower than {@link SCREEN_NARROW_MAX}, followed while `watch` (no listener otherwise). */
+function useNarrowWindow(watch) {
+	const query = `(max-width: 639px)`;
+	const [narrow, setNarrow] = useState(() => watch && typeof window !== "undefined" && window.matchMedia?.(query).matches === true);
+	useEffect(() => {
+		if (!watch || typeof window === "undefined" || !window.matchMedia) return void 0;
+		const list = window.matchMedia(query);
+		const update = () => setNarrow(list.matches);
+		update();
+		list.addEventListener("change", update);
+		return () => list.removeEventListener("change", update);
+	}, [watch, query]);
+	return watch && narrow;
+}
+/** Below this window width (px), a {@link ScreenShell} given `narrowPane` shows one pane at a time. */
+const SCREEN_NARROW_MAX = 640;
 /**
 * Two-column full-window shell mirroring the chat layout: a sidebar-width
 * left column on the tray tone (traffic-light spacer, back button,
 * then whatever navigation the surface provides) and a main column with a
 * heading row over the content. Escape and the back button both call
-* `onClose`.
+* `onClose`. On a narrow window with `narrowPane`, one pane at a time at full
+* width: the left column, or the main one under a back button.
 *
 * @param props - The heading, the left column, the body and `onClose`.
 */
-function ScreenShell({ title, description, lead, screenLabel, onClose, aside, asideFooter, headerActions, children, className, style }) {
+function ScreenShell({ title, description, lead, screenLabel, onClose, aside, asideFooter, headerActions, children, narrowPane, onNarrowBack, className, style }) {
 	const modal = useModal();
 	const labels = useLabels();
 	const chrome = useContext(ChromeContext);
 	const { sidebarWidth } = useAppearanceState();
+	const narrow = useNarrowWindow(narrowPane !== void 0);
 	useDismissHandler(modal.setDismissHandler, onClose);
+	const backToApp = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onClose,
+		"aria-label": labels.screenBack(screenLabel),
+		className: "zg-no-drag zg-menu-row zg-press-subtle !w-auto h-7 !min-h-0 !gap-1 !pl-1 !pr-1.5 font-medium",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "i-ph-caret-left text-sm text-[var(--zg-text-muted)]",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: screenLabel
+			}),
+			/* @__PURE__ */ jsx(Keycap, {
+				className: "ml-1.5",
+				children: labels.screenBackKey
+			})
+		]
+	});
+	if (narrow) return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col w-full h-full min-h-0 bg-[var(--zg-tray)]${className ? ` ${className}` : ""}`,
+		style,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "zg-drag shrink-0 flex items-center px-2",
+				style: { height: chromePx(chrome.top) },
+				children: [chrome.leading > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "shrink-0",
+					style: { width: chromePx(chrome.leading) }
+				}), backToApp]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "shrink-0 px-3 pb-2",
+				children: aside.search
+			}),
+			narrowPane === "aside" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-h-0 flex flex-col px-2 pt-1",
+				children: aside.nav
+			}), asideFooter && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 px-2 pb-2",
+				children: asideFooter
+			})] }) : /* @__PURE__ */ jsxs("section", {
+				className: "flex-1 min-w-0 min-h-0 flex flex-col bg-[var(--zg-bg)]",
+				children: [/* @__PURE__ */ jsxs("header", {
+					className: "shrink-0 flex items-center gap-2 px-3 py-2.5 border-b border-[var(--zg-hairline)]",
+					children: [
+						onNarrowBack && /* @__PURE__ */ jsx(IconButton, {
+							icon: "i-ph-caret-left",
+							label: labels.screenNavBack(screenLabel),
+							onClick: onNarrowBack
+						}),
+						lead && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0 flex",
+							children: lead
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsx("h2", {
+								id: MODAL_TITLE_ID,
+								className: "text-sm font-semibold leading-tight text-[var(--zg-text)] m-0 truncate",
+								children: title
+							}), description && /* @__PURE__ */ jsx("p", {
+								className: "text-xs leading-tight text-[var(--zg-text-muted)] mt-0.5 m-0 truncate",
+								children: description
+							})]
+						}),
+						headerActions && /* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-2 shrink-0",
+							children: headerActions
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-h-0 flex flex-col overflow-hidden",
+					children
+				})]
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex w-full h-full min-h-0${className ? ` ${className}` : ""}`,
 		style,
@@ -440,26 +538,7 @@ function ScreenShell({ title, description, lead, screenLabel, onClose, aside, as
 						"aria-hidden": true,
 						className: "shrink-0",
 						style: { width: chromePx(chrome.leading) }
-					}), /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: onClose,
-						"aria-label": labels.screenBack(screenLabel),
-						className: "zg-no-drag zg-menu-row zg-press-subtle !w-auto h-7 !min-h-0 !gap-1 !pl-1 !pr-1.5 font-medium",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "i-ph-caret-left text-sm text-[var(--zg-text-muted)]",
-								"aria-hidden": true
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "truncate",
-								children: screenLabel
-							}),
-							/* @__PURE__ */ jsx(Keycap, {
-								className: "ml-1.5",
-								children: labels.screenBackKey
-							})
-						]
-					})]
+					}), backToApp]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "zg-screen-toprow shrink-0 flex items-center px-3",
@@ -513,4 +592,4 @@ function ScreenShell({ title, description, lead, screenLabel, onClose, aside, as
 	});
 }
 //#endregion
-export { MODAL_TITLE_ID, ModalProvider, ModalShell, ScreenShell, useModal, useOptionalModal };
+export { MODAL_TITLE_ID, ModalProvider, ModalShell, SCREEN_NARROW_MAX, ScreenShell, useModal, useOptionalModal };

package/dist/app/NoticeStack.d.ts

@@ -0,0 +1,33 @@
+import { NoticeTone } from "../components/Notice.js";
+import { CSSProperties, ReactNode } from "react";
+//#region src/app/NoticeStack.d.ts
+/** One notice to show. */
+interface AppNotice {
+  /** How serious it is. */
+  tone: NoticeTone;
+  /** The message, worded for people (labels). */
+  message: string;
+  /** The raw words behind it (an exception's message): folded under Details. */
+  detail?: string;
+}
+/** Shows a notice in the app's stack. */
+type Notify = (notice: AppNotice) => void;
+/** Props for {@link NoticeStackProvider}. */
+interface NoticeStackProviderProps {
+  /** The app. */
+  children: ReactNode;
+  /** Extra classes on the stack's region. */
+  className?: string;
+  /** Inline styles on the stack's region. */
+  style?: CSSProperties;
+}
+/**
+ * Provides {@link useNotify} to the components below and shows their notices, newest last.
+ *
+ * @param props - {@link NoticeStackProviderProps}.
+ */
+declare function NoticeStackProvider({ children, className, style }: NoticeStackProviderProps): import("react").JSX.Element;
+/** Shows a notice in the nearest {@link NoticeStackProvider}'s stack; outside one, a console warning. */
+declare function useNotify(): Notify;
+//#endregion
+export { AppNotice, NoticeStackProvider, NoticeStackProviderProps, Notify, useNotify };

package/dist/app/NoticeStack.js

@@ -0,0 +1,90 @@
+import { useLabels } from "../labels.js";
+import { IconButton } from "../components/IconButton.js";
+import { Notice } from "../components/Notice.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+//#region src/app/NoticeStack.tsx
+/**
+* The app's transient notices: what an action that has no surface of its own
+* (a menu command, a background step) tells the user, as a stack of
+* {@link Notice}s in a corner of the window. The in-app replacement for
+* `window.alert()`.
+*
+*   const notify = useNotify();
+*   notify({ tone: 'error', message: labels.moveSessionFailed, detail: errorMessage(err) });
+*
+* An error or a warning stays until dismissed. An info notice leaves after
+* 6 s. `AppHostProvider` mounts one. An app that composes its providers by
+* hand mounts `NoticeStackProvider` above them.
+*/
+/** How long an info notice stays, in ms. */
+const INFO_MS = 6e3;
+const warnOutside = (notice) => {
+	console.warn(`[zidane-ui] ${notice.message}${notice.detail ? ` (${notice.detail})` : ""}`);
+};
+const NotifyContext = createContext(warnOutside);
+/**
+* Provides {@link useNotify} to the components below and shows their notices, newest last.
+*
+* @param props - {@link NoticeStackProviderProps}.
+*/
+function NoticeStackProvider({ children, className, style }) {
+	const labels = useLabels();
+	const [shown, setShown] = useState([]);
+	const next = useRef(0);
+	const dismiss = useCallback((id) => setShown((all) => all.filter((n) => n.id !== id)), []);
+	const notify = useCallback((notice) => {
+		const id = next.current++;
+		setShown((all) => [...all, {
+			...notice,
+			id
+		}]);
+	}, []);
+	return /* @__PURE__ */ jsxs(NotifyContext.Provider, {
+		value: notify,
+		children: [children, shown.length > 0 && /* @__PURE__ */ jsx("div", {
+			role: "region",
+			"aria-label": labels.noticeStack,
+			className: ["fixed bottom-3 right-3 z-zg-tooltip flex flex-col gap-2 w-[min(24rem,calc(100vw-1.5rem))]", className].filter(Boolean).join(" "),
+			style,
+			children: shown.map((n) => /* @__PURE__ */ jsx(StackedNotice, {
+				notice: n,
+				onDismiss: () => dismiss(n.id)
+			}, n.id))
+		})]
+	});
+}
+function StackedNotice({ notice, onDismiss }) {
+	const labels = useLabels();
+	const leave = useRef(onDismiss);
+	useEffect(() => {
+		leave.current = onDismiss;
+	});
+	useEffect(() => {
+		if (notice.tone !== "info") return void 0;
+		const timer = setTimeout(() => leave.current(), INFO_MS);
+		return () => clearTimeout(timer);
+	}, [notice.tone]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "zg-float rounded-zg-md",
+		"data-notice-tone": notice.tone,
+		children: /* @__PURE__ */ jsx(Notice, {
+			tone: notice.tone,
+			...notice.detail ? { detail: notice.detail } : {},
+			action: /* @__PURE__ */ jsx(IconButton, {
+				icon: "i-ph-x",
+				label: labels.noticeDismiss,
+				size: "sm",
+				onClick: onDismiss,
+				className: "ml-auto"
+			}),
+			children: notice.message
+		})
+	});
+}
+/** Shows a notice in the nearest {@link NoticeStackProvider}'s stack; outside one, a console warning. */
+function useNotify() {
+	return useContext(NotifyContext);
+}
+//#endregion
+export { NoticeStackProvider, useNotify };

package/dist/app/index.d.ts

@@ -1,5 +1,6 @@
 import { AppHostProvider, AppHostProviderProps, useAppHost } from "./AppHostProvider.js";
-import { LayerOptions, MODAL_TITLE_ID, ModalChromeInset, ModalContextValue, ModalOpenOptions, ModalProvider, ModalProviderProps, ModalScrimKind, ModalShell, ModalShellProps, ModalVariant, ScreenShell, ScreenShellProps, useModal, useOptionalModal } from "./ModalProvider.js";
+import { LayerOptions, MODAL_TITLE_ID, ModalChromeInset, ModalContextValue, ModalOpenOptions, ModalProvider, ModalProviderProps, ModalScrimKind, ModalShell, ModalShellProps, ModalVariant, SCREEN_NARROW_MAX, ScreenShell, ScreenShellProps, useModal, useOptionalModal } from "./ModalProvider.js";
+import { AppNotice, NoticeStackProvider, NoticeStackProviderProps, Notify, useNotify } from "./NoticeStack.js";
 import { useConfirm, useOptionalConfirm } from "./useConfirm.js";
 import { useResource } from "./useResource.js";
-export { AppHostProvider, AppHostProviderProps, LayerOptions, MODAL_TITLE_ID, ModalChromeInset, ModalContextValue, ModalOpenOptions, ModalProvider, ModalProviderProps, ModalScrimKind, ModalShell, ModalShellProps, ModalVariant, ScreenShell, ScreenShellProps, useAppHost, useConfirm, useModal, useOptionalConfirm, useOptionalModal, useResource };
+export { AppHostProvider, AppHostProviderProps, AppNotice, LayerOptions, MODAL_TITLE_ID, ModalChromeInset, ModalContextValue, ModalOpenOptions, ModalProvider, ModalProviderProps, ModalScrimKind, ModalShell, ModalShellProps, ModalVariant, NoticeStackProvider, NoticeStackProviderProps, Notify, SCREEN_NARROW_MAX, ScreenShell, ScreenShellProps, useAppHost, useConfirm, useModal, useNotify, useOptionalConfirm, useOptionalModal, useResource };

package/dist/app/index.js

@@ -1,5 +1,6 @@
+import { NoticeStackProvider, useNotify } from "./NoticeStack.js";
 import { AppHostProvider, useAppHost } from "./AppHostProvider.js";
-import { MODAL_TITLE_ID, ModalProvider, ModalShell, ScreenShell, useModal, useOptionalModal } from "./ModalProvider.js";
+import { MODAL_TITLE_ID, ModalProvider, ModalShell, SCREEN_NARROW_MAX, ScreenShell, useModal, useOptionalModal } from "./ModalProvider.js";
 import { useConfirm, useOptionalConfirm } from "./useConfirm.js";
 import { useResource } from "./useResource.js";
-export { AppHostProvider, MODAL_TITLE_ID, ModalProvider, ModalShell, ScreenShell, useAppHost, useConfirm, useModal, useOptionalConfirm, useOptionalModal, useResource };
+export { AppHostProvider, MODAL_TITLE_ID, ModalProvider, ModalShell, NoticeStackProvider, SCREEN_NARROW_MAX, ScreenShell, useAppHost, useConfirm, useModal, useNotify, useOptionalConfirm, useOptionalModal, useResource };

package/dist/appearance/AppearanceProvider.js

@@ -3,11 +3,11 @@ import { shikiThemeFor } from "../code/shiki-theme.js";
 import { derivePalette } from "../theme/derive.js";
 import { seedFromTheme } from "../theme/from-theme.js";
 import { BUILTIN_THEMES, DEFAULT_THEME, resolveTheme } from "../theme/themes.js";
-import { DEFAULT_APPEARANCE, activeThemeId, resolveMotion } from "./headless/prefs.js";
-import { fontsToCssVars } from "./headless/fonts.js";
 import { constant, useReadable } from "../chat/headless/store.js";
 import { codeThemeTypeOf } from "../code/code-themes.js";
 import { applyPalette } from "./apply.js";
+import { fontsToCssVars } from "./headless/fonts.js";
+import { DEFAULT_APPEARANCE, activeThemeId, resolveMotion } from "./headless/prefs.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 //#region src/appearance/AppearanceProvider.tsx

package/dist/appearance/headless/index.js

@@ -1,5 +1,5 @@
+import { CURATED_FONTS, FONT_STACKS, availableCuratedFonts, cssFamily, fontStack, fontsToCssVars, guessKind, isFontAvailable, queryInstalledFonts } from "./fonts.js";
 import { DEFAULT_APPEARANCE, LIMITS, activeThemeId, parseAppearance, resolveMotion, stepInterfaceScale } from "./prefs.js";
 import { APPEARANCE_STORAGE_KEY, BOOT_SNAPSHOT_KEY, createStorageAppearancePrefs, createStorageBoot } from "./storage.js";
-import { CURATED_FONTS, FONT_STACKS, availableCuratedFonts, cssFamily, fontStack, fontsToCssVars, guessKind, isFontAvailable, queryInstalledFonts } from "./fonts.js";
 import { zoomKeyCommands } from "./zoom-commands.js";
 export { APPEARANCE_STORAGE_KEY, BOOT_SNAPSHOT_KEY, CURATED_FONTS, DEFAULT_APPEARANCE, FONT_STACKS, LIMITS, activeThemeId, availableCuratedFonts, createStorageAppearancePrefs, createStorageBoot, cssFamily, fontStack, fontsToCssVars, guessKind, isFontAvailable, parseAppearance, queryInstalledFonts, resolveMotion, stepInterfaceScale, zoomKeyCommands };

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/chat/SessionFilterMenu.d.ts

@@ -106,7 +106,7 @@ interface SessionFilterMenuProps<V extends SessionView = SessionGroupBy> {
   project?: SessionProjectAxis;
   /** Last-activity filter axis: limit the list to sessions active within a window (`1d` to `30d`, or `all`). */
   activity?: SessionFilterAxis<SessionActivityFilter>;
-  /** Sort axis: `alphabetical`, `createdTime`, or `recency`. */
+  /** Sort axis: `alphabetical`, `createdTime` (the default), `lastUserMessage`, or `recency`. */
   sort?: SessionFilterAxis<SessionSortBy>;
   /** More rows, each in the group its `placement` names, after the built-in ones. */
   extras?: readonly SessionFilterExtra[];

package/dist/chat/SessionFilterMenu.js

@@ -36,6 +36,7 @@ const ACTIVITIES = [
 const SORTS = [
 	"alphabetical",
 	"createdTime",
+	"lastUserMessage",
 	"recency"
 ];
 const ALL_PROJECTS = "__all__";
@@ -99,7 +100,7 @@ function SessionFilterMenu({ view, status, project, activity, sort, extras = NO_
 		[sort && /* @__PURE__ */ jsx(FilterSub, {
 			label: labels.filterSort,
 			value: labels.filterSorts[sort.value],
-			atDefault: sort.value === "recency",
+			atDefault: sort.value === "createdTime",
 			options: choices(sort.options ?? SORTS, labels.filterSorts),
 			current: sort.value,
 			onChange: (v) => sort.onChange(v)

package/dist/chat/Transcript.js

@@ -1,10 +1,10 @@
-import { firstRowId } from "./headless/transcript/rows.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 { 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";

package/dist/chat/composer/Composer.js

@@ -1,4 +1,6 @@
 import { IconButton } from "../../components/IconButton.js";
+import { Notice } from "../../components/Notice.js";
+import { errorMessage } from "../../components/report-error.js";
 import { useLightbox } from "../../components/Lightbox.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { AttachmentNotices, AttachmentTiles, attachmentLightboxItems } from "./attachments.js";
@@ -145,7 +147,7 @@ const Composer = forwardRef(function Composer(props, ref) {
 		} catch (error) {
 			restore();
 			if (p.onError) p.onError(error);
-			else setSendError(error instanceof Error && error.message ? error.message : String(error));
+			else setSendError(errorMessage(error));
 		}
 	}, [editor]);
 	useLayoutEffect(() => {
@@ -338,11 +340,12 @@ const Composer = forwardRef(function Composer(props, ref) {
 					})
 				]
 			}),
-			sendError && /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "m-0 px-4 pt-1.5 pb-0.5 text-zg-label text-zg-danger truncate",
-				title: sendError,
-				children: sendError
+			sendError && /* @__PURE__ */ jsx(Notice, {
+				tone: "error",
+				compact: true,
+				detail: sendError,
+				className: "mx-4 mt-1.5",
+				children: labels.composerSendFailed
 			}),
 			props.below,
 			/* @__PURE__ */ jsx(SuggestionPopup, { state: suggest }),

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 Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
+import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 //#region src/chat/composer/ComposerEditor.tsx
 /**

package/dist/chat/composer/ConversationBadges.js

@@ -1,8 +1,8 @@
-import { remindersSummary } from "../../session/headless/schedules.js";
 import { useComposerLabels } from "./ComposerHostProvider.js";
 import { useExtensionItems, useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
 import { useSessionHost, useSessionPlans, useSessionQueue, useSessionRunningWork, useSessionSchedules } from "../../session/SessionProvider.js";
 import { slotItems } from "../../extensions/headless/select.js";
+import { remindersSummary } from "../../session/headless/schedules.js";
 import { ComposerBadges } from "./ComposerBadges.js";
 import { mergeBadgeOrder, orderComposerBadges } from "./badge-order.js";
 import { usePendingInteractions } from "../interactions/hooks.js";

package/dist/chat/composer/ModelChainList.js

@@ -1,3 +1,4 @@
+import { Notice } from "../../components/Notice.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { canJoinChain, lineupKeyOf, modelLineup, offCatalogRows, pickRefOf, pickerGroups, refKey, resolveChain, rowKey, unresolveChain, withPrimary } from "./model-catalog.js";
 import { layoutModelList } from "./model-list-layout.js";
@@ -285,15 +286,23 @@ function ModelChainList({ initialChain, catalog, loadError = null, onRetry, show
 				inputRef
 			}),
 			/* @__PURE__ */ jsx("div", { className: "shrink-0 h-px bg-[var(--zg-hairline)]" }),
-			loadError || notice ? /* @__PURE__ */ jsxs("div", {
+			loadError ? /* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-h-0 flex flex-col items-center justify-center px-6 py-8",
+				children: /* @__PURE__ */ jsx(Notice, {
+					tone: "error",
+					detail: loadError,
+					action: onRetry && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "underline text-[var(--zg-text)] bg-transparent border-0 cursor-pointer",
+						onClick: onRetry,
+						children: labels.retry
+					}),
+					children: labels.modelsLoadError
+				})
+			}) : notice ? /* @__PURE__ */ jsx("div", {
 				role: "status",
-				className: `flex-1 min-h-0 flex flex-col items-center justify-center gap-2 px-6 py-8 text-center text-xs ${loadError ? "text-zg-danger" : "text-[var(--zg-text-muted)]"}`,
-				children: [loadError ? labels.modelsLoadFailed(loadError) : notice, loadError && onRetry && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "underline text-[var(--zg-text)] bg-transparent border-0 cursor-pointer",
-					onClick: onRetry,
-					children: labels.retry
-				})]
+				className: "flex-1 min-h-0 flex flex-col items-center justify-center gap-2 px-6 py-8 text-center text-xs text-[var(--zg-text-muted)]",
+				children: notice
 			}) : /* @__PURE__ */ jsx(ModelChainRows, {
 				layout,
 				cursor,

package/dist/chat/composer/ModelChainTooltip.js

@@ -1,3 +1,4 @@
+import { Notice } from "../../components/Notice.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { refKey, resolvePick, rowKey } from "./model-catalog.js";
 import { ModelProviderChip, ModelReasoning, ModelWindow } from "./ModelFacts.js";
@@ -34,8 +35,10 @@ function ModelChainTooltip({ chain, catalog, serving = null, forNextChat = false
 		style,
 		"data-testid": "model-chain-tooltip",
 		children: [
-			serving && /* @__PURE__ */ jsx("span", {
-				className: "text-zg-warn leading-snug",
+			serving && /* @__PURE__ */ jsx(Notice, {
+				tone: "warning",
+				compact: true,
+				className: "leading-snug",
 				children: labels.modelServing(primaryName, serving)
 			}),
 			forNextChat && /* @__PURE__ */ jsx("span", {

package/dist/chat/composer/use-composer-stores.js

@@ -1,6 +1,6 @@
+import { useComposerHost } from "./ComposerHostProvider.js";
 import { IDLE_RESOURCE } from "../../app/headless/resource.js";
 import { createModelPickerPrefs } from "../headless/composer/model-picker-prefs.js";
-import { useComposerHost } from "./ComposerHostProvider.js";
 import { modelKnobsOf } from "../headless/composer/model-knobs.js";
 import { modelNamesOf } from "../headless/composer/model-names.js";
 import { useEffect, useMemo, useSyncExternalStore } from "react";

package/dist/chat/composer/use-draft-target.d.ts

@@ -1,6 +1,7 @@
 import { DraftEnvironment, EnvironmentMachine } from "../../git/headless/environment.js";
-import { DraftFolderSource } from "../headless/draft-target.js";
+import { DraftFolderSource, DraftPlaceIssue } from "../headless/draft-target.js";
 import { DraftRemoteClone } from "../../git/headless/remote-clone.js";
+import { NewChatPlace } from "zidane/chat/pure";
 import { EnvironmentDescriptor } from "zidane/chat";
 //#region src/chat/composer/use-draft-target.d.ts
 /** A saved server a draft can run on. */
@@ -9,6 +10,8 @@ interface DraftServer {
   id: string;
   /** Its name. */
   name: string;
+  /** Its URL, kept with a default place for a device that has not saved it. */
+  url?: string;
 }
 /** What {@link useDraftTarget} reads from the app. */
 interface DraftTargetOptions {
@@ -34,6 +37,11 @@ interface DraftTargetOptions {
    * instead.
    */
   request?: DraftTargetRequest | null;
+  /**
+   * Where new chats start (the space's place, else the global one: `useNewSessionDefaults`). Applied to each new
+   * draft, before a request. Absent: this computer.
+   */
+  place?: NewChatPlace | null;
 }
 /** A draft target picked outside the composer. */
 interface DraftTargetRequest {
@@ -68,6 +76,11 @@ interface DraftTarget {
   server?: DraftServer;
   /** Runs the draft on a saved server (`LOCAL_HOST_KEY`: this computer). */
   setHostId(hostId: string): void;
+  /**
+   * Runs the draft on a host and one of its environment kinds in one step (a machine of another server picked
+   * from the where menu): the host's folder starts over, the kind is kept.
+   */
+  setPlace(hostId: string, environment: string): void;
   /** The server's folder (`null`: its first root). */
   remoteFolder: string | null;
   /** Picks the server's folder. */
@@ -98,6 +111,12 @@ interface DraftTarget {
   setMachineFolder(folder: string | null): void;
   /** The host the machine's folders are browsed through. */
   machineHost: string;
+  /** Why the draft cannot use the default place as it is (until dismissed or the next draft). */
+  placeIssue: DraftPlaceIssue | null;
+  /** Hides {@link DraftTarget.placeIssue}. */
+  dismissPlaceIssue(): void;
+  /** The draft's pick as a place: what "Use for new chats" saves. */
+  here: NewChatPlace;
   /** Why the last new chat could not be created (the prompt is back in the box). */
   error: string | null;
   /** Shows or clears {@link DraftTarget.error}. */