kaizen-agent 1.38.1 → 1.40.0

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.
@@ -76,7 +84,9 @@ function card(c) {
       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>`);
   }
-  if (c.pty && c.pty.alive)
+  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"));
+  else if (c.pty && c.pty.alive)
     marks.push(mk("i-term", "The agent is running in this card: open it, terminal button at the top", " run"));
   // A gathered idea's notes open with the stamp promote() writes (ingest() wrote it before
   // the icebox); its chip names the source.
@@ -98,10 +108,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 +182,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 +206,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 +399,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 +440,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 +490,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 +683,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/icebox.ts

@@ -222,22 +222,22 @@ export async function openSources() {
               : `<span class="src-badge warn"><svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" stroke="currentColor" fill="none" stroke-width="1.8"/><path d="M8 5v3.5M8 11v.1" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round"/></svg>Failed: ${esc(s.last.note)}</span><span class="hint" style="margin:0">${ago(s.last.at)}</span>`;
       const kind = st === "sheet" ? "sheet" : st === "doc" ? "doc" : st === "social" ? "at" : "link",
         bare = s.url.replace(/^https?:\/\/(www\.)?/, "");
-      return `<div class="src-card" id="src-card-${i}"><div class="src-hd"><span class="src-ico" title="${st === "social" ? esc(PLAT[s.social] || "social") : st}">${fav(s.url, kind, s.social)}</span><div class="src-info"><span class="src-title" title="${esc(title)}">${esc(title)}</span><a class="src-url" href="${esc(s.url)}" target="_blank" rel="noopener noreferrer" title="${esc(s.url)}"><span>${esc(bare)}</span>${ico("ext")}</a></div><div class="src-acts">${s.social ? `<button class="ib sm" id="src-ag-${i}" data-ag="${i}" aria-label="Gather ${esc(title)} with your agent" title="${chatOn ? "Gather with your ChatGPT plan" : "Gather: opens your agent on /kaizen gather"}">${ico("refresh")}</button>` : `<button class="ib sm" id="src-chk-${i}" data-chk="${i}" aria-label="Check ${esc(title)} now" title="Check now">${ico("refresh")}</button>`}<button class="ib sm danger" id="src-rm-${i}" data-rm="${i}" aria-label="Remove ${esc(title)}" title="Remove source">${ico("trash")}</button></div></div><div class="src-status">${statusHtml}</div><div class="src-fields"><label class="src-f" title="Category"><span>Category</span><input class="sel" id="src-ct-${i}" data-ct="${i}" data-k="${esc(s.dir + " " + s.url)}" value="${esc(s.category || "")}" placeholder="${esc(platOf(s))}" maxlength="40" aria-label="Category of ${esc(title)}"><button class="btn sm pri" id="src-cs-${i}" aria-label="Save the category of ${esc(title)}" disabled>Save</button></label><label class="src-f" title="Project"><span>Project</span>${plogo(s.dir, s.project || "")}<select class="sel" id="src-mv-${i}" data-mv="${i}" data-k="${esc(s.dir + " " + s.url)}" aria-label="Project of ${esc(title)}">${opts(s.dir, s.project)}</select><button class="btn sm pri" id="src-mb-${i}" aria-label="Move ${esc(title)} to the chosen project" disabled>Move</button></label>${st === "sheet" || /github\.com/.test(s.url) ? `<label class="src-wb"><input type="checkbox" id="src-wb-${i}" data-wb="${i}"${s.writeback ? " checked" : ""}> ${st === "sheet" ? "Mark the row Done" : "Comment and close the issue"} when its run is done</label>` : ""}</div></div>`;
+      return `<div class="src-card" id="src-card-${i}"><div class="src-hd"><span class="src-ico" title="${st === "social" ? esc(PLAT[s.social] || "social") : st}">${fav(s.url, kind, s.social)}</span><div class="src-info"><span class="src-title" title="${esc(title)}">${esc(title)}</span><a class="src-url" href="${esc(s.url)}" target="_blank" rel="noopener noreferrer" title="${esc(s.url)}"><span>${esc(bare)}</span>${ico("ext")}</a></div><div class="src-acts">${s.social ? `<button class="ib sm" id="src-ag-${i}" data-ag="${i}" aria-label="Gather ${esc(title)} with your agent" title="${chatOn ? "Gather with your ChatGPT plan" : "Gather: opens your agent on /kaizen gather"}">${ico("refresh")}</button>` : `<button class="ib sm" id="src-chk-${i}" data-chk="${i}" aria-label="Check ${esc(title)} now" title="Check now">${ico("refresh")}</button>`}<button class="ib sm danger" id="src-rm-${i}" data-rm="${i}" aria-label="Remove ${esc(title)}" title="Remove source">${ico("trash")}</button></div></div><div class="src-status">${statusHtml}</div><div class="src-fields"><label class="src-f" title="Category"><span>Category</span><input class="sel" id="src-ct-${i}" data-ct="${i}" data-k="${esc(s.dir + " " + s.url)}" value="${esc(s.category || "")}" placeholder="${esc(platOf(s))}" maxlength="40" aria-label="Category of ${esc(title)}"><button class="btn sm pri" id="src-cs-${i}" aria-label="Save the category of ${esc(title)}" disabled>Save</button></label><label class="src-f" title="Project"><span>Project</span>${plogo(s.dir, s.project || "")}<select class="sel" id="src-mv-${i}" data-mv="${i}" data-k="${esc(s.dir + " " + s.url)}" aria-label="Project of ${esc(title)}">${opts(s.dir, s.project)}</select><button class="btn sm pri" id="src-mb-${i}" aria-label="Move ${esc(title)} to the chosen project" disabled>Move</button></label>${st === "sheet" || /github\.com/.test(s.url) ? `<label class="src-wb"><input type="checkbox" id="src-wb-${i}" data-wb="${i}"${s.writeback ? " checked" : ""}> Write back</label>` : ""}</div></div>`;
     })
     .join("");
   const fails = ((d && d.failed) || [])
     .map((f) => `<p style="color:var(--dim)">The sources of ${esc(f)} could not be read.</p>`)
     .join("");
-  const emptyState = `<div class="src-empty"><div class="src-empty-ico">${ico("link")}</div><h4>No request sources yet</h4><p>Connect shared links to gather requests into the icebox, where you choose which become ideas. Nothing runs automatically until you start it.</p><div class="src-empty-grid"><div class="src-empty-item"><strong>Google Sheets</strong>Public sheets with idea or task rows. Rows marked Done are skipped.</div><div class="src-empty-item"><strong>Google Docs</strong>Shared public docs with items or notes written line by line.</div><div class="src-empty-item"><strong>Public links</strong>TSV, CSV, or raw text links containing requests.</div><div class="src-empty-item"><strong>Social media</strong>A keyword, #hashtag or @account on X, TikTok, Instagram or Threads, read by your agent.</div></div></div>`;
+  const emptyState = `<div class="src-empty"><div class="src-empty-ico">${ico("link")}</div><h4>No sources yet</h4></div>`;
   const social = srcKind === "social";
   const addOn = !list.length || srcAdd || [typed[0], typed[1], typed[4], typed[6]].some(Boolean);
-  const addBox = `<div class="src-add" id="src-addbox"${addOn ? "" : " hidden"}><div class="hd"><h4>Add a source</h4><div class="src-kind" role="group" aria-label="Kind of source"><button id="src-k-link" data-kind="link" aria-pressed="${!social}">Link</button><button id="src-k-social" data-kind="social" aria-pressed="${social}">Social</button></div></div><label for="src-url"${social ? " hidden" : ""}><span>Link</span><input class="sel" id="src-url" placeholder="https://docs.google.com/spreadsheets/d/… or any public link" spellcheck="false" autocomplete="off"></label><div class="two plat"${social ? "" : " hidden"}><label for="src-plat"><span>Platform</span><select class="sel" id="src-plat">${Object.entries(
+  const addBox = `<div class="src-add" id="src-addbox"${addOn ? "" : " hidden"}><div class="hd"><h4>Add a source</h4><div class="src-kind" role="group" aria-label="Kind of source"><button id="src-k-link" data-kind="link" aria-pressed="${!social}">Link</button><button id="src-k-social" data-kind="social" aria-pressed="${social}">Social</button></div></div><label for="src-url"${social ? " hidden" : ""}><span>Link</span><input class="sel" id="src-url" placeholder="Link" spellcheck="false" autocomplete="off"></label><div class="two plat"${social ? "" : " hidden"}><label for="src-plat"><span>Platform</span><select class="sel" id="src-plat">${Object.entries(
     PLAT,
   )
     .map(([k, v]) => `<option value="${k}">${v}</option>`)
     .join(
       "",
-    )}</select></label><label for="src-q"><span>Follow</span><input class="sel" id="src-q" placeholder="keyword, #hashtag or @account" maxlength="100" spellcheck="false" autocomplete="off"></label></div><div class="two"><label for="src-label"><span>Label <i>optional</i></span><input class="sel" id="src-label" placeholder="${social ? "e.g. Mentions on X" : "e.g. Feedback Q4"}"></label><label for="src-cat"><span>Category <i>optional</i></span><input class="sel" id="src-cat" placeholder="${social ? "e.g. Social" : "e.g. Bugs"}" maxlength="40"></label></div><label for="src-dir"><span>Project</span><select class="sel" id="src-dir">${dir ? "" : `<option value="">Choose project…</option>`}${opts(dir)}</select></label><div class="acts"><span class="hint">${social ? (chatOn ? "Your ChatGPT plan reads public posts when you press Gather on the source." : "Kaizen signs in nowhere. Your agent reads public posts when you press Gather on the source.") : "Public links only. For private docs, run /kaizen gather."}</span><button class="btn pri" id="src-add">Add source</button></div></div>`;
+    )}</select></label><label for="src-q"><span>Follow</span><input class="sel" id="src-q" placeholder="keyword, #hashtag or @account" maxlength="100" spellcheck="false" autocomplete="off"></label></div><div class="two"><label for="src-label"><span>Label <i>optional</i></span><input class="sel" id="src-label" placeholder="${social ? "e.g. Mentions on X" : "e.g. Feedback Q4"}"></label><label for="src-cat"><span>Category <i>optional</i></span><input class="sel" id="src-cat" placeholder="${social ? "e.g. Social" : "e.g. Bugs"}" maxlength="40"></label></div><label for="src-dir"><span>Project</span><select class="sel" id="src-dir">${dir ? "" : `<option value="">Choose project…</option>`}${opts(dir)}</select></label><div class="acts"><span class="end"></span><button class="btn pri" id="src-add">Add source</button></div></div>`;
   // The inbox: one row per request, by project when showing all, then by category,
   // narrowed to one source by its chip. Checked, open and cursor items are kept by key.
   const srcName = (it) => {
@@ -340,21 +340,21 @@ export async function openSources() {
               .join(""),
         )
       : "");
-  const bar = `<div class="ice-bar">${order.length ? `<input type="checkbox" id="ice-all" aria-label="Select every request shown"${nSel && nSel === order.length ? " checked" : ""}>` : ""}<span class="count">${iceCat === "Dismissed" || iceCat === "Done" ? `${order.length} ${iceCat.toLowerCase()}` : `${order.length < waiting ? `${order.length} of ${waiting}` : waiting} waiting`}</span>${chips}<span class="end"></span><button class="btn sm" id="src-go"${list.length ? "" : " disabled"}>${ico("refresh")} Gather all</button><button class="btn ghost sm" id="src-tog" aria-expanded="${srcShow ?? !list.length}" aria-controls="src-sec">${ico("link")} Sources · ${list.length}</button></div>`;
+  const bar = `<div class="ice-bar">${order.length ? `<input type="checkbox" id="ice-all" aria-label="Select every request shown"${nSel && nSel === order.length ? " checked" : ""}>` : ""}<span class="count">${iceCat === "Dismissed" || iceCat === "Done" ? `${order.length} ${iceCat.toLowerCase()}` : `${order.length < waiting ? `${order.length} of ${waiting}` : waiting} waiting`}</span><span class="end"></span>${chips ? `<details class="ice-filt"><summary class="ib${iceCat || iceSrc ? " on" : ""}" aria-label="Filter requests" title="Filter requests">${ico("filter")}</summary><div class="ice-fpop">${chips}</div></details>` : ""}<button class="btn sm" id="src-go"${list.length ? "" : " disabled"}>${ico("refresh")} Gather all</button><button class="btn ghost sm" id="src-tog" aria-expanded="${srcShow ?? !list.length}" aria-controls="src-sec">${ico("link")} Sources · ${list.length}</button></div>`;
   const bulk = iceSel.size
-    ? `<div class="ice-bulk" role="toolbar" aria-label="Selected requests"><span>${iceSel.size} selected</span><span class="end"></span><button class="btn sm" id="ice-bp" title="Each becomes its own idea, titled as gathered (p)">${ico("plus")} Promote</button><button class="btn ghost sm" id="ice-bd" title="Dismiss (d)">${ico("x")} Dismiss</button><button class="btn ghost sm" id="ice-bc" title="Clear selection (Esc)">Clear</button></div>`
+    ? `<div class="ice-bulk" role="toolbar" aria-label="Selected requests"><span>${iceSel.size} selected</span><span class="end"></span><button class="btn sm" id="ice-bp" title="Promote (p)">${ico("plus")} Promote</button><button class="btn ghost sm" id="ice-bd" title="Dismiss (d)">${ico("x")} Dismiss</button><button class="btn ghost sm" id="ice-bc" title="Clear selection (Esc)">Clear</button></div>`
     : "";
   // The open item's form: a clean title for the idea's card and the person's own details;
   // what was gathered is added to the idea's notes by the server.
   const form = (it) =>
-    `<div class="ice-form"><label for="ice-title" class="hint" style="margin:0">Idea title</label><input class="sel" id="ice-title" data-k="${esc(iceKey(it))}" maxlength="200" value="${esc(it.text)}" aria-label="Idea title"><label for="ice-details" class="hint" style="margin:0">Details</label><textarea class="sel" id="ice-details" rows="3" placeholder="What, for whom, why" aria-label="Details"></textarea><div class="ice-form-acts"><span class="hint">Source goes into the notes.</span><button class="btn ghost sm" id="ice-cancel">Cancel</button><button class="btn pri sm" id="ice-ok">Promote</button></div></div>`;
+    `<div class="ice-form"><label for="ice-title" class="hint" style="margin:0">Idea title</label><input class="sel" id="ice-title" data-k="${esc(iceKey(it))}" maxlength="200" value="${esc(it.text)}" aria-label="Idea title"><label for="ice-details" class="hint" style="margin:0">Details</label><textarea class="sel" id="ice-details" rows="3" aria-label="Details"></textarea><div class="ice-form-acts"><span class="end"></span><button class="btn ghost sm" id="ice-cancel">Cancel</button><button class="btn pri sm" id="ice-ok">Promote</button></div></div>`;
   // A gathered post can be answered: Reply drafts, the box is the approval, Send reply posts that text.
   const replyBox = (it) => {
     if (!it.post) return "";
     if (it.replied) return `<span class="hint" style="margin:0">You replied to this post ${ago(it.replied)}.</span>`;
     const r = iceReply && iceReply.k === iceKey(it) ? iceReply : null;
     const style = (d) =>
-      `<select class="sel" id="ice-rst" aria-label="Reply style" title="Promo names kaizen; Helpful may mention it when it fits; Casual and Fun never do"${d ? " disabled" : ""}>${Object.entries(
+      `<select class="sel" id="ice-rst" aria-label="Reply style"${d ? " disabled" : ""}>${Object.entries(
         STYLES,
       )
         .map(([v, l]) => `<option value="${v}"${v === rStyle(it.dir) ? " selected" : ""}>${l}</option>`)
@@ -377,10 +377,10 @@ export async function openSources() {
   };
   const inbox =
     waiting && !order.length
-      ? `<div class="ice-zero"><h4>Nothing matches</h4><p>${waiting} waiting outside these filters.</p><p style="margin-top:10px"><button class="btn sm" id="ice-unf">Clear filters</button></p></div>`
+      ? `<div class="ice-zero"><h4>No matches</h4><p style="margin-top:10px"><button class="btn sm" id="ice-unf">Clear filters</button></p></div>`
       : order.length
         ? `<div class="ice-list">${[...groups].map(([g, ix]) => `<div class="ice-cat">${esc(g)}<i>${ix.length}</i></div>${ix.map(row).join("")}`).join("")}</div>`
-        : `<div class="ice-zero"><h4>Inbox zero</h4><p>Nothing waiting. Gather all checks your sources for new requests; /kaizen discover in your agent sorts what comes in.</p></div>`;
+        : `<div class="ice-zero"><h4>Nothing waiting</h4></div>`;
   // The sources, in the right-hand drawer: shut until asked for, open by itself while there
   // are none until closed. Slid in only when opened; a rebuild while open shows it in place.
   const drawer = srcShow ?? !list.length,
@@ -389,7 +389,7 @@ export async function openSources() {
   // First visit: offer the ChatGPT plan for social sources, or keep the agent.
   const onb =
     G.use === "ask" && !G.connected
-      ? `<div class="cg-onb"><b>Gather social posts with your ChatGPT plan</b><p>Connect ChatGPT Plus or Pro and Gather reads X, TikTok, Instagram and Threads sources right here, counted against your plan, with no agent to open. Skip it and Gather keeps using your agent. You can change this in Settings.</p><div class="acts"><button class="btn ghost" id="cg-skip">Skip for now</button><button class="btn pri" id="cg-go">Continue with ChatGPT</button></div></div>`
+      ? `<div class="cg-onb"><div class="acts"><b>Gather social posts with ChatGPT?</b><span class="end"></span><button class="btn ghost" id="cg-skip">Skip</button><button class="btn pri" id="cg-go">Connect</button></div></div>`
       : "";
   // A rebuild replaces the drawer: keep where it was scrolled to.
   const at = $("src-sec")?.querySelector(".body")?.scrollTop ?? 0;
@@ -460,7 +460,6 @@ export async function openSources() {
   if ($("cg-skip"))
     $("cg-skip").onclick = async () => {
       if ((await post("/chatgpt", { op: "skip" })).ok) {
-        toast("Gather keeps using your agent");
         openSources();
       }
     };
@@ -550,7 +549,7 @@ export async function openSources() {
       })();
       b.onclick = () =>
         act({ op: "move", dir: s.dir, to: m.value, url: s.url }, () =>
-          toast(`Source moved. Requests already gathered stay in ${s.project || "the old project"}.`),
+          toast("Source moved"),
         );
     });
   $("pbody")
@@ -568,7 +567,7 @@ export async function openSources() {
           return;
         }
         act({ op: "writeback", dir: s.dir, url: s.url, on: m.checked }, () =>
-          toast(m.checked ? "Done requests will be written back" : "Write back off"),
+          toast(m.checked ? "Write back on" : "Write back off"),
         );
       };
     });
@@ -967,7 +966,7 @@ export async function openSources() {
         );
         if (j.ok && social) {
           $("src-q").value = $("src-label").value = $("src-cat").value = "";
-          toast("Source added. Click Gather on it to have your agent read its posts.");
+          toast("Source added");
           load();
         } else if (j.ok) {
           $("src-url").value = $("src-label").value = $("src-cat").value = "";

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/settings.ts

@@ -44,8 +44,8 @@ export async function openSettings() {
     .then((r) => r.json())
     .catch(() => ({}));
   if (gen !== store.pageGen) return;
-  $("psub").textContent = "Theme applies to this browser. Everything else is saved to your kaizen settings.";
-  $("psub").title = cfg ? cfg.file : "";
+  $("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.
   const ctl = (id, vals, on) => {
@@ -64,15 +64,12 @@ export async function openSettings() {
     return `<select class="sel" id="${id}">${vals.map((v) => `<option value="${esc(v)}"${v === on ? " selected" : ""}>${v === "" ? "—" : esc(v)}</option>`).join("")}</select>`;
   };
   const row = (label, control, hint, id, q) =>
-    `<div class="srow" data-q="${esc(q.toLowerCase())}"><label for="${id}">${esc(label)}</label>${control}<p class="hint">${hint}</p></div>`;
+    `<div class="srow" data-q="${esc(q.toLowerCase())}"><label for="${id}">${esc(label)}</label>${control}${hint ? `<p class="hint">${hint}</p>` : ""}</div>`;
   const hadFocus = document.activeElement?.id === "sq";
   const np = typeof Notification === "undefined" ? null : Notification.permission;
-  const ntHelp =
-    "A desktop notification when a run starts waiting on you." +
-    (np ? (np === "denied" ? " Blocked in this browser's site settings." : "") : " Not supported in this browser.");
-  const names = [...(cfg ? groups(cfg.rows).map(([g]) => g) : []), "Google", "Browser"];
+  const ntHelp = np ? (np === "denied" ? "Blocked by this browser" : "") : "Not supported in this browser";
   $("pbody").innerHTML =
-    `<div class="sq"><input class="sel" id="sq" type="search" placeholder="Search settings" aria-label="Search settings" spellcheck="false" autocomplete="off" value="${esc(store.setQ)}"><div class="sjump" role="group" aria-label="Jump to section">${names.map((g) => `<button data-g="${esc(g)}">${esc(g)}</button>`).join("")}</div></div>
+    `<div class="sq"><input class="sel" id="sq" type="search" placeholder="Search settings" aria-label="Search settings" spellcheck="false" autocomplete="off" value="${esc(store.setQ)}"></div>
   ${
     cfg
       ? groups(cfg.rows)
@@ -98,47 +95,30 @@ export async function openSettings() {
           .join("")
       : `<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", `<input class="sel" id="gg-id" placeholder="${gg.hasClient ? "saved; type to replace" : "from Google Cloud, Desktop app"}" spellcheck="false" autocomplete="off">`, "Kaizen writes Done into a sheet through your own Google client: create an OAuth client of type Desktop app in Google Cloud and enable the Sheets API. Nothing is shared with other installs.", "gg-id", "google oauth client id sheets write back")}
-  ${row("OAuth client secret", `<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>`, "Kept in ~/.kaizen/google.json, readable only by you. Saving a new client signs Google out.", "gg-secret", "google oauth client secret")}
-  ${row("Google account", `<button class="btn${gg.connected ? "" : " pri"}" id="gg-conn" type="button"${gg.hasClient || gg.connected ? "" : " disabled"}>${gg.connected ? "Disconnect" : "Connect"}</button>`, gg.connected ? "Connected. Sources with Write back on put Done in the sheet row once their run is done." : "Connect after saving the client. Needed only for Write back on sheet sources.", "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), "Light or dark for this browser only; system follows your device.", "th", "theme light dark system browser")}
+  <h3 class="sg">Google</h3><div class="sgrp">${row("OAuth client id", `<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", `<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")}
+  ${row("Google account", `<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", `<button class="chk${np === "granted" ? " on" : ""}" id="nt" role="switch" aria-checked="${np === "granted"}"${np && np !== "denied" ? "" : " disabled"}></button>`, ntHelp, "nt", "notifications " + ntHelp + " browser")}</div>
   <p class="snone" id="snone" hidden></p>`;
   // Hides rows that do not match, then any group (and its chip) left with none.
   updBar();
-  const heads = [...$("pbody").querySelectorAll(".sg")],
-    chips = [...$("pbody").querySelectorAll(".sjump button")];
+  const heads = [...$("pbody").querySelectorAll(".sg")];
   const filter = () => {
     const q = store.setQ.trim().toLowerCase();
     let any = false;
-    heads.forEach((h, i) => {
+    heads.forEach((h) => {
       let vis = false;
       for (const n of h.nextElementSibling.children) {
         n.hidden = !!q && !n.dataset.q.includes(q);
         vis ||= !n.hidden;
       }
       h.hidden = !vis;
-      if (chips[i]) chips[i].hidden = !vis;
       any ||= vis;
     });
     $("snone").hidden = any;
     $("snone").textContent = `No setting matches “${store.setQ.trim()}”.`;
   };
-  // Scrolled by measure: the pinned bar's height changes as the chips wrap.
-  chips.forEach(
-    (b, i) =>
-      (b.onclick = () => {
-        const pb = $("pbody");
-        pb.scrollTo({
-          top:
-            pb.scrollTop +
-            heads[i].getBoundingClientRect().top -
-            pb.querySelector(".sq").getBoundingClientRect().bottom -
-            8,
-          behavior: "smooth",
-        });
-      }),
-  );
   $("sq").oninput = (e) => {
     store.setQ = e.target.value;
     filter();

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;
+    d.innerHTML = `<span id="upd-msg" aria-live="polite">${ver ? `kaizen ${esc(ver.version)}` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
+  } 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;