@monster-orange/den 0.4.12 → 0.4.14

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

@@ -27,8 +27,17 @@
  * Nothing here keeps a session's state: the list is GET /api/sessions,
  * asked again every few seconds while the page is shown.
  *
- * Start agent (AG-0.2): the runtime line says what will run, or why it
- * can't, before Start (agent-start.js readiness). Starting, stopping and
+ * Start agent (AG-10.1): a searchable persona list (category and source
+ * chips, grouped by category, Plain session pinned last), What's a
+ * persona?, Details, + New persona, Duplicate or Edit (persona-ui.js),
+ * Runtime and Workspace, a first instruction (typed into the session once
+ * it is ready, by the server: never an argument), and Advanced: model and
+ * version (AG-12), permission mode and extra allowed commands with the
+ * preview of what the runtime is given (AG-13). What differs from the
+ * persona tags the session's row (AG-10.9). The runtime line says what
+ * will run, or why it can't, before Start (agent-start.js readiness); a
+ * persona whose runtime isn't installed starts on the first one that is,
+ * and the dialog says so (AG-12.2). Starting, stopping and
  * resuming an agent never ask for the admin password: it is for sudo, and
  * no agent action runs sudo (LK-0).
  *
@@ -74,7 +83,27 @@
  * and Start fresh. A running one says "Handoff due" or "Ready to relaunch"
  * as a tag.
  */
-import { fillStartForm } from "/agent-start.js";
+import { readiness, runtimeName, runtimeOptions } from "/agent-start.js";
+import {
+  commandProblem,
+  filterBarHtml,
+  modelOptionsHtml,
+  normalizeData,
+  openPersonaEditor,
+  overrideTagsHtml,
+  permBlockHtml,
+  personaDetail,
+  personaDetailHtml,
+  personaListHtml,
+  personaName,
+  personaRowHtml,
+  personaRuntime,
+  runtimeInstalled,
+  splitCommands,
+  syncPermBlock,
+  versionLabel,
+  versionOptionsHtml,
+} from "/persona-ui.js";
 import {
   editorUrl,
   findPaths,
@@ -240,7 +269,7 @@ function nameHtml(r) {
  * persona, not the name already shown. Else "".
  */
 function sessionExtra(r) {
-  const n = r?.kind === "agent" ? (r.sessionName ?? "").trim() : "";
+  const n = r?.kind === "agent" ? (r.sessionTitle ?? "").trim() : "";
   if (!n || n === r.persona || n === paneName(r) || n === displayName(r))
     return "";
   return n;
@@ -377,9 +406,10 @@ function rowHtml(r) {
   const revokedTag = r.tokenRevoked
     ? `<span class="tagx warn" title="${esc(t("ag.revokedTip"))}">${esc(t("ag.revoked"))}</span>`
     : "";
+  const ovTags = r.kind === "agent" ? overrideTagsHtml(r) : "";
   const tags =
-    rotTag || revokedTag
-      ? `<span class="agtags">${revokedTag}${rotTag}</span>`
+    rotTag || revokedTag || ovTags
+      ? `<span class="agtags">${revokedTag}${rotTag}${ovTags}</span>`
       : "";
   return (
     `<button type="button" class="agr" data-id="${esc(r.id)}" data-kind="${esc(r.kind)}" data-state="${esc(r.state)}"` +
@@ -883,11 +913,26 @@ function refit(p) {
   markSize(p);
 }
 
-/** The pane's size and the PTY's, on the pane (data-cols, data-pty-cols). */
+/**
+ * The pane's size and the PTY's, on the pane (data-cols, data-pty-cols),
+ * and the cell size xterm drew with (data-cell-w, data-cell-h: its
+ * renderer's CSS cell, sub-pixel), so a check can tell a missed row from
+ * a fit's remainder.
+ */
 function markSize(p) {
   if (!p.term) return;
   p.el.dataset.cols = String(p.term.cols);
   p.el.dataset.rows = String(p.term.rows);
+  let cell = null;
+  try {
+    cell = p.term._core?._renderService?.dimensions?.css?.cell ?? null;
+  } catch {
+    cell = null;
+  }
+  if (cell?.width > 0 && cell?.height > 0) {
+    p.el.dataset.cellW = String(cell.width);
+    p.el.dataset.cellH = String(cell.height);
+  }
   if (p.pty) {
     p.el.dataset.ptyCols = String(p.pty.cols);
     p.el.dataset.ptyRows = String(p.pty.rows);
@@ -1448,7 +1493,7 @@ function review() {
   )?.focus();
 }
 
-// ── Start agent ─────────────────────────────────────────────────────────
+// ── Start agent (AG-10.1) ───────────────────────────────────────────────
 
 // Personas and runtimes, per workspace (AG-0.5: a workspace's own runtime
 // paths win), asked once per page each.
@@ -1470,81 +1515,667 @@ function personasFor(ws) {
   return personasAsked.get(key);
 }
 
-/** Fill the form for the workspace picked; false when the ask failed. */
-async function fillForWorkspace(ws) {
-  let data;
+/**
+ * "Plain session": no persona, a shell in the workspace (AG-10.1). A ":"
+ * is never in a persona's id.
+ */
+const PLAIN = ":plain";
+
+/** The dialog's state while it is open. */
+const sd = {
+  data: null,
+  f: { q: "", cat: "", src: "" },
+  pid: "",
+  det: false,
+  what: false,
+  detail: null,
+  // Advanced: "" = the persona's.
+  model: "",
+  ver: "",
+  intent: "ask",
+  extras: [],
+  extrasOpen: false,
+  // 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,
+};
+
+/** The conversation picked in Bring in, when it can be brought in. */
+function bringPick() {
+  const c = (sd.bring?.list ?? []).find((x) => x.id === sd.bring.pick);
+  return c && !c.open && !c.agent ? c : null;
+}
+
+/** "3 min ago", "2 h ago", or the date. */
+function agoText(iso) {
+  const ms = Date.now() - Date.parse(iso);
+  if (!Number.isFinite(ms)) return "";
+  const m = Math.round(ms / 60000);
+  if (m < 1) return t("ag.bring.now");
+  if (m < 60) return t("ag.bring.min", { n: m });
+  const h = Math.round(m / 60);
+  if (h < 48) return t("ag.bring.h", { n: h });
+  return iso.slice(0, 10);
+}
+
+/** The folder a conversation ran in, inside the workspace's when it is. */
+function convFolder(c) {
+  const root = sd.bring?.root;
+  if (root && c.cwd === root) return ".";
+  if (root && c.cwd.startsWith(`${root}/`)) return c.cwd.slice(root.length + 1);
+  return c.cwd;
+}
+
+function convRowHtml(c) {
+  const taken = c.agent
+    ? ` <span class="tagx">${esc(t("ag.bring.agent", { id: c.agent }))}</span>`
+    : c.open
+      ? ` <span class="tagx warn" title="${esc(t("ag.bring.openTip"))}">${esc(t("ag.bring.open"))}</span>`
+      : "";
+  const off = c.agent || c.open;
+  return (
+    `<button type="button" class="pr" role="radio" data-cid="${esc(c.id)}" aria-checked="${c.id === sd.bring.pick}"${off ? ' aria-disabled="true"' : ""}>` +
+    `<span class="rd" aria-hidden="true"></span><span class="pn pnc"><span class="pt">${esc(c.title || t("ag.bring.untitled"))}</span>${taken}</span><span class="mono">${esc(agoText(c.lastAt))}</span>` +
+    `<span class="pd mono">${esc(convFolder(c))} · ${esc(c.id.slice(0, 8))}</span></button>`
+  );
+}
+
+/** Bring in's conversation list and its help line. */
+function paintConversations() {
+  const f = $d("#ag-conv-f");
+  f.hidden = !sd.bring;
+  if (!sd.bring) return;
+  const list = sd.bring.list;
+  const cant = (sd.bring.runtimes ?? [])
+    .filter((r) => !r.bringIn && r.id !== "generic")
+    .map((r) => r.why);
+  $d("#ag-conv-h").textContent = [
+    list.length ? t("ag.bring.help") : t("ag.bring.none"),
+    // Each its own sentence (they read as one run-on line before).
+    ...cant.map((w) => (/[.!?]$/.test(w) ? w : `${w}.`)),
+  ].join(" ");
+  $d("#ag-conv").innerHTML = list.map(convRowHtml).join("");
+  $d("#ag-conv").hidden = !list.length;
+}
+
+/** Ask for the workspace's conversations (Bring in). */
+async function fillConversations(ws) {
+  if (!sd.bring) return true;
   try {
-    data = await personasFor(ws);
+    const r = await api(
+      "GET",
+      `/api/workspaces/${encodeURIComponent(ws)}/conversations`,
+    );
+    sd.bring.list = r?.conversations ?? [];
+    sd.bring.runtimes = r?.runtimes ?? [];
+    sd.bring.root = r?.folder ?? "";
   } catch (err) {
     window.denShell?.errorToast?.(err);
     return false;
   }
-  const form = st.root.querySelector("#ag-form");
-  const keep = [
-    form.querySelector("#ag-persona").value,
-    form.querySelector("#ag-runtime").value,
-  ];
-  fillStartForm(form, data, t);
-  // The persona and runtime picked stay, where the new list still has them.
-  const ps = form.querySelector("#ag-persona");
-  if (keep[0] && [...ps.options].some((o) => o.value === keep[0])) {
-    ps.value = keep[0];
-    ps.onchange?.();
+  if (!sd.bring.list.some((c) => c.id === sd.bring.pick))
+    sd.bring.pick = sd.bring.list.find((c) => !c.open && !c.agent)?.id ?? "";
+  paintConversations();
+  return true;
+}
+
+function pickConversation(id) {
+  const c = (sd.bring?.list ?? []).find((x) => x.id === id);
+  if (!c || c.open || c.agent) return;
+  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);
+}
+
+const $d = (sel) => st.root.querySelector(sel);
+const curPersona = () =>
+  sd.pid === PLAIN
+    ? null
+    : (sd.data?.personas ?? []).find((p) => p.id === sd.pid) || null;
+
+/** The runtime the dialog will start: the one picked, else the persona's. */
+function chosenRuntime() {
+  const p = curPersona();
+  return $d("#ag-runtime").value || personaRuntime(sd.data, p);
+}
+
+/** The persona's own model and version, on the runtime chosen (AG-12.3). */
+function personaModel() {
+  const p = curPersona();
+  const same = p && personaRuntime(sd.data, p) === chosenRuntime();
+  return {
+    model: same ? p.model || "" : "",
+    version: same ? p.version || "latest" : "latest",
+  };
+}
+
+/** The persona list's rows, and Plain session pinned at the bottom. */
+function plistHtml() {
+  const ps = sd.data?.personas ?? [];
+  const cats = sd.data?.categories ?? [];
+  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;
+  return (
+    rows +
+    `<div class="pgh"><span>${esc(t("ag.session"))}</span><span></span></div>` +
+    `<button type="button" class="pr" role="radio" data-pid="${esc(PLAIN)}" aria-checked="${sd.pid === PLAIN}"><span class="rd" aria-hidden="true"></span><span class="pn">${esc(t("ag.new.plain"))}</span><span></span><span class="pd">${esc(t("ag.new.plainP"))}</span></button>`
+  );
+}
+
+function paintPlist(keepScroll = true) {
+  const l = $d("#ag-persona");
+  const top = l.scrollTop;
+  l.innerHTML = plistHtml();
+  l.scrollTop = keepScroll ? top : 0;
+}
+
+/** The Details row (and Duplicate or Edit) under the list, and Details. */
+function paintDetails() {
+  const p = curPersona();
+  const el = $d("#ag-detrow");
+  if (!p) {
+    el.innerHTML = "";
+    return;
+  }
+  const mine = p.origin === "local";
+  el.innerHTML =
+    `<div class="fldh"><button type="button" class="lnk" data-x="det" aria-expanded="${sd.det}" aria-controls="ag-det">${esc(sd.det ? t("ag.new.hide") : t("ag.new.details", { n: personaName(p) }))}</button><span class="sp"></span>` +
+    (mine
+      ? `<button type="button" class="lnk" data-x="edit">${esc(t("pe.editB"))}</button>`
+      : "") +
+    `<button type="button" class="lnk" data-x="dup">${esc(t("pe.dup"))}</button></div>` +
+    (sd.det
+      ? personaDetailHtml(
+          sd.detail?.id === p.id ? sd.detail : { ...p, instructions: null },
+          sd.data,
+        )
+      : "");
+}
+
+/**
+ * The runtime select and its readiness line (AG-0.2), and AG-12.2: a
+ * persona whose runtime isn't installed starts on the first one that is,
+ * and the dialog says so.
+ */
+function paintRuntime(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();
+  if (sd.bring) {
+    $d("#ag-r-miss").hidden = true;
+    ready.hidden = true;
+    const ok = !!bringPick() && !!curPersona();
+    go.disabled = !ok;
+    go.dataset.blocked = ok ? "" : "conversation";
+    return;
   }
-  const rs = form.querySelector("#ag-runtime");
-  if ([...rs.options].some((o) => o.value === keep[1] && !o.disabled)) {
-    rs.value = keep[1];
-    rs.onchange?.();
+  const fb = $d("#ag-r-fb");
+  fb.hidden = true;
+  if (plain) {
+    $d("#ag-r-miss").hidden = true;
+    ready.hidden = true;
+    go.disabled = false;
+    go.dataset.blocked = "";
+    return;
   }
+  const personas = sd.data?.personas ?? [];
+  const runtimes = sd.data?.runtimes ?? [];
+  const keep = reset ? "" : rs.value;
+  rs.innerHTML = runtimeOptions(personas, runtimes, sd.pid, t);
+  if ([...rs.options].some((o) => o.value === keep && !o.disabled))
+    rs.value = keep;
+  const p = curPersona();
+  if (reset && p && !runtimeInstalled(sd.data, p)) {
+    const first = [...rs.options].find((o) => o.value && !o.disabled);
+    if (first) {
+      rs.value = first.value;
+      fb.textContent = t("rt.fallback", {
+        p: personaName(p),
+        r: runtimeName(runtimes, personaRuntime(sd.data, p)),
+        f: runtimeName(runtimes, first.value),
+      });
+      fb.hidden = false;
+    }
+  }
+  // AG-12.1: what isn't installed here, and Install… (later).
+  const miss = runtimes.filter(
+    (x) => !x.available && x.denTools !== undefined && x.source !== "setting",
+  );
+  const ml = $d("#ag-r-miss");
+  ml.innerHTML = miss.length
+    ? `${esc(t("rt.missingLine"))} ${miss.map((x) => `<span class="mono">${esc(x.label || x.id)}</span>`).join(", ")} · <span class="lnk" aria-disabled="true" title="${esc(t("rt.later"))}">${esc(t("rt.install"))}</span> <span class="tagx">${esc(t("rt.later"))}</span>`
+    : "";
+  ml.hidden = !miss.length;
+  const r = readiness(sd.data, sd.pid, rs.value, t);
+  ready.innerHTML = r.html;
+  ready.hidden = !r.html;
+  ready.dataset.tone = r.tone;
+  go.disabled = !r.ok;
+  go.dataset.blocked = r.ok ? "" : "runtime";
+}
+
+/** Advanced (AG-12, AG-13): model, version and the permission block. */
+function paintAdvanced() {
+  const p = curPersona();
+  const body = $d("#ag-adv-b");
+  if (!p) {
+    body.innerHTML = "";
+    return;
+  }
+  const rt = chosenRuntime();
+  const rtv = (sd.data?.runtimes ?? []).find((r) => r.id === rt);
+  const name = runtimeName(sd.data?.runtimes ?? [], rt);
+  const def = personaModel();
+  const models = rtv?.models ?? [];
+  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.
+    m: def.model
+      ? `${def.model} · ${versionLabel(def.version)}`
+      : versionLabel("latest"),
+  });
+  const verFirst = t("ag.new.verDef", {
+    v: versionLabel(
+      sd.model && sd.model !== def.model ? "latest" : def.version,
+    ),
+  });
+  body.innerHTML =
+    `<p>${esc(t("ag.new.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, first) : `<option value="">${esc(t("pe.nsModel", { r: name }))}</option>`}</select></label>` +
+    `<label class="fld"><span>${esc(t("ag.new.ver"))}</span><select id="ag-ver"${models.length && model ? "" : " disabled"}>${versionOptionsHtml(sd.data, rt, model, sd.ver, verFirst)}</select></label></div>` +
+    permBlockHtml("ag", sd.data, {
+      intent: sd.intent,
+      role: p.role,
+      extras: sd.extras,
+      runtime: rt,
+      extrasOpen: sd.extrasOpen,
+      disabled: !rtv?.permissions,
+    });
+  $d("#ag-tools").disabled = false;
+}
+
+/** Pick persona `id` (or PLAIN): its own choices fill Advanced in. */
+function pickPersona(id) {
+  sd.pid = id;
+  sd.det = sd.det && id !== PLAIN;
+  const p = curPersona();
+  sd.model = "";
+  sd.ver = "";
+  sd.intent = p?.permission || "ask";
+  sd.extras = [...(p?.allowedCommands ?? [])];
+  sd.extrasOpen = sd.extras.length > 0;
+  for (const b of st.root.querySelectorAll("#ag-persona [data-pid]"))
+    b.setAttribute("aria-checked", String(b.dataset.pid === id));
+  paintDetails();
+  paintRuntime(true);
+  paintAdvanced();
+  if (sd.det) void loadDetail();
+}
+
+async function loadDetail() {
+  const p = curPersona();
+  if (!p) return;
+  try {
+    const d = await personaDetail(p.id);
+    if (curPersona()?.id !== d.id) return;
+    sd.detail = d;
+    paintDetails();
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+}
+
+/** The whole persona field, for the data asked. */
+function paintPersonaField() {
+  const ps = sd.data?.personas ?? [];
+  $d("#ag-pfbar").innerHTML = filterBarHtml(
+    sd.f,
+    "ag",
+    ps,
+    sd.data?.categories ?? [],
+  );
+  $d("#ag-what").hidden = !sd.what;
+  paintPlist(false);
+}
+
+/** Ask for the workspace's personas and runtimes; false when it failed. */
+async function fillForWorkspace(ws) {
+  try {
+    sd.data = normalizeData(await personasFor(ws));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+    return false;
+  }
+  if (!(await fillConversations(ws))) return false;
+  if (sd.bring && sd.pid === PLAIN) sd.pid = "";
+  const ps = sd.data?.personas ?? [];
+  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);
+    const sorted = [...ps].sort(
+      (a, b) =>
+        (cats.indexOf(a.category) + 1 || 99) -
+        (cats.indexOf(b.category) + 1 || 99),
+    );
+    sd.pid = sorted[0]?.id ?? PLAIN;
+  }
+  paintPersonaField();
+  pickPersona(sd.pid);
   return true;
 }
 
-async function openStart() {
-  const dlg = st.root.querySelector("#ag-dlg");
+/** The dialog's words for Start, or for Bring in (AG-17.1). */
+function dialogMode(bring) {
+  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");
+  $d("#ag-conv-f").hidden = !bring;
+}
+
+async function openStart(bring = false) {
+  const dlg = $d("#ag-dlg");
   if (!dlg || dlg.open) return;
+  dialogMode(bring);
   const shown = viewWorkspaces();
-  const wsSel = st.root.querySelector("#ag-ws");
+  const wsSel = $d("#ag-ws");
   wsSel.innerHTML = shown
     .map((w) => `<option value="${esc(w)}">${esc(w)}</option>`)
     .join("");
-  st.root.querySelector("#ag-ws-l").hidden = shown.length <= 1;
+  wsSel.disabled = shown.length <= 1;
+  sd.f = { q: "", cat: "", src: "" };
+  sd.det = false;
+  sd.what = false;
+  $d("#ag-err").hidden = true;
+  $d("#ag-task").value = "";
+  $d("#ag-adv").open = false;
   if (!(await fillForWorkspace(wsSel.value || shown[0]))) return;
   if (dlg.open) return;
   if (typeof dlg.showModal === "function") dlg.showModal();
   else dlg.setAttribute("open", "");
+  $d("#ag-q")?.focus();
+}
+
+/** What Start sends (agent-routes.ts checks each field again). */
+function startBody() {
+  const p = curPersona();
+  const rt = chosenRuntime();
+  const rtv = (sd.data?.runtimes ?? []).find((r) => r.id === rt);
+  const runtime = $d("#ag-runtime").value;
+  const body = { persona: p.id, ...(runtime ? { runtime } : {}) };
+  const def = personaModel();
+  if (rtv?.models?.length) {
+    if (sd.model) body.model = sd.model;
+    if (sd.ver) {
+      body.version = sd.ver;
+      body.model ??= def.model || undefined;
+      if (!body.model) delete body.version;
+    }
+  }
+  if (rtv?.permissions) {
+    // A persona's own mode Den doesn't name (Claude Code's plan) stays its
+    // own unless a mode is picked.
+    if (p.permission !== undefined || sd.intent !== "ask")
+      body.permission = sd.intent;
+    body.allow = sd.extras;
+  }
+  const task = $d("#ag-task").value.trim();
+  if (task) body.instruction = task;
+  const name = $d("#ag-name").value.trim();
+  if (name) body.name = name;
+  return body;
+}
+
+function showStartError(err) {
+  const el = $d("#ag-err");
+  el.textContent = err?.message || String(err);
+  // AG-10.10: that agent is running: offer to open it.
+  const running = err?.data?.running;
+  if (running?.sessionId) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "den-btn sm";
+    b.id = "ag-open-running";
+    b.textContent = t("ag.new.openRunning");
+    b.addEventListener("click", () => {
+      $d("#ag-dlg").close?.();
+      void openPane(running.sessionId);
+    });
+    el.append(" ", b);
+  }
+  el.hidden = false;
+}
+
+/** AG-10.10: the id this start takes, so two of one persona are told apart. */
+function paintStartsAs() {
+  const el = $d("#ag-as");
+  if (!el) return;
+  const p = sd.pid && sd.pid !== PLAIN && !sd.bring ? curPersona() : null;
+  el.hidden = !p;
+  if (p)
+    el.textContent = t("ag.new.as", { id: sd.data?.startsAs?.[p.id] ?? p.id });
 }
 
 async function submitStart(form) {
-  const dlg = st.root.querySelector("#ag-dlg");
-  const go = st.root.querySelector("#ag-go");
+  const dlg = $d("#ag-dlg");
+  const go = $d("#ag-go");
   if (go.disabled) return;
   const ws = form.querySelector("#ag-ws").value || viewWorkspaces()[0];
-  const persona = form.querySelector("#ag-persona").value;
-  const runtime = form.querySelector("#ag-runtime").value;
-  if (!ws || !persona) return;
+  if (!ws || !sd.pid) return;
+  if (sd.bring) return submitBringIn(ws);
+  const bad = sd.extras.find((c) => commandProblem(c));
+  if (sd.pid !== PLAIN && bad)
+    return showStartError(new Error(t("pe.badCmd", { c: bad })));
   go.disabled = true;
   go.textContent = t("ag.starting");
   try {
+    if (sd.pid === PLAIN) {
+      const r = await api(
+        "POST",
+        `/api/workspaces/${encodeURIComponent(ws)}/sessions`,
+      );
+      window.denShell?.toast?.(
+        t("ag.new.started", { p: t("ag.session"), w: ws }),
+      );
+      dlg.close?.();
+      await refresh();
+      if (r?.session?.id) await openPane(r.session.id);
+      return;
+    }
     const r = await api(
       "POST",
       `/api/workspaces/${encodeURIComponent(ws)}/agents`,
-      {
-        persona,
-        ...(runtime ? { runtime } : {}),
-      },
+      startBody(),
     );
-    window.denShell?.toast?.(t("ag.started", { id: r?.agent?.id ?? persona }));
+    window.denShell?.toast?.(t("ag.started", { id: r?.agent?.id ?? sd.pid }));
+    // AG-10.10: the next start of this persona takes another id.
+    personasAsked.delete(ws);
+    $d("#ag-name").value = "";
+    for (const w of r?.warnings ?? []) window.denShell?.toast?.(w);
     dlg.close?.();
     await refresh();
     if (r?.agent?.sessionId) await openPane(r.agent.sessionId);
   } catch (err) {
-    window.denShell?.errorToast?.(err);
+    showStartError(err);
   } finally {
     go.disabled = false;
     go.textContent = t("ag.go");
+    if (dlg.open) paintRuntime(false);
+  }
+}
+
+/** Bring in (AG-17.1): the runtime's resume of the conversation picked. */
+async function submitBringIn(ws) {
+  const dlg = $d("#ag-dlg");
+  const go = $d("#ag-go");
+  const c = bringPick();
+  const p = curPersona();
+  if (!c || !p) return;
+  go.disabled = true;
+  go.textContent = t("ag.bring.going");
+  try {
+    const r = await api(
+      "POST",
+      `/api/workspaces/${encodeURIComponent(ws)}/conversations/${encodeURIComponent(c.id)}/import`,
+      { persona: p.id, runtime: c.runtime },
+    );
+    window.denShell?.toast?.(t("ag.bring.done", { id: r?.agent?.id ?? p.id }));
+    for (const w of r?.warnings ?? []) window.denShell?.toast?.(w);
+    dlg.close?.();
+    await refresh();
+    if (r?.agent?.sessionId) await openPane(r.agent.sessionId);
+  } catch (err) {
+    showStartError(err);
+    // Still open elsewhere, or taken since: the list says so now.
+    await fillConversations(ws);
+  } finally {
+    go.textContent = t("ag.bring.go");
+    if (dlg.open) paintRuntime(false);
   }
 }
 
+/** New persona, Edit or Duplicate from the dialog; back to it after. */
+async function editFromStart(kind) {
+  const p = curPersona();
+  let src = null;
+  if (kind !== "new" && p) {
+    try {
+      src = await personaDetail(p.id);
+    } catch (err) {
+      return void window.denShell?.errorToast?.(err);
+    }
+  }
+  openPersonaEditor({
+    data: sd.data,
+    src,
+    dup: kind === "dup",
+    onSaved: async (saved) => {
+      personasAsked.clear();
+      if (saved) sd.pid = saved.id;
+      await fillForWorkspace($d("#ag-ws").value);
+    },
+  });
+}
+
+/** Wire the dialog once (mountAgentsPage). */
+function wireStartDialog(root) {
+  const form = root.querySelector("#ag-form");
+  form.addEventListener("click", (e) => {
+    const cr = e.target.closest("#ag-conv [data-cid]");
+    if (cr) {
+      e.preventDefault();
+      pickConversation(cr.dataset.cid);
+      return;
+    }
+    const pr = e.target.closest("#ag-persona [data-pid]");
+    if (pr) {
+      e.preventDefault();
+      pickPersona(pr.dataset.pid);
+      pr.focus();
+      return;
+    }
+    const chip = e.target.closest("[data-pf]");
+    if (chip) {
+      e.preventDefault();
+      sd.f[chip.dataset.pf] = chip.dataset.v;
+      for (const c of form.querySelectorAll(`[data-pf="${chip.dataset.pf}"]`))
+        c.setAttribute("aria-pressed", String(c.dataset.v === chip.dataset.v));
+      return paintPlist(false);
+    }
+    const pm = e.target.closest("[data-pm]");
+    if (pm) {
+      e.preventDefault();
+      if (pm.disabled) return;
+      sd.intent = pm.dataset.pm;
+      return syncPermBlock(form, "ag", sd.data, {
+        intent: sd.intent,
+        role: curPersona()?.role,
+        extras: sd.extras,
+        runtime: chosenRuntime(),
+      });
+    }
+    const x = e.target.closest("[data-x]")?.dataset.x;
+    if (!x) return;
+    e.preventDefault();
+    if (x === "what") {
+      sd.what = !sd.what;
+      $d("#ag-what").hidden = !sd.what;
+      e.target
+        .closest("[data-x]")
+        .setAttribute("aria-expanded", String(sd.what));
+    } else if (x === "det") {
+      sd.det = !sd.det;
+      paintDetails();
+      if (sd.det) void loadDetail();
+    } else if (x === "clear") {
+      sd.f = { q: "", cat: "", src: "" };
+      paintPersonaField();
+    } else if (x === "raw") window.denShell?.toast?.(t("pe.rawLater"));
+    else if (x === "newp") void editFromStart("new");
+    else if (x === "dup") void editFromStart("dup");
+    else if (x === "edit") void editFromStart("edit");
+  });
+  form.addEventListener("input", (e) => {
+    if (e.target.id === "ag-q") {
+      sd.f.q = e.target.value;
+      paintPlist(false);
+    } else if (e.target.id === "ag-tools") {
+      sd.extras = splitCommands(e.target.value);
+      syncPermBlock(form, "ag", sd.data, {
+        intent: sd.intent,
+        role: curPersona()?.role,
+        extras: sd.extras,
+        runtime: chosenRuntime(),
+      });
+    }
+  });
+  form.addEventListener(
+    "toggle",
+    (e) => {
+      if (e.target.id === "ag-xtra") sd.extrasOpen = e.target.open;
+    },
+    true,
+  );
+  form.addEventListener("change", (e) => {
+    const id = e.target.id;
+    if (id === "ag-ws") void fillForWorkspace(e.target.value);
+    else if (id === "ag-runtime") {
+      sd.model = "";
+      sd.ver = "";
+      $d("#ag-r-fb").hidden = true;
+      paintRuntime(false);
+      paintAdvanced();
+    } else if (id === "ag-model") {
+      sd.model = e.target.value;
+      sd.ver = "";
+      paintAdvanced();
+    } else if (id === "ag-ver") sd.ver = e.target.value;
+  });
+  // ↑ ↓ move through the persona list (a radio group).
+  root.querySelector("#ag-persona").addEventListener("keydown", (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const rows = [...e.currentTarget.querySelectorAll("[data-pid]")];
+    const i = rows.indexOf(document.activeElement);
+    const next = rows[i + (e.key === "ArrowDown" ? 1 : -1)];
+    if (!next) return;
+    e.preventDefault();
+    pickPersona(next.dataset.pid);
+    next.focus();
+  });
+}
+
 /**
  * Once per document: a font that loads later (the theme's --mono as a web
  * font) and a theme applied without a reload (its sheet, then
@@ -1588,11 +2219,25 @@ function translateStatic(root) {
   };
   set("#ag-h", "n.agents");
   set("#ag-start", "ag.start");
+  set("#ag-bring", "ag.bring");
+  set("#ag-conv-t", "ag.bring.conv");
   set("#ag-clear", "ag.clear");
-  set("#ag-dlg-h", "ag.start");
+  set("#ag-dlg-h", "ag.new.title");
   set("#ag-ws-t", "ag.ws");
   set("#ag-p-t", "ag.persona");
   set("#ag-r-t", "ag.runtime");
+  set("#ag-what-b", "ag.new.what");
+  set("#ag-newp", "ag.new.newP");
+  set("#ag-what-p", "pe.what");
+  set("#ag-task-t", "ag.new.task");
+  set("#ag-name-t", "ag.new.name");
+  set("#ag-adv-s", "ag.new.adv");
+  set("#ag-note", "ag.new.note");
+  const task = root.querySelector("#ag-task");
+  if (task) task.placeholder = t("ag.new.taskPh");
+  root
+    .querySelector("#ag-persona")
+    ?.setAttribute("aria-label", t("ag.persona"));
   set("#ag-cancel", "ag.cancel");
   set("#ag-go", "ag.go");
   for (const b of root.querySelectorAll("[data-layouts] button")) {
@@ -1605,8 +2250,6 @@ function translateStatic(root) {
   root
     .querySelector("[data-layouts]")
     ?.setAttribute("aria-label", t("ag.layout"));
-  const h = root.querySelector("#ag-dlg-h");
-  if (h) h.textContent = h.textContent.replace(/^\+\s*/, "");
 }
 
 /** Fill the page drawn by agents.html and wire it. */
@@ -1676,12 +2319,13 @@ export async function mountAgentsPage(root) {
   root.querySelector("#ag-start").addEventListener("click", () => {
     void openStart();
   });
+  root.querySelector("#ag-bring")?.addEventListener("click", () => {
+    void openStart(true);
+  });
   root.querySelector("#ag-clear")?.addEventListener("click", (e) => {
     void clearStopped(e.currentTarget);
   });
-  root.querySelector("#ag-ws").addEventListener("change", (e) => {
-    void fillForWorkspace(e.currentTarget.value);
-  });
+  wireStartDialog(root);
   root.querySelector("#ag-cancel").addEventListener("click", () => {
     root.querySelector("#ag-dlg").close?.();
   });
@@ -1693,7 +2337,7 @@ export async function mountAgentsPage(root) {
   // cancels (the dialog's own cancel). A button keeps its own Enter.
   root.querySelector("#ag-form").addEventListener("keydown", (e) => {
     if (e.key !== "Enter" || e.isComposing) return;
-    if (e.target.closest("button, textarea")) return;
+    if (e.target.closest("button, textarea, summary")) return;
     e.preventDefault();
     if (!st.root.querySelector("#ag-go").disabled)
       e.currentTarget.requestSubmit();