@monster-orange/den 0.4.14 → 0.4.16

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

@@ -565,6 +565,7 @@ async function refresh() {
   } catch {
     /* the last list stays; the next ask may answer */
   }
+  followAgents();
   st.scopeLabel = scopeLabelFor(viewWorkspaces());
   paintList();
   paintSub();
@@ -572,14 +573,78 @@ async function refresh() {
   const strip = st.root.querySelector("#agr > .agtabs");
   if (strip) paintTabs(strip);
   if (!st.root.isConnected) return;
-  st.timer = setTimeout(() => {
-    if (!document.hidden) void refresh();
-    else st.timer = setTimeout(refresh, REFRESH_MS);
-  }, REFRESH_MS);
+  // A pane whose session just ended may have a new one soon (a persona
+  // change, a resume): look again every second for a while.
+  const soon = Date.now() < (st.followUntil ?? 0);
+  st.timer = setTimeout(
+    () => {
+      if (!document.hidden) void refresh();
+      else st.timer = setTimeout(refresh, REFRESH_MS);
+    },
+    soon ? FOLLOW_MS : REFRESH_MS,
+  );
 }
 
 const rowOf = (id) => st.data?.sessions?.find((s) => s.id === id) ?? null;
 
+/** How often, and how long, the list is read after a pane's session ends. */
+const FOLLOW_MS = 1_000;
+const FOLLOW_FOR_MS = 15_000;
+
+/**
+ * A pane follows its agent, not a session (AG-18): when the agent's
+ * session changes (Change persona, Resume, a rotation), the pane moves to
+ * the new one in the same slot, its scrollback kept.
+ */
+function followAgents() {
+  for (const p of [...st.panes.values()]) {
+    const r = rowOf(p.id);
+    if (r?.kind === "agent" && r.agent) {
+      p.agent = r.agent;
+      p.agentWs = r.workspace;
+    }
+    if (!p.agent || p.closed || r?.state === "running") continue;
+    const next = st.data?.sessions?.find(
+      (x) =>
+        x.kind === "agent" &&
+        x.agent === p.agent &&
+        x.workspace === p.agentWs &&
+        x.id !== p.id &&
+        x.state === "running",
+    );
+    if (next && !st.panes.has(next.id)) retarget(p, next);
+  }
+}
+
+/** Move pane `p` to session row `row`, where it was. */
+function retarget(p, row) {
+  const old = p.id;
+  const sock = p.sock;
+  p.sock = null;
+  try {
+    sock?.close(1000, "switched");
+  } catch {
+    /* already closed */
+  }
+  st.panes.delete(old);
+  p.id = row.id;
+  st.panes.set(row.id, p);
+  st.open = st.open.map((x) => (x === old ? row.id : x));
+  if (st.side.delete(old)) st.side.add(row.id);
+  if (st.cur === old) st.cur = row.id;
+  p.el.dataset.id = row.id;
+  p.el.setAttribute("aria-label", row.label ?? row.id);
+  p.exited = false;
+  p.lost = false;
+  p.term?.write(
+    `\r\n\x1b[2m${t("ag.switched", { p: row.persona ?? row.agent })}\x1b[0m\r\n`,
+  );
+  paintBar(p);
+  paintLayout();
+  writeUrl();
+  void connect(p);
+}
+
 // ── the panes ───────────────────────────────────────────────────────────
 
 async function loadXterm() {
@@ -871,13 +936,18 @@ function paintBar(p) {
   const reconnect = p.lost
     ? `<button type="button" class="den-btn sm" data-act="reconnect">${esc(t("ag.reconnect"))}</button>`
     : "";
+  // AG-18: ⋯, its menu: Change persona… (a runtime that can resume).
+  const more =
+    r?.kind === "agent" && r.personaChange
+      ? `<button type="button" class="den-btn sm" data-act="more" aria-haspopup="menu" aria-expanded="false" aria-label="${esc(t("ag.more", { id: r.agent }))}" title="${esc(t("ag.more", { id: r.agent }))}">⋯</button>`
+      : "";
   bar.innerHTML =
     `<span class="den-dot ${tone}" aria-hidden="true"></span>` +
     `<b>${esc(name)}</b><span class="where mono">${esc(where)}</span>` +
     (r?.tokenRevoked
       ? `<span class="tagx warn" title="${esc(t("ag.revokedTip"))}">${esc(t("ag.revoked"))}</span>`
       : "") +
-    `<span class="x">${reconnect}${stop}${resume}<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">${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";
@@ -1043,6 +1113,8 @@ async function connect(p) {
         paintBar(p);
       } else if (msg?.type === "exit") {
         p.exited = true;
+        // Its agent may continue in a new session (followAgents).
+        st.followUntil = Date.now() + FOLLOW_FOR_MS;
         const code =
           typeof msg.exitCode === "number" ? ` (${msg.exitCode})` : "";
         p.term?.write(`\r\n${t("ag.exitedLine", { code })}\r\n`);
@@ -1255,7 +1327,7 @@ async function openPane(id, { front = true } = {}) {
     ) {
       if (e.isComposing) return true;
       e.preventDefault();
-      if (softNewlineKey(e)) typeIn(softNewlineOf(id));
+      if (softNewlineKey(e)) typeIn(softNewlineOf(p.id));
       return false;
     }
     return true;
@@ -1349,9 +1421,13 @@ async function restartRow(r, verb, button) {
         { id: r.agent },
       ),
     );
-    if (st.panes.has(r.id)) closePane(r.id, { quiet: true });
+    // Its open pane follows it to the new session (followAgents, in
+    // refresh); one that couldn't (not running yet) is closed for it.
     await refresh();
-    if (out?.agent?.sessionId) await openPane(out.agent.sessionId);
+    const next = out?.agent?.sessionId;
+    if (next && next !== r.id && st.panes.has(r.id))
+      closePane(r.id, { quiet: true });
+    if (next) await openPane(next);
   } catch (err) {
     window.denShell?.errorToast?.(err);
     await refresh();
@@ -1538,6 +1614,9 @@ const sd = {
   // AG-17.1, Bring in: null for Start; else the workspace's conversations,
   // the runtimes that can't bring one in, and the one picked.
   bring: null,
+  // AG-18, Change persona: null; else the agent's row (id, workspace,
+  // persona, model) whose persona changes.
+  change: null,
 };
 
 /** The conversation picked in Bring in, when it can be brought in. */
@@ -1625,7 +1704,38 @@ function pickConversation(id) {
   sd.bring.pick = id;
   for (const b of st.root.querySelectorAll("#ag-conv [data-cid]"))
     b.setAttribute("aria-checked", String(b.dataset.cid === id));
-  paintRuntime(false);
+  // AG-17.1c: its suggested persona, preselected (never submitted).
+  if (c.suggest && (sd.data?.personas ?? []).some((p) => p.id === c.suggest))
+    pickPersona(c.suggest);
+  else paintRuntime(false);
+}
+
+/**
+ * AG-17.1c, AG-18: what the persona changes, in one short list under it:
+ * the model kept (or the one picked), what it works as from now on, and
+ * for Bring in the MCP servers it won't have.
+ */
+function paintKeep() {
+  const el = $d("#ag-keep");
+  if (!el) return;
+  const p = curPersona();
+  const from = sd.bring ? bringPick() : sd.change;
+  el.hidden = !p || !from;
+  if (el.hidden) return void (el.innerHTML = "");
+  const items = [];
+  if (sd.model) items.push(t("ag.keep.modelNew", { m: sd.model }));
+  else if (from.model) items.push(t("ag.keep.model", { m: from.model }));
+  items.push(
+    t("ag.keep.from", {
+      p: personaName(p),
+      mode: t(`pm.${p.permission || "ask"}`),
+    }),
+  );
+  if (sd.bring && from.lost?.length)
+    items.push(t("ag.keep.lost", { s: from.lost.join(", ") }));
+  el.innerHTML = items
+    .map((x, i) => `<li data-keep="${i}">${esc(x)}</li>`)
+    .join("");
 }
 
 const $d = (sel) => st.root.querySelector(sel);
@@ -1636,6 +1746,10 @@ const curPersona = () =>
 
 /** The runtime the dialog will start: the one picked, else the persona's. */
 function chosenRuntime() {
+  // Change persona and Bring in: the agent's, or the conversation's.
+  if (sd.change?.runtime) return sd.change.runtime;
+  const conv = sd.bring ? bringPick() : null;
+  if (conv?.runtime) return conv.runtime;
   const p = curPersona();
   return $d("#ag-runtime").value || personaRuntime(sd.data, p);
 }
@@ -1657,8 +1771,9 @@ function plistHtml() {
   const rows = personaListHtml(sd.f, ps, cats, (p) =>
     personaRowHtml(p, p.id === sd.pid, sd.data),
   );
-  // Bring in continues a conversation: it needs a persona.
-  if (sd.bring) return rows;
+  // Bring in continues a conversation, and a change keeps one: each needs
+  // a persona.
+  if (sd.bring || sd.change) return rows;
   return (
     rows +
     `<div class="pgh"><span>${esc(t("ag.session"))}</span><span></span></div>` +
@@ -1670,6 +1785,18 @@ function paintPlist(keepScroll = true) {
   const l = $d("#ag-persona");
   const top = l.scrollTop;
   l.innerHTML = plistHtml();
+  // AG-18: the agent's persona now, marked.
+  const cur =
+    sd.change &&
+    [...l.querySelectorAll("[data-pid]")].find(
+      (b) => b.dataset.pid === sd.change.persona,
+    );
+  cur
+    ?.querySelector(".pn")
+    ?.insertAdjacentHTML(
+      "beforeend",
+      ` <span class="tagx" data-current>${esc(t("ag.pc.current"))}</span>`,
+    );
   l.scrollTop = keepScroll ? top : 0;
 }
 
@@ -1702,17 +1829,35 @@ function paintDetails() {
  * and the dialog says so.
  */
 function paintRuntime(reset) {
+  paintRuntimeFields(reset);
+  paintKeep();
+  // Last: a Name that names a running agent disables Start (AG-10.10b).
+  paintStartsAs();
+}
+
+function paintRuntimeFields(reset) {
   const rs = $d("#ag-runtime");
   const go = $d("#ag-go");
   const ready = $d("#ag-r-ready");
   const plain = sd.pid === PLAIN;
   // Bring in: the conversation's runtime, its own history; no first
   // instruction, no Advanced (it keeps what the persona gives).
-  $d("#ag-r-l").hidden = plain || !!sd.bring;
-  $d("#ag-task-l").hidden = plain || !!sd.bring;
-  $d("#ag-adv").hidden = plain || !!sd.bring;
-  $d("#ag-name-l").hidden = plain || !!sd.bring;
-  paintStartsAs();
+  // Change persona: the agent's runtime and name stay. Advanced (the
+  // model) shows for both (AG-17.1c, AG-18).
+  const keeps = !!sd.bring || !!sd.change;
+  $d("#ag-r-l").hidden = plain || keeps;
+  $d("#ag-task-l").hidden = plain || keeps;
+  $d("#ag-adv").hidden = plain;
+  $d("#ag-name-l").hidden = plain || keeps;
+  if (sd.change) {
+    $d("#ag-r-miss").hidden = true;
+    ready.hidden = true;
+    const p = curPersona();
+    const ok = !!p && (p.id !== sd.change.persona || !!sd.model);
+    go.disabled = !ok;
+    go.dataset.blocked = ok ? "" : "persona";
+    return;
+  }
   if (sd.bring) {
     $d("#ag-r-miss").hidden = true;
     ready.hidden = true;
@@ -1779,6 +1924,18 @@ function paintAdvanced() {
   const name = runtimeName(sd.data?.runtimes ?? [], rt);
   const def = personaModel();
   const models = rtv?.models ?? [];
+  // AG-17.1c, AG-18: the conversation's model stays unless one is picked.
+  const from = sd.bring ? bringPick() : sd.change;
+  if (sd.bring || sd.change) {
+    const keep = from?.model
+      ? t("ag.keep.opt", { m: from.model })
+      : t("ag.keep.optNone");
+    body.innerHTML =
+      `<p>${esc(t("ag.keep.advNote"))}</p>` +
+      `<div class="two"><label class="fld"><span>${esc(t("ag.new.model"))}</span><select id="ag-model"${models.length ? "" : " disabled"}>${models.length ? modelOptionsHtml(sd.data, rt, sd.model, keep) : `<option value="">${esc(keep)}</option>`}</select></label>` +
+      `<label class="fld"><span>${esc(t("ag.new.ver"))}</span><select id="ag-ver"${models.length && sd.model ? "" : " disabled"}>${versionOptionsHtml(sd.data, rt, sd.model, sd.ver, t("ag.new.verDef", { v: versionLabel("latest") }))}</select></label></div>`;
+    return;
+  }
   const model = sd.model || def.model;
   const first = t("ag.new.modelDef", {
     // No model of its own: just the version, so the label fits the select.
@@ -1859,8 +2016,14 @@ async function fillForWorkspace(ws) {
     return false;
   }
   if (!(await fillConversations(ws))) return false;
-  if (sd.bring && sd.pid === PLAIN) sd.pid = "";
+  if ((sd.bring || sd.change) && sd.pid === PLAIN) sd.pid = "";
   const ps = sd.data?.personas ?? [];
+  // AG-17.1c: the picked conversation's suggested persona, preselected.
+  const sug = sd.bring ? bringPick()?.suggest : null;
+  if (sug && ps.some((p) => p.id === sug)) sd.pid = sug;
+  // AG-18: its persona now (marked; Change stays off until another).
+  if (sd.change && ps.some((p) => p.id === sd.change.persona))
+    sd.pid = sd.change.persona;
   if (sd.pid !== PLAIN && !ps.some((p) => p.id === sd.pid)) {
     // The first persona the list shows (grouped by category).
     const cats = (sd.data?.categories ?? []).map((c) => c.id);
@@ -1877,19 +2040,41 @@ async function fillForWorkspace(ws) {
 }
 
 /** The dialog's words for Start, or for Bring in (AG-17.1). */
-function dialogMode(bring) {
+function dialogMode(bring, change = null) {
   sd.bring = bring ? { list: [], runtimes: [], root: "", pick: "" } : null;
-  $d("#ag-dlg-h").textContent = t(bring ? "ag.bring.title" : "ag.new.title");
-  $d("#ag-note").textContent = t(bring ? "ag.bring.note" : "ag.new.note");
-  $d("#ag-go").textContent = t(bring ? "ag.bring.go" : "ag.go");
+  sd.change = change;
+  $d("#ag-dlg-h").textContent = change
+    ? t("ag.pc.title", { id: change.name })
+    : t(bring ? "ag.bring.title" : "ag.new.title");
+  $d("#ag-note").textContent = t(
+    change ? "ag.pc.note" : bring ? "ag.bring.note" : "ag.new.note",
+  );
+  $d("#ag-go").textContent = goLabel();
   $d("#ag-conv-f").hidden = !bring;
 }
 
-async function openStart(bring = false) {
+/** The submit button's words for the dialog's mode. */
+function goLabel() {
+  return t(sd.change ? "ag.pc.go" : sd.bring ? "ag.bring.go" : "ag.go");
+}
+
+/** AG-18: Change persona… for agent row `r` (its persona, model, name). */
+function openPersonaChange(r) {
+  return openStart(false, {
+    id: r.agent,
+    workspace: r.workspace,
+    persona: r.persona,
+    runtime: r.runtime,
+    model: r.model || "",
+    name: paneName(r),
+  });
+}
+
+async function openStart(bring = false, change = null) {
   const dlg = $d("#ag-dlg");
   if (!dlg || dlg.open) return;
-  dialogMode(bring);
-  const shown = viewWorkspaces();
+  dialogMode(bring, change);
+  const shown = change ? [change.workspace] : viewWorkspaces();
   const wsSel = $d("#ag-ws");
   wsSel.innerHTML = shown
     .map((w) => `<option value="${esc(w)}">${esc(w)}</option>`)
@@ -1958,14 +2143,94 @@ function showStartError(err) {
   el.hidden = false;
 }
 
-/** AG-10.10: the id this start takes, so two of one persona are told apart. */
+/**
+ * AG-10.10b: the id a Name gives, as the server's nameSlug: lowercase,
+ * spaces to "-", only id characters, at most 64; null when none is left.
+ */
+export function nameSlug(name) {
+  const s = String(name)
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9._-]/g, "")
+    .replace(/-{2,}/g, "-")
+    .replace(/^[^a-z0-9]+/, "")
+    .slice(0, 64)
+    .replace(/[-._]+$/, "");
+  return s && /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/.test(s) ? s : null;
+}
+
+/**
+ * The id this start takes (AG-10.10, 10.10b), said as you type: a Name is
+ * the id as its slug. A running agent here with that id or title: "is
+ * already running · Open it", Start off. A stopped one: "Resume it", or
+ * Start takes the next suffix.
+ */
 function paintStartsAs() {
   const el = $d("#ag-as");
   if (!el) return;
-  const p = sd.pid && sd.pid !== PLAIN && !sd.bring ? curPersona() : null;
+  const p =
+    sd.pid && sd.pid !== PLAIN && !sd.bring && !sd.change ? curPersona() : null;
   el.hidden = !p;
-  if (p)
-    el.textContent = t("ag.new.as", { id: sd.data?.startsAs?.[p.id] ?? p.id });
+  el.textContent = "";
+  if (!p) return;
+  const name = ($d("#ag-name")?.value ?? "").trim();
+  const slug = name ? nameSlug(name) : null;
+  const ws = $d("#ag-ws")?.value || viewWorkspaces()[0];
+  const here = (st.data?.sessions ?? []).filter(
+    (r) => r.kind === "agent" && r.workspace === ws,
+  );
+  const live = (r) => r.state === "running" || r.state === "stopping";
+  const match = name
+    ? (here.find(
+        (r) =>
+          live(r) &&
+          (r.agent === slug ||
+            (r.displayName ?? "").toLowerCase() === name.toLowerCase()),
+      ) ?? here.find((r) => r.agent === slug))
+    : null;
+  const act = (label, fn) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "den-btn sm";
+    b.textContent = label;
+    b.addEventListener("click", fn);
+    return b;
+  };
+  if (match && live(match)) {
+    el.append(
+      t("ag.new.isRunning", { id: match.agent }) + " · ",
+      act(t("ag.new.openIt"), () => {
+        $d("#ag-dlg").close?.();
+        void openPane(match.id);
+      }),
+    );
+    $d("#ag-go").disabled = true;
+    return;
+  }
+  if (match) {
+    el.append(
+      t("ag.new.isStopped", { id: match.agent }) + " · ",
+      act(t("ag.new.resumeIt"), () => {
+        $d("#ag-dlg").close?.();
+        void restartRow(match, "resume", null);
+      }),
+      " " + t("ag.new.orNext", { id: nextFree(slug) }),
+    );
+    return;
+  }
+  el.textContent = t("ag.new.as", {
+    id: slug ?? sd.data?.startsAs?.[p.id] ?? p.id,
+  });
+}
+
+/** The first `<slug>-<n>` no agent on this page has (the server decides). */
+function nextFree(slug) {
+  const ids = new Set((st.data?.sessions ?? []).map((r) => r.agent));
+  for (let n = 2; n < 1000; n++)
+    if (!ids.has(`${slug.slice(0, 58)}-${n}`))
+      return `${slug.slice(0, 58)}-${n}`;
+  return slug;
 }
 
 async function submitStart(form) {
@@ -1975,6 +2240,7 @@ async function submitStart(form) {
   const ws = form.querySelector("#ag-ws").value || viewWorkspaces()[0];
   if (!ws || !sd.pid) return;
   if (sd.bring) return submitBringIn(ws);
+  if (sd.change) return submitPersonaChange();
   const bad = sd.extras.find((c) => commandProblem(c));
   if (sd.pid !== PLAIN && bad)
     return showStartError(new Error(t("pe.badCmd", { c: bad })));
@@ -2011,11 +2277,73 @@ async function submitStart(form) {
     showStartError(err);
   } finally {
     go.disabled = false;
-    go.textContent = t("ag.go");
+    go.textContent = goLabel();
+    if (dlg.open) paintRuntime(false);
+  }
+}
+
+/**
+ * AG-18: change the agent's persona (the same conversation resumes as the
+ * new one). Mid-turn the server asks: After this turn, or Stop it now.
+ */
+async function submitPersonaChange(when) {
+  const dlg = $d("#ag-dlg");
+  const go = $d("#ag-go");
+  const ch = sd.change;
+  const p = curPersona();
+  if (!ch || !p) return;
+  const body = { persona: p.id };
+  if (sd.model) body.model = sd.model;
+  if (sd.model && sd.ver) body.version = sd.ver;
+  if (when) body.when = when;
+  go.disabled = true;
+  go.textContent = t("ag.pc.going");
+  $d("#ag-err").hidden = true;
+  try {
+    const r = await api(
+      "POST",
+      `/api/workspaces/${encodeURIComponent(ch.workspace)}/agents/${encodeURIComponent(ch.id)}/persona`,
+      body,
+    );
+    window.denShell?.toast?.(
+      t(r?.pending ? "ag.pc.pending" : "ag.pc.done", {
+        id: ch.name,
+        p: personaName(p),
+      }),
+    );
+    for (const w of r?.warnings ?? []) window.denShell?.toast?.(w);
+    dlg.close?.();
+    await refresh();
+  } catch (err) {
+    if (err?.code === "busy") showBusy();
+    else showStartError(err);
+  } finally {
+    go.textContent = goLabel();
     if (dlg.open) paintRuntime(false);
   }
 }
 
+/** It's mid-turn: never cut silently; the person picks (AG-18). */
+function showBusy() {
+  const el = $d("#ag-err");
+  el.textContent = t("ag.pc.busy") + " ";
+  const b = (id, label, when) => {
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "den-btn sm";
+    x.id = id;
+    x.textContent = label;
+    x.addEventListener("click", () => void submitPersonaChange(when));
+    return x;
+  };
+  el.append(
+    b("ag-pc-after", t("ag.pc.after"), "after-turn"),
+    " ",
+    b("ag-pc-now", t("ag.pc.now"), "now"),
+  );
+  el.hidden = false;
+}
+
 /** Bring in (AG-17.1): the runtime's resume of the conversation picked. */
 async function submitBringIn(ws) {
   const dlg = $d("#ag-dlg");
@@ -2029,7 +2357,13 @@ async function submitBringIn(ws) {
     const r = await api(
       "POST",
       `/api/workspaces/${encodeURIComponent(ws)}/conversations/${encodeURIComponent(c.id)}/import`,
-      { persona: p.id, runtime: c.runtime },
+      {
+        persona: p.id,
+        runtime: c.runtime,
+        // AG-17.1c: the conversation's own model unless one is picked.
+        ...(sd.model ? { model: sd.model } : {}),
+        ...(sd.model && sd.ver ? { version: sd.ver } : {}),
+      },
     );
     window.denShell?.toast?.(t("ag.bring.done", { id: r?.agent?.id ?? p.id }));
     for (const w of r?.warnings ?? []) window.denShell?.toast?.(w);
@@ -2131,6 +2465,9 @@ function wireStartDialog(root) {
     if (e.target.id === "ag-q") {
       sd.f.q = e.target.value;
       paintPlist(false);
+    } else if (e.target.id === "ag-name") {
+      // AG-10.10b: what the Name gives, as you type.
+      paintRuntime(false);
     } else if (e.target.id === "ag-tools") {
       sd.extras = splitCommands(e.target.value);
       syncPermBlock(form, "ag", sd.data, {
@@ -2161,6 +2498,7 @@ function wireStartDialog(root) {
       sd.model = e.target.value;
       sd.ver = "";
       paintAdvanced();
+      paintRuntime(false);
     } else if (id === "ag-ver") sd.ver = e.target.value;
   });
   // ↑ ↓ move through the persona list (a radio group).
@@ -2315,6 +2653,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") {
+      const r = rowOf(id);
+      if (!r) return;
+      window.denShell?.openMenu?.(b, {
+        label: t("ag.more", { id: r.agent }),
+        items: [
+          { label: t("ag.pc.item"), onSelect: () => void openPersonaChange(r) },
+        ],
+      });
+    }
   });
   root.querySelector("#ag-start").addEventListener("click", () => {
     void openStart();

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

@@ -701,6 +701,7 @@
               aria-label="Persona"
             ></div>
             <div id="ag-detrow"></div>
+            <ul class="den-keep" id="ag-keep" role="status" hidden></ul>
           </div>
           <div class="two">
             <label class="fld" id="ag-r-l"