zidane-ui 9.1.13 → 9.1.16

package/dist/machines/AddMachineDialog.js

@@ -0,0 +1,464 @@
+import { useLabels } from "../labels.js";
+import { IconButton } from "../components/IconButton.js";
+import { BTN_PRIMARY, BTN_SECONDARY } from "../components/button.js";
+import { CopyButton } from "../components/CopyButton.js";
+import { Notice } from "../components/Notice.js";
+import { Segmented } from "../components/Segmented.js";
+import { FIELD_LABEL_CLASS, INPUT_CLASS, MetaChip, OpLine } from "../components/Form.js";
+import { SegmentSpinner } from "../components/SegmentSpinner.js";
+import { useMinuteTick } from "../hooks/useMinuteTick.js";
+import { constant, useReadable } from "../chat/headless/store.js";
+import { machinesError } from "./headless/host.js";
+import { useMachinesBridge, useMachinesHost, useMachinesLabels, usePermitted } from "./MachinesProvider.js";
+import { useOptionalModal } from "../app/ModalProvider.js";
+import { ShareThisComputerForm } from "./ShareThisComputerForm.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { isValidMachineName, machineInstallCommand, machineSetupCommand } from "zidane/chat/pure";
+//#region src/machines/AddMachineDialog.tsx
+/**
+* Add a machine to a server, in one dialog that follows the machine until
+* it joins:
+*
+* - **Another computer** (the host's `machines.invite`): an optional name,
+*   then the command to run there, with the time the code has left. The
+*   dialog then waits on the server's machine list and turns into "<name>
+*   joined <server>" with Start a chat on it (the host's `newChat`). An
+*   ended code greys out and offers a new one.
+* - **This computer** (the host's `links.shareStart`): share this computer
+*   with the server, in folders you pick.
+*
+* `useAddMachine` opens it above whatever is open (the composer's where
+* menu, Settings).
+*/
+const TITLE_ID = "add-machine-title";
+const NO_LIST = constant({
+	status: "idle",
+	machines: [],
+	error: null
+});
+const NO_HOSTS = constant({
+	enabled: true,
+	hosts: []
+});
+/** An address that other computers usually cannot reach: loopback, a private network, a `.local` name. */
+function isLocalAddress(url) {
+	let host;
+	try {
+		host = new URL(url).hostname.replace(/^\[|\]$/g, "");
+	} catch {
+		return false;
+	}
+	return host === "localhost" || host === "::1" || host.endsWith(".local") || /^127\./.test(host) || /^10\./.test(host) || /^192\.168\./.test(host) || /^172\.(1[6-9]|2\d|3[01])\./.test(host);
+}
+/** Minutes a code has left, rounded up; 0 once it ended. */
+function minutesLeft(expiresAt) {
+	return Math.max(0, Math.ceil((expiresAt - Date.now()) / 6e4));
+}
+/** The machine that joined: one the server lists that it did not have when the code was made. */
+function joinedMachine(join, machines) {
+	if (join.step !== "code" || !join.known) return void 0;
+	const known = join.known;
+	return machines.find((machine) => !known.has(machine.id));
+}
+/**
+* Renders the Add a machine dialog's panel (for a modal layer: {@link useAddMachine} opens it).
+*
+* @param props - The server, the first tab and what closes it.
+*/
+function AddMachineDialog({ hostId, tab: initialTab, onClose, className, style }) {
+	const labels = useMachinesLabels();
+	const kitLabels = useLabels();
+	const { machines, links, hosts, newChat } = useMachinesHost();
+	const invite = usePermitted("machines.invite") ? machines?.invite : void 0;
+	const canShare = Boolean(links?.shareStart);
+	const host = useReadable(hosts ?? NO_HOSTS).hosts.find((h) => h.id === hostId) ?? {
+		id: hostId,
+		kind: "server",
+		name: hostId,
+		status: "connected"
+	};
+	const list = machines ? machines.list(hostId) : null;
+	const listState = useReadable(list ? list.state : NO_LIST);
+	const [tab, setTab] = useState(initialTab ?? (invite ? "another" : "this"));
+	const [forThisComputer, setForThisComputer] = useState(false);
+	const [name, setName] = useState("");
+	const [join, setJoin] = useState({ step: "name" });
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	const trimmed = name.trim();
+	const nameInvalid = trimmed !== "" && !isValidMachineName(trimmed);
+	if (join.step === "code" && !join.known && listState.status === "ready") setJoin({
+		...join,
+		known: new Set(listState.machines.map((m) => m.id))
+	});
+	const joined = joinedMachine(join, listState.machines);
+	const [heard, setHeard] = useState(null);
+	const pairingId = join.step === "code" ? join.invite.code.replace(/[^0-9A-Z]/gi, "").slice(0, 4).toUpperCase() : null;
+	const onJoin = machines?.onJoin;
+	useEffect(() => {
+		if (!pairingId || !onJoin) return void 0;
+		return onJoin(hostId, (event) => {
+			if (event.pairingId.toUpperCase() === pairingId) setHeard(event);
+		});
+	}, [
+		pairingId,
+		onJoin,
+		hostId
+	]);
+	const [address, setAddress] = useState(null);
+	const givenAddress = join.step === "code" ? join.invite.join.slice(0, join.invite.join.lastIndexOf("#")) : "";
+	const joinAddress = address ?? givenAddress;
+	const local = isLocalAddress(givenAddress);
+	useMinuteTick();
+	const expiresAt = join.step === "code" ? join.invite.expiresAt : null;
+	const [endedAt, setEndedAt] = useState(null);
+	const expired = expiresAt !== null && endedAt === expiresAt;
+	useEffect(() => {
+		if (expiresAt === null) return void 0;
+		const timer = setTimeout(() => setEndedAt(expiresAt), Math.max(0, expiresAt - Date.now()));
+		return () => clearTimeout(timer);
+	}, [expiresAt]);
+	const create = async () => {
+		if (!invite || nameInvalid) return;
+		setBusy(true);
+		setError(null);
+		try {
+			const made = await invite(hostId, trimmed ? { name: trimmed } : {});
+			const known = listState.status === "ready" ? new Set(listState.machines.map((m) => m.id)) : null;
+			setJoin({
+				step: "code",
+				invite: made,
+				known
+			});
+			setHeard(null);
+			list?.refresh();
+		} catch (err) {
+			setError(labels.machinesError(machinesError("invite", err)));
+		} finally {
+			setBusy(false);
+		}
+	};
+	const startChat = (machine) => {
+		newChat?.(hostId, machine.name);
+		onClose();
+	};
+	const joinString = join.step === "code" ? `${joinAddress}#${join.invite.code}` : "";
+	const command = joinString ? machineInstallCommand(joinString) : "";
+	const setupCommand = joinString ? machineSetupCommand(joinString) : "";
+	const refused = heard?.outcome === "refused" ? heard : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `zg-modal-panel zg-float w-[520px] max-w-[92vw] flex flex-col overflow-hidden${className ? ` ${className}` : ""}`,
+		style,
+		onMouseDown: (event) => event.stopPropagation(),
+		"data-testid": "add-machine-dialog",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-start gap-2 px-5 py-3.5 border-b border-[var(--zg-hairline)]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: TITLE_ID,
+						className: "m-0 text-sm font-semibold text-[var(--zg-text)]",
+						children: labels.machinesInviteTitle(host.name)
+					}), /* @__PURE__ */ jsx("p", {
+						className: "m-0 mt-1 text-xs text-[var(--zg-text-muted)]",
+						children: labels.machinesExplain
+					})]
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: "i-ph-x",
+					label: kitLabels.close,
+					size: "lg",
+					onClick: onClose,
+					className: "-mr-2"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-5 py-4 space-y-4 overflow-y-auto",
+				children: [
+					invite && canShare && !joined && /* @__PURE__ */ jsx(Segmented, {
+						value: tab,
+						onChange: setTab,
+						ariaLabel: labels.machinesAddWhich,
+						options: [{
+							value: "another",
+							label: labels.machinesAddAnother,
+							icon: "i-ph-desktop-tower"
+						}, {
+							value: "this",
+							label: labels.machinesAddThis,
+							icon: "i-ph-laptop"
+						}]
+					}),
+					tab === "this" && canShare ? /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "m-0 text-xs text-[var(--zg-text-muted)]",
+								children: labels.machinesAddThisHint(host.name)
+							}),
+							/* @__PURE__ */ jsx(ShareThisComputerForm, {
+								host,
+								onShared: onClose,
+								onCancel: onClose
+							}),
+							invite && /* @__PURE__ */ jsxs("div", {
+								className: "zg-well rounded-zg-md p-3 flex items-center gap-3",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "text-xs font-medium text-[var(--zg-text)]",
+										children: labels.machinesAddKeepOn
+									}), /* @__PURE__ */ jsx("div", {
+										className: "text-xs text-[var(--zg-text-muted)]",
+										children: labels.machinesAddKeepOnHint
+									})]
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: BTN_SECONDARY,
+									onClick: () => {
+										setForThisComputer(true);
+										setTab("another");
+									},
+									children: labels.machinesAddKeepOnOpen
+								})]
+							})
+						]
+					}) : joined ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start gap-3",
+						role: "status",
+						"data-testid": "add-machine-joined",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "shrink-0 inline-flex items-center justify-center size-9 rounded-full bg-zg-success/15 text-zg-success text-base",
+							children: /* @__PURE__ */ jsx("span", { className: "i-ph-check-bold" })
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 space-y-1",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "text-sm font-medium text-[var(--zg-text)]",
+									children: labels.machinesAddJoined(joined.name, host.name)
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "text-xs text-[var(--zg-text-muted)]",
+									children: labels.machinesAddJoinedHint
+								}),
+								(joined.capabilities?.gpu?.length ?? 0) > 0 && /* @__PURE__ */ jsx("div", {
+									className: "flex flex-wrap gap-1 pt-0.5",
+									children: joined.capabilities.gpu.map((gpu) => /* @__PURE__ */ jsx(MetaChip, {
+										tone: "info",
+										children: gpu
+									}, gpu))
+								})
+							]
+						})]
+					}) : join.step === "code" ? /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: `${FIELD_LABEL_CLASS} flex-1`,
+									children: labels.machinesInviteCommand
+								}), !expired && /* @__PURE__ */ jsx(MetaChip, {
+									tone: "muted",
+									children: labels.machinesAddTimeLeft(minutesLeft(join.invite.expiresAt))
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: `zg-well rounded-zg-md flex items-start gap-2 p-2.5 min-w-0${expired ? " opacity-50" : ""}`,
+								"aria-disabled": expired,
+								children: [/* @__PURE__ */ jsx("code", {
+									className: "flex-1 min-w-0 break-all font-mono text-xs text-[var(--zg-text)] select-all",
+									children: command
+								}), !expired && /* @__PURE__ */ jsx(CopyButton, {
+									text: command,
+									label: labels.machinesInviteCopy
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "m-0 text-xs text-[var(--zg-text-muted)]",
+								children: forThisComputer ? labels.machinesAddThisTerminalHint : labels.machinesInviteHint
+							}),
+							!expired && /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 min-w-0 text-xs text-[var(--zg-text-muted)]",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "shrink-0",
+										children: labels.machinesAddInstalled
+									}),
+									/* @__PURE__ */ jsx("code", {
+										className: "flex-1 min-w-0 truncate font-mono",
+										title: setupCommand,
+										children: setupCommand
+									}),
+									/* @__PURE__ */ jsx(CopyButton, {
+										text: setupCommand,
+										label: labels.machinesAddInstalledCopy
+									})
+								]
+							}),
+							local && /* @__PURE__ */ jsxs("div", {
+								className: "space-y-1.5",
+								children: [
+									/* @__PURE__ */ jsx(Notice, {
+										tone: "warning",
+										compact: true,
+										children: labels.machinesAddLocalAddress
+									}),
+									/* @__PURE__ */ jsx("label", {
+										className: "block text-xs text-[var(--zg-text-muted)] mb-1",
+										htmlFor: `add-machine-address-${hostId}`,
+										children: labels.machinesAddAddress
+									}),
+									/* @__PURE__ */ jsx("input", {
+										id: `add-machine-address-${hostId}`,
+										className: "zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled",
+										value: joinAddress,
+										spellCheck: false,
+										onChange: (event) => setAddress(event.target.value.trim())
+									})
+								]
+							}),
+							refused ? /* @__PURE__ */ jsx(Notice, {
+								tone: "error",
+								...refused.detail ? { detail: refused.detail } : {},
+								action: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: BTN_SECONDARY,
+									disabled: busy,
+									onClick: () => void create(),
+									children: labels.machinesAddNewCode
+								}),
+								children: labels.machinesAddRefused(refused.reason ?? "other", refused.name)
+							}) : expired ? /* @__PURE__ */ jsx(Notice, {
+								tone: "warning",
+								compact: true,
+								action: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: BTN_SECONDARY,
+									disabled: busy,
+									onClick: () => void create(),
+									children: labels.machinesAddNewCode
+								}),
+								children: labels.machinesAddExpired
+							}) : /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 text-xs text-[var(--zg-text-muted)]",
+								"data-testid": "add-machine-waiting",
+								children: [/* @__PURE__ */ jsx(SegmentSpinner, {
+									size: "xs",
+									tone: "muted",
+									label: heard?.outcome === "paired" ? labels.machinesAddPaired(heard.name) : labels.machinesAddWaiting
+								}), /* @__PURE__ */ jsx("span", { children: heard?.outcome === "paired" ? labels.machinesAddPaired(heard.name) : labels.machinesAddWaiting })]
+							})
+						]
+					}) : /* @__PURE__ */ jsxs("form", {
+						id: "add-machine-form",
+						className: "space-y-2",
+						"aria-label": labels.machinesInviteForm,
+						onSubmit: (event) => {
+							event.preventDefault();
+							create();
+						},
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								className: FIELD_LABEL_CLASS,
+								htmlFor: `add-machine-name-${hostId}`,
+								children: labels.machinesInviteName
+							}),
+							/* @__PURE__ */ jsx("input", {
+								id: `add-machine-name-${hostId}`,
+								className: INPUT_CLASS,
+								placeholder: labels.machinesInviteNamePlaceholder,
+								value: name,
+								maxLength: 64,
+								"aria-invalid": nameInvalid,
+								...nameInvalid ? { "aria-describedby": `add-machine-rule-${hostId}` } : {},
+								onChange: (event) => setName(event.target.value)
+							}),
+							nameInvalid && /* @__PURE__ */ jsx("div", {
+								id: `add-machine-rule-${hostId}`,
+								children: /* @__PURE__ */ jsx(Notice, {
+									tone: "error",
+									compact: true,
+									children: labels.machinesInviteNameRule
+								})
+							})
+						]
+					}),
+					busy && /* @__PURE__ */ jsx(OpLine, {
+						kind: "busy",
+						children: labels.machinesInviteCreating
+					}),
+					error && !busy && /* @__PURE__ */ jsx(OpLine, {
+						kind: "error",
+						children: error
+					})
+				]
+			}),
+			!(tab === "this" && canShare) && /* @__PURE__ */ jsx("footer", {
+				className: "flex items-center justify-end gap-2 px-5 py-3 bg-[var(--zg-tray)]",
+				children: joined ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_SECONDARY,
+					onClick: onClose,
+					children: labels.machinesInviteDone
+				}), newChat && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_PRIMARY,
+					onClick: () => startChat(joined),
+					children: labels.machinesAddStartChat
+				})] }) : join.step === "code" ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_SECONDARY,
+					onClick: onClose,
+					children: labels.machinesInviteDone
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_SECONDARY,
+					onClick: onClose,
+					children: labels.machinesCancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					form: "add-machine-form",
+					className: BTN_PRIMARY,
+					disabled: busy || nameInvalid || !invite,
+					children: labels.machinesInviteCreate
+				})] })
+			})
+		]
+	});
+}
+/**
+* Opens Add a machine above whatever is open (the app's modal layer). `undefined` when there is nothing to add
+* with (the host makes no join codes and does not share this computer) or no modal layer: hide the control.
+*/
+function useAddMachine() {
+	const { machines, links } = useMachinesHost();
+	const canInvite = usePermitted("machines.invite");
+	const modal = useOptionalModal();
+	const bridge = useMachinesBridge();
+	const available = Boolean(modal) && Boolean(machines?.invite && canInvite || links?.shareStart);
+	const openLayer = modal?.openLayer;
+	const closeLayer = modal?.closeLayer;
+	return useMemo(() => {
+		if (!available || !openLayer || !closeLayer) return void 0;
+		return (hostId, options) => {
+			openLayer(bridge(/* @__PURE__ */ jsx(AddMachineDialog, {
+				hostId,
+				...options?.tab ? { tab: options.tab } : {},
+				onClose: closeLayer
+			})), {
+				onDismiss: () => {},
+				labelledBy: TITLE_ID
+			});
+		};
+	}, [
+		available,
+		openLayer,
+		closeLayer,
+		bridge
+	]);
+}
+//#endregion
+export { AddMachineDialog, useAddMachine };

package/dist/machines/Banners.d.ts

@@ -1,4 +1,6 @@
 import { HostSummary } from "./headless/host.js";
+import { NoticeTone } from "../components/Notice.js";
+import { DraftPlaceIssue } from "../chat/headless/draft-target.js";
 import { CSSProperties } from "react";
 //#region src/machines/Banners.d.ts
 /** Props for {@link ServerOfflineBanner}. */
@@ -21,8 +23,12 @@ interface ServerOfflineBannerProps {
 declare function ServerOfflineBanner({ host, name, className, style }: ServerOfflineBannerProps): import("react").JSX.Element;
 /** Props for {@link ComposerNotice}. */
 interface ComposerNoticeProps {
-  /** What happened. */
+  /** What happened, worded for people. */
   text: string;
+  /** A warning or an error: a {@link Notice} of that tone. Default: a muted line. */
+  tone?: NoticeTone;
+  /** The raw words behind it (an exception's message): folded under Details. Needs `tone`. */
+  detail?: string;
   /** Called when the user dismisses it. */
   onDismiss: () => void;
   /** The root's `data-testid`. Default `composer-notice`. */
@@ -35,9 +41,32 @@ interface ComposerNoticeProps {
 /**
  * A dismissable notice above the composer: why a new chat could not be created (its server went offline, …).
  *
- * @param props - The text, the dismiss callback, a test id, `className` and `style`.
+ * @param props - The text, its tone and detail, the dismiss callback, a test id, `className` and `style`.
  */
-declare function ComposerNotice({ text, onDismiss, testId, className, style }: ComposerNoticeProps): import("react").JSX.Element;
+declare function ComposerNotice({ text, tone, detail, onDismiss, testId, className, style }: ComposerNoticeProps): import("react").JSX.Element;
+/** Props for {@link DraftPlaceNotice}. */
+interface DraftPlaceNoticeProps {
+  /** Why the draft cannot use the default place as it is. */
+  issue?: DraftPlaceIssue | null;
+  /** The draft's server, when the app cannot reach it now. A chat there waits for it. */
+  offlineServer?: string;
+  /** Moves the draft to this computer (an offline server). Absent: no button. */
+  onUseThisComputer?: () => void;
+  /** Opens Add a server (an unsaved server). Absent: no button. */
+  onAddServer?: (hostName: string, hostUrl?: string) => void;
+  /** Hides the issue. */
+  onDismiss: () => void;
+  /** Extra classes on the root. */
+  className?: string;
+}
+/**
+ * The new chat's place, when it cannot be what the default says: the default names a server this device has not
+ * saved (Add it), a machine that left the server, a folder that is gone, or its server is offline (use this
+ * computer instead). Nothing when all is well.
+ *
+ * @param props - The issue, the offline server, the actions and `className`.
+ */
+declare function DraftPlaceNotice({ issue, offlineServer, onUseThisComputer, onAddServer, onDismiss, className }: DraftPlaceNoticeProps): import("react").JSX.Element | null;
 /** Props for {@link HostRemovedBanner}. */
 interface HostRemovedBannerProps {
   /** What was removed (`"<server> was removed"`). */
@@ -72,4 +101,4 @@ interface MachineWaitingBannerProps {
  */
 declare function MachineWaitingBanner({ machine, className, style }: MachineWaitingBannerProps): import("react").JSX.Element | null;
 //#endregion
-export { ComposerNotice, ComposerNoticeProps, HostRemovedBanner, HostRemovedBannerProps, MachineWaitingBanner, MachineWaitingBannerProps, ServerOfflineBanner, ServerOfflineBannerProps };
+export { ComposerNotice, ComposerNoticeProps, DraftPlaceNotice, DraftPlaceNoticeProps, HostRemovedBanner, HostRemovedBannerProps, MachineWaitingBanner, MachineWaitingBannerProps, ServerOfflineBanner, ServerOfflineBannerProps };

package/dist/machines/Banners.js

@@ -1,3 +1,4 @@
+import { Notice } from "../components/Notice.js";
 import { Tray } from "../components/Surface.js";
 import { useMachinesHost, useMachinesLabels, useOnlineMachines } from "./MachinesProvider.js";
 import { hostStatusText } from "./headless/messages.js";
@@ -34,10 +35,26 @@ function ServerOfflineBanner({ host, name, className = "", style }) {
 /**
 * A dismissable notice above the composer: why a new chat could not be created (its server went offline, …).
 *
-* @param props - The text, the dismiss callback, a test id, `className` and `style`.
+* @param props - The text, its tone and detail, the dismiss callback, a test id, `className` and `style`.
 */
-function ComposerNotice({ text, onDismiss, testId, className = "", style }) {
+function ComposerNotice({ text, tone, detail, onDismiss, testId, className = "", style }) {
 	const labels = useMachinesLabels();
+	if (tone) return /* @__PURE__ */ jsx("div", {
+		className: className || void 0,
+		style,
+		"data-testid": testId ?? "composer-notice",
+		children: /* @__PURE__ */ jsx(Notice, {
+			tone,
+			...detail ? { detail } : {},
+			action: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDismiss,
+				className: NOTICE_BUTTON_CLASS,
+				children: labels.machinesDismiss
+			}),
+			children: text
+		})
+	});
 	return /* @__PURE__ */ jsxs(Tray, {
 		radius: "xl",
 		className: `flex items-center justify-between gap-3 pl-4 pr-2 py-2 ${className}`.trimEnd(),
@@ -56,6 +73,50 @@ function ComposerNotice({ text, onDismiss, testId, className = "", style }) {
 	});
 }
 /**
+* The new chat's place, when it cannot be what the default says: the default names a server this device has not
+* saved (Add it), a machine that left the server, a folder that is gone, or its server is offline (use this
+* computer instead). Nothing when all is well.
+*
+* @param props - The issue, the offline server, the actions and `className`.
+*/
+function DraftPlaceNotice({ issue, offlineServer, onUseThisComputer, onAddServer, onDismiss, className = "" }) {
+	const labels = useMachinesLabels();
+	const text = offlineServer ? labels.machinesDraftServerOffline(offlineServer) : issue?.kind === "unsaved" ? labels.machinesPlaceUnsaved(issue.hostName) : issue?.kind === "machine-gone" ? labels.machinesPlaceMachineGone(issue.machine, issue.hostName) : issue?.kind === "folder-gone" ? labels.machinesPlaceFolderGone(issue.folder) : null;
+	if (!text) return null;
+	const action = offlineServer ? onUseThisComputer && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onUseThisComputer,
+		className: NOTICE_BUTTON_CLASS,
+		children: labels.machinesUseThisComputer
+	}) : issue?.kind === "unsaved" && onAddServer && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => onAddServer(issue.hostName, issue.hostUrl),
+		className: NOTICE_BUTTON_CLASS,
+		children: labels.machinesPlaceAddServer(issue.hostName)
+	});
+	return /* @__PURE__ */ jsxs(Tray, {
+		radius: "xl",
+		className: `flex items-center justify-between gap-3 pl-4 pr-2 py-2 ${className}`.trimEnd(),
+		"data-testid": "draft-place-notice",
+		role: "status",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2 text-zg-ui text-[var(--zg-text-muted)]",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: offlineServer ? "i-ph-cloud-slash shrink-0" : "i-ph-signpost shrink-0"
+			}), text]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1 shrink-0",
+			children: [action, !offlineServer && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDismiss,
+				className: NOTICE_BUTTON_CLASS,
+				children: labels.machinesDismiss
+			})]
+		})]
+	});
+}
+/**
 * The chat that was open closed because its server was removed.
 *
 * @param props - The notice, the dismiss callback, `className` and `style`.
@@ -96,4 +157,4 @@ function MachineWaitingBanner({ machine, className = "", style }) {
 	});
 }
 //#endregion
-export { ComposerNotice, HostRemovedBanner, MachineWaitingBanner, ServerOfflineBanner };
+export { ComposerNotice, DraftPlaceNotice, HostRemovedBanner, MachineWaitingBanner, ServerOfflineBanner };

package/dist/machines/DaemonMenu.js

@@ -1,4 +1,6 @@
+import { Notice } from "../components/Notice.js";
 import { MetaChip } from "../components/Form.js";
+import { errorMessage } from "../components/report-error.js";
 import { FloatingSurface } from "../components/floating/FloatingSurface.js";
 import { useReadable } from "../chat/headless/store.js";
 import { useMachinesConfirm, useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
@@ -76,6 +78,8 @@ function DaemonMenuBody({ daemon, running: runningCount = 0, attention = 0, sess
 	const [open, setOpen] = useState(false);
 	const [status, setStatus] = useState(null);
 	const [notice, setNotice] = useState(null);
+	/** What the last action's failure said: worded by a label, the raw words under Details. */
+	const [failure, setFailure] = useState(null);
 	const [busy, setBusy] = useState(false);
 	const wrapperRef = useRef(null);
 	const menuRef = useRef(null);
@@ -112,17 +116,26 @@ function DaemonMenuBody({ daemon, running: runningCount = 0, attention = 0, sess
 		refresh
 	]);
 	useEffect(() => {
-		if (!notice || busy) return void 0;
-		const timer = setTimeout(() => setNotice(null), 4e3);
+		if (!notice && failure === null || busy) return void 0;
+		const timer = setTimeout(() => {
+			setNotice(null);
+			setFailure(null);
+		}, 4e3);
 		return () => clearTimeout(timer);
-	}, [notice, busy]);
+	}, [
+		notice,
+		failure,
+		busy
+	]);
 	const run = useCallback(async (pending, action) => {
 		setBusy(true);
+		setFailure(null);
 		setNotice(pending);
 		try {
 			setNotice(await action());
 		} catch (err) {
-			setNotice(err?.message ?? String(err));
+			setNotice(null);
+			setFailure(errorMessage(err));
 		} finally {
 			setBusy(false);
 			refresh();
@@ -161,6 +174,7 @@ function DaemonMenuBody({ daemon, running: runningCount = 0, attention = 0, sess
 			title: label,
 			onClick: () => {
 				setNotice(null);
+				setFailure(null);
 				setOpen((v) => !v);
 			}
 		}), /* @__PURE__ */ jsx(FloatingSurface, {
@@ -307,6 +321,15 @@ function DaemonMenuBody({ daemon, running: runningCount = 0, attention = 0, sess
 						role: "status",
 						className: "px-3 pt-1.5 pb-1 text-zg-meta leading-4 text-[var(--zg-text-muted)]",
 						children: notice
+					}),
+					failure !== null && /* @__PURE__ */ jsx("div", {
+						className: "px-3 pt-1.5 pb-1",
+						children: /* @__PURE__ */ jsx(Notice, {
+							tone: "error",
+							compact: true,
+							detail: failure,
+							children: labels.machinesDaemonActionFailed
+						})
 					})
 				]
 			})