@monster-orange/den 0.4.23 → 0.4.25

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

@@ -0,0 +1,150 @@
+/**
+ * A searchable picker (D30): a text field (role=combobox) over a listbox.
+ * Type to filter (the command palette's ranking, rankCommands), ↑/↓ to
+ * move, Enter (or a click) picks, Esc closes. What is picked is an id; what
+ * is shown is its name. One shared control, so a form never asks a person
+ * to type an id.
+ *
+ *   comboHtml({ id, label, placeholder })   the markup (a <label>, the
+ *                                            field, its list)
+ *   wireCombo(root, id, { items, onPick })  makes it work; items() is read
+ *                                            each time it opens, so it
+ *                                            follows live data. Returns
+ *                                            { value(), set(id), clear() }.
+ *
+ * An item: { id, label, sub?, keywords?, off? } (off: shown, not pickable).
+ */
+import { rankCommands } from "./topbar.js";
+
+const esc = (s) =>
+  String(s ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+
+export function comboHtml({ id, label, placeholder = "" }) {
+  return (
+    `<span class="den-combo" data-combo="${esc(id)}">` +
+    `<label for="${esc(id)}">${esc(label)}</label>` +
+    `<span class="den-combo-box">` +
+    `<input type="text" id="${esc(id)}" role="combobox" aria-expanded="false" aria-controls="${esc(id)}-list" aria-autocomplete="list" autocomplete="off" spellcheck="false" placeholder="${esc(placeholder)}">` +
+    `<ul id="${esc(id)}-list" role="listbox" aria-label="${esc(label)}" class="den-combo-list" hidden></ul>` +
+    `</span></span>`
+  );
+}
+
+/** Rows ranked for `q` (every item when it is empty). */
+export function comboMatches(items, q) {
+  const list = items.map((x) => ({
+    ...x,
+    keywords: [x.id, x.sub ?? "", ...(x.keywords ?? [])],
+  }));
+  return rankCommands(list, q, { limit: 50, emptyLimit: 50 });
+}
+
+export function wireCombo(root, id, { items, onPick }) {
+  const input = root.querySelector(`#${CSS.escape(id)}`);
+  const ul = root.querySelector(`#${CSS.escape(id)}-list`);
+  if (!input || !ul) return null;
+  let picked = "";
+  let shown = [];
+  let sel = 0;
+  const close = () => {
+    ul.hidden = true;
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+  };
+  const draw = () => {
+    shown = comboMatches(
+      items(),
+      input.value === labelOf(picked) ? "" : input.value,
+    );
+    sel = Math.min(sel, Math.max(0, shown.length - 1));
+    ul.innerHTML = shown.length
+      ? shown
+          .map(
+            (x, i) =>
+              `<li role="option" id="${esc(id)}-o-${i}" data-i="${i}" aria-selected="${i === sel}"${x.off ? ' aria-disabled="true"' : ""}>` +
+              `<span class="den-combo-l">${esc(x.label)}</span>` +
+              (x.sub ? `<span class="den-combo-s">${esc(x.sub)}</span>` : "") +
+              `</li>`,
+          )
+          .join("")
+      : `<li class="den-combo-none" aria-disabled="true">No match</li>`;
+    ul.hidden = false;
+    input.setAttribute("aria-expanded", "true");
+    if (shown.length)
+      input.setAttribute("aria-activedescendant", `${id}-o-${sel}`);
+    ul.querySelector(`[data-i="${sel}"]`)?.scrollIntoView?.({
+      block: "nearest",
+    });
+  };
+  const labelOf = (v) => items().find((x) => x.id === v)?.label ?? "";
+  const pick = (x) => {
+    if (!x || x.off) return;
+    picked = x.id;
+    input.value = x.label;
+    input.dataset.value = x.id;
+    close();
+    onPick?.(x);
+  };
+  input.addEventListener("focus", () => {
+    sel = 0;
+    draw();
+  });
+  input.addEventListener("input", () => {
+    picked = "";
+    delete input.dataset.value;
+    sel = 0;
+    draw();
+  });
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (ul.hidden) return draw();
+      const n = shown.length;
+      if (!n) return;
+      sel = (sel + (e.key === "ArrowDown" ? 1 : n - 1)) % n;
+      draw();
+    } else if (e.key === "Enter") {
+      if (ul.hidden) return;
+      e.preventDefault();
+      pick(shown[sel]);
+    } else if (e.key === "Escape") {
+      if (!ul.hidden) {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      }
+    }
+  });
+  // mousedown, not click: the field keeps its focus (no blur close first).
+  ul.addEventListener("mousedown", (e) => {
+    const li = e.target.closest?.("[data-i]");
+    if (!li) return;
+    e.preventDefault();
+    pick(shown[Number(li.dataset.i)]);
+  });
+  input.addEventListener("blur", () => {
+    close();
+    // Leaving with a half-typed name: back to what was picked.
+    if (input.value !== labelOf(picked)) input.value = labelOf(picked);
+  });
+  return {
+    value: () => picked,
+    set: (v) => {
+      picked = v;
+      input.value = labelOf(v);
+      if (v) input.dataset.value = v;
+      else delete input.dataset.value;
+    },
+    clear: () => {
+      picked = "";
+      input.value = "";
+      delete input.dataset.value;
+    },
+  };
+}

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

@@ -305,10 +305,15 @@ function githubBlock(s, t) {
 
 /**
  * D17: a Den with no owner yet that a rule lets someone claim. It leads the
- * page: Connect your GitHub account. "This is my computer" (with
- * web.allowed_github_org) goes to localhost and back, which only works in a
- * browser on the machine Den runs on, then starts the GitHub sign-in with
- * that proof; "Sign in as @login" (web.owner_github) works from anywhere.
+ * page: Connect your GitHub account.
+ *
+ *   - "Sign in as @login" (web.owner_github) works from any browser: when
+ *     it is there, it is the primary button.
+ *   - The localhost trip (web.allowed_github_org) only works in a browser
+ *     on the machine Den runs on, so its button says so ("On <host>
+ *     itself: connect GitHub"), never a footnote (D29).
+ *   - Only the org rule: the page says to open it on <host>, or to set
+ *     web.owner_github to sign in from anywhere.
  */
 function claimBlock(s, t) {
   const g = s.github;
@@ -316,24 +321,31 @@ function claimBlock(s, t) {
   const host = s.machine || "";
   const back = location.origin + location.pathname + location.search;
   const here = g.attest ? `${g.attest}?return=${encodeURIComponent(back)}` : "";
+  const as = g.ownerGithub
+    ? `<button type="button" class="btn primary" id="den-gh-start">${esc(t("err.signin.claimAs", { login: g.ownerGithub }))}</button>`
+    : "";
+  const hereBtn = here
+    ? `<a class="btn${as ? "" : " primary"}" id="den-claim-here" href="${esc(here)}">${
+        host
+          ? withHost(t, "err.signin.claimHereOn", { host })
+          : esc(t("err.signin.claimHere"))
+      }</a>`
+    : "";
   return (
     `<div id="den-gh" class="den-claim">` +
     `<h2 class="den-h" id="den-claim-title">${esc(t("err.signin.claimTitle"))}</h2>` +
     `<p class="lead" id="den-claim-lead">${esc(t("err.signin.claimLead", { name: s.name || "Den" }))}</p>` +
     (g.org
-      ? `<p id="den-claim-org">${withHost(t, "err.signin.claimOrg", { org: g.org, host })}</p>`
+      ? `<p id="den-claim-org">${withHost(
+          t,
+          g.ownerGithub ? "err.signin.claimOrg" : "err.signin.claimOrgOnly",
+          { org: g.org, host },
+        )}</p>`
       : "") +
     `<div class="acts" style="margin-top:0">` +
-    (here
-      ? `<a class="btn primary" id="den-claim-here" href="${esc(here)}">${esc(t("err.signin.claimHere"))}</a>`
-      : "") +
-    (g.ownerGithub
-      ? `<button type="button" class="btn${here ? "" : " primary"}" id="den-gh-start">${esc(t("err.signin.claimAs", { login: g.ownerGithub }))}</button>`
-      : "") +
+    as +
+    hereBtn +
     `</div><div id="den-gh-flow" aria-live="polite"></div>` +
-    (here
-      ? `<p class="den-gh-note" id="den-claim-note">${withHost(t, "err.signin.claimHereNote", { host })}</p>`
-      : "") +
     `</div>`
   );
 }

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

@@ -311,9 +311,10 @@
     "err.signin.claimOrg":
       "Los miembros de la organización {org} de GitHub pueden reclamarlo, en un navegador en {host}.",
     "err.signin.claimHere": "Este es mi ordenador: conectar GitHub",
+    "err.signin.claimHereOn": "En {host}: conectar GitHub",
+    "err.signin.claimOrgOnly":
+      "Los miembros de la organización {org} de GitHub pueden reclamarlo desde un navegador en {host}. Abre esta página en {host}, o define web.owner_github para iniciar sesión desde cualquier sitio.",
     "err.signin.claimAs": "Iniciar sesión como @{login}",
-    "err.signin.claimHereNote":
-      "«Este es mi ordenador» solo funciona en un navegador en {host}. En otro sitio no abre nada.",
     "err.signin.claimChecking": "Comprobando que esto es {host}…",
     "err.signin.githubRefused":
       "@{login} no es el propietario de este {name}. Solo la cuenta del propietario puede usar Iniciar sesión con GitHub. Usa «Aprueba este ordenador» en su lugar.",
@@ -747,6 +748,7 @@
     "ver.usedLatest": "{n} ahora sigue la versión más reciente",
     "set.agents.personas": "Personas",
     "set.agents.rotation": "Rotación",
+    "set.agents.hub": "Hub",
     // The Agents tab (AG-4a-term, agents-page.js).
     "n.agents": "Agentes",
     "kind.agent": "Agente",

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

@@ -299,9 +299,10 @@
     "err.signin.claimOrg":
       "GitHub の {org} 組織のメンバーは、{host} 上のブラウザーでこれを登録できます。",
     "err.signin.claimHere": "これは自分のコンピューター: GitHub を接続",
+    "err.signin.claimHereOn": "{host} 上で: GitHub を接続",
+    "err.signin.claimOrgOnly":
+      "GitHub の {org} 組織のメンバーは、{host} 上のブラウザーからこれを登録できます。このページを {host} で開くか、どこからでもサインインできるよう web.owner_github を設定してください。",
     "err.signin.claimAs": "@{login} としてサインイン",
-    "err.signin.claimHereNote":
-      "「これは自分のコンピューター」は {host} 上のブラウザーでだけ使えます。ほかの場所では何も開きません。",
     "err.signin.claimChecking": "ここが {host} か確認しています…",
     "err.signin.githubRefused":
       "@{login} はこの {name} のオーナーではありません。GitHub でサインインを使えるのはオーナーのアカウントだけです。代わりに「このコンピューターを承認」を使ってください。",
@@ -729,6 +730,7 @@
     "ver.usedLatest": "{n} は最新バージョンに追従します",
     "set.agents.personas": "ペルソナ",
     "set.agents.rotation": "交代",
+    "set.agents.hub": "Hub",
     // The Agents tab (AG-4a-term, agents-page.js).
     "n.agents": "エージェント",
     "kind.agent": "エージェント",

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

@@ -30,6 +30,7 @@
 import { themeNotice, themeOptions } from "./appearance.js";
 import { qrSvg } from "./qr.js";
 import { renderPersonasSettings } from "./persona-ui.js";
+import { comboHtml, wireCombo } from "./combobox.js";
 
 export const DEN_SETTING_CATEGORIES = [
   {
@@ -911,6 +912,20 @@ export const DEN_SETTINGS = [
     read: () => null,
   },
 
+  {
+    id: "agents.hub",
+    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"],
+    scope: "user",
+    control: { type: "custom", render: renderHub },
+    keys: ["hub_allow_tools"],
+    read: () => null,
+    write: (v, ctx) => ctx.post({ hub_allow_tools: v }),
+  },
+
   {
     id: "agents.personas",
     category: "agents",
@@ -1275,6 +1290,9 @@ function renderRuntimes(host, ctx) {
   void load();
 }
 
+/** "an agent", "a persona": the article for a lowercase noun. */
+export const withArticle = (w) => `${/^[aeiou]/.test(w) ? "an" : "a"} ${w}`;
+
 const ROT_SCOPES = [
   ["agent", "Agent", "agent id"],
   ["persona-workspace", "Persona in a workspace", "persona@workspace"],
@@ -1288,6 +1306,67 @@ const ROT_KEYS = [
   ["on_pr_merged", "When its PR merges", "true or false"],
 ];
 const rotVal = (v) => (v === undefined ? "" : String(v));
+/** A value as a person reads it (D30): "never", "Auto", "Relaunch". */
+function rotValText(k, v) {
+  if (k === "on_due")
+    return { auto: "Auto", ask: "Ask", off: "Off" }[v] ?? rotVal(v);
+  if (k === "on_pr_merged")
+    return v === true ? "Relaunch" : v === false ? "Keep going" : rotVal(v);
+  return rotVal(v);
+}
+
+/**
+ * D30: an override's target as a name, from the pickers' choices. One that
+ * no longer exists: its id, and gone.
+ */
+export function rotTargetName(scope, target, c = {}) {
+  const find = (list, id) => (list || []).find((x) => x.id === id);
+  if (scope === "agent") {
+    const a = find(c.agents, target);
+    return a
+      ? { name: a.workspace ? `${a.name} (${a.workspace})` : a.name }
+      : { name: target, gone: true };
+  }
+  if (scope === "persona-workspace") {
+    const [pid, ws] = String(target).split("@");
+    const p = find(c.personas, pid);
+    const w = find(c.workspaces, ws);
+    return p && w
+      ? { name: `${p.name} in ${w.name}` }
+      : { name: target, gone: true };
+  }
+  const list =
+    scope === "persona"
+      ? c.personas
+      : scope === "workspace"
+        ? c.workspaces
+        : c.services;
+  const x = find(list, target);
+  return x ? { name: x.name } : { name: target, gone: true };
+}
+
+/** D30: each picker's rows, from GET /api/agents/rotation?choices=1. */
+export function rotPickItems(kind, c = {}) {
+  if (kind === "agent")
+    return (c.agents || []).map((a) => ({
+      id: a.id,
+      label: a.name,
+      sub: [a.workspace, a.state].filter(Boolean).join(" · "),
+    }));
+  if (kind === "persona")
+    return (c.personas || []).map((p) => ({
+      id: p.id,
+      label: p.name,
+      sub: p.category,
+    }));
+  if (kind === "workspace")
+    return (c.workspaces || []).map((w) => ({ id: w.id, label: w.name }));
+  return (c.services || []).map((x) => ({
+    id: x.id,
+    label: x.name,
+    sub: x.workspace,
+  }));
+}
 
 /** A value typed in the overrides form, as the key takes it. */
 export function rotationValue(key, raw) {
@@ -1314,7 +1393,7 @@ export function rotationHtml(b) {
   const field = (k, control) =>
     `<div class="rot-f" data-rot-key="${k}"><label for="rot-${k}">${escR(ROT_KEYS.find((x) => x[0] === k)[1])}</label>${control}<span class="set-tag" data-rot-src>${escR(inst[k] !== undefined ? "this install" : inherited(k))}</span></div>`;
   const sel = (k, opts) =>
-    `<select id="rot-${k}" data-focus-key="rot-${k}"><option value=""${inst[k] === undefined ? " selected" : ""}>inherit (${escR(inherited(k))})</option>` +
+    `<select id="rot-${k}" data-focus-key="rot-${k}"><option value=""${inst[k] === undefined ? " selected" : ""}>inherit (${escR(rotVal(b.org?.[k] !== undefined ? b.org[k] : b.defaults?.[k]))})</option>` +
     opts
       .map(
         ([v, l]) =>
@@ -1325,11 +1404,16 @@ export function rotationHtml(b) {
   const rows = [];
   for (const [scope, byTarget] of Object.entries(b.overrides || {}))
     for (const [target, vals] of Object.entries(byTarget || {}))
-      for (const [k, v] of Object.entries(vals || {}))
+      for (const [k, v] of Object.entries(vals || {})) {
+        const who = rotTargetName(scope, target, b.choices);
+        const setting = (ROT_KEYS.find((x) => x[0] === k) || [k, k])[1];
         rows.push(
-          `<tr data-rot-row><td>${escR((ROT_SCOPES.find((x) => x[0] === scope) || [scope, scope])[1])}</td><td class="den-mono">${escR(target)}</td><td>${escR(k)}</td><td class="den-mono">${escR(rotVal(v))}</td>` +
-            `<td><button type="button" class="btn sm" data-rot-clear data-scope="${escR(scope)}" data-target="${escR(target)}" data-key="${escR(k)}" aria-label="Clear ${escR(k)} for ${escR(scope)} ${escR(target)}">Clear</button></td></tr>`,
+          `<tr data-rot-row${who.gone ? " data-rot-gone" : ""}><td data-l="Scope">${escR((ROT_SCOPES.find((x) => x[0] === scope) || [scope, scope])[1])}</td>` +
+            `<td data-l="For"${who.gone ? ' class="rot-gone"' : ""}>${who.gone ? `<span class="den-mono">${escR(who.name)}</span> (gone)` : escR(who.name)}</td>` +
+            `<td data-l="Setting">${escR(setting)}</td><td data-l="Value">${escR(rotValText(k, v))}</td>` +
+            `<td class="rot-act"><button type="button" class="btn sm" data-rot-clear data-scope="${escR(scope)}" data-target="${escR(target)}" data-key="${escR(k)}" aria-label="${who.gone ? "Remove" : "Clear"} ${escR(setting)} for ${escR(who.name)}">${who.gone ? "Remove" : "Clear"}</button></td></tr>`,
         );
+      }
   return (
     `<div class="rot" data-rotation-settings>` +
     `<div class="rot-inst">` +
@@ -1359,16 +1443,84 @@ export function rotationHtml(b) {
       : `<tr><td colspan="5" class="set-note">No overrides: every agent uses this install's values.</td></tr>`) +
     `</tbody></table></div>` +
     `<form class="rot-add" data-rot-add>` +
-    `<label for="rot-a-scope">Scope</label> <select id="rot-a-scope">${ROT_SCOPES.map(([v, l]) => `<option value="${v}">${escR(l)}</option>`).join("")}</select> ` +
-    `<label for="rot-a-target">For</label> <input type="text" id="rot-a-target" class="den-mono" spellcheck="false" autocomplete="off" placeholder="agent id" required> ` +
-    `<label for="rot-a-key">Setting</label> <select id="rot-a-key">${ROT_KEYS.map(([v, l]) => `<option value="${v}">${escR(l)}</option>`).join("")}</select> ` +
-    `<label for="rot-a-value">Value</label> <input type="text" id="rot-a-value" class="den-mono" spellcheck="false" autocomplete="off" placeholder="a number, or never" required> ` +
+    `<span class="rot-pick"><label for="rot-a-scope">Scope</label> <select id="rot-a-scope">${ROT_SCOPES.map(([v, l]) => `<option value="${v}">${escR(l)}</option>`).join("")}</select></span>` +
+    // The target: picked by name, never typed as an id (D30).
+    `<span class="rot-pick" data-for="agent">${comboHtml({ id: "rot-a-agent", label: "Agent", placeholder: "Type to find an agent" })}</span>` +
+    `<span class="rot-pick" data-for="persona persona-workspace" hidden>${comboHtml({ id: "rot-a-persona", label: "Persona", placeholder: "Type to find a persona" })}</span>` +
+    `<span class="rot-pick" data-for="workspace persona-workspace" hidden>${comboHtml({ id: "rot-a-ws", label: "Workspace", placeholder: "Type to find a workspace" })}</span>` +
+    `<span class="rot-pick" data-for="service" hidden>${comboHtml({ id: "rot-a-service", label: "Service", placeholder: "Type to find a service" })}</span>` +
+    `<span class="rot-pick"><label for="rot-a-key">Setting</label> <select id="rot-a-key">${ROT_KEYS.map(([v, l]) => `<option value="${v}">${escR(l)}</option>`).join("")}</select></span>` +
+    `<span class="rot-pick" data-val="after_compactions"><label for="rot-a-n">Value</label> <input type="number" id="rot-a-n" min="1" max="100" step="1" value="3"> <label class="rot-never"><input type="checkbox" id="rot-a-never"> never</label></span>` +
+    `<span class="rot-pick" data-val="on_due" hidden><label for="rot-a-due">Value</label> <select id="rot-a-due"><option value="auto">Auto</option><option value="ask">Ask</option><option value="off">Off</option></select></span>` +
+    `<span class="rot-pick" data-val="on_pr_merged" hidden><label for="rot-a-pr">Value</label> <select id="rot-a-pr"><option value="true">Relaunch</option><option value="false">Keep going</option></select></span>` +
     `<button type="submit" class="btn sm primary">Add override</button></form>` +
     `<div class="rt-err" role="alert" hidden></div>` +
     `</div>`
   );
 }
 
+/** HUB-1.5: Settings › Agents › Den Hub (b: GET /api/hub). */
+export function hubHtml(b) {
+  if (!b || !b.configured) return "";
+  const rows = [
+    ["URL", `<span class="den-mono">${escR(b.url || "not set")}</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>`,
+    ],
+    ...(b.team ? [["Team", escR(b.team)]] : []),
+    ...(b.label ? [["This install", escR(b.label)]] : []),
+  ];
+  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>${
+      b.allowTools !== false
+        ? "Agents can publish and comment in Hub without asking; writes are versioned and stay in this install's team."
+        : "Agents ask before each Hub tool runs."
+    }</p>`;
+  return (
+    `<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>`
+      : "")
+  );
+}
+
+/** HUB-1.5: the Den Hub row; with no hub.url, the row isn't shown at all. */
+function renderHub(host, ctx) {
+  const row = host.closest(".set-row");
+  if (row) row.hidden = true;
+  // Under an invalid config /api/hub answers 422: ask nothing, show nothing.
+  if (ctx.shell?.configInvalid?.() === true) 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;
+            });
+        });
+    })
+    .catch(() => {
+      host.innerHTML = "";
+    });
+}
+
 /** The Rotation row: this install's values, the overrides, + Add override. */
 function renderRotation(host, ctx) {
   const err = () => host.querySelector(".rt-err");
@@ -1385,14 +1537,54 @@ function renderRotation(host, ctx) {
       return Promise.resolve();
     }
     return ctx.shell
-      .api("GET", "/api/agents/rotation")
+      .api("GET", "/api/agents/rotation?choices=1")
       .then((b) => {
         host.innerHTML = rotationHtml(b || {});
+        wireAdd(b?.choices || {});
       })
       .catch((x) => {
         host.innerHTML = `<div class="set-note">${escR(x?.message || "The rotation settings did not load.")}</div>`;
       });
   };
+  // D30: the add form's pickers, filled from live data.
+  let picks = {};
+  const wireAdd = (c) => {
+    picks = {};
+    for (const [kind, id] of [
+      ["agent", "rot-a-agent"],
+      ["persona", "rot-a-persona"],
+      ["workspace", "rot-a-ws"],
+      ["service", "rot-a-service"],
+    ])
+      picks[kind] = wireCombo(host, id, { items: () => rotPickItems(kind, c) });
+    showFor();
+  };
+  const showFor = () => {
+    const scope = host.querySelector("#rot-a-scope")?.value;
+    const key = host.querySelector("#rot-a-key")?.value;
+    for (const el of host.querySelectorAll(".rot-add [data-for]"))
+      el.hidden = !el.dataset.for.split(" ").includes(scope);
+    for (const el of host.querySelectorAll(".rot-add [data-val]"))
+      el.hidden = el.dataset.val !== key;
+    const n = host.querySelector("#rot-a-n");
+    const never = host.querySelector("#rot-a-never");
+    if (n && never) n.disabled = never.checked;
+  };
+  const targetOf = (scope) => {
+    const v = (k) => picks[k]?.value() || "";
+    if (scope === "persona-workspace")
+      return v("persona") && v("workspace")
+        ? `${v("persona")}@${v("workspace")}`
+        : "";
+    return v(scope);
+  };
+  const valueOf = (key) => {
+    if (key === "on_due") return host.querySelector("#rot-a-due").value;
+    if (key === "on_pr_merged")
+      return host.querySelector("#rot-a-pr").value === "true";
+    if (host.querySelector("#rot-a-never").checked) return "never";
+    return Number(host.querySelector("#rot-a-n").value);
+  };
   const put = async (body) => {
     try {
       await ctx.shell.api("PUT", "/api/agents/rotation", body);
@@ -1403,16 +1595,11 @@ function renderRotation(host, ctx) {
   };
   host.addEventListener("change", (e) => {
     const k = e.target.closest("[data-rot-key]")?.dataset.rotKey;
-    if (e.target.id === "rot-a-scope") {
-      const s = ROT_SCOPES.find((x) => x[0] === e.target.value);
-      const t = host.querySelector("#rot-a-target");
-      if (s && t) t.placeholder = s[2];
-      return;
-    }
-    if (e.target.id === "rot-a-key") {
-      const s = ROT_KEYS.find((x) => x[0] === e.target.value);
-      const v = host.querySelector("#rot-a-value");
-      if (s && v) v.placeholder = s[2];
+    if (
+      ["rot-a-scope", "rot-a-key", "rot-a-never"].includes(e.target.id) ||
+      e.target.closest?.(".rot-add")
+    ) {
+      showFor();
       return;
     }
     if (!k || k === "after_compactions" || e.target.tagName !== "SELECT")
@@ -1447,12 +1634,18 @@ function renderRotation(host, ctx) {
     if (!f) return;
     e.preventDefault();
     const key = f.querySelector("#rot-a-key").value;
-    void put({
-      scope: f.querySelector("#rot-a-scope").value,
-      target: f.querySelector("#rot-a-target").value.trim(),
-      key,
-      value: rotationValue(key, f.querySelector("#rot-a-value").value),
-    });
+    const scope = f.querySelector("#rot-a-scope").value;
+    const target = targetOf(scope);
+    if (!target) {
+      fail({
+        message:
+          scope === "persona-workspace"
+            ? "Pick a persona and a workspace."
+            : `Pick ${withArticle((ROT_SCOPES.find((x) => x[0] === scope) || [scope, scope])[1].toLowerCase())}.`,
+      });
+      return;
+    }
+    void put({ scope, target, key, value: valueOf(key) });
   });
   void load();
 }