@lifeaitools/clauth 2.1.1 → 2.10.0

package/cli/dashboard/panels/surfaces-panel.css

@@ -0,0 +1,59 @@
+/* cli/dashboard/panels/surfaces-panel.css
+   The Local Software Factory Supervisor -- surfaces grid + operations/log
+   (data-panel="surfaces-log"). Owned entirely by surfaces-panel.js.
+   Depends on the tokens in ../global.css, loaded before this file. */
+.supervisor-panel{margin:14px 16px;border:1px solid var(--panel-border);background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(10,15,26,.98));border-radius:12px;padding:14px}
+.supervisor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
+.supervisor-title{font-size:.95rem;font-weight:700;color:var(--text-bright)}
+.supervisor-sub{font-size:.76rem;color:var(--grey);margin-top:3px;line-height:1.35}
+.supervisor-actions{display:flex;gap:8px;flex-wrap:wrap}
+.supervisor-action{background:var(--bg-dark);color:var(--grey-light);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:.75rem;cursor:pointer}
+.supervisor-action:hover:not(:disabled){background:var(--bg-card);border-color:var(--grey-darker)}
+/* Visible but inert until a surface is selected — the operator can always
+   SEE which commands exist, which is the whole point of showing them. */
+.supervisor-action:disabled{opacity:.42;cursor:not-allowed}
+/* The selected row has to be unmistakable, otherwise "which surface am I
+   about to restart?" is a guess. */
+.supervisor-row.selected{border-color:var(--cyan);background:rgba(56,189,248,.10)}
+.supervisor-action:hover{border-color:var(--cyan);color:#e0f2fe}
+/* stretch: both cards get the height of the taller one, so the log card is
+   as tall as the surfaces card instead of shrink-wrapping its text. */
+.supervisor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:stretch}
+.supervisor-card{border:1px solid var(--bg-card);background:rgba(2,6,23,.52);border-radius:10px;padding:10px;min-width:0;display:flex;flex-direction:column}
+/* Right-hand column: log on top, WebDAV beneath it. WebDAV never needed the
+   full page width, and taking it out of the full-width flow is what gives
+   Surfaces the whole left column to grow into. */
+.supervisor-col{display:flex;flex-direction:column;gap:10px;min-width:0}
+.supervisor-col > .supervisor-card:first-child{flex:1 1 auto;min-height:0}
+.supervisor-card h4{margin:0 0 8px;color:var(--grey-light);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
+.supervisor-kpi{font-size:1.35rem;font-weight:700;color:var(--text-white)}
+.supervisor-meta{font-size:.72rem;color:var(--grey);font-family:'Courier New',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.supervisor-pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;margin:2px 4px 2px 0;font-size:.68rem;border:1px solid var(--border);color:var(--grey-light);background:var(--bg-dark)}
+.supervisor-pill.ok{border-color:rgba(74,222,128,.35);color:var(--green-light);background:rgba(34,197,94,.08)}
+.supervisor-pill.warn{border-color:rgba(250,204,21,.35);color:var(--gold-light);background:rgba(250,204,21,.08)}
+.supervisor-pill.bad{border-color:rgba(248,113,113,.35);color:var(--pink);background:rgba(248,113,113,.08)}
+/* Card GRID, not a stack. flex-direction:column gave one full-width row per
+   surface, so ten surfaces meant ten rows and constant scrolling to see the
+   fleet. auto-fill + minmax packs as many small cards per row as the panel
+   width allows and reflows on resize, with no breakpoint to maintain. */
+.supervisor-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:7px;max-height:520px;overflow:auto;align-content:start}
+.supervisor-row{border:1px solid var(--bg-card);border-radius:8px;padding:8px 9px;background:rgba(15,23,42,.45);cursor:pointer;display:flex;flex-direction:column;gap:4px}
+.supervisor-row:hover{border-color:var(--border)}
+.supervisor-row.selected{border-color:var(--cyan);background:rgba(56,189,248,.08)}
+.supervisor-row.readonly{cursor:default}
+/* Narrow cards cannot hold name + two pills + a button on one line, so the
+   header wraps instead of squashing the name to an ellipsis. */
+.supervisor-row-top{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
+.supervisor-name{font-size:.82rem;color:var(--text-bright);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.supervisor-row-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
+.supervisor-cmdbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px;padding:8px;border:1px solid var(--bg-card);border-radius:8px;background:rgba(2,6,23,.4);min-height:36px}
+.supervisor-cmdbar-empty{font-size:.74rem;color:var(--grey-dim)}
+.supervisor-cmdbar-name{font-size:.78rem;color:var(--text-bright);font-weight:600;margin-right:4px}
+/* flex:1 + min-height:0 makes the log fill whatever height the card has
+   instead of stopping at its content. min-height:0 is load-bearing: without
+   it a flex child refuses to shrink below content size and the box overflows
+   the card rather than scrolling inside it. */
+.supervisor-log{flex:1 1 auto;min-height:220px;font-family:'Courier New',monospace;font-size:.7rem;color:var(--grey);white-space:pre-wrap;word-break:break-word;overflow:auto;background:rgba(2,6,23,.55);border:1px solid var(--bg-card);border-radius:6px;padding:7px}
+.supervisor-log-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.supervisor-feedback{margin-top:8px;padding:7px 9px;border-radius:6px;font-family:'Courier New',monospace;font-size:.72rem;color:var(--green-light);background:rgba(34,197,94,.08);border:1px solid rgba(74,222,128,.22);display:none}
+.supervisor-feedback.bad{color:var(--pink);background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25)}

package/cli/dashboard/panels/surfaces-panel.js

@@ -0,0 +1,474 @@
+// cli/dashboard/panels/surfaces-panel.js
+// The Surfaces/Supervisor panel, as a real Web Component: <clauth-surfaces-panel>.
+// Owns its own Shadow DOM for plugin discovery, surface cards, cmdbar
+// actions (start/stop/restart/reconcile/test/promote/rollback), health
+// polling, and the log tail -- same conversion shape as tunnel-panel.js (the
+// reference implementation): a class extending window.ClauthPanelElement,
+// its own template()/mount(), instance state instead of module-level `let`,
+// and mount() -- not connectedCallback() -- doing the real fetch/poll work.
+// connectedCallback() (panel-element.js) fires during HTML parsing, before
+// dashboard.js (and its BASE/writeHeaders/htmlEscape globals) has loaded;
+// calling real logic there throws a live "X is not defined" a vm-based test
+// harness would never catch. mount() is instead called explicitly by
+// ClauthPanelRegistry.mountAll(), after every script has loaded.
+//
+// Scope note: this panel owns the SURFACES GRID + OPERATIONS/LOG only. The
+// WebDAV Mounts card that used to sit physically nested inside the same
+// served <section> is a SEPARATE concern already converted to its own
+// component (<clauth-webdav-panel>, see webdav-panel.js/webdav-panel.css) --
+// it is not reproduced here. The served HTML swap (serve.js) needs to place
+// <clauth-webdav-panel> as a sibling of this tag, not inside it.
+//
+// htmlEscape()/writeHeaders() (shared with every panel) stay in dashboard.js
+// -- referenced here, not duplicated.
+//
+// Loaded as a plain classic <script> (not type="module") BEFORE dashboard.js
+// -- same pattern as every other panel component.
+
+// ── Pure helpers/constants (no `this`, no shadow-DOM access needed) ────────
+const SUPERVISOR_SURFACE_ACTIONS = ["start", "stop", "restart", "reconcile", "test", "promote", "rollback"];
+
+const CLAUTH_SELF_PSEUDO_SURFACE = {
+  __pseudo: true,
+  id: "clauth:mcp-sse",
+  plugin_id: "clauth",
+  name: "clauth (self)",
+  lifecycle_owner: "external",
+  destination: "self",
+  state: "self_managed",
+  port: null,
+  health: null,
+};
+
+// "2m ago" / "just now" — an absolute ISO timestamp on a card answers the
+// wrong question; what matters is how stale the reading is.
+function healthAge(iso) {
+  const then = Date.parse(iso || "");
+  if (!then) return "";
+  const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
+  if (secs < 10) return "just now";
+  if (secs < 90) return secs + "s ago";
+  if (secs < 5400) return Math.round(secs / 60) + "m ago";
+  return Math.round(secs / 3600) + "h ago";
+}
+
+function supervisorBadge(text, kind) {
+  return '<span class="supervisor-pill ' + (kind || '') + '">' + htmlEscape(text) + '</span>';
+}
+
+async function supervisorJson(path, options) {
+  const response = await fetch(BASE + path, { cache: "no-store", ...(options || {}) });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok || data.error) throw new Error(data.error || ("HTTP " + response.status));
+  return data;
+}
+
+// An MCP transport endpoint is not a page. Opening /mcp, /sse or /message in a
+// browser tab gets you a raw event stream — literally "event: endpoint / data:
+// https://host/message?sessionId=..." — which is what the Open button did.
+// Strip the transport segment and open the service root, which is the only
+// thing a browser can render.
+const MCP_TRANSPORT_PATHS = ["/mcp", "/sse", "/message", "/messages", "/stream"];
+function browsableUrl(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = new URL(raw);
+    const trimmed = parsed.pathname.replace(/\/+$/, "").toLowerCase();
+    if (MCP_TRANSPORT_PATHS.includes(trimmed)) {
+      parsed.pathname = "/";
+      parsed.search = "";
+    }
+    return parsed.toString();
+  } catch (e) {
+    return raw;
+  }
+}
+
+// Derives an "Open UI" target for a surface without storing one on disk —
+// a real localhost port wins, else the first externally-routable URL.
+// Always the service ROOT: a surface's health path (/health, /api/version) is
+// a probe target, not a page, and several surfaces 404 at it.
+function openUiUrlForSurface(surface) {
+  if (surface.port && surface.port !== "auto") return "http://127.0.0.1:" + surface.port + "/";
+  const external = (surface.routes || []).find(r => r.kind === "external" && r.url);
+  return external ? browsableUrl(external.url) : null;
+}
+
+class ClauthSurfacesPanel extends window.ClauthPanelElement {
+  static tagName = "clauth-surfaces-panel";
+  static cssHref = "/dashboard/panels/surfaces-panel.css";
+
+  template() {
+    return `
+    <div class="supervisor-head">
+      <div>
+        <div class="supervisor-title">Local Software Factory Supervisor</div>
+        <div class="supervisor-sub">clauth owns local LIFEAI plugin discovery, candidate tests, clauth-owned surface operations, receipts, and supervisor event logs. Dev Center should call this surface instead of PM2 directly.</div>
+      </div>
+      <div class="supervisor-actions">
+        <button class="supervisor-action" id="supervisor-refresh-btn" data-action="refreshSurfaceHealth" title="Re-probe every surface's health endpoint now">Refresh</button>
+        <button class="supervisor-action" data-action="rescanSupervisorPlugins">Rescan plugins</button>
+      </div>
+    </div>
+    <div id="supervisor-status" class="supervisor-sub">Loading supervisor state…</div>
+    <div id="supervisor-feedback" class="supervisor-feedback" role="status"></div>
+    <div class="supervisor-grid" style="margin-top:10px">
+      <div class="supervisor-card">
+        <h4>Surfaces</h4>
+        <div class="supervisor-kpi" id="supervisor-surface-count">—</div>
+        <div class="supervisor-meta" id="supervisor-surface-meta">destination + owner matrix</div>
+        <div class="supervisor-cmdbar" id="supervisor-cmdbar"><span class="supervisor-cmdbar-empty">Select a surface below to act on it.</span></div>
+        <div class="supervisor-list" id="supervisor-surfaces" style="margin-top:8px"></div>
+      </div>
+      <div class="supervisor-col">
+        <div class="supervisor-card">
+          <div class="supervisor-log-head">
+            <h4 style="margin:0 0 8px">Operations + log</h4>
+            <button class="supervisor-action" style="margin-left:auto" data-action="openFullLog" title="Open the full clauth daemon log in a new tab">Open log</button>
+          </div>
+          <div class="supervisor-log-head">
+            <div class="supervisor-kpi" id="supervisor-operation-count">—</div>
+            <div class="supervisor-meta">operations recorded</div>
+          </div>
+          <div class="supervisor-meta" id="supervisor-log-path">events.jsonl</div>
+          <div class="supervisor-log" id="supervisor-events" style="margin-top:8px">No events loaded.</div>
+        </div>
+      </div>
+    </div>
+    `;
+  }
+
+  mount() {
+    this.selectedSupervisorSurface = null; // { id, name } | null
+    this.lastSupervisorSurfaceRows = [];
+    this.logTailStarted = false;
+    this.lastHealthProbeAt = 0;
+    this.cockpitLoadedOnce = false;
+    this.loadSupervisorCockpit();
+    this.startSupervisorLogTail();
+  }
+
+  startSupervisorLogTail() {
+    if (this.logTailStarted) return; // mount() can in principle run more than once
+    this.logTailStarted = true;
+    // 3s was far too aggressive for a panel nobody watches continuously, and it
+    // was self-defeating: each tick issues GET /health + /v1/surfaces + the log
+    // read, and the request logger writes a line for each — so the dashboard was
+    // the dominant author of the very log it renders. 15s keeps the panel live
+    // without the panel being the workload.
+    setInterval(() => this.loadSupervisorCockpit(), 15000);
+    // Re-probe health when the operator comes BACK to the window. A dashboard
+    // left open for an hour is showing an hour-old answer to "is it up?", and
+    // the moment you look at it is exactly when you want that answer to be now.
+    // Cheap because it is read-only (no restarts) and debounced.
+    window.addEventListener("focus", () => { this.refreshSurfaceHealth({ quiet: true }); });
+  }
+
+  // Read-only sweep: POST /v1/surfaces/health probes every surface and records
+  // the result, then the cockpit reload paints it. Never starts or restarts
+  // anything, so it is safe to fire on a focus event.
+  async refreshSurfaceHealth(options) {
+    const quiet = Boolean(options && options.quiet);
+    // A focus event fires on every alt-tab; without this a quick tab dance would
+    // queue a probe per switch against the same endpoints.
+    if (quiet && Date.now() - this.lastHealthProbeAt < 5000) return;
+    this.lastHealthProbeAt = Date.now();
+    const btn = this.$("#supervisor-refresh-btn");
+    if (btn) { btn.disabled = true; btn.textContent = "Probing…"; }
+    try {
+      const result = await supervisorJson("/v1/surfaces/health", { method: "POST" });
+      const probed = result.probed || [];
+      const down = probed.filter(p => p.health === "down");
+      if (!quiet || down.length) {
+        this.supervisorFeedback(
+          down.length
+            ? down.length + " of " + probed.length + " surfaces not answering: " + down.map(p => p.surface_id).join(", ")
+            : "All " + probed.filter(p => p.health !== "no_probe").length + " probed surfaces healthy.",
+          down.length > 0);
+      }
+    } catch (err) {
+      if (!quiet) this.supervisorFeedback("Health probe failed: " + (err.message || err), true);
+    } finally {
+      if (btn) { btn.disabled = false; btn.textContent = "Refresh"; }
+    }
+    await this.loadSupervisorCockpit();
+  }
+
+  supervisorFeedback(text, bad) {
+    const el = this.$("#supervisor-feedback");
+    if (!el) return;
+    el.textContent = text || "";
+    el.className = "supervisor-feedback" + (bad ? " bad" : "");
+    el.style.display = text ? "block" : "none";
+  }
+
+  async loadSupervisorCockpit() {
+    const status = this.$("#supervisor-status");
+    // Only announce loading on the FIRST paint. On a background poll this
+    // overwrote the healthy/vault/version badges with "Loading supervisor state…"
+    // every tick, so the panel visibly flashed on a fixed cadence forever.
+    if (status && !this.cockpitLoadedOnce) status.textContent = "Loading supervisor state…";
+    try {
+      const [health, surfaces, logs, daemonLog] = await Promise.all([
+        supervisorJson("/health"),
+        supervisorJson("/v1/surfaces"),
+        supervisorJson("/v1/logs?limit=40"),
+        // The Operations card tails the clauth DAEMON log — the actual
+        // clauth-serve.log an operator means by "the clauth log" — not the
+        // supervisor's events.jsonl, which is a separate plugin-event stream.
+        fetch(BASE + "/v1/daemon-log?lines=60").then(r => r.json()).catch(() => null),
+      ]);
+      const surfaceRows = [CLAUTH_SELF_PSEUDO_SURFACE, ...(surfaces.surfaces || [])];
+      this.lastSupervisorSurfaceRows = surfaceRows;
+      if (this.selectedSupervisorSurface && !surfaceRows.some(s => (s.plugin_id + ":" + s.id) === this.selectedSupervisorSurface.id)) {
+        this.selectedSupervisorSurface = null;
+      }
+      this.$("#supervisor-surface-count").textContent = String(surfaceRows.length - 1);
+      this.$("#supervisor-operation-count").textContent = String((logs.operations || []).length);
+      this.$("#supervisor-surface-meta").textContent = "pm2 home: " + (health.pm2_home || "—");
+      // Name the file actually being shown. It said events.jsonl while rendering
+      // the daemon log, which makes the card unverifiable — you cannot go look at
+      // the file it claims to be tailing.
+      this.$("#supervisor-log-path").textContent =
+        (daemonLog && daemonLog.log_path) || logs.log_path || "events.jsonl";
+      // Replacing innerHTML resets scrollTop to 0. The surfaces list is taller
+      // than its box, so on every poll tick the row you were looking at — or had
+      // just selected — scrolled out from under you. That is the "jumps up and
+      // down": not the data changing, the scroll position being thrown away on a
+      // fixed cadence. Preserve it across the swap.
+      const surfacesEl = this.$("#supervisor-surfaces");
+      const keepScroll = surfacesEl.scrollTop;
+      surfacesEl.innerHTML = surfaceRows.map(s => this.renderSupervisorSurface(s)).join("");
+      surfacesEl.scrollTop = keepScroll;
+      this.renderSupervisorCmdbar();
+      this.cockpitLoadedOnce = true;
+      const logEl = this.$("#supervisor-events");
+      // Newest-at-bottom, like a real tail -- and only auto-scroll if the
+      // reader was already at the bottom, so scrolling up to read history
+      // during a poll tick doesn't get yanked back down.
+      const wasAtBottom = logEl.scrollHeight - logEl.scrollTop - logEl.clientHeight < 12;
+      // Real daemon log when it is reachable; supervisor events only as a
+      // fallback so the card is never blank if the tail route fails.
+      if (daemonLog && Array.isArray(daemonLog.lines) && daemonLog.lines.length) {
+        logEl.textContent = daemonLog.lines.join("\n");
+      } else {
+        logEl.textContent = (logs.events || []).slice(-40).map(e => {
+          const label = e.kind === "operation" ? (e.action + " " + JSON.stringify(e.target || {})) : (e.kind + " " + (e.plugin_id || ""));
+          return (e.ts || e.created_at || "") + "  " + label;
+        }).join("\n") || "No events yet.";
+      }
+      if (wasAtBottom) logEl.scrollTop = logEl.scrollHeight;
+      if (status) status.innerHTML = supervisorBadge("supervisor " + (health.status === "ok" ? "healthy" : (health.status || "unknown")), health.status === "ok" ? "ok" : "warn") + supervisorBadge("vault " + (health.vault_locked ? "locked" : "unlocked"), health.vault_locked ? "warn" : "ok") + supervisorBadge("v" + (health.clauth_version || window.__CLAUTH_VERSION__), "");
+    } catch (err) {
+      if (status) status.innerHTML = supervisorBadge("supervisor unreachable", "bad") + " " + htmlEscape(err.message || err);
+      this.supervisorFeedback("Supervisor unavailable — actions are disabled until the local control plane returns.", true);
+    }
+  }
+
+  openFullLog() {
+    window.open(BASE + "/v1/daemon-log?format=text&lines=4000", "_blank");
+  }
+
+  // Per-item dynamic args (which card was clicked) come off data-* attributes
+  // on the clicked element -- the standard delegated-event pattern (see
+  // tunnel-panel.js's wizSelectTunnel).
+  selectSupervisorSurface(e, el) {
+    const compositeId = el.dataset.surfaceId;
+    const name = el.dataset.surfaceName;
+    this.selectedSupervisorSurface = this.selectedSupervisorSurface && this.selectedSupervisorSurface.id === compositeId
+      ? null // clicking the already-selected card deselects it
+      : { id: compositeId, name };
+    this.$$(".supervisor-row[data-surface-id]").forEach(row => {
+      row.classList.toggle("selected", row.dataset.surfaceId === (this.selectedSupervisorSurface && this.selectedSupervisorSurface.id));
+    });
+    this.renderSupervisorCmdbar();
+  }
+
+  renderSupervisorCmdbar() {
+    const bar = this.$("#supervisor-cmdbar");
+    if (!bar) return;
+    // The buttons are ALWAYS rendered — disabled until a surface is selected,
+    // never hidden. A control you cannot see is a control that does not exist.
+    const sel = this.selectedSupervisorSurface;
+    const enable = Boolean(sel);
+    const label = sel
+      ? '<span class="supervisor-cmdbar-name">' + htmlEscape(sel.name) + '</span>'
+      : '<span class="supervisor-cmdbar-empty">Select a surface &rarr;</span>';
+    bar.innerHTML = label + SUPERVISOR_SURFACE_ACTIONS.map(a =>
+      '<button class="supervisor-action" data-supervisor-action="' + a + '"'
+      + (enable
+        ? ' data-action="runSupervisorSurface" data-surface-id="' + htmlEscape(sel.id) + '" data-surface-action="' + a + '"'
+        : ' disabled')
+      + '>' + a + '</button>').join("");
+  }
+
+  renderSupervisorSurface(surface) {
+    const compositeId = surface.plugin_id + ":" + surface.id;
+    const ownerKind = surface.lifecycle_owner === "clauth" ? "ok" : (surface.lifecycle_owner === "plugin" ? "warn" : "");
+    const stateKind = surface.state === "current" || surface.status === "healthy" ? "ok" : (surface.state === "unavailable" ? "bad" : "warn");
+    const openUrl = surface.__pseudo ? null : openUiUrlForSurface(surface);
+    const isSelected = this.selectedSupervisorSurface && this.selectedSupervisorSurface.id === compositeId;
+    const rowClass = "supervisor-row" + (surface.__pseudo ? " readonly" : "") + (isSelected ? " selected" : "");
+    const rowAction = surface.__pseudo ? "" : ' data-action="selectSupervisorSurface" data-surface-id="' + htmlEscape(compositeId) + '" data-surface-name="' + htmlEscape(surface.name || compositeId) + '"';
+    // The Open button tells the truth about where it lands. last_open_ok comes
+    // from the same read-only sweep that fills the health pill: three surfaces in
+    // the live fleet are healthy at /health and 404 at /, because an MCP server
+    // has no browsable page. Those get sent to their health endpoint — a real
+    // response — and the button says so, instead of opening an error page.
+    const openTarget = surface.last_open_ok === false && surface.last_health_url
+      ? surface.last_health_url
+      : openUrl;
+    const openLabel = surface.last_open_ok === false ? "Open health" : "Open UI";
+    const openTitle = surface.last_open_ok === false
+      ? "This surface has no browsable page (its root answered with an error) — opening its health endpoint instead"
+      : "Open this surface";
+    const openBtn = surface.__pseudo
+      ? '<button class="supervisor-action" data-action="openClauthSelfMcp" title="Open clauth\'s own MCP endpoint">Open</button>'
+      : (openTarget ? '<button class="supervisor-action" data-action="openSupervisorSurfaceLink" data-open-target="' + htmlEscape(openTarget) + '" title="' + htmlEscape(openTitle) + '">' + openLabel + '</button>' : "");
+    // Health is a RUNTIME fact and gets its own pill — "state" is a manifest
+    // fact (registered + enabled + hash unchanged) and stays "current" for a
+    // surface that is not listening at all, which is why it cannot double as a
+    // status light.
+    const healthPill = surface.__pseudo
+      ? supervisorBadge("self", "")
+      : (surface.last_health_ok === true ? supervisorBadge("up · " + healthAge(surface.last_health_at), "ok")
+        : surface.last_health_ok === false ? supervisorBadge("DOWN · " + healthAge(surface.last_health_at), "bad")
+        : supervisorBadge("health unknown", "warn"));
+    const healthLine = surface.__pseudo
+      ? "clauth's own MCP endpoint"
+      : (surface.last_health_ok === false && surface.last_health_error
+        ? surface.last_health_error + " · " + (surface.health || "no health")
+        : (surface.health || surface.health_url || "no health"));
+    return '<div class="' + rowClass + '" data-surface-id="' + htmlEscape(compositeId) + '"' + rowAction + '>' +
+      '<div class="supervisor-row-top"><span class="supervisor-name">' + htmlEscape(surface.name || compositeId) + '</span>' +
+      healthPill +
+      supervisorBadge(surface.lifecycle_owner || "unknown", ownerKind) + supervisorBadge(surface.state || surface.status || "unknown", stateKind) +
+      openBtn +
+      '</div>' +
+      '<div class="supervisor-meta">' + htmlEscape(surface.destination || "—") + ' · port ' + htmlEscape(surface.port || "—") + '</div>' +
+      '<div class="supervisor-meta">' + htmlEscape(healthLine) + '</div>' +
+      '</div>';
+  }
+
+  async rescanSupervisorPlugins() {
+    try {
+      await supervisorJson("/v1/plugins/rescan", { method: "POST", headers: writeHeaders() });
+      this.supervisorFeedback("Plugin rescan completed.", false);
+      await this.loadSupervisorCockpit();
+    } catch (err) { this.supervisorFeedback("Plugin rescan failed: " + (err.message || err), true); }
+  }
+
+  async runSupervisorSurface(id, action) {
+    // The action is SYNCHRONOUS on the daemon: it spawns the declared command and
+    // blocks until that command exits or the surface's timeout (30s default)
+    // fires, then answers with the receipt. So the click blocks — say so, and
+    // disable the bar rather than leaving buttons live and looking ignored.
+    const bar = this.$("#supervisor-cmdbar");
+    const buttons = bar ? Array.from(bar.querySelectorAll("button")) : [];
+    buttons.forEach(b => { b.disabled = true; });
+    const pressed = buttons.find(b => b.dataset.supervisorAction === action);
+    const pressedLabel = pressed ? pressed.textContent : action;
+    if (pressed) pressed.textContent = action + "…";
+    this.supervisorFeedback("Running " + action + " on " + id + " — waiting for the command to exit…", false);
+    try {
+      const receipt = await supervisorJson("/v1/surfaces/" + encodeURIComponent(id) + "/actions", { method: "POST", headers: writeHeaders({ "Content-Type": "application/json" }), body: JSON.stringify({ action }) });
+      const result = receipt.resulting_state || {};
+      // exit 0 from "pm2 start" means pm2 ACCEPTED the command, not that the
+      // service is listening — that gap is how a surface reads "operation
+      // completed" while nothing answers on its port. For the actions that are
+      // supposed to change liveness, go ask the health endpoint.
+      let verdict = result.state || "completed";
+      if (result.ok !== false && ["start", "restart", "reconcile", "stop"].includes(action)) {
+        const sweep = await supervisorJson("/v1/surfaces/health", { method: "POST" }).catch(() => null);
+        const mine = sweep && (sweep.probed || []).find(p => p.surface_id === id);
+        if (mine && mine.health !== "no_probe") verdict += " · health " + (mine.health === "healthy" ? "up" : "DOWN");
+      }
+      this.supervisorFeedback(
+        action + " " + id + " → " + verdict
+        + (result.status !== undefined && result.status !== null ? " (exit " + result.status + ")" : "")
+        + " · receipt " + (receipt.operationId || "recorded")
+        + (result.ok === false && result.stderr ? " · " + String(result.stderr).split("\n")[0] : ""),
+        result.ok === false);
+    } catch (err) {
+      this.supervisorFeedback("Surface " + action + " failed: " + (err.message || err), true);
+    } finally {
+      if (pressed) pressed.textContent = pressedLabel;
+      buttons.forEach(b => { b.disabled = false; });
+    }
+    await this.loadSupervisorCockpit();
+  }
+
+  // clauth doesn't manage itself as a plugin, so its own MCP endpoint has no
+  // entry in the real surfaces registry — this reads the vault value directly
+  // (never hardcoded) rather than storing a synthetic surfaces row.
+  async openClauthSelfMcp(e) {
+    if (e) e.stopPropagation();
+    try {
+      const res = await fetch(BASE + "/v/mcp-clauth-endpoint");
+      const text = (await res.text()).trim();
+      if (!res.ok) {
+        this.supervisorFeedback("Could not read clauth's own MCP endpoint: " + text, true);
+        return;
+      }
+      // The vault value is the MCP transport URL (.../mcp). Opening it verbatim
+      // showed a raw SSE stream instead of clauth.
+      window.open(browsableUrl(text), "_blank");
+    } catch (err) { this.supervisorFeedback("Could not read clauth's own MCP endpoint: " + (err.message || err), true); }
+  }
+
+  openSupervisorSurfaceLink(e, el) {
+    if (e) e.stopPropagation();
+    const target = el.dataset.openTarget;
+    if (target) window.open(target, "_blank");
+  }
+
+  get actions() {
+    return {
+      refreshSurfaceHealth: () => this.refreshSurfaceHealth(),
+      // Dispatches through window.rescanSupervisorPlugins()/window.runSupervisorSurface()
+      // (the bridges below), NOT this.rescanSupervisorPlugins()/this.runSupervisorSurface()
+      // directly -- installWriteAccessGuards() wraps the GLOBAL name with the
+      // write-token acquire-and-retry gate. Calling the instance method directly
+      // would silently bypass that gate, restoring the exact write-lock defect
+      // this mechanism exists to prevent. Same pattern as tunnel-panel.js's
+      // wizSubmitCfToken / webdav-panel.js's submitMount+deleteMount bridges.
+      rescanSupervisorPlugins: () => window.rescanSupervisorPlugins(),
+      runSupervisorSurface: (e, el) => window.runSupervisorSurface(el.dataset.surfaceId, el.dataset.surfaceAction),
+      openFullLog: () => this.openFullLog(),
+      selectSupervisorSurface: (e, el) => this.selectSupervisorSurface(e, el),
+      openClauthSelfMcp: (e) => this.openClauthSelfMcp(e),
+      openSupervisorSurfaceLink: (e, el) => this.openSupervisorSurfaceLink(e, el),
+    };
+  }
+}
+customElements.define(ClauthSurfacesPanel.tagName, ClauthSurfacesPanel);
+
+// Write-guard bridges: installWriteAccessGuards() (dashboard.js) wraps every
+// name in WRITE_ACTIONS by reassigning window[name] to a guarded version --
+// it can only do that for a real global function, not a class instance
+// method. These thin globals delegate to the real implementation on the live
+// panel instance; installWriteAccessGuards wraps THESE names, and the
+// component's own action dispatcher calls window.rescanSupervisorPlugins()/
+// window.runSupervisorSurface() (see the `actions` getter above), never
+// this.rescanSupervisorPlugins()/this.runSupervisorSurface() directly, so the
+// guard is never bypassed.
+window.rescanSupervisorPlugins = () => {
+  const el = document.querySelector(ClauthSurfacesPanel.tagName);
+  return el?.rescanSupervisorPlugins();
+};
+window.runSupervisorSurface = (id, action) => {
+  const el = document.querySelector(ClauthSurfacesPanel.tagName);
+  return el?.runSupervisorSurface(id, action);
+};
+
+// Panel interface registration — see ./panel-registry.js. mount() is called
+// explicitly by ClauthPanelRegistry.mountAll(), after every script has
+// loaded -- connectedCallback() (panel-element.js) only builds the shadow
+// DOM during HTML parsing, before dashboard.js (and its globals) exists.
+window.ClauthPanelRegistry.register({
+  id: "surfaces",
+  mount: () => {
+    const el = document.querySelector(ClauthSurfacesPanel.tagName);
+    if (el) el.mount();
+  },
+});

package/cli/dashboard/panels/toolbar-panel.css

@@ -0,0 +1,42 @@
+/* cli/dashboard/panels/toolbar-panel.css
+   The menu bar (data-panel="menu-bar") and its two modals: Change Password
+   (chpw-*) and the Enroll Machine result box live entirely in toolbar-panel.js,
+   so their styling lives here too. Depends on the tokens in ../global.css,
+   loaded before this file. */
+.toolbar{display:flex;gap:8px;margin-bottom:1rem;flex-wrap:wrap;align-items:center;border:1px solid var(--panel-border);background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(10,15,26,.98));border-radius:12px;padding:14px}
+.btn-refresh{background:var(--blue);color:var(--white);padding:7px 18px;font-size:.85rem;border-radius:7px;border:none;cursor:pointer;font-weight:500}
+.btn-refresh:hover{background:var(--blue-dark)}
+.btn-lock{background:var(--bg-card);color:var(--red);border:1px solid var(--border);padding:7px 16px;font-size:.85rem;border-radius:7px;cursor:pointer;font-weight:500}
+.btn-lock:hover{background:#2d1f1f;border-color:var(--red)}
+.btn-check{background:#0f2d2d;color:var(--emerald);border:1px solid #064e3b;padding:7px 16px;font-size:.85rem;border-radius:7px;cursor:pointer;font-weight:500;transition:all .15s}
+.btn-check:hover{background:#134e4a;border-color:var(--emerald)}.btn-check:disabled{opacity:.5;cursor:not-allowed}
+.btn-add{background:var(--green-bg);color:var(--green);border:1px solid var(--green-dark);padding:7px 16px;font-size:.85rem;border-radius:7px;cursor:pointer;font-weight:500;transition:all .15s}
+.btn-add:hover{background:#1a3d22;border-color:var(--green)}
+.btn-stop{padding:7px 16px;font-size:.85rem;border-radius:7px;cursor:pointer;font-weight:500}
+.btn-stop.restart{background:var(--green-bg);border:1px solid var(--green-dark);color:var(--green-light)}
+.btn-stop.stop{background:var(--red-darker);border:1px solid var(--red-dark);color:#fca5a5}
+.chpw-panel{display:none;background:var(--bg-modal);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin-bottom:1.5rem}
+.chpw-panel h3{font-size:.9rem;font-weight:600;color:var(--text-white);margin-bottom:1rem}
+.chpw-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:.75rem}
+.chpw-field{display:flex;flex-direction:column;gap:4px}
+.chpw-field label{font-size:.75rem;color:var(--amber)}
+.chpw-input{background:var(--bg-dark);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-family:'Courier New',monospace;font-size:.88rem;padding:7px 12px;outline:none;width:200px;transition:border-color .2s}
+.chpw-input:focus{border-color:var(--blue)}
+.chpw-foot{display:flex;gap:8px;align-items:center}
+.btn-chpw-save{background:var(--border-dark);color:var(--blue-light);padding:7px 18px;font-size:.85rem;border-radius:6px;border:none;cursor:pointer;font-weight:500;transition:background .15s}
+.btn-chpw-save:hover{background:var(--blue-hover-bg)}
+.chpw-msg{font-size:.82rem}
+.chpw-msg.ok{color:var(--green)} .chpw-msg.fail{color:var(--red)}
+/* Enroll Machine panel reuses the "add-*" visual language services-panel.css
+   defines for its own Add Service form -- restated here because Shadow DOM
+   encapsulation means that stylesheet (loaded into a DIFFERENT shadow root)
+   cannot reach into this one. */
+.add-panel{display:none;background:var(--bg-modal);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin-bottom:1.5rem}
+.add-panel h3{font-size:.9rem;font-weight:600;color:var(--text-white);margin-bottom:1rem}
+.add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:.75rem}
+.add-field{display:flex;flex-direction:column;gap:4px}
+.add-field label{font-size:.75rem;color:var(--amber)}
+.add-input{background:var(--bg-dark);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-family:'Courier New',monospace;font-size:.88rem;padding:7px 12px;outline:none;width:200px;transition:border-color .2s}
+.add-input:focus{border-color:var(--blue)}
+.add-msg{font-size:.82rem}
+.add-msg.ok{color:var(--green)} .add-msg.fail{color:var(--red)}