kaizen-agent 1.38.1 → 1.39.0

package/cli/board.test.ts

@@ -8,6 +8,56 @@ import { draft, undraft } from "../web/board/drafts.ts";
 const html = readFileSync(join(dirname(import.meta.dir), "web", "board.html"), "utf8");
 const cards = readFileSync(join(dirname(import.meta.dir), "web", "board", "cards.ts"), "utf8");
 
+test("Settings rechecks an existing update alert and clears or refreshes it", async () => {
+  const classes = new Set<string>();
+  const link = { classList: { toggle(name: string, on: boolean) { on ? classes.add(name) : classes.delete(name); } }, title: "Settings" };
+  const previous = globalThis.document;
+  const previousLocation = globalThis.location;
+  const previousFetch = globalThis.fetch;
+  const elements = new Map<string, any>();
+  const body = { row: null as any, prepend(row: any) { this.row = row; row.isConnected = true; } };
+  (globalThis as any).location = { search: "" };
+  (globalThis as any).document = {
+    querySelector: () => link,
+    getElementById: (id: string) => id === "pbody" ? body : elements.get(id),
+    createElement: () => ({
+      isConnected: false,
+      set innerHTML(html: string) {
+        this.html = html;
+        elements.clear();
+        for (const [, id] of html.matchAll(/id="([^"]+)"/g)) elements.set(id, { textContent: "", disabled: false, focus() {} });
+      },
+      remove() { this.isConnected = false; },
+    }),
+  };
+  try {
+    const { gotVer, updBar } = await import("../web/board/update.ts");
+    expect(gotVer({ version: "1.38.1", latest: "1.39.0", update: true })).toBe(true);
+    updBar();
+    expect(body.row.html).toContain('id="upd-chk"');
+    expect(classes.has("upd")).toBe(true);
+    expect(link.title).toContain("1.39.0");
+    globalThis.fetch = (async () => ({ json: async () => ({ version: "1.39.0", latest: "1.39.0", update: false }) })) as any;
+    await elements.get("upd-chk").onclick();
+    expect(classes.has("upd")).toBe(false);
+    expect(link.title).toBe("Settings");
+    expect(body.row.className).toContain("quiet");
+    expect(elements.get("upd-msg").textContent).toBe("kaizen 1.39.0 is up to date.");
+    globalThis.fetch = (async () => ({ json: async () => ({ version: "1.39.0", latest: "1.40.0", update: true }) })) as any;
+    await elements.get("upd-chk").onclick();
+    expect(classes.has("upd")).toBe(true);
+    expect(body.row.html).toContain("1.40.0");
+    globalThis.fetch = (async () => { throw Error("offline"); }) as any;
+    await elements.get("upd-chk").onclick();
+    expect(classes.has("upd")).toBe(true);
+    expect(body.row.html).toContain("1.40.0");
+  } finally {
+    globalThis.document = previous;
+    globalThis.location = previousLocation;
+    globalThis.fetch = previousFetch;
+  }
+});
+
 test("backlog items: a checkbox each, ticked only when done", () => {
   const out = md('- open: one | why\n- done: two <b>x</b> | fixed\n- rejected: three | no\n- plain\n', true);
   const boxes = out.match(/<li[^>]*>.*?<\/li>/g)!;
@@ -105,7 +155,9 @@ test("card menu items: appropriate actions and distinct icons across phases", ()
   const ico = (n: string) => `<svg><use href="#i-${n}"/></svg>`;
   const from = cards.indexOf("if (k === store.menuKey) {");
   const menuSnippet = (cards.slice(from, cards.indexOf('el.innerHTML += `<div class="menu-pop"', from)) + "}").replace("const items = [];", "items = [];");
-  const getItems = new Function("c", "archive", "S", `const ico = ${ico.toString()};\nconst store = { S, menuKey: 1 };\nlet k = 1, items = [];\n${menuSnippet}\nreturn items;`);
+  const a0 = cards.indexOf("const actionOf =");
+  const actionOf = cards.slice(a0, cards.indexOf("\n\n", a0));
+  const getItems = new Function("c", "archive", "S", `const ico = ${ico.toString()};\n${actionOf}\nconst store = { S, menuKey: 1 };\nlet k = 1, items = [];\n${menuSnippet}\nreturn items;`);
 
   // Phase 0: Ideas (idea card)
   const idea = { kind: "idea", status: "idea", column: 0 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaizen-agent",
-  "version": "1.38.1",
+  "version": "1.39.0",
   "description": "Staged workflow for AI agents — code, writing, research, operations: plan, human approval, build, independent review, bounded fix loop.",
   "type": "module",
   "bin": {

package/skills/kaizen/SKILL.md

@@ -273,6 +273,9 @@ first dispatch of the run. `inherit` means leave the file alone.
 
 After a subagent returns, update `state.json` yourself in the main thread. Subagents
 report; the main thread owns the state machine.
+Before moving any run from `build` to `review`, under either runner, apply the
+*Preview gate* in [`spec-main.md`](spec-main.md): no `## Preview` with a screenshot
+(or a one-line reason there is none) means the build is not done.
 
 **Name files, do not narrate them.** The prompt says which paths to read, which
 decisions bind the stage, and what to report back. It does not summarize those files:

package/skills/kaizen/spec-main.md

@@ -83,6 +83,19 @@ subagents at all.
 
 ---
 
+## Preview gate
+
+Before setting `stage: "review"` after a build, in either runner, open `03-impl.md` and
+check its `## Preview`: it has `### How to test` steps, and — when the result shows on a
+screen — at least one `![…](attachments/<name>.png)` embed whose file exists under
+`runs/<id>/attachments/`. A result with no screen needs one line under `## Preview`
+saying why there is no screenshot. Anything missing means the build is not finished:
+under `lite`, take the screenshot and write the section now; under `full`, send the
+builder back to add it. Then advance. This is the step that keeps the board's Preview
+tab from staying empty; the reviewer flagging it later is a second net, not the first.
+
+---
+
 ## Final approval
 
 Controlled by `approvals.review`, skipped in `auto`.

package/web/board/cards.ts

@@ -9,8 +9,10 @@ import { brief } from "./markdown.ts";
 import { open, toggleArchive } from "./panel.ts";
 import { ideaCombo, list, newDir, plogo, short, showList, showable } from "./projects.ts";
 import { askNotify, toast } from "./toast.ts";
+import { resumable, resume } from "./approvals.ts";
 
 let filter = null;
+let query = ""; // the header filter box, matched against a card's title and request
 // A column shows this many cards, then a "more" line; Done is where it matters.
 const FOLD = 6;
 const unfolded = new Set();
@@ -39,6 +41,12 @@ const nested = (c) =>
   store.S.cards.some((p) => p.kind === "run" && p.id === c.parent && p.state === c.state && !p.archived && p.column !== 4);
 const kidsOpen = new Set();
 
+// What opening a waiting run does, in words: the card's button and its menu say the same.
+const actionOf = (c) =>
+  c.status !== "waiting"
+    ? "Open"
+    : { "approvals.plan": "Review plan", findings: "See findings", "approvals.review": "Review work" }[c.awaiting] || "Open";
+
 function card(c) {
   const k = key(c),
     el = document.createElement("div");
@@ -51,7 +59,7 @@ function card(c) {
   el.dataset.k = k;
   el.setAttribute("role", "button");
   const st = ICON[c.status] || "idea",
-    idt = c.kind === "idea" ? "idea" : c.text.replace(/-/g, " ");
+    idt = c.kind === "idea" ? "" : 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.
@@ -98,10 +106,22 @@ function card(c) {
     );
   if (c.open) marks.push(mk("i-bug", `${c.open} open finding${c.open === 1 ? "" : "s"} to fix`, " warn"));
   const pick = picking && !archive && c.column === 4;
+  // Done cards are one line on the board; the panel still shows everything.
+  if (c.column === 4 && !archive) el.classList.add("compact");
+  // The one thing a card asks of you, on its face: what a waiting run needs, or resuming a stalled one.
+  const act =
+    c.kind === "run" && !archive && !pick
+      ? c.status === "waiting"
+        ? `<button class="btn sm pri act" data-a="open">${actionOf(c)}</button>`
+        : c.status === "stalled" && resumable(c)
+          ? `<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>
+  ${act}
   ${chips.length || marks.length ? `<div class="c-foot"><span class="c-chips">${chips.join("")}</span><span class="c-marks">${marks.join("")}</span></div>` : ""}`;
   const kids = kidsOf(c);
   if (kids.length) {
@@ -160,17 +180,7 @@ function card(c) {
         ["delete", "Remove", ico("trash"), "danger"],
       );
     } else {
-      const openLabel =
-        c.status === "waiting"
-          ? c.awaiting === "approvals.plan"
-            ? "Review plan"
-            : c.awaiting === "findings"
-              ? "See findings"
-              : c.awaiting === "approvals.review"
-                ? "Review work"
-                : "Open"
-          : "Open";
-      items.push(["open", openLabel, ico("open")]);
+      items.push(["open", actionOf(c), ico("open")]);
       items.push(["archive", "Archive", ico("archive")]);
       if (c.status === "waiting" || c.status === "running" || c.status === "stalled") {
         items.push(null, ["reject", "Abandon", ico("x"), "danger"]);
@@ -194,6 +204,10 @@ function card(c) {
           open(c);
           return;
         }
+        if (a === "resume") {
+          resume(c, bt);
+          return;
+        }
         if (a === "archive" || a === "restore") {
           toggleArchive(c, a === "archive");
           return;
@@ -383,6 +397,8 @@ async function startRun(c, kind) {
   load();
 }
 
+const HINT = { 1: "Ideas you run are planned here", 2: "Approved plans are built here", 3: "Finished builds are checked here" };
+
 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.
@@ -422,6 +438,10 @@ export function render() {
     `<button class="${archive ? "on" : ""}" data-f="__archive" title="${cs.filter((c) => c.kind === "idea").length} ideas · ${cs.filter((c) => c.kind === "run").length} runs on the board">${archive ? "Back to board" : "Archive " + nArch}</button>`,
   );
   $("strip").innerHTML = strip.join("");
+  // The phone's status button: amber dot while a run waits, accent while a filter or the archive is on.
+  $("fbtn").hidden = false;
+  $("fbtn").classList.toggle("on", !!filter || archive);
+  $("fbtn").classList.toggle("wait", !filter && !archive && n("waiting") > 0);
   $("strip")
     .querySelectorAll("button")
     .forEach(
@@ -468,12 +488,21 @@ export function render() {
   }
   COLS.forEach((name, ci) => {
     const s = document.createElement("section");
-    const list = cs.filter((c) => c.column === ci && (!filter || c.status === filter) && (archive || !nested(c)));
+    const q = query.trim().toLowerCase();
+    const list = cs.filter(
+      (c) =>
+        c.column === ci &&
+        (!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 inbox position (new ones are appended).
     if (ci < 4) {
       const at = (c) => (c.kind === "run" ? c.moved || 0 : store.S.cards.indexOf(c)),
         old = order[ci] === "old";
-      list.sort((a, b) => (old ? at(a) - at(b) : at(b) - at(a)));
+      // Runs waiting on you go first, then the column's own order.
+      const w = (c) => (c.status === "waiting" ? 1 : 0);
+      list.sort((a, b) => w(b) - w(a) || (old ? at(a) - at(b) : at(b) - at(a)));
     }
     const clearable = ci === 4 && !archive && list.length;
     const olderThan = (days) => list.filter((c) => store.S.now - (c.moved || store.S.now) > days * d);
@@ -652,12 +681,51 @@ export function render() {
       };
       ul.appendChild(li);
     }
+    // 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>`;
     s.appendChild(ul);
     b.appendChild(s);
   });
+  // The tab says how many runs wait on you, so a background tab still tells you.
+  const nw = store.S.cards.filter((c) => c.kind === "run" && c.status === "waiting" && !c.archived).length;
+  document.title = nw ? `(${nw}) kaizen` : "kaizen";
   stopDictation(false); // forms were just rebuilt; a listener whose field is gone would write into nothing
   if (fk && document.activeElement === document.body) cardEl(fk)?.focus({ preventScroll: true });
 }
+// The header filter box lives outside #board, so a redraw keeps what is typed; draft() keeps it over a reload.
+export function filterBox() {
+  const el = $("bq");
+  draft(el, "bq");
+  query = el.value;
+  el.addEventListener("input", () => {
+    query = el.value;
+    render();
+  });
+  el.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      el.value = "";
+      el.dispatchEvent(new Event("input"));
+      el.blur();
+    }
+  });
+}
+// Phones: the footer's status strip opens as a sheet under the filter button; a press outside closes it.
+export function statusSheet() {
+  const b = $("fbtn"),
+    f = document.querySelector(".ftr");
+  const set = (on) => {
+    f.classList.toggle("on", on);
+    b.setAttribute("aria-expanded", on);
+    if (on) f.style.top = b.getBoundingClientRect().bottom + 6 + "px";
+  };
+  b.onclick = () => set(!f.classList.contains("on"));
+  document.addEventListener("pointerdown", (e) => {
+    if (f.classList.contains("on") && !f.contains(e.target) && !b.contains(e.target)) set(false);
+  });
+  document.addEventListener("keydown", (e) => e.key === "Escape" && f.classList.contains("on") && set(false));
+}
 export const focusedKey = () => document.activeElement?.closest?.("#board .card")?.dataset.k;
 export const cardEl = (k) => k && $("board").querySelector('.card[data-k="' + CSS.escape(k) + '"]');
 // Arrows and hjkl, as on the terminal board: up/down within a column, left/right to the

package/web/board/keys.ts

@@ -39,6 +39,11 @@ export function initKeys() {
       $("sq").focus();
       return;
     }
+    if (e.key === "/" && view === "board" && $("bq")) {
+      e.preventDefault();
+      $("bq").focus();
+      return;
+    }
     if (e.key === "Escape") {
       $("help").classList.remove("on");
       if (store.mode) {

package/web/board/main.ts

@@ -9,6 +9,7 @@ import { initViews } from "./views.ts";
 import { initProjects } from "./projects.ts";
 import { initUpdate } from "./update.ts";
 import { initKeys } from "./keys.ts";
+import { filterBox, statusSheet } from "./cards.ts";
 import { initLive } from "./live.ts";
 import { store } from "./store.ts";
 
@@ -18,6 +19,8 @@ initProjects();
 initUpdate();
 initKeys();
 initLive();
+filterBox();
+statusSheet();
 
 // One popup at a time: a press anywhere first shuts every open popup it is not inside,
 // before any handler runs (several stop propagation), so the one it opens is the only one

package/web/board/update.ts

@@ -9,53 +9,52 @@ import { view } from "./views.ts";
 // is a quiet row whose Check for updates asks npm now instead of the server's 6 h cache.
 let upd = null,
   ver = null;
-function gotVer(v) {
+export function gotVer(v) {
   ver = v;
-  if (!v.update) return false;
-  upd = v;
+  upd = v.update ? v : null;
   const a = document.querySelector('.rail a[data-view="settings"]');
-  a.classList.add("upd");
-  a.title = `Settings: kaizen ${v.latest} is available`;
-  return true;
+  a.classList.toggle("upd", !!upd);
+  a.title = upd ? `Settings: kaizen ${v.latest} is available` : "Settings";
+  return !!upd;
 }
 export function updBar() {
+  const d = document.createElement("div");
+  d.className = `updbar${upd ? "" : " quiet"}`;
   if (!upd) {
-    const d = document.createElement("div");
-    d.className = "updbar quiet";
     d.innerHTML = `<span id="upd-msg" aria-live="polite">${ver ? `You are running kaizen ${esc(ver.version)}.` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
-    $("pbody").prepend(d);
-    const b = $("upd-chk");
-    b.onclick = async () => {
-      b.disabled = true;
-      b.textContent = "Checking…";
-      const v = await fetch("/version?fresh=1")
-        .then((r) => r.json())
-        .catch(() => null);
-      if (!d.isConnected) return;
-      b.disabled = false;
-      b.textContent = "Check for updates";
-      if (v && gotVer(v)) {
-        d.remove();
-        updBar();
-        $("upd-go").focus();
-        return;
-      }
-      $("upd-msg").textContent =
-        !v || !v.latest ? "Could not reach npm. Try again later." : `kaizen ${v.version} is up to date.`;
-    };
-    return;
+  } 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>`
+      : "";
+    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>`;
   }
-  const d = document.createElement("div");
-  d.className = "updbar";
-  // 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>`
-    : "";
-  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 pri" id="upd-go">Update kaizen</button></span>`;
   $("pbody").prepend(d);
+  const check = $("upd-chk");
+  check.onclick = async () => {
+    check.disabled = true;
+    check.textContent = "Checking…";
+    const v = await fetch("/version?fresh=1")
+      .then((r) => r.json())
+      .catch(() => null);
+    if (!d.isConnected) return;
+    check.disabled = false;
+    if (!v || !v.latest) {
+      if (upd) check.textContent = "Could not check. Try again";
+      else $("upd-msg").textContent = "Could not reach npm. Try again later.";
+      return;
+    }
+    gotVer(v);
+    d.remove();
+    updBar();
+    if (upd) $("upd-go").focus();
+    else {
+      $("upd-msg").textContent = `kaizen ${v.version} is up to date.`;
+      $("upd-chk").focus();
+    }
+  };
+  if (!upd) return;
   const b = $("upd-go");
   b.onclick = async () => {
     if (!confirm(`Update kaizen to ${upd.latest}? The board restarts, and agents running inside cards stop.`)) return;

package/web/board.html

@@ -59,6 +59,14 @@ svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke
 [data-rail=min] .theme{flex-direction:column}
 [data-rail=min] .theme button{width:34px;flex:none}
 @media(max-width:640px){#fold{display:none}}
+/* phones: the side menu is a bottom tab bar, in the page flow so nothing sits under it; it owns the bottom safe area */
+@media(max-width:640px){body{flex-direction:column;padding-bottom:0}.app{flex:1;min-height:0}
+.rail,[data-rail=min] .rail{order:2;width:auto;flex-direction:row;align-items:stretch;gap:0;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg-2);overflow:visible}
+.rail .top,.rail .end,.rail .theme{display:none}
+.rail a.it,[data-rail=min] .rail a.it{flex:1;width:auto;flex-direction:column;justify-content:center;gap:2px;height:auto;min-height:48px;padding:4px 0;font-size:11px}
+.rail a.it[aria-current=page]{background:none;color:var(--accent)}
+[data-rail=min] .rail .lbl{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
+body .rail a.upd::after{left:calc(50% + 6px);top:4px}body .toast{left:16px;bottom:calc(68px + env(safe-area-inset-bottom))}}
 /* end side menu */
 /* the work area: an inset rounded panel on the canvas the side menu sits on */
 .app{flex:1;min-width:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@@ -81,6 +89,8 @@ select.sel,button.sel{cursor:pointer;appearance:none;padding-right:30px;max-widt
 /* project picker: a select-shaped button over a searchable list */
 .combo{position:relative;max-width:100%;display:flex}
 .combo .menu-pop{left:0;right:auto;top:calc(100% + 4px);width:320px;max-width:calc(100vw - 32px);gap:6px;z-index:9}
+/* phones: the right-hand combo opens leftward, so its list stays on screen */
+@media(max-width:640px){#showc .menu-pop{left:auto;right:0}}
 .combo[hidden],.combo .menu-pop[hidden]{display:none}
 .combo input.sel{width:100%;max-width:none}
 #ndc>.sel{width:100%;max-width:none;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -166,6 +176,10 @@ section h2 .clear{margin-left:auto;min-height:22px;padding:0 8px}
 .card:hover .age,.card.menu .age{display:none}
 .c-title{font-size:13px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
 .c-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
+.card .act{align-self:flex-start;min-height:24px;padding:0 10px;font-size:12px}
+.card.compact{flex-direction:row;align-items:center;gap:8px;padding:7px 12px}.card.compact .c-id{display:contents}.card.compact .idt{display:none}.card.compact .c-title{order:1;flex:1;min-width:0;-webkit-line-clamp:1}.card.compact .age{order:2}.card.compact .more{order:3}.card.compact .c-foot,.card.compact .kids{display:none}
+section li.hint{display:block;padding:14px;border:1px dashed var(--line);border-radius:var(--r-s);color:var(--dim);font-size:12px;text-align:center}
+#bq{width:220px;min-height:30px}
 .c-chips{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
 .c-marks{display:flex;align-items:center;gap:6px;color:var(--dim);margin-left:auto}
 .mk{display:grid;place-items:center;font-size:11px;font-weight:500}
@@ -226,6 +240,9 @@ aside.wide{width:100%;border-left:0}#pbody:has(.term){display:flex;flex-directio
 .ftr{display:flex;justify-content:space-between;gap:16px;padding:6px 28px;border-top:1px solid var(--line);color:var(--dim);font-size:12px;flex-wrap:wrap;align-items:center}
 .ftr span+span,.ftr a+a{margin-left:14px}.ftr .strip{font-size:12px}.ftr .strip .st{display:inline-grid}
 /* The footer is out of the eye's path, so the waiting alert is filled, not just outlined. */
+/* phones: the status strip moves into a sheet under the header, opened by #fbtn; the dot says a run waits or a filter is on */
+#fbtn{position:relative;display:none}body.paged #fbtn{display:none!important}#fbtn.wait::after,#fbtn.on::after{content:"";position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--bg)}#fbtn.on::after{background:var(--accent)}
+@media(max-width:640px){#fbtn:not([hidden]){display:grid;order:2;flex:none}body .hdr .combo{flex-basis:calc(50% - 30px)}.ftr{display:none}.ftr.on{display:flex;position:fixed;z-index:10;left:12px;right:12px;padding:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2)}}
 .ftr .strip .attn{color:var(--ink);background:color-mix(in srgb,var(--warn) 18%,transparent);box-shadow:inset 0 0 0 1px var(--warn)}.ftr .strip .attn:hover,.ftr .strip .attn.on{background:color-mix(in srgb,var(--warn) 30%,transparent)}.ftr .strip .attn svg{color:var(--warn)}.ftr .st svg{width:12px;height:12px}
 .ftr a{color:var(--dim);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:5px}.ftr a>svg{width:13px;height:13px}.ftr a:hover{color:var(--ink)}
 
@@ -235,7 +252,7 @@ aside.wide{width:100%;border-left:0}#pbody:has(.term){display:flex;flex-directio
 aside{position:fixed;top:0;right:0;bottom:0;z-index:11;width:520px;max-width:100%;background:var(--bg-2);border-left:1px solid var(--line);box-shadow:var(--shadow-2);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .18s,visibility .18s}
 aside.open{transform:none;visibility:visible}
 /* Settings and the Icebox are pages: the same panel, docked into the app column, full width like the board */
-body.paged #board,body.paged .ftr,body.paged .scrim{display:none}
+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}
 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}
@@ -448,7 +465,7 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
 .src-add .acts .btn{flex-shrink:0}
 @media(max-width:480px){.src-add .two,.src-add .two.plat{grid-template-columns:1fr}}
 @media(max-width:900px){main{grid-template-columns:1fr;padding-inline:16px;gap:8px}.hdr,.ftr,aside.docked>header,aside.docked>.body{padding-inline:16px}.more{display:grid}.card:hover .age{display:inline}.toast{left:16px;max-width:calc(100% - 32px)}}
-@media(max-width:640px){.hdr{gap:8px 12px}.hdr h1{order:0;flex:1 0 50%}#newtop{order:1}.hdr .combo{order:2;flex:1 1 calc(50% - 6px);min-width:0}.hdr .combo>.sel{width:100%;max-width:none}.hdr .sp{display:none}.ftr{gap:6px 12px}}
+@media(max-width:640px){.hdr{gap:8px 12px}.hdr h1{order:0;flex:1 0 50%}#newtop{order:1}.hdr .combo{order:2;flex:1 1 calc(50% - 6px);min-width:0}.hdr .combo>.sel{width:100%;max-width:none}.hdr .sp{display:none}#bq{order:3;flex:1 0 100%;width:auto}.ftr{gap:6px 12px}}
 @media(hover:none){#kbd{display:none}}
 .skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 45%,transparent) 50%,var(--line) 75%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@@ -473,6 +490,7 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
 <symbol id="i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6"/></symbol>
 <symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></symbol>
 <symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></symbol>
+<symbol id="i-filter" viewBox="0 0 24 24"><path d="M4 5h16l-6 8v6l-4-2v-4z"/></symbol>
 <symbol id="i-note" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></symbol>
 <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6"/></symbol>
 <symbol id="i-term" viewBox="0 0 24 24"><path d="M4 17l6-5-6-5M12 19h8"/></symbol>
@@ -543,6 +561,8 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
   <h1>Board</h1>
   <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">
   <span class="sp"></span>
   <button class="btn pri" id="newtop">New idea</button>
 </div>