zidane-ui 9.1.13 → 9.1.16

package/dist/machines/headless/messages.js

@@ -50,6 +50,14 @@ function daemonStatusText(status, now = Date.now(), labels = DEFAULT_MACHINES_LA
 				title: labels.machinesDaemonNewer,
 				detail: labels.machinesDaemonNewerDetail(versions)
 			};
+			if (status.refused?.direction === "daemon-older" && status.refused.startsOlder) return {
+				title: labels.machinesDaemonCliOlder,
+				detail: labels.machinesDaemonCliOlderDetail(versions)
+			};
+			if (status.refused?.direction === "daemon-older" && status.refused.busy) return {
+				title: labels.machinesDaemonOlderBusy,
+				detail: labels.machinesDaemonOlderBusyDetail(versions)
+			};
 			if (status.refused?.direction === "daemon-older") return {
 				title: labels.machinesDaemonOlder,
 				detail: labels.machinesDaemonOlderDetail(versions)

package/dist/machines/headless/stores.d.ts

@@ -1,5 +1,5 @@
 import { Readable } from "../../chat/headless/store.js";
-import { MachineList } from "./host.js";
+import { MachineList, MachineListState } from "./host.js";
 import { MachineInfo } from "zidane/chat/pure";
 //#region src/machines/headless/stores.d.ts
 /** A store and how to set it, for {@link lazyReadable}'s `start`. */
@@ -32,6 +32,13 @@ declare function lazyReadable<T>(initial: T, start: (sink: LazySink<T>) => () =>
  * @param listen - Calls back with the server id whenever one of its machines changed status; returns how to stop.
  */
 declare function createMachineLists(load: (hostId: string) => Promise<readonly MachineInfo[]>, listen: (onChange: (hostId: string) => void) => () => void): (hostId: string) => MachineList;
+/**
+ * Several servers' machine lists as one store: each server's machines by its id, the same map until one list
+ * changes. A list that is still loading or failed counts as no machines.
+ *
+ * @param lists - Each server's id and its list state ({@link createMachineLists}' `state`).
+ */
+declare function machinesByHost(lists: readonly (readonly [string, Readable<MachineListState>])[]): Readable<ReadonlyMap<string, readonly MachineInfo[]>>;
 /**
  * The names of the machines last heard online, from status pushes. It keeps listening once read, so a
  * machine that comes back while nothing shows the list still counts.
@@ -43,4 +50,4 @@ declare function createOnlineMachines(listen: (onChange: (change: {
   status: 'online' | 'offline';
 }) => void) => () => void): Readable<ReadonlySet<string>>;
 //#endregion
-export { LazyReadableOptions, LazySink, createMachineLists, createOnlineMachines, lazyReadable };
+export { LazyReadableOptions, LazySink, createMachineLists, createOnlineMachines, lazyReadable, machinesByHost };

package/dist/machines/headless/stores.js

@@ -96,6 +96,33 @@ function createMachineLists(load, listen) {
 		return list;
 	};
 }
+const NO_MACHINES = /* @__PURE__ */ new Map();
+/**
+* Several servers' machine lists as one store: each server's machines by its id, the same map until one list
+* changes. A list that is still loading or failed counts as no machines.
+*
+* @param lists - Each server's id and its list state ({@link createMachineLists}' `state`).
+*/
+function machinesByHost(lists) {
+	let parts = null;
+	let map = NO_MACHINES;
+	return {
+		get() {
+			const next = lists.map(([, state]) => state.get());
+			if (parts === null || next.some((part, i) => part !== parts[i])) {
+				parts = next;
+				map = new Map(lists.map(([hostId], i) => [hostId, next[i].machines]));
+			}
+			return map;
+		},
+		subscribe(onChange) {
+			const offs = lists.map(([, state]) => state.subscribe(onChange));
+			return () => {
+				for (const off of offs) off();
+			};
+		}
+	};
+}
 /**
 * The names of the machines last heard online, from status pushes. It keeps listening once read, so a
 * machine that comes back while nothing shows the list still counts.
@@ -111,4 +138,4 @@ function createOnlineMachines(listen) {
 	}), { keepAlive: true });
 }
 //#endregion
-export { createMachineLists, createOnlineMachines, lazyReadable };
+export { createMachineLists, createOnlineMachines, lazyReadable, machinesByHost };

package/dist/machines/index.d.ts

@@ -1,17 +1,21 @@
+import { AddMachineDialog, AddMachineDialogProps, AddMachineTab, OpenAddMachine, useAddMachine } from "./AddMachineDialog.js";
 import { AddServerForm, AddServerFormProps } from "./AddServerForm.js";
-import { ComposerNotice, ComposerNoticeProps, HostRemovedBanner, HostRemovedBannerProps, MachineWaitingBanner, MachineWaitingBannerProps, ServerOfflineBanner, ServerOfflineBannerProps } from "./Banners.js";
-import { MachinesConfirm, MachinesProvider, MachinesProviderProps, useLentServers, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useSessionPresence } from "./MachinesProvider.js";
+import { ComposerNotice, ComposerNoticeProps, DraftPlaceNotice, DraftPlaceNoticeProps, HostRemovedBanner, HostRemovedBannerProps, MachineWaitingBanner, MachineWaitingBannerProps, ServerOfflineBanner, ServerOfflineBannerProps } from "./Banners.js";
+import { MachinesConfirm, MachinesProvider, MachinesProviderProps, useLentServers, useMachinesBridge, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerMachines, useSessionPresence } from "./MachinesProvider.js";
 import { DaemonMenu, DaemonMenuProps } from "./DaemonMenu.js";
 import { CapabilitiesView, CapabilitiesViewProps, CapabilityTags, CapabilityTagsProps, HostCapabilitiesState, useHostCapabilities } from "./HostCapabilities.js";
 import { HostSignIn, HostSignInProps } from "./HostSignIn.js";
 import { HostSyncPanel, HostSyncPanelProps, useHostSync } from "./HostSyncPanel.js";
+import { NewChatsServer, ServerAddedCard, ServerAddedCardProps } from "./ServerAddedCard.js";
 import { HostsSection, HostsSectionProps } from "./HostsSection.js";
+import { MachinesExplainer, MachinesExplainerProps } from "./MachinesExplainer.js";
 import { CopyText, CopyTextProps, HOST_CARD_ICON_CLASS, HOST_NAME_MAX, HOST_TOKEN_MAX, HOST_URL_MAX, ServerCard, ServerCardProps, escapeCancels } from "./ServerCard.js";
 import { ServerMachinesPanel, ServerMachinesPanelProps } from "./ServerMachinesPanel.js";
 import { ServerUpdatePanel, ServerUpdatePanelProps } from "./ServerUpdatePanel.js";
+import { ShareThisComputerForm, ShareThisComputerFormProps } from "./ShareThisComputerForm.js";
 import { SyncAccounts, SyncAccountsProps } from "./SyncAccounts.js";
 import { SyncMarker, SyncMarkerProps, useServerSyncStatus } from "./SyncMarker.js";
 import { SyncOutcomeBadge, SyncOutcomeBadgeProps } from "./SyncOutcomeBadge.js";
 import { TokensPanel, TokensPanelProps } from "./TokensPanel.js";
 import { hostsSettingsSection } from "./settings-section.js";
-export { AddServerForm, AddServerFormProps, CapabilitiesView, CapabilitiesViewProps, CapabilityTags, CapabilityTagsProps, ComposerNotice, ComposerNoticeProps, CopyText, CopyTextProps, DaemonMenu, DaemonMenuProps, HOST_CARD_ICON_CLASS, HOST_NAME_MAX, HOST_TOKEN_MAX, HOST_URL_MAX, HostCapabilitiesState, HostRemovedBanner, HostRemovedBannerProps, HostSignIn, HostSignInProps, HostSyncPanel, HostSyncPanelProps, HostsSection, HostsSectionProps, MachineWaitingBanner, MachineWaitingBannerProps, MachinesConfirm, MachinesProvider, MachinesProviderProps, ServerCard, ServerCardProps, ServerMachinesPanel, ServerMachinesPanelProps, ServerOfflineBanner, ServerOfflineBannerProps, ServerUpdatePanel, ServerUpdatePanelProps, SyncAccounts, SyncAccountsProps, SyncMarker, SyncMarkerProps, SyncOutcomeBadge, SyncOutcomeBadgeProps, TokensPanel, TokensPanelProps, escapeCancels, hostsSettingsSection, useHostCapabilities, useHostSync, useLentServers, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerSyncStatus, useSessionPresence };
+export { AddMachineDialog, AddMachineDialogProps, AddMachineTab, AddServerForm, AddServerFormProps, CapabilitiesView, CapabilitiesViewProps, CapabilityTags, CapabilityTagsProps, ComposerNotice, ComposerNoticeProps, CopyText, CopyTextProps, DaemonMenu, DaemonMenuProps, DraftPlaceNotice, DraftPlaceNoticeProps, HOST_CARD_ICON_CLASS, HOST_NAME_MAX, HOST_TOKEN_MAX, HOST_URL_MAX, HostCapabilitiesState, HostRemovedBanner, HostRemovedBannerProps, HostSignIn, HostSignInProps, HostSyncPanel, HostSyncPanelProps, HostsSection, HostsSectionProps, MachineWaitingBanner, MachineWaitingBannerProps, MachinesConfirm, MachinesExplainer, MachinesExplainerProps, MachinesProvider, MachinesProviderProps, NewChatsServer, OpenAddMachine, ServerAddedCard, ServerAddedCardProps, ServerCard, ServerCardProps, ServerMachinesPanel, ServerMachinesPanelProps, ServerOfflineBanner, ServerOfflineBannerProps, ServerUpdatePanel, ServerUpdatePanelProps, ShareThisComputerForm, ShareThisComputerFormProps, SyncAccounts, SyncAccountsProps, SyncMarker, SyncMarkerProps, SyncOutcomeBadge, SyncOutcomeBadgeProps, TokensPanel, TokensPanelProps, escapeCancels, hostsSettingsSection, useAddMachine, useHostCapabilities, useHostSync, useLentServers, useMachinesBridge, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerMachines, useServerSyncStatus, useSessionPresence };

package/dist/machines/index.js

@@ -1,17 +1,21 @@
-import { MachinesProvider, useLentServers, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useSessionPresence } from "./MachinesProvider.js";
+import { MachinesProvider, useLentServers, useMachinesBridge, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerMachines, useSessionPresence } from "./MachinesProvider.js";
+import { ShareThisComputerForm } from "./ShareThisComputerForm.js";
+import { AddMachineDialog, useAddMachine } from "./AddMachineDialog.js";
 import { CopyText, HOST_CARD_ICON_CLASS, HOST_NAME_MAX, HOST_TOKEN_MAX, HOST_URL_MAX, ServerCard, escapeCancels } from "./ServerCard.js";
 import { AddServerForm } from "./AddServerForm.js";
-import { ComposerNotice, HostRemovedBanner, MachineWaitingBanner, ServerOfflineBanner } from "./Banners.js";
+import { ComposerNotice, DraftPlaceNotice, HostRemovedBanner, MachineWaitingBanner, ServerOfflineBanner } from "./Banners.js";
 import { DaemonMenu } from "./DaemonMenu.js";
 import { CapabilitiesView, CapabilityTags, useHostCapabilities } from "./HostCapabilities.js";
 import { HostSignIn } from "./HostSignIn.js";
 import { SyncAccounts } from "./SyncAccounts.js";
 import { SyncOutcomeBadge } from "./SyncOutcomeBadge.js";
 import { HostSyncPanel, useHostSync } from "./HostSyncPanel.js";
+import { MachinesExplainer } from "./MachinesExplainer.js";
+import { ServerAddedCard } from "./ServerAddedCard.js";
 import { ServerMachinesPanel } from "./ServerMachinesPanel.js";
 import { ServerUpdatePanel } from "./ServerUpdatePanel.js";
+import { TokensPanel } from "./TokensPanel.js";
 import { HostsSection } from "./HostsSection.js";
 import { SyncMarker, useServerSyncStatus } from "./SyncMarker.js";
-import { TokensPanel } from "./TokensPanel.js";
 import { hostsSettingsSection } from "./settings-section.js";
-export { AddServerForm, CapabilitiesView, CapabilityTags, ComposerNotice, CopyText, DaemonMenu, HOST_CARD_ICON_CLASS, HOST_NAME_MAX, HOST_TOKEN_MAX, HOST_URL_MAX, HostRemovedBanner, HostSignIn, HostSyncPanel, HostsSection, MachineWaitingBanner, MachinesProvider, ServerCard, ServerMachinesPanel, ServerOfflineBanner, ServerUpdatePanel, SyncAccounts, SyncMarker, SyncOutcomeBadge, TokensPanel, escapeCancels, hostsSettingsSection, useHostCapabilities, useHostSync, useLentServers, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerSyncStatus, useSessionPresence };
+export { AddMachineDialog, AddServerForm, CapabilitiesView, CapabilityTags, ComposerNotice, CopyText, DaemonMenu, DraftPlaceNotice, HOST_CARD_ICON_CLASS, HOST_NAME_MAX, HOST_TOKEN_MAX, HOST_URL_MAX, HostRemovedBanner, HostSignIn, HostSyncPanel, HostsSection, MachineWaitingBanner, MachinesExplainer, MachinesProvider, ServerAddedCard, ServerCard, ServerMachinesPanel, ServerOfflineBanner, ServerUpdatePanel, ShareThisComputerForm, SyncAccounts, SyncMarker, SyncOutcomeBadge, TokensPanel, escapeCancels, hostsSettingsSection, useAddMachine, useHostCapabilities, useHostSync, useLentServers, useMachinesBridge, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerMachines, useServerSyncStatus, useSessionPresence };

package/dist/machines/testing/contract.d.ts

@@ -1,10 +1,10 @@
 import { SessionPresence } from "../headless/presence.js";
-import { DaemonStatus, HostCheckResult, MachineInfo as MachineInfo$1, MachineLinksStatus as MachineLinksStatus$1, MachinesHost, ServerToken, ServerTokenScope, ServerUpdateStatus as ServerUpdateStatus$1 } from "../headless/host.js";
+import { DaemonStatus, HostCheckResult, MachineInfo as MachineInfo$1, MachineJoinEvent as MachineJoinEvent$1, MachineLinksStatus as MachineLinksStatus$1, MachinesHost, ServerToken, ServerUpdateStatus as ServerUpdateStatus$1 } from "../headless/host.js";
 import { MachinesSyncCapability, MachinesSyncContractBackend, MachinesSyncHarness, MachinesSyncHarnessFactory, describeMachinesSyncContract } from "./sync.contract.js";
 import { HostCapabilities } from "zidane/chat/pure";
 //#region src/machines/testing/contract.d.ts
 /** An optional `MachinesHost` member, by its path. */
-type MachinesHostCapability = 'hosts' | 'refreshHosts' | 'retry' | 'testHost' | 'addHost' | 'renameHost' | 'setHostUrl' | 'removeHost' | 'savedHosts' | 'machines' | 'machines.forget' | 'machines.invite' | 'links' | 'links.shareStart' | 'links.shareStop' | 'links.useServer' | 'pickFolder' | 'updates' | 'updates.check' | 'updates.install' | 'updates.configure' | 'tokens' | 'tokens.create' | 'tokens.revoke' | 'tokens.onChanged' | 'daemon' | 'daemon.reconnect' | 'daemon.restart' | 'daemon.stopRun' | 'daemon.relaunchApp' | 'presence' | 'capabilities' | 'installTool' | 'permitted';
+type MachinesHostCapability = 'hosts' | 'refreshHosts' | 'retry' | 'testHost' | 'addHost' | 'renameHost' | 'setHostUrl' | 'removeHost' | 'savedHosts' | 'machines' | 'machines.forget' | 'machines.invite' | 'machines.onJoin' | 'links' | 'links.shareStart' | 'links.shareStop' | 'links.useServer' | 'pickFolder' | 'newChat' | 'updates' | 'updates.check' | 'updates.install' | 'updates.configure' | 'tokens' | 'tokens.create' | 'tokens.revoke' | 'tokens.pair' | 'tokens.onChanged' | 'daemon' | 'daemon.reconnect' | 'daemon.restart' | 'daemon.stopRun' | 'daemon.relaunchApp' | 'presence' | 'capabilities' | 'installTool' | 'permitted';
 /** What the backend behind the host holds, and what it records. */
 interface MachinesHostContractBackend {
   /**
@@ -73,15 +73,25 @@ interface MachinesHostContractBackend {
   /** The backend calls this when an update action reaches it: {@link update} changes. */
   updated(action: 'check' | 'install' | 'configure', enabled?: boolean): void;
   /** The backend calls this when a token is created, and answers with what it returns. */
-  created(name: string, scope: ServerTokenScope): ServerToken & {
+  created(name: string): ServerToken & {
     token: string;
   };
+  /** The backend calls this when a browser pairing code is asked for, and answers with what it returns. */
+  paired(params: {
+    name?: string;
+    ttlMs?: number;
+  }): {
+    code: string;
+    expiresAt: number;
+  };
   /** The backend calls this when a revoke reaches it. */
   revoked(id: string): void;
   /** The backend calls this when a link action reaches it: {@link links} changes. */
   linked(action: 'shareStart' | 'shareStop' | 'useServer', detail?: unknown): void;
   /** The backend calls this when a daemon action reaches it. */
   daemonCalled(action: 'reconnect' | 'restart' | 'stopRun' | 'relaunchApp', detail?: unknown): void;
+  /** The app calls this when New chat reaches it: the server, and the machine's name when on one. */
+  chatOpened(hostId: string, machine?: string): void;
 }
 /** A host built over a contract backend, and the pushes its backend can make. */
 interface MachinesHostHarness {
@@ -89,6 +99,8 @@ interface MachinesHostHarness {
   host: MachinesHost;
   /** Sets a machine's status in the backend and pushes the change, as the backend does. */
   pushMachineStatus(machineId: string, status: 'online' | 'offline'): void;
+  /** Pushes what became of a join code, as the backend does (needed for `machines.onJoin`). */
+  pushJoin?(event: MachineJoinEvent$1): void;
   /** Sets the backend's presence and pushes the snapshot, as the backend does (needed for `presence`). */
   pushPresence?(sessions: SessionPresence[]): void;
   /** Adds a token elsewhere (another page, the CLI) and says so, as the backend does (needed for `tokens.onChanged`). */

package/dist/machines/testing/contract.js

@@ -31,11 +31,13 @@ const CAPABILITIES = [
 	"machines",
 	"machines.forget",
 	"machines.invite",
+	"machines.onJoin",
 	"links",
 	"links.shareStart",
 	"links.shareStop",
 	"links.useServer",
 	"pickFolder",
+	"newChat",
 	"updates",
 	"updates.check",
 	"updates.install",
@@ -43,6 +45,7 @@ const CAPABILITIES = [
 	"tokens",
 	"tokens.create",
 	"tokens.revoke",
+	"tokens.pair",
 	"tokens.onChanged",
 	"daemon",
 	"daemon.reconnect",
@@ -98,7 +101,7 @@ function contractBackend() {
 		tokens: [{
 			id: "tok_1",
 			name: "phone",
-			scope: "chat",
+			scope: "client",
 			createdAt: 17e11
 		}],
 		links: {
@@ -144,9 +147,7 @@ function contractBackend() {
 			allows: {
 				remoteInstalls: true,
 				asMachine: false,
-				sync: true,
-				clone: true,
-				createFolders: true
+				sync: true
 			},
 			workspace: {
 				roots: ["/data"],
@@ -234,15 +235,12 @@ function contractBackend() {
 				state: "installing"
 			};
 		},
-		created(name, scope) {
-			record("token.create", {
-				name,
-				scope
-			});
+		created(name) {
+			record("token.create", { name });
 			const token = {
 				id: `tok_${backend.tokens.length + 1}`,
 				name,
-				scope,
+				scope: "client",
 				createdAt: 17e11
 			};
 			backend.tokens = [...backend.tokens, token];
@@ -251,6 +249,13 @@ function contractBackend() {
 				token: "zds_secret"
 			};
 		},
+		paired(params) {
+			record("token.pair", params);
+			return {
+				code: "P4IR-C0DE",
+				expiresAt: 17000006e5
+			};
+		},
 		revoked(id) {
 			record("token.revoke", id);
 			backend.tokens = backend.tokens.map((t) => t.id === id ? {
@@ -285,7 +290,11 @@ function contractBackend() {
 				}] : []
 			};
 		},
-		daemonCalled: (action, detail) => record(`daemon.${action}`, detail)
+		daemonCalled: (action, detail) => record(`daemon.${action}`, detail),
+		chatOpened: (hostId, machine) => record("newChat", {
+			hostId,
+			machine
+		})
 	};
 	return {
 		backend,
@@ -481,6 +490,43 @@ function describeMachinesHostContract(name, makeHarness, capabilities) {
 				}]));
 			}
 		});
+		it.skipIf(!has("machines.onJoin"))("tells what became of a join code, until unsubscribed", async () => {
+			const harness = await setup();
+			const heard = [];
+			const off = harness.host.machines.onJoin(harness.id, (event) => void heard.push(event));
+			harness.pushJoin({
+				pairingId: "K7Q2",
+				outcome: "refused",
+				reason: "name-taken",
+				name: "desk"
+			});
+			await waitFor(() => expect(heard).toEqual([{
+				pairingId: "K7Q2",
+				outcome: "refused",
+				reason: "name-taken",
+				name: "desk"
+			}]));
+			off();
+			harness.pushJoin({
+				pairingId: "K7Q2",
+				outcome: "joined",
+				name: "desk"
+			});
+			await new Promise((resolve) => setTimeout(resolve, 20));
+			expect(heard).toHaveLength(1);
+		});
+		it.skipIf(!has("newChat"))("opens a new chat on the server, or on one of its machines", async () => {
+			const { host, id, calls: recorded } = await setup();
+			host.newChat(id);
+			host.newChat(id, "laptop");
+			await waitFor(() => expect(calls(recorded, "newChat").map((c) => c.detail)).toEqual([{
+				hostId: id,
+				machine: void 0
+			}, {
+				hostId: id,
+				machine: "laptop"
+			}]));
+		});
 		it.skipIf(!has("pickFolder"))("picks a folder", async () => {
 			const { host, backend } = await setup();
 			expect(await host.pickFolder()).toBe(backend.folder);
@@ -529,13 +575,13 @@ function describeMachinesHostContract(name, makeHarness, capabilities) {
 			])).toEqual([[
 				"tok_1",
 				"phone",
-				"chat"
+				"client"
 			]]);
 			if (tokens.create) {
-				const created = await tokens.create(id, "laptop", "admin");
+				const created = await tokens.create(id, "laptop");
 				expect(created).toMatchObject({
 					name: "laptop",
-					scope: "admin"
+					scope: "client"
 				});
 				expect(typeof created.token).toBe("string");
 				expect((await tokens.list(id)).map((t) => t.name)).toContain("laptop");
@@ -545,6 +591,14 @@ function describeMachinesHostContract(name, makeHarness, capabilities) {
 				expect((await tokens.list(id)).find((t) => t.id === "tok_1")?.revokedAt).toBeTypeOf("number");
 			}
 		});
+		it.skipIf(!has("tokens.pair"))("makes a one-time code a browser logs in with", async () => {
+			const { host, id, calls: recorded } = await setup();
+			expect(await host.tokens.pair(id)).toMatchObject({
+				code: "P4IR-C0DE",
+				expiresAt: expect.any(Number)
+			});
+			expect(calls(recorded, "token.pair")).toHaveLength(1);
+		});
 		it.skipIf(!has("tokens.onChanged"))("hears when the tokens change elsewhere", async () => {
 			const { host, backend, id, pushTokenCreated } = await setup();
 			const heard = vi.fn();

package/dist/motion/grow.d.ts

@@ -17,6 +17,13 @@ interface GrowProps {
   axis?: 'x' | 'y';
   /** Grow in when mounted. When `false`, the block starts open, for rows rendered with their list. */
   appear: boolean;
+  /**
+   * Shrink out on the same motion it grows in on (`settle`), not the quicker `exit`. For a list
+   * that swaps rows (one leaves as another arrives, the live fold's stack): the two curves mirror
+   * each other, so the list keeps its height through the swap instead of dipping and recovering.
+   * @default false
+   */
+  symmetric?: boolean;
   /** Extra classes on the element. */
   className?: string;
   /** Inline styles on the element. */
@@ -39,6 +46,6 @@ interface GrowProps {
  *
  * @param props - Component props.
  */
-declare function Grow({ as: Tag, axis, appear, className, style, children, ...rest }: GrowProps): import("react").JSX.Element;
+declare function Grow({ as: Tag, axis, appear, symmetric, className, style, children, ...rest }: GrowProps): import("react").JSX.Element;
 //#endregion
 export { Grow, GrowPresence, GrowProps };

package/dist/motion/grow.js

@@ -1,4 +1,4 @@
-import { readExitMs } from "./presence.js";
+import { readExitMs, readMotionMs } from "./presence.js";
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 import { AnimatePresence as GrowPresence, usePresence } from "motion/react";
@@ -21,7 +21,7 @@ import { AnimatePresence as GrowPresence, usePresence } from "motion/react";
 *
 * @param props - Component props.
 */
-function Grow({ as: Tag = "div", axis = "y", appear, className = "", style, children, ...rest }) {
+function Grow({ as: Tag = "div", axis = "y", appear, symmetric = false, className = "", style, children, ...rest }) {
 	const [isPresent, safeToRemove] = usePresence();
 	const ref = useRef(null);
 	const [entered, setEntered] = useState(!appear);
@@ -32,14 +32,20 @@ function Grow({ as: Tag = "div", axis = "y", appear, className = "", style, chil
 	}, [entered]);
 	useLayoutEffect(() => {
 		if (isPresent) return void 0;
-		const id = setTimeout(() => safeToRemove?.(), readExitMs());
+		const ms = symmetric ? Math.max(readMotionMs("settle"), readExitMs()) : readExitMs();
+		const id = setTimeout(() => safeToRemove?.(), ms);
 		return () => clearTimeout(id);
-	}, [isPresent, safeToRemove]);
+	}, [
+		isPresent,
+		safeToRemove,
+		symmetric
+	]);
 	return /* @__PURE__ */ jsx(Tag, {
 		ref,
 		className: `zg-grow ${className}`,
 		"data-shown": entered && isPresent ? "" : void 0,
 		"data-axis": axis === "x" ? "x" : void 0,
+		"data-symmetric": symmetric ? "" : void 0,
 		style,
 		...rest,
 		children: /* @__PURE__ */ jsx("div", {

package/dist/onboarding/demos/index.js

@@ -1,6 +1,6 @@
 import { DemoStage } from "./parts.js";
-import { TUTORIAL_SCENES } from "./how-it-works.js";
 import { ApprovalDemo, SandboxDemo } from "./autonomy.js";
+import { TUTORIAL_SCENES } from "./how-it-works.js";
 import { DeliveryDemo } from "./delivery.js";
 import { ExtensionDemo } from "./extensions.js";
 import { FeatureDemo, hasFeatureDemo } from "./features.js";

package/dist/onboarding/headless/labels.d.ts

@@ -11,6 +11,10 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   done: string;
   notNow: string;
   saveFailed: (message: string) => string;
+  /** A source that did not load in the source browser; what went wrong folds under Details. */
+  sourceLoadFailed: string;
+  /** The Claude Code setup that could not be read in Bring your setup. */
+  importPreviewFailed: string;
   recommended: string;
   usedIn: (step: string) => string;
   fullSetupDetail: string;
@@ -36,6 +40,8 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   testOk: (model: string, seconds: string) => string;
   testFailed: string;
   testAgain: string;
+  keySaveFailed: string;
+  installFailed: string;
   connectFirst: string;
   importFrom: (agent: string) => string;
   importNothing: string;
@@ -232,6 +238,8 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   taskDone: string;
   taskFailed: string;
   taskNeedsSignIn: string;
+  /** A failed background task's line; its error folds under Details. */
+  taskFailedNote: string;
   signIn: string;
   recapLookSystem: (dark: string, light: string) => string;
   recapAccent: (accent: string) => string;
@@ -308,6 +316,9 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   working: string;
   loading: string;
   retry: string;
+  noticeDetails: string;
+  noticeStack: string;
+  noticeDismiss: string;
   filePath: (path: string) => string;
   rename: string;
   current: string;
@@ -325,6 +336,7 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   modalBack: string;
   screenBack: (screen: string) => string;
   screenBackKey: string;
+  screenNavBack: (screen: string) => string;
   paletteLabel: string;
   paletteFilter: string;
   paletteBack: string;
@@ -389,6 +401,7 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   openInNewTab: string;
   terminal: string;
   terminalLoadFailed: (message: string) => string;
+  terminalStartFailed: string;
   terminalExited: (code: number) => string;
 };
 /** The setup wizard's strings: {@link DEFAULT_ONBOARDING_LABELS}' keys. */

package/dist/onboarding/headless/labels.js

@@ -37,6 +37,10 @@ const DEFAULT_ONBOARDING_LABELS = {
 	done: "Done",
 	notNow: "Not now",
 	saveFailed: (message) => `The setup was not saved. ${message}`,
+	/** A source that did not load in the source browser; what went wrong folds under Details. */
+	sourceLoadFailed: "The source did not load.",
+	/** The Claude Code setup that could not be read in Bring your setup. */
+	importPreviewFailed: "Couldn't read this setup.",
 	recommended: "recommended",
 	usedIn: (step) => `Used in ${step}`,
 	fullSetupDetail: "Choose your provider, tools, look and how zidane works.",
@@ -62,6 +66,8 @@ const DEFAULT_ONBOARDING_LABELS = {
 	testOk: (model, seconds) => `${model} answered in ${seconds} s`,
 	testFailed: "The model did not answer",
 	testAgain: "Test again",
+	keySaveFailed: "Couldn't save the key.",
+	installFailed: "Couldn't install it.",
 	connectFirst: "Connect a provider to continue",
 	importFrom: (agent) => `From ${agent}`,
 	importNothing: "Nothing new to copy",
@@ -304,6 +310,8 @@ const DEFAULT_ONBOARDING_LABELS = {
 	taskDone: "Done",
 	taskFailed: "Failed",
 	taskNeedsSignIn: "Needs sign-in",
+	/** A failed background task's line; its error folds under Details. */
+	taskFailedNote: "It didn't finish.",
 	signIn: "Sign in",
 	recapLookSystem: (dark, light) => `${dark} and ${light}, as the system picks`,
 	recapAccent: (accent) => `${accent} accent`,

package/dist/onboarding/index.js

@@ -1,13 +1,13 @@
 import { OnboardingHostProvider, OnboardingProvider, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep } from "./OnboardingProvider.js";
 import { useSignIn } from "./useSignIn.js";
 import { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark, extensionMarkOf } from "./marks.js";
-import { DemoStage } from "./demos/parts.js";
-import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
-import { Tutorial } from "./tutorials.js";
 import { ConnectProviderCard } from "./ConnectProviderCard.js";
+import { DemoStage } from "./demos/parts.js";
 import { ApprovalDemo, SandboxDemo } from "./demos/autonomy.js";
 import { OnboardingStepFrame } from "./OnboardingStepFrame.js";
 import { AutonomyStep } from "./steps/AutonomyStep.js";
+import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
+import { Tutorial } from "./tutorials.js";
 import { ConnectorsStep } from "./steps/ConnectorsStep.js";
 import { ConnectStep } from "./steps/ConnectStep.js";
 import { ConversationPresetPreview, ConversationPreview, transcriptPreviewOptions } from "./conversation.js";

package/dist/onboarding/sources/SourceBrowser.js

@@ -1,6 +1,8 @@
 import { buttonClass } from "../../components/button.js";
+import { Notice } from "../../components/Notice.js";
 import { EmptyState } from "../../components/Surface.js";
 import { ErrorNote, INPUT_CLASS } from "../../components/Form.js";
+import { errorMessage } from "../../components/report-error.js";
 import { useOnboardingLabels } from "../OnboardingProvider.js";
 import { SkeletonListing, SourceChips, SourceHeader, SourceRows } from "../skills/parts.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -25,9 +27,6 @@ import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef,
 */
 /** Above this many rows, a filter field shows over the list. */
 const FILTER_FROM = 12;
-function messageOf(error) {
-	return error instanceof Error ? error.message : String(error);
-}
 /**
 * Renders a source browser: a field, the recommended sources, and the rows of the open source.
 *
@@ -78,7 +77,7 @@ function SourceBrowser({ browse, itemsOf, cardOf, pickOf, selectable: canPick, r
 			if (seq.current === n) setOpened({
 				input: text,
 				kind: "error",
-				message: messageOf(error)
+				message: errorMessage(error)
 			});
 		});
 	}, [browse]);
@@ -214,7 +213,10 @@ function SourceBrowser({ browse, itemsOf, cardOf, pickOf, selectable: canPick, r
 					}),
 					opened.kind === "error" && /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-3 p-3",
-						children: [/* @__PURE__ */ jsx(ErrorNote, { children: labels.browseFailed(opened.message) }), /* @__PURE__ */ jsx("button", {
+						children: [/* @__PURE__ */ jsx(ErrorNote, {
+							detail: opened.message,
+							children: labels.sourceLoadFailed
+						}), /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => open(opened.input),
 							className: `${buttonClass({
@@ -239,8 +241,10 @@ function SourceBrowser({ browse, itemsOf, cardOf, pickOf, selectable: canPick, r
 							className: "m-0 px-3 pb-2 text-zg-label text-[var(--zg-text-muted)] text-pretty",
 							children: note
 						}),
-						truncatedOf?.(listing) && /* @__PURE__ */ jsx("p", {
-							className: "m-0 px-3 pb-2 text-zg-meta text-zg-warn",
+						truncatedOf?.(listing) && /* @__PURE__ */ jsx(Notice, {
+							tone: "warning",
+							compact: true,
+							className: "mx-3 mb-2",
 							children: labels.listingTruncated
 						}),
 						items.length > FILTER_FROM && /* @__PURE__ */ jsxs("div", {

package/dist/onboarding/steps/ConnectorsStep.js

@@ -6,8 +6,8 @@ import { constant, useReadable } from "../../chat/headless/store.js";
 import { connectorsFromImport } from "../headless/controller.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
 import { RoutedLink } from "../../extensions/links.js";
-import { Tutorial } from "../tutorials.js";
 import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
+import { Tutorial } from "../tutorials.js";
 import { StepSection, StepTray } from "./StepSection.js";
 import { TaskChip, TaskFailure } from "./tasks.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/onboarding/steps/ImportStep.js

@@ -65,7 +65,10 @@ function ImportStep({ className }) {
 				loaded.kind !== "none" && /* @__PURE__ */ jsxs(StepSection, {
 					title: labels.importFrom(labels.agentName("claude-code")),
 					visual: mark("claude-code", "sm"),
-					children: [loaded.kind === "failed" && /* @__PURE__ */ jsx(ErrorNote, { children: loaded.message }), preview && selection && /* @__PURE__ */ jsxs("div", {
+					children: [loaded.kind === "failed" && /* @__PURE__ */ jsx(ErrorNote, {
+						detail: loaded.message,
+						children: labels.importPreviewFailed
+					}), preview && selection && /* @__PURE__ */ jsxs("div", {
 						className: "zg-tray rounded-zg-xl p-2 flex flex-col",
 						children: [/* @__PURE__ */ jsx(ToggleCard, {
 							title: labels.importSessions,

package/dist/onboarding/steps/ReadyStep.js

@@ -1,5 +1,6 @@
 import { BrandMark } from "../../components/BrandMark.js";
 import { buttonClass } from "../../components/button.js";
+import { Notice } from "../../components/Notice.js";
 import { BrowserSignIn } from "../../components/BrowserSignIn.js";
 import { presetFor } from "../../theme/accents.js";
 import { constant, useReadable } from "../../chat/headless/store.js";
@@ -214,8 +215,14 @@ function TaskRow({ task }) {
 					children: task.label
 				}),
 				/* @__PURE__ */ jsx(TaskChip, { task }),
-				task.message && /* @__PURE__ */ jsx("span", {
-					className: `flex-1 min-w-0 break-words text-zg-label ${task.status === "failed" ? "text-zg-danger" : "text-[var(--zg-text-muted)]"}`,
+				task.status === "failed" ? /* @__PURE__ */ jsx(Notice, {
+					tone: "error",
+					compact: true,
+					className: "flex-1 min-w-0",
+					...task.message ? { detail: task.message } : {},
+					children: labels.taskFailedNote
+				}) : task.message && /* @__PURE__ */ jsx("span", {
+					className: "flex-1 min-w-0 break-words text-zg-label text-[var(--zg-text-muted)]",
 					children: task.message
 				}),
 				/* @__PURE__ */ jsxs("span", {

package/dist/onboarding/steps/SkillsStep.js

@@ -1,7 +1,7 @@
 import { constant, useReadable } from "../../chat/headless/store.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
-import { Tutorial } from "../tutorials.js";
 import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
+import { Tutorial } from "../tutorials.js";
 import { SkillSourceBrowser } from "../skills/SkillSourceBrowser.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/onboarding/steps/SkillsStep.tsx