zidane-ui 9.1.13 → 9.1.14

package/dist/machines/HostCapabilities.d.ts

@@ -56,8 +56,6 @@ interface CapabilitiesViewProps {
   local?: boolean;
   /** Installs a missing tool there. Absent: a missing tool offers nothing. */
   onInstall?: (name: string) => void;
-  /** This connection may not install (a chat token): Install shows, Admin only. */
-  installRestricted?: boolean;
   /** The tool being installed. */
   installing?: string | null;
   /** How the last install went: its output shows under the tools when it failed. */
@@ -77,6 +75,6 @@ interface CapabilitiesViewProps {
  *
  * @param props - {@link CapabilitiesViewProps}.
  */
-declare function CapabilitiesView({ caps, error, checking, onRecheck, local, onInstall, installRestricted, installing, installed, className, style }: CapabilitiesViewProps): import("react").JSX.Element;
+declare function CapabilitiesView({ caps, error, checking, onRecheck, local, onInstall, installing, installed, className, style }: CapabilitiesViewProps): import("react").JSX.Element;
 //#endregion
 export { CapabilitiesView, CapabilitiesViewProps, CapabilityTags, CapabilityTagsProps, HostCapabilitiesState, useHostCapabilities };

package/dist/machines/HostCapabilities.js

@@ -1,7 +1,7 @@
 import { BTN_SECONDARY } from "../components/button.js";
 import { CopyButton } from "../components/CopyButton.js";
+import { Notice } from "../components/Notice.js";
 import { MetaChip, OpLine } from "../components/Form.js";
-import { Restricted } from "../components/Restricted.js";
 import { machinesError } from "./headless/host.js";
 import { useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
 import { RoutedLink } from "../extensions/links.js";
@@ -14,7 +14,7 @@ import { HOST_TOOLS, capabilityTags, toolInstall } from "zidane/chat/pure";
 * tags on its row in a list, and the full check on its page (OS, tools on
 * PATH, sandbox, environment kinds, what it allows, disk) with Re-check.
 * On a server, a missing tool's row offers its install (`toolInstall`):
-* Install runs it there (`MachinesHost.installTool`, Admin only), a command
+* Install runs it there (`MachinesHost.installTool`), a command
 * that needs root is offered to copy, else the tool's page.
 */
 /**
@@ -129,7 +129,7 @@ const GRID = "m-0 p-0 list-none grid grid-cols-2 gap-px rounded-zg-md overflow-h
 *
 * @param props - {@link CapabilitiesViewProps}.
 */
-function CapabilitiesView({ caps, error, checking, onRecheck, local = false, onInstall, installRestricted = false, installing = null, installed = null, className = "", style }) {
+function CapabilitiesView({ caps, error, checking, onRecheck, local = false, onInstall, installing = null, installed = null, className = "", style }) {
 	const labels = useMachinesLabels();
 	const installAction = (name, label) => {
 		if (!onInstall || !caps || caps.partial) return void 0;
@@ -148,18 +148,13 @@ function CapabilitiesView({ caps, error, checking, onRecheck, local = false, onI
 			className: "text-xs text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] shrink-0",
 			children: labels.machinesCapsInstallPage
 		});
-		return /* @__PURE__ */ jsx(Restricted, {
-			restricted: installRestricted,
-			reason: labels.machinesAdminOnly,
-			inline: true,
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: BTN_SECONDARY,
-				"aria-label": labels.machinesCapsInstallLabel(label),
-				disabled: installing !== null,
-				onClick: () => onInstall(name),
-				children: installing === name ? labels.machinesCapsInstalling : labels.machinesCapsInstall
-			})
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: BTN_SECONDARY,
+			"aria-label": labels.machinesCapsInstallLabel(label),
+			disabled: installing !== null,
+			onClick: () => onInstall(name),
+			children: installing === name ? labels.machinesCapsInstalling : labels.machinesCapsInstall
 		});
 	};
 	const installedLabel = installed ? HOST_TOOLS.find((tool) => tool.name === installed.name)?.label ?? installed.name : "";
@@ -182,9 +177,11 @@ function CapabilitiesView({ caps, error, checking, onRecheck, local = false, onI
 					}), caps.workspace.freeBytes !== void 0 && /* @__PURE__ */ jsx(MetaChip, { children: labels.machinesCapsFree(caps.workspace.freeBytes) })] }),
 					caps?.partial && /* @__PURE__ */ jsx("span", { children: labels.machinesCapsPartial }),
 					!caps && !error && /* @__PURE__ */ jsx("span", { children: labels.machinesCapsChecking }),
-					error && /* @__PURE__ */ jsx("span", {
-						className: "text-zg-danger",
-						children: labels.machinesError(error)
+					error && /* @__PURE__ */ jsx(Notice, {
+						tone: "error",
+						compact: true,
+						detail: error.detail,
+						children: labels.machinesFailed(error.kind)
 					})
 				]
 			}), /* @__PURE__ */ jsx("button", {
@@ -242,33 +239,15 @@ function CapabilitiesView({ caps, error, checking, onRecheck, local = false, onI
 						detail: env.available ? labels.machinesCapsEnvAvailable : labels.machinesCapsNotAvailable,
 						...env.reason ? { title: env.reason } : {}
 					}, env.kind)),
-					!local && /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsx(Fact, {
-							ok: caps.allows.remoteInstalls,
-							icon: "i-ph-download-simple",
-							label: labels.machinesCapsRemoteInstalls
-						}),
-						/* @__PURE__ */ jsx(Fact, {
-							ok: caps.allows.asMachine,
-							icon: "i-ph-hard-drives",
-							label: labels.machinesCapsAsMachine
-						}),
-						/* @__PURE__ */ jsx(Fact, {
-							ok: caps.allows.sync,
-							icon: "i-ph-arrows-clockwise",
-							label: labels.machinesCapsSync
-						}),
-						/* @__PURE__ */ jsx(Fact, {
-							ok: caps.allows.clone,
-							icon: "i-ph-git-branch",
-							label: labels.machinesCapsClone
-						}),
-						/* @__PURE__ */ jsx(Fact, {
-							ok: caps.allows.createFolders,
-							icon: "i-ph-folder-plus",
-							label: labels.machinesCapsCreateFolders
-						})
-					] })
+					!local && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Fact, {
+						ok: caps.allows.asMachine,
+						icon: "i-ph-hard-drives",
+						label: labels.machinesCapsAsMachine
+					}), /* @__PURE__ */ jsx(Fact, {
+						ok: caps.allows.sync,
+						icon: "i-ph-arrows-clockwise",
+						label: labels.machinesCapsSync
+					})] })
 				]
 			})
 		] })]

package/dist/machines/HostSyncPanel.js

@@ -1,10 +1,9 @@
 import { BTN_SECONDARY } from "../components/button.js";
 import { Checkbox, OpLine, SegmentedRow } from "../components/Form.js";
-import { Restricted } from "../components/Restricted.js";
 import { constant, useReadable } from "../chat/headless/store.js";
 import { machinesError } from "./headless/host.js";
-import { shortList, syncBlockedReason } from "./headless/sync.js";
 import { useMachinesConfirm, useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
+import { shortList, syncBlockedReason } from "./headless/sync.js";
 import { useHostCapabilities } from "./HostCapabilities.js";
 import { SyncAccounts } from "./SyncAccounts.js";
 import { SyncOutcomeBadge } from "./SyncOutcomeBadge.js";
@@ -136,140 +135,135 @@ function HostSyncPanel({ host, confirm, className = "", style }) {
 	};
 	const reset = sync?.reset;
 	const push = sync?.push;
-	const restricted = host.scope !== void 0 && host.scope !== "admin";
-	return /* @__PURE__ */ jsx(Restricted, {
-		restricted,
-		reason: labels.machinesAdminOnly,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: `px-3 pb-3 space-y-3 ${className}`.trimEnd(),
-			style,
-			"data-testid": `sync-${host.id}`,
-			children: [
-				/* @__PURE__ */ jsx(SegmentedRow, {
-					label: labels.machinesSyncMode,
-					description: labels.machinesSyncModeDescription(state.device?.name, host.name),
-					value: config.mode,
-					onChange: (mode) => send({ mode }),
-					options: SYNC_MODES.map((mode) => ({
-						value: mode,
-						label: labels.machinesSyncModes[mode]
-					}))
-				}),
-				/* @__PURE__ */ jsx("ul", {
-					className: "m-0 p-0 list-none grid grid-cols-2 gap-1.5",
-					"aria-label": labels.machinesSyncWhat,
-					children: SYNC_CATEGORIES.map((category) => {
-						const on = config.categories.includes(category);
-						const waiting = config.pending.includes(category);
-						const reason = syncBlockedReason(category, caps);
-						const blocked = reason ? labels.machinesSyncBlocked(reason, host.name) : void 0;
-						const info = labels.machinesSyncCategories[category];
-						return /* @__PURE__ */ jsx("li", {
-							className: "min-w-0",
-							children: /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								role: "checkbox",
-								"aria-checked": on,
-								"aria-label": info.label,
-								title: blocked ?? info.description,
-								disabled: Boolean(blocked) && !on || !configure,
-								className: `flex w-full min-w-0 items-center gap-2.5 px-2.5 py-2 rounded-zg-md border text-left cursor-pointer disabled:cursor-default disabled:opacity-zg-disabled transition-colors ${on ? "border-[var(--zg-accent)] bg-[color-mix(in_srgb,var(--zg-accent)_8%,transparent)]" : "border-[var(--zg-hairline)] bg-transparent hover:bg-[var(--zg-row-hover)]"}`,
-								onClick: () => void toggleCategory(category),
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										"aria-hidden": true,
-										className: `${CATEGORY_ICON[category]} text-zg-body shrink-0 ${on ? "text-[var(--zg-accent)]" : "text-[var(--zg-text-muted)]"}`
-									}),
-									/* @__PURE__ */ jsxs("span", {
-										className: "flex-1 min-w-0",
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "block truncate text-xs font-medium text-[var(--zg-text)]",
-											children: info.label
-										}), /* @__PURE__ */ jsx("span", {
-											className: `block truncate text-zg-meta ${waiting || blocked ? "text-zg-warn" : "text-[var(--zg-text-muted)]"}`,
-											children: blocked ?? (waiting ? labels.machinesSyncWaiting : info.description)
-										})]
-									}),
-									/* @__PURE__ */ jsx(Checkbox, { checked: on })
-								]
-							})
-						}, category);
-					})
-				}),
-				config.categories.includes("keys") && /* @__PURE__ */ jsx(SyncAccounts, {
-					host,
-					accounts: state.local.accounts,
-					keys: config.keys,
-					onToggleKey: (provider) => void toggleKey(provider)
-				}),
-				config.categories.includes("mcps") && state.local.stdioMcps.length > 0 && /* @__PURE__ */ jsx(Hint, {
-					icon: "i-ph-terminal",
-					title: state.local.stdioMcps.join(", "),
-					children: labels.machinesSyncStdio(host.name, shortList(state.local.stdioMcps, labels))
-				}),
-				config.categories.includes("extensions") && state.local.localExtensions.length > 0 && /* @__PURE__ */ jsx(Hint, {
-					icon: "i-ph-puzzle-piece",
-					title: state.local.localExtensions.join(", "),
-					children: labels.machinesSyncNotSyncable(shortList(state.local.localExtensions, labels))
-				}),
-				state.conflict && config.mode !== "off" && /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-3",
-					children: [
-						/* @__PURE__ */ jsx(Hint, {
-							icon: "i-ph-arrows-left-right",
-							children: labels.machinesSyncFrom(state.conflict)
-						}),
-						/* @__PURE__ */ jsx("span", { className: "flex-1" }),
-						takeOver && /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `px-3 pb-3 space-y-3 ${className}`.trimEnd(),
+		style,
+		"data-testid": `sync-${host.id}`,
+		children: [
+			/* @__PURE__ */ jsx(SegmentedRow, {
+				label: labels.machinesSyncMode,
+				description: labels.machinesSyncModeDescription(state.device?.name, host.name),
+				value: config.mode,
+				onChange: (mode) => send({ mode }),
+				options: SYNC_MODES.map((mode) => ({
+					value: mode,
+					label: labels.machinesSyncModes[mode]
+				}))
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "m-0 p-0 list-none grid grid-cols-2 gap-1.5",
+				"aria-label": labels.machinesSyncWhat,
+				children: SYNC_CATEGORIES.map((category) => {
+					const on = config.categories.includes(category);
+					const waiting = config.pending.includes(category);
+					const reason = syncBlockedReason(category, caps);
+					const blocked = reason ? labels.machinesSyncBlocked(reason, host.name) : void 0;
+					const info = labels.machinesSyncCategories[category];
+					return /* @__PURE__ */ jsx("li", {
+						className: "min-w-0",
+						children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: BTN_SECONDARY,
-							onClick: () => void takeOverNow(),
-							children: labels.machinesSyncTakeOver
-						})
-					]
-				}),
-				overrides.map((field) => /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-3",
-					children: [
-						/* @__PURE__ */ jsxs(Hint, {
-							icon: "i-ph-pencil-simple",
-							title: labels.machinesSyncEditedOnTitle(host.name),
+							role: "checkbox",
+							"aria-checked": on,
+							"aria-label": info.label,
+							title: blocked ?? info.description,
+							disabled: Boolean(blocked) && !on || !configure,
+							className: `flex w-full min-w-0 items-center gap-2.5 px-2.5 py-2 rounded-zg-md border text-left cursor-pointer disabled:cursor-default disabled:opacity-zg-disabled transition-colors ${on ? "border-[var(--zg-accent)] bg-[color-mix(in_srgb,var(--zg-accent)_8%,transparent)]" : "border-[var(--zg-hairline)] bg-transparent hover:bg-[var(--zg-row-hover)]"}`,
+							onClick: () => void toggleCategory(category),
 							children: [
-								field,
-								" ",
 								/* @__PURE__ */ jsx("span", {
-									className: "opacity-70",
-									children: labels.machinesSyncEditedOn(host.name)
-								})
+									"aria-hidden": true,
+									className: `${CATEGORY_ICON[category]} text-zg-body shrink-0 ${on ? "text-[var(--zg-accent)]" : "text-[var(--zg-text-muted)]"}`
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "block truncate text-xs font-medium text-[var(--zg-text)]",
+										children: info.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: `block truncate text-zg-meta ${waiting || blocked ? "text-zg-warn" : "text-[var(--zg-text-muted)]"}`,
+										children: blocked ?? (waiting ? labels.machinesSyncWaiting : info.description)
+									})]
+								}),
+								/* @__PURE__ */ jsx(Checkbox, { checked: on })
 							]
-						}),
-						/* @__PURE__ */ jsx("span", { className: "flex-1" }),
-						reset && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: BTN_SECONDARY,
-							onClick: () => void act(() => reset(host.id, field)),
-							children: labels.machinesSyncAgain
 						})
-					]
-				}, field)),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 pt-1 border-t border-[var(--zg-hairline)]",
-					children: [/* @__PURE__ */ jsxs("span", {
-						className: "flex-1 min-w-0 inline-flex items-center gap-2 pt-2 text-xs text-[var(--zg-text-muted)]",
-						children: [statusText, /* @__PURE__ */ jsx(SyncOutcomeBadge, { state })]
-					}), config.mode !== "off" && state.connected && state.supported && push && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: `${BTN_SECONDARY} mt-2`,
-						onClick: () => void act(() => push(host.id)),
-						children: labels.machinesSyncPushNow
-					})]
-				}),
-				error && /* @__PURE__ */ jsx(OpLine, {
-					kind: "error",
-					children: error
+					}, category);
 				})
-			]
-		})
+			}),
+			config.categories.includes("keys") && /* @__PURE__ */ jsx(SyncAccounts, {
+				host,
+				accounts: state.local.accounts,
+				keys: config.keys,
+				onToggleKey: (provider) => void toggleKey(provider)
+			}),
+			config.categories.includes("mcps") && state.local.stdioMcps.length > 0 && /* @__PURE__ */ jsx(Hint, {
+				icon: "i-ph-terminal",
+				title: state.local.stdioMcps.join(", "),
+				children: labels.machinesSyncStdio(host.name, shortList(state.local.stdioMcps, labels))
+			}),
+			config.categories.includes("extensions") && state.local.localExtensions.length > 0 && /* @__PURE__ */ jsx(Hint, {
+				icon: "i-ph-puzzle-piece",
+				title: state.local.localExtensions.join(", "),
+				children: labels.machinesSyncNotSyncable(shortList(state.local.localExtensions, labels))
+			}),
+			state.conflict && config.mode !== "off" && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsx(Hint, {
+						icon: "i-ph-arrows-left-right",
+						children: labels.machinesSyncFrom(state.conflict)
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					takeOver && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_SECONDARY,
+						onClick: () => void takeOverNow(),
+						children: labels.machinesSyncTakeOver
+					})
+				]
+			}),
+			overrides.map((field) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsxs(Hint, {
+						icon: "i-ph-pencil-simple",
+						title: labels.machinesSyncEditedOnTitle(host.name),
+						children: [
+							field,
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "opacity-70",
+								children: labels.machinesSyncEditedOn(host.name)
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					reset && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_SECONDARY,
+						onClick: () => void act(() => reset(host.id, field)),
+						children: labels.machinesSyncAgain
+					})
+				]
+			}, field)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 pt-1 border-t border-[var(--zg-hairline)]",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex-1 min-w-0 inline-flex items-center gap-2 pt-2 text-xs text-[var(--zg-text-muted)]",
+					children: [statusText, /* @__PURE__ */ jsx(SyncOutcomeBadge, { state })]
+				}), config.mode !== "off" && state.connected && state.supported && push && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${BTN_SECONDARY} mt-2`,
+					onClick: () => void act(() => push(host.id)),
+					children: labels.machinesSyncPushNow
+				})]
+			}),
+			error && /* @__PURE__ */ jsx(OpLine, {
+				kind: "error",
+				children: error
+			})
+		]
 	});
 }
 //#endregion

package/dist/machines/HostsSection.d.ts

@@ -1,4 +1,5 @@
 import { MachinesConfirm } from "./MachinesProvider.js";
+import { NewChatsServer } from "./ServerAddedCard.js";
 import { CSSProperties } from "react";
 //#region src/machines/HostsSection.d.ts
 /** Props for {@link HostsSection}. */
@@ -7,6 +8,8 @@ interface HostsSectionProps {
   confirm?: MachinesConfirm;
   /** "Now" for the relative dates (screenshots). Default: the clock. */
   now?: number;
+  /** Where new chats start: a server just added offers to be it. Absent: no such switch. */
+  newChats?: NewChatsServer;
   /** Extra classes on the root. */
   className?: string;
   /** Inline styles on the root. */
@@ -17,6 +20,6 @@ interface HostsSectionProps {
  *
  * @param props - `confirm`, `now`, `className` and `style`.
  */
-declare function HostsSection({ confirm, now, className, style }: HostsSectionProps): import("react").JSX.Element;
+declare function HostsSection({ confirm, now, newChats, className, style }: HostsSectionProps): import("react").JSX.Element;
 //#endregion
 export { HostsSection, HostsSectionProps };

package/dist/machines/HostsSection.js

@@ -1,4 +1,5 @@
 import { BTN_LG_PRIMARY } from "../components/button.js";
+import { Notice } from "../components/Notice.js";
 import { ErrorNote, FormCard, FormSection, MetaChip } from "../components/Form.js";
 import { constant, useReadable } from "../chat/headless/store.js";
 import { useMachinesConfirm, useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
@@ -11,9 +12,11 @@ import { CapabilitiesView, CapabilityTags, useHostCapabilities } from "./HostCap
 import { SyncOutcomeBadge } from "./SyncOutcomeBadge.js";
 import { HostSyncPanel, useHostSync } from "./HostSyncPanel.js";
 import { SettingsTutorial } from "../settings/SettingsTutorial.js";
+import { ServerAddedCard } from "./ServerAddedCard.js";
 import { hostOfSettingsFocus } from "./headless/settings-focus.js";
 import { ServerMachinesPanel } from "./ServerMachinesPanel.js";
 import { ServerUpdatePanel } from "./ServerUpdatePanel.js";
+import { TokensPanel } from "./TokensPanel.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useMemo, useRef, useState } from "react";
 //#region src/machines/HostsSection.tsx
@@ -44,7 +47,7 @@ const NO_SAVED = constant({
 *
 * @param props - `confirm`, `now`, `className` and `style`.
 */
-function HostsSection({ confirm, now, className, style }) {
+function HostsSection({ confirm, now, newChats, className, style }) {
 	const host = useMachinesHost();
 	const labels = useMachinesLabels();
 	const providerConfirm = useMachinesConfirm();
@@ -52,6 +55,7 @@ function HostsSection({ confirm, now, className, style }) {
 	const { hosts } = useReadable(host.hosts ?? NO_HOSTS);
 	const registry = useReadable(host.savedHosts?.state ?? NO_SAVED);
 	const [adding, setAdding] = useState(false);
+	const [added, setAdded] = useState(null);
 	/** The host whose page is open; `null`: the list. */
 	const [openId, setOpenId] = useState(null);
 	const open = openId ? hosts.find((h) => h.id === openId) : void 0;
@@ -104,11 +108,19 @@ function HostsSection({ confirm, now, className, style }) {
 				/* @__PURE__ */ jsx(SettingsTutorial, { topic: "hosts" }),
 				adding && /* @__PURE__ */ jsx(AddServerForm, {
 					onCancel: closeAdding,
-					onAdded: async () => {
+					onAdded: async (result) => {
 						closeAdding();
 						await changed();
+						if (!result.host) return;
+						setAdded(result.host);
+						if (newChats && !newChats.hostId) newChats.set(result.host, true);
 					}
 				}),
+				added && /* @__PURE__ */ jsx(ServerAddedCard, {
+					host: added,
+					...newChats ? { newChats } : {},
+					onDone: () => setAdded(null)
+				}),
 				registry.status === "error" && registry.error && /* @__PURE__ */ jsx(ErrorNote, { children: labels.machinesSavedHostsError(registry.error.detail) }),
 				/* @__PURE__ */ jsx(FormSection, {
 					title: labels.machinesHostsTitle,
@@ -161,8 +173,10 @@ function HostListRow({ host, saved, onOpen, now }) {
 						]
 					}), /* @__PURE__ */ jsxs("span", {
 						className: "flex flex-wrap items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx(CapabilityTags, { caps }), !local && host.error && host.status !== "connected" ? /* @__PURE__ */ jsx("span", {
-							className: "text-xs text-zg-danger truncate",
+						children: [/* @__PURE__ */ jsx(CapabilityTags, { caps }), !local && host.error && host.status !== "connected" ? /* @__PURE__ */ jsx(Notice, {
+							tone: "error",
+							compact: true,
+							className: "min-w-0",
 							children: host.error
 						}) : local ? /* @__PURE__ */ jsx("span", {
 							className: "text-xs text-[var(--zg-text-muted)]",
@@ -181,10 +195,11 @@ function HostListRow({ host, saved, onOpen, now }) {
 		})
 	});
 }
-/** A host's page: its overview and actions, what it can do, its sync and machines. */
+/** A host's page: its overview and actions, what it can do, its sync, machines and tokens. */
 function HostDetail({ host, saved, onChanged, onBack, confirm, now }) {
 	const labels = useMachinesLabels();
-	const syncState = useMachinesHost().sync?.state;
+	const machinesHost = useMachinesHost();
+	const syncState = machinesHost.sync?.state;
 	const { state: sync } = useHostSync(host.id);
 	const local = host.kind === "local";
 	const capabilities = useHostCapabilities(host.id, local || host.status === "connected");
@@ -207,7 +222,6 @@ function HostDetail({ host, saved, onChanged, onBack, confirm, now }) {
 			onRecheck: () => void capabilities.recheck(),
 			local,
 			...!local && capabilities.install ? { onInstall: (name) => void capabilities.install(name) } : {},
-			installRestricted: host.scope !== void 0 && host.scope !== "admin",
 			installing: capabilities.installing,
 			installed: capabilities.installed
 		}) })
@@ -281,6 +295,15 @@ function HostDetail({ host, saved, onChanged, onBack, confirm, now }) {
 						...now !== void 0 ? { now } : {}
 					})
 				}) })
+			}),
+			machinesHost.tokens && /* @__PURE__ */ jsx(FormSection, {
+				title: labels.machinesTokensTitle,
+				layout: "cards",
+				children: /* @__PURE__ */ jsx(FormCard, { children: /* @__PURE__ */ jsx(TokensPanel, {
+					host,
+					confirm,
+					...now !== void 0 ? { now } : {}
+				}) })
 			})
 		]
 	});

package/dist/machines/MachinesExplainer.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react";
+//#region src/machines/MachinesExplainer.d.ts
+/** Props for {@link MachinesExplainer}. */
+interface MachinesExplainerProps {
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Renders the picture of this app, the server and its machines, with the sentence that explains them.
+ *
+ * @param props - `className` and `style`.
+ */
+declare function MachinesExplainer({ className, style }: MachinesExplainerProps): import("react").JSX.Element;
+//#endregion
+export { MachinesExplainer, MachinesExplainerProps };

package/dist/machines/MachinesExplainer.js

@@ -0,0 +1,71 @@
+import { useMachinesLabels } from "./MachinesProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/machines/MachinesExplainer.tsx
+/** One place in the picture: its glyph, its name, what it does. */
+function Place({ icon, name, fact }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex-1 min-w-0 flex flex-col items-center gap-1 text-center",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "zg-well inline-flex items-center justify-center size-9 rounded-zg-md text-base text-[var(--zg-text-muted)]",
+				children: /* @__PURE__ */ jsx("span", { className: icon })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-[var(--zg-text)]",
+				children: name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-zg-meta text-[var(--zg-text-muted)] leading-snug",
+				children: fact
+			})
+		]
+	});
+}
+/** The arrow between two places. */
+function Arrow() {
+	return /* @__PURE__ */ jsx("li", {
+		"aria-hidden": true,
+		className: "shrink-0 pt-2.5 text-[var(--zg-text-subtle)]",
+		children: /* @__PURE__ */ jsx("span", { className: "i-ph-arrow-right text-zg-ui" })
+	});
+}
+/**
+* Renders the picture of this app, the server and its machines, with the sentence that explains them.
+*
+* @param props - `className` and `style`.
+*/
+function MachinesExplainer({ className = "", style }) {
+	const labels = useMachinesLabels();
+	return /* @__PURE__ */ jsxs("div", {
+		className: `space-y-3 ${className}`.trimEnd(),
+		style,
+		children: [/* @__PURE__ */ jsxs("ol", {
+			className: "m-0 p-0 list-none flex items-start gap-1",
+			children: [
+				/* @__PURE__ */ jsx(Place, {
+					icon: "i-ph-laptop",
+					name: labels.machinesPictureApp,
+					fact: labels.machinesPictureAppFact
+				}),
+				/* @__PURE__ */ jsx(Arrow, {}),
+				/* @__PURE__ */ jsx(Place, {
+					icon: "i-ph-hard-drives",
+					name: labels.machinesPictureServer,
+					fact: labels.machinesPictureServerFact
+				}),
+				/* @__PURE__ */ jsx(Arrow, {}),
+				/* @__PURE__ */ jsx(Place, {
+					icon: "i-ph-desktop-tower",
+					name: labels.machinesPictureMachines,
+					fact: labels.machinesPictureMachinesFact
+				})
+			]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "m-0 text-xs text-[var(--zg-text-muted)] text-center zg-balance",
+			children: labels.machinesExplain
+		})]
+	});
+}
+//#endregion
+export { MachinesExplainer };