zidane-ui 9.1.13 → 9.1.16

package/dist/machines/MachinesProvider.js

@@ -3,6 +3,7 @@ import { ConfirmDialog } from "../components/ConfirmDialog.js";
 import { Overlay } from "../components/Overlay.js";
 import { constant, useReadable } from "../chat/headless/store.js";
 import { isPermitted } from "./headless/host.js";
+import { machinesByHost } from "./headless/stores.js";
 import { DEFAULT_MACHINES_LABELS } from "./headless/labels.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
@@ -71,6 +72,21 @@ function MachinesProvider({ host, labels, confirm, children }) {
 		})
 	});
 }
+/**
+* Wraps a subtree rendered elsewhere (a modal layer, mounted above the providers) in this provider's host,
+* confirm and labels, so it reads what the place that opened it reads.
+*/
+function useMachinesBridge() {
+	const value = useContext(MachinesContext);
+	const labels = useMachinesLabels();
+	return useCallback((node) => /* @__PURE__ */ jsx(MachinesContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(LabelsProvider, {
+			labels,
+			children: node
+		})
+	}), [value, labels]);
+}
 /** Returns the {@link MachinesHost} from the nearest {@link MachinesProvider}, or an empty host outside one. */
 function useMachinesHost() {
 	return useContext(MachinesContext).host;
@@ -111,6 +127,24 @@ function useLentServers(enabled) {
 	const value = useReadable(enabled && links ? links.state : NO_LINKS);
 	return useMemo(() => value ? lentServerMachines(value) : NO_NAMES, [value]);
 }
+const NO_SERVER_MACHINES = constant(/* @__PURE__ */ new Map());
+/**
+* The machines of each of `hostIds`, by host id, kept current (a machine that joins or leaves shows at once).
+* Empty without the host's `machines`, or when the token cannot list them.
+*
+* @param hostIds - The servers to list.
+*/
+function useServerMachines(hostIds) {
+	const machines = useMachinesHost().machines;
+	const canList = usePermitted("machines.list");
+	const key = hostIds.join("\n");
+	const store = useMemo(() => machines && canList && key ? machinesByHost(key.split("\n").map((hostId) => [hostId, machines.list(hostId).state])) : NO_SERVER_MACHINES, [
+		machines,
+		canList,
+		key
+	]);
+	return useReadable(store);
+}
 /** The names of the machines last heard online, from every host; empty without the host's `machines`. */
 function useOnlineMachines() {
 	const machines = useMachinesHost().machines;
@@ -134,4 +168,4 @@ function useSessionPresence(sessionId) {
 	return useReadable(presence && sessionId ? presence.session(sessionId) : NO_PRESENCE);
 }
 //#endregion
-export { MachinesProvider, useLentServers, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useSessionPresence };
+export { MachinesProvider, useLentServers, useMachinesBridge, useMachinesConfirm, useMachinesHost, useMachinesLabels, useOnlineMachines, usePermitted, usePresenceMap, useServerMachines, useSessionPresence };

package/dist/machines/ServerAddedCard.d.ts

@@ -0,0 +1,31 @@
+import { HostSummary } from "./headless/host.js";
+import { CSSProperties } from "react";
+//#region src/machines/ServerAddedCard.d.ts
+/** Where new chats start, as the app holds it: which server they start on, and how to change it. */
+interface NewChatsServer {
+  /** The server new chats start on now; `null`: this computer (or a place not on a server). */
+  hostId: string | null;
+  /** Makes `host` where new chats start (`on`), or puts them back on this computer. */
+  set: (host: HostSummary, on: boolean) => void;
+}
+/** Props for {@link ServerAddedCard}. */
+interface ServerAddedCardProps {
+  /** The server just added. */
+  host: HostSummary;
+  /** Where new chats start. Absent: no switch. */
+  newChats?: NewChatsServer;
+  /** Closes the card. */
+  onDone: () => void;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Renders what to do with a server just added.
+ *
+ * @param props - The server, where new chats start, and Done.
+ */
+declare function ServerAddedCard({ host, newChats, onDone, className, style }: ServerAddedCardProps): import("react").JSX.Element;
+//#endregion
+export { NewChatsServer, ServerAddedCard, ServerAddedCardProps };

package/dist/machines/ServerAddedCard.js

@@ -0,0 +1,72 @@
+import { BTN_SECONDARY } from "../components/button.js";
+import { Tray } from "../components/Surface.js";
+import { SwitchRow } from "../components/Form.js";
+import { useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
+import { useAddMachine } from "./AddMachineDialog.js";
+import { MachinesExplainer } from "./MachinesExplainer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/machines/ServerAddedCard.tsx
+/**
+* Renders what to do with a server just added.
+*
+* @param props - The server, where new chats start, and Done.
+*/
+function ServerAddedCard({ host, newChats, onDone, className = "", style }) {
+	const labels = useMachinesLabels();
+	const { links } = useMachinesHost();
+	const openAdd = useAddMachine();
+	const canShare = Boolean(openAdd && links?.shareStart);
+	const onNewChats = newChats?.hostId === host.id;
+	return /* @__PURE__ */ jsxs(Tray, {
+		radius: "xl",
+		className: `p-4 space-y-3 ${className}`.trimEnd(),
+		style,
+		"data-testid": "server-added",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-sm font-medium text-[var(--zg-text)]",
+					children: labels.machinesAddedTitle(host.name)
+				}), /* @__PURE__ */ jsx(MachinesExplainer, { className: "pt-2" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [newChats && /* @__PURE__ */ jsx(SwitchRow, {
+					label: labels.machinesAddedNewChats(host.name),
+					description: labels.machinesAddedNewChatsHint,
+					on: onNewChats,
+					onToggle: () => newChats.set(host, !onNewChats)
+				}), canShare && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 px-1 py-1.5",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-sm text-[var(--zg-text)]",
+							children: labels.machinesAddedShare(host.name)
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-xs text-[var(--zg-text-muted)]",
+							children: labels.machinesAddedShareHint
+						})]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_SECONDARY,
+						onClick: () => openAdd?.(host.id, { tab: "this" }),
+						children: labels.machinesShareOpen
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_SECONDARY,
+					onClick: onDone,
+					children: labels.machinesInviteDone
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ServerAddedCard };

package/dist/machines/ServerCard.js

@@ -1,6 +1,5 @@
 import { IconButton } from "../components/IconButton.js";
 import { BTN_PRIMARY, BTN_SECONDARY } from "../components/button.js";
-import { CopyButton } from "../components/CopyButton.js";
 import { FormCard, INPUT_CLASS, MetaChip, OpLine } from "../components/Form.js";
 import { RowActionsMenu } from "../components/RowActionsMenu.js";
 import { machinesError } from "./headless/host.js";
@@ -19,13 +18,6 @@ import { useEffect, useRef, useState } from "react";
 * a new URL keeps the saved token and is saved once the same server answers
 * there) and Remove (asks first). What an action answers shows under the
 * card, as does the last connect's error.
-*
-* A chip says what this app's token may do there. With a chat token, Get
-* admin shows the server's own command for an admin token (its binary, user
-* and data dir, from the hello) and, where the app can save one
-* (`addHost`), a field to paste it: the saved server keeps its URL and
-* reconnects with it. Without `addHost` (the web app's own server) the
-* command is the pairing one.
 */
 /** The desktop app's `hosts:*` limits, mirrored so a field can't take more than it accepts. */
 const HOST_NAME_MAX = 200;
@@ -92,9 +84,8 @@ function ServerCard({ host, saved = host, onChanged, badge, confirm, now, classN
 	const [busy, setBusy] = useState(null);
 	const [line, setLine] = useState(null);
 	const [menuOpen, setMenuOpen] = useState(false);
-	const [getAdmin, setGetAdmin] = useState(false);
 	const menuButtonRef = useRef(null);
-	const { testHost, renameHost, setHostUrl, removeHost, addHost } = machines;
+	const { testHost, renameHost, setHostUrl, removeHost } = machines;
 	const changed = async () => {
 		await onChanged?.();
 	};
@@ -205,221 +196,106 @@ function ServerCard({ host, saved = host, onChanged, badge, confirm, now, classN
 		"data-testid": `host-${host.id}`,
 		...className ? { className } : {},
 		...style ? { style } : {},
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-3 px-4 py-3.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: HOST_CARD_ICON_CLASS,
-					children: /* @__PURE__ */ jsx("span", { className: "i-ph-hard-drives" })
-				}), editing ? /* @__PURE__ */ jsxs("form", {
-					className: "flex-1 flex items-center gap-2",
-					onSubmit: (event) => {
-						event.preventDefault();
-						save();
-					},
-					onKeyDown: escapeCancels(stopEditing),
-					children: [
-						/* @__PURE__ */ jsx("input", {
-							"aria-label": editing === "name" ? labels.machinesHostName : labels.machinesServerUrl,
-							className: INPUT_CLASS,
-							value: draft,
-							maxLength: editing === "name" ? 200 : HOST_URL_MAX,
-							autoFocus: true,
-							spellCheck: false,
-							onChange: (event) => setDraft(event.target.value)
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "submit",
-							className: BTN_PRIMARY,
-							disabled: busy !== null || !draft.trim(),
-							children: busy && editing === "url" ? busy : labels.machinesSave
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: BTN_SECONDARY,
-							onClick: stopEditing,
-							children: labels.machinesCancel
-						})
-					]
-				}) : /* @__PURE__ */ jsxs("div", {
-					className: "flex-1 min-w-0 flex flex-col gap-2.5",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex flex-wrap items-center gap-3 min-h-7",
-							children: [/* @__PURE__ */ jsxs("span", {
-								className: "flex-1 basis-40 min-w-0 inline-flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										className: "truncate text-sm font-medium text-[var(--zg-text)]",
-										children: host.name
-									}),
-									/* @__PURE__ */ jsx(HostStatusDot, { host }),
-									host.status !== "connected" && /* @__PURE__ */ jsx(MetaChip, {
-										tone: hostStatusTone(host),
-										children: hostStatusText(host, labels)
-									}),
-									host.scope && /* @__PURE__ */ jsx(MetaChip, { children: labels.machinesAccess(host.scope) }),
-									badge
-								]
-							}), (testHost || menuItems.length > 0 || host.scope === "chat") && /* @__PURE__ */ jsxs("span", {
-								className: "flex items-center gap-1 shrink-0",
-								children: [
-									host.scope === "chat" && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: BTN_SECONDARY,
-										"aria-expanded": getAdmin,
-										onClick: () => setGetAdmin((open) => !open),
-										children: labels.machinesGetAdmin
-									}),
-									testHost && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: BTN_SECONDARY,
-										onClick: () => void test(),
-										disabled: busy !== null,
-										children: busy === labels.machinesTesting ? labels.machinesTesting : labels.machinesTest
-									}),
-									menuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-										ref: menuButtonRef,
-										icon: "i-ph-dots-three",
-										label: labels.machinesHostActions(host.name),
-										"aria-haspopup": "menu",
-										"aria-expanded": menuOpen,
-										active: menuOpen,
-										disabled: busy !== null,
-										onClick: () => setMenuOpen((open) => !open)
-									}), /* @__PURE__ */ jsx(RowActionsMenu, {
-										open: menuOpen,
-										anchorRef: menuButtonRef,
-										onClose: () => setMenuOpen(false),
-										items: menuItems
-									})] })
-								]
-							})]
-						}),
-						host.url && /* @__PURE__ */ jsx(CopyText, {
-							text: host.url,
-							field: true
-						}),
-						facts.length > 0 && /* @__PURE__ */ jsx("div", {
-							className: "flex flex-wrap items-center gap-1.5",
-							children: facts.map((fact) => /* @__PURE__ */ jsx(MetaChip, { children: fact }, fact))
-						})
-					]
-				})]
-			}),
-			getAdmin && host.scope === "chat" && /* @__PURE__ */ jsx(GetAdmin, {
-				host,
-				...addHost && host.url ? { save: (token) => addHost({
-					url: host.url,
-					token,
-					name: host.name
-				}) } : {},
-				onSaved: async () => {
-					setGetAdmin(false);
-					setLine({
-						kind: "notice",
-						text: labels.machinesGetAdminSaved
-					});
-					await changed();
-				}
-			}),
-			(line || host.error && host.status !== "connected") && /* @__PURE__ */ jsxs("div", {
-				className: "pl-14 pr-4 pb-3.5 space-y-2",
-				children: [line && /* @__PURE__ */ jsx(OpLine, {
-					kind: line.kind,
-					children: line.text
-				}), !line && host.error && host.status !== "connected" && /* @__PURE__ */ jsx(OpLine, {
-					kind: "error",
-					children: host.error
-				})]
-			})
-		]
-	});
-}
-/** The server's command for an admin token, and a field to use the token it prints (when the app can save one). */
-function GetAdmin({ host, save, onSaved }) {
-	const labels = useMachinesLabels();
-	const [token, setToken] = useState("");
-	const [busy, setBusy] = useState(false);
-	const [error, setError] = useState(null);
-	const command = save ? host.adminCommands?.token ?? "zidane server token create --name <device> --scope admin" : host.adminCommands?.pair ?? "zidane server pair --scope admin";
-	const submit = async () => {
-		if (!save) return;
-		setBusy(true);
-		setError(null);
-		const result = await save(token.trim()).catch((err) => ({
-			ok: false,
-			error: "unknown",
-			message: labels.machinesError(machinesError("update", err))
-		}));
-		setBusy(false);
-		if (!result.ok) {
-			setError(hostCheckMessage(result, labels));
-			return;
-		}
-		setToken("");
-		await onSaved();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "pl-14 pr-4 pb-3.5 space-y-2",
-		"data-testid": `get-admin-${host.id}`,
-		children: [
-			/* @__PURE__ */ jsx("p", {
-				className: "m-0 text-xs text-[var(--zg-text-muted)]",
-				children: labels.machinesGetAdminRun
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "zg-well flex items-center gap-2 rounded-zg-md px-2.5 py-1.5",
-				children: [/* @__PURE__ */ jsx("code", {
-					className: "flex-1 min-w-0 break-all font-mono text-xs text-[var(--zg-text)]",
-					children: command
-				}), /* @__PURE__ */ jsx(CopyButton, {
-					text: command,
-					label: labels.machinesGetAdminCopy
-				})]
-			}),
-			save ? /* @__PURE__ */ jsxs("form", {
-				className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3 px-4 py-3.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: HOST_CARD_ICON_CLASS,
+				children: /* @__PURE__ */ jsx("span", { className: "i-ph-hard-drives" })
+			}), editing ? /* @__PURE__ */ jsxs("form", {
+				className: "flex-1 flex items-center gap-2",
 				onSubmit: (event) => {
 					event.preventDefault();
-					submit();
+					save();
 				},
+				onKeyDown: escapeCancels(stopEditing),
 				children: [
-					/* @__PURE__ */ jsx("label", {
-						className: "block text-xs text-[var(--zg-text-muted)]",
-						htmlFor: `get-admin-token-${host.id}`,
-						children: labels.machinesGetAdminToken
+					/* @__PURE__ */ jsx("input", {
+						"aria-label": editing === "name" ? labels.machinesHostName : labels.machinesServerUrl,
+						className: INPUT_CLASS,
+						value: draft,
+						maxLength: editing === "name" ? 200 : HOST_URL_MAX,
+						autoFocus: true,
+						spellCheck: false,
+						onChange: (event) => setDraft(event.target.value)
 					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: BTN_PRIMARY,
+						disabled: busy !== null || !draft.trim(),
+						children: busy && editing === "url" ? busy : labels.machinesSave
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_SECONDARY,
+						onClick: stopEditing,
+						children: labels.machinesCancel
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0 flex flex-col gap-2.5",
+				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx("input", {
-							id: `get-admin-token-${host.id}`,
-							"aria-label": labels.machinesGetAdminTokenField,
-							className: INPUT_CLASS,
-							type: "password",
-							autoComplete: "off",
-							spellCheck: false,
-							value: token,
-							maxLength: HOST_TOKEN_MAX,
-							onChange: (event) => setToken(event.target.value)
-						}), /* @__PURE__ */ jsx("button", {
-							type: "submit",
-							className: BTN_PRIMARY,
-							disabled: busy || !token.trim(),
-							children: busy ? labels.machinesGetAdminSaving : labels.machinesGetAdminSave
+						className: "flex flex-wrap items-center gap-3 min-h-7",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex-1 basis-40 min-w-0 inline-flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "truncate text-sm font-medium text-[var(--zg-text)]",
+									children: host.name
+								}),
+								/* @__PURE__ */ jsx(HostStatusDot, { host }),
+								host.status !== "connected" && /* @__PURE__ */ jsx(MetaChip, {
+									tone: hostStatusTone(host),
+									children: hostStatusText(host, labels)
+								}),
+								badge
+							]
+						}), (testHost || menuItems.length > 0) && /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1 shrink-0",
+							children: [testHost && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: BTN_SECONDARY,
+								onClick: () => void test(),
+								disabled: busy !== null,
+								children: busy === labels.machinesTesting ? labels.machinesTesting : labels.machinesTest
+							}), menuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+								ref: menuButtonRef,
+								icon: "i-ph-dots-three",
+								label: labels.machinesHostActions(host.name),
+								"aria-haspopup": "menu",
+								"aria-expanded": menuOpen,
+								active: menuOpen,
+								disabled: busy !== null,
+								onClick: () => setMenuOpen((open) => !open)
+							}), /* @__PURE__ */ jsx(RowActionsMenu, {
+								open: menuOpen,
+								anchorRef: menuButtonRef,
+								onClose: () => setMenuOpen(false),
+								items: menuItems
+							})] })]
 						})]
 					}),
-					error && /* @__PURE__ */ jsx(OpLine, {
-						kind: "error",
-						children: error
+					host.url && /* @__PURE__ */ jsx(CopyText, {
+						text: host.url,
+						field: true
+					}),
+					facts.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap items-center gap-1.5",
+						children: facts.map((fact) => /* @__PURE__ */ jsx(MetaChip, { children: fact }, fact))
 					})
 				]
-			}) : /* @__PURE__ */ jsx("p", {
-				className: "m-0 text-xs text-[var(--zg-text-muted)]",
-				children: labels.machinesGetAdminPairNext
-			})
-		]
+			})]
+		}), (line || host.error && host.status !== "connected") && /* @__PURE__ */ jsxs("div", {
+			className: "pl-14 pr-4 pb-3.5 space-y-2",
+			children: [line && /* @__PURE__ */ jsx(OpLine, {
+				kind: line.kind,
+				children: line.text
+			}), !line && host.error && host.status !== "connected" && /* @__PURE__ */ jsx(OpLine, {
+				kind: "error",
+				children: host.error
+			})]
+		})]
 	});
 }
 //#endregion

package/dist/machines/ServerMachinesPanel.d.ts

@@ -16,9 +16,9 @@ interface ServerMachinesPanelProps {
   style?: CSSProperties;
 }
 /**
- * Renders a server's machine links and machines.
+ * Renders a server's machine links, where work runs on it, and Add a machine.
  *
- * @param props - The server, `confirm`, `className` and `style`.
+ * @param props - The server, `confirm`, `now`, `className` and `style`.
  */
 declare function ServerMachinesPanel({ host, confirm, now, className, style }: ServerMachinesPanelProps): import("react").JSX.Element;
 //#endregion