@monster-orange/den 0.4.27 → 0.4.28

package/src/ui/mcp/server.ts

@@ -109,13 +109,25 @@ export function createDenMcpServer(opts: DenMcpOptions): McpServer {
     ...(toolScope ? { scope: toolScope } : {}),
   };
 
+  // A pinned tool with no workspace parameter (no grants) still takes a
+  // `workspace` someone names, so that Den refuses it (callTool, scope.ts)
+  // instead of the SDK dropping the key and answering about this workspace
+  // (0.4.28-dev.0's gate: agent_helpers {workspace:"west"} answered for
+  // "default"). Not advertised; the one-shot path does the same.
+  const unpinned = new Map(toolsFor(opts.cfg).map((t) => [t.name, t]));
+  const schemaOf = (t: (typeof tools)[number]) =>
+    toolScope &&
+    !("workspace" in t.shape) &&
+    "workspace" in (unpinned.get(t.name)?.shape ?? {})
+      ? z.object(t.shape).passthrough()
+      : t.shape;
   for (const t of tools) {
     server.registerTool(
       t.name,
       {
         title: t.title,
         description: t.description,
-        inputSchema: t.shape,
+        inputSchema: schemaOf(t),
         annotations: {
           readOnlyHint: !t.action,
           destructiveHint: t.action,

package/src/ui/mcp/tools.ts

@@ -187,6 +187,55 @@ const read = (
 ): DenTool => ({ name, title, description, action: false, shape, run });
 
 const READ_TOOLS: DenTool[] = [
+  read(
+    "agent_helpers",
+    "An agent's helpers",
+    "D32: the helpers an agent started inside its own session (Claude Code's Agent and Workflow subagents), running first: id, description, type, model, branch, status (running, idle, done, failed, stopped), statusFrom (how that was told), startedAt, lastActivityAt, durationMs, workflow, and `earlier` for those from a conversation before a relaunch. With `helper`, that one helper's transcript, tool calls summarized (`items`, the last `limit` lines). Reads only: helpers belong to the agent's session, so nothing here stops or steers one.",
+    {
+      agent: z.string().describe("The agent's id"),
+      helper: z
+        .string()
+        .optional()
+        .describe("A helper's id: its transcript instead of the list"),
+      limit: z
+        .number()
+        .int()
+        .min(1)
+        .max(5000)
+        .optional()
+        .describe("With helper: how many of its last lines (default 500)"),
+      workspace: workspaceArg,
+    },
+    async (a, { api, scope }) => {
+      const agent = str(a.agent);
+      if (!agent || !NAME_RE.test(agent))
+        throw new Refusal("agent_helpers: agent must be an agent id");
+      const helper = str(a.helper);
+      if (helper !== undefined && !/^[A-Za-z0-9_-]{1,128}$/.test(helper))
+        throw new Refusal("agent_helpers: helper must be a helper id");
+      let ws = str(a.workspace) ?? scope?.workspace;
+      if (!ws) {
+        const focused = (await api.get("/api/workspaces")) as {
+          focus?: unknown;
+        };
+        ws = typeof focused?.focus === "string" ? focused.focus : undefined;
+      }
+      if (!ws || !NAME_RE.test(ws))
+        throw new Refusal("agent_helpers: name the agent's workspace");
+      if (scope && ws !== scope.workspace && !(scope.grants ?? []).includes(ws))
+        throw new ScopeRefusal(
+          `agent_helpers: workspace "${ws}" is outside this agent's scope ("${scope.workspace}")`,
+        );
+      const base = `/api/workspaces/${encodeURIComponent(ws)}/agents/${encodeURIComponent(agent)}/helpers`;
+      if (!helper) return api.get(base);
+      // The limit as a query, never in the path (the client's allowlist
+      // matches the path alone).
+      return api.get(
+        `${base}/${encodeURIComponent(helper)}`,
+        typeof a.limit === "number" ? { limit: String(a.limit) } : {},
+      );
+    },
+  ),
   read(
     "approval_check",
     "Check an approval",
@@ -1327,6 +1376,7 @@ const WORKSPACE_TOOLS = new Set([
   "run_tests",
   "agent_resume",
   "agent_import",
+  "agent_helpers",
 ]);
 
 /**

package/src/ui/server/agent-routes.ts

@@ -113,6 +113,8 @@ import {
   createPersona,
   deletePersona,
   listAgents,
+  agentHelpers,
+  agentHelperTranscript,
   listPersonas,
   personaDetail,
   registries,
@@ -183,6 +185,9 @@ export interface AgentRouteDeps {
 const AGENTS_PATH =
   /^\/api\/workspaces\/([^/]+)\/agents(?:\/([^/]+)\/(stop|resume|fresh|relaunch|remove|name|paths|persona|keep|handoff))?$/;
 
+/** D32: an agent's helpers, and one helper's transcript (read-only). */
+const HELPERS_PATH =
+  /^\/api\/workspaces\/([^/]+)\/agents\/([^/]+)\/helpers(?:\/([^/]+))?$/;
 const RUNTIME_PATH = /^\/api\/agents\/runtimes\/([^/]+)\/path$/;
 const PERSONA_PATH = /^\/api\/personas\/([^/]+)$/;
 const PLAIN_PATH = /^\/api\/workspaces\/([^/]+)\/sessions$/;
@@ -431,6 +436,8 @@ export async function handleAgentRoutes(
     pathname === "/api/agents/resume-interrupted";
   if (pathname === "/api/agents/rotation")
     return rotationRoute(req, res, webDeps(deps.agents));
+  const hp = HELPERS_PATH.exec(pathname);
+  if (hp) return helpersRoute(req, res, hp, webDeps(deps.agents));
   // HUB-1.5: Settings › Hub. Never the token: hubStatus doesn't return it.
   if (pathname === "/api/hub") {
     const method = req.method ?? "GET";
@@ -438,8 +445,14 @@ export async function handleAgentRoutes(
       return methodNotAllowed(res, "GET");
     const { hubStatus } = await import("../../shared/hub.js");
     const st = await (deps.hubStatus ?? (() => hubStatus()))();
-    // HUB-1.7: what the last Connect came to, once (words only).
-    const last = (deps.hubConnect ?? defaultConnect)?.lastResult();
+    // HUB-1.7: what the last Connect came to, once (words only). The
+    // rail's look (?rail=1) leaves it for Settings, which shows it.
+    const rail =
+      new URL(req.url ?? "/", "http://localhost").searchParams.get("rail") ===
+      "1";
+    const last = rail
+      ? null
+      : (deps.hubConnect ?? defaultConnect)?.lastResult();
     sendJson(res, last ? { ...st, connect: last } : st);
     return true;
   }
@@ -1459,3 +1472,44 @@ async function hubConnectRoute(
   sendJson(res, r, r.ok ? 200 : 502);
   return true;
 }
+
+/**
+ * D32: GET .../agents/:id/helpers: the helpers agent :id started in its
+ * own session; .../helpers/:helper: one helper's transcript (?limit=).
+ * Read-only: nothing here stops or steers a helper.
+ */
+async function helpersRoute(
+  req: http.IncomingMessage,
+  res: http.ServerResponse,
+  hp: RegExpExecArray,
+  d: AgentsResolved,
+): Promise<true> {
+  const method = req.method ?? "GET";
+  if (method !== "GET" && method !== "HEAD")
+    return methodNotAllowed(res, "GET");
+  const ws = safeDecode(hp[1]);
+  const id = safeDecode(hp[2]);
+  const helper = hp[3] === undefined ? undefined : safeDecode(hp[3]);
+  try {
+    if (!d.workspaceExists(ws))
+      throw new AgentError(`workspace "${ws}" does not exist`, { status: 404 });
+    if (helper === undefined) {
+      const r = await agentHelpers(d, id, ws);
+      sendJson(res, {
+        agent: r.rec.id,
+        workspace: ws,
+        supported: r.supported,
+        live: r.live,
+        helpers: r.helpers,
+        note: r.note,
+      });
+      return true;
+    }
+    const q = new URL(req.url ?? "/", "http://localhost").searchParams;
+    const limit = Number(q.get("limit") ?? "") || undefined;
+    sendJson(res, await agentHelperTranscript(d, id, helper, ws, limit));
+  } catch (e) {
+    sendError(res, e, ws);
+  }
+  return true;
+}

package/src/ui/server/hub-connect.ts

@@ -40,6 +40,8 @@ import {
   type HubGrant,
 } from "../../shared/hub.js";
 import { readUserConfig, writeUserConfig } from "../../shared/den-config.js";
+import { readEdgeConfig, readWebPort } from "../../shared/edge/config.js";
+import { webRouteHosts } from "../../shared/edge/render.js";
 import { getStateDir } from "../../shared/paths.js";
 import { envKey, product } from "../../shared/product.js";
 import {
@@ -81,6 +83,60 @@ export interface HubConnectDeps {
   writeUser: (u: Record<string, unknown>) => void;
   /** This install's label on Hub (1–40 characters). */
   installLabel: () => string;
+  /**
+   * This Den's https edge address, when it has one (Connect's den_url:
+   * where Hub links back to it when the browser came over loopback).
+   */
+  denUrl?: () => string | undefined;
+}
+
+/** A `<name>.localhost` host: this machine (RFC 6761). */
+export const isDotLocalhost = (host: string) =>
+  host.toLowerCase().endsWith(".localhost");
+
+/**
+ * `u` as an origin Hub takes for den_url, else null: plain (no user, path,
+ * query or hash), and https or http to a `<name>.localhost`.
+ */
+export function denUrlOrigin(u: string): string | null {
+  let x: URL;
+  try {
+    x = new URL(u);
+  } catch {
+    return null;
+  }
+  if (
+    !(
+      x.protocol === "https:" ||
+      (x.protocol === "http:" && isDotLocalhost(x.hostname))
+    ) ||
+    x.username ||
+    x.password ||
+    (x.pathname !== "/" && x.pathname !== "") ||
+    x.search ||
+    x.hash
+  )
+    return null;
+  return x.origin;
+}
+
+/** Of edge addresses, the den_url to send: https first, else a .localhost one. */
+export function pickDenUrl(urls: readonly string[]): string | undefined {
+  const all = urls.map((u) => denUrlOrigin(u)).filter((o): o is string => !!o);
+  return all.find((o) => o.startsWith("https:")) ?? all[0];
+}
+
+/** This server's edge address for den_url (pickDenUrl of its edge routes). */
+export function edgeDenUrl(
+  port = Number(process.env.PORT) || 0,
+): string | undefined {
+  try {
+    const ports = new Set([readWebPort(), ...(port ? [port] : [])]);
+    return pickDenUrl(webRouteHosts(readEdgeConfig(), ports).map((r) => r.url));
+  } catch {
+    /* no edge config: none */
+  }
+  return undefined;
 }
 
 /** `<cli> on <machine>`: how Hub lists this install (Hub's label rule). */
@@ -199,10 +255,11 @@ export function defaultHubConnectDeps(): HubConnectDeps {
     readUser: () => readUserConfig() as Record<string, unknown>,
     writeUser: (u) => writeUserConfig(u as never),
     installLabel: () => defaultInstallLabel(),
+    denUrl: () => edgeDenUrl(),
   };
 }
 
-/** An origin Hub will send the person back to: https, or loopback http. */
+/** An origin Hub will send the person back to: https, or loopback http (incl. *.localhost). */
 export function callbackOriginProblem(origin: string): string | null {
   let u: URL;
   try {
@@ -210,9 +267,13 @@ export function callbackOriginProblem(origin: string): string | null {
   } catch {
     return "this page's address isn't one Hub can send you back to";
   }
-  const loop = u.hostname === "localhost" || u.hostname === "127.0.0.1";
+  // Loopback: localhost, 127.0.0.1, and any <name>.localhost (RFC 6761:
+  // it never leaves this machine, and browsers count it a secure context),
+  // which is how an edge on this machine is often reached over http.
+  const h = u.hostname.toLowerCase();
+  const loop = h === "localhost" || h === "127.0.0.1" || isDotLocalhost(h);
   if (u.protocol === "https:" || (u.protocol === "http:" && loop)) return null;
-  return `Hub can only send you back to https or to localhost; open ${product().title} over https (its edge address) or on this machine, then Connect`;
+  return `Hub can only send you back to https or to this machine (localhost or a .localhost name); open ${product().title} over https (its edge address) or on this machine, then Connect`;
 }
 
 export type ConnectResult =
@@ -268,6 +329,11 @@ export class HubConnect {
       code_challenge: challenge,
       code_challenge_method: "S256",
     });
+    // Hub takes only a plain https or <name>.localhost address (anything
+    // else is a 400), and uses it only when redirect_uri is loopback. A
+    // reconnect sends it again.
+    const denUrl = denUrlOrigin(this.deps.denUrl?.() ?? "");
+    if (denUrl) q.set("den_url", denUrl);
     return { ok: true, location: `${hubUrl}/connect?${q}` };
   }
 

package/src/ui/server/index.ts

@@ -895,6 +895,7 @@ import {
   handleSessionUpgrade,
   isSessionIoPath,
   sendSessionHttp,
+  SESSION_HELPERS_PATH,
 } from "./session-routes.js";
 import { refuseUpgrade } from "./websocket.js";
 import {
@@ -2124,7 +2125,12 @@ async function handleRequest(
   // AG-4a-term's session routes (`/api/sessions/<id>/io`): shell-grade, and
   // an agent's token reaches its own session's only (request-guard). The io
   // is a WebSocket (the server's upgrade handler): a plain GET of it is 426.
-  if (pathname.startsWith("/api/sessions/")) {
+  // D32's /api/sessions/helpers (a count, read-grade) is not a session's:
+  // the list's handler below answers it.
+  if (
+    pathname.startsWith("/api/sessions/") &&
+    pathname !== SESSION_HELPERS_PATH
+  ) {
     await sendSessionHttp(req, res, pathname);
     return;
   }

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

@@ -0,0 +1,311 @@
+/**
+ * D32: the helpers an agent starts in its own session (Claude Code's Agent
+ * and Workflow subagents), read-only. Den shows them; they belong to the
+ * agent's session, so nothing here stops or steers one (and the views say
+ * so).
+ *
+ *   helperRowsHtml(row): under an agent's row on the Agents page, its
+ *     recent helpers (the row's `helpers.recent`: running, or ended a short
+ *     while ago) and "All helpers (n)".
+ *   openHelpers({ ws, agent, name, opener }): every helper, this
+ *     conversation's first and earlier ones folded under "Earlier (n)";
+ *     each opens its transcript (transcript-view.js).
+ *   openHelperTranscript({ ws, agent, helper, opener }).
+ */
+import { focusBack, openTranscript, refindKey } from "/transcript-view.js";
+
+const t = (key, vars) => window.denShell?.t?.(key, vars) ?? key;
+const esc = (s) =>
+  String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+const api = (method, url) => window.denShell.api(method, url);
+const base = (ws, agent) =>
+  `/api/workspaces/${encodeURIComponent(ws)}/agents/${encodeURIComponent(agent)}/helpers`;
+
+/** A dot's tone for a helper's status (the shell's .den-dot tones). */
+export function helperTone(status) {
+  return status === "running"
+    ? "ok"
+    : status === "failed"
+      ? "bad"
+      : status === "idle" || status === "stopped"
+        ? "warn"
+        : "off";
+}
+
+/** 65 s → "1m 5s". */
+export function dur(ms) {
+  if (typeof ms !== "number" || ms < 0) return "";
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+
+const label = (h) => h.description || h.workflow?.label || h.id;
+
+/** One helper as a button row (opens its transcript). */
+/**
+ * How far each helper of `list` (in sortHelpers' order) is indented: one
+ * step under a parent shown just above it, none when its parent isn't in
+ * the list (folded away, or another conversation's).
+ */
+export function shownDepths(list) {
+  const at = new Map();
+  for (const h of list || [])
+    at.set(h.id, h.parentId && at.has(h.parentId) ? at.get(h.parentId) + 1 : 0);
+  return at;
+}
+
+/** A list of helpers as rows, each indented under a parent it shows. */
+export function helperListHtml(list, ctx) {
+  const d = shownDepths(list);
+  return (list || [])
+    .map((h) => helperHtml(h, { ...ctx, depth: d.get(h.id) ?? 0 }))
+    .join("");
+}
+
+export function helperHtml(h, { ws, agent, depth }) {
+  const meta = [
+    h.workflow
+      ? t("hp.workflow", { name: h.workflow.name || h.workflow.runId })
+      : h.type,
+    h.model,
+    h.branch,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  const st = t(`hp.st.${h.status}`);
+  const when = [
+    h.durationMs !== undefined ? dur(h.durationMs) : "",
+    h.lastTool && h.status === "running" ? h.lastTool : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  return (
+    `<button type="button" class="agh" data-helper="${esc(h.id)}" data-agent="${esc(agent)}" data-ws="${esc(ws)}" data-status="${esc(h.status)}"` +
+    ` style="--hp-depth:${Math.max(0, Math.min(8, depth ?? (h.depth || 1) - 1))}"` +
+    ` aria-label="${esc(t("hp.open", { what: label(h), status: st }))}" title="${esc(h.statusFrom ? `${st}: ${h.statusFrom}` : st)}">` +
+    `<span class="den-dot ${helperTone(h.status)}" aria-hidden="true"></span>` +
+    `<span class="agh-n">${esc(label(h))}</span>` +
+    `<span class="agh-s">${esc(st)}${when ? ` · ${esc(when)}` : ""}</span>` +
+    (meta ? `<span class="agh-m mono">${esc(meta)}</span>` : "") +
+    `</button>`
+  );
+}
+
+/** Under an agent's row: its recent helpers and "All helpers (n)". */
+export function helperRowsHtml(r) {
+  const h = r?.helpers;
+  if (!h || !h.total) return "";
+  const ctx = { ws: r.workspace, agent: r.agent };
+  return (
+    `<div class="aghs" data-helpers-of="${esc(r.agent)}" data-ws="${esc(r.workspace)}" role="group" aria-label="${esc(t("hp.groupOf", { name: r.displayName || r.agent }))}">` +
+    helperListHtml(h.recent, ctx) +
+    `<button type="button" class="lnk aghs-all">` +
+    esc(t("hp.all", { n: h.total })) +
+    (h.running
+      ? ` <span class="hpbdg" aria-label="${esc(t("hp.runningN", { n: h.running }))}">${esc(h.running)}</span>`
+      : "") +
+    `</button></div>`
+  );
+}
+
+/** "Helpers (n)" for a pane's bar: a count badge while any run. */
+export function helperBarButtonHtml(r) {
+  const h = r?.helpers;
+  if (!h || !h.total) return "";
+  return (
+    `<button type="button" class="den-btn sm" data-act="helpers" aria-haspopup="dialog"` +
+    ` aria-label="${esc(t(h.running ? "hp.barRunning" : "hp.bar", { n: h.total, r: h.running }))}">` +
+    esc(t("hp.title", { n: h.total })) +
+    (h.running
+      ? ` <span class="hpbdg" aria-hidden="true">${esc(h.running)}</span>`
+      : "") +
+    `</button>`
+  );
+}
+
+const CSS = `
+.hp-dlg{font-family:var(--sans);width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--border-strong);border-radius:10px;background:var(--raised, var(--surface));color:var(--text);box-shadow:var(--shadow)}
+.hp-dlg::backdrop{background:rgba(0,0,0,.35)}
+.hp-hd{display:flex;gap:8px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--border)}
+.hp-hd h2{font-size:15px;margin:0;outline:none;min-width:0;overflow-wrap:anywhere}
+.hp-hd .x{margin-left:auto;flex:none}
+.hp-body{padding:8px 12px;overflow:auto;max-height:calc(100vh - 200px)}
+.hp-note{margin:0;padding:8px 16px 12px;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}
+.hp-none{color:var(--muted);font-size:13px;padding:8px 4px}
+.hp-earlier{margin-top:8px}
+.hp-earlier summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px}
+.aghs{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 18px;padding-left:8px;border-left:2px solid var(--border)}
+.agh{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;width:100%;padding:4px 6px 4px calc(6px + var(--hp-depth,0) * 14px);border-radius:var(--radius-button,6px);cursor:pointer;font-size:12px;color:var(--text)}
+.agh:hover{background:var(--sunken)}
+.agh:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.agh-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.agh-s{color:var(--muted);white-space:nowrap}
+.agh-m{grid-column:2 / 4;color:var(--faint);font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.agh[data-status="running"] .agh-s{color:var(--text)}
+.aghs-all{align-self:flex-start;font-size:12px;margin:2px 6px}
+.hpbdg{display:inline-block;min-width:16px;padding:0 5px;border-radius:8px;background:var(--accent);color:var(--accent-text);font-size:11px;line-height:16px;text-align:center}
+`;
+
+let dlg = null;
+let opener = null;
+let openerKey = "";
+
+function ensureCss() {
+  if (document.getElementById("hp-css")) return;
+  const s = document.createElement("style");
+  s.id = "hp-css";
+  s.textContent = CSS;
+  document.head.append(s);
+}
+
+function dialog() {
+  ensureCss();
+  if (dlg && dlg.isConnected) return dlg;
+  dlg = document.createElement("dialog");
+  dlg.className = "hp-dlg";
+  dlg.id = "hp-dlg";
+  dlg.setAttribute("aria-labelledby", "hp-h");
+  dlg.innerHTML =
+    `<div class="hp-hd"><h2 id="hp-h" tabindex="-1"></h2>` +
+    `<button type="button" class="den-btn sm x" data-hp-close></button></div>` +
+    `<div class="hp-body" id="hp-body" aria-live="polite"></div>` +
+    `<p class="hp-note" id="hp-note"></p>`;
+  dlg.querySelector("[data-hp-close]").addEventListener("click", () => {
+    if (dlg.open && typeof dlg.close === "function") dlg.close();
+    else dlg.removeAttribute("open");
+  });
+  dlg.addEventListener("close", () => {
+    const o = opener;
+    const k = openerKey;
+    opener = null;
+    openerKey = "";
+    // The Agents page's poll may have replaced it meanwhile: find it again.
+    focusBack(o, k);
+  });
+  // A helper opens its transcript over this list.
+  dlg.addEventListener("click", (e) => {
+    const b = e.target.closest("button.agh");
+    if (b)
+      void openHelperTranscript({
+        ws: b.dataset.ws,
+        agent: b.dataset.agent,
+        helper: b.dataset.helper,
+        opener: b,
+      });
+  });
+  document.body.append(dlg);
+  return dlg;
+}
+
+/** Every helper of agent `agent` (see the file's comment). */
+export async function openHelpers({ ws, agent, name, opener: from = null }) {
+  const d = dialog();
+  opener = from ?? document.activeElement;
+  openerKey = refindKey(opener);
+  d.querySelector("#hp-h").textContent = t("hp.dlg", { name: name || agent });
+  d.querySelector("[data-hp-close]").textContent = t("tx.close");
+  d.querySelector("#hp-note").textContent = t("hp.note");
+  const body = d.querySelector("#hp-body");
+  body.setAttribute("aria-busy", "true");
+  body.innerHTML = `<p class="hp-none">${esc(t("tx.loading"))}</p>`;
+  if (!d.open) {
+    if (typeof d.showModal === "function") d.showModal();
+    else d.setAttribute("open", "");
+  }
+  d.querySelector("#hp-h").focus();
+  try {
+    const r = await api("GET", base(ws, agent));
+    const all = Array.isArray(r?.helpers) ? r.helpers : [];
+    const now = all.filter((h) => !h.earlier);
+    const before = all.filter((h) => h.earlier);
+    const ctx = { ws, agent };
+    body.innerHTML =
+      (r?.supported === false
+        ? `<p class="hp-none">${esc(t("hp.unsupported"))}</p>`
+        : now.length
+          ? helperListHtml(now, ctx)
+          : `<p class="hp-none">${esc(t("hp.none"))}</p>`) +
+      (before.length
+        ? `<details class="hp-earlier"><summary>${esc(t("hp.earlier", { n: before.length }))}</summary>` +
+          helperListHtml(before, ctx) +
+          `</details>`
+        : "");
+  } catch (e) {
+    body.innerHTML = `<p class="hp-none" role="alert">${esc(t("tx.failed", { err: e?.message || String(e) }))}</p>`;
+  } finally {
+    body.removeAttribute("aria-busy");
+  }
+}
+
+/** One helper's transcript, in the shared transcript view. */
+export function openHelperTranscript({ ws, agent, helper, opener: from }) {
+  let head = null;
+  return openTranscript({
+    title: t("tx.loading"),
+    note: t("hp.note"),
+    opener: from,
+    load: async () => {
+      const r = await api(
+        "GET",
+        `${base(ws, agent)}/${encodeURIComponent(helper)}`,
+      );
+      head = r?.helper;
+      const h2 = document.getElementById("tx-h");
+      const sub = document.getElementById("tx-sub");
+      if (h2 && head) h2.textContent = label(head);
+      if (sub && head)
+        sub.textContent = [
+          t(`hp.st.${head.status}`),
+          head.workflow
+            ? t("hp.workflow", {
+                name: head.workflow.name || head.workflow.runId,
+              })
+            : head.type,
+          head.model,
+          head.branch,
+          head.durationMs !== undefined ? dur(head.durationMs) : "",
+        ]
+          .filter(Boolean)
+          .join(" · ");
+      return { items: r?.items ?? [], omitted: r?.omitted ?? 0 };
+    },
+  });
+}
+
+/** Wire helper rows and "All helpers" inside `root` (a list's container). */
+export function wireHelperRows(root, nameOf = (a) => a) {
+  ensureCss();
+  root.addEventListener("click", (e) => {
+    const row = e.target.closest("button.agh");
+    if (row && root.contains(row)) {
+      e.stopPropagation();
+      void openHelperTranscript({
+        ws: row.dataset.ws,
+        agent: row.dataset.agent,
+        helper: row.dataset.helper,
+        opener: row,
+      });
+      return;
+    }
+    const all = e.target.closest(".aghs-all");
+    if (all && root.contains(all)) {
+      e.stopPropagation();
+      const g = all.closest(".aghs");
+      void openHelpers({
+        ws: g.dataset.ws,
+        agent: g.dataset.helpersOf,
+        name: nameOf(g.dataset.helpersOf, g.dataset.ws),
+        opener: all,
+      });
+    }
+  });
+}