kaizen-agent 1.32.0 → 1.33.0

package/web/board/keys.ts

@@ -0,0 +1,126 @@
+import { store } from "./store.ts";
+import { load } from "./api.ts";
+import { focusedKey, key, nav, render } from "./cards.ts";
+import { $ } from "./dom.ts";
+import { iceNav, srcOpen } from "./icebox.ts";
+import { close, openRun } from "./panel.ts";
+import { keep } from "./projects.ts";
+import { go, view } from "./views.ts";
+
+export function initKeys() {
+  $("kbd").onclick = () => $("help").classList.add("on");
+  $("help").onclick = () => $("help").classList.remove("on");
+  document.addEventListener("click", () => {
+    if (store.menuKey || store.clearMenu) {
+      store.menuKey = null;
+      store.clearMenu = false;
+      render();
+    }
+  });
+  document.onkeydown = (e) => {
+    // The icebox reads its own keys first; a checkbox there keeps them, for x then j.
+    if (
+      view === "sources" &&
+      iceNav &&
+      srcOpen() &&
+      !$("help").classList.contains("on") &&
+      !e.target.matches("input:not([type=checkbox]),select,textarea,[contenteditable]") &&
+      !e.target.closest("#src-sec") &&
+      iceNav(e)
+    )
+      return;
+    if (e.target.matches("input,select,textarea,[contenteditable]")) return;
+    if (e.key === "?") {
+      $("help").classList.toggle("on");
+      return;
+    }
+    if (e.key === "/" && $("sq") && $("panel").classList.contains("open")) {
+      e.preventDefault();
+      $("sq").focus();
+      return;
+    }
+    if (e.key === "Escape") {
+      $("help").classList.remove("on");
+      if (store.mode) {
+        store.mode = null;
+        render();
+      } else close();
+      return;
+    }
+    if (e.key === "n") {
+      if (view !== "board") go("board", true);
+      store.mode = "new";
+      render();
+    }
+    if (e.key === "a") {
+      store.all = !store.all;
+      keep(store.all ? null : store.S.dir);
+      load();
+    }
+    const mv = {
+      ArrowUp: [0, -1],
+      k: [0, -1],
+      ArrowDown: [0, 1],
+      j: [0, 1],
+      ArrowLeft: [-1, 0],
+      h: [-1, 0],
+      ArrowRight: [1, 0],
+      l: [1, 0],
+    }[e.key];
+    // In a run's panel: left/right between its tabs, up/down scroll it. Other panels keep the browser's arrows.
+    const rc =
+      mv &&
+      store.openKey &&
+      !e.altKey &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      store.S.cards.find((c) => key(c) === store.openKey && c.kind === "run");
+    if (rc && $("ptabs").children.length) {
+      e.preventDefault();
+      if (mv[0]) {
+        const ks = [...$("ptabs").children].map((b) => b.dataset.k).concat($("pterm").hidden ? [] : ["term"]),
+          i = ks.indexOf(store.tab),
+          t = ks[i < 0 ? (mv[0] > 0 ? 0 : ks.length - 1) : Math.max(0, Math.min(ks.length - 1, i + mv[0]))];
+        if (t !== store.tab) {
+          store.tab = t;
+          openRun(rc, true);
+        }
+      } else $("pbody").scrollBy({ top: mv[1] * 40 });
+      return;
+    }
+    if (
+      mv &&
+      !$("panel").classList.contains("open") &&
+      !e.altKey &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      (e.target === document.body || e.target.matches("#board .card"))
+    ) {
+      e.preventDefault();
+      nav(...mv);
+      return;
+    }
+    // The open card, else the focused one.
+    const ok = store.openKey || focusedKey(),
+      oc = ok && store.S.cards.find((c) => key(c) === ok);
+    if (!oc) return;
+    if (e.key === "e" && oc.kind === "idea") {
+      close();
+      store.mode = "edit";
+      store.modeKey = key(oc);
+      render();
+    }
+    if (e.key === "x" && !["done", "abandoned", "starting"].includes(oc.status)) {
+      close();
+      store.mode = "reject";
+      store.modeKey = key(oc);
+      render();
+    }
+    if (e.key === "r" && oc.kind === "idea") {
+      close();
+      store.mode = "run";
+      store.modeKey = key(oc);
+      render();
+    }
+  };
+}

package/web/board/labels.ts

@@ -0,0 +1,40 @@
+export const m = 60e3,
+  h = 3600e3,
+  d = 86400e3;
+export const age = (t, now) => {
+  const x = now - t;
+  return x < h ? Math.round(x / m) + "m" : x < d ? Math.round(x / h) + "h" : Math.round(x / d) + "d";
+};
+export const NAMES = {
+  claude: "Claude Code",
+  codex: "Codex",
+  agy: "Antigravity",
+  opencode: "OpenCode",
+  gemini: "Gemini",
+  cursor: "Cursor",
+  yolo: "yolo",
+  unrechecked: "fix not rechecked",
+};
+export const MARKS = { claude: 1, codex: 1, agy: 1, opencode: 1, gemini: 1, cursor: 1, full: 1, lite: 1 };
+export const COLS = ["Ideas", "Planning", "Building", "Review", "Done"];
+// state.ts statuses onto the icon set in the <defs> above.
+export const ICON = {
+  idea: "idea",
+  starting: "start",
+  running: "run",
+  stalled: "stall",
+  waiting: "wait",
+  done: "done",
+  abandoned: "aband",
+};
+export const NEED = { "approvals.plan": "plan needs your approval", "approvals.review": "review needs your approval" },
+  need = (a) => NEED[a] || a;
+export const WORD = {
+  idea: "idea",
+  starting: "starting",
+  running: "running",
+  stalled: "stalled",
+  waiting: "waiting on you",
+  done: "done",
+  abandoned: "abandoned",
+};

package/web/board/live.ts

@@ -0,0 +1,69 @@
+import { store } from "./store.ts";
+import { load } from "./api.ts";
+import { $ } from "./dom.ts";
+import { iceBusy, openSources, srcOpen } from "./icebox.ts";
+import { deep } from "./panel.ts";
+import { keep, urlAll } from "./projects.ts";
+import { go, markView } from "./views.ts";
+
+// ---- live
+let boot = null;
+function listen() {
+  const es = new EventSource("/events");
+  es.onmessage = (ev) => {
+    if (ev.data === "changed") {
+      load(true);
+      if (srcOpen() && !iceBusy && !$("src-go")?.disabled && !$("src-add")?.disabled) openSources();
+    } else if (ev.data === "reload") location.reload();
+    else if (ev.data.startsWith("hello ")) {
+      const b = ev.data.slice(6);
+      if (boot && b !== boot) location.reload();
+      boot = b;
+    }
+  };
+  es.onerror = () => {
+    es.close();
+    setTimeout(listen, 3000);
+  };
+}
+// Back to the project picked last time, unless the URL says which view it wants. A
+// plain fetch: a project that is gone should fall back to all, not raise a toast.
+// A page named in the address shows from the first paint; it is filled once the board has loaded.
+const v0 = ((v) => (v === "icebox" ? "sources" : v))(new URLSearchParams(location.search).get("view"));
+
+export function initLive() {
+  // Back from a terminal: what was committed or pushed there touched nothing the server watches.
+  addEventListener("focus", () => load(true));
+  markView(["settings", "sources"].includes(v0) ? v0 : "board");
+  document.body.classList.toggle("paged", ["settings", "sources"].includes(v0));
+  document.body.classList.toggle("ice", v0 === "sources");
+  (async () => {
+    let d;
+    try {
+      d = localStorage.getItem("kz-proj");
+    } catch (e) {}
+    if (d && !urlAll)
+      try {
+        if (
+          (
+            await fetch("/cd", {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ dir: d }),
+            })
+          ).ok
+        )
+          store.all = false;
+        else keep();
+      } catch (e) {}
+    try {
+      const f = JSON.parse(sessionStorage.getItem("kz-form"));
+      if (f) [store.mode, store.modeKey] = f;
+    } catch (e) {}
+    load().then(() => {
+      go(v0);
+      deep();
+    });
+    listen();
+  })();
+}

package/web/board/main.ts

@@ -0,0 +1,19 @@
+// The board page: bundled into web/board.js by `bun run build:web` (iife, so nothing
+// leaks onto window). Each module is one part of the page; this file wires them up in
+// the order the page needs.
+// The page never touches the filesystem. Everything comes from /state and the run
+// files behind /run/:id; every change goes through a POST and comes back as an SSE
+// tick that reloads the board. See design.md for the visual rules.
+import { initPanel } from "./panel.ts";
+import { initViews } from "./views.ts";
+import { initProjects } from "./projects.ts";
+import { initUpdate } from "./update.ts";
+import { initKeys } from "./keys.ts";
+import { initLive } from "./live.ts";
+
+initPanel();
+initViews();
+initProjects();
+initUpdate();
+initKeys();
+initLive();

package/web/board/markdown.ts

@@ -0,0 +1,197 @@
+import { esc } from "./dom.ts";
+
+// The builder's "## Preview" section of 03-impl.md: how to run the app, or the result itself,
+// and its "### How to test" steps.
+// "## Commit" is the message the builder wrote for the work, offered at commit and push.
+function section(impl, name) {
+  const m = impl && impl.match(new RegExp(`^##\\s+${name}\\s*\\n([\\s\\S]*?)(?=\\n##\\s|$(?![\\s\\S]))`, "m"));
+  return m ? m[1].trim() : null;
+}
+export const preview = (impl) => section(impl, "Preview");
+// Links to a card's attachments/ (notes, or screenshots the builder put in Preview) via /file.
+export const attach = (t, c) =>
+  t.replace(
+    /\]\((attachments\/[^)]+)\)/g,
+    (_, p) =>
+      `](/file?dir=${encodeURIComponent(c.state)}&p=${encodeURIComponent((c.kind === "run" ? `runs/${c.id}/` : "") + p)})`,
+  );
+export const commitMsg = (impl) => (section(impl, "Commit") || "").replace(/^```\w*\n|\n```$/g, "").trim();
+// A plan's Open questions as a pick list: `Q: question` lines with `- option` lines under
+// each, "(recommended)" marking the default and "multi-select" in the question allowing
+// several. A blank or other line ends a question's options. The format is pinned in
+// spec-plan.md; a section with content in any other shape is null, none at all is [].
+export function planQuestions(src) {
+  const lines = (src || "").split("\n"),
+    at = lines.findIndex((l) => /^#+\s*(\d+\.\s*)?open questions/i.test(l.trim()));
+  if (at < 0) return [];
+  const lvl = /^#+/.exec(lines[at].trim())[0].length,
+    out = [];
+  let cur = null,
+    said = false;
+  for (const raw of lines.slice(at + 1)) {
+    const l = raw.trim(),
+      h = /^#+(?=\s)/.exec(l);
+    if (h && h[0].length <= lvl) break;
+    if (!h && l && !/^```/.test(l) && !/^none\.?$/i.test(l)) said = true;
+    const q = /^\**Q\d*\s*[:.)]\**\s*(.+)$/.exec(l);
+    if (q) {
+      out.push((cur = { q: q[1].trim(), multi: /multi-?select/i.test(q[1]), options: [] }));
+      continue;
+    }
+    const o = /^[-*]\s+(.+)$/.exec(l);
+    if (o && cur) {
+      const t = o[1].trim();
+      cur.options.push({
+        text: t,
+        rec: /\(recommended\)/i.test(t),
+        label: t
+          .replace(/\s*\(recommended\)/i, "")
+          .split(/\s+[—–-]\s+|:\s/)[0]
+          .trim(),
+      });
+    } else if (cur && cur.options.length) cur = null;
+  }
+  const qs = out.filter((x) => x.options.length);
+  return qs.length || !said ? qs : null;
+}
+// An idea is one inbox line, so a structured request arrives as one wall:
+// "Fix x Problem: … Scope: … Acceptance criteria: (1) … (2) …". Split it, for display
+// only, into the text before the first label and one part per label; inline (1) (2)
+// become a numbered list. Fewer than two labels is plain text and is left whole.
+export function brief(t) {
+  // A label opens a sentence; only the first may follow the head without punctuation,
+  // and then only as one word ("… previews Problem:"), so "the Board shows: x" is prose.
+  const re = /(^|[.!?)]\s+|\s)([A-Z][\w-]*(?: [a-z][\w-]*){0,3}):\s+/g,
+    cut = [];
+  let m;
+  while ((m = re.exec(t)))
+    if (!/^\s+$/.test(m[1]) || (!cut.length && !m[2].includes(" ")))
+      cut.push([m.index + m[1].length, m[2], re.lastIndex]);
+  if (cut.length < 2) return { head: t, parts: [] };
+  // Inline (1) (2) … become a list; numbers that do not run 1, 2, 3 keep their own text.
+  const parts = cut.map(([, label, from], i) => {
+    const body = t.slice(from, i + 1 < cut.length ? cut[i + 1][0] : t.length).trim(),
+      n = body.split(/\s*\((\d+)\)\s+/);
+    if (n.length < 5) return { label, body };
+    const its = [];
+    for (let k = 1; k < n.length; k += 2) its.push([n[k], n[k + 1]]);
+    const seq = its.every(([d], k) => +d === k + 1);
+    return {
+      label,
+      body: (n[0] ? n[0] + "\n" : "") + its.map(([d, x], k) => (seq ? `${k + 1}. ${x}` : `- (${d}) ${x}`)).join("\n"),
+    };
+  });
+  return { head: t.slice(0, cut[0][0]).trim() || `${parts[0].label}: ${t.slice(cut[0][2], cut[1][0]).trim()}`, parts };
+}
+
+// Enough markdown for kaizen's own files: headings, lists, fences, tables,
+// inline code, bold. Everything is escaped first. With `tick`, a backlog item
+// (`- open: …`, `- done: …`, `- rejected: …`) shows its status as a checkbox.
+export function md(src, tick) {
+  const lines = src.split("\n"),
+    out = [];
+  let i = 0,
+    list = null;
+  const inl = (s) =>
+    esc(s)
+      .replace(/`([^`]+)`/g, "<code>$1</code>")
+      .replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
+      .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, '<a href="$2" target="_blank"><img src="$2" alt="$1"></a>')
+      .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+  const endList = () => {
+    if (list) {
+      out.push(`</${list}>`);
+      list = null;
+    }
+  };
+  while (i < lines.length) {
+    const l = lines[i];
+    if (/^```/.test(l)) {
+      endList();
+      const buf = [];
+      i++;
+      while (i < lines.length && !/^```/.test(lines[i])) buf.push(lines[i++]);
+      out.push(`<pre>${esc(buf.join("\n"))}</pre>`);
+      i++;
+      continue;
+    }
+    const hm = /^(#{1,6})\s+(.*)$/.exec(l);
+    if (hm) {
+      endList();
+      out.push(`<h${Math.min(hm[1].length, 3)}>${inl(hm[2])}</h${Math.min(hm[1].length, 3)}>`);
+      i++;
+      continue;
+    }
+    if (/^---+$/.test(l.trim())) {
+      endList();
+      out.push("<hr>");
+      i++;
+      continue;
+    }
+    if (/^\|/.test(l)) {
+      endList();
+      const rows = [];
+      while (i < lines.length && /^\|/.test(lines[i])) rows.push(lines[i++]);
+      const cells = (r) =>
+        r
+          .replace(/^\||\|$/g, "")
+          .split("|")
+          .map((c) => inl(c.trim()));
+      out.push(
+        "<table>" +
+          rows
+            .filter((r) => !/^\|\s*-/.test(r))
+            .map(
+              (r, n) =>
+                `<tr>${cells(r)
+                  .map((c) => (n ? `<td>${c}</td>` : `<th>${c}</th>`))
+                  .join("")}</tr>`,
+            )
+            .join("") +
+          "</table>",
+      );
+      continue;
+    }
+    const li = /^\s*(?:[-*]|\d+\.)\s+(.*)$/.exec(l);
+    if (li) {
+      const t = /^\s*\d+\./.test(l) ? "ol" : "ul";
+      if (list !== t) {
+        endList();
+        out.push(`<${t}>`);
+        list = t;
+      }
+      const tk = tick && /^(open|done|rejected):\s*(.*)$/.exec(li[1]);
+      out.push(
+        tk
+          ? `<li class="tk${tk[1] === "rejected" ? " rej" : ""}"><label><input type="checkbox" tabindex="-1" aria-disabled="true" onclick="return false"${tk[1] === "done" ? " checked" : ""} aria-label="${tk[1]}"><span>${inl(tk[2])}</span></label></li>`
+          : `<li>${inl(li[1])}</li>`,
+      );
+      i++;
+      continue;
+    }
+    if (!l.trim()) {
+      endList();
+      i++;
+      continue;
+    }
+    endList();
+    const buf = [l];
+    i++;
+    while (i < lines.length && lines[i].trim() && !/^(#|```|\||\s*[-*]\s|\s*\d+\.\s|---)/.test(lines[i]))
+      buf.push(lines[i++]);
+    out.push(`<p>${inl(buf.join(" "))}</p>`);
+  }
+  endList();
+  return out.join("");
+}
+
+// A building run's progress.md, one `- todo|doing|done: text` line per Work-list item.
+// prev: the statuses last drawn for this run; an item whose status moved gets .chg.
+export function progress(src, prev) {
+  const items = [...src.matchAll(/^\s*-\s*(todo|doing|done):\s*(.*)$/gm)].map((m) => [m[1], m[2]]);
+  if (!items.length) return "";
+  const n = items.filter((t) => t[0] === "done").length,
+    pct = Math.round((n / items.length) * 100),
+    ic = { done: "✓", doing: '<span class="pulse"></span>', todo: "" };
+  return `<div class="prog"><div class="ph"><b>${n} of ${items.length} done</b><span>${pct}%</span></div><div class="pbar"><i style="width:${pct}%"></i></div><ol>${items.map(([st, t], i) => `<li class="p-${st}${prev && prev[i] && prev[i] !== st ? " chg" : ""}"><span class="pi">${ic[st]}</span><span>${esc(t).replace(/`([^`]+)`/g, "<code>$1</code>")}</span></li>`).join("")}</ol></div>`;
+}