zidane-ui 9.1.13 → 9.1.16

package/dist/machines/ServerMachinesPanel.js

@@ -1,40 +1,37 @@
 import { IconButton } from "../components/IconButton.js";
 import { BTN_PRIMARY, BTN_SECONDARY } from "../components/button.js";
-import { CopyButton } from "../components/CopyButton.js";
 import { FIELD_LABEL_CLASS, MetaChip, OpLine } from "../components/Form.js";
-import { Restricted } from "../components/Restricted.js";
+import { Popover } from "../components/floating/Popover.js";
 import { constant, useReadable } from "../chat/headless/store.js";
 import { machinesError } from "./headless/host.js";
 import { useMachinesConfirm, useMachinesHost, useMachinesLabels, usePermitted } from "./MachinesProvider.js";
+import { AddMachineDialog, useAddMachine } from "./AddMachineDialog.js";
 import { linkStateText } from "./headless/messages.js";
+import { MachinesExplainer } from "./MachinesExplainer.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { clockOrDateText, clockText, isValidMachineName, lastSeenText, machineSetupCommand, machineVersionDiffers } from "zidane/chat/pure";
+import { clockOrDateText, machineVersionDiffers } from "zidane/chat/pure";
 //#region src/machines/ServerMachinesPanel.tsx
 /**
 * A server's machines (docs/MACHINES.md § Client UI):
 *
-* - **Share this computer** (with the host's `links.shareStart`): a name
-*   (default: this computer's) and the folders the server may use, picked
-*   with the host's folder dialog; a machine token pasted when the server
-*   can't mint one.
+* - **Share this computer** (with the host's `links`): its state, Stop
+*   sharing, and Share… which opens Add a machine on its This computer tab.
 * - **Use <server> as a machine** (`local@<server>`), offered when the server
 *   lends itself.
-* - **Its machines** (with the host's `machines`): name, online or offline
-*   since when, version (flagged when it differs from the main server's),
-*   GPUs, folders, last seen; forget asks first.
-* - **Add a machine** (with the host's `machines.invite`, an admin token): an
-*   optional name (empty: the machine gives its own), then a one-time join
-*   code shown as the command to run on the machine.
+* - **Where work runs**: the server itself first (its own folders), then its
+*   machines: online or offline since when, GPUs, folders, the version when
+*   it differs from the server's. Each row has New chat (the host's
+*   `newChat`); a machine has Forget, which asks first.
+* - **Add a machine** (`useAddMachine`): the dialog that makes the join
+*   command and waits until the machine joins. With no machines yet, the
+*   list shows what a server and its machines are; after that, How it works
+*   shows the same picture.
 */
 /** "14:05" today, else a date, against `now` or the clock. */
 function sinceText(at, now) {
 	return clockOrDateText(at, now ?? Date.now());
 }
-/** "seen 5 min ago", against `now` or the clock. */
-function seenText(lastSeen, now) {
-	return lastSeenText(lastSeen, now ?? Date.now());
-}
 const NO_LINKS = constant({
 	shares: [],
 	uses: []
@@ -71,150 +68,149 @@ function RowIcon({ icon }) {
 		children: /* @__PURE__ */ jsx("span", { className: icon })
 	});
 }
-/** One machine: its state, version, GPUs, folders and last seen. */
-function MachineRow({ machine, serverVersion, now, onForget }) {
+/** A place work runs (the server, or a machine): its glyph, its name and facts, its actions. */
+function PlaceRow({ icon, testId, title, facts, actions }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2.5 text-xs py-1",
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ jsx(RowIcon, { icon }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0 space-y-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1.5 min-w-0 flex-wrap",
+					children: title
+				}), facts]
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 flex items-center gap-1",
+				children: actions
+			})
+		]
+	});
+}
+/** One machine: its state, GPUs, folders, its version when it differs from the server's. */
+function MachineRow({ machine, serverVersion, now, onNewChat, onForget }) {
 	const labels = useMachinesLabels();
 	const online = machine.status === "online";
 	const skew = machineVersionDiffers(machine.version, serverVersion);
 	const gpus = machine.capabilities?.gpu ?? [];
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-start gap-2.5 text-xs",
-		"data-testid": `machine-${machine.name}`,
-		children: [
+	const [first, ...more] = machine.roots.map((root) => root.path);
+	return /* @__PURE__ */ jsx(PlaceRow, {
+		icon: "i-ph-desktop-tower",
+		testId: `machine-${machine.name}`,
+		title: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				className: "i-ph-desktop-tower text-zg-ui text-[var(--zg-text-muted)] shrink-0 mt-0.5"
+				className: "font-medium text-[var(--zg-text)]",
+				children: machine.name
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 min-w-0 space-y-0.5",
+			/* @__PURE__ */ jsx(MetaChip, {
+				tone: online ? "success" : "warn",
+				children: online || machine.lastSeen === void 0 ? labels.machinesStatus(machine.status) : labels.machinesOfflineSince(sinceText(machine.lastSeen, now))
+			}),
+			gpus.map((gpu) => /* @__PURE__ */ jsxs(MetaChip, {
+				tone: "info",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5 min-w-0 flex-wrap",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "font-medium text-[var(--zg-text)]",
-								children: machine.name
-							}),
-							/* @__PURE__ */ jsx(MetaChip, {
-								tone: online ? "success" : "warn",
-								children: online || machine.lastSeen === void 0 ? labels.machinesStatus(machine.status) : labels.machinesOfflineSince(sinceText(machine.lastSeen, now))
-							}),
-							machine.version && /* @__PURE__ */ jsxs(MetaChip, {
-								tone: skew ? "warn" : "muted",
-								children: [skew && /* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									className: "i-ph-warning"
-								}), labels.machinesVersion(machine.version)]
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-[var(--zg-text-muted)] whitespace-nowrap",
-								children: seenText(machine.lastSeen, now)
-							})
-						]
-					}),
-					skew && serverVersion && /* @__PURE__ */ jsx("div", {
-						className: "text-[var(--zg-text-muted)]",
-						children: labels.machinesVersionDiffers(machine.version, serverVersion)
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "i-ph-graphics-card"
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "truncate text-[var(--zg-text-muted)]",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "sr-only",
-							children: [labels.machinesFolders, " "]
-						}), machine.roots.map((root) => root.path).join(", ")]
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [labels.machinesGpus, " "]
 					}),
-					gpus.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1 min-w-0 flex-wrap",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "sr-only",
-							children: [labels.machinesGpus, " "]
-						}), gpus.map((gpu) => /* @__PURE__ */ jsx(MetaChip, {
-							tone: "info",
-							children: gpu
-						}, gpu))]
-					})
+					gpu
 				]
-			}),
-			onForget && /* @__PURE__ */ jsx(IconButton, {
-				icon: "i-ph-trash",
-				label: labels.machinesForgetLabel(machine.name),
-				title: labels.machinesForget,
-				size: "sm",
-				onClick: onForget
+			}, gpu)),
+			skew && machine.version && /* @__PURE__ */ jsxs(MetaChip, {
+				tone: "warn",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "i-ph-warning"
+				}), labels.machinesVersion(machine.version)]
 			})
-		]
+		] }),
+		facts: /* @__PURE__ */ jsxs(Fragment, { children: [first !== void 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5 min-w-0 text-[var(--zg-text-muted)]",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: [labels.machinesFolders, " "]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate font-mono",
+					title: machine.roots.map((root) => root.path).join("\n"),
+					children: first
+				}),
+				more.length > 0 && /* @__PURE__ */ jsx(MetaChip, {
+					tone: "muted",
+					children: labels.machinesFoldersMore(more.length)
+				})
+			]
+		}), skew && serverVersion && /* @__PURE__ */ jsx("div", {
+			className: "text-[var(--zg-text-muted)]",
+			children: labels.machinesVersionDiffers(machine.version, serverVersion)
+		})] }),
+		actions: /* @__PURE__ */ jsxs(Fragment, { children: [onNewChat && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: BTN_SECONDARY,
+			"aria-label": labels.machinesNewChatLabel(machine.name),
+			onClick: onNewChat,
+			children: labels.machinesNewChat
+		}), onForget && /* @__PURE__ */ jsx(IconButton, {
+			icon: "i-ph-trash",
+			label: labels.machinesForgetLabel(machine.name),
+			title: labels.machinesForget,
+			size: "sm",
+			onClick: onForget
+		})] })
 	});
 }
-/** A join code made for a new machine: the command to run there, a copy button, when it stops working. */
-function InviteCard({ host, invite, onDone }) {
+/** How it works: the explainer picture, behind a link. */
+function HowItWorks() {
 	const labels = useMachinesLabels();
-	const command = machineSetupCommand(invite.join);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "zg-well rounded-zg-md p-3 space-y-2",
-		role: "status",
-		"aria-label": labels.machinesInviteTitle(host.name),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: FIELD_LABEL_CLASS,
-				children: labels.machinesInviteCommand
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 min-w-0",
-				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.machinesInviteCopy
-				})]
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "m-0 text-xs text-[var(--zg-text-muted)]",
-				children: labels.machinesInviteExpires(clockText(invite.expiresAt))
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "m-0 text-xs text-[var(--zg-text-muted)]",
-				children: labels.machinesInviteHint
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "flex justify-end",
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: BTN_SECONDARY,
-					onClick: onDone,
-					children: labels.machinesInviteDone
-				})
-			})
-		]
+	return /* @__PURE__ */ jsx(Popover, {
+		ariaLabel: labels.machinesHowItWorks,
+		side: "bottom",
+		align: "end",
+		width: 360,
+		trigger: (triggerProps) => /* @__PURE__ */ jsxs("button", {
+			...triggerProps,
+			type: "button",
+			className: "inline-flex items-center gap-1 border-0 bg-transparent p-0 text-xs text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] cursor-pointer",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "i-ph-question"
+			}), labels.machinesHowItWorks]
+		}),
+		children: () => /* @__PURE__ */ jsx(MachinesExplainer, { className: "p-3" })
 	});
 }
 /**
-* 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`.
 */
 function ServerMachinesPanel({ host, confirm, now, className = "", style }) {
 	const labels = useMachinesLabels();
 	const machinesHost = useMachinesHost();
 	const providerConfirm = useMachinesConfirm();
 	const ask = confirm ?? providerConfirm;
-	const { links, machines, pickFolder } = machinesHost;
+	const { links, machines, newChat } = machinesHost;
 	const canList = usePermitted("machines.list");
 	const canForget = usePermitted("machines.forget");
 	const canInvite = usePermitted("machines.invite");
-	const inviteNeedsAdmin = host.scope !== void 0 && host.scope !== "admin";
+	const openLayer = useAddMachine();
+	const [inlineAdd, setInlineAdd] = useState(null);
+	const canAdd = Boolean(machines?.invite && canInvite || links?.shareStart);
+	const openAdd = openLayer ?? (canAdd ? (_hostId, options) => setInlineAdd(options?.tab ?? "another") : void 0);
 	const list = machines && canList ? machines.list(host.id) : null;
 	const linkState = useReadable(links ? links.state : NO_LINKS);
 	const listState = useReadable(list ? list.state : NO_LIST);
 	const share = linkState.shares.find((entry) => entry.hostId === host.id);
 	const use = linkState.uses.find((entry) => entry.hostId === host.id);
-	const [form, setForm] = useState(null);
 	const [busy, setBusy] = useState(null);
 	const [line, setLine] = useState(null);
-	const [invite, setInvite] = useState(null);
-	const [inviteForm, setInviteForm] = useState(null);
-	const inviteName = inviteForm?.name.trim() ?? "";
-	const inviteNameInvalid = inviteName !== "" && !isValidMachineName(inviteName);
 	const reload = async () => {
 		await Promise.all([links?.refresh(), list?.refresh()]);
 	};
@@ -230,36 +226,16 @@ function ServerMachinesPanel({ host, confirm, now, className = "", style }) {
 				kind: "error",
 				text: result.message
 			});
-			return result;
 		} catch (err) {
 			setLine({
 				kind: "error",
 				text: labels.machinesError(machinesError("read", err))
 			});
-			return null;
 		} finally {
 			setBusy(null);
 			reload();
 		}
 	};
-	const addFolder = async () => {
-		const path = await pickFolder?.();
-		if (path && form) setForm({
-			...form,
-			roots: form.roots.includes(path) ? form.roots : [...form.roots, path]
-		});
-	};
-	const startShare = async () => {
-		const start = links?.shareStart;
-		if (!form || !start) return;
-		const name = form.name.trim();
-		const result = await act(labels.machinesSharing(host.name), () => start(host.id, name, form.roots, form.token.trim() || void 0), labels.machinesShared(form.roots.join(", "), host.name));
-		if (result?.ok) setForm(null);
-		else if (result && !result.ok && result.needsToken) setForm({
-			...form,
-			needsToken: true
-		});
-	};
 	const forget = async (machine) => {
 		const drop = machines?.forget;
 		if (!drop) return;
@@ -275,34 +251,16 @@ function ServerMachinesPanel({ host, confirm, now, className = "", style }) {
 		}));
 		reload();
 	};
-	const makeInvite = machines?.invite;
-	const addMachine = async () => {
-		if (!makeInvite || inviteNameInvalid) return;
-		setBusy(labels.machinesInviteCreating);
-		setLine(null);
-		setInvite(null);
-		try {
-			setInvite(await makeInvite(host.id, inviteName ? { name: inviteName } : {}));
-			setInviteForm(null);
-		} catch (err) {
-			const error = machinesError("invite", err);
-			setLine({
-				kind: "error",
-				text: error.forbidden ? labels.machinesInviteNeedsAdmin : labels.machinesError(error)
-			});
-		} finally {
-			setBusy(null);
-		}
-	};
-	const shareStart = links?.shareStart;
 	const shareStop = links?.shareStop;
 	const startUsing = links?.useServer;
+	const canShare = Boolean(links?.shareStart);
+	const empty = listState.status === "ready" && listState.machines.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `px-3 pb-3 space-y-3 ${className}`.trimEnd(),
 		style,
 		"data-testid": `machines-${host.id}`,
 		children: [
-			links && (shareStart || share) && /* @__PURE__ */ jsx(ActionRow, {
+			links && (canShare || share) && /* @__PURE__ */ jsx(ActionRow, {
 				icon: "i-ph-laptop",
 				label: labels.machinesShareTitle(host.name),
 				status: share ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -325,99 +283,14 @@ function ServerMachinesPanel({ host, confirm, now, className = "", style }) {
 					disabled: busy !== null,
 					onClick: () => void act(labels.machinesStopping, () => shareStop(host.id), ""),
 					children: labels.machinesShareStop
-				}) : form ? void 0 : /* @__PURE__ */ jsx("button", {
+				}) : openAdd && canShare && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: BTN_SECONDARY,
 					disabled: busy !== null,
-					onClick: () => setForm({
-						name: "",
-						roots: [],
-						token: "",
-						needsToken: false
-					}),
+					onClick: () => openAdd(host.id, { tab: "this" }),
 					children: labels.machinesShareOpen
 				})
 			}),
-			form && shareStart && /* @__PURE__ */ jsxs("form", {
-				className: "space-y-2",
-				"aria-label": labels.machinesShareForm,
-				onSubmit: (event) => {
-					event.preventDefault();
-					startShare();
-				},
-				children: [
-					/* @__PURE__ */ jsx("label", {
-						className: "block text-xs text-[var(--zg-text-muted)] mb-1",
-						htmlFor: `machine-name-${host.id}`,
-						children: labels.machinesShareName(host.name)
-					}),
-					/* @__PURE__ */ jsx("input", {
-						id: `machine-name-${host.id}`,
-						className: "zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled",
-						placeholder: labels.machinesShareNamePlaceholder,
-						value: form.name,
-						maxLength: 64,
-						onChange: (event) => setForm({
-							...form,
-							name: event.target.value
-						})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "block text-xs text-[var(--zg-text-muted)] mb-1",
-						children: labels.machinesShareFolders
-					}),
-					/* @__PURE__ */ jsx("ul", {
-						className: "m-0 p-0 list-none space-y-1",
-						children: form.roots.map((root) => /* @__PURE__ */ jsxs("li", {
-							className: "flex items-center gap-2 text-xs",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "flex-1 truncate",
-								children: root
-							}), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: BTN_SECONDARY,
-								onClick: () => setForm({
-									...form,
-									roots: form.roots.filter((r) => r !== root)
-								}),
-								children: labels.machinesRemove
-							})]
-						}, root))
-					}),
-					pickFolder && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: BTN_SECONDARY,
-						onClick: () => void addFolder(),
-						children: labels.machinesShareAddFolder
-					}),
-					form.needsToken && /* @__PURE__ */ jsx("input", {
-						"aria-label": labels.machinesShareToken,
-						type: "password",
-						autoComplete: "off",
-						className: "zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled",
-						placeholder: labels.machinesShareTokenPlaceholder,
-						value: form.token,
-						onChange: (event) => setForm({
-							...form,
-							token: event.target.value
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex justify-end gap-2",
-						children: [/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: BTN_SECONDARY,
-							onClick: () => setForm(null),
-							children: labels.machinesCancel
-						}), /* @__PURE__ */ jsx("button", {
-							type: "submit",
-							className: BTN_PRIMARY,
-							disabled: busy !== null || form.roots.length === 0,
-							children: labels.machinesShareStart
-						})]
-					})
-				]
-			}),
 			links && (startUsing || use) && /* @__PURE__ */ jsx(ActionRow, {
 				icon: "i-ph-hard-drives",
 				label: labels.machinesUseTitle(host.name),
@@ -442,92 +315,80 @@ function ServerMachinesPanel({ host, confirm, now, className = "", style }) {
 					children: labels.machinesUse
 				}))
 			}),
+			inlineAdd && /* @__PURE__ */ jsx(AddMachineDialog, {
+				hostId: host.id,
+				tab: inlineAdd,
+				onClose: () => setInlineAdd(null),
+				className: "!w-full !max-w-none"
+			}),
 			list ? /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1.5",
+				className: "space-y-1",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
+						className: "flex items-center gap-3",
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								className: `${FIELD_LABEL_CLASS} flex-1`,
 								children: labels.machinesListTitle(host.name)
 							}),
-							listState.machines.length === 0 && !listState.error && /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-[var(--zg-text-subtle)]",
-								children: labels.machinesListEmpty
-							}),
-							makeInvite && (inviteNeedsAdmin || canInvite) && /* @__PURE__ */ jsx(Restricted, {
-								restricted: inviteNeedsAdmin,
-								reason: labels.machinesAdminOnly,
-								inline: true,
-								children: /* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: BTN_SECONDARY,
-									disabled: busy !== null || inviteForm !== null,
-									onClick: () => {
-										setInvite(null);
-										setInviteForm({ name: "" });
-									},
-									children: labels.machinesInviteOpen
-								})
-							})
-						]
-					}),
-					inviteForm && makeInvite && /* @__PURE__ */ jsxs("form", {
-						className: "space-y-2",
-						"aria-label": labels.machinesInviteForm,
-						onSubmit: (event) => {
-							event.preventDefault();
-							addMachine();
-						},
-						children: [
-							/* @__PURE__ */ jsx("label", {
-								className: "block text-xs text-[var(--zg-text-muted)] mb-1",
-								htmlFor: `machine-invite-name-${host.id}`,
-								children: labels.machinesInviteName
-							}),
-							/* @__PURE__ */ jsx("input", {
-								id: `machine-invite-name-${host.id}`,
-								className: "zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled",
-								placeholder: labels.machinesInviteNamePlaceholder,
-								value: inviteForm.name,
-								maxLength: 64,
-								"aria-invalid": inviteNameInvalid,
-								...inviteNameInvalid ? { "aria-describedby": `machine-invite-rule-${host.id}` } : {},
-								onChange: (event) => setInviteForm({ name: event.target.value })
-							}),
-							inviteNameInvalid && /* @__PURE__ */ jsx("p", {
-								id: `machine-invite-rule-${host.id}`,
-								className: "m-0 text-xs text-[var(--zg-danger)]",
-								children: labels.machinesInviteNameRule
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "flex justify-end gap-2",
-								children: [/* @__PURE__ */ jsx("button", {
-									type: "button",
-									className: BTN_SECONDARY,
-									onClick: () => setInviteForm(null),
-									children: labels.machinesCancel
-								}), /* @__PURE__ */ jsx("button", {
-									type: "submit",
-									className: BTN_PRIMARY,
-									disabled: busy !== null || inviteNameInvalid,
-									children: labels.machinesInviteCreate
-								})]
+							!empty && /* @__PURE__ */ jsx(HowItWorks, {}),
+							openAdd && !empty && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: BTN_SECONDARY,
+								onClick: () => openAdd(host.id),
+								children: labels.machinesInviteOpen
 							})
 						]
 					}),
-					invite && /* @__PURE__ */ jsx(InviteCard, {
-						host,
-						invite,
-						onDone: () => setInvite(null)
+					/* @__PURE__ */ jsx(PlaceRow, {
+						icon: "i-ph-hard-drives",
+						testId: `machine-server-${host.id}`,
+						title: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium text-[var(--zg-text)]",
+							children: host.name
+						}), /* @__PURE__ */ jsx(MetaChip, {
+							tone: "muted",
+							children: labels.machinesServerBadge
+						})] }),
+						facts: /* @__PURE__ */ jsx("div", {
+							className: "text-[var(--zg-text-muted)]",
+							children: labels.machinesServerRowHint
+						}),
+						actions: newChat && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: BTN_SECONDARY,
+							"aria-label": labels.machinesNewChatLabel(host.name),
+							onClick: () => newChat(host.id),
+							children: labels.machinesNewChat
+						})
 					}),
 					listState.machines.map((machine) => /* @__PURE__ */ jsx(MachineRow, {
 						machine,
 						serverVersion: host.serverVersion,
 						now,
+						...newChat ? { onNewChat: () => newChat(host.id, machine.name) } : {},
 						...machines?.forget && canForget ? { onForget: () => void forget(machine) } : {}
 					}, machine.id)),
+					empty && /* @__PURE__ */ jsxs("div", {
+						className: "zg-well rounded-zg-lg p-4 mt-2 space-y-3",
+						"data-testid": `machines-empty-${host.id}`,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "text-xs font-medium text-[var(--zg-text)] text-center",
+								children: labels.machinesEmptyTitle(host.name)
+							}),
+							/* @__PURE__ */ jsx(MachinesExplainer, {}),
+							openAdd && /* @__PURE__ */ jsx("div", {
+								className: "flex justify-center",
+								children: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: BTN_PRIMARY,
+									onClick: () => openAdd(host.id),
+									children: labels.machinesInviteOpen
+								})
+							})
+						]
+					}),
 					listState.error && /* @__PURE__ */ jsx(OpLine, {
 						kind: "error",
 						children: labels.machinesError(listState.error)