@monster-orange/den 0.4.7 → 0.4.9

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

@@ -31,6 +31,24 @@
  * can't, before Start (agent-start.js readiness). Starting, stopping and
  * resuming an agent never ask for the admin password: it is for sudo, and
  * no agent action runs sudo (LK-0).
+ *
+ * Stopped agents (AG-14) stay listed under their workspace, below the
+ * running ones, each with why it stopped ("Stopped by you 19:52",
+ * "Interrupted: Den restarted", "Exited (code 1)") and its actions:
+ * Resume (the same conversation; its pane opens), Start fresh, Remove (one
+ * click, and Undo in the toast for 10 s). A runtime that can't resume
+ * shows only Start fresh, saying so. Clear stopped removes every stopped
+ * agent in view. After a restart, one line says how many were interrupted,
+ * with Resume all and Review.
+ *
+ * Session rotation (den#4): an agent whose session rotated (after
+ * agents.rotate.after_compactions compactions, or its pull request merged)
+ * and whose handoff.md passes the check reads "Ready to relaunch (3
+ * compactions)" or "(PR merged)", with Relaunch from handoff as its primary
+ * action, then Start fresh and Remove; Resume is not offered. With the
+ * handoff missing or failing the check, the row says so and keeps Resume
+ * and Start fresh. A running one says "Handoff due" or "Ready to relaunch"
+ * as a tag.
  */
 import { fillStartForm } from "/agent-start.js";
 
@@ -45,6 +63,9 @@ const esc = (s) =>
   );
 const api = (method, url, body) => window.denShell.api(method, url, body);
 const CLI = "__DEN_CLI__";
+const TITLE = "__DEN_TITLE__";
+/** How long Remove's Undo stays offered (AG-14.1b). */
+export const UNDO_MS = 10_000;
 
 /** The most panes at once (the prototype's 2x2). */
 export const MAX_PANES = 4;
@@ -88,11 +109,17 @@ function writeUrl() {
 
 // ── the list ────────────────────────────────────────────────────────────
 
-/** The workspaces to show: ?ws= (when active), else the scope bar's view. */
+/** ?ws=: the one workspace the page was asked for, or null. */
+const urlWorkspace = () => new URLSearchParams(location.search).get("ws");
+
+/**
+ * The workspaces to show: ?ws= (always that one, even when it isn't active
+ * or isn't known: never All in its place), else the scope bar's view.
+ */
 function viewWorkspaces() {
   const all = st.data?.workspaces ?? [];
-  const ws = new URLSearchParams(location.search).get("ws");
-  if (ws && all.includes(ws)) return [ws];
+  const ws = urlWorkspace();
+  if (ws) return [ws];
   if (st.scope && st.scope !== "all" && all.includes(st.scope))
     return [st.scope];
   return all;
@@ -112,7 +139,9 @@ function stateText(state) {
     return m[1] === undefined
       ? t("ag.state.exited")
       : t("ag.state.exitedCode", { code: m[1] });
-  return ["running", "stopping", "stopped", "ended"].includes(state)
+  return ["running", "stopping", "stopped", "ended", "interrupted"].includes(
+    state,
+  )
     ? t(`ag.state.${state}`)
     : state;
 }
@@ -127,7 +156,111 @@ function paneName(r) {
   return r.kind === "agent" ? r.displayName || r.agent || r.label : r.label;
 }
 
+/** An agent that isn't running: stopped, interrupted or exited (AG-14). */
+export function isStopped(r) {
+  return r.kind === "agent" && r.state !== "running" && r.state !== "stopping";
+}
+
+/** "19:52" today, else "Nov 6, 19:52" (the browser's own format). */
+function when(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const time = d.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+  const today = new Date().toDateString() === d.toDateString();
+  return today
+    ? time
+    : `${d.toLocaleDateString([], { month: "short", day: "numeric" })}, ${time}`;
+}
+
+/** Why a stopped agent stopped (AG-14.1). */
+export function stopReason(r) {
+  if (r.state === "interrupted")
+    return t("ag.why.interrupted", { name: TITLE });
+  if (r.state === "stopped")
+    return t("ag.why.stopped", { time: when(r.stoppedAt ?? "") }).trim();
+  const m = /^exited(?: \((-?\d+)\))?$/.exec(r.state);
+  if (m)
+    return m[1] === undefined
+      ? t("ag.why.exited")
+      : t("ag.why.exitedCode", { code: m[1] });
+  return stateText(r.state);
+}
+
+/** Why it rotates, in words: "3 compactions", "PR merged" (den#4). */
+function rotationWhy(rot) {
+  if (rot.due === "pr-merged") return t("ag.rot.merged");
+  return t(
+    rot.compactions === 1 ? "ag.rot.compactions.one" : "ag.rot.compactions",
+    {
+      n: rot.compactions,
+    },
+  );
+}
+
+/** Its rotation, when one is due: "ready" or "due" (den#4). */
+function rotationOf(r) {
+  if (!r.rotation?.due) return "";
+  return r.rotation.ready ? "ready" : "due";
+}
+
+/** A stopped agent's row: its button (it opens an ended pane) and actions. */
+function stoppedHtml(r) {
+  const open = st.open.includes(r.id);
+  const name = displayName(r);
+  const nm = `${esc(name)}${r.persona && r.persona !== r.label ? ` <span class="id">${esc(r.label)}</span>` : ""}`;
+  const meta = [r.runtime, r.cwd].filter(Boolean).join(" · ");
+  const who = esc(r.agent);
+  const rot = rotationOf(r);
+  const relaunch =
+    rot === "ready"
+      ? `<button type="button" class="den-btn sm primary" data-act="relaunch" aria-label="${esc(t("ag.relaunchName", { id: r.agent }))}">${esc(t("ag.relaunch"))}</button>`
+      : "";
+  const resume = r.resumable
+    ? `<button type="button" class="den-btn sm primary" data-act="resume" aria-label="${esc(t("ag.resumeName", { id: r.agent }))}">${esc(t("ag.resume"))}</button>`
+    : "";
+  const fresh = `<button type="button" class="den-btn sm" data-act="fresh" aria-label="${esc(t("ag.freshName", { id: r.agent }))}">${esc(t("ag.fresh"))}</button>`;
+  const remove = `<button type="button" class="den-btn sm" data-act="remove" aria-label="${esc(t("ag.removeName", { id: r.agent }))}">${esc(t("ag.remove"))}</button>`;
+  // A rotation due without a handoff that passes: say so (den#4).
+  const handoff =
+    rot === "due"
+      ? `<span class="agcant" data-handoff="${esc(r.rotation.handoff)}">${esc(
+          t(
+            r.rotation.handoff === "missing"
+              ? "ag.rot.noHandoff"
+              : "ag.rot.badHandoff",
+            { why: rotationWhy(r.rotation) },
+          ),
+        )}</span>`
+      : "";
+  const cant =
+    !r.resumable && r.noResume && rot !== "ready"
+      ? `<span class="agcant" data-no-resume>${esc(r.noResume.startsWith(`${r.runtime} `) ? t("ag.noResume", { runtime: r.runtime }) : r.noResume)}</span>`
+      : "";
+  const stText =
+    rot === "ready"
+      ? t("ag.rot.ready", { why: rotationWhy(r.rotation) })
+      : stateText(r.state);
+  return (
+    `<div class="agst" data-agent="${who}" data-state="${esc(r.state)}" data-ws="${esc(r.workspace)}"${rot ? ` data-rotation="${rot}"` : ""}>` +
+    `<button type="button" class="agr" data-id="${esc(r.id)}" data-kind="agent" data-state="${esc(r.state)}"` +
+    ` aria-pressed="${open}"${r.attachable ? "" : ' aria-disabled="true"'}` +
+    ` aria-label="${esc(t("ag.openName", { id: `${r.workspace} / ${name}` }))}">` +
+    `<span class="den-dot ${stateTone(r)}" aria-hidden="true"></span>` +
+    `<span class="nm">${nm}</span><span class="st">${esc(stText)}</span>` +
+    (meta ? `<span class="meta">${esc(meta)}</span>` : "") +
+    `<span class="why">${esc(stopReason(r))}</span>` +
+    `</button>` +
+    `<div class="agacts">${handoff}${cant}${relaunch}${resume}${fresh}${remove}</div>` +
+    `</div>`
+  );
+}
+
 function rowHtml(r) {
+  if (isStopped(r)) return stoppedHtml(r);
   const open = st.open.includes(r.id);
   const nm =
     r.kind === "agent"
@@ -137,9 +270,21 @@ function rowHtml(r) {
     ? `<span class="wbdg">${esc(t("ag.waiting"))}</span>`
     : `<span class="st">${esc(stateText(r.state))}</span>`;
   const meta = [r.runtime, r.cwd].filter(Boolean).join(" · ");
-  const tags = r.tokenRevoked
-    ? `<span class="agtags"><span class="tagx warn" title="${esc(t("ag.revokedTip"))}">${esc(t("ag.revoked"))}</span></span>`
+  const rot = rotationOf(r);
+  const rotTag = rot
+    ? `<span class="tagx warn" data-rotation="${rot}">${esc(
+        t(rot === "ready" ? "ag.rot.ready" : "ag.rot.due", {
+          why: rotationWhy(r.rotation),
+        }),
+      )}</span>`
     : "";
+  const revokedTag = r.tokenRevoked
+    ? `<span class="tagx warn" title="${esc(t("ag.revokedTip"))}">${esc(t("ag.revoked"))}</span>`
+    : "";
+  const tags =
+    rotTag || revokedTag
+      ? `<span class="agtags">${revokedTag}${rotTag}</span>`
+      : "";
   return (
     `<button type="button" class="agr" data-id="${esc(r.id)}" data-kind="${esc(r.kind)}" data-state="${esc(r.state)}"` +
     ` aria-pressed="${open}"${r.attachable ? "" : ' aria-disabled="true"'}` +
@@ -169,10 +314,40 @@ function paintList() {
     return;
   }
   const shown = viewWorkspaces();
+  // ?ws= names a workspace that isn't active: say so, and offer the switch.
+  const asked = st.data.requested;
+  if (asked && !asked.active)
+    notes.push(
+      `<div class="agnote" data-note="inactive" role="status">` +
+        esc(t("ag.inactive", { ws: asked.workspace })) +
+        (asked.known
+          ? ` · <button type="button" class="lnk" data-act="switch-ws">${esc(t("ag.switchWs", { ws: asked.workspace }))}</button>`
+          : ` ${esc(t("ag.unknownWs"))}`) +
+        `</div>`,
+    );
+  // AG-14.3: one line after a restart, for the agents it interrupted.
+  const hit = visibleRows().filter((r) => r.state === "interrupted");
+  if (hit.length)
+    notes.push(
+      `<div class="agnote" data-note="interrupted" role="status">` +
+        `${esc(t(hit.length === 1 ? "ag.interrupted.one" : "ag.interrupted", { n: hit.length, name: TITLE }))}` +
+        (hit.some((r) => r.resumable)
+          ? ` · <button type="button" class="lnk" data-act="resume-all">${esc(t("ag.resumeAll"))}</button>`
+          : "") +
+        ` · <button type="button" class="lnk" data-act="review">${esc(t("ag.review"))}</button></div>`,
+    );
   const groups = shown
     .map((ws) => ({
       ws,
-      rows: st.data.sessions.filter((s) => s.workspace === ws),
+      // Running ones (and plain sessions) first, then the stopped agents.
+      rows: st.data.sessions
+        .filter((s) => s.workspace === ws)
+        .map((s, i) => ({ s, i }))
+        .sort(
+          (a, b) =>
+            Number(isStopped(a.s)) - Number(isStopped(b.s)) || a.i - b.i,
+        )
+        .map((x) => x.s),
     }))
     .filter((g) => g.rows.length > 0);
   const body = groups.length
@@ -186,6 +361,11 @@ function paintList() {
         .join("")
     : `<div class="none">${esc(t("ag.none.scope", { scope: st.scopeLabel }))}</div>`;
   el.innerHTML = notes.join("") + body;
+  const clear = st.root.querySelector("#ag-clear");
+  if (clear) clear.hidden = !visibleRows().some(isStopped);
+  // No such workspace: nothing to start an agent in.
+  const start = st.root.querySelector("#ag-start");
+  if (start) start.hidden = st.data.requested?.known === false;
 }
 
 function visibleRows() {
@@ -219,7 +399,7 @@ async function loadScope() {
 }
 
 function scopeLabelFor(shown) {
-  const ws = new URLSearchParams(location.search).get("ws");
+  const ws = urlWorkspace();
   if (ws && shown.length === 1 && shown[0] === ws) return ws;
   return st.scope === "all" ? t("ag.all") : st.scope;
 }
@@ -227,7 +407,11 @@ function scopeLabelFor(shown) {
 async function refresh() {
   clearTimeout(st.timer);
   try {
-    const r = await fetch("/api/sessions", { headers: { accept: "json" } });
+    const ws = urlWorkspace();
+    const r = await fetch(
+      ws ? `/api/sessions?ws=${encodeURIComponent(ws)}` : "/api/sessions",
+      { headers: { accept: "json" } },
+    );
     if (r.status === 401) {
       st.signedOut = true;
     } else if (r.ok) {
@@ -325,6 +509,11 @@ function paintBar(p) {
     r?.kind === "agent" && (r.state === "running" || r.state === "stopping")
       ? `<button type="button" class="den-btn sm" data-act="stop" aria-label="${esc(t("ag.stopName", { id: r.agent }))}">${esc(t("ag.stop"))}</button>`
       : "";
+  // The mock's pane bar: Resume (primary) on an ended agent that can.
+  const resume =
+    r && isStopped(r) && r.resumable
+      ? `<button type="button" class="den-btn sm primary" data-act="resume" aria-label="${esc(t("ag.resumeName", { id: r.agent }))}">${esc(t("ag.resume"))}</button>`
+      : "";
   const reconnect = p.lost
     ? `<button type="button" class="den-btn sm" data-act="reconnect">${esc(t("ag.reconnect"))}</button>`
     : "";
@@ -334,7 +523,7 @@ function paintBar(p) {
     (r?.tokenRevoked
       ? `<span class="tagx warn" title="${esc(t("ag.revokedTip"))}">${esc(t("ag.revoked"))}</span>`
       : "") +
-    `<span class="x">${reconnect}${stop}<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}<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>`;
 }
 
 function send(p, obj) {
@@ -610,17 +799,191 @@ async function stopAgent(p, button) {
   if (!r?.agent) return;
   button.disabled = true;
   try {
-    await api(
+    const out = await api(
       "POST",
       `/api/workspaces/${encodeURIComponent(r.workspace)}/agents/${encodeURIComponent(r.agent)}/stop`,
     );
-    window.denShell?.toast?.(t("ag.stopped", { id: r.agent }));
+    window.denShell?.toast?.(
+      t(out?.stillStopping ? "ag.stillStopping" : "ag.stopped", {
+        id: r.agent,
+      }),
+    );
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+  await refresh();
+}
+
+// ── Stopped agents (AG-14) ──────────────────────────────────────────────
+
+const agentPath = (r, verb) =>
+  `/api/workspaces/${encodeURIComponent(r.workspace)}/agents/${encodeURIComponent(r.agent)}/${verb}`;
+
+/**
+ * Resume (the same conversation), Start fresh, or Relaunch from handoff
+ * (den#4: a new conversation that starts from handoff.md); its pane opens
+ * on it.
+ */
+async function restartRow(r, verb, button) {
+  if (button) button.disabled = true;
+  try {
+    const out = await api("POST", agentPath(r, verb));
+    window.denShell?.toast?.(
+      t(
+        verb === "relaunch"
+          ? "ag.relaunched"
+          : verb !== "resume"
+            ? "ag.startedFresh"
+            : out?.fresh
+              ? "ag.resumedFresh"
+              : "ag.resumed",
+        { id: r.agent },
+      ),
+    );
+    if (st.panes.has(r.id)) closePane(r.id, { quiet: true });
+    await refresh();
+    if (out?.agent?.sessionId) await openPane(out.agent.sessionId);
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+    await refresh();
+  }
+}
+
+/** Undo: the removed agents come back (POST /api/agents/restore). */
+async function undoRemove(ids) {
+  try {
+    const out = await api("POST", "/api/agents/restore", { agents: ids });
+    const back = out?.restored ?? [];
+    if (back.length)
+      window.denShell?.toast?.(t("ag.restored", { ids: back.join(", ") }));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+  await refresh();
+}
+
+/** The removal's toast, with Undo for UNDO_MS. */
+function removedToast(msg, ids) {
+  const shell = window.denShell;
+  if (shell?.toastAction)
+    shell.toastAction(msg, t("ag.undo"), () => void undoRemove(ids), UNDO_MS);
+  else shell?.toast?.(msg);
+}
+
+/** Remove: one click, no confirm (AG-14.1b). */
+async function removeRow(r, button) {
+  if (button) button.disabled = true;
+  try {
+    const out = await api("POST", agentPath(r, "remove"));
+    if (st.panes.has(r.id)) closePane(r.id, { quiet: true });
+    const ids = (out?.removed ?? []).map((x) => x.agent);
+    await refresh();
+    removedToast(
+      t("ag.removed", { id: r.agent }),
+      ids.length ? ids : [r.agent],
+    );
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+    await refresh();
+  }
+}
+
+/** Clear stopped: every stopped agent in view (AG-14.1b). */
+async function clearStopped(button) {
+  const workspaces = [
+    ...new Set(
+      visibleRows()
+        .filter(isStopped)
+        .map((r) => r.workspace),
+    ),
+  ];
+  if (!workspaces.length) return;
+  button.disabled = true;
+  try {
+    const out = await api("POST", "/api/agents/clear-stopped", { workspaces });
+    const ids = (out?.removed ?? []).map((x) => x.agent);
+    for (const r of visibleRows())
+      if (ids.includes(r.agent) && st.panes.has(r.id))
+        closePane(r.id, { quiet: true });
+    await refresh();
+    if (ids.length)
+      removedToast(
+        t(ids.length === 1 ? "ag.removedMany.one" : "ag.removedMany", {
+          n: ids.length,
+        }),
+        ids,
+      );
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+    await refresh();
+  } finally {
+    button.disabled = false;
+  }
+}
+
+/** Resume all: every interrupted agent in view that can resume (AG-14.3). */
+async function resumeAll(button) {
+  const workspaces = [
+    ...new Set(
+      visibleRows()
+        .filter((r) => r.state === "interrupted")
+        .map((r) => r.workspace),
+    ),
+  ];
+  if (!workspaces.length) return;
+  button.disabled = true;
+  try {
+    const out = await window.denShell.api(
+      "POST",
+      "/api/agents/resume-interrupted",
+      { workspaces },
+    );
+    const n = out?.resumed?.length ?? 0;
+    window.denShell?.toast?.(
+      t(n === 1 ? "ag.resumedAll.one" : "ag.resumedAll", { n }),
+    );
   } catch (err) {
     window.denShell?.errorToast?.(err);
   }
   await refresh();
 }
 
+/**
+ * Switch to ?ws='s workspace: make it active (as Local Dev's Activate
+ * does), then view it (POST /api/scope, the top bar's Workspace switch),
+ * then reload, as that switch does.
+ */
+async function switchWorkspace(button) {
+  const ws = st.data?.requested?.workspace;
+  if (!ws) return;
+  button.disabled = true;
+  try {
+    await api("POST", "/api/workspaces", { name: ws, action: "activate" });
+    await api("POST", "/api/scope", { scope: ws });
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+    button.disabled = false;
+    return;
+  }
+  location.reload();
+}
+
+/** Review: the first interrupted agent, scrolled to and focused. */
+function review() {
+  const first = st.root.querySelector('#agl .agst[data-state="interrupted"]');
+  if (!first) return;
+  for (const el of st.root.querySelectorAll("#agl .agst[data-review]"))
+    el.removeAttribute("data-review");
+  for (const el of st.root.querySelectorAll(
+    '#agl .agst[data-state="interrupted"]',
+  ))
+    el.setAttribute("data-review", "");
+  first.scrollIntoView({ block: "nearest" });
+  (
+    first.querySelector('[data-act="resume"]') ?? first.querySelector(".agr")
+  )?.focus();
+}
+
 // ── Start agent ─────────────────────────────────────────────────────────
 
 // Personas and runtimes, per workspace (AG-0.5: a workspace's own runtime
@@ -761,6 +1124,7 @@ function translateStatic(root) {
   };
   set("#ag-h", "n.agents");
   set("#ag-start", "ag.start");
+  set("#ag-clear", "ag.clear");
   set("#ag-dlg-h", "ag.start");
   set("#ag-ws-t", "ag.ws");
   set("#ag-p-t", "ag.persona");
@@ -782,6 +1146,23 @@ export async function mountAgentsPage(root) {
   const startAsked = new URLSearchParams(location.search).get("start") === "1";
 
   root.querySelector("#agl").addEventListener("click", (e) => {
+    const act = e.target.closest("button[data-act]");
+    if (act) {
+      const which = act.dataset.act;
+      if (which === "resume-all") return void resumeAll(act);
+      if (which === "review") return review();
+      if (which === "switch-ws") return void switchWorkspace(act);
+      const agent = act.closest(".agst")?.dataset.agent;
+      const ws = act.closest(".agst")?.dataset.ws;
+      const r = visibleRows().find(
+        (x) => x.agent === agent && x.workspace === ws,
+      );
+      if (!r) return;
+      if (which === "resume" || which === "fresh" || which === "relaunch")
+        void restartRow(r, which, act);
+      else if (which === "remove") void removeRow(r, act);
+      return;
+    }
     const b = e.target.closest(".agr");
     if (!b) return;
     if (b.getAttribute("aria-disabled") === "true") return;
@@ -797,11 +1178,17 @@ export async function mountAgentsPage(root) {
     if (!p) return;
     if (b.dataset.act === "close") closePane(id);
     else if (b.dataset.act === "stop") void stopAgent(p, b);
-    else if (b.dataset.act === "reconnect") void connect(p);
+    else if (b.dataset.act === "resume") {
+      const r = rowOf(id);
+      if (r) void restartRow(r, "resume", b);
+    } else if (b.dataset.act === "reconnect") void connect(p);
   });
   root.querySelector("#ag-start").addEventListener("click", () => {
     void openStart();
   });
+  root.querySelector("#ag-clear")?.addEventListener("click", (e) => {
+    void clearStopped(e.currentTarget);
+  });
   root.querySelector("#ag-ws").addEventListener("change", (e) => {
     void fillForWorkspace(e.currentTarget.value);
   });

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

@@ -79,7 +79,9 @@ function stateText(state) {
     return m[1] === undefined
       ? t("ag.state.exited")
       : t("ag.state.exitedCode", { code: m[1] });
-  return ["running", "stopping", "stopped", "ended"].includes(state)
+  return ["running", "stopping", "stopped", "ended", "interrupted"].includes(
+    state,
+  )
     ? t(`ag.state.${state}`)
     : state;
 }
@@ -219,9 +221,21 @@ async function openForm(sec) {
 async function act(ws, verb, id, button) {
   button.disabled = true;
   try {
-    await api("POST", `${base(ws)}/${encodeURIComponent(id)}/${verb}`);
+    const out = await api(
+      "POST",
+      `${base(ws)}/${encodeURIComponent(id)}/${verb}`,
+    );
     window.denShell?.toast?.(
-      t(verb === "stop" ? "ag.stopped" : "ag.resumed", { id }),
+      t(
+        verb === "stop"
+          ? out?.stillStopping
+            ? "ag.stillStopping"
+            : "ag.stopped"
+          : out?.fresh
+            ? "ag.resumedFresh"
+            : "ag.resumed",
+        { id },
+      ),
     );
   } catch (err) {
     window.denShell?.errorToast?.(err);

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

@@ -85,6 +85,9 @@
         display: flex;
         gap: 8px;
       }
+      .ph .act [hidden] {
+        display: none;
+      }
       .mono {
         font-family: var(--mono);
       }
@@ -163,6 +166,44 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      /* AG-14: a stopped agent's row. Its why is the row's .meta line; its
+         actions are the mock's .btn.sm (den-btn sm), starting under the name
+         (the row's 12px padding, its 2px border, the 8px dot with its 5px
+         margins (.den-dot), the 8px gap: 40px). */
+      .agr .why {
+        grid-column: 2 / 4;
+        font: 11.5px var(--mono);
+        color: var(--faint);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .agst .agacts {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+        padding: 0 12px 8px 40px;
+      }
+      .agst .agcant {
+        flex-basis: 100%;
+        font: 12px/1.4 var(--sans);
+        color: var(--faint);
+      }
+      .agst[data-review] > .agr {
+        border-left-color: var(--warn);
+      }
+      /* The mock's .lnk: a button that reads as a link. */
+      .lnk {
+        color: var(--accent-text);
+        cursor: pointer;
+        font: inherit;
+        font-size: 12.5px;
+        text-decoration: underline;
+        background: none;
+        border: 0;
+        padding: 0;
+      }
       .wbdg {
         font: 10.5px var(--mono);
         color: var(--warn);
@@ -424,6 +465,9 @@
           </div>
         </div>
         <div class="act">
+          <button type="button" class="den-btn" id="ag-clear" hidden>
+            Clear stopped
+          </button>
           <button type="button" class="den-btn primary" id="ag-start">
             + Start agent
           </button>

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

@@ -400,7 +400,47 @@
     "ag.cancel": "Cancelar",
     "ag.started": "Agente {id} iniciado",
     "ag.stopped": "Agente {id} detenido",
+    "ag.stillStopping": "{id} todavía se está deteniendo",
+    "ag.resumedFresh": "{id}: aún no hay nada que reanudar; se inició de nuevo",
+    "ag.inactive": "El espacio de trabajo {ws} no está activo",
+    "ag.switchWs": "Cambiar a {ws}",
+    "ag.unknownWs": "(ningún espacio de trabajo tiene ese nombre)",
     "ag.resumed": "Agente {id} reanudado",
+    "ag.state.interrupted": "interrumpido",
+    "ag.why.stopped": "Lo detuviste a las {time}",
+    "ag.why.interrupted": "Interrumpido: {name} se reinició",
+    "ag.why.exited": "Salió",
+    "ag.why.exitedCode": "Salió (código {code})",
+    "ag.fresh": "Empezar de cero",
+    "ag.freshName": "Empezar {id} de cero",
+    "ag.startedFresh": "{id} empezó de cero",
+    "ag.rot.ready": "Listo para relanzar ({why})",
+    "ag.rot.due": "Falta el traspaso ({why})",
+    "ag.rot.compactions": "{n} compactaciones",
+    "ag.rot.compactions.one": "{n} compactación",
+    "ag.rot.merged": "PR fusionado",
+    "ag.rot.noHandoff":
+      "Su sesión rotó ({why}), pero no escribió handoff.md. Reanúdalo para que lo escriba, o empieza de cero.",
+    "ag.rot.badHandoff":
+      "Su sesión rotó ({why}), pero su handoff.md no está completo. Reanúdalo para arreglarlo, o empieza de cero.",
+    "ag.relaunch": "Relanzar desde el traspaso",
+    "ag.relaunchName": "Relanzar {id} desde el traspaso",
+    "ag.relaunched": "{id} relanzado desde su traspaso",
+    "ag.remove": "Quitar",
+    "ag.removeName": "Quitar {id}",
+    "ag.removed": "{id} quitado",
+    "ag.removedMany": "{n} agentes detenidos quitados",
+    "ag.removedMany.one": "{n} agente detenido quitado",
+    "ag.undo": "Deshacer",
+    "ag.restored": "De vuelta en la lista: {ids}",
+    "ag.clear": "Quitar detenidos",
+    "ag.noResume": "{runtime} no puede reanudar una conversación",
+    "ag.interrupted": "{n} agentes se interrumpieron al reiniciarse {name}",
+    "ag.interrupted.one": "{n} agente se interrumpió al reiniciarse {name}",
+    "ag.resumeAll": "Reanudar todos",
+    "ag.review": "Revisar",
+    "ag.resumedAll": "{n} agentes reanudados",
+    "ag.resumedAll.one": "{n} agente reanudado",
     // The Agents tab (AG-4a-term, agents-page.js).
     "n.agents": "Agentes",
     "kind.agent": "Agente",