kaizen-agent 1.34.11 → 1.35.0

package/cli/logo.test.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "bun:test";
+import { mkdtempSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { projectLogo } from "./logo.ts";
+
+test("projectLogo finds a fixed-name logo and nothing else", () => {
+  const root = mkdtempSync(join(tmpdir(), "kz-logo-"));
+  mkdirSync(join(root, ".kaizen"));
+  expect(projectLogo(join(root, ".kaizen"))).toBeNull();
+  writeFileSync(join(root, "brand.png"), "x");
+  expect(projectLogo(join(root, ".kaizen"))).toBeNull();
+  mkdirSync(join(root, "public"));
+  writeFileSync(join(root, "public", "favicon.svg"), "<svg/>");
+  expect(projectLogo(join(root, ".kaizen"))).toBe(join(root, "public", "favicon.svg"));
+  writeFileSync(join(root, "logo.png"), "x");
+  expect(projectLogo(join(root, ".kaizen"))).toBe(join(root, "logo.png"));
+});

package/cli/logo.ts

@@ -0,0 +1,20 @@
+// A project's logo, when it has one: the first of a fixed list of files in the project
+// folder (the parent of its .kaizen). Fixed names only, so the board never serves a path
+// a request chose.
+import { existsSync, statSync } from "node:fs";
+import { dirname, join } from "node:path";
+
+export const LOGO_TYPES: Record<string, string> = { png: "image/png", svg: "image/svg+xml", jpg: "image/jpeg", webp: "image/webp", ico: "image/x-icon" };
+const NAMES = ["logo", "icon", "favicon"];
+const DIRS = ["", "assets", "public", "static", ".github", "docs", "web"];
+
+export function projectLogo(stateDir: string): string | null {
+  const root = dirname(stateDir);
+  for (const d of DIRS)
+    for (const n of NAMES)
+      for (const e of Object.keys(LOGO_TYPES)) {
+        const f = join(root, d, `${n}.${e}`);
+        try { if (existsSync(f) && statSync(f).isFile() && statSync(f).size < 2_000_000) return f; } catch {}
+      }
+  return null;
+}

package/cli/web.ts

@@ -11,6 +11,7 @@ import {
 } from "./state.ts";
 import { attachPty, writePty, resizePty, ptyState, ptyKeys, adoptLoginEnv } from "./pty.ts";
 import { readSources, addSource, removeSource, moveSource, setCategory, setWriteback, readIcebox, promote, dismiss, restore, markDone, markReplied, gatherSource, freshImages, gatherAll, gatherDirs, due, socialUrl, socialOf } from "./sources.ts";
+import { projectLogo, LOGO_TYPES } from "./logo.ts";
 import * as chatgpt from "./chatgpt.ts";
 import * as google from "./google.ts";
 import { writeBacks } from "./writeback.ts";
@@ -370,6 +371,16 @@ export async function web(repoDir: string, opts: Opts = {}) {
         return new Response(Bun.file(LOGO), { headers: { "content-type": "image/png", "cache-control": "max-age=86400" } });
       }
 
+      // A project's own logo, for the project pickers: only a known project, only the fixed
+      // names in LOGOS, sandboxed so an SVG opened directly runs nothing on this origin.
+      if (req.method === "GET" && path === "/project-logo") {
+        const dir = url.searchParams.get("dir") ?? "";
+        const f = states(true).includes(dir) ? projectLogo(dir) : null;
+        if (!f) return bad("no logo", 404);
+        const ext = f.slice(f.lastIndexOf(".") + 1).toLowerCase();
+        return new Response(Bun.file(f), { headers: { "content-type": LOGO_TYPES[ext], "content-security-policy": "sandbox", "x-content-type-options": "nosniff", "cache-control": "max-age=300" } });
+      }
+
       // Lets a phone add the board to its home screen as a standalone app.
       if (req.method === "GET" && path === "/manifest.webmanifest") {
         return new Response(JSON.stringify({
@@ -408,7 +419,7 @@ export async function web(repoDir: string, opts: Opts = {}) {
           marks.set(d, cardsGit(d, cards.filter((c) => markable(c) && c.state === d).map((c) => c.id!)));
         return json({
           project, all, dir: state,
-          projects: picker.map((d) => ({ dir: d, label: label(d) })),
+          projects: picker.map((d) => ({ dir: d, label: label(d), logo: !!projectLogo(d) })),
           fresh: unset.map((d) => ({ dir: join(d, ".kaizen"), label: tilde(d) })),
           cards: cards.map((c) => ({ ...c, notice: notice(c), git: markable(c) ? marks.get(c.state)?.[c.id!] : undefined, pty: ptyOf(c) })),
           now: Date.now(),

package/package.json

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

package/web/board/cards.ts

@@ -7,7 +7,7 @@ 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 { ideaCombo, list, newDir, short, showList, showable } from "./projects.ts";
+import { ideaCombo, list, newDir, plogo, short, showList, showable } from "./projects.ts";
 import { askNotify, toast } from "./toast.ts";
 
 let filter = null;
@@ -227,7 +227,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)}">${esc(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 = `<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.querySelector("[data-a=s]").onclick = async () => {
       const sel = li.querySelector("select"),
         to = sel.value,
@@ -400,7 +400,10 @@ export function render() {
     ["Find projects on this PC…", "__find"],
   ];
   const cur = store.all || !store.S.dir ? "All projects" : (store.PL.find((p) => p[1] === store.S.dir) || ["All projects"])[0];
-  $("proj").textContent = short(cur);
+  $("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>`;
   $("proj").title = cur;
   if (!$("projpop").hidden) list();
   $("showc").hidden = !store.all;
@@ -507,7 +510,7 @@ 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="btn ghost" id="newpick">Attach</button><button class="btn ghost" id="nc">Cancel</button><button class="btn pri" id="ns">Add idea</button></div>`;
+      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 = [];

package/web/board/icebox.ts

@@ -4,7 +4,7 @@ import { load, post } from "./api.ts";
 import { via } from "./cards.ts";
 import { stopDictation } from "./dictation.ts";
 import { $, esc, ico } from "./dom.ts";
-import { setShown, short, showable } from "./projects.ts";
+import { plogo, setShown, short, showable } from "./projects.ts";
 import { toast } from "./toast.ts";
 import { go, view } from "./views.ts";
 
@@ -31,6 +31,8 @@ const rStyle = (dir) => {
 };
 const STYLES = { casual: "Casual", fun: "Fun", helpful: "Helpful", promo: "Promo" };
 export let iceForm = null,
+  // The item whose promote form is showing: opened by its "+", never by opening the row.
+  icePro = null,
   iceCur = null,
   iceSrc = "",
   iceCat = "",
@@ -52,6 +54,60 @@ const ago = (at) => {
         ? Math.round(m / 60) + " h ago"
         : Math.round(m / 1440) + " d ago";
 };
+// A searchable filter picker: the button opens it, typing narrows the rows (a group header
+// stays while any of its rows does), Enter or a click picks.
+function wirePick(id, set) {
+  const c = $(id);
+  if (!c) return;
+  const btn = c.querySelector("button.sel"),
+    pp = c.querySelector(".menu-pop"),
+    q = pp.querySelector("input"),
+    box = pp.querySelector(".pick-list");
+  const show = (on) => {
+    pp.hidden = !on;
+    btn.setAttribute("aria-expanded", on);
+    if (on) {
+      q.value = "";
+      narrow();
+      q.focus();
+    }
+  };
+  const narrow = () => {
+    const t = q.value.trim().toLowerCase();
+    let g = null,
+      any = false;
+    for (const el of box.children) {
+      if (el.classList.contains("grp")) {
+        if (g) g.hidden = !any;
+        g = el;
+        any = false;
+      } else {
+        const hit = !t || el.dataset.q.includes(t) || (g && g.dataset.g.includes(t));
+        el.hidden = !hit;
+        any ||= hit;
+      }
+    }
+    if (g) g.hidden = !any;
+  };
+  btn.onclick = () => show(pp.hidden);
+  q.oninput = narrow;
+  q.onkeydown = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      show(false);
+      btn.focus();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      box.querySelector("button:not([hidden])")?.click();
+    }
+  };
+  box.onclick = (e) => {
+    const b = e.target.closest("button[data-v]");
+    if (!b) return;
+    show(false);
+    set(b.dataset.v);
+  };
+}
 export async function openSources() {
   if (view !== "sources") return;
   const gen = ++store.pageGen;
@@ -126,6 +182,8 @@ export async function openSources() {
           : h + "/favicon.ico";
     return `<span class="fav">${src ? `<img src="${esc(src)}" alt="" loading="lazy" referrerpolicy="no-referrer" onerror="this.remove()">` : ""}${ico(fb)}</span>`;
   };
+  // What a source is called when nothing names it: its platform, else its site.
+  const platOf = (s) => PLAT[s?.social] || (s ? host(s.url).replace(/^www\./, "") : "") || "Other";
   const srcType = (s) => {
     if (s.social) return "social";
     const u = s.url;
@@ -144,10 +202,10 @@ export async function openSources() {
   // a row whose project the picker does not list still gets its own, selected, so Move never points elsewhere.
   const opts = (on, name) =>
     (on && !store.S.projects.some((p) => p.dir === on)
-      ? `<option value="${esc(on)}" selected>${esc(name || on)}</option>`
+      ? `<option value="${esc(on)}" title="${esc(name || on)}" selected>${esc(short(name || on))}</option>`
       : "") +
     store.S.projects
-      .map((p) => `<option value="${esc(p.dir)}"${p.dir === on ? " selected" : ""}>${esc(p.label)}</option>`)
+      .map((p) => `<option value="${esc(p.dir)}" title="${esc(p.label)}"${p.dir === on ? " selected" : ""}>${esc(short(p.label))}</option>`)
       .join("");
   const cards = list
     .map((s, i) => {
@@ -162,7 +220,9 @@ export async function openSources() {
             : s.last.ok
               ? `<span class="src-badge ok"><svg viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-6" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>${esc(s.last.note)}</span><span class="hint" style="margin:0">${ago(s.last.at)}</span>`
               : `<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>`;
-      return `<div class="src-card" id="src-card-${i}"><div class="src-hd"><div class="src-info"><span class="src-ico" title="${st === "social" ? esc(PLAT[s.social] || "social") : st}">${fav(s.url, st === "sheet" ? "sheet" : st === "doc" ? "doc" : st === "social" ? "at" : "link", s.social)}</span><span class="src-title" title="${esc(title)}">${esc(title)}</span></div><div class="src-acts">${s.social ? `<button class="btn ghost sm" id="src-ag-${i}" data-ag="${i}" aria-label="Gather ${esc(title)} with your agent" title="${chatOn ? "Read this source with your ChatGPT plan" : "Open your agent to run /kaizen gather for this project"}">${ico("refresh")} Gather</button>` : `<button class="btn ghost sm" id="src-chk-${i}" data-chk="${i}" aria-label="Check ${esc(title)} now" title="Check this source now">${ico("refresh")} Check</button>`}<button class="btn ghost danger sm" id="src-rm-${i}" data-rm="${i}" aria-label="Remove ${esc(title)}" title="Remove source">${ico("trash")}</button></div></div><div class="src-url"><a href="${esc(s.url)}" target="_blank" rel="noopener noreferrer" title="${esc(s.url)}"><span>${esc(s.url)}</span>${ico("ext")}</a></div><div class="src-status">${statusHtml}</div><div class="src-dest"><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="e.g. Feedback" maxlength="40" aria-label="Category of ${esc(title)}"><button class="btn sm" id="src-cs-${i}" aria-label="Save the category of ${esc(title)}" disabled>Save</button></div>${st === "sheet" || /github\.com/.test(s.url) ? `<div class="src-dest"><span>Write back</span><label class="hint" style="margin:0"><input type="checkbox" id="src-wb-${i}" data-wb="${i}"${s.writeback ? " checked" : ""}> ${st === "sheet" ? "Put Done in the row's Status column" : "Comment and close the issue"} when its run is done</label></div>` : ""}<div class="src-dest"><span>Project</span><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" id="src-mb-${i}" aria-label="Move ${esc(title)} to the chosen project" disabled>Move</button></div></div>`;
+      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>`;
     })
     .join("");
   const fails = ((d && d.failed) || [])
@@ -188,7 +248,14 @@ export async function openSources() {
     srcKey = (it) => it.dir + " " + it.source;
   // Filters narrow in turn: project (the board's own picker, all projects only), then
   // category, then source; each chip counts what the filters before it leave.
-  const catOf = (it) => (it.status === "dismissed" ? "Dismissed" : it.status === "done" ? "Done" : it.category || "Uncategorised"),
+  // An item with no category of its own takes its source's, else the source's platform or site.
+  const srcOf = (it) => list.find((x) => x.dir === it.dir && x.url === it.source),
+    catOf = (it) =>
+      it.status === "dismissed"
+        ? "Dismissed"
+        : it.status === "done"
+          ? "Done"
+          : it.category || srcOf(it)?.category || platOf(srcOf(it) || { url: it.source }),
     count = (xs, f) => {
       const m = new Map();
       xs.forEach((it) => {
@@ -213,6 +280,7 @@ export async function openSources() {
   if (iceSrc && !bySrc.has(iceSrc)) iceSrc = "";
   const keys = new Set(ice.map(iceKey));
   if (iceForm && !keys.has(iceForm)) iceForm = null;
+  if (icePro !== iceForm) icePro = null;
   const groups = new Map();
   ice.forEach((it, i) => {
     if (!inProj(it) || (iceCat ? catOf(it) !== iceCat : it.status === "dismissed" || it.status === "done") || (iceSrc && srcKey(it) !== iceSrc)) return;
@@ -231,23 +299,46 @@ export async function openSources() {
   const nSel = order.filter((i) => iceSel.has(iceKey(ice[i]))).length;
   // Filters are plain dropdowns, each shown only when it has a choice to make. Projects are
   // narrowed by the board's own Showing picker above, not here.
-  const many = byProj.size > 1,
-    opt = (v, on, t) => `<option value="${esc(v)}"${on ? " selected" : ""}>${esc(t)}</option>`;
-  const pick = (id, label, xs) =>
-    `<select class="sel ice-sel" id="${id}" aria-label="${label}">${xs.join("")}</select>`;
+  const many = byProj.size > 1;
+  // Filters are searchable pickers (the header's combo): a button, then a search over the list.
+  const pick = (id, label, cur, rows) =>
+    `<div class="combo ice-combo" id="${id}"><button class="sel" aria-label="${label}" aria-haspopup="listbox" aria-expanded="false">${cur}</button><div class="menu-pop" hidden><input class="sel" aria-label="Search ${label.toLowerCase()}" placeholder="Search…" spellcheck="false" autocomplete="off"><div class="pick-list" role="listbox">${rows}</div></div></div>`;
+  const opt = (v, on, html, q, cls = "") =>
+    `<button type="button" role="option" data-v="${esc(v)}" data-q="${esc(q.toLowerCase())}" class="${on ? "on" : ""}${cls}" aria-selected="${on}">${html}</button>`;
+  // Sources group by platform: two Threads searches sit under one Threads.
+  const srcGroups = new Map();
+  for (const [k, { it }] of bySrc) {
+    const g = platOf(srcOf(it) || { url: it.source });
+    srcGroups.has(g) || srcGroups.set(g, []);
+    srcGroups.get(g).push([k, it]);
+  }
+  const srcIco = (it) => fav(it.source, "link", srcOf(it)?.social);
+  const curSrc = iceSrc && [...bySrc].find(([k]) => k === iceSrc)?.[1].it;
   const chips =
     // Dismissed and Done are hidden until picked, so even a lone one is a choice.
     (byCat.size > 1 || byCat.has("Dismissed") || byCat.has("Done")
-      ? pick("ice-fc", "Category", [
-          opt("", !iceCat, "All categories"),
-          ...[...byCat.keys()].map((k) => opt(k, iceCat === k, k)),
-        ])
+      ? pick(
+          "ice-fc",
+          "Category",
+          `<span>${esc(iceCat || "All categories")}</span>`,
+          opt("", !iceCat, `<span>All categories</span>`, "all categories") +
+            [...byCat].map(([k, { n }]) => opt(k, iceCat === k, `<span>${esc(k)}</span><i>${n}</i>`, k)).join(""),
+        )
       : "") +
     (bySrc.size > 1
-      ? pick("ice-fs", "Source", [
-          opt("", !iceSrc, "All sources"),
-          ...[...bySrc].map(([k, { it }]) => opt(k, iceSrc === k, srcName(it))),
-        ])
+      ? pick(
+          "ice-fs",
+          "Source",
+          curSrc ? `${srcIco(curSrc)}<span>${esc(srcName(curSrc))}</span>` : `<span>All sources</span>`,
+          opt("", !iceSrc, `<span>All sources</span>`, "all sources") +
+            [...srcGroups]
+              .map(
+                ([g, xs]) =>
+                  `<div class="grp" data-g="${esc(g.toLowerCase())}">${srcIco(xs[0][1])}${esc(g)}</div>` +
+                  xs.map(([k, it]) => opt(k, iceSrc === k, `${srcIco(it)}<span>${esc(srcName(it).toLowerCase().startsWith(g.toLowerCase() + ":") ? srcName(it).slice(g.length + 1).trim() : srcName(it))}</span><i>${bySrc.get(k).n}</i>`, g + " " + srcName(it), " sub")).join(""),
+              )
+              .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 bulk = iceSel.size
@@ -278,9 +369,9 @@ export async function openSources() {
       k = iceKey(it),
       open = iceForm === k;
     return (
-      `<div class="ice-row${iceCur === k ? " cur" : ""}${iceSel.has(k) ? " sel" : ""}" data-i="${i}" data-k="${esc(k)}"><input type="checkbox" id="ice-ck-${i}" data-ck="${i}"${iceSel.has(k) ? " checked" : ""} aria-label="Select: ${esc(it.text)}"><span class="ice-src" title="${esc(srcName(it))}">${fav(it.source, "link", list.find((x) => x.dir === it.dir && x.url === it.source)?.social)}</span><button class="ice-t" id="ice-o-${i}" data-o="${i}" aria-expanded="${open}" title="${esc(it.text)}">${esc(it.text)}</button><span class="ice-meta">${many ? `<span class="nm" title="${esc(it.project || "")}">${esc(short(it.project || ""))}</span>` : ""}${it.status === "done" && it.written ? `<span title="Written back ${esc(ago(it.written))}">written back</span>` : ""}${it.status === "done" && it.writeError ? `<span title="${esc(it.writeError)}">write-back failed</span>` : ""}${it.status === "promoted" ? `<span title="Promoted to Ideas: ${esc(it.idea || "")}">promoted</span>` : ""}${it.replied ? `<span title="Replied ${esc(ago(it.replied))}">replied</span>` : ""}<span class="ice-age">${ago(it.at)}</span><span class="ice-ra">${it.status === "promoted" || it.status === "done" ? "" : `<button class="btn ghost sm" id="ice-pr-${i}" data-pr="${i}" title="Promote to Ideas as gathered (p)" aria-label="Promote to Ideas: ${esc(it.text)}">${ico("plus")}</button>`}${it.status === "promoted" || it.status === "done" ? "" : it.status === "dismissed" ? `<button class="btn ghost sm" id="ice-rs-${i}" data-rs="${i}" title="Restore to waiting" aria-label="Restore: ${esc(it.text)}">Restore</button>` : `<button class="btn ghost sm" id="ice-ds-${i}" data-ds="${i}" title="Dismiss (d)" aria-label="Dismiss: ${esc(it.text)}">${ico("x")}</button>`}</span></span></div>` +
+      `<div class="ice-row${iceCur === k ? " cur" : ""}${iceSel.has(k) ? " sel" : ""}" data-i="${i}" data-k="${esc(k)}"><input type="checkbox" id="ice-ck-${i}" data-ck="${i}"${iceSel.has(k) ? " checked" : ""} aria-label="Select: ${esc(it.text)}"><span class="ice-src" title="${esc(srcName(it))}">${fav(it.source, "link", list.find((x) => x.dir === it.dir && x.url === it.source)?.social)}</span><button class="ice-t" id="ice-o-${i}" data-o="${i}" aria-expanded="${open}" title="${esc(it.text)}">${esc(it.text)}</button><span class="ice-meta">${many ? `<span class="nm" title="${esc(it.project || "")}">${plogo(it.dir, it.project || "")}${esc(short(it.project || ""))}</span>` : ""}${it.status === "done" && it.written ? `<span title="Written back ${esc(ago(it.written))}">written back</span>` : ""}${it.status === "done" && it.writeError ? `<span title="${esc(it.writeError)}">write-back failed</span>` : ""}${it.status === "promoted" ? `<span title="Promoted to Ideas: ${esc(it.idea || "")}">promoted</span>` : ""}${it.replied ? `<span title="Replied ${esc(ago(it.replied))}">replied</span>` : ""}<span class="ice-age">${ago(it.at)}</span><span class="ice-ra">${it.status === "promoted" || it.status === "done" ? "" : `<button class="btn ghost sm" id="ice-pr-${i}" data-pr="${i}" title="Promote to Ideas (p)" aria-label="Promote to Ideas: ${esc(it.text)}">${ico("plus")}</button>`}${it.status === "promoted" || it.status === "done" ? "" : it.status === "dismissed" ? `<button class="btn ghost sm" id="ice-rs-${i}" data-rs="${i}" title="Restore to waiting" aria-label="Restore: ${esc(it.text)}">Restore</button>` : `<button class="btn ghost sm" id="ice-ds-${i}" data-ds="${i}" title="Dismiss (d)" aria-label="Dismiss: ${esc(it.text)}">${ico("x")}</button>`}</span></span></div>` +
       (open
-        ? `<div class="ice-open">${it.notes ? `<div class="ice-notes">${esc(it.notes)}</div>` : ""}${(it.images || []).filter((u) => /^https:\/\//.test(u)).length ? `<details class="ice-imgs"><summary>Show images (${it.images.filter((u) => /^https:\/\//.test(u)).length}) — loads them from the source's site</summary>${it.images.filter((u) => /^https:\/\//.test(u)).map((u, n) => { const src = `/ice-image?dir=${encodeURIComponent(it.dir)}&id=${encodeURIComponent(it.id)}&i=${n}`; return `<a href="${esc(src)}" target="_blank" rel="noopener noreferrer"><img data-src="${esc(src)}" alt="" referrerpolicy="no-referrer"></a>`; }).join("")}</details>` : ""}<span class="hint" style="margin:0">From ${esc(srcName(it))} · ${ago(it.at)}${it.post ? ` · <a href="${esc(it.post)}" target="_blank" rel="noopener">open post</a>` : ""}</span>${replyBox(it)}${form(it)}</div>`
+        ? `<div class="ice-open">${it.notes ? `<div class="ice-notes">${esc(it.notes)}</div>` : ""}${(it.images || []).filter((u) => /^https:\/\//.test(u)).length ? `<details class="ice-imgs"><summary>Show images (${it.images.filter((u) => /^https:\/\//.test(u)).length}) — loads them from the source's site</summary>${it.images.filter((u) => /^https:\/\//.test(u)).map((u, n) => { const src = `/ice-image?dir=${encodeURIComponent(it.dir)}&id=${encodeURIComponent(it.id)}&i=${n}`; return `<a href="${esc(src)}" target="_blank" rel="noopener noreferrer"><img data-src="${esc(src)}" alt="" referrerpolicy="no-referrer"></a>`; }).join("")}</details>` : ""}<span class="hint" style="margin:0">From ${esc(srcName(it))} · ${ago(it.at)}${it.post ? ` · <a href="${esc(it.post)}" target="_blank" rel="noopener">open post</a>` : ""}</span>${replyBox(it)}${icePro === k ? form(it) : ""}</div>`
         : "")
     );
   };
@@ -294,7 +385,7 @@ export async function openSources() {
   // are none until closed. Slid in only when opened; a rebuild while open shows it in place.
   const drawer = srcShow ?? !list.length,
     slide = drawer && !$("src-sec")?.classList.contains("open");
-  const sec = `<div class="src-scrim${drawer && !slide ? " on" : ""}" id="src-scrim"></div><aside class="src-sec${drawer && !slide ? " open" : ""}" id="src-sec" aria-label="Sources"${drawer ? "" : " inert"}><header><div class="t"><b>Sources</b><div class="sub">${d && d.every && d.every !== "off" ? `Auto-check every ${esc(d.every)}` : "Auto-check off"} · <a id="src-to-settings" role="button" tabindex="0">Settings</a> · ${G.connected ? `ChatGPT${G.email ? " " + esc(G.email) : ""} <a id="cg-out" role="button" tabindex="0">Disconnect</a>` : `<a id="cg-in" role="button" tabindex="0">Connect ChatGPT</a>`} · ${(d.google || {}).connected ? `Google <a id="gg-out" role="button" tabindex="0">Disconnect</a>` : `<a id="gg-in" role="button" tabindex="0">Connect Google</a>`}</div></div><div class="src-hda">${list.length ? `<button class="btn sm" id="src-new" aria-expanded="${addOn}" aria-controls="src-addbox">${ico("plus")} Add</button>` : ""}<button class="ib" id="src-x" aria-label="Close sources" title="Close">${ico("close")}</button></div></header><div class="body">${addBox}${list.length ? `<div class="src-list">${cards}</div>` : emptyState}</div></aside>`;
+  const sec = `<div class="src-scrim${drawer && !slide ? " on" : ""}" id="src-scrim"></div><aside class="src-sec${drawer && !slide ? " open" : ""}" id="src-sec" aria-label="Sources"${drawer ? "" : " inert"}><header><div class="t"><b>Sources</b><div class="src-chips"><a id="src-to-settings" class="schip" role="button" tabindex="0" title="${d && d.every && d.every !== "off" ? `Checked every ${esc(d.every)}` : "Auto-check off"}: change in Settings">${ico("clock")}${d && d.every && d.every !== "off" ? esc(d.every) : "Off"}</a>${G.connected ? `<span class="schip on" title="ChatGPT${G.email ? ": " + esc(G.email) : ""}">${ico("ai")}ChatGPT<a id="cg-out" role="button" tabindex="0" aria-label="Disconnect ChatGPT" title="Disconnect">${ico("x")}</a></span>` : `<a id="cg-in" class="schip" role="button" tabindex="0" title="Connect ChatGPT">${ico("ai")}ChatGPT</a>`}${(d.google || {}).connected ? `<span class="schip on" title="Google connected">${ico("google")}Google<a id="gg-out" role="button" tabindex="0" aria-label="Disconnect Google" title="Disconnect">${ico("x")}</a></span>` : `<a id="gg-in" class="schip" role="button" tabindex="0" title="Connect Google">${ico("google")}Google</a>`}</div></div><div class="src-hda">${list.length ? `<button class="btn sm" id="src-new" aria-expanded="${addOn}" aria-controls="src-addbox">${ico("plus")} Add</button>` : ""}<button class="ib" id="src-x" aria-label="Close sources" title="Close">${ico("close")}</button></div></header><div class="body">${addBox}${list.length ? `<div class="src-list">${cards}</div>` : emptyState}</div></aside>`;
   // First visit: offer the ChatGPT plan for social sources, or keep the agent.
   const onb =
     G.use === "ask" && !G.connected
@@ -410,16 +501,14 @@ export async function openSources() {
     srcShow = true;
     openSources().then(() => srcShow && $("src-url")?.focus());
   };
-  if ($("ice-fs"))
-    $("ice-fs").onchange = (e) => {
-      iceSrc = e.target.value;
-      openSources();
-    };
-  if ($("ice-fc"))
-    $("ice-fc").onchange = (e) => {
-      iceCat = e.target.value;
-      openSources();
-    };
+  wirePick("ice-fs", (v) => {
+    iceSrc = v;
+    openSources();
+  });
+  wirePick("ice-fc", (v) => {
+    iceCat = v;
+    openSources();
+  });
   if ($("ice-unf"))
     $("ice-unf").onclick = () => {
       iceCat = iceSrc = "";
@@ -522,7 +611,7 @@ export async function openSources() {
       stepPast(new Set([iceKey(it)]));
       const j = await post("/icebox", { op, dir: it.dir, ids: [it.id], ...extra });
       if (j.ok) {
-        if (op === "promote" && iceForm === iceKey(it)) iceForm = null;
+        if (op === "promote" && iceForm === iceKey(it)) iceForm = icePro = null;
         toast(msg);
         load();
       }
@@ -587,13 +676,8 @@ export async function openSources() {
     const k = iceKey(ice[i]);
     iceCur = k;
     iceForm = iceForm === k ? null : k;
-    openSources().then(() => {
-      const t = $("ice-title");
-      if (t && iceForm === k) {
-        t.focus();
-        t.select();
-      } else $("ice-o-" + i)?.focus();
-    });
+    icePro = null;
+    openSources().then(() => $("ice-o-" + i)?.focus());
   };
   $("pbody")
     .querySelectorAll(".ice-row")
@@ -615,8 +699,12 @@ export async function openSources() {
     .forEach(
       (b) =>
         (b.onclick = () => {
-          b.disabled = true;
-          iceAct("promote", ice[+b.dataset.pr], "Promoted to Ideas");
+          const k = iceKey(ice[+b.dataset.pr]);
+          iceCur = iceForm = icePro = k;
+          openSources().then(() => {
+            $("ice-title")?.focus();
+            $("ice-title")?.select();
+          });
         }),
     );
   $("pbody")
@@ -716,7 +804,7 @@ export async function openSources() {
     };
     $("ice-ok").onclick = ok;
     $("ice-cancel").onclick = () => {
-      iceForm = null;
+      icePro = null;
       openSources();
     };
     $("ice-title").onkeydown = (e) => {
@@ -740,7 +828,8 @@ export async function openSources() {
         return true;
       }
       if (iceForm) {
-        iceForm = null;
+        if (icePro) icePro = null;
+        else iceForm = null;
         openSources();
         return true;
       }

package/web/board/main.ts

@@ -10,6 +10,7 @@ import { initProjects } from "./projects.ts";
 import { initUpdate } from "./update.ts";
 import { initKeys } from "./keys.ts";
 import { initLive } from "./live.ts";
+import { store } from "./store.ts";
 
 initPanel();
 initViews();
@@ -17,3 +18,29 @@ initProjects();
 initUpdate();
 initKeys();
 initLive();
+
+// 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
+// left. Combos hide theirs, a <details> menu closes, a card's or column's menu goes away.
+document.addEventListener(
+  "pointerdown",
+  (e) => {
+    const t = e.target as Node;
+    for (const p of document.querySelectorAll<HTMLElement>(".menu-pop:not([hidden])")) {
+      const own = p.closest(".combo,details") || p.parentElement;
+      if (!own || own.contains(t)) continue;
+      if (own instanceof HTMLDetailsElement) own.open = false;
+      else if (own.classList.contains("combo")) {
+        p.hidden = true;
+        own.querySelector("[aria-expanded]")?.setAttribute("aria-expanded", "false");
+      } else {
+        // Drawn by render() from store: drop it now without a redraw, which would swallow this click.
+        p.remove();
+        own.classList.remove("menu");
+        store.menuKey = null;
+        store.clearMenu = false;
+      }
+    }
+  },
+  true,
+);

package/web/board/panel.ts

@@ -8,7 +8,7 @@ import { stopDictation } from "./dictation.ts";
 import { $, esc } from "./dom.ts";
 import { fixForm, fixOff } from "./fixes.ts";
 import { commitPush, confirmCommit, gitBtn } from "./git.ts";
-import { WORD, need } from "./labels.ts";
+import { ICON, WORD, need } from "./labels.ts";
 import { attach, brief, md, planQuestions, preview, progress } from "./markdown.ts";
 import { toast } from "./toast.ts";
 import { go, view } from "./views.ts";
@@ -25,6 +25,18 @@ const TABS = [
   ["Preview", "preview"],
 ];
 // keepTab: a link already chose the tab.
+const cap = (t) => t.charAt(0).toUpperCase() + t.slice(1);
+// "2026-10-18-board-ui-revision" or "board-ui-revision" reads "Board UI revision".
+const readable = (t) =>
+  /\s/.test(t)
+    ? t
+    : cap(
+        t
+          .replace(/^\d{4}-\d{2}-\d{2}-/, "")
+          .split(/[-_]/)
+          .map((w) => (/^(ui|ux|api|cli|ai|ci|id|url|pr|tui|ios|pwa)$/i.test(w) ? w.toUpperCase() : w))
+          .join(" "),
+      );
 export function open(c, keepTab) {
   if (view !== "board") go("board", true);
   stopDictation(true); // the panel body is about to be replaced
@@ -32,12 +44,14 @@ export function open(c, keepTab) {
   store.openKey = key(c);
   $("panel").classList.add("open");
   $("scrim").classList.add("on");
-  $("ptitle").textContent = c.kind === "idea" ? brief(c.text).head : c.text;
+  // A run is titled as its card is, its slug made readable; the id stays in the tooltip.
+  $("ptitle").textContent = c.kind === "idea" ? brief(c.text).head : readable(c.title || c.text);
+  $("ptitle").title = c.kind === "idea" ? "" : c.id || "";
   render();
   $("pterm").hidden = true;
   if (c.kind === "idea") {
     store.runDoc = null;
-    $("psub").textContent = "Idea · " + c.where;
+    $("psub").innerHTML = `<span class="pst"><span class="st d-idea"><svg><use href="#s-idea"/></svg></span>Idea</span><span class="pst dim">${esc(c.where.split(/[\\/]/).pop() || c.where)}</span>`;
     $("ptabs").innerHTML = "";
     ideaBody(c);
     const foot = $("pfoot");
@@ -113,7 +127,10 @@ export async function openRun(c, refresh, again) {
   // A refresh while notes are being typed would wipe the textarea.
   const ta = $("pbody").querySelector(".notes textarea");
   if (refresh && ta && document.activeElement === ta) return;
-  $("psub").textContent = c.id + " · " + (WORD[c.status] || c.status) + (c.awaiting ? " · " + need(c.awaiting) : "");
+  // The board's own status mark, then what it waits on: chips, not a dotted line.
+  $("psub").innerHTML =
+    `<span class="pst"><span class="st d-${ICON[c.status] || "idea"}"><svg><use href="#s-${ICON[c.status] || "idea"}"/></svg></span>${esc(cap(WORD[c.status] || c.status))}</span>` +
+    (c.awaiting ? `<span class="pst dim">${esc(cap(need(c.awaiting)))}</span>` : "");
   // Only tabs with something in them show. A card whose agent runs in the board gets its
   // terminal behind the header's terminal button, chosen once right after a launch from here.
   const tabs = TABS.filter(