kaizen-agent 1.42.2 → 1.43.1

package/web/board/terms.ts

@@ -0,0 +1,279 @@
+import { store } from "./store.ts";
+import { $, html, ico } from "./dom.ts";
+import { load } from "./api.ts";
+import { termLoad } from "./agent-term.ts";
+import { open } from "./panel.ts";
+import { resume } from "./approvals.ts";
+
+// ---- the Terminal page: every in-card agent session the board knows, Ideas to Done, tiled.
+// A tile is one more kzTerm mount on /pty beside the card panel's (attachPty takes many
+// listeners). Mounts outlive redraws: a /state tick moves tiles around, it never reconnects.
+// Layout is per browser in kz-terms: tile order, hidden tiles, the maximised one, and the
+// split sizes per grid shape.
+// ponytail: a √n grid with draggable borders, not an i3-style split tree; add one if a grid falls short.
+// mode: grid (√n), cols (side by side) or rows (stacked, so borders drag up and down).
+type Lay = { mode: string; order: string[]; hidden: string[]; max: string | null; sizes: Record<string, { c: number[]; r: number[] }> };
+const MODES = [["grid", "Grid"], ["cols", "Side by side"], ["rows", "Stacked"]];
+const GAP = 6;
+let lay: Lay = { mode: "grid", order: [], hidden: [], max: null, sizes: {} };
+try {
+  lay = { ...lay, ...JSON.parse(localStorage.getItem("kz-terms") || "{}") };
+} catch (e) {}
+const save = () => {
+  lay.order = lay.order.slice(-100);
+  lay.hidden = lay.hidden.slice(-100);
+  try {
+    localStorage.setItem("kz-terms", JSON.stringify(lay));
+  } catch (e) {}
+};
+// key -> its tile and the function that unmounts its terminal.
+const tiles = new Map<string, { el: HTMLElement; off: (() => void) | null }>();
+let showing = false;
+
+// The header: run name - project name. A run's name is its id without the date, as card chips name runs.
+const nameOf = (c) =>
+  c.kind === "run"
+    ? String(c.id || c.text).replace(/^\d{4}-\d\d-\d\d-/, "").replace(/-/g, " ")
+    : String(c.text).split("\n")[0].slice(0, 80);
+const projOf = (c) => String(c.where || "").split(/[\\/]/).filter(Boolean).pop() || c.where || "";
+// One card per session; the newest card wins a shared key.
+function sessions() {
+  const m = new Map();
+  for (const c of store.S.cards) if (c.pty && !c.archived) m.set(c.pty.key, c);
+  return m;
+}
+
+export function termsStop() {
+  showing = false;
+  for (const t of tiles.values()) t.off?.();
+  tiles.clear();
+  $("terms").innerHTML = "";
+}
+
+export function openTerms() {
+  showing = true;
+  // A /state tick mid-drag would rebuild the handle being dragged.
+  if (document.body.classList.contains("tdrag")) return;
+  const box = $("terms"),
+    all = sessions();
+  for (const [k, t] of tiles)
+    if (!all.has(k) || lay.hidden.includes(k)) {
+      t.off?.();
+      t.el.remove();
+      tiles.delete(k);
+    }
+  const rank = (k) => (lay.order.includes(k) ? lay.order.indexOf(k) : 1e9);
+  // Live tiles first, ended ones after; each in the saved order.
+  const ended = (k) => (all.get(k).pty.alive ? 0 : 1);
+  const keys = [...all.keys()].filter((k) => !lay.hidden.includes(k)).sort((a, b) => ended(a) - ended(b) || rank(a) - rank(b));
+  for (const k of keys) if (!lay.order.includes(k)) lay.order.push(k);
+  if (lay.max && !keys.includes(lay.max)) lay.max = null;
+  let grid = box.querySelector<HTMLElement>(".tgrid"),
+    bar = box.querySelector<HTMLElement>(".tbar");
+  if (!grid) {
+    box.innerHTML = `<div class="tbar"></div><div class="tgrid"></div>`;
+    grid = box.querySelector(".tgrid")!;
+    bar = box.querySelector(".tbar")!;
+  }
+  // An ended session closed with × has nothing to come back to: no chip for it.
+  const hid = [...all.keys()].filter((k) => lay.hidden.includes(k) && all.get(k).pty.alive);
+  bar!.innerHTML = html`<span class="bar" role="group" aria-label="Layout">${MODES.map(([v, l]) => html`<button data-mode="${v}" class="${lay.mode === v ? "on" : ""}" aria-pressed="${String(lay.mode === v)}">${l}</button>`)}</span>${hid.length ? html`<span class="dim">Hidden</span>${hid.map((k) => html`<button class="chip" data-show="${k}" title="Show this terminal">${ico("plus")}${nameOf(all.get(k))} - ${projOf(all.get(k))}</button>`)}` : ""}`.s;
+  bar!.querySelectorAll<HTMLElement>("[data-mode]").forEach(
+    (b) =>
+      (b.onclick = () => {
+        lay.mode = b.dataset.mode!;
+        lay.max = null;
+        save();
+        openTerms();
+      }),
+  );
+  bar!.querySelectorAll<HTMLElement>("[data-show]").forEach(
+    (b) =>
+      (b.onclick = () => {
+        lay.hidden = lay.hidden.filter((k) => k !== b.dataset.show);
+        save();
+        openTerms();
+      }),
+  );
+  grid.querySelector(".tempty")?.remove();
+  if (!keys.length) {
+    grid.style.cssText = "";
+    grid.querySelectorAll(".tsplit").forEach((s) => s.remove());
+    grid.insertAdjacentHTML(
+      "beforeend",
+      html`<div class="empty tempty"><div class="mascot"></div><b>${hid.length ? "Every terminal is hidden" : "No terminals running"}</b><p>Runs started with the agent in its card show here, from Ideas to Done.</p></div>`.s,
+    );
+    return;
+  }
+  for (const k of keys) {
+    const c = all.get(k);
+    let t = tiles.get(k);
+    if (!t) {
+      const el = document.createElement("section");
+      el.className = "tile";
+      el.dataset.k = k;
+      el.innerHTML = `<header draggable="true"></header><div class="term" aria-label="Agent terminal"></div>`;
+      t = { el, off: null };
+      tiles.set(k, t);
+      mount(k, t);
+      wire(el);
+    }
+    const st = !c.pty.alive ? "ended" : c.pty.asking ? "asking" : "running",
+      off = st === "ended";
+    const hd = t.el.querySelector("header")!;
+    hd.title = (c.kind === "run" ? c.id : c.text) + " · " + c.where;
+    // An ended run can be resumed from here; an idea whose agent ended has no run to resume.
+    hd.innerHTML = html`<span class="tdot ${st}" role="img" title="${st}" aria-label="${st}"></span><b>${nameOf(c)} - ${projOf(c)}</b>${off ? html`<span class="tend">ended</span>` : ""}<span class="sp"></span>${off && c.kind === "run" ? html`<button class="btn sm" data-a="resume" title="Continue this run's agent">Resume</button>` : ""}<button class="ib sm" data-a="card" title="Open card" aria-label="Open card">${ico("open")}</button><button class="ib sm" data-a="max" title="${lay.max === k ? "Restore" : "Maximise"}" aria-label="${lay.max === k ? "Restore" : "Maximise"}">${ico(lay.max === k ? "min" : "max")}</button><button class="ib sm" data-a="hide" title="${off ? "Close" : "Hide"}" aria-label="${off ? "Close" : "Hide"}">${ico("close")}</button>`.s;
+    t.el.classList.toggle("ended", off);
+    t.el.classList.toggle("off", !!lay.max && lay.max !== k);
+    t.el.style.gridColumn = "";
+    grid.append(t.el); // in order
+  }
+  // Grid is √n, the last tile spanning what its row leaves empty; side by side is one row, stacked one column.
+  const n = lay.max ? 1 : keys.length,
+    cols = lay.mode === "cols" ? n : lay.mode === "rows" ? 1 : Math.ceil(Math.sqrt(n)),
+    rows = Math.ceil(n / cols);
+  // The column where the last row's tile starts spanning; borders right of it are not inner ones there.
+  let spanFrom = cols;
+  if (!lay.max && cols * rows > n) {
+    tiles.get(keys[keys.length - 1])!.el.style.gridColumn = `span ${cols * rows - n + 1}`;
+    spanFrom = n - (rows - 1) * cols - 1;
+  }
+  const shape = `${lay.mode}:${cols}x${rows}`,
+    sz = lay.sizes[shape];
+  const c = sz?.c?.length === cols ? sz.c : Array(cols).fill(1),
+    r = sz?.r?.length === rows ? sz.r : Array(rows).fill(1);
+  layout(grid, c, r, shape, spanFrom);
+}
+
+function mount(k, t) {
+  termLoad()
+    .then((m) => {
+      if (tiles.get(k) !== t) return;
+      t.off = m(t.el.querySelector(".term"), k, () => load(true));
+    })
+    .catch(() => (t.el.querySelector(".term")!.textContent = "The terminal could not load."));
+}
+
+function wire(el: HTMLElement) {
+  const k = el.dataset.k!;
+  el.querySelector("header")!.onclick = (e) => {
+    const a = (e.target as HTMLElement).closest<HTMLElement>("[data-a]")?.dataset.a;
+    if (a === "max") lay.max = lay.max === k ? null : k;
+    else if (a === "hide") {
+      lay.hidden.push(k);
+      if (lay.max === k) lay.max = null;
+    } else if (a === "card") {
+      const c = sessions().get(k);
+      if (c) open(c);
+      return;
+    } else if (a === "resume") {
+      const c = sessions().get(k);
+      // resume() asks the board to open the card on its new session; here the new tile shows it.
+      if (c) resume(c, (e.target as HTMLElement).closest("button")).then(() => (store.wantTerm = null));
+      return;
+    } else return;
+    save();
+    openTerms();
+  };
+  el.querySelector("header")!.ondblclick = (e) => {
+    if ((e.target as HTMLElement).closest("button")) return;
+    lay.max = lay.max === k ? null : k;
+    save();
+    openTerms();
+  };
+  // Drag a header onto another tile: the two swap places.
+  el.querySelector("header")!.ondragstart = (e) => {
+    e.dataTransfer!.setData("text/kz-term", k);
+    e.dataTransfer!.effectAllowed = "move";
+  };
+  el.ondragover = (e) => {
+    if (!e.dataTransfer!.types.includes("text/kz-term")) return;
+    e.preventDefault();
+    el.classList.add("drop");
+  };
+  el.ondragleave = () => el.classList.remove("drop");
+  el.ondrop = (e) => {
+    el.classList.remove("drop");
+    const from = e.dataTransfer!.getData("text/kz-term");
+    if (!from || from === k) return;
+    e.preventDefault();
+    const i = lay.order.indexOf(from),
+      j = lay.order.indexOf(k);
+    if (i < 0 || j < 0) return;
+    [lay.order[i], lay.order[j]] = [lay.order[j], lay.order[i]];
+    save();
+    openTerms();
+  };
+}
+
+// Track sizes in fr, and a handle on each inner border. A handle's centre is placed in CSS:
+// the tracks before it share (100% - gaps) by their fr, plus the gaps before it. A column
+// handle stops above the last row where that row's spanning tile covers the border.
+const at = (tr: number[], i: number) => {
+  const F = tr.reduce((a, b) => a + b, 0),
+    S = tr.slice(0, i + 1).reduce((a, b) => a + b, 0);
+  return `calc((100% - ${(tr.length - 1) * GAP}px) * ${S / F} + ${i * GAP + GAP / 2}px)`;
+};
+function layout(grid: HTMLElement, c: number[], r: number[], shape: string, spanFrom: number) {
+  grid.querySelectorAll(".tsplit").forEach((s) => s.remove());
+  const place = () => {
+    grid.style.gridTemplateColumns = c.map((x) => x + "fr").join(" ");
+    grid.style.gridTemplateRows = r.map((x) => x + "fr").join(" ");
+    grid.querySelectorAll<HTMLElement>(".tsplit").forEach((h) => {
+      const i = +h.dataset.i!;
+      if (h.dataset.axis === "r") return void (h.style.top = at(r, i));
+      h.style.left = at(c, i);
+      h.style.bottom = i >= spanFrom ? `calc(100% - ${at(r, r.length - 2)} + ${GAP / 2}px)` : "0px";
+    });
+  };
+  if (!lay.max)
+    for (const [axis, tr] of [["c", c], ["r", r]] as const)
+      for (let i = 0; i < tr.length - 1; i++) {
+        const h = document.createElement("div");
+        h.className = "tsplit " + axis;
+        h.dataset.axis = axis;
+        h.dataset.i = String(i);
+        h.setAttribute("role", "separator");
+        h.setAttribute("aria-orientation", axis === "c" ? "vertical" : "horizontal");
+        h.title = "Drag to resize, double-click to even out";
+        drag(h, grid, axis, tr, i, place, () => {
+          lay.sizes[shape] = { c: [...c], r: [...r] };
+          save();
+        });
+        grid.append(h);
+      }
+  place();
+}
+
+function drag(h: HTMLElement, grid: HTMLElement, axis: "c" | "r", tr: number[], i: number, place: () => void, keep: () => void) {
+  h.ondblclick = () => {
+    tr.fill(1);
+    keep();
+    place();
+  };
+  h.onpointerdown = (e) => {
+    e.preventDefault();
+    h.setPointerCapture(e.pointerId);
+    document.body.classList.add("tdrag");
+    const F = tr.reduce((a, b) => a + b, 0),
+      span = (axis === "c" ? grid.clientWidth : grid.clientHeight) - (tr.length - 1) * GAP,
+      min = F * 0.1,
+      from = axis === "c" ? e.clientX : e.clientY,
+      a = tr[i],
+      b = tr[i + 1];
+    h.onpointermove = (m) => {
+      const d = Math.max(min - a, Math.min(b - min, (((axis === "c" ? m.clientX : m.clientY) - from) / span) * F));
+      tr[i] = a + d;
+      tr[i + 1] = b - d;
+      place();
+    };
+    h.onpointerup = h.onpointercancel = () => {
+      h.onpointermove = h.onpointerup = h.onpointercancel = null;
+      document.body.classList.remove("tdrag");
+      keep();
+    };
+  };
+}
+
+export const termsShowing = () => showing;

package/web/board/update.ts

@@ -1,5 +1,5 @@
 import { post } from "./api.ts";
-import { $, esc } from "./dom.ts";
+import { $, html } from "./dom.ts";
 import { openSettings } from "./settings.ts";
 import { view } from "./views.ts";
 
@@ -21,16 +21,16 @@ export function updBar() {
   const d = document.createElement("div");
   d.className = `updbar${upd ? "" : " quiet"}`;
   if (!upd) {
-    d.innerHTML = `<span id="upd-msg" aria-live="polite">${ver ? `kaizen ${esc(ver.version)}` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
+    d.innerHTML = html`<span id="upd-msg" aria-live="polite">${ver ? `kaizen ${ver.version}` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
   } else {
     // What's new: each newer release's one-line title, shown on hover, focus or click.
-    const notes = (upd.notes || []).map((n) => `<li><b>${esc(n.v)}</b> ${esc(n.text)}</li>`).join("");
-    const news = notes
-      ? `<span class="updnew"><button class="btn" aria-describedby="upd-notes">What's new</button><span class="updpop" id="upd-notes" role="tooltip"><ul>${notes}</ul><a href="https://github.com/hfadhlullah/kaizen/releases" target="_blank" rel="noopener">All release notes</a></span></span>`
+    const notes = (upd.notes || []).map((n) => html`<li><b>${n.v}</b> ${n.text}</li>`);
+    const news = notes.length
+      ? html`<span class="updnew"><button class="btn" aria-describedby="upd-notes">What's new</button><span class="updpop" id="upd-notes" role="tooltip"><ul>${notes}</ul><a href="https://github.com/hfadhlullah/kaizen/releases" target="_blank" rel="noopener">All release notes</a></span></span>`
       : "";
-    d.innerHTML = `<span>kaizen <b>${esc(upd.latest)}</b> is available. You are running ${esc(upd.version)}.</span><span class="updact">${news}<button class="btn" id="upd-chk">Check for updates</button><button class="btn pri" id="upd-go">Update kaizen</button></span>`;
+    d.innerHTML = html`<span>kaizen <b>${upd.latest}</b> is available. You are running ${upd.version}.</span><span class="updact">${news}<button class="btn" id="upd-chk">Check for updates</button><button class="btn pri" id="upd-go">Update kaizen</button></span>`;
   }
-  if (ver && ver.failed) d.insertAdjacentHTML("afterbegin", `<span class="updfail" role="alert">Last update failed: ${esc(ver.failed)}</span>`);
+  if (ver && ver.failed) d.insertAdjacentHTML("afterbegin", html`<span class="updfail" role="alert">Last update failed: ${ver.failed}</span>`);
   $("pbody").prepend(d);
   const check = $("upd-chk");
   check.onclick = async () => {

package/web/board/views.ts

@@ -3,8 +3,9 @@ import { $ } from "./dom.ts";
 import { openSources } from "./icebox.ts";
 import { close } from "./panel.ts";
 import { openSettings } from "./settings.ts";
+import { openTerms, termsStop } from "./terms.ts";
 
-// ---- views: the board, or Settings and the Icebox as pages in the docked panel, each with its own address
+// ---- views: the board, Settings and the Icebox as pages in the docked panel, or the Terminal page; each with its own address
 export let view = "board";
 export const markView = (v) => {
   document
@@ -13,28 +14,41 @@ export const markView = (v) => {
       a.dataset.view === v ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current"),
     );
   // The Icebox is titled in the header, top left, like the board.
-  document.querySelector(".hdr h1").textContent = v === "sources" ? "Icebox" : "Board";
+  document.querySelector(".hdr h1").textContent = v === "sources" ? "Icebox" : v === "terminal" ? "Terminal" : "Board";
 };
 export function go(v, push) {
   store.pageGen++;
   if (v === "icebox") v = "sources";
-  if (!["settings", "sources"].includes(v)) v = "board";
+  if (!["settings", "sources", "terminal"].includes(v)) v = "board";
   const was = view;
   view = v;
   markView(v);
   document.body.classList.toggle("paged", v !== "board");
   document.body.classList.toggle("ice", v === "sources");
+  document.body.classList.toggle("termv", v === "terminal");
   if (push && v !== was)
     history.pushState(null, "", v === "board" ? location.pathname : "?view=" + (v === "sources" ? "icebox" : v));
   const p = $("panel");
-  if (v === "board") {
-    if (was === "board") return;
+  if (v === "terminal") openTerms();
+  else termsStop();
+  // The Terminal page is the board's own area, not the docked panel: the panel closes as on the board.
+  if (v === "board" || v === "terminal") {
+    if (was === "board" || was === "terminal") {
+      if (v === "terminal" && was === "board") {
+        view = "board";
+        close();
+        view = v;
+      }
+      return;
+    }
     // Undocked without the slide: it was a page, not a drawer leaving.
     p.style.transition = "none";
     p.classList.remove("open", "docked");
     p.offsetWidth;
     p.style.transition = "";
+    view = "board";
     close();
+    view = v;
     return;
   }
   p.classList.add("docked");

package/web/board.html

@@ -144,6 +144,18 @@ section h2{margin:0;font-size:13px;color:var(--ink);font-weight:500;display:flex
 section h2 i{font-style:normal;font-weight:400;font-size:12px;color:var(--dim)}
 section h2 i:empty{display:none}
 section h2 .ib{margin-left:auto}
+/* Ideas column: its title is two icon tabs, Ideas | Backlog; on Backlog a severity filter icon */
+.itabs{display:flex;align-items:center;gap:2px}
+.itabs [role=tab]{min-height:26px;padding:0 8px;border:0;border-radius:13px;background:none;color:var(--dim);font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
+.itabs [role=tab] svg{width:14px;height:14px;stroke-width:1.7}
+.itabs [role=tab][aria-selected=true]{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--dim) 14%,transparent)}
+.itabs i{font-style:normal}
+.itabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+section h2 .sevf{margin-left:auto}section h2 .sevf~.ib{margin-left:0}
+section h2 .sevf.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
+.sev-pop{top:30px;right:0;min-width:180px}
+.sev-pop button i{font-style:normal;color:var(--dim);margin-left:auto;background:none;padding:0}
+.sev-pop button[aria-checked=true]{color:var(--accent)}
 ul{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-direction:column;gap:6px}
 
 /* card, Linear grammar in our palette
@@ -217,7 +229,8 @@ section li.hint{display:block;padding:14px;border:1px dashed var(--line);border-
 .inl textarea,.notes textarea{min-height:72px;resize:vertical}
 .notes textarea{min-height:160px}
 .inl input::placeholder,.inl textarea::placeholder,.notes textarea::placeholder{color:var(--dim)}
-.inl .row,.notes .row{display:flex;gap:6px;justify-content:flex-end;align-items:center}
+.inl .row,.notes .row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
+.split{position:relative;display:inline-flex}.split>#ns{border-top-right-radius:0;border-bottom-right-radius:0}.split>#nm{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:color-mix(in srgb,var(--on-accent) 35%,var(--accent));padding:0 7px;display:inline-flex;align-items:center}.split>#nm svg{width:14px;height:14px;stroke-width:2}.split .menu-pop{right:0;top:calc(100% + 4px);z-index:9;white-space:nowrap;min-width:0;padding:4px}.split .menu-pop button{padding:5px 8px;font-size:12px;gap:6px}.split .menu-pop svg{width:13px;height:13px}.split .menu-pop button:focus-visible{outline-width:1px;outline-offset:-1px}.split .menu-pop[hidden]{display:none}
 .inl .row .mic{margin-right:0}.inl .row #newpick{margin-right:auto}.inl .row .btn{white-space:nowrap}.inl .att{font-size:12px;color:var(--dim)}.inl .att{font-size:12px;color:var(--dim)}.inl .att:empty{display:none}
 dialog.kz{border:0;padding:0;background:none;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:visible;color:var(--ink)}dialog.kz::backdrop{background:rgb(0 0 0/.45)}dialog.kz .row input{flex:1;min-width:0}dialog.kz #ndc{align-self:flex-start}dialog.viewer{width:min(1100px,calc(100vw - 32px));height:calc(100dvh - 32px);background:var(--bg);border-radius:var(--r);display:none;flex-direction:column;overflow:hidden}dialog.viewer[open]{display:flex}.viewer-hd{display:flex;gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}.viewer-hd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}dialog.viewer img{flex:1;min-height:0;width:100%;object-fit:contain}dialog.viewer iframe{flex:1;border:0;width:100%;background:#fff}
 .inl .run-actions{display:grid;gap:8px}.inl .run-actions .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.inl .run-actions .pri{grid-column:1/-1}
@@ -256,6 +269,22 @@ aside.open{transform:none;visibility:visible}
 body.paged #board,body.paged .ftr,body.paged .scrim,body.paged #bq{display:none}
 /* The Icebox keeps the project bar with its own title, without New idea or the panel's header; Settings has none */
 body.paged:not(.ice) .hdr,body.ice aside.docked>header{display:none}body.ice #newtop{visibility:hidden}
+/* The Terminal page: the project bar stays (it picks whose terminals show), the board gives way to the tiles */
+#terms{display:none}body.termv.paged .hdr{display:flex}body.termv #newtop,body.termv #fbtn{display:none!important}
+body.termv #terms{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 20px 14px 28px}
+.tbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}.tbar .bar{margin-right:8px}.tbar .bar button{padding:0 10px;font-size:12px}.tbar .chip{cursor:pointer;background:none;border:0;font:inherit;font-size:11px}.tbar .chip:hover{color:var(--ink)}.tbar svg{width:12px;height:12px}
+.tgrid{position:relative;flex:1;min-height:0;display:grid;gap:6px}
+.tile{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);overflow:hidden}.tile.off{display:none}.tile.drop{outline:2px solid var(--accent);outline-offset:-2px}
+.tile header{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 4px 0 10px;border-bottom:1px solid var(--line);background:var(--bg-2);cursor:grab;user-select:none}
+.tile header b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}.tile header .sp{flex:1}
+.tile.ended .term{opacity:.6}.tend{flex:none;padding:0 6px;border-radius:9px;font-size:11px;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}.tile header .btn.sm{height:22px;padding:0 8px;font-size:11px}
+.tdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--run)}.tdot.asking{background:var(--warn)}.tdot.ended{background:var(--dim);opacity:.6}
+.tile .term{flex:1;min-height:0}.tile .term .xterm{height:100%;padding:4px}.tile .term .xterm-viewport{background:transparent!important}
+.tsplit{position:absolute;z-index:2;touch-action:none}.tsplit.c{top:0;width:10px;margin-left:-5px;cursor:col-resize}.tsplit.r{left:0;right:0;height:10px;margin-top:-5px;cursor:row-resize}.tsplit:hover,.tdrag .tsplit:active{background:color-mix(in srgb,var(--accent) 35%,transparent)}
+body.tdrag{user-select:none}body.tdrag .tile{pointer-events:none}
+@media(max-width:900px){body.termv #terms{padding-inline:16px}}
+/* A phone has no room for a grid: tiles stack, each most of a screen tall, and the splits go */
+@media(max-width:640px){.tbar .bar{display:none}.tgrid{display:flex;flex-direction:column;overflow:auto}.tile{flex:none;height:70vh}.tile.off{display:none}.tsplit{display:none}}
 aside.docked{position:static;z-index:auto;flex:1;min-height:0;width:auto;transform:none;visibility:visible;transition:none;box-shadow:none;border:0;background:none}
 aside.docked>header,aside.docked>.body{padding-inline:28px}
 aside.docked>header{border-bottom:0;padding-top:28px;padding-bottom:12px}
@@ -311,6 +340,7 @@ aside .foot .more .menu-pop{left:0;right:auto;top:auto;bottom:calc(100% + 4px)}.
 .srow label{font-weight:400;font-size:15px;align-self:center}
 .srow>:nth-child(2){grid-column:2;grid-row:1;align-self:center;justify-self:end}
 .srow .hint{grid-column:1/-1;grid-row:2;margin:0;font-size:12px;color:var(--dim);line-height:1.45;max-width:46ch}
+.srow.off>label,.srow.off>:nth-child(2){opacity:.5}
 .srow input.sel,.srow select.sel{width:170px;border:0;background-color:transparent;text-align:right;color:var(--dim);box-shadow:none}
 .srow select.sel{width:auto;text-align-last:right}
 .fpick{display:inline-flex;gap:6px;align-items:center}
@@ -326,6 +356,9 @@ aside .foot .more .menu-pop{left:0;right:auto;top:auto;bottom:calc(100% + 4px)}.
 /* a small number: one segment per value */
 .bar{display:inline-flex;padding:2px;gap:2px;background:var(--hover);border-radius:var(--r-s)}
 .bar button{min-width:32px;height:28px;border-radius:6px;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
+.step{display:inline-flex;align-items:center;padding:2px;gap:2px;background:var(--hover);border-radius:var(--r-s)}
+.step button{width:28px;height:28px;border-radius:6px;font-size:16px;color:var(--dim)}.step button:hover{background:var(--bg-2);color:var(--ink)}.step button:focus-visible{outline-offset:-2px;outline-color:var(--ink)}
+.step output{min-width:88px;padding:0 6px;text-align:center;font-size:13px;color:var(--ink);white-space:nowrap}
 .bar button:hover{background:var(--hover);color:var(--ink)}.bar button.on,.bar button.on:hover{background:var(--bg-2);box-shadow:var(--shadow-1);font-weight:600}.bar button:focus-visible{outline-offset:-2px;outline-color:var(--ink)}
 #s-preset button{padding:0 12px;text-transform:capitalize}
 .toast{position:fixed;z-index:12;left:28px;bottom:56px;max-width:calc(100% - 56px);background:var(--ink);color:var(--bg);border-radius:var(--r);padding:10px 16px;font-size:13px;box-shadow:var(--shadow-2);opacity:0;transition:opacity .2s;pointer-events:none}
@@ -499,6 +532,8 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
 <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6"/></symbol>
 <symbol id="i-ask" viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"/><path d="M9.8 9.5a2.3 2.3 0 0 1 4.4.8c0 1.5-2.2 2-2.2 3.2M12 16.5h.01"/></symbol>
 <symbol id="i-term" viewBox="0 0 24 24"><path d="M4 17l6-5-6-5M12 19h8"/></symbol>
+<symbol id="i-max" viewBox="0 0 24 24"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></symbol>
+<symbol id="i-min" viewBox="0 0 24 24"><path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"/></symbol>
 <symbol id="i-close" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></symbol>
 <symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/></symbol>
 <symbol id="i-open" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></symbol>
@@ -541,6 +576,7 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
   <a class="it" href="/?view=icebox" data-view="sources" title="Icebox: requests gathered from your sources"><svg><use href="#i-inbox"/></svg><span class="lbl">Icebox</span></a>
   <a class="it" href="/" data-view="board" title="Board"><svg><use href="#i-board"/></svg><span class="lbl">Board</span></a>
   <a class="it" href="/notebook" data-view="notes" title="Notes"><svg><use href="#i-note"/></svg><span class="lbl">Notes</span></a>
+  <a class="it" href="/?view=terminal" data-view="terminal" title="Terminal: every agent running in its card"><svg><use href="#i-term"/></svg><span class="lbl">Terminal</span></a>
   <a class="it" href="/?view=settings" data-view="settings" title="Settings"><svg><use href="#i-gear"/></svg><span class="lbl">Settings</span></a>
   <span class="end"></span>
   <div class="theme" role="group" aria-label="Theme"><button data-t="light" title="Light theme"><svg><use href="#i-sun"/></svg><span class="lbl">Light</span></button><button data-t="dark" title="Dark theme"><svg><use href="#i-moon"/></svg><span class="lbl">Dark</span></button></div>
@@ -567,12 +603,14 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
   <div class="combo" id="combo"><button class="sel" id="proj" aria-label="project" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" id="projpop" hidden><input class="sel" id="projq" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="projs" role="listbox"></div></div></div>
   <div class="combo" id="showc" hidden><button class="sel" id="show" aria-label="Projects shown" aria-haspopup="true" aria-expanded="false"></button><div class="menu-pop" id="showpop" hidden><input class="sel" id="showq" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="shows"></div><div class="pop-ft"><span id="showcount"></span><button id="showall">Show all</button></div></div></div>
   <button class="ib" id="fbtn" aria-label="Filter by status" title="Filter by status" aria-expanded="false" hidden><svg><use href="#i-filter"/></svg></button>
-  <input type="search" class="sel" id="bq" placeholder="Filter cards  /" aria-label="Filter cards" spellcheck="false" autocomplete="off">
+  <input type="search" class="sel" id="bq" placeholder="Filter cards (press /)" aria-label="Filter cards" spellcheck="false" autocomplete="off">
   <span class="sp"></span>
   <button class="btn pri" id="newtop">New idea</button>
 </div>
 <main id="board" aria-live="polite" aria-busy="true"><section aria-hidden="true"><span class="skel" style="height:14px;width:40%;margin:4px 0 12px"></span><span class="skel" style="height:72px;margin-bottom:8px"></span><span class="skel" style="height:72px"></span></section><section aria-hidden="true"><span class="skel" style="height:14px;width:40%;margin:4px 0 12px"></span><span class="skel" style="height:72px;margin-bottom:8px"></span><span class="skel" style="height:72px"></span></section><section aria-hidden="true"><span class="skel" style="height:14px;width:40%;margin:4px 0 12px"></span><span class="skel" style="height:72px;margin-bottom:8px"></span><span class="skel" style="height:72px"></span></section><section aria-hidden="true"><span class="skel" style="height:14px;width:40%;margin:4px 0 12px"></span><span class="skel" style="height:72px;margin-bottom:8px"></span><span class="skel" style="height:72px"></span></section><section aria-hidden="true"><span class="skel" style="height:14px;width:40%;margin:4px 0 12px"></span><span class="skel" style="height:72px;margin-bottom:8px"></span><span class="skel" style="height:72px"></span></section></main>
 
+<div id="terms" aria-label="Terminals"></div>
+
 <div class="ftr"><span class="strip" id="strip"></span><span><a href="/issue" target="_blank" rel="noopener"><svg><use href="#i-bug"/></svg>Report an issue</a><a id="kbd"><svg><use href="#i-kbd"/></svg>Keyboard shortcuts</a></span></div>
 
 <div class="scrim" id="scrim"></div>