@monster-orange/den 0.4.27 → 0.4.28

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

@@ -84,6 +84,13 @@
  * as a tag.
  */
 import { readiness, runtimeName, runtimeOptions } from "/agent-start.js";
+import { focusBack, refindKey } from "/transcript-view.js";
+import {
+  helperBarButtonHtml,
+  helperRowsHtml,
+  openHelpers,
+  wireHelperRows,
+} from "/agent-helpers.js";
 import {
   commandProblem,
   filterBarHtml,
@@ -496,7 +503,8 @@ function stoppedHtml(r) {
     `<span class="why">${esc(stopReason(r))}</span>` +
     `</button>` +
     `<div class="agacts">${callout}${cant}${resume}${fresh}${rename}${remove}</div>` +
-    `</div>`
+    `</div>` +
+    helperRowsHtml(r)
   );
 }
 
@@ -540,15 +548,49 @@ function rowHtml(r) {
   // D28: a running agent whose rotation is due: its callout, with buttons
   // (before, only a tag: nothing to press).
   const callout = r.kind === "agent" ? rotCalloutHtml(r) : "";
-  if (!callout) return button;
+  // D32: the helpers it started in its own session, under it.
+  const helpers = r.kind === "agent" ? helperRowsHtml(r) : "";
+  if (!callout) return button + helpers;
   return (
     `<div class="agst" data-agent="${esc(r.agent)}" data-state="${esc(r.state)}" data-ws="${esc(r.workspace)}" data-rotation="${rot}">` +
     button +
     `<div class="agacts">${callout}</div>` +
-    `</div>`
+    `</div>` +
+    helpers
   );
 }
 
+/** Where focus was in the list, as a selector that finds it again once
+ * the list is redrawn: a helper row or button, an agent's row, a link. */
+function listFocusKey(el) {
+  const key = refindKey(el);
+  if (key) return key;
+  const q = (v) => CSS.escape(String(v ?? ""));
+  if (el.matches("button.agr[data-id]"))
+    return `#agl button.agr[data-id="${q(el.dataset.id)}"]`;
+  if (el.matches("[data-act]")) {
+    const row = el.closest(".agst[data-agent]");
+    const act = `[data-act="${q(el.dataset.act)}"]`;
+    return row
+      ? `#agl .agst[data-agent="${q(row.dataset.agent)}"][data-ws="${q(row.dataset.ws)}"] ${act}`
+      : `#agl ${act}`;
+  }
+  return "";
+}
+
+/** The list's HTML, written only when it changed; focus inside it is kept
+ * (the refresh poll redraws it every few seconds). */
+function setList(el, html) {
+  if (el.denHtml === html) return;
+  el.denHtml = html;
+  const had = el.contains(document.activeElement)
+    ? document.activeElement
+    : null;
+  const key = had ? listFocusKey(had) : "";
+  el.innerHTML = html;
+  if (had) focusBack(had, key);
+}
+
 function paintList() {
   const el = st.root.querySelector("#agl");
   el.removeAttribute("aria-busy");
@@ -562,7 +604,7 @@ function paintList() {
       `<div class="agnote" data-note="backend">${esc(t("ag.noBackend", { cli: CLI }))}</div>`,
     );
   if (!st.data) {
-    el.innerHTML = notes.join("");
+    setList(el, notes.join(""));
     return;
   }
   // ON-6: the server agent's group, "Server", first, whatever the view.
@@ -615,10 +657,12 @@ function paintList() {
         )
         .join("")
     : `<div class="none">${esc(t("ag.none.scope", { scope: st.scopeLabel }))}</div>`;
-  el.innerHTML =
+  setList(
+    el,
     notes.join("") +
-    body +
-    `<div class="aghint" id="agl-hint">${esc(t(`ag.hint.${shownLayout()}`))} ${esc(t("ag.hint.keys"))}</div>`;
+      body +
+      `<div class="aghint" id="agl-hint">${esc(t(`ag.hint.${shownLayout()}`))} ${esc(t("ag.hint.keys"))}</div>`,
+  );
   const clear = st.root.querySelector("#ag-clear");
   if (clear) clear.hidden = !visibleRows().some(isStopped);
   // No such workspace: nothing to start an agent in.
@@ -697,6 +741,13 @@ async function refresh() {
     /* the last list stays; the next ask may answer */
   }
   followAgents();
+  // D32: the rail's Agents badge: helpers running now.
+  window.denShell?.setState?.({
+    helpersRunning: (st.data?.sessions ?? []).reduce(
+      (n, r) => n + (r.helpers?.running ?? 0),
+      0,
+    ),
+  });
   st.scopeLabel = scopeLabelFor(viewWorkspaces());
   paintList();
   paintSub();
@@ -1098,7 +1149,7 @@ function paintBar(p) {
     (r?.kind === "agent" && rotActionsHtml(r)
       ? `<span class="agrot" data-rot-bar title="${esc(rotMessage(r))}"><span class="tagx warn" data-rotation="${rotationOf(r)}">${esc(t(rotationOf(r) === "ready" ? "ag.rot.ready" : "ag.rot.due", { why: rotationWhy(r.rotation) }))}</span>${rotActionsHtml(r)}</span>`
       : "") +
-    `<span class="x">${reconnect}${stop}${resume}${more}<button type="button" class="den-btn sm" data-act="close" aria-label="${esc(t("ag.detachName", { id: name }))}" title="${esc(t("ag.detach"))}">×</button></span>`;
+    `<span class="x">${r?.kind === "agent" ? helperBarButtonHtml(r) : ""}${reconnect}${stop}${resume}${more}<button type="button" class="den-btn sm" data-act="close" aria-label="${esc(t("ag.detachName", { id: name }))}" title="${esc(t("ag.detach"))}">×</button></span>`;
   // Tabs: the tab's × closes it; the pane's bar has none.
   const x = bar.querySelector('[data-act="close"]');
   if (x) x.hidden = shownLayout() === "tabs";
@@ -2947,6 +2998,13 @@ export async function mountAgentsPage(root) {
     startPrefill = { ws: q.get("ws") || "", folder: q.get("folder") || "" };
   }
 
+  // D32: helper rows open their transcript; "All helpers" the full list.
+  wireHelperRows(root.querySelector("#agl"), (agent, ws) => {
+    const r = visibleRows().find(
+      (x) => x.agent === agent && x.workspace === ws,
+    );
+    return r ? displayName(r) : agent;
+  });
   root.querySelector("#agl").addEventListener("click", (e) => {
     const act = e.target.closest("button[data-act]");
     if (act) {
@@ -3015,7 +3073,16 @@ export async function mountAgentsPage(root) {
       const r = rowOf(id);
       if (r) void restartRow(r, "resume", b);
     } else if (b.dataset.act === "reconnect") void connect(p);
-    else if (b.dataset.act === "more") {
+    else if (b.dataset.act === "helpers") {
+      const r = rowOf(id);
+      if (r?.kind === "agent")
+        void openHelpers({
+          ws: r.workspace,
+          agent: r.agent,
+          name: paneName(r),
+          opener: b,
+        });
+    } else if (b.dataset.act === "more") {
       const r = rowOf(id);
       if (!r) return;
       window.denShell?.openMenu?.(b, {

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

@@ -758,6 +758,45 @@
     "ag.sub.one": "{n} sesión · {w} en espera · {scope}",
     "ag.all": "todos los espacios",
     "ag.waiting": "en espera",
+    "tx.asked": "Pedido",
+    "tx.result": "Resultado",
+    "tx.error": "Error",
+    "tx.omitted": "{n} líneas anteriores no se muestran",
+    "tx.omitted.one": "{n} línea anterior no se muestra",
+    "tx.empty": "Nada todavía.",
+    "tx.close": "Cerrar",
+    "tx.loading": "Cargando…",
+    "tx.failed": "No se pudo leer: {err}",
+    "hp.title": "Ayudantes ({n})",
+    "hp.bar": "Ayudantes: {n}",
+    "hp.barRunning": "Ayudantes: {n}, {r} en marcha",
+    "hp.all": "Todos los ayudantes ({n})",
+    "hp.runningN": "{n} en marcha",
+    "hp.groupOf": "Ayudantes de {name}",
+    "hp.open": "{what}, {status}: abrir su transcripción",
+    "hp.dlg": "Ayudantes de {name}",
+    "hp.earlier": "Conversaciones anteriores ({n})",
+    "hp.none": "Sin ayudantes en esta conversación.",
+    "hp.unsupported":
+      "El runtime de este agente no puede decir qué ayudantes inició.",
+    "hp.workflow": "flujo {name}",
+    "hp.note":
+      "Los ayudantes corren dentro de la sesión del propio agente: Den los muestra, pero no puede detenerlos ni dirigirlos. Para cambiar lo que hacen, díselo al agente.",
+    "hp.st.running": "en marcha",
+    "hp.st.idle": "inactivo",
+    "hp.st.done": "terminado",
+    "hp.st.failed": "falló",
+    "hp.st.stopped": "detenido",
+    "b.helpers": "{n} ayudantes en marcha",
+    "b.helpers.one": "{n} ayudante en marcha",
+    "hub.rail": "Hub",
+    "hub.railTip": "{team} en Hub (se abre en otra pestaña)",
+    "hub.railTipPlain": "Hub (se abre en otra pestaña)",
+    "hub.railUnread": "{n} esperan tu respuesta",
+    "hub.railRejected":
+      "Hub no acepta el token de esta instalación. Vuelve a conectar en Ajustes › Hub.",
+    "hub.railForbidden":
+      "Hub no permite esta instalación. Pídeselo a un administrador de Hub (Ajustes › Hub).",
     "ag.session": "sesión",
     "ag.empty":
       "Elige una sesión a la izquierda para abrir su terminal. Abre más para verlas en mosaico (hasta 4).",

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

@@ -739,6 +739,43 @@
     "ag.sub": "{n} セッション · 承認待ち {w} · {scope}",
     "ag.all": "すべてのワークスペース",
     "ag.waiting": "承認待ち",
+    "tx.asked": "依頼",
+    "tx.result": "結果",
+    "tx.error": "エラー",
+    "tx.omitted": "以前の {n} 行は表示していません",
+    "tx.empty": "まだ何もありません。",
+    "tx.close": "閉じる",
+    "tx.loading": "読み込み中…",
+    "tx.failed": "読み取れませんでした: {err}",
+    "hp.title": "ヘルパー ({n})",
+    "hp.bar": "ヘルパー: {n}",
+    "hp.barRunning": "ヘルパー: {n}、実行中 {r}",
+    "hp.all": "すべてのヘルパー ({n})",
+    "hp.runningN": "実行中 {n}",
+    "hp.groupOf": "{name} のヘルパー",
+    "hp.open": "{what}、{status}: トランスクリプトを開く",
+    "hp.dlg": "{name} のヘルパー",
+    "hp.earlier": "以前の会話 ({n})",
+    "hp.none": "この会話にヘルパーはいません。",
+    "hp.unsupported":
+      "このエージェントのランタイムは、起動したヘルパーを示せません。",
+    "hp.workflow": "ワークフロー {name}",
+    "hp.note":
+      "ヘルパーはこのエージェント自身のセッションで動くため、Den は表示できますが、停止や指示はできません。変えたいときはエージェントに伝えてください。",
+    "hp.st.running": "実行中",
+    "hp.st.idle": "待機",
+    "hp.st.done": "完了",
+    "hp.st.failed": "失敗",
+    "hp.st.stopped": "停止",
+    "b.helpers": "実行中のヘルパー {n}",
+    "hub.rail": "Hub",
+    "hub.railTip": "Hub の {team}（新しいタブで開く）",
+    "hub.railTipPlain": "Hub（新しいタブで開く）",
+    "hub.railUnread": "対応待ち {n} 件",
+    "hub.railRejected":
+      "Hub がこのインストールのトークンを受け付けません。設定 › Hub から再接続してください。",
+    "hub.railForbidden":
+      "Hub がこのインストールを許可していません。Hub の管理者に依頼してください（設定 › Hub）。",
     "ag.session": "セッション",
     "ag.empty":
       "左のセッションを選ぶとターミナルが開きます。複数開くと並べて表示します（最大 4）。",

package/src/ui/server/public/settings-registry.js

@@ -1565,6 +1565,12 @@ export function hubHtml(b, flash) {
       : "") +
     `<button type="button" class="btn sm" data-hub-action="disconnect">Disconnect</button>` +
     `</div>` +
+    // Disconnect asks first, saying what it does (Hub revokes the key).
+    `<div class="hub-confirm" data-hub-confirm hidden>` +
+    `<p class="set-note set-warn">This revokes this Den's Hub key on Hub. Agents lose Hub until you Connect again.</p>` +
+    `<button type="button" class="btn sm primary" data-hub-action="disconnect-yes">Disconnect</button> ` +
+    `<button type="button" class="btn sm" data-hub-action="disconnect-no">Cancel</button>` +
+    `</div>` +
     `<div class="rt-err" role="alert" hidden></div>` +
     tools
   );
@@ -1667,9 +1673,39 @@ function wireHub(host, ctx) {
     .forEach(
       (x) => x.type === "button" && x.addEventListener("click", connect),
     );
+  const acts = host.querySelector(".hub-acts");
+  const ask = host.querySelector("[data-hub-confirm]");
+  const asking = (on) => {
+    if (!acts || !ask) return;
+    acts.hidden = on;
+    ask.hidden = !on;
+    host
+      .querySelector(
+        on
+          ? '[data-hub-action="disconnect-no"]'
+          : '[data-hub-action="disconnect"]',
+      )
+      ?.focus();
+  };
   host
     .querySelector('[data-hub-action="disconnect"]')
-    ?.addEventListener("click", () => disconnect(false));
+    ?.addEventListener("click", () => asking(true));
+  host
+    .querySelector('[data-hub-action="disconnect-no"]')
+    ?.addEventListener("click", () => asking(false));
+  ask?.addEventListener("keydown", (ev) => {
+    if (ev.key === "Escape") {
+      ev.preventDefault();
+      asking(false);
+    }
+  });
+  host
+    .querySelector('[data-hub-action="disconnect-yes"]')
+    ?.addEventListener("click", () => {
+      if (ask) ask.hidden = true;
+      if (acts) acts.hidden = false;
+      disconnect(false);
+    });
   const box = host.querySelector("#hub-allow-tools");
   if (box)
     box.addEventListener("change", () => {

package/src/ui/server/public/shell.js

@@ -865,6 +865,45 @@
     "ag.sub.one": "{n} session · {w} waiting · {scope}",
     "ag.all": "all workspaces",
     "ag.waiting": "waiting",
+    "tx.asked": "Asked",
+    "tx.result": "Result",
+    "tx.error": "Error",
+    "tx.omitted": "{n} earlier lines not shown",
+    "tx.omitted.one": "{n} earlier line not shown",
+    "tx.empty": "Nothing yet.",
+    "tx.close": "Close",
+    "tx.loading": "Loading…",
+    "tx.failed": "Couldn't read it: {err}",
+    "hp.title": "Helpers ({n})",
+    "hp.bar": "Helpers: {n}",
+    "hp.barRunning": "Helpers: {n}, {r} running",
+    "hp.all": "All helpers ({n})",
+    "hp.runningN": "{n} running",
+    "hp.groupOf": "Helpers of {name}",
+    "hp.open": "{what}, {status}: open its transcript",
+    "hp.dlg": "{name}'s helpers",
+    "hp.earlier": "Earlier conversations ({n})",
+    "hp.none": "No helpers in this conversation.",
+    "hp.unsupported":
+      "This agent's runtime can't tell which helpers it started.",
+    "hp.workflow": "workflow {name}",
+    "hp.note":
+      "Helpers run inside this agent's own session, so Den shows them but can't stop or steer them. To change what they do, tell the agent.",
+    "hp.st.running": "running",
+    "hp.st.idle": "idle",
+    "hp.st.done": "done",
+    "hp.st.failed": "failed",
+    "hp.st.stopped": "stopped",
+    "b.helpers": "{n} helpers running",
+    "b.helpers.one": "{n} helper running",
+    "hub.rail": "Hub",
+    "hub.railTip": "{team} on Hub (opens in a new tab)",
+    "hub.railTipPlain": "Hub (opens in a new tab)",
+    "hub.railUnread": "{n} waiting on you",
+    "hub.railRejected":
+      "Hub doesn't accept this install's token. Reconnect in Settings › Hub.",
+    "hub.railForbidden":
+      "Hub doesn't allow this install. Ask a Hub admin (Settings › Hub).",
     "ag.session": "session",
     "ag.empty":
       "Pick a session on the left to open its terminal. Open more to tile them (up to 4).",
@@ -1059,6 +1098,8 @@
     // ON-6: the server agent, a speech bubble with a spark.
     assistant:
       '<path d="M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-8l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/><path d="M12 8v4M10 10h4"/>',
+    // Hub: a node joined to three (the company's shared place).
+    hub: '<circle cx="12" cy="12" r="2.5"/><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="20" r="2"/><path d="M6.6 7.2l3.5 3.2M17.4 7.2l-3.5 3.2M12 14.5V18"/>',
     // SEC-2a: who this browser is (the rail footer's identity chip).
     person:
       '<circle cx="12" cy="8" r="3.5"/><path d="M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5"/>',
@@ -1341,6 +1382,9 @@
     health: {},
     down: 0,
     openLogs: 0,
+    helpersRunning: 0,
+    // The rail's Hub link: GET /api/hub?rail=1, or null (not connected).
+    hub: null,
     pins: [],
     collapsed: false,
     hidden: [],
@@ -1918,6 +1962,15 @@
       order: 17,
       href: "/agents",
       keywords: ["sessions", "terminal"],
+      // D32: helpers the agents started that run now.
+      badge: function (s) {
+        return s.helpersRunning > 0
+          ? {
+              n: s.helpersRunning,
+              label: t("b.helpers", { n: s.helpersRunning }),
+            }
+          : null;
+      },
     },
     // ON-6: the server agent, this Den's own: one click away, after Agents.
     {
@@ -2493,6 +2546,7 @@
         );
       });
     html += '<div class="den-rail-grow"></div>';
+    html += hubItem();
     html += item(
       {
         id: SETTINGS.id,
@@ -2516,6 +2570,75 @@
     return html;
   }
 
+  /**
+   * The rail's Hub link, above Settings: only once this install is
+   * connected. It opens the company's page on Hub in a new tab, with a
+   * count of what waits on the person (whoami's unread). A token Hub
+   * rejects, or a role it forbids, greys it, and it goes to Settings ›
+   * Hub, which says what to do.
+   */
+  function hubTarget(u) {
+    try {
+      var x = new URL(u);
+      return x.protocol === "https:" ||
+        (x.protocol === "http:" &&
+          (x.hostname === "localhost" || x.hostname === "127.0.0.1"))
+        ? x.href
+        : "";
+    } catch (e) {
+      return "";
+    }
+  }
+  function hubItem() {
+    var h = state.hub;
+    if (!h || !h.configured) return "";
+    var label = t("hub.rail");
+    if (h.state === "rejected" || h.state === "forbidden") {
+      var why = t(
+        h.state === "rejected" ? "hub.railRejected" : "hub.railForbidden",
+      );
+      return (
+        '<a class="den-ni den-hub den-off" href="/settings#agents.hub" data-nav="hub" data-hub="' +
+        esc(h.state) +
+        '" title="' +
+        esc(why) +
+        '" aria-label="' +
+        esc(label + ": " + why) +
+        '">' +
+        icon("hub") +
+        '<span class="den-lbl">' +
+        esc(label) +
+        "</span></a>"
+      );
+    }
+    var href = h.state === "connected" ? hubTarget(h.teamUrl || "") : "";
+    if (!href) return "";
+    var tip = h.team
+      ? t("hub.railTip", { team: h.team })
+      : t("hub.railTipPlain");
+    var n = typeof h.unread === "number" && h.unread > 0 ? h.unread : 0;
+    var waiting = n ? t("hub.railUnread", { n: n }) : "";
+    return (
+      '<a class="den-ni den-hub" href="' +
+      esc(href) +
+      '" target="_blank" rel="noopener noreferrer" data-nav="hub" data-hub="connected" title="' +
+      esc(tip) +
+      '" aria-label="' +
+      esc(label + ", " + tip + (waiting ? ", " + waiting : "")) +
+      '">' +
+      icon("hub") +
+      '<span class="den-lbl">' +
+      esc(label) +
+      ' <span class="den-ext" aria-hidden="true">↗</span></span>' +
+      (n
+        ? '<span class="den-bdg" aria-hidden="true">' +
+          esc(n > 99 ? "99+" : n) +
+          "</span>"
+        : "") +
+      "</a>"
+    );
+  }
+
   /**
    * SEC-2a: the rail footer's identity chip: "Local" (this machine, no
    * sign-in), "Signed in · this device" (a one-time link or a code) or
@@ -4710,6 +4833,80 @@
       document.title = title.slice(0, at) + " · " + t(label);
   })();
 
+  // D32: the rail's Agents badge on every page: helpers running now
+  // (GET /api/sessions/helpers, a count). The Agents page sets it itself
+  // from its own list. Quiet on any failure: the badge just isn't there.
+  (function () {
+    if (page === "agents" || typeof rawFetch !== "function") return;
+    function poll() {
+      // A refusal page or a bad config: no polls (each would be refused).
+      if (configInvalid()) return;
+      if (document.hidden) return void setTimeout(poll, 15000);
+      rawFetch("/api/sessions/helpers", {
+        cache: "no-store",
+        credentials: "same-origin",
+      })
+        .then(function (r) {
+          return r.ok ? r.json() : null;
+        })
+        .then(
+          function (b) {
+            var n = b && typeof b.running === "number" ? b.running : 0;
+            if (n !== state.helpersRunning) setState({ helpersRunning: n });
+          },
+          function () {},
+        )
+        .then(function () {
+          setTimeout(poll, 15000);
+        });
+    }
+    setTimeout(poll, 1500);
+  })();
+
+  // The rail's Hub link (hubItem): GET /api/hub?rail=1 (which leaves
+  // Connect's one-time result for Settings) at load and every minute while
+  // the page shows. Quiet on any failure: the link just isn't there.
+  (function () {
+    if (typeof rawFetch !== "function") return;
+    var last = "";
+    function poll() {
+      // A refusal page or a bad config: no polls (each would be refused).
+      if (configInvalid()) return;
+      if (document.hidden) return void setTimeout(poll, 60000);
+      rawFetch("/api/hub?rail=1", {
+        cache: "no-store",
+        credentials: "same-origin",
+      })
+        .then(function (r) {
+          return r.ok ? r.json() : null;
+        })
+        .then(
+          function (b) {
+            var h =
+              b && b.configured
+                ? {
+                    configured: true,
+                    state: b.state,
+                    team: b.team,
+                    teamUrl: b.teamUrl,
+                    unread: b.unread,
+                  }
+                : null;
+            var k = JSON.stringify(h);
+            if (k !== last) {
+              last = k;
+              setState({ hub: h });
+            }
+          },
+          function () {},
+        )
+        .then(function () {
+          setTimeout(poll, 60000);
+        });
+    }
+    setTimeout(poll, 800);
+  })();
+
   window.denShell = {
     registerGroup: registerGroup,
     registerNav: registerNav,
@@ -5114,6 +5311,9 @@
     "  text-align: left; background: none; border: 0; padding: 6px 10px; border-radius: var(--radius-button);",
     "  cursor: pointer; color: var(--muted); text-decoration: none; position: relative; font: inherit; }",
     ".den-ni:hover { background: var(--sunken); color: var(--text); }",
+    // The rail's Hub link: ↗ (a new tab); greyed when Hub refuses it.
+    ".den-ni .den-ext { color: var(--faint); font-size: 12px; }",
+    ".den-ni.den-off { opacity: .55; }",
     ".den-ni[aria-current='page'] { background: color-mix(in srgb, var(--accent) 13%, transparent);",
     "  color: var(--text); font-weight: 500; }",
     ".den-ni[aria-current='page']::before { content: ''; position: absolute; left: -8px; top: 6px;",