@monster-orange/den 0.4.26 → 0.4.28

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

@@ -917,8 +917,19 @@ export const DEN_SETTINGS = [
     category: "agents",
     label: "Hub",
     description:
-      "Every agent gets Hub's tools: search Hub, publish docs and mocks there. Its team and project come from this install's token and the workspace's repos. Set hub.url and hub.token (a secret ref in this install's store) in config/local/user.yml.",
-    keywords: ["hub", "den hub", "mcp", "team", "token", "docs", "mocks"],
+      "Connect this install to your company's Hub: sign in there and approve it. Every agent then gets Hub's tools: search Hub, publish docs and mocks there. Its team comes from this install's token, its project from the workspace's repos.",
+    keywords: [
+      "hub",
+      "den hub",
+      "connect",
+      "disconnect",
+      "mcp",
+      "team",
+      "company",
+      "token",
+      "docs",
+      "mocks",
+    ],
     scope: "user",
     control: { type: "custom", render: renderHub },
     keys: ["hub_allow_tools"],
@@ -1459,20 +1470,82 @@ export function rotationHtml(b) {
   );
 }
 
-/** HUB-1.5: Settings › Agents › Den Hub (b: GET /api/hub). */
-export function hubHtml(b) {
-  if (!b || !b.configured) return "";
+/** HUB-1.7: what came back from Hub's redirect (?hub=…), when the server has no words for it. */
+const HUB_FLASH = {
+  connected: [true, "Connected to Hub."],
+  denied: [false, "Not connected: the request was declined on Hub."],
+  expired: [
+    false,
+    "That connect link was used or too old: press Connect again.",
+  ],
+  failed: [false, "Connect didn't finish: press Connect again."],
+};
+
+/**
+ * HUB-1.5/1.7: Settings › Agents › Hub (b: GET /api/hub; flash: what the
+ * last Connect came to). Not connected: Hub's address and Connect.
+ * Connected: the company (a link), role, who signed in, this install,
+ * Disconnect. A token Hub refuses offers Reconnect; a role that no longer
+ * may connect says to ask an admin (never a retry).
+ */
+export function hubHtml(b, flash) {
+  b = b || { configured: false };
+  const state = b.configured
+    ? b.state || (b.connected ? "connected" : "no_token")
+    : "no_token";
+  const note = (t, attr) => `<p class="set-note" ${attr}>${escR(t)}</p>`;
+  const flashHtml = flash
+    ? `<p class="set-note hub-flash ${flash.ok ? "ok" : "warn"}" role="status" data-hub-flash="${flash.ok ? "ok" : "failed"}">${escR(flash.message)}</p>`
+    : "";
+  if (state === "bad_config")
+    return (
+      flashHtml +
+      note(b.problem || "hub in user.yml is not valid", "data-hub-problem")
+    );
+  if (state === "no_token")
+    return (
+      flashHtml +
+      `<form class="hub-connect" data-hub-connect>` +
+      `<label for="hub-url">Hub's address</label> ` +
+      `<input type="url" id="hub-url" class="den-mono" spellcheck="false" autocomplete="url" placeholder="https://hub.example.com" value="${escR(b.url || "")}">` +
+      ` <button type="submit" class="btn sm primary" data-hub-action="connect">Connect</button>` +
+      `</form>` +
+      `<p class="set-note">Connect opens Hub. Sign in there and approve this install; you come back here connected. The token is kept in this install's secrets store, never shown.</p>` +
+      (b.problem && b.url && !/^not connected yet/.test(b.problem)
+        ? note(b.problem, "data-hub-problem")
+        : "") +
+      `<div class="rt-err" role="alert" hidden></div>`
+    );
+  const status = {
+    connected: ["ok", "Connected"],
+    rejected: ["warn", "Token not accepted"],
+    forbidden: ["warn", "Not allowed"],
+    unreachable: ["warn", "Can't reach Hub"],
+  }[state] || ["warn", "Not connected"];
+  const team = b.team
+    ? b.teamUrl && /^https?:\/\//i.test(b.teamUrl)
+      ? `<a href="${escR(b.teamUrl)}" target="_blank" rel="noopener noreferrer">${escR(b.team)}</a>`
+      : escR(b.team)
+    : "";
   const rows = [
-    ["URL", `<span class="den-mono">${escR(b.url || "not set")}</span>`],
+    ["Hub", `<span class="den-mono">${escR(b.url || "")}</span>`],
     [
       "Status",
-      b.connected
-        ? `<span class="set-tag ok" data-hub-state="connected">Connected</span>`
-        : `<span class="set-tag warn" data-hub-state="down">Not connected</span>`,
+      `<span class="set-tag ${status[0]}" data-hub-state="${escR(state)}">${status[1]}</span>`,
     ],
-    ...(b.team ? [["Team", escR(b.team)]] : []),
+    ...(team ? [["Company", team]] : []),
+    ...(b.role ? [["Role", escR(b.role)]] : []),
+    ...(b.login ? [["Signed in as", escR(b.login)]] : []),
     ...(b.label ? [["This install", escR(b.label)]] : []),
   ];
+  const why =
+    state === "rejected"
+      ? "Hub no longer accepts this install's token (revoked or expired). Reconnect signs you in again."
+      : state === "forbidden"
+        ? "Your role on Hub no longer allows Den installs. Ask a Hub admin to change your role, then Reconnect."
+        : state === "unreachable"
+          ? b.problem || "Hub didn't answer."
+          : "";
   const tools =
     `<label class="hub-tools"><input type="checkbox" id="hub-allow-tools"${b.allowTools !== false ? " checked" : ""}> Agents use Hub's tools without asking</label>` +
     `<p class="set-note" data-hub-tools-note>${
@@ -1481,46 +1554,172 @@ export function hubHtml(b) {
         : "Agents ask before each Hub tool runs."
     }</p>`;
   return (
+    flashHtml +
     `<dl class="hub-st" data-hub>` +
     rows.map(([k, v]) => `<dt>${escR(k)}</dt><dd>${v}</dd>`).join("") +
     `</dl>` +
-    tools +
-    (!b.connected && b.problem
-      ? `<p class="set-note" data-hub-problem>${escR(b.problem)}</p>`
-      : "")
+    (why ? note(why, "data-hub-problem") : "") +
+    `<div class="hub-acts">` +
+    (state === "rejected"
+      ? `<button type="button" class="btn sm primary" data-hub-action="connect">Reconnect</button> `
+      : "") +
+    `<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
   );
 }
 
-/** HUB-1.5: the Den Hub row; with no hub.url, the row isn't shown at all. */
+/** Read and clear ?hub=… (set by Hub's redirect back through /hub/callback). */
+function takeHubFlash() {
+  try {
+    const u = new URL(location.href);
+    const v = u.searchParams.get("hub");
+    if (!v) return null;
+    u.searchParams.delete("hub");
+    history.replaceState(history.state, "", u.pathname + u.search + u.hash);
+    return v;
+  } catch {
+    return null;
+  }
+}
+
+/** HUB-1.5/1.7: the Hub row: always shown, so a person can Connect. */
 function renderHub(host, ctx) {
-  const row = host.closest(".set-row");
-  if (row) row.hidden = true;
+  return drawHub(host, ctx, takeHubFlash(), null);
+}
+
+/** Draw the row; `back` is ?hub=… from Hub's redirect, `flash` words to show. */
+function drawHub(host, ctx, back, flash) {
   // Under an invalid config /api/hub answers 422: ask nothing, show nothing.
-  if (ctx.shell?.configInvalid?.() === true) return Promise.resolve();
+  if (ctx.shell?.configInvalid?.() === true) {
+    host.innerHTML = "";
+    return Promise.resolve();
+  }
   return ctx.shell
     .api("GET", "/api/hub")
     .then((b) => {
-      const html = hubHtml(b);
-      host.innerHTML = html;
-      if (row) row.hidden = !html;
-      const box = host.querySelector("#hub-allow-tools");
-      if (box)
-        box.addEventListener("change", () => {
-          box.disabled = true;
-          ctx.shell
-            .api("POST", "/api/settings", { hub_allow_tools: box.checked })
-            .then(() => renderHub(host, ctx))
-            .catch(() => {
-              box.checked = !box.checked;
-              box.disabled = false;
-            });
-        });
+      let f = flash;
+      if (!f && b && b.connect) f = b.connect;
+      else if (!f && back && HUB_FLASH[back])
+        f = { ok: HUB_FLASH[back][0], message: HUB_FLASH[back][1] };
+      host.innerHTML = hubHtml(b, f);
+      wireHub(host, ctx);
     })
     .catch(() => {
       host.innerHTML = "";
     });
 }
 
+function wireHub(host, ctx) {
+  const err = (msg, retry) => {
+    const e = host.querySelector(".rt-err");
+    if (!e) return;
+    e.hidden = !msg;
+    e.textContent = msg || "";
+    if (retry) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "btn sm";
+      btn.dataset.hubAction = "force";
+      btn.textContent = "Remove it here anyway";
+      btn.addEventListener("click", () => disconnect(true, btn));
+      e.append(" ", btn);
+    }
+  };
+  const busy = (on) =>
+    host.querySelectorAll("button, input").forEach((x) => (x.disabled = on));
+  const connect = () => {
+    const typed = host.querySelector("#hub-url");
+    busy(true);
+    err("");
+    ctx.shell
+      .api("POST", "/api/hub/connect", typed ? { url: typed.value } : {})
+      .then((r) => {
+        // Off to Hub: sign in and approve there; Hub sends the person back.
+        location.assign(r.location);
+      })
+      .catch((e) => {
+        busy(false);
+        err(e?.message || "Connect didn't start");
+      });
+  };
+  const disconnect = (force, btn) => {
+    busy(true);
+    err("");
+    ctx.shell
+      .api("POST", "/api/hub/disconnect", force ? { force: true } : {})
+      .then((r) => drawHub(host, ctx, null, { ok: true, message: r.message }))
+      .catch((e) => {
+        busy(false);
+        if (btn) btn.remove();
+        err(e?.message || "Not disconnected", !force);
+      });
+  };
+  const form = host.querySelector("[data-hub-connect]");
+  if (form)
+    form.addEventListener("submit", (ev) => {
+      ev.preventDefault();
+      connect();
+    });
+  host
+    .querySelectorAll('button[data-hub-action="connect"]')
+    .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", () => 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", () => {
+      box.disabled = true;
+      ctx.shell
+        .api("POST", "/api/settings", { hub_allow_tools: box.checked })
+        .then(() => drawHub(host, ctx, null, null))
+        .catch(() => {
+          box.checked = !box.checked;
+          box.disabled = false;
+        });
+    });
+}
+
 /** The Rotation row: this install's values, the overrides, + Add override. */
 function renderRotation(host, ctx) {
   const err = () => host.querySelector(".rt-err");

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

@@ -473,6 +473,29 @@
         min-width: 0;
         overflow-wrap: anywhere;
       }
+      /* HUB-1.7: Connect / Disconnect. */
+      .hub-connect {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px 8px;
+        align-items: center;
+      }
+      .hub-connect input {
+        flex: 1 1 240px;
+        min-width: 0;
+      }
+      .hub-acts {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 10px;
+      }
+      .hub-flash.ok {
+        color: var(--ok, inherit);
+      }
+      .hub-flash.warn {
+        color: var(--warn, inherit);
+      }
       .hub-tools {
         display: flex;
         gap: 8px;

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

@@ -309,6 +309,7 @@
     "lock.checking": "Checking…",
     "lock.note": "Den uses it only for sudo. Agents can't enter it.",
     "lock.saved": "Admin password kept for this session",
+    "lock.savedTo": "Admin password kept for this session and saved to {s}",
     "lock.saveFailed": "Kept for this session, but saving to {s} failed: {err}",
     "lock.wrong": "Incorrect password — try again",
     "lock.reqFailed": "Request failed — is the server running?",
@@ -864,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).",
@@ -1058,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"/>',
@@ -1340,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: [],
@@ -1917,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.
     {
@@ -2492,6 +2546,7 @@
         );
       });
     html += '<div class="den-rail-grow"></div>';
+    html += hubItem();
     html += item(
       {
         id: SETTINGS.id,
@@ -2515,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
@@ -4709,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,
@@ -5113,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;",

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

@@ -1459,7 +1459,11 @@ function openLock() {
                 s: sudo.vault.label || sudo.vault.backend,
                 err: res.vaultError,
               })
-            : t("lock.saved"),
+            : saveToVault
+              ? t("lock.savedTo", {
+                  s: sudo.vault.label || sudo.vault.backend,
+                })
+              : t("lock.saved"),
         );
         settleSudo(true);
         return;