kaizen-agent 1.42.2 → 1.43.0

package/web/board/cards.ts

@@ -2,11 +2,11 @@ import { store } from "./store.ts";
 import { where } from "./agent-term.ts";
 import { load, post } from "./api.ts";
 import { mic, stopDictation } from "./dictation.ts";
-import { $, dataUrls, esc, ico } from "./dom.ts";
+import { $, dataUrls, html, ico, modal, raw } from "./dom.ts";
 import { draft, undraft } from "./drafts.ts";
 import { COLS, ICON, MARKS, NAMES, WORD, age, d, need } from "./labels.ts";
 import { brief } from "./markdown.ts";
-import { open, toggleArchive } from "./panel.ts";
+import { open, openAt, toggleArchive } from "./panel.ts";
 import { ideaCombo, list, newDir, plogo, short, showList, showable } from "./projects.ts";
 import { askNotify, toast } from "./toast.ts";
 import { answer, decided, resumable, resume } from "./approvals.ts";
@@ -25,6 +25,41 @@ let order = (() => {
   }
 })();
 let archive = false; // showing the archive instead of the board
+// The Ideas column shows ideas or the runs' open backlog, never both; kept per browser.
+let ideasTab = (() => {
+  try {
+    return localStorage.getItem("kz-ideas-tab") === "backlog" ? "backlog" : "ideas";
+  } catch (e) {
+    return "ideas";
+  }
+})();
+// On the Backlog tab: one severity, or null for every one.
+let sev = null;
+const SEVS = [
+  ["high", "High+", (s) => s === "critical" || s === "high"],
+  ["medium", "Medium", (s) => s === "medium"],
+  ["low", "Low", (s) => s === "low"],
+  ["none", "No severity", (s) => !s],
+];
+// Open backlog items as cards for the Ideas column. A card's key names its line by
+// source and number, which is what Start and Reject send back.
+const backlogList = () =>
+  (store.S.backlog || []).map((b) => ({
+    ...b,
+    kind: "backlog",
+    status: b.starting ? "starting" : "idea",
+    title: b.text,
+    column: 0,
+    archived: false,
+    _k: "backlog:" + b.state + ":" + b.source + "#" + b.n,
+  }));
+// A backlog card opens its source run on the Backlog tab, the item marked.
+const show = (c) => {
+  if (c.kind !== "backlog") return open(c);
+  const r = store.S.cards.find((x) => x.kind === "run" && x.id === c.source && x.state === c.state);
+  if (!r) return toast(c.source === "orphan" ? "Kept from a run that was pruned" : "That run is not on this board");
+  openAt(r, "backlog", c.n);
+};
 // Clear on Done: menu, then cherry-pick mode.
 let picking = false;
 const picked = new Set();
@@ -62,17 +97,17 @@ function card(c) {
   el.dataset.k = k;
   el.setAttribute("role", "button");
   const st = ICON[c.status] || "idea",
-    idt = c.kind === "idea" ? "" : c.text.replace(/-/g, " ");
+    idt = c.kind === "run" ? c.text.replace(/-/g, " ") : "";
   // The status icon carries the state; what a waiting run needs is its tooltip.
   const sttl = c.status === "waiting" ? need(c.awaiting) || "needs you" : c.status || "idea";
   // Footer: words on the left (project, what it needs), icon-only marks on the right.
   const chips = [],
     marks = [],
     mk = (id, t, cls = "") =>
-      `<span class="mk${cls}" role="img" title="${esc(t)}" aria-label="${esc(t)}"><svg><use href="#${id}"/></svg></span>`;
+      html`<span class="mk${cls}" role="img" title="${t}" aria-label="${t}"><svg><use href="#${id}"/></svg></span>`;
   if (store.all) {
     const n = c.where.split("/").filter(Boolean).pop() || c.where;
-    chips.push(`<span class="chip proj" title="${esc(c.where)}">${esc(n)}</span>`);
+    chips.push(html`<span class="chip proj" title="${c.where}">${n}</span>`);
   }
   for (const t of c.tags || []) {
     if (MARKS[t])
@@ -84,8 +119,8 @@ function card(c) {
         ),
       );
     else if (t === "yolo")
-      marks.push(`<span class="mk warn" title="Started in Yolo: the agent runs commands without asking">yolo</span>`);
-    else chips.push(`<span class="chip">${esc(NAMES[t] || t)}</span>`);
+      marks.push(html`<span class="mk warn" title="Started in Yolo: the agent runs commands without asking">yolo</span>`);
+    else chips.push(html`<span class="chip">${NAMES[t] || t}</span>`);
   }
   if (c.pty && c.pty.alive && c.pty.asking)
     marks.push(mk("i-ask", "The agent is asking you something: open it, terminal button at the top", " warn ask"));
@@ -96,10 +131,19 @@ function card(c) {
   const g = c.notes && /^\[[^\]]*\] (?:Gathered from|Promoted from the icebox:) (.+?)\. Outside text/.exec(c.notes);
   // A card filed by a run names that run; the parent itself shows nothing.
   if (c.parent)
-    chips.push(`<span class="chip link" title="Filed by ${esc(c.parent)}">${esc(c.parent.replace(/^\d{4}-\d\d-\d\d-/, "").replace(/-/g, " "))}</span>`);
-  if (c.branch) chips.push(`<span class="chip" title="Built on its own branch, ${esc(c.branch)}">branch</span>`);
-  if (g) chips.push(`<span class="chip" title="From ${esc(g[1])}">gathered</span>`);
-  else if (c.notes) chips.push(`<span class="chip">notes</span>`);
+    chips.push(html`<span class="chip link" title="Filed by ${c.parent}">${c.parent.replace(/^\d{4}-\d\d-\d\d-/, "").replace(/-/g, " ")}</span>`);
+  if (c.kind === "backlog") {
+    if (c.severity)
+      chips.push(html`<span class="chip${c.severity === "critical" || c.severity === "high" ? " warn" : ""}"><i></i>${c.severity}</span>`);
+    chips.push(
+      c.source === "orphan"
+        ? html`<span class="chip" title="Kept from a pruned run">orphaned</span>`
+        : html`<span class="chip link" title="Left by ${c.source}${c.at ? " · " + c.at : ""}">${c.source.replace(/^\d{4}-\d\d-\d\d-/, "").replace(/-/g, " ")}</span>`,
+    );
+  }
+  if (c.branch) chips.push(html`<span class="chip" title="Built on its own branch, ${c.branch}">branch</span>`);
+  if (g) chips.push(html`<span class="chip" title="From ${g[1]}">gathered</span>`);
+  else if (c.notes) chips.push(html`<span class="chip">notes</span>`);
   // Information only: the panel's button is where it is committed and pushed.
   if (c.git)
     marks.push(
@@ -117,17 +161,17 @@ function card(c) {
   const act =
     c.kind === "run" && !archive && !pick
       ? c.status === "waiting"
-        ? `<button class="btn sm${decided.has(answer(c)) ? "" : " pri"} act" data-a="open">${actionOf(c)}</button>`
+        ? html`<button class="btn sm${decided.has(answer(c)) ? "" : " pri"} act" data-a="open">${actionOf(c)}</button>`
         : c.status === "stalled" && resumable(c)
-          ? `<button class="btn sm act" data-a="resume">Resume</button>`
+          ? html`<button class="btn sm act" data-a="resume">Resume</button>`
           : ""
       : "";
   el.innerHTML =
-    (pick ? `<input type="checkbox" class="pick" ${picked.has(k) ? "checked" : ""} aria-label="Select">` : "") +
-    `<div class="c-id"><span class="st d-${st}" role="img" title="${esc(sttl)}" aria-label="${esc(sttl)}"><svg><use href="#s-${st}"/></svg></span><span class="idt">${esc(idt)}</span><span class="age">${c.kind === "run" ? age(c.moved || store.S.now, store.S.now) : ""}</span><button class="ib sm more" data-a="menu" title="Actions" aria-label="Actions" aria-haspopup="menu" aria-expanded="${k === store.menuKey}">${ico("more")}</button></div>
-  <div class="c-title"${c.kind === "idea" && brief(c.text).parts.length ? ` title="${esc(c.text)}"` : ""}>${esc(c.kind === "idea" ? brief(c.text).head : c.title || c.id)}</div>
+    (pick ? html`<input type="checkbox" class="pick" ${raw(picked.has(k) ? "checked" : "")} aria-label="Select">` : "") +
+    html`<div class="c-id"><span class="st d-${st}" role="img" title="${sttl}" aria-label="${sttl}"><svg><use href="#s-${st}"/></svg></span><span class="idt">${idt}</span><span class="age">${c.kind === "run" ? age(c.moved || store.S.now, store.S.now) : ""}</span><button class="ib sm more" data-a="menu" title="Actions" aria-label="Actions" aria-haspopup="menu" aria-expanded="${String(k === store.menuKey)}">${ico("more")}</button></div>
+  <div class="c-title"${c.kind === "idea" && brief(c.text).parts.length ? html` title="${c.text}"` : ""}>${c.kind === "idea" ? brief(c.text).head : c.title || c.id}</div>
   ${act}
-  ${chips.length || marks.length ? `<div class="c-foot"><span class="c-chips">${chips.join("")}</span><span class="c-marks">${marks.join("")}</span></div>` : ""}`;
+  ${chips.length || marks.length ? html`<div class="c-foot"><span class="c-chips">${chips}</span><span class="c-marks">${marks}</span></div>` : ""}`;
   const kids = kidsOf(c);
   if (kids.length) {
     const on = kidsOpen.has(k),
@@ -136,14 +180,13 @@ function card(c) {
     const box = document.createElement("div");
     box.className = "kids";
     box.innerHTML =
-      `<button class="kids-t" aria-expanded="${on}">${on ? "▾" : "▸"} ${kids.length} ${kids.length === 1 ? "child" : "children"}${nDone ? ` · ${nDone} done` : ""}${wait ? `<span class="kids-w" title="A child is waiting on you"></span>` : ""}</button>` +
+      html`<button class="kids-t" aria-expanded="${String(on)}">${on ? "▾" : "▸"} ${kids.length} ${kids.length === 1 ? "child" : "children"}${nDone ? ` · ${nDone} done` : ""}${wait ? html`<span class="kids-w" title="A child is waiting on you"></span>` : ""}</button>` +
       (on
-        ? `<ul>${kids
+        ? html`<ul>${kids
             .map((x, i) => {
               const s = ICON[x.status] || "idea";
-              return `<li data-i="${i}" tabindex="0" role="button" title="Open"><span class="st d-${s}"><svg><use href="#s-${s}"/></svg></span><span class="kids-s">${esc(WORD[x.status] || x.status)}</span><span class="kids-n" title="${esc(x.title || x.text || x.id)}">${esc(x.kind === "idea" ? brief(x.text).head : (x.text || x.id || "").replace(/-/g, " "))}</span></li>`;
-            })
-            .join("")}</ul>`
+              return html`<li data-i="${i}" tabindex="0" role="button" title="Open"><span class="st d-${s}"><svg><use href="#s-${s}"/></svg></span><span class="kids-s">${WORD[x.status] || x.status}</span><span class="kids-n" title="${x.title || x.text || x.id}">${x.kind === "idea" ? brief(x.text).head : (x.text || x.id || "").replace(/-/g, " ")}</span></li>`;
+            })}</ul>`
         : "");
     box.querySelector(".kids-t").onclick = (e) => {
       e.stopPropagation();
@@ -166,6 +209,13 @@ function card(c) {
       items.push(["restore", "Restore", ico("restore")]);
       items.push(["open", "Open", ico("open")]);
       if (c.kind === "idea") items.push(null, ["delete", "Delete", ico("trash"), "danger"]);
+    } else if (c.kind === "backlog") {
+      items.push(
+        ["run", c.status === "starting" ? "Run again" : "Run", ico("play")],
+        ["open", "Open its run", ico("open")],
+        null,
+        ["reject", "Reject", ico("x"), "danger"],
+      );
     } else if (c.kind === "idea" && c.status === "idea") {
       items.push(
         ["run", "Run", ico("play")],
@@ -191,7 +241,7 @@ function card(c) {
         items.push(null, ["reject", "Abandon", ico("x"), "danger"]);
       }
     }
-    el.innerHTML += `<div class="menu-pop" role="menu">${items.map((i) => (i ? `<button role="menuitem" data-a="${i[0]}" class="${i[3] || ""}">${i[2]}${i[1]}</button>` : "<hr>")).join("")}</div>`;
+    el.innerHTML += html`<div class="menu-pop" role="menu">${items.map((i) => (i ? html`<button role="menuitem" data-a="${i[0]}" class="${i[3] || ""}">${i[2]}${i[1]}</button>` : raw("<hr>")))}</div>`;
   }
   el.querySelectorAll("[data-a]").forEach(
     (bt) =>
@@ -206,7 +256,7 @@ function card(c) {
           return;
         }
         if (a === "open") {
-          open(c);
+          show(c);
           return;
         }
         if (a === "resume") {
@@ -236,12 +286,12 @@ function card(c) {
       render();
       return;
     }
-    open(c);
+    show(c);
   };
   el.onkeydown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      open(c);
+      show(c);
     }
   };
   return el;
@@ -252,7 +302,7 @@ function inlineForm(c) {
   li.className = "inl";
   const dir = c.state;
   if (store.mode === "edit") {
-    li.innerHTML = `<input value="${esc(c.text)}"><textarea placeholder="Notes: links, paths, background">${esc(c.notes || "")}</textarea><div class="q dim" id="clong" hidden>The first line is over 72 characters; logs will cut it short.</div><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Save</button></div>`;
+    li.innerHTML = html`<input value="${c.text}"><textarea placeholder="Notes: links, paths, background">${c.notes || ""}</textarea><div class="q dim" id="clong" hidden>The first line is over 72 characters; logs will cut it short.</div><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Save</button></div>`;
     li.querySelector("[data-a=s]").onclick = async () => {
       const next = li.querySelector("input").value.trim(),
         notes = li.querySelector("textarea").value.trim();
@@ -263,8 +313,8 @@ function inlineForm(c) {
     };
   }
   if (store.mode === "reject") {
-    const idea = c.kind === "idea";
-    li.innerHTML = `<div class="q">${idea ? "Reject this idea?" : "Abandon this run?"} The reason is recorded.</div><input placeholder="Reason"><div class="row"><button class="btn ghost" data-a="c">Keep it</button><button class="btn warn" data-a="s">${idea ? "Reject" : "Abandon"}</button></div>`;
+    const idea = c.kind !== "run";
+    li.innerHTML = html`<div class="q">${c.kind === "backlog" ? "Not doing this backlog item?" : idea ? "Reject this idea?" : "Abandon this run?"} The reason is recorded.</div><input placeholder="Reason"><div class="row"><button class="btn ghost" data-a="c">Keep it</button><button class="btn warn" data-a="s">${idea ? "Reject" : "Abandon"}</button></div>`;
     li.querySelector("[data-a=s]").onclick = async () => {
       const why = li.querySelector("input").value.trim();
       if (!why) {
@@ -272,15 +322,18 @@ function inlineForm(c) {
         return;
       }
       store.mode = null;
-      const r = idea
-        ? await post("/inbox", { op: "reject", dir, text: c.text, reason: why })
-        : await post("/abort", { dir, id: c.id, why });
+      const r =
+        c.kind === "backlog"
+          ? await post("/backlog", { op: "reject", dir, source: c.source, n: c.n, reason: why })
+          : idea
+            ? await post("/inbox", { op: "reject", dir, text: c.text, reason: why })
+            : await post("/abort", { dir, id: c.id, why });
       if (r.ok) toast(idea ? "Rejected" : "Abandoned, reason recorded");
       load();
     };
   }
   if (store.mode === "delete") {
-    li.innerHTML = `<div class="q">Delete "${esc(c.text)}"?</div><div class="q dim">Not recorded anywhere.</div><div class="row"><button class="btn ghost" data-a="c">Keep it</button><button class="btn danger" data-a="s">Delete</button></div>`;
+    li.innerHTML = html`<div class="q">Delete "${c.text}"?</div><div class="q dim">Not recorded anywhere.</div><div class="row"><button class="btn ghost" data-a="c">Keep it</button><button class="btn danger" data-a="s">Delete</button></div>`;
     li.querySelector("[data-a=s]").onclick = async () => {
       store.mode = null;
       const r = await post("/inbox", { op: "delete", dir, text: c.text });
@@ -290,7 +343,7 @@ function inlineForm(c) {
   }
   if (store.mode === "move") {
     const ps = store.S.projects.filter((p) => p.dir !== dir);
-    li.innerHTML = `<div class="q">Move "${esc(c.text)}" to</div><select class="sel" aria-label="Project">${ps.map((p) => `<option value="${esc(p.dir)}" title="${esc(p.label)}">${esc(short(p.label))}</option>`).join("")}</select><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Move</button></div>`;
+    li.innerHTML = html`<div class="q">Move "${c.text}" to</div><select class="sel" aria-label="Project">${ps.map((p) => html`<option value="${p.dir}" title="${p.label}">${short(p.label)}</option>`)}</select><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Move</button></div>`;
     li.querySelector("[data-a=s]").onclick = async () => {
       const sel = li.querySelector("select"),
         to = sel.value,
@@ -302,7 +355,7 @@ function inlineForm(c) {
     };
   }
   if (store.mode === "run") {
-    li.innerHTML = `<div class="q">Run "${esc(c.text)}"</div><div class="q dim">Opens your agent with this request in a terminal.</div><div class="q dim">Full plans, builds, and checks with a separate reviewer. Lite does it in one session.</div><div id="run-pick" style="display:grid;gap:6px"><div id="run-agent" class="agents" role="radiogroup" aria-label="Agent"></div></div><div class="run-actions"><label class="yolo" id="run-yolo" title="Yolo: the agent runs every command and edit without asking" hidden><button type="button" class="chk" role="switch" aria-checked="false"></button>Yolo</label><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn" data-a="l">Lite</button><button class="btn pri" data-a="s">Full run</button></div></div>`;
+    li.innerHTML = html`<div class="q">Run "${c.text}"</div><div class="q dim">Opens your agent with this request in a terminal.</div><div class="q dim">Full plans, builds, and checks with a separate reviewer. Lite does it in one session.</div><div id="run-pick" style="display:grid;gap:6px"><div id="run-agent" class="agents" role="radiogroup" aria-label="Agent"></div></div><div class="run-actions"><label class="yolo" id="run-yolo" title="Yolo: the agent runs every command and edit without asking" hidden><button type="button" class="chk" role="switch" aria-checked="false"></button>Yolo</label><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn" data-a="l">Lite</button><button class="btn pri" data-a="s">Full run</button></div></div>`;
     li.querySelector("[data-a=s]").onclick = () => startRun(c, "full");
     li.querySelector("[data-a=l]").onclick = () => startRun(c, "lite");
     runForm(li, c);
@@ -354,7 +407,7 @@ async function runForm(li, c) {
   box.innerHTML = d.agents
     .map(
       (a) =>
-        `<button type="button" class="agent" role="radio" aria-checked="${a.cmd === runPick.agent}" data-cmd="${esc(a.cmd)}"><svg><use href="#c-${esc(a.cmd)}"/></svg>${esc(a.name)}</button>`,
+        html`<button type="button" class="agent" role="radio" aria-checked="${String(a.cmd === runPick.agent)}" data-cmd="${a.cmd}"><svg><use href="#c-${a.cmd}"/></svg>${a.name}</button>`,
     )
     .join("");
   const yb = li.querySelector("#run-yolo");
@@ -394,20 +447,99 @@ async function startRun(c, kind) {
   const p = runPick && runPick.k === key(c) ? runPick : null;
   runPick = null;
   const yolo = !!(p && p.yolo && !$("run-yolo")?.hidden);
-  const r = await post("/run", { dir: c.state, text: c.text, kind, agent: p ? p.agent : undefined, yolo });
+  const backlog = c.kind === "backlog" ? { source: c.source, n: c.n } : undefined;
+  const r = await post("/run", { dir: c.state, text: c.text, backlog, kind, agent: p ? p.agent : undefined, yolo });
   if (r.ok) {
     toast((kind === "full" ? "Full" : "Lite") + (yolo ? " yolo" : "") + " run " + where(r) + ": " + via(r.agent));
-    if (r.pty) store.wantTerm = key(c);
+    // A backlog card has no terminal of its own; the run's card gets it once the run exists.
+    if (r.pty && !backlog) store.wantTerm = key(c);
   }
   load();
 }
 
 const HINT = { 1: "Ideas you run are planned here", 2: "Approved plans are built here", 3: "Finished builds are checked here" };
 
+// The new-idea form, wired into f: inline at the top of Ideas, or in a modal.
+function ideaForm(f, close) {
+  f.innerHTML = html`${store.all ? html`<div class="combo" id="ndc"><button type="button" class="sel" id="newdir" aria-label="Project for this idea" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" hidden><input class="sel" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="nds" role="listbox"></div></div></div>` : ""}<input id="newidea" placeholder="What would you like done?"><textarea id="newnotes" placeholder="Notes: links, paths, background (optional)"></textarea><div class="att" id="newatt"></div><input type="file" id="newfile" multiple hidden><div class="row"><button type="button" class="ib" id="newpick" aria-label="Attach files" title="Attach files">${ico("clip")}</button><button type="button" class="btn ghost" id="nc">Cancel</button><button type="button" class="btn pri" id="ns">Add</button></div>`;
+  const inp = f.querySelector("#newidea"),
+    files = [];
+  draft(inp, "f:new:0");
+  draft(f.querySelector("textarea"), "f:new:1");
+  const save = async () => {
+    const text = inp.value.trim();
+    if (!text) return;
+    const notes = f.querySelector("textarea").value.trim();
+    close();
+    const dir = store.all ? newDir : null;
+    const r = await post("/inbox", dir ? { op: "add", dir, text, notes } : { op: "add", text, notes });
+    if (r.ok) {
+      toast("Idea added");
+      // The idea exists first: a failed upload leaves it as plain text.
+      if (files.length) {
+        const enc = await dataUrls(files);
+        const n = await post("/note", { dir, for: text, text: "", files: enc });
+        if (!n.ok) toast("Idea added, files not attached");
+      }
+    }
+    load();
+  };
+  const add = (x) => {
+    files.push(x);
+    f.querySelector("#newatt").textContent = files.map((y) => y.name).join(" · ");
+  };
+  f.querySelector("#newpick").onclick = () => f.querySelector("#newfile").click();
+  f.querySelector("#newfile").onchange = (e) => {
+    [...e.target.files].forEach(add);
+    e.target.value = "";
+  };
+  for (const el of [inp, f.querySelector("textarea")])
+    el.onpaste = (e) => {
+      for (const it of e.clipboardData.items)
+        if (it.kind === "file") {
+          const x = it.getAsFile();
+          add(new File([x], x.name === "image.png" ? `paste-${Date.now()}.png` : x.name, { type: x.type }));
+          e.preventDefault();
+        }
+    };
+  if (store.all) ideaCombo(f);
+  f.querySelector("#ns").onclick = save;
+  f.querySelector("#nc").onclick = close;
+  {
+    const m = mic([inp, f.querySelector("textarea")]);
+    if (m) f.querySelector(".row").prepend(m);
+  }
+  inp.onkeydown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      save();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    }
+  };
+  setTimeout(() => inp.focus());
+}
+
+// New idea from the top bar, the empty board or n: the same form, in a modal.
+export function newIdea() {
+  if (store.mode === "new") {
+    store.mode = null;
+    render();
+  }
+  const dl = modal("");
+  const f = dl.querySelector("form");
+  f.onsubmit = (e) => e.preventDefault();
+  dl.addEventListener("close", () => stopDictation(false));
+  ideaForm(f, () => dl.close());
+}
+
 export function render() {
   // A closed form leaves no draft behind; an open one is reopened after a reload.
   // A form whose card is gone (restored after a reload, or deleted elsewhere) has nowhere to show.
-  if (store.mode && store.mode !== "new" && !store.S.cards.some((c) => key(c) === store.modeKey)) store.mode = null;
+  if (store.mode && store.mode !== "new" && ![...store.S.cards, ...backlogList()].some((c) => key(c) === store.modeKey))
+    store.mode = null;
   if (store.mode !== "run" && runPick) runPick.yolo = false;
   if (!store.mode) undraft("f:");
   try {
@@ -474,8 +606,8 @@ export function render() {
   const cur = store.all || !store.S.dir ? "All projects" : (store.PL.find((p) => p[1] === store.S.dir) || ["All projects"])[0];
   $("proj").innerHTML =
     store.all || !store.S.dir
-      ? `<span class="plogo" aria-hidden="true">${ico("board")}</span><span>${esc(cur)}</span>`
-      : `${plogo(store.S.dir, cur)}<span>${esc(short(cur))}</span>`;
+      ? html`<span class="plogo" aria-hidden="true">${ico("board")}</span><span>${cur}</span>`
+      : html`${plogo(store.S.dir, cur)}<span>${short(cur)}</span>`;
   $("proj").title = cur;
   if (!$("projpop").hidden) list();
   $("showc").hidden = !store.all;
@@ -488,24 +620,24 @@ export function render() {
       ? '<div class="empty"><div class="mascot"></div><b>Nothing archived</b></div>'
       : '<div class="empty"><div class="mascot"></div><b>Nothing here yet</b><p>Add an idea and kaizen will plan it, build it, and check the result.</p><button class="btn pri" id="newempty">New idea</button></div>';
     if (!archive)
-      $("newempty").onclick = () => {
-        store.mode = "new";
-        render();
-      };
+      $("newempty").onclick = newIdea;
   }
   COLS.forEach((name, ci) => {
     const s = document.createElement("section");
     const q = query.trim().toLowerCase();
-    const list = cs.filter(
+    const bl = ci === 0 && !archive && ideasTab === "backlog";
+    const all = bl ? backlogList().filter((c) => !only || store.shown.has(c.state)) : cs;
+    const list = all.filter(
       (c) =>
         c.column === ci &&
+        (!bl || !sev || SEVS.find((x) => x[0] === sev)[2](c.severity)) &&
         (!filter || c.status === filter) &&
         (archive || !nested(c)) &&
         (!q || `${c.title || ""} ${c.text || ""} ${c.id || ""}`.toLowerCase().includes(q)),
     );
     // Runs age by their last move, ideas by when they were added, across every project;
     // an idea from before the stamp falls back to its inbox position.
-    if (ci < 4) {
+    if (ci < 4 && !bl) {
       const at = (c) => (c.kind === "run" ? c.moved || 0 : c.added || 0),
         old = order[ci] === "old",
         pos = (c) => store.S.cards.indexOf(c);
@@ -515,13 +647,66 @@ export function render() {
     }
     const clearable = ci === 4 && !archive && list.length;
     const olderThan = (days) => list.filter((c) => store.S.now - (c.moved || store.S.now) > days * d);
-    let head = `<h2>${name}<i>${list.length || ""}</i>${ci < 4 && list.length > 1 ? `<button class="btn sm ghost ord" title="Sort order">${order[ci] === "old" ? "Oldest" : "Newest"}</button>` : ""}${ci === 0 && !archive ? `<button class="ib sm" title="New idea" aria-label="New idea">${ico("plus")}</button>` : ""}`;
+    // The Ideas column is titled by its two tabs, icons with their counts: ideas, or the
+    // runs' leftovers. On Backlog a filter icon narrows it to one severity.
+    const tabbed = ci === 0 && !archive,
+      nb = tabbed ? backlogList().filter((c) => !only || store.shown.has(c.state)) : [];
+    const title = tabbed
+      ? `<span class="itabs" role="tablist" aria-label="Ideas column">${[
+          ["ideas", "Ideas", `<svg><use href="#s-idea"/></svg>`, cs.filter((c) => c.column === 0).length],
+          ["backlog", "Backlog: what finished runs left undone", ico("clock"), nb.length],
+        ]
+          .map(
+            ([v, l, svg, k]) =>
+              `<button role="tab" aria-selected="${String(ideasTab === v)}" data-t="${v}" title="${l}" aria-label="${l}, ${k}">${svg}<i>${k}</i></button>`,
+          )
+          .join("")}</span>`
+      : `${name}<i>${list.length || ""}</i>`;
+    const sevBtn = bl
+      ? `<button class="ib sm sevf${sev ? " on" : ""}" data-sv="1" title="${sev ? "Severity: " + SEVS.find((x) => x[0] === sev)[1] : "Filter by severity"}" aria-label="Filter by severity" aria-haspopup="menu" aria-expanded="${String(store.sevMenu)}">${ico("filter")}</button>` +
+        (store.sevMenu
+          ? `<div class="menu-pop sev-pop" role="menu"><button role="menuitemradio" aria-checked="${String(!sev)}" data-s="">All severities <i>${nb.length}</i></button><hr>${SEVS.map(
+              ([v, l, f]) =>
+                `<button role="menuitemradio" aria-checked="${String(sev === v)}" data-s="${v}">${l} <i>${nb.filter((c) => f(c.severity)).length}</i></button>`,
+            ).join("")}</div>`
+          : "")
+      : "";
+    let head = `<h2>${title}${ci < 4 && !bl && list.length > 1 ? `<button class="btn sm ghost ord" title="Sort order">${order[ci] === "old" ? "Oldest" : "Newest"}</button>` : ""}${sevBtn}${tabbed ? `<button class="ib sm newi" title="New idea" aria-label="New idea">${ico("plus")}</button>` : ""}`;
     if (clearable && picking)
       head += `<span class="pickbar"><button class="btn sm ghost" data-p="cancel">Cancel</button><button class="btn sm pri" data-p="go" ${picked.size ? "" : "disabled"}>Archive ${picked.size || ""}</button></span>`;
     else if (clearable) head += `<button class="btn sm ghost clear" title="Archive finished runs">Clear ▾</button>`;
     if (clearable && store.clearMenu)
       head += `<div class="menu-pop clear-pop"><button data-c="7">Older than a week <i>${olderThan(7).length}</i></button><button data-c="3">Older than 3 days <i>${olderThan(3).length}</i></button><button data-c="0">Everything <i>${list.length}</i></button><hr><button data-c="pick">Pick which…</button></div>`;
     s.innerHTML = head + `</h2>`;
+    if (tabbed) {
+      s.querySelectorAll("[data-t]").forEach(
+        (bt) =>
+          (bt.onclick = () => {
+            ideasTab = bt.dataset.t;
+            store.sevMenu = false;
+            try {
+              localStorage.setItem("kz-ideas-tab", ideasTab);
+            } catch (e) {}
+            render();
+          }),
+      );
+      const sv = s.querySelector("[data-sv]");
+      if (sv)
+        sv.onclick = (e) => {
+          e.stopPropagation();
+          store.sevMenu = !store.sevMenu;
+          render();
+        };
+      s.querySelectorAll("[data-s]").forEach(
+        (bt) =>
+          (bt.onclick = (e) => {
+            e.stopPropagation();
+            sev = bt.dataset.s || null;
+            store.sevMenu = false;
+            render();
+          }),
+      );
+    }
     {
       const o = s.querySelector(".ord");
       if (o)
@@ -534,9 +719,10 @@ export function render() {
           render();
         };
     }
-    if (ci === 0 && !archive)
-      s.querySelector(".ib").onclick = () => {
+    if (tabbed)
+      s.querySelector(".newi").onclick = () => {
         store.mode = "new";
+        ideasTab = "ideas";
         render();
       };
     if (clearable) {
@@ -593,66 +779,11 @@ export function render() {
     if (ci === 0 && store.mode === "new") {
       const f = document.createElement("li");
       f.className = "inl";
-      f.innerHTML = `${store.all ? `<div class="combo" id="ndc"><button class="sel" id="newdir" aria-label="Project for this idea" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" hidden><input class="sel" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="nds" role="listbox"></div></div></div>` : ""}<input id="newidea" placeholder="What would you like done?"><textarea id="newnotes" placeholder="Notes: links, paths, background (optional)"></textarea><div class="att" id="newatt"></div><input type="file" id="newfile" multiple hidden><div class="row"><button class="ib" id="newpick" aria-label="Attach files" title="Attach files">${ico("clip")}</button><button class="btn ghost" id="nc">Cancel</button><button class="btn pri" id="ns">Add</button></div>`;
       ul.appendChild(f);
-      const inp = f.querySelector("#newidea"),
-        files = [];
-      draft(inp, "f:new:0");
-      draft(f.querySelector("textarea"), "f:new:1");
-      const save = async () => {
-        const text = inp.value.trim();
-        if (!text) return;
-        const notes = f.querySelector("textarea").value.trim();
-        store.mode = null;
-        const dir = store.all ? newDir : null;
-        const r = await post("/inbox", dir ? { op: "add", dir, text, notes } : { op: "add", text, notes });
-        if (r.ok) {
-          toast("Idea added");
-          // The idea exists first: a failed upload leaves it as plain text.
-          if (files.length) {
-            const enc = await dataUrls(files);
-            const n = await post("/note", { dir, for: text, text: "", files: enc });
-            if (!n.ok) toast("Idea added, files not attached");
-          }
-        }
-        load();
-      };
-      const add = (x) => {
-        files.push(x);
-        f.querySelector("#newatt").textContent = files.map((y) => y.name).join(" · ");
-      };
-      f.querySelector("#newpick").onclick = () => f.querySelector("#newfile").click();
-      f.querySelector("#newfile").onchange = (e) => {
-        [...e.target.files].forEach(add);
-        e.target.value = "";
-      };
-      for (const el of [inp, f.querySelector("textarea")])
-        el.onpaste = (e) => {
-          for (const it of e.clipboardData.items)
-            if (it.kind === "file") {
-              const x = it.getAsFile();
-              add(new File([x], x.name === "image.png" ? `paste-${Date.now()}.png` : x.name, { type: x.type }));
-              e.preventDefault();
-            }
-        };
-      if (store.all) ideaCombo(f);
-      f.querySelector("#ns").onclick = save;
-      f.querySelector("#nc").onclick = () => {
+      ideaForm(f, () => {
         store.mode = null;
         render();
-      };
-      {
-        const m = mic([inp, f.querySelector("textarea")]);
-        if (m) f.querySelector(".row").prepend(m);
-      }
-      inp.onkeydown = (e) => {
-        if (e.key === "Enter") save();
-        if (e.key === "Escape") {
-          store.mode = null;
-          render();
-        }
-      };
-      setTimeout(() => inp.focus());
+      });
     }
     const shown = unfolded.has(ci) || list.length <= FOLD + 1 ? list : list.slice(0, FOLD);
     shown.forEach((c) => {
@@ -684,6 +815,8 @@ export function render() {
     // An empty middle column says what lands in it, so it does not look broken.
     if (!list.length && ci >= 1 && ci <= 3 && cs.length && !filter && !q && !archive)
       ul.innerHTML = `<li class="hint">${HINT[ci]}</li>`;
+    if (bl && !list.length && !filter && !q)
+      ul.innerHTML = `<li class="hint">${sev ? "Nothing at this severity" : "What finished runs left undone shows here"}</li>`;
     s.appendChild(ul);
     b.appendChild(s);
   });

package/web/board/chat.ts

@@ -1,7 +1,7 @@
 import { load, post } from "./api.ts";
 import { key } from "./cards.ts";
 import { mic, stopDictation } from "./dictation.ts";
-import { $, esc } from "./dom.ts";
+import { $, html, raw as rawHtml } from "./dom.ts";
 import { DK, draft } from "./drafts.ts";
 import { attach, brief, md } from "./markdown.ts";
 import { toast } from "./toast.ts";
@@ -28,12 +28,12 @@ export function chat(c, src, ro) {
   const b = c.kind === "idea" ? brief(c.text) : { parts: [] };
   let h =
     (b.parts.length
-      ? `<section class="desc">${md(b.parts.map((p) => `### ${p.label}\n${p.body}`).join("\n\n"))}</section>`
+      ? html`<section class="desc">${rawHtml(md(b.parts.map((p) => `### ${p.label}\n${p.body}`).join("\n\n")))}</section>`
       : "") +
-    `<div class="chat">${entries.map((n) => `<div class="msg">${n.at ? `<time>${esc(n.at)}</time>` : ""}${md(fix(n.text))}</div>`).join("") || `<p style="color:var(--dim)">No notes yet.</p>`}</div>`;
+    html`<div class="chat">${entries.map((n) => html`<div class="msg">${n.at ? html`<time>${n.at}</time>` : ""}${rawHtml(md(fix(n.text)))}</div>`)}${entries.length ? "" : html`<p style="color:var(--dim)">No notes yet.</p>`}</div>`;
   if (!ro)
     h += `<div class="notes"><textarea placeholder="Add a note. Paste a screenshot, or attach files."></textarea><div class="att" id="natt"></div><div class="tools"><input type="file" id="nfile" multiple hidden><button class="btn ghost" id="npick">Attach</button><span>Enter sends, Shift+Enter newline</span><button class="btn pri" id="nsend">Send</button></div></div>`;
-  $("pbody").innerHTML = h;
+  $("pbody").innerHTML = rawHtml(h);
   if (ro) return;
   const ta = $("pbody").querySelector("textarea"),
     files = [];