kaizen-agent 1.43.0 → 1.43.2

package/web/board/keys.ts

@@ -54,6 +54,8 @@ export function initKeys() {
       } else close();
       return;
     }
+    // The Terminal page has no cards to move between; its keys are the terminals'.
+    if (view === "terminal") return;
     if (e.key === "n" && !document.querySelector("dialog[open]")) {
       if (view !== "board") go("board", true);
       newIdea();

package/web/board/live.ts

@@ -34,9 +34,10 @@ const v0 = ((v) => (v === "icebox" ? "sources" : v))(new URLSearchParams(locatio
 export function initLive() {
   // Back from a terminal: what was committed or pushed there touched nothing the server watches.
   addEventListener("focus", () => load(true));
-  markView(["settings", "sources"].includes(v0) ? v0 : "board");
-  document.body.classList.toggle("paged", ["settings", "sources"].includes(v0));
+  markView(["settings", "sources", "terminal"].includes(v0) ? v0 : "board");
+  document.body.classList.toggle("paged", ["settings", "sources", "terminal"].includes(v0));
   document.body.classList.toggle("ice", v0 === "sources");
+  document.body.classList.toggle("termv", v0 === "terminal");
   (async () => {
     let d;
     try {

package/web/board/projects.ts

@@ -57,7 +57,7 @@ async function pick(v) {
   } else if (v === "__new") {
     // A name, and where it goes: the projects folder unless typed or picked.
     const dl = modal(
-      `<b>New project</b><input name="name" placeholder="Project name" aria-label="Project name" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Create in (a new folder is made)" aria-label="Create in" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Create</button></div>`,
+      `<b>New project</b><input name="name" placeholder="Project name" aria-label="Project name" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Folder to create" aria-label="Create in" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Create</button></div>`,
     );
     const f = dl.querySelector("form"),
       name = f.querySelector("[name=name]"),
@@ -96,7 +96,7 @@ async function pick(v) {
   } else if (v === "__clone") {
     // One form: the link, then where it goes. The folder fills in once the link names a repo.
     const dl = modal(
-      `<b>Clone from GitHub</b><input name="url" placeholder="https://github.com/owner/repo or git@github.com:owner/repo" aria-label="GitHub link (https or ssh)" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Clone into (a new folder is made)" aria-label="Clone into" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Clone</button></div>`,
+      `<b>Clone from GitHub</b><input name="url" placeholder="https://github.com/owner/repo" aria-label="GitHub link (https or ssh)" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Folder to clone into" aria-label="Clone into" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Clone</button></div>`,
     );
     const f = dl.querySelector("form"),
       url = f.querySelector("[name=url]"),

package/web/board/settings.ts

@@ -47,7 +47,8 @@ export async function openSettings() {
   $("psub").textContent = "";
   $("psub").title = "";
   // One control per row: a switch for on/off, one segment per value for a small number,
-  // a select for a choice. The row's label names the control; its help sits under it.
+  // ‹ value › for a choice, stepping and wrapping like a game's options screen. The row's
+  // label names the control; its help sits under it.
   const ctl = (id, vals, on) => {
     // The preset is a segmented control over the tiers; custom, which only an edit to another row makes, lights none.
     if (id === "s-preset")
@@ -60,10 +61,12 @@ export async function openSettings() {
     }
     if (vals.every((v) => /^\d+$/.test(v)))
       return html`<span class="bar" id="${id}" role="group">${vals.map((v) => html`<button data-v="${v}" class="${v === on ? "on" : ""}" aria-pressed="${String(v === on)}">${v}</button>`)}</span>`;
-    return html`<select class="sel" id="${id}">${vals.map((v) => html`<option value="${v}"${v === on ? " selected" : ""}>${v === "" ? "—" : v}</option>`)}</select>`;
+    // Wired by stepper() below; the group takes its name from the row's label.
+    return html`<span class="step" id="${id}" role="group" aria-labelledby="${id}-l"><button id="${id}-prev" aria-label="Previous">‹</button><output aria-live="polite">${on === "" ? "—" : on}</output><button id="${id}-next" aria-label="Next">›</button></span>`;
   };
-  const row = (label, control, hint, id, q) =>
-    html`<div class="srow" data-q="${q.toLowerCase()}"><label for="${id}">${label}</label>${control}${hint ? html`<p class="hint">${hint}</p>` : ""}</div>`;
+  // `off`: the row has no effect while another setting stands as it is; dimmed, still editable.
+  const row = (label, control, hint, id, q, off = false) =>
+    html`<div class="srow${off ? " off" : ""}" data-q="${q.toLowerCase()}"><label for="${id}" id="${id}-l">${label}</label>${control}${hint ? html`<p class="hint">${hint}</p>` : ""}</div>`;
   const hadFocus = document.activeElement?.id === "sq";
   const np = typeof Notification === "undefined" ? null : Notification.permission;
   const ntHelp = np ? (np === "denied" ? "Blocked by this browser" : "") : "Not supported in this browser";
@@ -83,16 +86,17 @@ export async function openSettings() {
                         ? html`<span class="fpick"><input class="sel" id="${id}" value="${r.value}" placeholder="not set" spellcheck="false"><button class="btn" id="${id}-pick" type="button">Browse…</button></span>`
                         : html`<input class="sel" id="${id}" value="${r.value}" placeholder="not set" spellcheck="false">`
                       : ctl(id, r.values, r.value),
-                    r.help,
+                    [r.help, r.idle].filter(Boolean).join(" · "),
                     id,
                     [r.label, r.help, r.key, g, ...r.values].join(" "),
+                    !!r.idle,
                   );
                 })}</div>`,
           )
       : html`<p class="snone">Settings could not be read. Run <code>kaizen settings</code>.</p>`
   }
-  <h3 class="sg">Google</h3><div class="sgrp">${row("OAuth client id", html`<input class="sel" id="gg-id" placeholder="${gg.hasClient ? "saved; type to replace" : "from Google Cloud, Desktop app"}" spellcheck="false" autocomplete="off">`, "", "gg-id", "google oauth client id sheets write back")}
-  ${row("OAuth client secret", html`<span class="fpick"><input class="sel" id="gg-secret" type="password" placeholder="${gg.hasClient ? "saved; type to replace" : ""}" spellcheck="false" autocomplete="off"><button class="btn" id="gg-save" type="button">Save</button></span>`, "", "gg-secret", "google oauth client secret")}
+  <h3 class="sg">Google</h3><div class="sgrp">${row("OAuth client id", html`<input class="sel" id="gg-id" placeholder="${gg.hasClient ? "Saved. Paste a new one to replace it" : "Desktop app client id from Google Cloud"}" spellcheck="false" autocomplete="off">`, "", "gg-id", "google oauth client id sheets write back")}
+  ${row("OAuth client secret", html`<span class="fpick"><input class="sel" id="gg-secret" type="password" placeholder="${gg.hasClient ? "Saved. Paste a new one to replace it" : ""}" spellcheck="false" autocomplete="off"><button class="btn" id="gg-save" type="button">Save</button></span>`, "", "gg-secret", "google oauth client secret")}
   ${row("Google account", html`<button class="btn${gg.connected ? "" : " pri"}" id="gg-conn" type="button"${gg.hasClient || gg.connected ? "" : " disabled"}>${gg.connected ? "Disconnect" : "Connect"}</button>`, "", "gg-conn", "google account connect sheets write back")}</div>
   <h3 class="sg">Browser</h3><div class="sgrp">${row("Theme", ctl("th", ["system", "light", "dark"], cur), "", "th", "theme light dark system browser")}
   ${row("Notifications", html`<button class="chk${np === "granted" ? " on" : ""}" id="nt" role="switch" aria-checked="${String(np === "granted")}"${np && np !== "denied" ? "" : " disabled"}></button>`, ntHelp, "nt", "notifications " + ntHelp + " browser")}</div>
@@ -154,7 +158,32 @@ export async function openSettings() {
       toast(j.error || "Could not start Google sign-in");
     }
   };
-  $("th").onchange = (e) => setTheme(e.target.value);
+  // A stepper keeps its own position, so each click moves one value even before a save
+  // re-renders the panel; the shown value changes at once and apply() gets the new one.
+  // ←/→ press its arrows; focus moves to the arrow pressed.
+  const stepper = (el, vals, on, apply) => {
+    let i = Math.max(vals.indexOf(on), 0);
+    const step = (d) => {
+      i = (i + d + vals.length) % vals.length;
+      el.querySelector("output").textContent = vals[i] === "" ? "—" : vals[i];
+      apply(vals[i]);
+    };
+    $(el.id + "-prev").onclick = () => step(-1);
+    $(el.id + "-next").onclick = () => step(1);
+    el.onkeydown = (e) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      const b = $(el.id + (e.key === "ArrowLeft" ? "-prev" : "-next"));
+      b.focus();
+      b.click();
+    };
+  };
+  // Re-rendering replaces the arrows, so the one pressed gets focus back.
+  const refocus = async (f) => {
+    await openSettings();
+    if (f && /^s-preset-|-(prev|next)$/.test(f)) $(f)?.focus();
+  };
+  stepper($("th"), ["system", "light", "dark"], cur, setTheme);
   $("nt").onclick = () => {
     askNotify();
     setTimeout(openSettings, 300);
@@ -166,16 +195,22 @@ export async function openSettings() {
         const f = document.activeElement?.id;
         const j = await post("/settings", { key: r.key, value: v });
         if (j.ok) toast("Saved");
-        await openSettings();
-        if (f?.startsWith("s-preset-")) $(f)?.focus();
+        await refocus(f);
       };
-      if (el.tagName === "SELECT" || el.tagName === "INPUT")
+      if (el.tagName === "INPUT")
         el.onchange = async () => {
           await save(el.value.trim());
-          if (el.tagName === "INPUT") load();
+          load();
         };
       else el.querySelectorAll("[data-v]").forEach((b) => (b.onclick = () => save(b.dataset.v)));
       if (el.matches(".chk")) el.onclick = () => save(el.dataset.v);
+      // Clicks in quick succession save once, the value they settle on.
+      let t;
+      if (el.matches(".step"))
+        stepper(el, r.values, r.value, (v) => {
+          clearTimeout(t);
+          t = setTimeout(() => save(v), 300);
+        });
       // The system's own folder dialog, opened by the board: a page cannot read a real path.
       if (r.folder)
         $(el.id + "-pick").onclick = async () => {

package/web/board/terms.ts

@@ -0,0 +1,297 @@
+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;
+// A phone shows one terminal at a time, picked from tabs: stacked, each terminal took every
+// swipe and the page could only be scrolled by its thin headers. The pick is per visit.
+// Made on first show, so importing this module needs no window.
+let phone: MediaQueryList | null = null,
+  pick: string | null = null;
+
+// 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 tst = (c) => (!c.pty.alive ? "ended" : c.pty.asking ? "asking" : "running");
+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;
+  if (!phone) (phone = matchMedia("(max-width:640px)")).onchange = () => showing && openTerms();
+  // 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;
+  // The one tile showing: on a phone the tab picked (the first by default), else the maximised one.
+  const one = phone.matches ? (pick && keys.includes(pick) ? pick : keys[0]) : lay.max;
+  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>`)}` : ""}${phone.matches && keys.length > 1 ? html`<span class="ttabs" role="group" aria-label="Terminals">${keys.map((k) => html`<button class="${k === one ? "on" : ""}" data-pick="${k}" aria-pressed="${String(k === one)}"><span class="tdot ${tst(all.get(k))}"></span>${nameOf(all.get(k))} - ${projOf(all.get(k))}</button>`)}</span>` : ""}`.s;
+  bar!.querySelectorAll<HTMLElement>("[data-pick]").forEach(
+    (b) =>
+      (b.onclick = () => {
+        pick = b.dataset.pick!;
+        openTerms();
+      }),
+  );
+  bar!.querySelector(".ttabs .on")?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  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 = tst(c),
+      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", !!one && one !== 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 = one ? 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 (!one && 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, !one);
+}
+
+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) => {
+    // A phone shows one tile anyway: a double-tap there would only leave desktop maximised.
+    if ((e.target as HTMLElement).closest("button") || phone?.matches) 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, splits: boolean) {
+  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 (splits)
+    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/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

@@ -229,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}
@@ -268,6 +269,23 @@ 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 or a stack: one terminal fills the page, and tabs above pick which */
+.ttabs{display:none}
+@media(max-width:640px){.tbar .bar,.tile [data-a=max],.tsplit{display:none}.ttabs{display:flex;order:-1;flex:1 0 100%;min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none}.ttabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;color:var(--dim);font:inherit;font-size:12px;white-space:nowrap}.ttabs button.on{color:var(--ink);background:var(--hover);border-color:var(--accent)}.tgrid{display:flex;flex-direction:column}.tile{flex:1}.tile.off{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}
@@ -323,6 +341,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}
@@ -338,6 +357,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}
@@ -511,6 +533,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>
@@ -553,6 +577,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>
@@ -579,12 +604,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>