@monster-orange/den 0.4.11 → 0.4.12

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

@@ -41,6 +41,30 @@
  * agent in view. After a restart, one line says how many were interrupted,
  * with Resume all and Review.
  *
+ * Layouts (AG-4b): Focus (the default: one pane; a click replaces it,
+ * Shift- or ⌘-click adds one alongside), Tabs (one pane under a strip of
+ * named tabs) or Tile (up to four in a grid: 1 full, 2 side by side, 3-4
+ * as 2x2). The page header's switch, ⌃⇧1 / ⌃⇧2 / ⌃⇧3 (Ctrl+Shift+digit
+ * on every OS: ⌘1-9 and Ctrl+1-9 are the browser's tabs) and ⌘K "Layout:
+ * …" pick one; it is the person's (POST /api/settings agents_layout) and the URL's (&layout=; a
+ * link's wins for that page and saves nothing). At phone width Focus and
+ * Tile are Tabs. Every pane open stays attached; a pane out of sight never
+ * resizes its PTY. Double-click a tab to rename the agent: the name is its
+ * record's (POST …/agents/<id>/name), shown in the list, the pane, ⌘K.
+ *
+ * The terminal (AG-4b): Shift+Enter sends the runtime's soft newline (its
+ * catalog softNewline, from /api/sessions: ESC CR, Codex's Ctrl+J; a
+ * plain session's is Enter) and nothing else. The layout keys never reach
+ * the agent. Links: plain URLs (addon-web-links) and OSC 8 links open on
+ * ⌘-click (Ctrl-click elsewhere) in a new tab with noopener, http and
+ * https only; a plain click selects as ever. A file path is a link when
+ * the server says it exists inside the agent's workspace (GET …/paths,
+ * stat only): ⌘-click opens it in Settings' editor_open (vscode, cursor,
+ * zed, by URL scheme, at the line), or, with none (the default), copies
+ * its absolute path. The session's name (its runtime's /rename, or Den's
+ * rename, whichever is later) follows the runtime in the pane header and
+ * the persona in its tab, when it says more than the agent's own name.
+ *
  * 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
@@ -51,6 +75,14 @@
  * as a tag.
  */
 import { fillStartForm } from "/agent-start.js";
+import {
+  editorUrl,
+  findPaths,
+  isWebUrl,
+  layoutKeyIndex,
+  linkModifier,
+  softNewlineKey,
+} from "/term-input.js";
 
 const t = (key, vars) => window.denShell?.t?.(key, vars) ?? key;
 const esc = (s) =>
@@ -69,6 +101,13 @@ export const UNDO_MS = 10_000;
 
 /** The most panes at once (the prototype's 2x2). */
 export const MAX_PANES = 4;
+
+/** The layouts (AG-4b), in the switch's order (⌃⇧1, ⌃⇧2, ⌃⇧3). */
+export const LAYOUTS = ["focus", "tabs", "tile"];
+/** At or below this width Focus and Tile are Tabs (the shell's phone width). */
+const PHONE = "(max-width: 720px)";
+/** The longest name a tab takes (records.ts MAX_DISPLAY_NAME). */
+const MAX_NAME = 40;
 const REFRESH_MS = 5_000;
 
 const st = {
@@ -83,8 +122,37 @@ const st = {
   xterm: null,
   csrf: null,
   docWired: false,
+  // AG-4b: the person's layout, the pane in front, and in Focus the panes
+  // Shift-clicked in alongside it.
+  layout: "focus",
+  cur: null,
+  side: new Set(),
+  // AG-4b: where a path link opens (Settings editor_open).
+  editorOpen: "none",
 };
 
+/** ?layout=, when it names one; else null. */
+export function layoutFromUrl(search) {
+  const l = new URLSearchParams(search).get("layout");
+  return LAYOUTS.includes(l) ? l : null;
+}
+
+const phone = () => !!window.matchMedia?.(PHONE).matches;
+
+/** The layout drawn: the person's, except at phone width (Tabs). */
+function shownLayout() {
+  return phone() ? "tabs" : st.layout;
+}
+
+/** The panes in sight, in the URL's order. */
+function visibleIds() {
+  const l = shownLayout();
+  if (l === "tile") return [...st.open];
+  if (!st.open.includes(st.cur)) st.cur = st.open.at(-1) ?? null;
+  if (l === "tabs") return st.cur ? [st.cur] : [];
+  return st.open.filter((id) => id === st.cur || st.side.has(id));
+}
+
 // ── the URL ─────────────────────────────────────────────────────────────
 
 /** The ids ?open= names (at most MAX_PANES, in order, no repeats). */
@@ -101,6 +169,7 @@ function writeUrl() {
   const u = new URL(location.href);
   if (st.open.length) u.searchParams.set("open", st.open.join(","));
   else u.searchParams.delete("open");
+  u.searchParams.set("layout", st.layout);
   u.searchParams.delete("start");
   const s = u.searchParams.toString().replace(/%2C/gi, ",");
   history.replaceState(history.state, "", u.pathname + (s ? `?${s}` : ""));
@@ -147,7 +216,34 @@ function stateText(state) {
 }
 
 function displayName(r) {
-  return r.kind === "agent" ? (r.persona ?? r.label) : r.label;
+  if (r.kind !== "agent") return r.label;
+  return r.displayName || (r.persona ?? r.label);
+}
+
+/**
+ * A row's name: the name a person gave it (AG-4b), then its persona and
+ * id; else its persona, then its id (when they differ).
+ */
+function nameHtml(r) {
+  const extra = sessionExtra(r);
+  if (r.displayName)
+    return `${esc(r.displayName)} <span class="id">${esc([r.persona, r.label, extra].filter(Boolean).join(" · "))}</span>`;
+  const id = [r.persona && r.persona !== r.label ? r.label : "", extra]
+    .filter(Boolean)
+    .join(" · ");
+  return `${esc(displayName(r))}${id ? ` <span class="id">${esc(id)}</span>` : ""}`;
+}
+
+/**
+ * The session's name (AG-4b: the runtime's /rename or Den's, the later),
+ * where it says more than the agent's own name: not empty, not the
+ * persona, not the name already shown. Else "".
+ */
+function sessionExtra(r) {
+  const n = r?.kind === "agent" ? (r.sessionName ?? "").trim() : "";
+  if (!n || n === r.persona || n === paneName(r) || n === displayName(r))
+    return "";
+  return n;
 }
 
 // A pane's title and its Close: the agent's display name (AG-10.8), else
@@ -211,7 +307,7 @@ function rotationOf(r) {
 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 nm = nameHtml(r);
   const meta = [r.runtime, r.cwd].filter(Boolean).join(" · ");
   const who = esc(r.agent);
   const rot = rotationOf(r);
@@ -264,7 +360,7 @@ function rowHtml(r) {
   const open = st.open.includes(r.id);
   const nm =
     r.kind === "agent"
-      ? `${esc(displayName(r))}${r.persona && r.persona !== r.label ? ` <span class="id">${esc(r.label)}</span>` : ""}`
+      ? nameHtml(r)
       : `${esc(r.label)} <span class="sbdg">${esc(t("ag.session"))}</span>`;
   const right = r.waiting
     ? `<span class="wbdg">${esc(t("ag.waiting"))}</span>`
@@ -289,7 +385,7 @@ function rowHtml(r) {
     `<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"'}` +
     ` aria-label="${esc(t("ag.openName", { id: `${r.workspace} / ${displayName(r)}` }))}">` +
-    `<span class="den-dot ${stateTone(r)}" aria-hidden="true"></span>` +
+    `<span class="den-dot ${r.waiting ? "warn" : stateTone(r)}" aria-hidden="true"></span>` +
     `<span class="nm">${nm}</span>${right}` +
     (meta ? `<span class="meta">${esc(meta)}</span>` : "") +
     tags +
@@ -360,7 +456,10 @@ function paintList() {
         )
         .join("")
     : `<div class="none">${esc(t("ag.none.scope", { scope: st.scopeLabel }))}</div>`;
-  el.innerHTML = notes.join("") + body;
+  el.innerHTML =
+    notes.join("") +
+    body +
+    `<div class="aghint" id="agl-hint">${esc(t(`ag.hint.${shownLayout()}`))} ${esc(t("ag.hint.keys"))}</div>`;
   const clear = st.root.querySelector("#ag-clear");
   if (clear) clear.hidden = !visibleRows().some(isStopped);
   // No such workspace: nothing to start an agent in.
@@ -388,6 +487,21 @@ function paintSub() {
   if (url) url.textContent = location.pathname + location.search;
 }
 
+/**
+ * The person's layout (GET /api/settings agents_layout), else Focus; and
+ * where a path link opens (editor_open), else none.
+ */
+async function savedLayout() {
+  try {
+    const r = await fetch("/api/settings", { headers: { accept: "json" } });
+    const b = r.ok ? await r.json() : null;
+    if (typeof b?.editor_open === "string") st.editorOpen = b.editor_open;
+    return LAYOUTS.includes(b?.agents_layout) ? b.agents_layout : "focus";
+  } catch {
+    return "focus";
+  }
+}
+
 async function loadScope() {
   try {
     const r = await fetch("/api/scope");
@@ -425,6 +539,8 @@ async function refresh() {
   paintList();
   paintSub();
   for (const p of st.panes.values()) paintBar(p);
+  const strip = st.root.querySelector("#agr > .agtabs");
+  if (strip) paintTabs(strip);
   if (!st.root.isConnected) return;
   st.timer = setTimeout(() => {
     if (!document.hidden) void refresh();
@@ -440,7 +556,12 @@ async function loadXterm() {
   st.xterm ??= Promise.all([
     import("/vendor/xterm.mjs"),
     import("/vendor/addon-fit.mjs"),
-  ]).then(([x, f]) => ({ Terminal: x.Terminal, FitAddon: f.FitAddon }));
+    import("/vendor/addon-web-links.mjs"),
+  ]).then(([x, f, w]) => ({
+    Terminal: x.Terminal,
+    FitAddon: f.FitAddon,
+    WebLinksAddon: w.WebLinksAddon,
+  }));
   return st.xterm;
 }
 
@@ -479,30 +600,233 @@ function termTheme() {
   return theme;
 }
 
+/** A tab's words: the agent's name, then its persona and workspace. */
+function tabWords(id) {
+  const r = rowOf(id);
+  const p = st.panes.get(id);
+  if (!r) return { name: p?.label || id, meta: p?.workspace || "" };
+  if (r.kind !== "agent")
+    return {
+      name: r.label,
+      meta: [t("ag.session"), r.workspace].join(" · "),
+    };
+  return {
+    name: paneName(r),
+    meta: [r.persona, r.workspace, sessionExtra(r)].filter(Boolean).join(" · "),
+  };
+}
+
+/** The tab strip (AG-4b Tabs): one tab per open pane, its × beside it. */
+function paintTabs(strip) {
+  // A tab being renamed keeps its input.
+  if (strip.querySelector("input")) return;
+  const have = [...strip.querySelectorAll(":scope > .agtab-w")].map(
+    (w) => w.dataset.id,
+  );
+  // The same tabs: changed in place, so a double-click's target stays.
+  if (have.join("\n") === st.open.join("\n")) {
+    for (const w of strip.querySelectorAll(":scope > .agtab-w")) {
+      const id = w.dataset.id;
+      const r = rowOf(id);
+      const words = tabWords(id);
+      const on = id === st.cur;
+      const tab = w.querySelector('[role="tab"]');
+      tab.setAttribute("aria-selected", String(on));
+      tab.tabIndex = on ? 0 : -1;
+      tab.querySelector(".den-dot").className =
+        `den-dot ${r?.waiting ? "warn" : r ? stateTone(r) : "pending"}`;
+      tab.querySelector(".tn").textContent = words.name;
+      tab.querySelector(".tm").textContent = words.meta;
+      const sr = tab.querySelector(".den-sr");
+      if (sr) sr.hidden = !r?.waiting;
+      w.querySelector(".agtab-x").setAttribute(
+        "aria-label",
+        t("ag.detachName", { id: words.name }),
+      );
+    }
+    return;
+  }
+  strip.innerHTML = st.open
+    .map((id) => {
+      const r = rowOf(id);
+      const w = tabWords(id);
+      const on = id === st.cur;
+      const tone = r?.waiting ? "warn" : r ? stateTone(r) : "pending";
+      const rename =
+        r?.kind === "agent" ? ` title="${esc(t("ag.renameTip"))}"` : "";
+      return (
+        `<span class="agtab-w" data-id="${esc(id)}">` +
+        `<button type="button" role="tab" class="agtab" data-id="${esc(id)}" aria-selected="${on}" tabindex="${on ? 0 : -1}"${rename}>` +
+        `<span class="den-dot ${tone}" aria-hidden="true"></span>` +
+        `<span class="den-sr"${r?.waiting ? "" : " hidden"}>${esc(t("ag.waiting"))}: </span>` +
+        `<span class="tn">${esc(w.name)}</span><span class="tm mono">${esc(w.meta)}</span></button>` +
+        `<button type="button" class="agtab-x" data-act="close" data-id="${esc(id)}" aria-label="${esc(t("ag.detachName", { id: w.name }))}" title="${esc(t("ag.detach"))}">×</button>` +
+        `</span>`
+      );
+    })
+    .join("");
+}
+
 function paintLayout() {
   const box = st.root.querySelector("#agr");
   const n = st.open.length;
+  paintSwitch();
   if (n === 0) {
     box.className = "agempty";
+    delete box.dataset.layout;
     box.innerHTML = `<div>${esc(t("ag.empty"))}</div>`;
     return;
   }
-  box.className = `agp n${n}`;
-  const empty = box.querySelector(":scope > div:not(.pane)");
+  const layout = shownLayout();
+  const shown = visibleIds();
+  box.className = `agp n${Math.max(1, shown.length)}${layout === "tabs" ? " tabs" : ""}`;
+  box.dataset.layout = layout;
+  const empty = box.querySelector(":scope > div:not(.pane):not(.agtabs)");
   if (empty) empty.remove();
-  // Panes in the URL's order.
+  let strip = box.querySelector(":scope > .agtabs");
+  if (layout === "tabs") {
+    if (!strip) {
+      strip = document.createElement("div");
+      strip.className = "agtabs";
+      strip.setAttribute("role", "tablist");
+      strip.setAttribute("aria-label", t("ag.tabs"));
+    }
+    box.prepend(strip);
+    paintTabs(strip);
+    // The tab in front is in sight in the strip (it scrolls sideways;
+    // the page itself never scrolls for it).
+    const on = strip.querySelector('[role="tab"][aria-selected="true"]');
+    const w = on?.parentElement;
+    if (w && strip.clientWidth > 0) {
+      const left = w.offsetLeft - strip.offsetLeft;
+      if (left < strip.scrollLeft) strip.scrollLeft = left;
+      else if (left + w.offsetWidth > strip.scrollLeft + strip.clientWidth)
+        strip.scrollLeft = left + w.offsetWidth - strip.clientWidth;
+    }
+  } else strip?.remove();
+  // Panes in the URL's order; those out of sight stay attached, hidden.
   for (const id of st.open) {
     const p = st.panes.get(id);
-    if (p) box.appendChild(p.el);
+    if (!p) continue;
+    p.el.hidden = !shown.includes(id);
+    p.el.classList.toggle("in-tabs", layout === "tabs");
+    const x = p.el.querySelector('.bar2 [data-act="close"]');
+    if (x) x.hidden = layout === "tabs";
+    box.appendChild(p.el);
+  }
+  // Each pane in sight fits its new box (a hidden one is never measured).
+  requestAnimationFrame(() => {
+    for (const id of shown) {
+      const p = st.panes.get(id);
+      if (p) refit(p);
+    }
+  });
+}
+
+/** The header's switch: the person's layout pressed (AG-4b). */
+function paintSwitch() {
+  for (const b of st.root.querySelectorAll("[data-layouts] button"))
+    b.setAttribute("aria-pressed", String(b.dataset.layout === st.layout));
+}
+
+/**
+ * Switch the layout (the header's switch, ⌘1-3): drawn at once, the URL
+ * follows, and it is saved for the person. Focus shows the pane in front.
+ */
+function setLayout(layout) {
+  if (!LAYOUTS.includes(layout)) return;
+  const was = st.layout;
+  st.layout = layout;
+  st.side.clear();
+  paintLayout();
+  paintList();
+  writeUrl();
+  if (layout === was) return;
+  api("POST", "/api/settings", { agents_layout: layout }).catch((err) =>
+    window.denShell?.errorToast?.(err),
+  );
+}
+
+/**
+ * Open (or bring forward) the session of a row the person clicked, as the
+ * layout says: Focus replaces the pane (`add`: Shift- or ⌘-click, one
+ * alongside), Tabs opens a tab, Tile adds a tile.
+ */
+async function pick(id, add) {
+  const layout = shownLayout();
+  if (layout === "focus" && !add) {
+    st.side.clear();
+    for (const other of [...st.open])
+      if (other !== id) closePane(other, { quiet: true });
+  } else if (layout === "focus" && add && st.cur && st.cur !== id)
+    st.side.add(id);
+  if (!(layout === "focus" && add)) st.cur = id;
+  if (st.panes.has(id)) {
+    paintLayout();
+    paintList();
+    st.panes.get(id).term?.focus();
+    return;
   }
+  await openPane(id, { front: !(layout === "focus" && add) });
+}
+
+/** Double-click a tab: its name becomes an input (Enter saves, Esc doesn't). */
+function renameTab(tab) {
+  const id = tab.dataset.id;
+  const r = rowOf(id);
+  if (r?.kind !== "agent" || tab.querySelector("input")) return;
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "agtab-in";
+  input.maxLength = MAX_NAME;
+  input.value = r.displayName || r.agent;
+  input.setAttribute("aria-label", t("ag.renameName", { id: r.agent }));
+  // Beside the tab, not in it (a button holds no input): the tab hides.
+  tab.hidden = true;
+  tab.before(input);
+  input.focus();
+  input.select();
+  let done = false;
+  const finish = async (save) => {
+    if (done) return;
+    done = true;
+    const name = input.value.trim();
+    input.remove();
+    tab.hidden = false;
+    if (save && name !== (r.displayName || r.agent)) {
+      try {
+        await api("POST", agentPath(r, "name"), {
+          name: name && name !== r.agent ? name : null,
+        });
+      } catch (err) {
+        window.denShell?.errorToast?.(err);
+      }
+      await refresh();
+    }
+    paintLayout();
+  };
+  input.addEventListener("keydown", (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      void finish(true);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      void finish(false);
+    }
+  });
+  input.addEventListener("blur", () => void finish(true));
+  // A click in the input is the input's, not the tab's.
+  input.addEventListener("click", (e) => e.stopPropagation());
 }
 
 function paintBar(p) {
   const r = rowOf(p.id);
   const bar = p.el.querySelector(".bar2");
   const name = r ? paneName(r) : p.label || p.id;
+  // AG-4b: the session's name last, when it says more.
   const where = r
-    ? [r.workspace, r.runtime].filter(Boolean).join(" · ")
+    ? [r.workspace, r.runtime, sessionExtra(r)].filter(Boolean).join(" · ")
     : p.workspace || "";
   const tone = r ? stateTone(r) : p.exited ? "off" : "pending";
   const stop =
@@ -524,6 +848,9 @@ function paintBar(p) {
       ? `<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>`;
+  // 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";
 }
 
 function send(p, obj) {
@@ -695,11 +1022,111 @@ async function connect(p) {
   };
 }
 
-async function openPane(id) {
+// ── links and keys in a pane (AG-4b) ───────────────────────────────────
+
+/** What Shift+Enter sends to a pane's session (a plain session: Enter). */
+function softNewlineOf(id) {
+  const seq = rowOf(id)?.softNewline;
+  return typeof seq === "string" && seq ? seq : "\r";
+}
+
+/**
+ * A URL or an OSC 8 link clicked: with ⌘ (Ctrl elsewhere), an http or
+ * https one opens in a new tab, noopener. A plain click opens nothing
+ * (it selects); every other scheme (javascript:, data:, file:) nothing.
+ */
+function openWeb(e, uri) {
+  if (!linkModifier(e) || !isWebUrl(uri)) return;
+  e?.preventDefault?.();
+  window.open(uri, "_blank", "noopener");
+}
+
+/** The most paths asked about at once (agent-paths.ts MAX_PATHS). */
+const MAX_ASK = 64;
+
+/**
+ * Which of `paths` are links for agent row `r`: absolute path or null,
+ * each asked once per pane (GET …/agents/<id>/paths: the server resolves
+ * them against its cwd, inside its workspace; stat only).
+ */
+async function pathLinks(p, r, paths) {
+  p.paths ??= new Map();
+  const ask = [...new Set(paths)].filter((x) => !p.paths.has(x));
+  for (let i = 0; i < ask.length; i += MAX_ASK) {
+    const batch = ask.slice(i, i + MAX_ASK);
+    const q = batch.map((x) => `p=${encodeURIComponent(x)}`).join("&");
+    const got = fetch(`${agentPath(r, "paths")}?${q}`, {
+      headers: { accept: "json" },
+    })
+      .then((res) => (res.ok ? res.json() : null))
+      .catch(() => null);
+    for (const x of batch)
+      p.paths.set(
+        x,
+        got.then((b) => {
+          const v = b?.paths?.[x];
+          return typeof v === "string" ? v : null;
+        }),
+      );
+  }
+  const out = new Map();
+  for (const x of paths) out.set(x, await p.paths.get(x));
+  return out;
+}
+
+/** xterm asks for line `y`'s links (1-based): its paths that exist. */
+async function providePathLinks(p, y, done) {
+  try {
+    const r = rowOf(p.id);
+    const line = p.term?.buffer.active.getLine(y - 1)?.translateToString(true);
+    if (r?.kind !== "agent" || !r.agent || !line) return done(undefined);
+    const found = findPaths(line);
+    if (!found.length) return done(undefined);
+    const abs = await pathLinks(
+      p,
+      r,
+      found.map((m) => m.path),
+    );
+    const links = found
+      .filter((m) => abs.get(m.path))
+      .map((m) => ({
+        text: m.text,
+        range: { start: { x: m.start + 1, y }, end: { x: m.end, y } },
+        decorations: { pointerCursor: true, underline: true },
+        activate: (e) => void openPath(e, abs.get(m.path), m.line, m.col),
+      }));
+    done(links.length ? links : undefined);
+  } catch {
+    done(undefined);
+  }
+}
+
+/**
+ * A path link clicked: with ⌘ (Ctrl elsewhere), the editor in Settings
+ * (editor_open) at the line, by its URL scheme; none copies the path.
+ */
+async function openPath(e, abs, line, col) {
+  if (!linkModifier(e) || !abs) return;
+  e?.preventDefault?.();
+  const url = editorUrl(st.editorOpen, abs, line, col);
+  if (url) {
+    window.open(url, "_self");
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(abs);
+    window.denShell?.toast?.(t("ag.copied"));
+  } catch (err) {
+    window.denShell?.errorToast?.(err);
+  }
+}
+
+async function openPane(id, { front = true } = {}) {
   if (st.panes.has(id)) {
     st.panes.get(id).term?.focus();
     return;
   }
+  if (front) st.cur = id;
   if (st.open.length >= MAX_PANES) {
     const oldest = st.open[0];
     window.denShell?.toast?.(
@@ -710,7 +1137,10 @@ async function openPane(id) {
   const el = document.createElement("section");
   el.className = "pane";
   el.dataset.id = id;
-  el.innerHTML = `<div class="bar2"></div><div class="term"></div>`;
+  // xterm opens in .tbox, the .term's content box: the fit measures its
+  // parent's height and width as they are, so the .term's padding must
+  // not be in it (AG-4b: every terminal fits its pane).
+  el.innerHTML = `<div class="bar2"></div><div class="term"><div class="tbox"></div></div>`;
   const p = {
     id,
     el,
@@ -745,18 +1175,50 @@ async function openPane(id) {
     scrollback: 5000,
     theme: termTheme(),
     allowProposedApi: false,
+    // OSC 8 links (AG-4b): ⌘/Ctrl-click, http and https only, no confirm.
+    linkHandler: {
+      activate: (e, uri) => void openWeb(e, uri),
+      allowNonHttpProtocols: false,
+    },
   });
   const fit = new lib.FitAddon();
   term.loadAddon(fit);
-  term.open(el.querySelector(".term"));
+  // Plain URLs (AG-4b): the same rule as OSC 8.
+  term.loadAddon(new lib.WebLinksAddon((e, uri) => void openWeb(e, uri)));
+  term.open(el.querySelector(".term .tbox"));
   p.term = term;
   p.fit = fit;
   const enc = new TextEncoder();
-  term.onData((d) => {
+  const typeIn = (d) => {
     if (p.sock?.readyState !== WebSocket.OPEN) return;
     // The one typing wins: another viewer resized the PTY since.
     if (outOfStep(p)) claimSize(p);
     p.sock.send(enc.encode(d));
+  };
+  term.onData(typeIn);
+  // AG-4b: Shift+Enter is the runtime's soft newline, never a CR; the
+  // layout keys (⌃⇧1-3) are the page's, never the agent's.
+  term.attachCustomKeyEventHandler((e) => {
+    if (e.ctrlKey && e.shiftKey && /^Digit[123]$/.test(e.code ?? ""))
+      return false;
+    if (
+      e.key === "Enter" &&
+      e.shiftKey &&
+      !e.ctrlKey &&
+      !e.altKey &&
+      !e.metaKey
+    ) {
+      if (e.isComposing) return true;
+      e.preventDefault();
+      if (softNewlineKey(e)) typeIn(softNewlineOf(id));
+      return false;
+    }
+    return true;
+  });
+  // File paths (AG-4b): links only where the server says they exist in
+  // the agent's workspace.
+  term.registerLinkProvider({
+    provideLinks: (y, done) => void providePathLinks(p, y, done),
   });
   term.onResize(() => sendSize(p));
   // Focused (a click, the window coming back): this pane's size.
@@ -777,6 +1239,8 @@ function closePane(id, { quiet = false } = {}) {
   p.closed = true;
   st.panes.delete(id);
   st.open = st.open.filter((x) => x !== id);
+  st.side.delete(id);
+  if (st.cur === id) st.cur = st.open.at(-1) ?? null;
   try {
     p.sock?.close(1000, "closed");
   } catch {
@@ -1131,6 +1595,16 @@ function translateStatic(root) {
   set("#ag-r-t", "ag.runtime");
   set("#ag-cancel", "ag.cancel");
   set("#ag-go", "ag.go");
+  for (const b of root.querySelectorAll("[data-layouts] button")) {
+    b.textContent = t(`ag.l.${b.dataset.layout}`);
+    b.title = t("ag.l.tip", {
+      name: b.textContent,
+      key: `⌃⇧${LAYOUTS.indexOf(b.dataset.layout) + 1}`,
+    });
+  }
+  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*/, "");
 }
@@ -1143,6 +1617,7 @@ export async function mountAgentsPage(root) {
   if (window.denShell?.apiOff?.()) return;
   st.open = [];
   const wanted = openFromUrl(location.search);
+  const linked = layoutFromUrl(location.search);
   const startAsked = new URLSearchParams(location.search).get("start") === "1";
 
   root.querySelector("#agl").addEventListener("click", (e) => {
@@ -1166,14 +1641,29 @@ export async function mountAgentsPage(root) {
     const b = e.target.closest(".agr");
     if (!b) return;
     if (b.getAttribute("aria-disabled") === "true") return;
-    const id = b.dataset.id;
-    if (st.panes.has(id)) st.panes.get(id).term?.focus();
-    else void openPane(id);
+    void pick(b.dataset.id, e.shiftKey || e.metaKey || e.ctrlKey);
+  });
+  root.querySelector("[data-layouts]")?.addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-layout]");
+    if (b) setLayout(b.dataset.layout);
+  });
+  root.querySelector("#agr").addEventListener("dblclick", (e) => {
+    const tab = e.target.closest('[role="tab"]');
+    if (tab) renameTab(tab);
   });
   root.querySelector("#agr").addEventListener("click", (e) => {
+    const tab = e.target.closest('[role="tab"]');
+    if (tab) {
+      if (st.cur === tab.dataset.id) return;
+      st.cur = tab.dataset.id;
+      paintLayout();
+      paintList();
+      tab.focus();
+      return;
+    }
     const b = e.target.closest("button[data-act]");
     if (!b) return;
-    const id = b.closest(".pane")?.dataset.id;
+    const id = b.closest(".pane")?.dataset.id ?? b.dataset.id;
     const p = id && st.panes.get(id);
     if (!p) return;
     if (b.dataset.act === "close") closePane(id);
@@ -1217,6 +1707,33 @@ export async function mountAgentsPage(root) {
     attributeFilter: ["data-mode", "data-theme", "class"],
   });
   if (!st.docWired) wireDocument();
+  // ⌃⇧1 / ⌃⇧2 / ⌃⇧3 on every OS: the layouts, even from a terminal (whose
+  // key handler never passes them to the agent). ⌘1-9 and Ctrl+1-9 are
+  // the browser's (its tabs): the page leaves them alone.
+  document.addEventListener(
+    "keydown",
+    (e) => {
+      const i = layoutKeyIndex(e);
+      if (i < 0 || st.root.querySelector("#ag-dlg")?.open) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setLayout(LAYOUTS[i]);
+    },
+    true,
+  );
+  // ⌘K: "Layout: Focus", "Layout: Tabs", "Layout: Tile".
+  for (const l of LAYOUTS)
+    window.denShell?.registerCommand?.({
+      id: `agents-layout:${l}`,
+      label: () => t("ag.pal.layout", { name: t(`ag.l.${l}`) }),
+      keywords: ["layout", "agents", l, t(`ag.l.${l}`)],
+      run: () => setLayout(l),
+    });
+  // The phone width comes and goes: Tabs there, the person's layout here.
+  window.matchMedia?.(PHONE).addEventListener?.("change", () => {
+    paintLayout();
+    paintList();
+  });
   window.addEventListener("pagehide", () => {
     for (const p of st.panes.values()) {
       p.closed = true;
@@ -1228,7 +1745,9 @@ export async function mountAgentsPage(root) {
     }
   });
 
-  await loadScope();
+  const [, saved] = await Promise.all([loadScope(), savedLayout()]);
+  // A link's &layout= wins for this page; else the person's.
+  st.layout = linked ?? saved;
   await refresh();
   paintLayout();
   // An id the list no longer has (removed, another distribution's) is