super-dsh 0.1.6 → 0.1.9

package/client/index.js

@@ -294,7 +294,7 @@ function coerceAgents(raw) {
 			key,
 			label: typeof label === "string" ? label : FALLBACK_LABELS[key] ?? key,
 			path,
-			machine: typeof machine === "string" ? machine : "local",
+			machine: typeof machine === "string" && machine !== "" ? machine : void 0,
 			ready: entry.ready === true,
 			failed: entry.failed === true
 		});
@@ -308,7 +308,8 @@ function rosterFromGlobal() {
 }
 /** Normalize the current mount root: `/omp` and `/omp/` are the same page. */
 function currentMountPath() {
-	const pathname = typeof location === "undefined" ? "/" : location.pathname;
+	const location$1 = globalThis.location;
+	const pathname = location$1 === void 0 ? "/" : location$1.pathname;
 	if (pathname === "" || pathname === "/") return "/";
 	return pathname.endsWith("/") ? pathname : `${pathname}/`;
 }
@@ -343,78 +344,288 @@ async function fetchRoster() {
 }
 
 //#endregion
-//#region src/client/machines-store.ts
-/** Storage slot for the ledger (v1 shape; bump the suffix on breaking edits). */
-const STORAGE_KEY = "superd-hub.machines.v1";
+//#region src/client/mesh-api.ts
 /**
-* The self row is DERIVED, never stored: this machine's label tracks the
-* product copy and its URL tracks the serving origin on every load. Only
-* remote machines persist.
+* Machine-mesh data access for the Hub machines panel (mesh P1, Task 5):
+* the client half of `/api/superd/machines` (host side: mesh-rpc.ts) —
+* same-origin fetch behind the standard browser-trust + cookie fence, the
+* roster face's house style (`credentials: 'same-origin'`). The localStorage
+* ledger era (machines-store.ts, retired with this module) ended: the hub's
+* registry is the single source of truth, this file only fetches it and
+* coerces the wire answer into row views.
+*
+* Node-safe by construction — no DOM, no react, no @deepseek-ai imports —
+* so the host tsc emits it to `dist/client/mesh-api.js` and
+* test/client-mesh-view.test.mjs runs the pure halves (coercion, token-URL
+* pre-check) under `node --test` without jsdom: the switch-core/toast-core
+* precedent in reverse (pure logic kept beside the fetch wrappers, all under
+* src/client). No fetch happens at import time.
+*
+* @module superd-hub/client/mesh-api
+*/
+/**
+* Base path of the mesh machines API — the client-side spelling of the
+* host's `MESH_API_BASE` (mesh-rpc.ts). Duplicated deliberately: importing
+* the host module would drag its node:fs-backed dependencies into the
+* browser bundle; a path literal cannot drift silently because the mesh-rpc
+* route registration and this file are reviewed together.
 */
-function selfMachine() {
+const MESH_API_BASE = "/api/superd/machines";
+/** The statuses the wire may carry; anything else coerces to `'pending'`. */
+const STATUSES = [
+	"pending",
+	"reachable",
+	"unreachable",
+	"auth-expired"
+];
+/** Coerce the self block; a shape without a non-empty string id + string label is simply absent. */
+function coerceSelf(raw) {
+	if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return void 0;
+	const { id, label } = raw;
+	if (typeof id !== "string" || id === "" || typeof label !== "string") return void 0;
 	return {
-		id: "self",
-		name: "local",
-		label: "This machine",
-		url: typeof location === "undefined" ? "" : location.origin,
-		self: true,
-		addedAt: 0
+		id,
+		label
 	};
 }
 /**
-* Read the ledger; a missing or unreadable store resets to the self row.
+* Coerce a raw GET body into the panel's view list. Any bad shape degrades
+* to the empty list (rows dropped individually, self dropped as a block) —
+* the UI never crashes on a malformed answer.
 *
-* @returns the machines: the derived self row first, then the stored remotes.
+* @param raw - the parsed JSON body (or anything else the wire produced).
+* @returns self (when usable) + the coerced remote rows.
 */
-function loadMachines() {
-	const remotes = readStoredRemotes();
-	return [selfMachine(), ...remotes];
+function coerceMachineList(raw) {
+	if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return { machines: [] };
+	const record = raw;
+	const self = coerceSelf(record.self);
+	const machines = [];
+	if (Array.isArray(record.machines)) for (const entry of record.machines) {
+		if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
+		const row = entry;
+		if (typeof row.id !== "string" || row.id === "") continue;
+		if (typeof row.name !== "string" || row.name === "") continue;
+		if (typeof row.origin !== "string" || row.origin === "") continue;
+		const status = typeof row.status === "string" && STATUSES.includes(row.status) ? row.status : "pending";
+		const base = {
+			id: row.id,
+			name: row.name,
+			label: typeof row.label === "string" && row.label !== "" ? row.label : row.name,
+			origin: row.origin,
+			status,
+			self: self !== void 0 && row.id === self.id
+		};
+		const withProbe = typeof row.lastProbeAt === "number" ? {
+			...base,
+			lastProbeAt: row.lastProbeAt
+		} : base;
+		machines.push(typeof row.versionWarning === "string" && row.versionWarning !== "" ? {
+			...withProbe,
+			versionWarning: row.versionWarning
+		} : withProbe);
+	}
+	return self === void 0 ? { machines } : {
+		self,
+		machines
+	};
 }
-/** Parse the stored remote machines; storage failures degrade to none. */
-function readStoredRemotes() {
-	if (typeof localStorage === "undefined") return [];
-	let parsed;
+/**
+* The version-warning chip for one machine row (I2): present EXACTLY when the
+* coerced row carries a `versionWarning` — the Hub machines panel renders
+* the chip iff this returns a value. Kept here beside the coercion so the
+* presence contract stays unit-testable without jsdom (the HubPage seat is
+* a one-line consumer following the existing chip patterns).
+*/
+function machineVersionChip(machine) {
+	return machine.versionWarning === void 0 ? void 0 : { text: machine.versionWarning };
+}
+/** Read a non-2xx body's `{error}` message; degrade to the bare status line. */
+async function errorText(response) {
 	try {
-		const raw = localStorage.getItem(STORAGE_KEY);
-		if (raw === null) return [];
-		parsed = JSON.parse(raw);
+		const body = await response.json();
+		if (typeof body?.error === "string" && body.error !== "") return body.error;
+	} catch {}
+	return `HTTP ${response.status}`;
+}
+/**
+* GET the machine list (self + remotes).
+*
+* @returns the coerced list — a malformed body degrades to the empty list, never a throw.
+* @throws when the request fails or the face answers non-2xx.
+*/
+async function fetchMachines() {
+	const response = await fetch(MESH_API_BASE, { credentials: "same-origin" });
+	if (!response.ok) throw new Error(await errorText(response));
+	return coerceMachineList(await response.json().catch(() => void 0));
+}
+/**
+* POST a pairing `{name, label?, tokenUrl}` (label omitted → the server
+* collapses it to the name).
+*
+* @throws Error(body.error) when the face answers non-2xx — the message is
+* mesh-link's own, already token-redacted.
+*/
+async function addMachine(input) {
+	const body = {
+		name: input.name,
+		tokenUrl: input.tokenUrl
+	};
+	if (typeof input.label === "string" && input.label !== "") body.label = input.label;
+	const response = await fetch(MESH_API_BASE, {
+		credentials: "same-origin",
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify(body)
+	});
+	if (!response.ok) throw new Error(await errorText(response));
+}
+/**
+* DELETE one remote row by id (`{removed: boolean}` answers even for
+* unknown ids — a false removal is a reload, not an error).
+*
+* @throws Error(body.error) on a non-2xx answer.
+*/
+async function removeMachine(id) {
+	const response = await fetch(`${MESH_API_BASE}?id=${encodeURIComponent(id)}`, {
+		credentials: "same-origin",
+		method: "DELETE"
+	});
+	if (!response.ok) throw new Error(await errorText(response));
+}
+/**
+* POST `{op: 'reprobe', id}` — a fresh probe of one remote; the outcome
+* (even unreachable/auth-expired) lands in the status table server-side, so
+* the caller reloads rather than interpreting the probe body.
+*
+* @throws Error(body.error) on a non-2xx answer (the op itself failed).
+*/
+async function reprobeMachine(id) {
+	const response = await fetch(MESH_API_BASE, {
+		credentials: "same-origin",
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify({
+			op: "reprobe",
+			id
+		})
+	});
+	if (!response.ok) throw new Error(await errorText(response));
+}
+/**
+* The standing cadence note (D18): machine status refresh rides the hub's
+* 5-minute sweep — the panel renders this verbatim beside its live-fetch
+* control. English copy to match the DSH UI.
+*/
+const AUTO_REFRESH_NOTE = "auto-refreshes every 5 min";
+/**
+* The per-machine last-fetch line, shaped from the row's `lastProbeAt`
+* (the hub's status table stamp — mesh-rpc joins it on every GET).
+* Pure by design (the UI passes its own `now`): headless-testable without
+* jsdom, same presence contract as {@link machineVersionChip} — absent or
+* non-finite stamp means "never probed" and the panel omits the line.
+*
+* @param lastProbeAt - epoch ms of the machine's last recorded probe.
+* @param now - epoch ms the panel renders at.
+* @returns "Updated 2m ago" / "Updated just now" / … , or undefined.
+*/
+function lastFetchLabel(lastProbeAt, now) {
+	if (typeof lastProbeAt !== "number" || !Number.isFinite(lastProbeAt)) return void 0;
+	const seconds = Math.max(0, Math.floor((now - lastProbeAt) / 1e3));
+	if (seconds < 60) return "Updated just now";
+	if (seconds < 3600) return `Updated ${Math.floor(seconds / 60)}m ago`;
+	if (seconds < 86400) return `Updated ${Math.floor(seconds / 3600)}h ago`;
+	return `Updated ${Math.floor(seconds / 86400)}d ago`;
+}
+/**
+* Client-side pre-check before a pairing submit: a parseable absolute
+* http(s) URL carrying a non-empty `token` query param. The server re-parses
+* authoritatively (mesh-link's parseTokenUrl); this only keeps obviously
+* dead drafts off the wire.
+*
+* @param input - the raw token-URL draft (trim before calling).
+* @returns whether the draft is submit-shaped.
+*/
+function validTokenUrl(input) {
+	if (typeof input !== "string" || input === "") return false;
+	let url;
+	try {
+		url = new URL(input);
 	} catch {
-		return [];
+		return false;
 	}
-	if (!Array.isArray(parsed)) return [];
-	const list = [];
-	for (const entry of parsed) {
-		if (typeof entry !== "object" || entry === null) continue;
-		const { id, name, label, url, self, addedAt } = entry;
-		if (self === true) continue;
-		if (typeof id !== "string" || typeof name !== "string" || typeof url !== "string") continue;
-		list.push({
-			id,
-			name,
-			label: typeof label === "string" ? label : name,
-			url,
-			self: false,
-			addedAt: typeof addedAt === "number" ? addedAt : 0
-		});
-	}
-	return list;
+	if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+	const token = url.searchParams.get("token");
+	return token !== null && token !== "";
+}
+
+//#endregion
+//#region src/client/mesh-groups.ts
+/** The machine key every LOCAL roster row carries (older host shapes may omit the field — grouping treats absent as local). */
+const LOCAL_MACHINE_KEY = "local";
+/** The LOCAL section's fixed display label — this machine needs no registry row to be named. */
+const LOCAL_MACHINE_LABEL = "This machine";
+/** Whether a row's machine field parks it in the local section: `'local'` or absent (the coercion drops unknown values). */
+function isLocalMachine(machine) {
+	return machine === void 0 || machine === LOCAL_MACHINE_KEY;
 }
 /**
-* Persist the ledger; storage failures degrade silently to in-memory state.
+* Group a roster into machine sections for the switch menu and the Hub
+* roster rows: the LOCAL group first (label {@link LOCAL_MACHINE_LABEL};
+* rows whose `machine` is `'local'` or absent), then one group per remote
+* machine sorted by display label (code-unit order) with the machine key as
+* the tiebreak. Members keep the roster's given order inside their group;
+* groups only exist for machines actually present in the roster (no empty
+* local section when every row is federated). An unknown label map entry —
+* missing, or an empty string — falls back to the raw machine key.
 *
-* @param list - the machines to store (self row included).
+* @param links - the roster rows (any order; the section order is derived, not inherited).
+* @param machineLabels - machine key (m4) → display label; the machines API answer via {@link machineLabelsFrom}.
+* @returns the sections, local first.
 */
-function saveMachines(list) {
-	if (typeof localStorage === "undefined") return;
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
-	} catch {}
+function groupByMachine(links, machineLabels) {
+	const local = [];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const link of links) {
+		if (isLocalMachine(link.machine)) {
+			local.push(link);
+			continue;
+		}
+		const machine = link.machine;
+		const bucket = byKey.get(machine);
+		if (bucket === void 0) byKey.set(machine, [link]);
+		else bucket.push(link);
+	}
+	const labelOf = (key) => {
+		const label = machineLabels[key];
+		return typeof label === "string" && label !== "" ? label : key;
+	};
+	const remote = [...byKey.entries()].map(([key, agents]) => ({
+		key,
+		label: labelOf(key),
+		agents
+	})).sort((a, b) => a.label !== b.label ? a.label < b.label ? -1 : 1 : a.key < b.key ? -1 : a.key > b.key ? 1 : 0);
+	return local.length > 0 ? [{
+		key: LOCAL_MACHINE_KEY,
+		label: LOCAL_MACHINE_LABEL,
+		agents: local
+	}, ...remote] : remote;
 }
-/** A fresh row id (UUID when available, time+random otherwise). */
-function freshMachineId() {
-	const cryptoRef = globalThis.crypto;
-	if (typeof cryptoRef?.randomUUID === "function") return cryptoRef.randomUUID();
-	return `m-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+/**
+* The machines API answer → the grouping label map: every remote row's
+* `id → label` (mesh-api's coercion already collapsed an empty label to the
+* machine name) plus the self block's own `m4 → label`. An absent list is
+* the empty map — the caller's degrade-to-flat trigger, never a throw.
+*
+* @param list - the coerced `fetchMachines()` answer, when it succeeded.
+* @returns machine key → display label (the raw key stays absent, not mapped).
+*/
+function machineLabelsFrom(list) {
+	const labels = {};
+	if (list === void 0) return labels;
+	for (const machine of list.machines) labels[machine.id] = machine.label !== "" ? machine.label : machine.name;
+	if (list.self !== void 0) labels[list.self.id] = list.self.label;
+	return labels;
 }
 
 //#endregion
@@ -888,37 +1099,6 @@ function activeAgentName(activeAgent, roster) {
 	if (activeAgent === void 0 || activeAgent === "") return void 0;
 	return roster.find((row) => row.key === activeAgent)?.label ?? activeAgent;
 }
-/** Which machine one roster row groups under: the row's own machine (parser-guaranteed). */
-function machineGroup(row) {
-	return row.machine;
-}
-/**
-* Group a roster by machine for the HubPanelIcon chevron menu's native
-* workspace-list look: one group per distinct `machineGroup` key, groups in
-* first-appearance order, members keeping the roster's order inside their
-* group. A single-group roster (today's local-only shape) renders exactly
-* like the old flat list minus the card border.
-*
-* Host-half pure logic so `test/client-switch.test.mjs` pins it from `dist/`.
-*/
-function machineGroups(rows) {
-	const groups = [];
-	const byMachine = /* @__PURE__ */ new Map();
-	for (const row of rows) {
-		const machine = machineGroup(row);
-		let group = byMachine.get(machine);
-		if (group === void 0) {
-			group = {
-				machine,
-				agents: []
-			};
-			byMachine.set(machine, group);
-			groups.push(group);
-		}
-		group.agents.push(row);
-	}
-	return groups;
-}
 /**
 * Build the switch machine over an injected {@link SwitchHost}.
 *
@@ -1064,15 +1244,63 @@ function createSwitchController(host, options = {}) {
 /**
 * The pure pre-flight decision. `native` always runs; an absent row (roster
 * fetch failed, or the key is not listed) also runs — the machine's roster
-* probe is the authority on unknown targets, exactly as before C1.
+* probe is the authority on unknown targets, exactly as before C1. A
+* not-ready FEDERATED row (`machine` set and not `'local'`) decides
+* `'machine-down'` — an immediate actionable failure, never a wait loop
+* (the hub's probe already knows the machine is unreachable or its auth
+* expired); `failed` keeps precedence everywhere (a peer-reported spawn
+* rejection still reports as failed).
 */
 function decidePreFlight(label, row) {
 	if (label === NATIVE_AGENT) return "run";
 	if (row === void 0) return "run";
 	if (row.failed === true) return "failed";
-	if (row.ready !== true) return "wait";
+	if (row.ready !== true) {
+		if (row.machine !== void 0 && row.machine !== "local") return "machine-down";
+		return "wait";
+	}
 	return "run";
 }
+/** Bound on the machine-down branch's enrichment fetch (mesh P3 Task 5a:
+*  the parked P2 minor — an unbounded `fetchMachines` await — folds here; a
+*  hung hub answer must never swallow the toast). */
+const MACHINE_DOWN_ENRICH_MS = 3e3;
+/**
+* The machine-down branch's pure half (I1(c) feedback + I1(b) light probe,
+* mesh P3 Task 5a): enrich the toast through the machines face — BOUNDED at
+* {@link MACHINE_DOWN_ENRICH_MS} — then, after toasting, fire ONE reprobe
+* for the row's machine and forget it: a stale-unreachable machine gets a
+* fresh attempt per failed click, so the NEXT click can succeed without
+* waiting for the hub's 5-minute sweep. Never blocks the UI path (the whole
+* body is detached), never surfaces a reprobe failure (the sweep retries).
+*/
+function runMachineDownFeedback(label, row, faces) {
+	(async () => {
+		let machineName = row.machine;
+		let status;
+		const enriched = await new Promise((resolve) => {
+			const bound$1 = faces.setTimeout(() => resolve(void 0), MACHINE_DOWN_ENRICH_MS);
+			faces.fetchMachines().then((list) => {
+				faces.clearTimeout(bound$1);
+				resolve(list);
+			}, () => {
+				faces.clearTimeout(bound$1);
+				resolve(void 0);
+			});
+		});
+		if (enriched !== void 0) {
+			const found = enriched.machines.find((entry) => entry.id === row.machine);
+			if (found !== void 0) {
+				machineName = found.label;
+				if (found.status === "unreachable" || found.status === "auth-expired") status = found.status;
+			}
+		}
+		const who = row.label ?? label;
+		const machine = machineName ?? "its machine";
+		faces.toast(status === void 0 ? `Super D: ${who} is unavailable — machine ${machine} is not ready. Reprobe or re-add it in the Hub machines panel.` : `Super D: ${who} is unavailable — machine ${machine} reports ${status}. Reprobe or re-add it in the Hub machines panel.`);
+		if (row.machine !== void 0) faces.reprobe(row.machine).catch(() => {});
+	})();
+}
 /** Default bound on one readiness wait (the page never locks behind a stuck world). */
 const WAIT_BOUND_MS = 12e4;
 /** Default poll interval for one readiness wait. */
@@ -1200,6 +1428,24 @@ function uiState() {
 function showToast(message) {
 	showSuperdToast(message);
 }
+/**
+* I1(c) feedback + I1(b) light probe (mesh P3 Task 5a): the machine-down
+* branch delegates to the pure {@link runMachineDownFeedback} — the
+* machines face (already part of the client half — the Hub machines panel's
+* own cheap same-origin GET) enriches the toast, bounded at 3s; after
+* toasting, ONE fire-and-forget reprobe POST per failed click refreshes the
+* hub's status table so the NEXT click can succeed without waiting for the
+* 5-minute sweep. Nothing here blocks the UI path.
+*/
+function reportMachineDown(label, row) {
+	runMachineDownFeedback(label, row, {
+		fetchMachines,
+		reprobe: reprobeMachine,
+		toast: showToast,
+		setTimeout: (fn, ms) => globalThis.setTimeout(fn, ms),
+		clearTimeout: (handle) => globalThis.clearTimeout(handle)
+	});
+}
 /** The bound `switchAgent`, or `undefined` until the entry binds it. */
 let bound;
 /**
@@ -1312,7 +1558,10 @@ let pendingWait;
 * `label`, gated on the target world's readiness (C1): a not-ready world
 * holds the UI on native with starting feedback and a bounded poll; a
 * failed world reports and never switches; a ready/native/unknown target
-* runs the machine (whose roster probe stays the fallback).
+* runs the machine (whose roster probe stays the fallback). A not-ready
+* FEDERATED row skips all of that — an immediate machine-error toast
+* (I1(c), `machine-down`), never a wait loop.
+*
 * @returns `true` when the fusion switch took the click over; `false` when
 *   this page is not a fusion page or the orchestration is unbound.
 *   Informational only — the interception contract (`seatClickDecision`)
@@ -1337,6 +1586,10 @@ function attemptSwitch(label) {
 			showToast(`Super D: ${label} failed to start — see the service log.`);
 			return;
 		}
+		if (decision === "machine-down") {
+			if (row !== void 0) reportMachineDown(label, row);
+			return;
+		}
 		if (decision === "wait") {
 			showToast(`Super D: ${label} is starting…`);
 			const waiter = createReadinessWaiter({
@@ -1370,7 +1623,7 @@ function attemptSwitch(label) {
 //#region src/client/HubPage.tsx
 const EMPTY_DRAFT = {
 	name: "",
-	url: ""
+	tokenUrl: ""
 };
 /** Chip text: drop the trailing slash for concision ('/claude/' → '/claude'). */
 function displayPath(path) {
@@ -1394,6 +1647,99 @@ const chipPending = {
 	...chip,
 	color: "var(--dsw-alias-label-caption)"
 };
+const chipWarn = {
+	...chip,
+	color: "var(--dsw-alias-state-warn-primary)"
+};
+const chipError = {
+	...chip,
+	color: "var(--dsw-alias-state-error-primary)"
+};
+/** Machine id chip (the m4): the monospace chip look the roster's path tags use. */
+const chipMonoId = {
+	...chip,
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+	fontSize: 10.5
+};
+/** The status dot's fixed part (the color is decided per row). */
+const dotStyle = {
+	width: 8,
+	height: 8,
+	borderRadius: "50%",
+	flex: "none"
+};
+/** The machine origin column: monospace, eats the leftover row width. */
+const originStyle = {
+	flex: 1,
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+	fontSize: 12,
+	color: "var(--dsw-alias-label-secondary)"
+};
+/** The quiet text action (reprobe) — the switch link's look. */
+const textActionStyle = {
+	border: "none",
+	background: "transparent",
+	padding: 0,
+	font: "inherit",
+	fontSize: 12.5,
+	color: "var(--dsw-alias-label-secondary)",
+	cursor: "pointer",
+	whiteSpace: "nowrap"
+};
+/** The icon action (remove ✕) seat. */
+const iconActionStyle = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: 22,
+	height: 22,
+	borderRadius: 6,
+	border: "none",
+	background: "transparent",
+	color: "var(--dsw-alias-label-caption)",
+	font: "inherit",
+	cursor: "pointer"
+};
+/** The status dot's color: reachable green, pending grey, unreachable amber, auth-expired red. */
+function statusDotColor(status) {
+	if (status === "reachable") return "var(--dsw-alias-state-success-primary)";
+	if (status === "auth-expired") return "var(--dsw-alias-state-error-primary)";
+	if (status === "unreachable") return "var(--dsw-alias-state-warn-primary)";
+	return "var(--dsw-alias-label-caption)";
+}
+/** The last-fetch caption's style (R7): quiet tertiary text beside the status chip. */
+const ageStyle = {
+	fontSize: 11.5,
+	color: "var(--dsw-alias-label-tertiary)",
+	whiteSpace: "nowrap"
+};
+/** The status chip (style + text) for one remote row. */
+function statusChip(machine) {
+	if (machine.status === "reachable") return {
+		style: chipSelf,
+		text: "reachable"
+	};
+	if (machine.status === "auth-expired") return {
+		style: chipError,
+		text: "auth expired"
+	};
+	if (machine.status === "unreachable") return {
+		style: chipWarn,
+		text: "unreachable"
+	};
+	return {
+		style: chipPending,
+		text: "pending"
+	};
+}
+/** One line of error text for the panel's inline error line. */
+function errText(err) {
+	return err instanceof Error ? err.message : String(err);
+}
 const inputStyle = {
 	boxSizing: "border-box",
 	width: "100%",
@@ -1420,6 +1766,15 @@ const listStyle = {
 	flexDirection: "column",
 	gap: 2
 };
+/** The machine section head inside the roster list (the grouped shape's caption row). */
+const sectionHeadStyle = {
+	padding: "8px 8px 2px",
+	fontSize: 11,
+	lineHeight: "16px",
+	color: "var(--dsw-alias-label-caption)",
+	whiteSpace: "nowrap",
+	listStyle: "none"
+};
 /** A row that lights its surface on hover (inline styles have no :hover). */
 function HoverRow({ children, onClick, clickable }) {
 	const [hover, setHover] = react.useState(false);
@@ -1477,7 +1832,11 @@ function GroupHead({ title, count, action }) {
 	});
 }
 function HubPage() {
-	const [machines, setMachines] = react.useState(() => loadMachines());
+	const [mesh, setMesh] = react.useState({ machines: [] });
+	const [meshLoaded, setMeshLoaded] = react.useState(false);
+	const [meshError, setMeshError] = react.useState(null);
+	const [meshBusy, setMeshBusy] = react.useState(false);
+	const [meshReloads, setMeshReloads] = react.useState(0);
 	const [showAdd, setShowAdd] = react.useState(false);
 	const [draft, setDraft] = react.useState(EMPTY_DRAFT);
 	const [agents, setAgents] = react.useState(() => rosterFromGlobal() ?? null);
@@ -1503,6 +1862,24 @@ function HubPage() {
 			cancelled = true;
 		};
 	}, []);
+	react.useEffect(() => {
+		let cancelled = false;
+		fetchMachines().then((list) => {
+			if (!cancelled) {
+				setMesh(list);
+				setMeshError(null);
+				setMeshLoaded(true);
+			}
+		}).catch((err) => {
+			if (!cancelled) {
+				setMeshError(errText(err));
+				setMeshLoaded(true);
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [meshReloads]);
 	react.useEffect(() => {
 		if (!fusion) return;
 		const state = uiState();
@@ -1512,6 +1889,7 @@ function HubPage() {
 		});
 	}, [fusion]);
 	const here = currentMountPath();
+	const hereOrigin = typeof location === "undefined" ? "" : location.origin;
 	const isActive = (agent) => hubRowActive({
 		fusion,
 		agentKey: agent.key,
@@ -1534,30 +1912,111 @@ function HubPage() {
 			attempt: () => attemptSwitch(agent.key)
 		}).preventDefault) event.preventDefault();
 	};
-	const persist = (next) => {
-		const list = [...next];
-		setMachines(list);
-		saveMachines(list);
+	const machineLabels = meshLoaded && meshError === null ? machineLabelsFrom(mesh) : void 0;
+	const groups = agents !== null && machineLabels !== void 0 ? groupByMachine(agents, machineLabels) : void 0;
+	/**
+	* One Agent Runtimes row — the SAME row in both shapes; `showMachine`
+	* keeps the flat fallback's per-row machine text (the grouped shape moves
+	* it onto the section head). The click contract is untouched: every row
+	* still runs the `seatClickDecision` table.
+	*/
+	const renderRow = (agent, showMachine) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverRow, {
+		clickable: switchUi.available,
+		onClick: switchUi.available ? (event) => {
+			rowDecision(agent, event);
+		} : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeMark, {
+				agentKey: agent.key,
+				size: 20
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					fontWeight: 500,
+					whiteSpace: "nowrap"
+				},
+				children: agent.label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					flex: 1,
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					fontSize: 12.5,
+					color: "var(--dsw-alias-label-tertiary)"
+				},
+				children: showMachine ? agent.machine : null
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					...chip,
+					fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+					fontSize: 10.5
+				},
+				children: displayPath(agent.path)
+			}),
+			isActive(agent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: chipSelf,
+				children: "current"
+			}),
+			switchUi.available && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				"aria-current": isActive(agent) ? "page" : void 0,
+				style: {
+					fontSize: 12.5,
+					color: "var(--dsh-alias-label-secondary)",
+					textDecoration: "none",
+					cursor: "pointer"
+				},
+				onClick: (event) => {
+					event.stopPropagation();
+					rowDecision(agent, event);
+				},
+				children: "switch"
+			})
+		]
+	}, agent.key);
+	/** Bump the reload sequence — every mutating op refreshes through the API. */
+	const reloadMachines = () => {
+		setMeshReloads((n) => n + 1);
 	};
-	const addMachine = () => {
+	const addRemote = () => {
 		const name = draft.name.trim();
-		const url = draft.url.trim();
-		if (name === "" || url === "") return;
-		persist([...machines, {
-			id: freshMachineId(),
+		const tokenUrl = draft.tokenUrl.trim();
+		if (name === "" || !validTokenUrl(tokenUrl)) return;
+		setMeshBusy(true);
+		addMachine({
 			name,
-			label: name,
-			url,
-			self: false,
-			addedAt: Date.now()
-		}]);
-		setDraft(EMPTY_DRAFT);
-		setShowAdd(false);
+			tokenUrl
+		}).then(() => {
+			setDraft(EMPTY_DRAFT);
+			setShowAdd(false);
+			setMeshError(null);
+			reloadMachines();
+		}).catch((err) => {
+			setMeshError(errText(err));
+		}).finally(() => {
+			setMeshBusy(false);
+		});
 	};
-	const removeMachine = (id) => {
-		persist(machines.filter((machine) => machine.id !== id));
+	const removeRemote = (id) => {
+		removeMachine(id).then(() => {
+			setMeshError(null);
+			reloadMachines();
+		}).catch((err) => {
+			setMeshError(errText(err));
+		});
 	};
-	const draftValid = draft.name.trim() !== "" && draft.url.trim() !== "";
+	const reprobeRemote = (id) => {
+		reprobeMachine(id).then(() => {
+			setMeshError(null);
+			reloadMachines();
+		}).catch((err) => {
+			setMeshError(errText(err));
+		});
+	};
+	const draftValid = draft.name.trim() !== "" && validTokenUrl(draft.tokenUrl.trim());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
 			display: "flex",
@@ -1685,7 +2144,7 @@ function HubPage() {
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupHead, {
 							title: "Machines",
-							count: machines.length,
+							count: (mesh.self !== void 0 ? 1 : 0) + mesh.machines.length,
 							action: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								onClick: () => {
@@ -1719,90 +2178,152 @@ function HubPage() {
 								}), "Add machine"]
 							})
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 							style: {
 								margin: 0,
 								fontSize: 13,
 								lineHeight: "20px",
 								color: "var(--dsw-alias-label-tertiary)"
 							},
-							children: "Add another DSH from remote machines, provide the token URL."
+							children: [
+								"Add another DSH from remote machines, provide the token URL. Status ",
+								AUTO_REFRESH_NOTE,
+								"."
+							]
+						}),
+						meshError !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							style: {
+								margin: 0,
+								fontSize: 12.5,
+								lineHeight: "20px",
+								color: "var(--dsw-alias-state-error-primary)"
+							},
+							children: meshError
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
 							style: listStyle,
-							children: machines.map((machine) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverRow, { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									"aria-hidden": true,
-									style: {
-										width: 8,
-										height: 8,
-										borderRadius: "50%",
-										flex: "none",
-										background: machine.self ? "var(--dsw-alias-state-success-primary)" : "var(--dsw-alias-label-caption)"
-									}
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							children: [
+								!meshLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 									style: {
-										fontWeight: 500,
-										whiteSpace: "nowrap"
+										padding: "9px 8px",
+										fontSize: 13,
+										color: "var(--dsw-alias-label-tertiary)",
+										listStyle: "none"
 									},
-									children: machine.name
-								}),
-								machine.label !== machine.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: chip,
-									children: machine.label
+									children: "Loading machines…"
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								meshLoaded && meshError === null && mesh.machines.length === 0 && mesh.self === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 									style: {
-										flex: 1,
-										minWidth: 0,
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										whiteSpace: "nowrap",
-										fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-										fontSize: 12,
-										color: "var(--dsw-alias-label-secondary)"
+										padding: "9px 8px",
+										fontSize: 13,
+										color: "var(--dsw-alias-label-tertiary)",
+										listStyle: "none"
 									},
-									children: machine.url
+									children: "No machines yet — add the first one with its token URL."
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: machine.self ? chipSelf : chipPending,
-									children: machine.self ? "self" : "link pending"
-								}),
-								!machine.self && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"aria-label": `Remove ${machine.name}`,
-									onClick: () => {
-										removeMachine(machine.id);
-									},
-									style: {
-										display: "inline-flex",
-										alignItems: "center",
-										justifyContent: "center",
-										width: 22,
-										height: 22,
-										borderRadius: 6,
-										border: "none",
-										background: "transparent",
-										color: "var(--dsw-alias-label-caption)",
-										font: "inherit",
-										cursor: "pointer"
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-										width: "11",
-										height: "11",
-										viewBox: "0 0 11 11",
-										fill: "none",
-										"aria-hidden": "true",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-											d: "M2.5 2.5L8.5 8.5M8.5 2.5L2.5 8.5",
-											stroke: "currentColor",
-											strokeWidth: "1.4",
-											strokeLinecap: "round"
-										})
+								mesh.self !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverRow, { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": true,
+										style: {
+											...dotStyle,
+											background: "var(--dsw-alias-state-success-primary)"
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: {
+											fontWeight: 500,
+											whiteSpace: "nowrap"
+										},
+										children: mesh.self.label
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: originStyle,
+										children: hereOrigin
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: chipMonoId,
+										children: mesh.self.id
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: chipSelf,
+										children: "self"
 									})
+								] }),
+								mesh.machines.map((machine) => {
+									const status = statusChip(machine);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverRow, { children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											"aria-hidden": true,
+											style: {
+												...dotStyle,
+												background: statusDotColor(machine.status)
+											}
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: {
+												fontWeight: 500,
+												whiteSpace: "nowrap"
+											},
+											children: machine.name
+										}),
+										machine.label !== machine.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: chip,
+											children: machine.label
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: originStyle,
+											children: machine.origin
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: chipMonoId,
+											children: machine.id
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: status.style,
+											children: status.text
+										}),
+										lastFetchLabel(machine.lastProbeAt, Date.now()) !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: ageStyle,
+											children: lastFetchLabel(machine.lastProbeAt, Date.now())
+										}),
+										machineVersionChip(machine) !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: chipWarn,
+											title: `machine ${machine.id}`,
+											children: machine.versionWarning
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											"aria-label": `Refresh ${machine.name}`,
+											onClick: () => {
+												reprobeRemote(machine.id);
+											},
+											style: textActionStyle,
+											children: "refresh"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											"aria-label": `Remove ${machine.name}`,
+											onClick: () => {
+												removeRemote(machine.id);
+											},
+											style: iconActionStyle,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+												width: "11",
+												height: "11",
+												viewBox: "0 0 11 11",
+												fill: "none",
+												"aria-hidden": "true",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+													d: "M2.5 2.5L8.5 8.5M8.5 2.5L2.5 8.5",
+													stroke: "currentColor",
+													strokeWidth: "1.4",
+													strokeLinecap: "round"
+												})
+											})
+										})
+									] }, machine.id);
 								})
-							] }, machine.id))
+							]
 						}),
 						showAdd && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							style: {
@@ -1831,15 +2352,15 @@ function HubPage() {
 								})] }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									style: fieldLabel,
-									children: "URL"
+									children: "Token URL"
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 									style: inputStyle,
-									value: draft.url,
-									placeholder: "http://192.168.31.130:4999",
+									value: draft.tokenUrl,
+									placeholder: "https://192.168.31.130:4999/?token=…",
 									onChange: (event) => {
 										setDraft({
 											...draft,
-											url: event.target.value
+											tokenUrl: event.target.value
 										});
 									}
 								})] }),
@@ -1869,9 +2390,9 @@ function HubPage() {
 										children: "Cancel"
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										disabled: !draftValid,
+										disabled: !draftValid || meshBusy,
 										onClick: () => {
-											addMachine();
+											addRemote();
 										},
 										style: {
 											padding: "7px 14px",
@@ -1922,71 +2443,23 @@ function HubPage() {
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
 							style: listStyle,
-							children: [agents === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-								style: {
-									padding: "9px 8px",
-									fontSize: 13,
-									color: "var(--dsw-alias-label-tertiary)",
-									listStyle: "none"
-								},
-								children: "Loading roster…"
-							}), agents?.map((agent) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverRow, {
-								clickable: switchUi.available,
-								onClick: switchUi.available ? (event) => {
-									rowDecision(agent, event);
-								} : void 0,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeMark, {
-										agentKey: agent.key,
-										size: 20
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: {
-											fontWeight: 500,
-											whiteSpace: "nowrap"
-										},
-										children: agent.label
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: {
-											flex: 1,
-											minWidth: 0,
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-											fontSize: 12.5,
-											color: "var(--dsw-alias-label-tertiary)"
-										},
-										children: agent.machine
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: {
-											...chip,
-											fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-											fontSize: 10.5
-										},
-										children: displayPath(agent.path)
-									}),
-									isActive(agent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: chipSelf,
-										children: "current"
-									}),
-									switchUi.available && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-										"aria-current": isActive(agent) ? "page" : void 0,
-										style: {
-											fontSize: 12.5,
-											color: "var(--dsw-alias-label-secondary)",
-											textDecoration: "none",
-											cursor: "pointer"
-										},
-										onClick: (event) => {
-											event.stopPropagation();
-											rowDecision(agent, event);
-										},
-										children: "switch"
-									})
-								]
-							}, agent.key))]
+							children: [
+								agents === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+									style: {
+										padding: "9px 8px",
+										fontSize: 13,
+										color: "var(--dsw-alias-label-tertiary)",
+										listStyle: "none"
+									},
+									children: "Loading roster…"
+								}),
+								groups !== void 0 && groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+									"aria-hidden": true,
+									style: sectionHeadStyle,
+									children: group.label
+								}), group.agents.map((agent) => renderRow(agent, false))] }, group.key)),
+								groups === void 0 && agents?.map((agent) => renderRow(agent, true))
+							]
 						})
 					]
 				})] })
@@ -2046,6 +2519,7 @@ function HubPanelIcon({ size }) {
 	const [hover, setHover] = react.useState(false);
 	const [box, setBox] = react.useState(null);
 	const [agents, setAgents] = react.useState(() => rosterFromGlobal() ?? [NATIVE_LINK]);
+	const [machineLabels, setMachineLabels] = react.useState(void 0);
 	const fusion = fusionPage();
 	const switchUi = switchAffordance(fusion);
 	const [activeKey, setActiveKey] = react.useState(() => fusion ? uiState()?.activeAgent : void 0);
@@ -2097,6 +2571,9 @@ function HubPanelIcon({ size }) {
 		fetchRoster().then((list) => {
 			if (!cancelled) setAgents(list);
 		}).catch(() => {});
+		fetchMachines().then((list) => {
+			if (!cancelled) setMachineLabels(machineLabelsFrom(list));
+		}).catch(() => {});
 		return () => {
 			cancelled = true;
 		};
@@ -2119,15 +2596,15 @@ function HubPanelIcon({ size }) {
 		setOpen((value) => !value);
 	};
 	const items = [];
-	machineGroups(agents).forEach((group, groupIndex) => {
+	if (machineLabels !== void 0) groupByMachine(agents, machineLabels).forEach((group, groupIndex) => {
 		if (groupIndex > 0) items.push({
 			type: "separator",
-			id: `machine-divider:${group.machine}`
+			id: `machine-divider:${group.key}`
 		});
 		items.push({
 			type: "label",
-			id: `machine:${group.machine}`,
-			text: group.machine
+			id: `machine:${group.key}`,
+			text: group.label
 		});
 		for (const agent of group.agents) items.push({
 			id: agent.key,
@@ -2138,6 +2615,14 @@ function HubPanelIcon({ size }) {
 			})
 		});
 	});
+	else for (const agent of agents) items.push({
+		id: agent.key,
+		label: agent.label,
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeMark, {
+			agentKey: agent.key,
+			size: 14
+		})
+	});
 	/**
 	* A menu pick. The row is a `menuitem` button — there is no anchor default
 	* to cancel — but the shared table still owns whether the attempt runs