kaizen-agent 1.33.1 → 1.34.0

package/web/board/icebox.ts

@@ -134,7 +134,9 @@ export async function openSources() {
     return "link";
   };
   const list = (d && d.sources) || [],
-    ice = (d && d.icebox) || [],
+    // Dismissed items ride along, shown only under their own category.
+    ice = [...((d && d.icebox) || []), ...((d && d.dismissed) || [])],
+    waiting = ((d && d.icebox) || []).length,
     G = (d && d.gatherer) || {},
     chatOn = G.use === "chatgpt" && G.connected;
   // A source belongs to one project, named on its row. Picking another only arms Move: a select
@@ -186,7 +188,7 @@ 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.category || "Uncategorised",
+  const catOf = (it) => (it.status === "dismissed" ? "Dismissed" : it.category || "Uncategorised"),
     count = (xs, f) => {
       const m = new Map();
       xs.forEach((it) => {
@@ -213,7 +215,7 @@ export async function openSources() {
   if (iceForm && !keys.has(iceForm)) iceForm = null;
   const groups = new Map();
   ice.forEach((it, i) => {
-    if (!inProj(it) || (iceCat && catOf(it) !== iceCat) || (iceSrc && srcKey(it) !== iceSrc)) return;
+    if (!inProj(it) || (iceCat ? catOf(it) !== iceCat : it.status === "dismissed") || (iceSrc && srcKey(it) !== iceSrc)) return;
     const k = catOf(it);
     groups.has(k) || groups.set(k, []);
     groups.get(k).push(i);
@@ -227,20 +229,13 @@ export async function openSources() {
   }
   if (!order.some((i) => iceKey(ice[i]) === iceCur)) iceCur = order.length ? iceKey(ice[order[0]]) : null;
   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. The project one
-  // is the board's own picker: one project, or all; several picked on the board read as such.
+  // 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 chips =
-    (many
-      ? pick("ice-fp", "Project", [
-          opt("", !store.shown.size, "All projects"),
-          ...(store.shown.size > 1 ? [opt("*", true, store.shown.size + " projects")] : []),
-          ...[...byProj].map(([k, { it }]) => opt(k, store.shown.size === 1 && store.shown.has(k), it.project || k)),
-        ])
-      : "") +
     (byCat.size > 1
       ? pick("ice-fc", "Category", [
           opt("", !iceCat, "All categories"),
@@ -253,7 +248,7 @@ export async function openSources() {
           ...[...bySrc].map(([k, { it }]) => opt(k, iceSrc === k, srcName(it))),
         ])
       : "");
-  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">${order.length < ice.length ? `${order.length} of ${ice.length}` : ice.length} 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" ? `${order.length} dismissed` : `${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
     ? `<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>`
     : "";
@@ -282,16 +277,16 @@ 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">${esc(it.project || "")}</span>` : ""}${it.replied ? `<span title="Replied ${esc(ago(it.replied))}">replied</span>` : ""}<span class="ice-age">${ago(it.at)}</span><span class="ice-ra"><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><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">${esc(it.project || "")}</span>` : ""}${it.replied ? `<span title="Replied ${esc(ago(it.replied))}">replied</span>` : ""}<span class="ice-age">${ago(it.at)}</span><span class="ice-ra"><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 === "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>` : ""}<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) => `<a href="${esc(u)}" target="_blank" rel="noopener noreferrer"><img data-src="${esc(u)}" 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>`
         : "")
     );
   };
   const inbox =
-    ice.length && !order.length
-      ? `<div class="ice-zero"><h4>Nothing matches</h4><p>${ice.length} waiting outside these filters.</p><p style="margin-top:10px"><button class="btn sm" id="ice-unf">Clear filters</button></p></div>`
-      : ice.length
+    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>`
+      : 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>`;
   // The sources, in the right-hand drawer: shut until asked for, open by itself while there
@@ -398,14 +393,6 @@ export async function openSources() {
       iceCat = e.target.value;
       openSources();
     };
-  if ($("ice-fp"))
-    $("ice-fp").onchange = (e) => {
-      const v = e.target.value;
-      if (v === "*") return;
-      store.shown = new Set(v ? [v] : []);
-      setShown();
-      openSources();
-    };
   if ($("ice-unf"))
     $("ice-unf").onclick = () => {
       iceCat = iceSrc = "";
@@ -573,6 +560,10 @@ export async function openSources() {
   $("pbody")
     .querySelectorAll("[data-o]")
     .forEach((b) => (b.onclick = () => toggle(+b.dataset.o)));
+  // Images from a source load only when asked: fetching one tells its host the item was opened.
+  $("pbody")
+    .querySelectorAll("details.ice-imgs")
+    .forEach((d) => (d.ontoggle = () => d.open && d.querySelectorAll("img[data-src]").forEach((i) => (i.src = i.dataset.src))));
   $("pbody")
     .querySelectorAll("[data-pr]")
     .forEach(
@@ -591,6 +582,15 @@ export async function openSources() {
           iceAct("dismiss", ice[+b.dataset.ds], "Dismissed");
         }),
     );
+  $("pbody")
+    .querySelectorAll("[data-rs]")
+    .forEach(
+      (b) =>
+        (b.onclick = () => {
+          b.disabled = true;
+          iceAct("restore", ice[+b.dataset.rs], "Restored");
+        }),
+    );
   const open1 = ice.find((it) => iceKey(it) === iceForm);
   if ($("ice-rp"))
     $("ice-rp").onclick = async () => {

package/web/board/projects.ts

@@ -2,7 +2,7 @@ import { store } from "./store.ts";
 import { load, post } from "./api.ts";
 import { render } from "./cards.ts";
 import { $, esc } from "./dom.ts";
-import { openSources } from "./icebox.ts";
+import { openSources, srcOpen } from "./icebox.ts";
 import { toast } from "./toast.ts";
 import { view } from "./views.ts";
 
@@ -144,6 +144,8 @@ export function setShown() {
     localStorage.setItem("kz-show", JSON.stringify([...store.shown]));
   } catch (e) {}
   render();
+  // The Icebox narrows by the same picker, so it redraws too.
+  if (srcOpen()) openSources();
 }
 
 export function initProjects() {

package/web/board.html

@@ -2,8 +2,15 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
 <title>kaizen</title>
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="theme-color" content="#f6f8fc" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#0c162f" media="(prefers-color-scheme: dark)">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="kaizen">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <link rel="icon" href="/favicon.ico" sizes="any">
 <link rel="icon" type="image/png" href="/logo.png">
 <link rel="apple-touch-icon" href="/logo.png">
@@ -49,7 +56,7 @@ svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke
 /* 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}
-@media(max-width:640px){.app{margin:0;border:0;border-radius:0}}
+@media(max-width:640px){.app{margin:0;border:0;border-radius:0}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}aside:not(.docked){padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0}}
 /* header */
 .hdr{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 28px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);flex-wrap:wrap}
 pre.mark{margin:0;font:700 8px/1 var(--mono)}
@@ -378,6 +385,7 @@ body:not(.paged) .src-sec,body:not(.paged) .src-scrim{display:none}
 .ice-form-acts .sel{width:auto;flex:none}
 .ice-form-acts .end{flex:1}
 .ice-form-acts .btn{white-space:nowrap}
+.ice-imgs{font-size:12px;color:var(--dim)}.ice-imgs[open]{display:flex;gap:6px;flex-wrap:wrap}.ice-imgs summary{cursor:pointer;flex-basis:100%}.ice-imgs img{height:72px;max-width:120px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line)}
 .ice-notes{font-size:12px;color:var(--dim);line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
 .src-empty{padding:26px 16px;text-align:center;background:var(--bg);border:1px dashed var(--line);border-radius:var(--r);margin:12px 0 16px}
 .src-empty-ico{width:36px;height:36px;margin:0 auto 10px;color:var(--dim);display:flex;align-items:center;justify-content:center}