super-dsh 0.1.6 → 0.1.10-e

package/superd-hub/lib/client/index.js

@@ -25,10 +25,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let react = require("react");
 react = __toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = __toESM(react_jsx_runtime);
 let __deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 __deepseek_ai_dsh_client_ui_primitives = __toESM(__deepseek_ai_dsh_client_ui_primitives);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = __toESM(react_jsx_runtime);
 
 //#region src/client/glyph.tsx
 /**
@@ -241,9 +241,10 @@ function imgMark(uri, size) {
 */
 function RuntimeMark({ agentKey, size }) {
 	if (agentKey === "native") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DshFish, { size });
-	const uri = RUNTIME_ICON_URIS[agentKey];
+	const base = agentKey.endsWith("-sdk") ? agentKey.slice(0, -4) : agentKey;
+	const uri = RUNTIME_ICON_URIS[base];
 	if (uri === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubagentGlyph, { size });
-	const tile = RUNTIME_TILE_BG[agentKey];
+	const tile = RUNTIME_TILE_BG[base];
 	if (tile === void 0) return imgMark(uri, size);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
@@ -280,7 +281,10 @@ const FALLBACK_LABELS = {
 	claude: "Claude",
 	pi: "Pi",
 	hermes: "Hermes",
-	agy: "Antigravity"
+	agy: "Antigravity",
+	"omp-sdk": "OMP (SDK)",
+	"agy-sdk": "Antigravity (SDK)",
+	"codex-sdk": "Codex (SDK)"
 };
 /** Coerce a wire `agents` array into links; undefined when unusable/empty. */
 function coerceAgents(raw) {
@@ -294,7 +298,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 +312,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 +348,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
+/**
+* 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
+*/
 /**
-* 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.
+* 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 [];
-	}
-	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 false;
 	}
-	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 +1103,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 +1248,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,14 +1432,61 @@ 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)
+	});
+}
+/**
+* Build the `SwitchHost.openDefaultWorkspace` action.
+*
+* dsh 0.2.0-rc.2 removed the request object from the Host's
+* `workspaces.initializeDefault` Remote: the first-use directory and stored
+* title are fixed and language-neutral (`default-workspace` under
+* `<Documents>/deepseek-harness`), so the caller passes only its own lifetime
+* signal. This module shipped the pre-0.2 `{ directoryName, title }` shape for
+* a release cycle; the Host then received a plain object where it feeds
+* `AbortSignal.any(...)`, EVERY empty-plane landing rejected, and the browser
+* surfaced "Unable to create default workspace". Root-caused 2026-10-02 on
+* the Hermes world — the only world whose registry was still empty after the
+* 0.2.0-rc.2 upgrade, hence the only one that took the default-workspace
+* branch. Exported so the call shape is unit-testable without the
+* module-level single-bind guard.
+*
+* @param deps - the workspace projection and the navigation face.
+* @param toast - the feedback sink; a refusal is feedback, never a revert.
+* @returns the host action.
+*/
+function openDefaultWorkspaceFor(deps, toast) {
+	return () => {
+		deps.workspaces.initializeDefault().then((prepared) => {
+			if (prepared !== void 0) deps.uiWorkspace.openWorkspace(prepared.workspaceId);
+		}).catch(() => {
+			toast("Super D: unable to create the default workspace.");
+		});
+	};
+}
 /** The bound `switchAgent`, or `undefined` until the entry binds it. */
 let bound;
 /**
 * Bind the page's switch agent from the client services. Idempotent; a no-op
 * without the page atom (a non-fusion page never has one).
-* @param deps - the `connection`, `uiWorkspace`, `workspaces`, `sessions`
-*   and `locale` services (structural; the stock client tree always has all
-*   five — upstream's ui-workspace injects the same set).
+* @param deps - the `connection`, `uiWorkspace`, `workspaces` and `sessions`
+*   services (structural; the stock client tree always has all four —
+*   upstream's ui-workspace injects the same set).
 */
 function bindSwitchAgent(deps) {
 	if (bound !== void 0) return;
@@ -1228,19 +1507,6 @@ function bindSwitchAgent(deps) {
 			}
 		};
 	};
-	const openDefaultWorkspace = () => {
-		const language = deps.locale.getSnapshot().active.toLowerCase().split("-")[0];
-		const title = language === "zh" ? "默认工作区" : "Default workspace";
-		const directoryName = language === "zh" || language === "en" ? title : "default-workspace";
-		deps.workspaces.initializeDefault({
-			directoryName,
-			title
-		}).then((prepared) => {
-			if (prepared !== void 0) deps.uiWorkspace.openWorkspace(prepared.workspaceId);
-		}).catch(() => {
-			showToast("Super D: unable to create the default workspace.");
-		});
-	};
 	const controller = createSwitchController({
 		setAgent(label) {
 			state.setAgent(label);
@@ -1255,7 +1521,7 @@ function bindSwitchAgent(deps) {
 		startSession(workspaceId) {
 			deps.uiWorkspace.startSession(workspaceId);
 		},
-		openDefaultWorkspace,
+		openDefaultWorkspace: openDefaultWorkspaceFor(deps, showToast),
 		readRestoreCaches,
 		onCachesRefreshed(listener, gate) {
 			return observeCachesRefreshed(deps.workspaces.list, {
@@ -1312,7 +1578,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 +1606,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({
@@ -1366,16 +1639,365 @@ function attemptSwitch(label) {
 	return true;
 }
 
+//#endregion
+//#region src/client/agent-settings.ts
+const SETTINGS_PANELS = {
+	agy: {
+		namespace: "agyAuth",
+		kind: "auth"
+	},
+	codex: {
+		namespace: "codexProviders",
+		kind: "providers"
+	},
+	"codex-sdk": {
+		namespace: "codexProviders",
+		kind: "providers"
+	},
+	claude: {
+		namespace: "claudeProviders",
+		kind: "providers"
+	}
+};
+/** The panel spec for a runtime, or `undefined` when it has none yet. */
+function settingsPanelFor(agentKey) {
+	return SETTINGS_PANELS[agentKey];
+}
+/**
+* Accordion transition: at most one row open. Clicking the open row closes it;
+* clicking another moves the panel there in one click.
+*/
+function toggleExpanded(current$1, key) {
+	return current$1 === key ? null : key;
+}
+function str(value) {
+	return typeof value === "string" && value !== "" ? value : void 0;
+}
+function methodOption(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	const key = str(record.key);
+	const label = str(record.label);
+	if (key === void 0 || label === void 0) return void 0;
+	return {
+		key,
+		label,
+		available: record.available === true,
+		placeholder: record.placeholder === true,
+		hint: str(record.hint) ?? ""
+	};
+}
+/**
+* Defensive parse of the RPC answer. Returns `undefined` for anything that is
+* not a usable view (no methods, wrong shape, adapter absent) so the panel can
+* render an explicit failure instead of an empty list that looks like success.
+*/
+function parseAuthView(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	if (!Array.isArray(record.methods)) return void 0;
+	const methods = record.methods.map(methodOption).filter((m) => m !== void 0);
+	if (methods.length === 0) return void 0;
+	const settingsPath = str(record.settingsPath);
+	const note = str(record.note);
+	return {
+		methods,
+		selected: str(record.selected) ?? null,
+		effective: str(record.effective) ?? null,
+		...settingsPath === void 0 ? {} : { settingsPath },
+		...note === void 0 ? {} : { note }
+	};
+}
+/**
+* The option the panel marks as in force: the effective one when the adapter
+* named it, else the explicit selection. `undefined` when neither is known —
+* the panel then marks nothing rather than guessing.
+*/
+function activeMethod(view) {
+	const wanted = view.effective ?? view.selected;
+	if (wanted === null) return void 0;
+	return view.methods.find((method) => method.key === wanted);
+}
+/** Whether an option may be picked (placeholders are rendered, never selected). */
+function selectable(option) {
+	return !option.placeholder;
+}
+function nonEmpty(value) {
+	return typeof value === "string" && value !== "" ? value : void 0;
+}
+function modelOption(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	const id = nonEmpty(record.id);
+	if (id === void 0) return void 0;
+	const contextWindow = record.contextWindow;
+	return {
+		id,
+		label: nonEmpty(record.displayName) ?? id,
+		...typeof contextWindow === "number" && Number.isSafeInteger(contextWindow) && contextWindow > 0 ? { contextWindow } : {}
+	};
+}
+function providerAuthKind(raw) {
+	return raw === "env" ? "env" : raw === "authToken" ? "authToken" : "apiKey";
+}
+function providerOption(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	const id = nonEmpty(record.id);
+	const label = nonEmpty(record.label);
+	const baseUrl = nonEmpty(record.baseUrl);
+	if (id === void 0 || label === void 0 || baseUrl === void 0) return void 0;
+	const models = Array.isArray(record.models) ? record.models.map(modelOption).filter((entry) => entry !== void 0) : [];
+	const envName = nonEmpty(record.envName);
+	return {
+		id,
+		label,
+		baseUrl,
+		protocol: record.protocol === "chat" ? "chat" : "responses",
+		models,
+		authKind: providerAuthKind(record.authKind),
+		...envName === void 0 ? {} : { envName },
+		hasKey: record.hasKey === true
+	};
+}
+function protocolOption(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	const value = nonEmpty(record.value);
+	const label = nonEmpty(record.label);
+	if (value === void 0 || label === void 0) return void 0;
+	return {
+		value,
+		label,
+		available: record.available === true,
+		hint: nonEmpty(record.hint) ?? ""
+	};
+}
+function providerPaths(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	const store = nonEmpty(record.store);
+	if (store === void 0) return void 0;
+	const config = nonEmpty(record.config);
+	const auth = nonEmpty(record.auth);
+	const catalogs = nonEmpty(record.catalogs);
+	const settings = nonEmpty(record.settings);
+	return {
+		store,
+		...config === void 0 ? {} : { config },
+		...auth === void 0 ? {} : { auth },
+		...catalogs === void 0 ? {} : { catalogs },
+		...settings === void 0 ? {} : { settings }
+	};
+}
+/**
+* Defensive parse of the adapter's providers answer.
+*
+* `undefined` for anything that is not a usable view — but an empty `providers`
+* array is valid (a fresh install), and so is a provider whose `models` array
+* is empty. `protocols` is the codex face's field: an ABSENT field (the claude
+* face) reads as "no protocol choice" and never fails the parse, while a
+* present-but-unusable list is a malformed codex answer and rejects as before.
+*/
+function parseProvidersView(raw) {
+	if (typeof raw !== "object" || raw === null) return void 0;
+	const record = raw;
+	if (!Array.isArray(record.providers)) return void 0;
+	let protocols = [];
+	if (record.protocols !== void 0) {
+		if (!Array.isArray(record.protocols)) return void 0;
+		protocols = record.protocols.map(protocolOption).filter((entry) => entry !== void 0);
+		if (protocols.length === 0) return void 0;
+	}
+	const paths = providerPaths(record.paths);
+	if (paths === void 0) return void 0;
+	const providers = record.providers.map(providerOption).filter((entry) => entry !== void 0);
+	const syncedAt = record.syncedAt;
+	const note = nonEmpty(record.note);
+	return {
+		providers,
+		native: nativeConfig(record.native),
+		protocols,
+		paths,
+		...typeof syncedAt === "number" && Number.isFinite(syncedAt) ? { syncedAt } : {},
+		...note === void 0 ? {} : { note }
+	};
+}
+/**
+* The user's own native config as the adapter last read it. `null` when the
+* adapter said nothing; otherwise an object carrying whichever halves were
+* named — codex names a provider id, claude an endpoint URL — and an empty
+* one is still news (the panel says the file names nothing).
+*/
+function nativeConfig(raw) {
+	if (typeof raw !== "object" || raw === null) return null;
+	const record = raw;
+	const providerId = nonEmpty(record.providerId);
+	const baseUrl = nonEmpty(record.baseUrl);
+	const model = nonEmpty(record.model);
+	return {
+		...providerId === void 0 ? {} : { providerId },
+		...baseUrl === void 0 ? {} : { baseUrl },
+		...model === void 0 ? {} : { model }
+	};
+}
+/** The codex face: a stored key, or the name of a variable holding it. */
+const KEY_OR_ENV = [{
+	value: "apiKey",
+	label: "API key",
+	hint: "Stored with the provider; injected at launch."
+}, {
+	value: "env",
+	label: "Environment variable",
+	hint: "The child reads the key from a named variable."
+}];
+/** The claude face: both kinds are literal keys, differing only in the header. */
+const TWO_HEADER_SHAPES = [{
+	value: "apiKey",
+	label: "API key (x-api-key)",
+	hint: "Sent as the x-api-key header."
+}, {
+	value: "authToken",
+	label: "Bearer token",
+	hint: "Sent as the Authorization header."
+}];
+/**
+* The auth shapes the add/edit form may pick for a provider, in display order.
+*
+* The view carries no explicit vocabulary field, so the panel reads it off the
+* one field that distinguishes the faces today: `protocols`. The codex face
+* advertises wire protocols and offers key-or-env-var; the claude face carries
+* neither and offers its two header shapes instead. The list is per-view,
+* never a fixed union — each adapter rejects the other's kinds on save, so a
+* union dropdown would miscode silently. A third face extends the table.
+*/
+function authKindOptions(view) {
+	return view.protocols.length > 0 ? KEY_OR_ENV : TWO_HEADER_SHAPES;
+}
+/**
+* `provider / model` (codex) or `endpoint / model` (claude) — whichever halves
+* the user's own native config names, joined for the one-line fact the panel
+* states and never acts on.
+*/
+function nativeDescription(native) {
+	const parts = [native?.providerId ?? native?.baseUrl, native?.model].filter((part) => part !== void 0);
+	return parts.length === 0 ? "no provider" : parts.join(" / ");
+}
+/**
+* The non-store paths joined for the panel's second footer line, in a fixed
+* slot order. `undefined` when the face named none — the line is omitted
+* entirely rather than rendered with blank slots.
+*/
+function nativePathsLine(paths) {
+	const parts = [
+		paths.config,
+		paths.auth,
+		paths.catalogs,
+		paths.settings
+	].filter((part) => part !== void 0);
+	return parts.length === 0 ? void 0 : parts.join(" · ");
+}
+
+//#endregion
+//#region src/client/runtime-settings-api.ts
+/** One rpcId for request/response correlation. `randomUUID` needs a secure context. */
+function mintRpcId() {
+	const webCrypto = globalThis.crypto;
+	if (webCrypto !== void 0 && typeof webCrypto.randomUUID === "function") return webCrypto.randomUUID();
+	if (webCrypto !== void 0 && typeof webCrypto.getRandomValues === "function") return [...webCrypto.getRandomValues(new Uint8Array(16))].map((b) => b.toString(16).padStart(2, "0")).join("");
+	return `rpc-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function settingsEnvelope(namespace, op, args) {
+	return {
+		type: "client-request",
+		rpcId: mintRpcId(),
+		method: `${namespace}/${op}`,
+		payload: { args }
+	};
+}
+/** What a caller can do with a failed panel call — kept structural for the tests. */
+function messageOf(error) {
+	if (error !== null && typeof error === "object" && typeof error.message === "string") return error.message;
+	return String(error);
+}
+/**
+* One unary call at a runtime's world, unwrapped to the RPC's value.
+*
+* Every failure mode is reported as a thrown `Error` carrying the adapter's own
+* message where one exists: a transport failure, a malformed answer, and the
+* gateway's business error (`{ok:false,error}`) must not look alike to the panel.
+*
+* @param agentKey - roster key addressing the world (`?agent=`).
+* @param namespace - the adapter's Remote namespace (`agyAuth`).
+* @param op - the Remote method.
+* @param args - exact named wire arguments.
+* @param doFetch - fetch implementation (tests inject).
+* @returns the raw RPC value.
+* @throws {Error} on transport, framing, or gateway failure.
+*/
+async function callRuntimeSettings(agentKey, namespace, op, args, doFetch) {
+	const send = doFetch ?? ((input, init) => fetch(input, init));
+	const envelope = settingsEnvelope(namespace, op, args);
+	const response = await send(`/hub/api?agent=${encodeURIComponent(agentKey)}`, {
+		method: "POST",
+		credentials: "same-origin",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify(envelope)
+	});
+	const text = await response.text();
+	let body;
+	try {
+		body = JSON.parse(text);
+	} catch {
+		throw new Error(`settings ${envelope.method}: unreadable answer (HTTP ${response.status})`);
+	}
+	const result = body?.result;
+	if (result === null || typeof result !== "object") throw new Error(`settings ${envelope.method}: malformed answer (HTTP ${response.status})`);
+	const record = result;
+	if (record.ok === true) return record.value;
+	const error = record.error;
+	if (error !== void 0 && typeof error.message === "string") throw new Error(error.message);
+	throw new Error(`settings ${envelope.method}: failed (HTTP ${response.status})`);
+}
+/** Read one runtime's panel state, parsed. */
+async function fetchAuthView(agentKey, namespace, doFetch) {
+	const view = parseAuthView(await callRuntimeSettings(agentKey, namespace, "get", {}, doFetch));
+	if (view === void 0) throw new Error("settings: the runtime returned no usable auth options");
+	return view;
+}
+/** Adopt one auth form (`null` clears the explicit choice). */
+async function setAuthMode(agentKey, namespace, mode, doFetch) {
+	const view = parseAuthView(await callRuntimeSettings(agentKey, namespace, "set", { request: { mode } }, doFetch));
+	if (view === void 0) throw new Error("settings: the runtime returned no usable auth options");
+	return view;
+}
+function requireProvidersView(value) {
+	const view = parseProvidersView(value);
+	if (view === void 0) throw new Error("settings: the runtime returned no usable provider list");
+	return view;
+}
+/** Read the multi-provider state of one runtime. */
+async function fetchProvidersView(agentKey, namespace, doFetch) {
+	return requireProvidersView(await callRuntimeSettings(agentKey, namespace, "get", {}, doFetch));
+}
+/**
+* Add or edit one provider in the adapter's list. Which provider a session runs
+* on is DSH's own per-session model selection, so this touches no active half.
+*/
+async function saveProvider(agentKey, namespace, provider, doFetch) {
+	return requireProvidersView(await callRuntimeSettings(agentKey, namespace, "save", { request: { provider } }, doFetch));
+}
+/** Drop one provider from the list. Does not rewrite the runtime's own config. */
+async function removeProvider(agentKey, namespace, id, doFetch) {
+	return requireProvidersView(await callRuntimeSettings(agentKey, namespace, "remove", { request: { id } }, doFetch));
+}
+
 //#endregion
 //#region src/client/HubPage.tsx
 const EMPTY_DRAFT = {
 	name: "",
-	url: ""
+	tokenUrl: ""
 };
-/** Chip text: drop the trailing slash for concision ('/claude/' → '/claude'). */
-function displayPath(path) {
-	return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
-}
 /** Shared chip look (status pills, path tags). */
 const chip = {
 	fontSize: 10,
@@ -1394,6 +2016,144 @@ 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 row's switch control (P3: the `switch` word is a real BUTTON now — the
+* row body toggles the settings panel instead, so the switch needs its own
+* hit target that stops propagation).
+*/
+const switchButtonStyle = {
+	border: "none",
+	background: "transparent",
+	padding: 0,
+	font: "inherit",
+	fontSize: 12.5,
+	color: "var(--dsw-alias-label-secondary)",
+	whiteSpace: "nowrap"
+};
+/** The inline settings panel a row body expands into (P3 accordion). */
+const panelStyle = {
+	listStyle: "none",
+	margin: "0 -8px 4px",
+	padding: "10px 12px 12px 42px",
+	borderRadius: 12,
+	background: "var(--dsw-alias-interactive-bg-hover)",
+	fontSize: 12.5
+};
+/** 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 quiet text action (reprobe) — the switch/row-action 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 row's settings panel heading. */
+const panelHeadStyle = {
+	margin: "0 0 6px",
+	fontSize: 12,
+	fontWeight: 500,
+	color: "var(--dsw-alias-label-secondary)"
+};
+/** One auth-method option's row in the panel. */
+const optionStyle = {
+	display: "flex",
+	alignItems: "baseline",
+	gap: 8,
+	width: "100%",
+	textAlign: "left",
+	border: "none",
+	background: "transparent",
+	padding: "5px 6px",
+	borderRadius: 8,
+	font: "inherit",
+	fontSize: 12.5,
+	color: "var(--dsw-alias-label-primary)"
+};
+/** 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,11 +2180,27 @@ const listStyle = {
 	flexDirection: "column",
 	gap: 2
 };
-/** A row that lights its surface on hover (inline styles have no :hover). */
-function HoverRow({ children, onClick, clickable }) {
+/** 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).
+*
+* P3: the row BODY is the settings-panel toggle, not the switch — `expanded`
+* keeps the surface lit while its panel is open, so the open row stays
+* identifiable after the pointer leaves. The switch lives in the row's button.
+*/
+function HoverRow({ children, onClick, clickable, expanded }) {
 	const [hover, setHover] = react.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 		onClick,
+		"aria-expanded": expanded,
 		onMouseEnter: () => {
 			setHover(true);
 		},
@@ -1439,7 +2215,7 @@ function HoverRow({ children, onClick, clickable }) {
 			padding: "9px 8px",
 			borderRadius: 12,
 			listStyle: "none",
-			background: hover ? "var(--dsw-alias-interactive-bg-hover)" : "transparent",
+			background: hover || expanded ? "var(--dsw-alias-interactive-bg-hover)" : "transparent",
 			cursor: clickable ? "pointer" : void 0
 		},
 		children
@@ -1476,8 +2252,693 @@ function GroupHead({ title, count, action }) {
 		]
 	});
 }
+/**
+* One runtime's settings, rendered inside its expanded row (P3/P4).
+*
+* The adapter owns the config, so this component owns no config knowledge: each
+* body asks the adapter's Remote and renders what comes back. The round trip
+* after a change is authoritative — the adapter re-reads the machine and
+* answers with the new state, which is why nothing is optimistically patched
+* here (a selection can fall through a ladder, or a switch can leave a provider
+* the runtime is still running).
+*
+* Mounted only while its row is open, so expanding always re-reads the
+* machine rather than replaying a stale first read.
+*/
+function RuntimeSettingsPanel({ agent }) {
+	const panel = settingsPanelFor(agent.key);
+	if (panel === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: {
+			margin: 0,
+			color: "var(--dsw-alias-label-tertiary)"
+		},
+		children: "No settings for this runtime yet."
+	});
+	return panel.kind === "providers" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProvidersPanel, {
+		agent,
+		namespace: panel.namespace
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuthSettingsPanel, {
+		agent,
+		namespace: panel.namespace
+	});
+}
+/**
+* The sign-in-form body (Antigravity): one form picked from the adapter's
+* ladder. `namespace` always resolves — the row would not mount this body
+* otherwise.
+*/
+function AuthSettingsPanel({ agent, namespace }) {
+	const [view, setView] = react.useState(void 0);
+	const [error, setError] = react.useState(null);
+	const [busy, setBusy] = react.useState(null);
+	const [loading, setLoading] = react.useState(true);
+	react.useEffect(() => {
+		let live = true;
+		setLoading(true);
+		fetchAuthView(agent.key, namespace).then((next) => {
+			if (live) {
+				setView(next);
+				setError(null);
+			}
+		}).catch((err) => {
+			if (live) {
+				setView(void 0);
+				setError(messageOf(err));
+			}
+		}).finally(() => {
+			if (live) setLoading(false);
+		});
+		return () => {
+			live = false;
+		};
+	}, [agent.key, namespace]);
+	const choose = (mode) => {
+		if (busy !== null) return;
+		setBusy(mode);
+		setAuthMode(agent.key, namespace, mode).then((next) => {
+			setView(next);
+			setError(null);
+		}).catch((err) => {
+			setError(messageOf(err));
+		}).finally(() => {
+			setBusy(null);
+		});
+	};
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: {
+			margin: 0,
+			color: "var(--dsw-alias-label-tertiary)"
+		},
+		children: "Loading settings…"
+	});
+	if (view === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: {
+			margin: 0,
+			color: "var(--dsw-alias-state-warn-label, var(--dsw-alias-label-secondary))"
+		},
+		children: error ?? "Settings are unavailable for this runtime."
+	});
+	const current$1 = activeMethod(view);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: panelHeadStyle,
+				children: "Sign-in method"
+			}),
+			view.methods.map((option) => {
+				const isCurrent = current$1?.key === option.key;
+				const disabled = !selectable(option) || busy !== null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": isCurrent,
+					disabled,
+					onClick: () => {
+						choose(option.key);
+					},
+					style: {
+						...optionStyle,
+						color: disabled ? "var(--dsw-alias-label-tertiary)" : "var(--dsw-alias-label-primary)",
+						cursor: disabled ? "default" : "pointer",
+						background: isCurrent ? "var(--dsw-alias-bg-elevated, transparent)" : "transparent"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							style: {
+								width: 12,
+								flex: "0 0 12px"
+							},
+							children: isCurrent ? "●" : "○"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontWeight: 500,
+								whiteSpace: "nowrap"
+							},
+							children: option.label
+						}),
+						isCurrent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: chipSelf,
+							children: "in force"
+						}),
+						!option.available && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: chip,
+							children: "not detected"
+						}),
+						option.placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: chip,
+							children: "placeholder"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								flex: 1,
+								minWidth: 0,
+								color: "var(--dsw-alias-label-tertiary)"
+							},
+							children: option.hint
+						}),
+						busy === option.key && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: chip,
+							children: "applying…"
+						})
+					]
+				}, option.key);
+			}),
+			view.note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					margin: "2px 0 0",
+					color: "var(--dsw-alias-label-tertiary)"
+				},
+				children: view.note
+			}),
+			error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					margin: "2px 0 0",
+					color: "var(--dsw-alias-state-error-primary)"
+				},
+				children: error
+			}),
+			view.settingsPath !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				style: {
+					margin: "4px 0 0",
+					color: "var(--dsw-alias-label-caption)",
+					fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+					fontSize: 11
+				},
+				children: ["writes ", view.settingsPath]
+			})
+		]
+	});
+}
+/** Field and control styling for the providers body — same visual language as the auth list. */
+const fieldStyle = {
+	display: "flex",
+	flexDirection: "column",
+	gap: 3,
+	fontSize: 12.5,
+	color: "var(--dsw-alias-label-secondary)"
+};
+const buttonStyle = {
+	font: "inherit",
+	fontSize: 12.5,
+	padding: "5px 10px",
+	borderRadius: 6,
+	border: "1px solid var(--dsw-alias-border-secondary, rgba(127,127,127,0.3))",
+	background: "transparent",
+	color: "var(--dsw-alias-label-primary)",
+	cursor: "pointer"
+};
+const primaryButtonStyle = {
+	...buttonStyle,
+	border: "none",
+	background: "var(--dsw-alias-label-primary)",
+	color: "var(--dsw-alias-bg-base, #fff)",
+	fontWeight: 500
+};
+/** The blank draft the Add form starts from. */
+const EMPTY_PROVIDER_DRAFT = {
+	id: "",
+	label: "",
+	baseUrl: "",
+	protocol: "responses",
+	authKind: "apiKey",
+	apiKey: "",
+	envName: "",
+	modelIds: "",
+	contextWindow: ""
+};
+/** `a, b c` → `['a','b','c']` — the model field takes whatever separator is natural. */
+function parseModelIds(text) {
+	return text.split(/[\s,]+/).map((part) => part.trim()).filter((part) => part !== "");
+}
+/**
+* The multi-provider body (Codex 2026-10-03 ruling; Claude 2026-10-04 rides
+* the same body with its own view shape — no `protocols` field, two header
+* auth kinds, an endpoint-URL native).
+*
+* Super D hosts the list cc-switch otherwise holds: add, edit and remove only.
+* The active/select half is gone — which provider a Codex session runs on is
+* DSH's own per-session model selection, so no row is marked "in force". What
+* the user's OWN config.toml names is rendered as a passive fact (the adapter
+* reconciles the list against that file), and the files it touches are named so
+* an edit is never a surprise.
+*
+* Keys are write-only by construction: the adapter answers `hasKey`, never a
+* value, so the field is blank on every open and blank means "leave whatever is
+* already there".
+*/
+function ProvidersPanel({ agent, namespace }) {
+	const [view, setView] = react.useState(void 0);
+	const [error, setError] = react.useState(null);
+	const [busy, setBusy] = react.useState(null);
+	const [loading, setLoading] = react.useState(true);
+	/** The id being edited, `NEW_PROVIDER` for the add form, `null` when closed. */
+	const [editing, setEditing] = react.useState(null);
+	const [draft, setDraft] = react.useState(EMPTY_PROVIDER_DRAFT);
+	react.useEffect(() => {
+		let live = true;
+		setLoading(true);
+		fetchProvidersView(agent.key, namespace).then((next) => {
+			if (live) {
+				setView(next);
+				setError(null);
+			}
+		}).catch((err) => {
+			if (live) {
+				setView(void 0);
+				setError(messageOf(err));
+			}
+		}).finally(() => {
+			if (live) setLoading(false);
+		});
+		return () => {
+			live = false;
+		};
+	}, [agent.key, namespace]);
+	/** One mutation, one authoritative re-read; `key` drives the busy chip. */
+	const run = (key, call) => {
+		if (busy !== null) return;
+		setBusy(key);
+		call().then((next) => {
+			setView(next);
+			setError(null);
+			setEditing(null);
+			setDraft(EMPTY_PROVIDER_DRAFT);
+		}).catch((err) => {
+			setError(messageOf(err));
+		}).finally(() => {
+			setBusy(null);
+		});
+	};
+	const openNew = () => {
+		setEditing(NEW_PROVIDER);
+		setDraft(EMPTY_PROVIDER_DRAFT);
+		setError(null);
+	};
+	const openEdit = (provider) => {
+		setEditing(provider.id);
+		setDraft({
+			id: provider.id,
+			label: provider.label,
+			baseUrl: provider.baseUrl,
+			protocol: provider.protocol,
+			authKind: provider.authKind,
+			apiKey: "",
+			envName: provider.envName ?? "",
+			modelIds: provider.models.map((model) => model.id).join(", "),
+			contextWindow: provider.models[0]?.contextWindow === void 0 ? "" : String(provider.models[0].contextWindow)
+		});
+		setError(null);
+	};
+	const submit = () => {
+		const ids = parseModelIds(draft.modelIds);
+		const window$1 = draft.contextWindow.trim() === "" ? void 0 : Number(draft.contextWindow);
+		const provider = {
+			id: draft.id.trim(),
+			label: draft.label.trim(),
+			baseUrl: draft.baseUrl.trim(),
+			protocol: draft.protocol,
+			auth: draft.authKind === "env" ? {
+				kind: "env",
+				name: draft.envName.trim()
+			} : {
+				kind: draft.authKind === "authToken" ? "authToken" : "apiKey",
+				value: draft.apiKey
+			},
+			models: ids.map((id) => ({
+				id,
+				...window$1 !== void 0 && Number.isSafeInteger(window$1) && window$1 > 0 ? { contextWindow: window$1 } : {}
+			}))
+		};
+		run("save", () => saveProvider(agent.key, namespace, provider));
+	};
+	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: {
+			margin: 0,
+			color: "var(--dsw-alias-label-tertiary)"
+		},
+		children: "Loading providers…"
+	});
+	if (view === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		style: {
+			margin: 0,
+			color: "var(--dsw-alias-state-warn-label, var(--dsw-alias-label-secondary))"
+		},
+		children: error ?? "Providers are unavailable for this runtime."
+	});
+	const nativePaths = nativePathsLine(view.paths);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: panelHeadStyle,
+				children: "Model provider"
+			}),
+			view.native !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				style: {
+					margin: 0,
+					color: "var(--dsw-alias-label-tertiary)"
+				},
+				children: [
+					"Your own ",
+					agent.label,
+					" config currently runs ",
+					nativeDescription(view.native),
+					"."
+				]
+			}),
+			view.syncedAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				style: {
+					margin: 0,
+					color: "var(--dsw-alias-label-caption)",
+					fontSize: 11
+				},
+				children: ["synced from your native config ", new Date(view.syncedAt).toLocaleString()]
+			}),
+			view.providers.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					margin: 0,
+					color: "var(--dsw-alias-label-tertiary)"
+				},
+				children: "No providers yet — add one to pin a model and endpoint."
+			}),
+			view.providers.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: optionStyle,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontWeight: 500,
+							whiteSpace: "nowrap"
+						},
+						children: provider.label
+					}),
+					provider.authKind === "env" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: chip,
+						children: ["env ", provider.envName]
+					}),
+					provider.authKind === "authToken" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: chip,
+						children: "token"
+					}),
+					!provider.hasKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: chip,
+						children: "no key"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: {
+							flex: 1,
+							minWidth: 0,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							fontSize: 12,
+							color: "var(--dsw-alias-label-tertiary)"
+						},
+						children: [provider.baseUrl, provider.models.length === 0 ? "" : ` · ${provider.models.map((model) => model.id).join(", ")}`]
+					}),
+					provider.models.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: chipWarn,
+						children: "no models yet — add one"
+					}),
+					busy === `remove:${provider.id}` && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: chip,
+						children: "removing…"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						style: buttonStyle,
+						disabled: busy !== null,
+						onClick: () => {
+							openEdit(provider);
+						},
+						children: "Edit"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						style: {
+							...buttonStyle,
+							color: "var(--dsw-alias-state-error-primary, #c66)"
+						},
+						disabled: busy !== null,
+						"aria-label": `Delete ${provider.label}`,
+						onClick: () => {
+							run(`remove:${provider.id}`, () => removeProvider(agent.key, namespace, provider.id));
+						},
+						children: "Delete"
+					})
+				]
+			}, provider.id)),
+			editing === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				style: buttonStyle,
+				disabled: busy !== null,
+				onClick: openNew,
+				children: "+ Add provider"
+			}) }),
+			editing !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 8,
+					maxWidth: 520
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: panelHeadStyle,
+						children: editing === NEW_PROVIDER ? "Add provider" : `Edit ${editing}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Provider id", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							style: inputStyle,
+							value: draft.id,
+							disabled: editing !== NEW_PROVIDER,
+							placeholder: "zai-plan",
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									id: event.target.value
+								});
+							}
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Display name", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							style: inputStyle,
+							value: draft.label,
+							placeholder: "Z.ai Plan",
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									label: event.target.value
+								});
+							}
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Base URL", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							style: inputStyle,
+							value: draft.baseUrl,
+							placeholder: "https://api.z.ai/api/coding/paas/v4",
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									baseUrl: event.target.value
+								});
+							}
+						})]
+					}),
+					view.protocols.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["API protocol", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+							style: inputStyle,
+							value: draft.protocol,
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									protocol: event.target.value
+								});
+							},
+							children: view.protocols.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+								value: option.value,
+								disabled: !option.available,
+								title: option.hint,
+								children: [option.label, option.available ? "" : " — unsupported"]
+							}, option.value))
+						})]
+					}), (() => {
+						const option = view.protocols.find((candidate) => candidate.value === draft.protocol);
+						return option === void 0 || option.available ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							style: {
+								margin: 0,
+								color: "var(--dsw-alias-state-error-primary, #c66)",
+								fontSize: 12
+							},
+							children: option.hint
+						});
+					})()] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Model IDs", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							style: inputStyle,
+							value: draft.modelIds,
+							placeholder: "glm-5.2, glm-5.2-air",
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									modelIds: event.target.value
+								});
+							}
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Context window (tokens, optional)", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							style: inputStyle,
+							value: draft.contextWindow,
+							inputMode: "numeric",
+							placeholder: "1000000",
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									contextWindow: event.target.value
+								});
+							}
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Key shape", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+							style: inputStyle,
+							value: draft.authKind,
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									authKind: event.target.value
+								});
+							},
+							children: authKindOptions(view).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: option.value,
+								title: option.hint,
+								children: option.label
+							}, option.value))
+						})]
+					}),
+					draft.authKind === "env" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: ["Environment variable", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							style: inputStyle,
+							value: draft.envName,
+							placeholder: "DEEPSEEK_API_KEY",
+							onChange: (event) => {
+								setDraft({
+									...draft,
+									envName: event.target.value
+								});
+							}
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						style: fieldStyle,
+						children: [
+							draft.authKind === "authToken" ? "Bearer token" : "API key",
+							" ",
+							editing !== NEW_PROVIDER && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { color: "var(--dsw-alias-label-caption)" },
+								children: "(leave blank to keep the saved one)"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								style: inputStyle,
+								type: "password",
+								value: draft.apiKey,
+								autoComplete: "off",
+								onChange: (event) => {
+									setDraft({
+										...draft,
+										apiKey: event.target.value
+									});
+								}
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							gap: 6
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							style: primaryButtonStyle,
+							disabled: busy !== null,
+							onClick: submit,
+							children: busy === "save" ? "Saving…" : "Save"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							style: buttonStyle,
+							disabled: busy !== null,
+							onClick: () => {
+								setEditing(null);
+								setDraft(EMPTY_PROVIDER_DRAFT);
+							},
+							children: "Cancel"
+						})]
+					})
+				]
+			}),
+			view.note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					margin: "2px 0 0",
+					color: "var(--dsw-alias-label-tertiary)"
+				},
+				children: view.note
+			}),
+			error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					margin: "2px 0 0",
+					color: "var(--dsw-alias-state-error-primary)"
+				},
+				children: error
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				style: {
+					margin: "4px 0 0",
+					color: "var(--dsw-alias-label-caption)",
+					fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+					fontSize: 11
+				},
+				children: ["list ", view.paths.store]
+			}),
+			nativePaths !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				style: {
+					margin: 0,
+					color: "var(--dsw-alias-label-caption)",
+					fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+					fontSize: 11
+				},
+				children: ["native ", nativePaths]
+			})
+		]
+	});
+}
+/** Sentinel for "the add form", distinct from any real provider id. */
+const NEW_PROVIDER = "\0new";
 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);
@@ -1486,6 +2947,11 @@ function HubPage() {
 	const fusion = fusionPage();
 	const switchUi = switchAffordance(fusion);
 	const [activeKey, setActiveKey] = react.useState(() => fusion ? uiState()?.activeAgent : void 0);
+	/**
+	* The open settings panel (P3 accordion): one runtime key at a time, or
+	* `null` when every row is collapsed. `toggleExpanded` owns the transition.
+	*/
+	const [expandedKey, setExpandedKey] = react.useState(null);
 	react.useEffect(() => {
 		let cancelled = false;
 		fetchRoster().then((list) => {
@@ -1503,6 +2969,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 +2996,7 @@ function HubPage() {
 		});
 	}, [fusion]);
 	const here = currentMountPath();
+	const hereOrigin = typeof location === "undefined" ? "" : location.origin;
 	const isActive = (agent) => hubRowActive({
 		fusion,
 		agentKey: agent.key,
@@ -1534,30 +3019,116 @@ 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).
+	*
+	* P3 interaction (2026-10-02 user ruling): the ROW BODY expands this
+	* runtime's OWN settings inline (accordion — one panel at a time), and the
+	* right-hand `switch` is the row's ONLY switch, now a real button. The two
+	* are separate controls on purpose: expanding is navigation of config, the
+	* button performs `seatClickDecision` (intercept + in-place switchAgent).
+	*/
+	const renderRow = (agent, showMachine) => {
+		const expanded = expandedKey === agent.key;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverRow, {
+			clickable: true,
+			expanded,
+			onClick: () => {
+				setExpandedKey((current$1) => toggleExpanded(current$1, agent.key));
+			},
+			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
+				}),
+				isActive(agent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: chipSelf,
+					children: "current"
+				}),
+				switchUi.available && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-current": isActive(agent) ? "page" : void 0,
+					"aria-label": isActive(agent) ? `${agent.label} is current` : `Switch to ${agent.label}`,
+					style: {
+						...switchButtonStyle,
+						color: isActive(agent) ? "var(--dsw-alias-label-tertiary)" : "var(--dsw-alias-label-secondary)",
+						cursor: "pointer"
+					},
+					onClick: (event) => {
+						event.stopPropagation();
+						rowDecision(agent, event);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconPlayOutlineRegular, { size: 16 })
+				})
+			]
+		}), expanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+			style: panelStyle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuntimeSettingsPanel, { agent })
+		})] }, 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 removeRemote = (id) => {
+		removeMachine(id).then(() => {
+			setMeshError(null);
+			reloadMachines();
+		}).catch((err) => {
+			setMeshError(errText(err));
+		});
 	};
-	const removeMachine = (id) => {
-		persist(machines.filter((machine) => machine.id !== id));
+	const reprobeRemote = (id) => {
+		reprobeMachine(id).then(() => {
+			setMeshError(null);
+			reloadMachines();
+		}).catch((err) => {
+			setMeshError(errText(err));
+		});
 	};
-	const draftValid = draft.name.trim() !== "" && draft.url.trim() !== "";
+	const draftValid = draft.name.trim() !== "" && validTokenUrl(draft.tokenUrl.trim());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
 			display: "flex",
@@ -1685,7 +3256,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 +3290,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 +3464,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 +3502,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 +3555,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 +3631,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 +3683,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 +3708,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 +3727,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
@@ -2253,8 +3850,7 @@ function apply(ctx) {
 		"connection",
 		"uiWorkspace",
 		"workspaces",
-		"sessions",
-		"locale"
+		"sessions"
 	], (raw) => {
 		bindSwitchAgent(raw);
 	});