@monster-orange/den 0.4.17 → 0.4.19

package/src/ui/server/public/i18n/ja.js

@@ -52,6 +52,43 @@
     "act.unpin": "ピン留めを外す",
     "act.visit": "開く",
     "act.visitX": "{s} を開く(新しいタブ)",
+    // 0.4.18: the service panel (svc-panel.js) and Start's Folder.
+    "svp.label": "{s}: クイックパネル",
+    "svp.more": "{s} のクイックパネル",
+    "svp.notRunning": "停止中",
+    "svp.up": "稼働 {d}",
+    "svp.upNow": "稼働中",
+    "svp.down": "停止: {c}",
+    "svp.downNone": "停止",
+    "svp.starting": "起動中…",
+    "svp.stopped": "停止",
+    "svp.noUrl": "URL なし",
+    "svp.start": "開始",
+    "svp.stop": "停止",
+    "svp.restart": "再起動",
+    "svp.logs": "ログ",
+    "svp.stopping": "{s} を停止中",
+    "svp.tests": "前回のテスト",
+    "svp.testsOk": "✓ {t}",
+    "svp.testsBad": "✗ 失敗 {t}",
+    "svp.testsRun": "実行中…",
+    "svp.testsNone": "—",
+    "svp.runTests": "テストを実行",
+    "svp.testsDone": "テスト成功: {s}",
+    "svp.testsFailed": "テスト失敗: {s}",
+    "svp.agents": "エージェント",
+    "svp.noAgents": "このリポジトリにエージェントはいません。",
+    "svp.open": "開く",
+    "svp.openAg": "{s} を開く",
+    "svp.startHere": "ここでエージェントを開始",
+    "svp.openSvc": "サービスで開く",
+    "svp.openGraph": "グラフで開く",
+    "graph.outside": "{s} は {ws} にあり、この表示の範囲外です。",
+    "graph.showWs": "{ws} を表示",
+    "svp.close": "閉じる",
+    "ag.new.folder": "フォルダー（任意）",
+    "ag.new.folderHelp":
+      "ワークスペースのフォルダー内。空欄ならワークスペースのフォルダー。",
     "act.pinX": "{s} をピン留め",
     "act.unpinX": "{s} のピン留めを外す",
     "toast.pinned": "{s} をピン留めしました",
@@ -267,6 +304,10 @@
     "err.signin.step2":
       "承認されると、このページは自動でサインインします。コードの有効期限は 10 分です。",
     "err.signin.waiting": "承認を待っています…",
+    "err.signin.windowsSteps":
+      "Windows ターミナルか PowerShell を開き、これを貼り付けて Enter キーを押します。",
+    "err.signin.nothingOpened":
+      "何も開きませんでしたか?下のコマンドをコピーして、ターミナルアプリに貼り付けてください。",
     "err.signin.noTerminal":
       "{host} のターミナルがありませんか?このコンピューターで次を実行します:",
     "err.signin.openTerminal": "ターミナルを開く",
@@ -531,6 +572,8 @@
     "ap.do.repo_add.new":
       "{path} のリポジトリを新しいワークスペース「{workspace}」に追加",
     "ap.do.service_try": "{service} を起動",
+    "ap.do.service_try.activates":
+      "{service} を起動 ({workspace} を有効にします)",
     "ap.says": "エージェントのコメント:",
     "ap.review": "確認",
     "ap.hide": "詳細を隠す",
@@ -672,6 +715,37 @@
     "ag.ws": "ワークスペース",
     "ag.pal": "エージェント › {ws} / {name}",
     "ag.palStart": "エージェントを開始…",
+    // ON-6: the server agent (server-agent-page.js, the rail, ⌘K).
+    "n.serverAgent": "__DEN_TITLE__ エージェント",
+    "ag.server": "サーバー",
+    "pal.askServer": "__DEN_TITLE__ に聞く",
+    "sa.sub.fresh":
+      "__DEN_TITLE__ をセットアップしましょう。変更を許可するまで、読み取りだけを行います。",
+    "sa.sub":
+      "サーバーのことなら何でも：リポジトリの追加、失敗しているサービスの修正、設定の変更、動いているものの説明。",
+    "sa.trust":
+      "Claude がこのフォルダーを信頼するか尋ねます。「はい」を選んでください。",
+    "sa.model": "モデル",
+    "sa.login":
+      "Claude からログインを求められたら、ここでログインしてください。そのあと {name} が始まります。",
+    "sa.readsOnly":
+      "__DEN_TITLE__ 自身のツールだけで動きます。変更はそのたびに、このブラウザーで先に確認します。",
+    "sa.starting": "エージェントを起動しています…",
+    "sa.idle": "{name} は動いていません。",
+    "sa.start": "開始",
+    "sa.failed":
+      "起動しませんでした：{why}。詳しくは {cli} agents doctor で確認できます。",
+    "sa.unread":
+      "エージェントの状態を読めませんでした。Web サーバーは動いていますか？",
+    "sa.none.h": "エージェントを動かせるランタイムがまだありません",
+    "sa.none":
+      "エージェントはランタイムカタログのエージェント CLI で動きます。1 つインストールして一度ログインし、このページを再読み込みしてください。",
+    "sa.noTools": "まだ __DEN_TITLE__ のツールを使えません",
+    "sa.manual.h": "自分でセットアップする",
+    "sa.manual": "エージェントの各手順はコマンドでもできます。ターミナルで：",
+    "sa.runsOn": "実行するランタイム",
+    "sa.openAgents": "エージェントで開く",
+    "sa.saved": "保存しました。次回の起動から使われます。",
     "ag.cap":
       "ペインは最大 4 つです。{id} のペインを閉じました（実行は続きます）",
     "ag.layout": "レイアウト",

package/src/ui/server/public/local-dev.html

@@ -1544,6 +1544,7 @@
           copyToClipboard,
           computePrimaryByRepo,
           setServiceRunner,
+          switchView,
           sudoRun,
           takePendingAction,
           problemCards,
@@ -1552,7 +1553,12 @@
         } from "/header.js";
         import { checkLine } from "/topbar.js";
         import { agentsSectionHtml, mountAgents } from "/agents-section.js";
-        import { mountGraph, graphHealth, graphMaximized } from "/graph.js";
+        import {
+          mountGraph,
+          graphEmptyNote,
+          graphHealth,
+          graphMaximized,
+        } from "/graph.js";
         import {
           mergeWorkspaceViews,
           ownerOfRepos,
@@ -1874,7 +1880,12 @@
           if (updateUrl) {
             const params = new URLSearchParams(location.search);
             params.set("ws", name);
-            history.replaceState(null, "", "?" + params.toString());
+            // The hash stays (#focus=<id>: Open in Graph's card).
+            history.replaceState(
+              null,
+              "",
+              "?" + params.toString() + location.hash,
+            );
           }
           document
             .querySelectorAll(".ws-item")
@@ -4273,7 +4284,11 @@
               const params = new URLSearchParams(location.search);
               params.delete("ws");
               const qs = params.toString();
-              history.replaceState(null, "", qs ? "?" + qs : location.pathname);
+              history.replaceState(
+                null,
+                "",
+                (qs ? "?" + qs : location.pathname) + location.hash,
+              );
             }
             await loadWorkspaces();
           }
@@ -4644,6 +4659,19 @@
         });
 
         const GRAPH_HOOKS = {
+          /**
+           * Open in Graph for a service this graph doesn't draw: the
+           * workspace it is in, outside the View (#focus=, graph.js), or
+           * null when it is in no other workspace.
+           */
+          outsideView: (id) => {
+            const shown = GRAPH_ALL
+              ? GRAPH_ALL.names
+              : [document.getElementById("content")?.dataset.ws || activeWs];
+            return wsOfAddress(id).find((w) => !shown.includes(w)) ?? null;
+          },
+          /** Its Show <workspace>: the top bar's switch (header.js). */
+          showWorkspace: (ws) => switchView(ws),
           maximize: {
             isOn: () => graphMax(),
             toggle: () => setGraphMax(!graphMax()),
@@ -4692,6 +4720,8 @@
           if (!services || services.length === 0) {
             wrap.innerHTML =
               '<div class="graph-empty">No services in workspace</div>';
+            // Open in Graph for a service in another workspace: say where.
+            graphEmptyNote(wrap, GRAPH_HOOKS);
             return;
           }
           mountGraph(

package/src/ui/server/public/log-source.js

@@ -0,0 +1,26 @@
+/**
+ * Where a service's live log comes from (0.4.18): one rule for the Logs
+ * page and the service panel's Logs, so they never disagree.
+ *
+ *   - Den's own server log (the "__DEN_CLI__/server" pseudo-service):
+ *     /api/server-log, the server's log ring;
+ *   - a local service: /api/service/taillog, the workspace page's source
+ *     chain (the manifest's command, the conventional container, the
+ *     daemon's startup log). /api/service/logs answers 404 for a service
+ *     with no `logs:` block;
+ *   - any other env: /api/service/logs, for cloud sources and the reauth
+ *     flow.
+ */
+
+/** The server's own log, shown like a service's. */
+export function isServerLog(repo, service) {
+  return repo === "__DEN_CLI__" && service === "server";
+}
+
+/** The SSE URL of `repo/service`'s live log in `env`. */
+export function logStreamUrl(repo, service, env) {
+  if (isServerLog(repo, service)) return "/api/server-log";
+  if (env === "local")
+    return `/api/service/taillog?${new URLSearchParams({ repo, service })}`;
+  return `/api/service/logs?${new URLSearchParams({ repo, service, env })}`;
+}

package/src/ui/server/public/logs.html

@@ -476,6 +476,7 @@
         envReady,
         initWorkspacePill,
       } from "/header.js";
+      import { isServerLog, logStreamUrl } from "/log-source.js";
 
       // ── Safe highlight rendering ──────────────────────────────────────────────
       // Log lines are UNTRUSTED (any service can log attacker-influenced text,
@@ -550,11 +551,9 @@
       const logStreams = new Map();
 
       // "__DEN_CLI__/server" is a pseudo-service that taps the server's own log ring
-      // via /api/server-log instead of /api/service/logs. Everything else in the
-      // page treats it like a normal log stream.
-      function isServerLog(repo, service) {
-        return repo === "__DEN_CLI__" && service === "server";
-      }
+      // via /api/server-log instead of /api/service/logs (isServerLog,
+      // log-source.js). Everything else in the page treats it like a normal
+      // log stream.
       function formatServerLogEntry(entry) {
         // "14:07:41  [lifecycle]  ▶ run synthetic/local · modules=all [abcxyz]"
         // An agent's action reads "[agent]" and ends "· by agent <client> …".
@@ -1075,21 +1074,9 @@
         // ─────────────────────────────────────────────────────────────────────
 
         const serverLog = isServerLog(repo, service);
-        // Local streams go through taillog — the same endpoint the workspace
-        // page's tabs use. It has the full source-resolution chain (manifest
-        // cmd → conventional opctl container → daemon startup log), whereas
-        // /api/service/logs 404s for services with no logs block (shop-web,
-        // control-plane). Non-local envs keep /api/service/logs for
-        // cloudwatch sources + the AWS reauth flow.
-        const es = serverLog
-          ? new EventSource("/api/server-log")
-          : env === "local"
-            ? new EventSource(
-                `/api/service/taillog?${new URLSearchParams({ repo, service })}`,
-              )
-            : new EventSource(
-                `/api/service/logs?${new URLSearchParams({ repo, service, env })}`,
-              );
+        // Where the stream comes from (taillog for local, logs elsewhere):
+        // log-source.js, which the service panel's Logs uses too.
+        const es = new EventSource(logStreamUrl(repo, service, env));
 
         es.onmessage = (e) => {
           const msg = JSON.parse(e.data);

package/src/ui/server/public/persona-ui.css

@@ -345,6 +345,12 @@ dialog.pe-dlg::backdrop {
   color: var(--faint);
   font-weight: 400;
 }
+/* On the chosen row's tint, faint text falls under 4.5:1 (light): the
+   role and a plain tag read in muted there. */
+.pr[aria-checked="true"] .pn .role,
+.pr[aria-checked="true"] .tagx:not(.warn, .src-local, .src-distribution, .src-hub) {
+  color: var(--muted);
+}
 .pr .pd {
   grid-column: 2 / 4;
   font-size: 12.5px;

package/src/ui/server/public/server-agent-page.js

@@ -0,0 +1,415 @@
+/**
+ * The server agent's page (ON-6): this Den's own agent in a terminal pane,
+ * framed as the page, with "Open in Agents" as the way out. A fresh Den's
+ * first page (the server serves it at /). Its status is GET
+ * /api/server-agent (server-agent-routes.ts).
+ *
+ *  - Fresh, with a runtime that can run it: it starts by itself. It only
+ *    reads until the person allows a write (each write is held for the
+ *    browser's Allow, ON-3).
+ *  - No runtime: the manual path, and how to install a runtime.
+ *  - Running on Claude on a fresh Den: a line saying Claude asks to trust
+ *    its folder (choose Yes), and one saying to log in to Claude in the
+ *    terminal if it asks (Den can't tell whether it is logged in). Which
+ *    runtime it runs on is its record's (runningRuntime), never the
+ *    picker's: the two differ after the picker changes, or when the runtime
+ *    is not found again on a later read.
+ *  - Started by itself, but not running yet when the page reads it back:
+ *    the page reads again, a few times, until it runs (so the terminal and
+ *    its lines come up without a reload).
+ *  - Not fresh and not running: a Start button (never started by itself).
+ *  - The runtime picker saves the person's choice (agents.server_runtime),
+ *    and the model picker beside it (agents.server_model), with only the
+ *    runtime's own models.
+ *
+ * serverAgentView(status) is pure (HTML from the status JSON), so tests
+ * need no server.
+ */
+
+const t = (key, vars) => globalThis.window?.denShell?.t?.(key, vars) ?? key;
+const esc = (s) =>
+  String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+const CLI = "__DEN_CLI__";
+
+const RUNNING = new Set(["running", "stopping"]);
+
+/**
+ * What the page shows for `status`: its header line, its body, whether
+ * the agent starts by itself, and whether a terminal opens.
+ *
+ *   { sub, body, autoStart, terminal }
+ */
+export function serverAgentView(s) {
+  const running = RUNNING.has(s.state) && !!s.sessionId;
+  const hasRuntime = !!s.runtime;
+  const sub = s.fresh ? t("sa.sub.fresh") : t("sa.sub");
+  const readsOnly = `<p class="note sa-reads" data-note="reads-only">${esc(t("sa.readsOnly"))}</p>`;
+  // Den can't tell whether Claude is logged in (ON-6). On a fresh Den's
+  // first run, one line above the terminal says a login prompt is
+  // expected, so Claude's own login screen never reads as a crash.
+  // Claude Code asks once whether to trust the agent's folder, which Den
+  // made for it; Den doesn't answer for the person (that is Claude's own
+  // file, ~/.claude.json, with no documented way to pre-accept).
+  const onClaude =
+    s.fresh &&
+    (running ? (s.runningRuntime ?? s.runtime?.id) : s.runtime?.id) ===
+      "den-claude";
+  const login = onClaude
+    ? `<p class="note sa-trust" data-note="trust">${esc(t("sa.trust"))}</p>` +
+      `<p class="note sa-login" data-note="login">${esc(t("sa.login", { name: s.name }))}</p>`
+    : "";
+  if (running)
+    return {
+      sub,
+      body: login + readsOnly,
+      autoStart: false,
+      terminal: s.sessionId,
+    };
+  if (!hasRuntime)
+    return {
+      sub,
+      body: noRuntimeHtml(s),
+      autoStart: false,
+      terminal: null,
+    };
+  // Fresh and never started (or stopped): it starts by itself.
+  if (s.fresh)
+    return {
+      sub,
+      body: `<p class="note" data-note="starting">${esc(t("sa.starting"))}</p>${readsOnly}`,
+      autoStart: true,
+      terminal: null,
+    };
+  return {
+    sub,
+    body:
+      `<div class="sa-idle" data-note="idle"><p>${esc(t("sa.idle", { name: s.name }))}</p>` +
+      `<button type="button" class="den-btn primary" data-act="start">${esc(t("sa.start"))}</button></div>` +
+      readsOnly,
+    autoStart: false,
+    terminal: null,
+  };
+}
+
+/** No runtime can run it: how to install one, and the manual path. */
+function noRuntimeHtml(s) {
+  const installs = (s.runtimes ?? [])
+    .filter((r) => !r.usable)
+    .map(
+      (r) =>
+        `<li data-runtime="${esc(r.id)}"><b>${esc(r.label ?? r.id)}</b>` +
+        (r.available && !r.denTools
+          ? ` · ${esc(t("sa.noTools"))}`
+          : r.install
+            ? ` · <code>${esc(r.install)}</code>`
+            : "") +
+        `</li>`,
+    )
+    .join("");
+  const manual = (s.manual ?? [])
+    .map((c) => `<li><code>${esc(c)}</code></li>`)
+    .join("");
+  return (
+    `<section class="sa-none" data-note="no-runtime"><h2 class="sec">${esc(t("sa.none.h"))}</h2>` +
+    `<p>${esc(t("sa.none"))}</p>` +
+    (installs ? `<ul class="sa-install">${installs}</ul>` : "") +
+    `</section>` +
+    `<section class="sa-manual" data-note="manual"><h2 class="sec">${esc(t("sa.manual.h"))}</h2>` +
+    `<p>${esc(t("sa.manual"))}</p><ol class="sa-steps">${manual}</ol></section>`
+  );
+}
+
+/** The model picker's options: the runtime's own models, the chosen one selected. */
+export function modelOptionsHtml(s) {
+  const models = s.models ?? [];
+  if (!models.length) return "";
+  return models
+    .map(
+      (m) =>
+        `<option value="${esc(m.id)}"${s.model === m.id ? " selected" : ""}>${esc(m.label ?? m.id)}</option>`,
+    )
+    .join("");
+}
+
+/** The runtime picker's options: the usable ones, the chosen one first. */
+export function runtimeOptionsHtml(s) {
+  const usable = (s.runtimes ?? []).filter((r) => r.usable);
+  if (!usable.length) return "";
+  return usable
+    .map(
+      (r) =>
+        `<option value="${esc(r.id)}"${s.runtime?.id === r.id ? " selected" : ""}>${esc(r.label ?? r.id)}</option>`,
+    )
+    .join("");
+}
+
+// ── the page ────────────────────────────────────────────────────────────
+
+const st = {
+  root: null,
+  status: null,
+  pane: null,
+  starting: false,
+  autoTried: false,
+  /** Reads after a start that came back not running yet. */
+  rereads: 0,
+};
+
+/** How many times, a second apart, a start is read back until it runs. */
+const REREADS = 15;
+
+async function readStatus() {
+  try {
+    const r = await fetch("/api/server-agent", { headers: { accept: "json" } });
+    return r.ok ? await r.json() : null;
+  } catch {
+    return null;
+  }
+}
+
+function paint() {
+  const s = st.status;
+  const sub = st.root.querySelector("#sa-sub");
+  const body = st.root.querySelector("#sa-body");
+  const open = st.root.querySelector("#sa-open");
+  const pick = st.root.querySelector("#sa-runtime");
+  const mpick = st.root.querySelector("#sa-model");
+  body.removeAttribute("aria-busy");
+  if (!s) {
+    sub.textContent = t("sa.unread");
+    body.innerHTML = "";
+    return null;
+  }
+  const v = serverAgentView(s);
+  sub.textContent = v.sub;
+  body.innerHTML = v.body;
+  const opts = runtimeOptionsHtml(s);
+  pick.hidden = !opts;
+  if (opts) pick.querySelector("select").innerHTML = opts;
+  const mopts = modelOptionsHtml(s);
+  if (mpick) {
+    mpick.hidden = !mopts;
+    if (mopts) mpick.querySelector("select").innerHTML = mopts;
+  }
+  open.hidden = !v.terminal;
+  if (v.terminal)
+    open.setAttribute("href", `/agents?open=${encodeURIComponent(v.terminal)}`);
+  return v;
+}
+
+async function refresh() {
+  st.status = await readStatus();
+  const v = paint();
+  if (!v) return;
+  if (v.terminal) void openTerminal(v.terminal);
+  else closeTerminal();
+  // Once per page: a start that ends at once is never retried in a loop.
+  if (v.autoStart && !st.autoTried) {
+    st.autoTried = true;
+    void start();
+    return;
+  }
+  // Started, but not running yet: read again until it is.
+  if (st.autoTried && !v.terminal && v.autoStart && st.rereads < REREADS) {
+    st.rereads++;
+    setTimeout(() => void refresh(), 1000);
+  }
+}
+
+async function start() {
+  if (st.starting) return;
+  st.starting = true;
+  try {
+    await window.denShell.api("POST", "/api/server-agent/start", {});
+  } catch (err) {
+    st.starting = false;
+    const body = st.root.querySelector("#sa-body");
+    const why = err?.message ?? String(err);
+    body.innerHTML = `<p class="note bad" data-note="failed" role="alert">${esc(t("sa.failed", { why, cli: CLI }))}</p>`;
+    return;
+  }
+  st.starting = false;
+  await refresh();
+}
+
+async function saveModel(id) {
+  try {
+    await window.denShell.api("POST", "/api/server-agent/model", {
+      model: id,
+    });
+    window.denShell?.toast?.(t("sa.saved"));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+  await refresh();
+}
+
+async function saveRuntime(id) {
+  try {
+    await window.denShell.api("POST", "/api/server-agent/runtime", {
+      runtime: id,
+    });
+    window.denShell?.toast?.(t("sa.saved"));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+  await refresh();
+}
+
+// ── the terminal ────────────────────────────────────────────────────────
+
+function cssVar(name) {
+  const v = getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  return v || undefined;
+}
+
+async function csrf() {
+  try {
+    const r = await fetch("/api/session", { credentials: "same-origin" });
+    const b = r.ok ? await r.json() : null;
+    return typeof b?.csrf === "string" ? b.csrf : null;
+  } catch {
+    return null;
+  }
+}
+
+function closeTerminal() {
+  const p = st.pane;
+  if (!p) return;
+  st.pane = null;
+  p.closed = true;
+  p.sock?.close();
+  p.term?.dispose();
+  p.observer?.disconnect();
+  p.el.remove();
+}
+
+async function openTerminal(id) {
+  if (st.pane?.id === id) return;
+  closeTerminal();
+  const el = document.createElement("div");
+  el.className = "sa-term";
+  el.dataset.id = id;
+  el.innerHTML = `<div class="tbox"></div>`;
+  st.root.querySelector("#sa-pane").appendChild(el);
+  const p = { id, el, term: null, fit: null, sock: null, closed: false };
+  st.pane = p;
+  let lib;
+  try {
+    const [x, f] = await Promise.all([
+      import("/vendor/xterm.mjs"),
+      import("/vendor/addon-fit.mjs"),
+    ]);
+    lib = { Terminal: x.Terminal, FitAddon: f.FitAddon };
+  } catch (err) {
+    el.innerHTML = `<p class="note">${esc(err?.message ?? String(err))}</p>`;
+    return;
+  }
+  if (p.closed) return;
+  const bg = cssVar("--sunken");
+  const term = new lib.Terminal({
+    fontFamily: cssVar("--mono") ?? "monospace",
+    fontSize: 12,
+    lineHeight: 1.25,
+    scrollback: 5000,
+    theme: { background: bg, foreground: cssVar("--text"), cursorAccent: bg },
+  });
+  const fit = new lib.FitAddon();
+  term.loadAddon(fit);
+  term.open(el.querySelector(".tbox"));
+  p.term = term;
+  p.fit = fit;
+  const refit = () => {
+    try {
+      fit.fit();
+    } catch {
+      /* not laid out yet */
+    }
+  };
+  refit();
+  p.observer = new ResizeObserver(refit);
+  p.observer.observe(el);
+  const enc = new TextEncoder();
+  term.onData((d) => {
+    if (p.sock?.readyState === WebSocket.OPEN) p.sock.send(enc.encode(d));
+  });
+  const size = () => {
+    if (p.sock?.readyState === WebSocket.OPEN && term.cols > 1 && term.rows > 1)
+      p.sock.send(
+        JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }),
+      );
+  };
+  term.onResize(size);
+  const token = await csrf();
+  if (p.closed) return;
+  const proto = location.protocol === "https:" ? "wss:" : "ws:";
+  const sock = new WebSocket(
+    `${proto}//${location.host}/api/sessions/${encodeURIComponent(id)}/io`,
+    ["den.io", `den.csrf.${token ?? ""}`],
+  );
+  sock.binaryType = "arraybuffer";
+  p.sock = sock;
+  sock.onopen = () => {
+    refit();
+    size();
+    term.focus();
+  };
+  sock.onmessage = (e) => {
+    if (typeof e.data === "string") {
+      let msg = null;
+      try {
+        msg = JSON.parse(e.data);
+      } catch {
+        return;
+      }
+      if (msg?.type === "exit") {
+        term.write(`\r\n${t("ag.exitedLine", { code: "" })}\r\n`);
+        setTimeout(() => void refresh(), 1000);
+      }
+      return;
+    }
+    term.write(new Uint8Array(e.data));
+  };
+  sock.onclose = (e) => {
+    if (p.closed || p.sock !== sock) return;
+    p.sock = null;
+    term.write(`\r\n${t("ag.lost", { why: e.reason || String(e.code) })}\r\n`);
+  };
+}
+
+export async function mountServerAgentPage(root) {
+  if (!root) return;
+  st.root = root;
+  for (const [sel, key] of [
+    ["#sa-title", "n.serverAgent"],
+    ["#sa-runtime > span", "sa.runsOn"],
+    ["#sa-model > span", "sa.model"],
+    ["#sa-open", "sa.openAgents"],
+  ]) {
+    const el = root.querySelector(sel);
+    if (el) el.textContent = t(key);
+  }
+  if (window.denShell?.apiOff?.()) return;
+  root.addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-act]");
+    if (b?.dataset.act === "start") {
+      b.disabled = true;
+      void start();
+    }
+  });
+  root.querySelector("#sa-runtime select")?.addEventListener("change", (e) => {
+    void saveRuntime(e.target.value);
+  });
+  root.querySelector("#sa-model select")?.addEventListener("change", (e) => {
+    void saveModel(e.target.value);
+  });
+  await refresh();
+}