kaizen-agent 1.33.1 → 1.34.1

package/cli/web.ts

@@ -10,7 +10,7 @@ import {
   launchMode, readSessions, ownerOf, resumePrompt, runAgent, firstSession,
 } from "./state.ts";
 import { attachPty, writePty, resizePty, ptyState, ptyKeys, adoptLoginEnv } from "./pty.ts";
-import { readSources, addSource, removeSource, moveSource, setCategory, readIcebox, promote, dismiss, markReplied, gatherSource, gatherAll, gatherDirs, due, socialUrl, socialOf } from "./sources.ts";
+import { readSources, addSource, removeSource, moveSource, setCategory, readIcebox, promote, dismiss, restore, markReplied, gatherSource, freshImages, gatherAll, gatherDirs, due, socialUrl, socialOf } from "./sources.ts";
 import * as chatgpt from "./chatgpt.ts";
 import { postLink, sendReply } from "./browser.ts";
 import { listNotes, saveNote, renameNote, deleteNote, boardIndex, linksTo } from "./notes.ts";
@@ -91,10 +91,10 @@ export async function web(repoDir: string, opts: Opts = {}) {
   // Before anything looks for an agent on PATH: the board starts agents itself, and
   // from a launcher it would otherwise have none of the user's shell setup.
   adoptLoginEnv();
-  // Not fixed for the life of the board: picking a project in the page moves here.
-  let state = locate();
-  if (state && dirname(state) !== home) remember(dirname(state));
-  let project = state ? label(state) : null;
+  // Where the board started. Each page picks its own project and names it in the
+  // x-kz-dir header, so a phone choosing another project never moves this tab.
+  const boardState = locate();
+  if (boardState && dirname(boardState) !== home) remember(dirname(boardState));
   // The "Projects folder" setting, resolved; empty when unset.
   const projectsRoot = async () => {
     const { listSettings } = await import("./settings.ts");
@@ -125,11 +125,16 @@ export async function web(repoDir: string, opts: Opts = {}) {
       .filter((d) => existsSync(join(d, ".kaizen")) ? (remember(d), false) : true).sort();
   };
 
-  const states = (all: boolean) => (all || !state
+  const states = (all: boolean, cur = boardState) => (all || !cur
     ? [...knownProjects().map((d) => join(d, ".kaizen")), join(home, ".kaizen")]
-    : [state]
+    : [cur]
   ).filter((d, i, arr) => arr.indexOf(d) === i && existsSync(d));
 
+  // Hostnames the user put in KAIZEN_WEB_HOSTS (e.g. a `tailscale serve` name):
+  // their explicit opt-in, matched exactly, empty when unset.
+  const extraHosts = new Set((process.env.KAIZEN_WEB_HOSTS ?? "").split(",")
+    .map((s) => s.trim().toLowerCase().replace(/:\d+$/, "")).filter(Boolean));
+
   // Any tab on this machine can reach loopback. GET only reads the user's own
   // files, but a POST from a page on the wider web must not write them.
   const local = (req: Request) => {
@@ -137,7 +142,7 @@ export async function web(repoDir: string, opts: Opts = {}) {
     if (!origin) return true;                      // curl, same-origin fetch on old browsers
     try {
       const h = new URL(origin).hostname;
-      return h === "127.0.0.1" || h === "localhost" || h === "[::1]" || h === "::1";
+      return h === "127.0.0.1" || h === "localhost" || h === "[::1]" || h === "::1" || extraHosts.has(h);
     } catch { return false; }
   };
   const json = (body: unknown, status = 200) =>
@@ -281,10 +286,13 @@ export async function web(repoDir: string, opts: Opts = {}) {
     async fetch(req, srv) {
       // Host first: a hostname rebound to 127.0.0.1 by an attacker's DNS still
       // arrives with that hostname in Host, and gets nothing.
-      const hostname = (req.headers.get("host") ?? "").replace(/:\d+$/, "");
-      if (hostname !== "127.0.0.1" && hostname !== "localhost") return new Response("forbidden", { status: 403 });
+      const hostname = (req.headers.get("host") ?? "").toLowerCase().replace(/:\d+$/, "");
+      if (hostname !== "127.0.0.1" && hostname !== "localhost" && !extraHosts.has(hostname)) return new Response("forbidden", { status: 403 });
       const url = new URL(req.url);
       const path = url.pathname;
+      const asked = req.headers.get("x-kz-dir");
+      const state = asked && states(true).includes(asked) ? asked : boardState;
+      const project = state ? label(state) : null;
 
       if (req.method === "GET" && path === "/") {
         const page = served(PAGE);
@@ -355,11 +363,20 @@ export async function web(repoDir: string, opts: Opts = {}) {
         return new Response(Bun.file(LOGO), { headers: { "content-type": "image/png", "cache-control": "max-age=86400" } });
       }
 
+      // 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({
+          name: "kaizen", short_name: "kaizen", start_url: "/", scope: "/", display: "standalone",
+          background_color: "#0c162f", theme_color: "#0c162f",
+          icons: [{ src: "/logo.png", sizes: "1024x1024", type: "image/png", purpose: "any" }],
+        }), { headers: { "content-type": "application/manifest+json" } });
+      }
+
       if (req.method === "GET" && path === "/state") {
         const all = url.searchParams.get("all") === "1";
         // Before the project list: it registers folders that turn out to be set up.
         const unset = await fresh();
-        const dirs = states(all);
+        const dirs = states(all, state);
         // With a projects folder set, the picker offers only real projects inside it,
         // and always the one open now so it never hides where the board is.
         const root = await projectsRoot();
@@ -417,16 +434,21 @@ export async function web(repoDir: string, opts: Opts = {}) {
         // says which project it belongs to. Nothing is assumed from where the board started.
         const dir = url.searchParams.get("dir");
         if (dir && !states(true).includes(dir)) return bad("unknown state dir", 404);
-        const sources = [], icebox = [], failed = [];
+        const sources = [], icebox = [], dismissed = [], failed = [];
         for (const d of dir ? [dir] : states(true)) {
           // The seen list is bookkeeping, not something the page shows.
           try { sources.push(...readSources(d).map(({ seen, ...s }) => ({ ...s, social: socialOf(s.url), dir: d, project: label(d) }))); }
           catch { failed.push(label(d)); }
           // Only what still waits for a decision; promoted and dismissed items are record.
-          try { icebox.push(...readIcebox(d).filter((s) => s.status === "new").map((s) => ({ ...s, post: postLink(s.notes), dir: d, project: label(d) }))); }
+          // Dismissed ones come apart, for the Dismissed category, where they can be restored.
+          try {
+            const all = readIcebox(d).map((s) => ({ ...s, post: postLink(s.notes), dir: d, project: label(d) }));
+            icebox.push(...all.filter((s) => s.status === "new"));
+            dismissed.push(...all.filter((s) => s.status === "dismissed"));
+          }
           catch { failed.push(label(d) + " (icebox)"); }
         }
-        return json({ sources, icebox, failed, every: await every(), gatherer: { use: await setting("sources.agent"), ...chatgpt.status() } });
+        return json({ sources, icebox, dismissed, failed, every: await every(), gatherer: { use: await setting("sources.agent"), ...chatgpt.status() } });
       }
 
       // The Run form's choices for one project: installed tools and their models.
@@ -553,6 +575,16 @@ export async function web(repoDir: string, opts: Opts = {}) {
         return new Response(Bun.file(f), { headers: { "cache-control": "private, max-age=3600" } });
       }
 
+      // An icebox image, sent on to a link read fresh from its source: the one kept
+      // since the gather may have expired. Only an https link the item holds is followed.
+      if (req.method === "GET" && path === "/ice-image") {
+        const dir = url.searchParams.get("dir") ?? "";
+        if (!states(true).includes(dir)) return bad("unknown state dir", 404);
+        const u = (await freshImages(dir, url.searchParams.get("id") ?? ""))[Number(url.searchParams.get("i"))];
+        if (!u || !/^https:\/\//.test(u)) return bad("no such image", 404);
+        return new Response(null, { status: 302, headers: { location: u, "cache-control": "no-store", "referrer-policy": "no-referrer" } });
+      }
+
       if (req.method === "GET" && path === "/events") {
         let ctrl: ReadableStreamDefaultController;
         const stream = new ReadableStream({
@@ -593,14 +625,10 @@ export async function web(repoDir: string, opts: Opts = {}) {
         }
         if (!dir || !states(true).includes(dir)) return bad("unknown state dir", 404);
 
-        // The board moves to the chosen project: new ideas and runs default to it,
-        // and the process follows so anything resolved from cwd agrees.
+        // Only checks the project: the page that picked it sends it back in x-kz-dir.
         if (path === "/cd") {
-          state = dir;
-          project = label(dir);
-          try { process.chdir(dirname(dir)); } catch { /* the state dir is what matters */ }
           changed();
-          return json({ ok: true, project });
+          return json({ ok: true, project: label(dir) });
         }
 
         if (path === "/inbox") {
@@ -690,7 +718,7 @@ export async function web(repoDir: string, opts: Opts = {}) {
           const ids = Array.isArray(body.ids) ? body.ids.filter((i: unknown) => typeof i === "string") : [];
           try {
             const why = body.op === "promote" ? promote(body.dir, ids, typeof body.text === "string" ? body.text : undefined, typeof body.details === "string" ? body.details : undefined)
-              : body.op === "dismiss" ? dismiss(body.dir, ids) : "unknown op";
+              : body.op === "dismiss" ? dismiss(body.dir, ids) : body.op === "restore" ? restore(body.dir, ids) : "unknown op";
             if (why) return bad(why, why === "no such item" ? 404 : why === "unknown op" ? 400 : 409);
           } catch (e) { return bad((e as Error).message, 500); }
           changed();
@@ -922,7 +950,7 @@ export async function web(repoDir: string, opts: Opts = {}) {
 
   const url = `http://127.0.0.1:${server.port}/`;
   console.log(`\n  kaizen web  ${url}`);
-  console.log(`  ${project ? `project  ${project}` : "no .kaizen here; showing every known project"}`);
+  console.log(`  ${boardState ? `project  ${label(boardState)}` : "no .kaizen here; showing every known project"}`);
   console.log(`  ctrl-c to stop\n`);
   if (opts.open !== false) await openApp(url);
 

package/package.json

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

package/skills/kaizen/gather.md

@@ -31,7 +31,10 @@ cannot judge on its own.
    account or a key the user has not set up for this.
 3. Hand what you read to kaizen. With your file-writing tool, not the shell, write the
    requests to a new temporary file outside the project, under a name you choose: one
-   request per line, optionally a tab and then notes for that request. Leave out any
+   request per line, optionally a tab and then notes for that request. A picture the source
+   shows beside a request goes in its notes as `img https://its-address`, one token per
+   image; kaizen keeps those as the item's images. Lines from `kaizen gather --posts`
+   already carry theirs: copy them unchanged. Leave out any
    request the source marks Done or Finish. Then run:
 
    ```

package/skills/kaizen/spec.md

@@ -86,7 +86,9 @@ Record the track in `state.json` as `track`, with the three answers written into
 
 Create the run id as `YYYY-MM-DD-<short-kebab-slug>`. Write the request verbatim —
 do not summarize it, since later stages read this instead of the conversation and a
-summary is where requirements quietly disappear.
+summary is where requirements quietly disappear. The board also finds a run's card by
+this text: a request that does not contain the user's words leaves their idea as a
+second card. Context you add goes below the verbatim text, never in place of it.
 
 Verbatim includes the mess. Requests arrive as thinking out loud: half-formed,
 out of order, self-correcting, with the decisive constraint tucked into an aside near
@@ -110,6 +112,8 @@ Write into `00-request.md`: the verbatim request, the deliverable, what done mea
 and what wrong means. Record in `state.json`: `id`, `mode`, `runner`, `agent`, `track`,
 `stage: "plan"`, `awaiting: null`, `iteration: 0`, and `updated` — the time of this
 write, refreshed on every later one.
+Where the environment has `CLAUDE_CODE_SESSION_ID`, also record it as `session`: the
+board keeps the run on the card it was launched from by that id.
 
 `stage` takes exactly one of five words, and boards key their columns on them:
 `plan`, `build`, `review`, `done`, `abandoned`. Set it when the stage starts —

package/web/board/api.ts

@@ -7,11 +7,14 @@ import { notifyUser, toast } from "./toast.ts";
 // The server writes notifier() from state.ts over a marker in board.html: one rule for both UIs.
 declare const due: (key: string, say: string | null, done: boolean, now: number) => boolean;
 
+// This page's project, sent with each request: the server keeps none, so another
+// tab or a phone picking a project never moves this one.
+export const dirHeader = () => (store.dir ? { "x-kz-dir": store.dir } : {});
 // quiet: the server said something changed, nobody asked for a redraw.
 export async function load(quiet) {
   let r;
   try {
-    r = await fetch("/state" + (store.all ? "?all=1" : ""));
+    r = await fetch("/state" + (store.all ? "?all=1" : ""), { headers: dirHeader() });
   } catch {
     toast(GONE);
     return;
@@ -85,7 +88,7 @@ export async function post(path, body) {
   try {
     r = await fetch(path, {
       method: "POST",
-      headers: { "content-type": "application/json" },
+      headers: { "content-type": "application/json", ...dirHeader() },
       body: JSON.stringify(body),
     });
   } catch {

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, 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>`
         : "")
     );
   };
   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/live.ts

@@ -52,8 +52,10 @@ export function initLive() {
               body: JSON.stringify({ dir: d }),
             })
           ).ok
-        )
+        ) {
           store.all = false;
+          store.dir = d;
+        }
         else keep();
       } catch (e) {}
     try {

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";
 
@@ -52,6 +52,7 @@ async function pick(v) {
     const j = await post("/cd", { dir: v });
     if (j.ok) {
       store.all = false;
+      store.dir = v;
       keep(v);
     }
   }
@@ -144,6 +145,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/store.ts

@@ -4,6 +4,8 @@
 export const store = {
   S: { project: null, projects: [], cards: [], now: Date.now(), all: false },
   all: new URLSearchParams(location.search).get("all") !== "0",
+  // The project this page picked; null is wherever the board started.
+  dir: null,
   openKey: null,
   mode: null,
   modeKey: null,

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}