kaizen-agent 1.31.3 → 1.33.0

package/web/board/settings.ts

@@ -0,0 +1,191 @@
+import { store } from "./store.ts";
+import { termStop } from "./agent-term.ts";
+import { load, post } from "./api.ts";
+import { stopDictation } from "./dictation.ts";
+import { $, esc } from "./dom.ts";
+import { close } from "./panel.ts";
+import { askNotify, toast } from "./toast.ts";
+import { updBar } from "./update.ts";
+import { view } from "./views.ts";
+
+// ---- settings
+// Rows in config order, grouped as the TUI groups them.
+const groups = (rows) => {
+  const m = new Map();
+  for (const r of rows) {
+    if (!m.has(r.group)) m.set(r.group, []);
+    m.get(r.group).push(r);
+  }
+  return [...m];
+};
+export async function openSettings() {
+  if (view !== "settings") return;
+  const gen = ++store.pageGen;
+  stopDictation(true);
+  // Coming from another page or a card, its body goes now, not when the fetch answers.
+  if (!$("panel").classList.contains("open") || $("ptitle").textContent !== "Settings") {
+    $("pbody").innerHTML = `<p class="snone">Loading…</p>`;
+    $("psub").textContent = "";
+  }
+  termStop();
+  store.openKey = null;
+  store.runDoc = null;
+  $("pterm").hidden = true;
+  $("panel").classList.add("open");
+  $("scrim").classList.add("on");
+  $("ptitle").textContent = "Settings";
+  $("ptabs").innerHTML = "";
+  $("pfoot").innerHTML = "";
+  const cur = document.documentElement.dataset.theme || "system";
+  const cfg = await fetch("/settings")
+    .then((r) => r.json())
+    .catch(() => null);
+  if (gen !== store.pageGen) return;
+  $("psub").textContent = "Theme applies to this browser. Everything else is saved to your kaizen settings.";
+  $("psub").title = cfg ? cfg.file : "";
+  // One control per row: a switch for on/off, one segment per value for a small number,
+  // a select for a choice. The row's label names the control; its help sits under it.
+  const ctl = (id, vals, on) => {
+    // The preset steps like a game's quick preset: ◁ ▷ go to the neighbouring tier,
+    // wrapping, and never to custom, which only an edit to another row makes.
+    if (id === "s-preset") {
+      const t = vals.filter((v) => v !== "custom"),
+        at = t.indexOf(on),
+        go = (d) => t[at < 0 ? (d > 0 ? 0 : t.length - 1) : (at + d + t.length) % t.length];
+      return `<span class="car" id="${id}" role="group" aria-label="Preset"><button id="${id}-prev" data-v="${go(-1)}" aria-label="Previous preset: ${go(-1)}" title="${go(-1)}">◁</button><span aria-live="polite">${esc(on)}<i aria-hidden="true">${t.map((v) => `<u class="${v === on ? "on" : ""}"></u>`).join("")}</i></span><button id="${id}-next" data-v="${go(1)}" aria-label="Next preset: ${go(1)}" title="${go(1)}">▷</button></span>`;
+    }
+    if (vals.length === 2 && vals.includes("true") && vals.includes("false")) {
+      const yes = on === "true";
+      return `<button class="chk${yes ? " on" : ""}" id="${id}" data-v="${yes ? "false" : "true"}" role="switch" aria-checked="${yes}" title="${yes ? "On" : "Off"}"></button>`;
+    }
+    if (vals.every((v) => /^\d+$/.test(v)))
+      return `<span class="bar" id="${id}" role="group">${vals.map((v) => `<button data-v="${v}" class="${v === on ? "on" : ""}" aria-pressed="${v === on}">${v}</button>`).join("")}</span>`;
+    return `<select class="sel" id="${id}">${vals.map((v) => `<option value="${esc(v)}"${v === on ? " selected" : ""}>${v === "" ? "—" : esc(v)}</option>`).join("")}</select>`;
+  };
+  const row = (label, control, hint, id, q) =>
+    `<div class="srow" data-q="${esc(q.toLowerCase())}"><label for="${id}">${esc(label)}</label>${control}<p class="hint">${hint}</p></div>`;
+  const hadFocus = document.activeElement?.id === "sq";
+  const np = typeof Notification === "undefined" ? null : Notification.permission;
+  const ntHelp =
+    "A desktop notification when a run starts waiting on you." +
+    (np ? (np === "denied" ? " Blocked in this browser's site settings." : "") : " Not supported in this browser.");
+  const names = [...(cfg ? groups(cfg.rows).map(([g]) => g) : []), "Browser"];
+  $("pbody").innerHTML =
+    `<div class="sq"><input class="sel" id="sq" type="search" placeholder="Search settings" aria-label="Search settings" spellcheck="false" autocomplete="off" value="${esc(store.setQ)}"><div class="sjump" role="group" aria-label="Jump to section">${names.map((g) => `<button data-g="${esc(g)}">${esc(g)}</button>`).join("")}</div></div>
+  ${
+    cfg
+      ? groups(cfg.rows)
+          .map(
+            ([g, rows]) =>
+              `<h3 class="sg">${esc(g)}</h3>${rows
+                .map((r) => {
+                  const id = "s-" + r.key.replace(/\./g, "-");
+                  return row(
+                    r.label,
+                    r.text
+                      ? r.folder
+                        ? `<span class="fpick"><input class="sel" id="${id}" value="${esc(r.value)}" placeholder="not set" spellcheck="false"><button class="btn" id="${id}-pick" type="button">Browse…</button></span>`
+                        : `<input class="sel" id="${id}" value="${esc(r.value)}" placeholder="not set" spellcheck="false">`
+                      : ctl(id, r.values, r.value),
+                    esc(r.help),
+                    id,
+                    [r.label, r.help, r.key, g, ...r.values].join(" "),
+                  );
+                })
+                .join("")}`,
+          )
+          .join("")
+      : `<p class="snone">Settings could not be read. Run <code>kaizen settings</code>.</p>`
+  }
+  <h3 class="sg">Browser</h3>${row("Theme", ctl("th", ["system", "light", "dark"], cur), "Light or dark for this browser only; system follows your device.", "th", "theme light dark system browser")}
+  ${row("Notifications", `<button class="chk${np === "granted" ? " on" : ""}" id="nt" role="switch" aria-checked="${np === "granted"}"${np && np !== "denied" ? "" : " disabled"}></button>`, ntHelp, "nt", "notifications " + ntHelp + " browser")}
+  <p class="snone" id="snone" hidden></p>`;
+  // Hides rows that do not match, then any group (and its chip) left with none.
+  updBar();
+  const heads = [...$("pbody").querySelectorAll(".sg")],
+    chips = [...$("pbody").querySelectorAll(".sjump button")];
+  const filter = () => {
+    const q = store.setQ.trim().toLowerCase();
+    let any = false;
+    heads.forEach((h, i) => {
+      let n = h.nextElementSibling,
+        vis = false;
+      for (; n && n.matches(".srow"); n = n.nextElementSibling) {
+        n.hidden = !!q && !n.dataset.q.includes(q);
+        vis ||= !n.hidden;
+      }
+      h.hidden = !vis;
+      if (chips[i]) chips[i].hidden = !vis;
+      any ||= vis;
+    });
+    $("snone").hidden = any;
+    $("snone").textContent = `No setting matches “${store.setQ.trim()}”.`;
+  };
+  // Scrolled by measure: the pinned bar's height changes as the chips wrap.
+  chips.forEach(
+    (b, i) =>
+      (b.onclick = () => {
+        const pb = $("pbody");
+        pb.scrollTo({
+          top:
+            pb.scrollTop +
+            heads[i].getBoundingClientRect().top -
+            pb.querySelector(".sq").getBoundingClientRect().bottom -
+            8,
+          behavior: "smooth",
+        });
+      }),
+  );
+  $("sq").oninput = (e) => {
+    store.setQ = e.target.value;
+    filter();
+  };
+  // Esc clears a search; with nothing to clear it closes the panel, as it does outside the field.
+  $("sq").onkeydown = (e) => {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    if (store.setQ) {
+      store.setQ = "";
+      e.target.value = "";
+      filter();
+    } else close();
+  };
+  filter();
+  if (hadFocus) {
+    const f = $("sq");
+    f.focus();
+    f.setSelectionRange(f.value.length, f.value.length);
+  }
+  $("th").onchange = (e) => setTheme(e.target.value);
+  $("nt").onclick = () => {
+    askNotify();
+    setTimeout(openSettings, 300);
+  };
+  if (cfg)
+    cfg.rows.forEach((r) => {
+      const el = $("s-" + r.key.replace(/\./g, "-"));
+      const save = async (v) => {
+        const f = document.activeElement?.id;
+        const j = await post("/settings", { key: r.key, value: v });
+        if (j.ok) toast("Saved");
+        await openSettings();
+        if (f?.startsWith("s-preset-")) $(f)?.focus();
+      };
+      if (el.tagName === "SELECT" || el.tagName === "INPUT")
+        el.onchange = async () => {
+          await save(el.value.trim());
+          if (el.tagName === "INPUT") load();
+        };
+      else el.querySelectorAll("[data-v]").forEach((b) => (b.onclick = () => save(b.dataset.v)));
+      if (el.matches(".chk")) el.onclick = () => save(el.dataset.v);
+      // The system's own folder dialog, opened by the board: a page cannot read a real path.
+      if (r.folder)
+        $(el.id + "-pick").onclick = async () => {
+          const j = await post("/pick-folder", {});
+          if (j.path) {
+            await save(j.path);
+            load();
+          }
+        };
+    });
+}

package/web/board/store.ts

@@ -0,0 +1,33 @@
+// State more than one module writes: the board's data, the open card and form, the
+// panel's tab and doc, and the page filters. Everything else lives in the module that
+// owns it.
+export const store = {
+  S: { project: null, projects: [], cards: [], now: Date.now(), all: false },
+  all: new URLSearchParams(location.search).get("all") !== "0",
+  openKey: null,
+  mode: null,
+  modeKey: null,
+  menuKey: null,
+  tab: "request",
+  lastTab: "request",
+  runDoc: null,
+  clearMenu: false,
+  wantTerm: null,
+  // The settings search survives the re-render each save does; the gear button starts it empty.
+  setQ: "",
+  // Settings and the Icebox fill the same panel after a fetch: a fill only lands if no other view
+  // or fill started since, or a slow answer paints one page under the other's title.
+  pageGen: 0,
+  // The project picker's list.
+  PL: [],
+  // The all-projects filter: tick the projects to show; none ticked shows every one. Kept per browser.
+  shown: new Set(
+    (() => {
+      try {
+        return JSON.parse(localStorage.getItem("kz-show")) || [];
+      } catch (e) {
+        return [];
+      }
+    })(),
+  ),
+};

package/web/board/toast.ts

@@ -0,0 +1,32 @@
+import { $ } from "./dom.ts";
+
+// With `report`, the toast carries a link to a prefilled GitHub bug form (/issue) and
+// stays long enough to click it.
+let tt;
+export function toast(s, report) {
+  const t = $("toast");
+  t.textContent = s;
+  t.classList.toggle("rep", !!report);
+  if (report) {
+    const a = document.createElement("a");
+    a.href = "/issue?" + new URLSearchParams(report);
+    a.target = "_blank";
+    a.rel = "noopener";
+    a.textContent = "Report";
+    t.append(" ", a);
+  }
+  t.classList.add("on");
+  clearTimeout(tt);
+  tt = setTimeout(() => t.classList.remove("on"), report ? 8000 : 4000);
+}
+export function askNotify() {
+  try {
+    if (typeof Notification !== "undefined" && Notification.permission === "default") Notification.requestPermission();
+  } catch (e) {}
+}
+export function notifyUser(body) {
+  try {
+    if (typeof Notification !== "undefined" && Notification.permission === "granted")
+      new Notification("kaizen", { body, icon: "/logo.png" });
+  } catch (e) {}
+}

package/web/board/update.ts

@@ -0,0 +1,75 @@
+import { post } from "./api.ts";
+import { $, esc } from "./dom.ts";
+import { openSettings } from "./settings.ts";
+import { view } from "./views.ts";
+
+// A newer kaizen on npm: a dot on Settings, and an Update bar at the top of that page.
+// The server upgrades and starts a board on the new version, which replaces this one;
+// the hello with its new boot id reloads the page (listen()). With none known, the bar
+// is a quiet row whose Check for updates asks npm now instead of the server's 6 h cache.
+let upd = null,
+  ver = null;
+function gotVer(v) {
+  ver = v;
+  if (!v.update) return false;
+  upd = v;
+  const a = document.querySelector('.rail a[data-view="settings"]');
+  a.classList.add("upd");
+  a.title = `Settings: kaizen ${v.latest} is available`;
+  return true;
+}
+export function updBar() {
+  if (!upd) {
+    const d = document.createElement("div");
+    d.className = "updbar quiet";
+    d.innerHTML = `<span id="upd-msg" aria-live="polite">${ver ? `You are running kaizen ${esc(ver.version)}.` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
+    $("pbody").prepend(d);
+    const b = $("upd-chk");
+    b.onclick = async () => {
+      b.disabled = true;
+      b.textContent = "Checking…";
+      const v = await fetch("/version?fresh=1")
+        .then((r) => r.json())
+        .catch(() => null);
+      if (!d.isConnected) return;
+      b.disabled = false;
+      b.textContent = "Check for updates";
+      if (v && gotVer(v)) {
+        d.remove();
+        updBar();
+        $("upd-go").focus();
+        return;
+      }
+      $("upd-msg").textContent =
+        !v || !v.latest ? "Could not reach npm. Try again later." : `kaizen ${v.version} is up to date.`;
+    };
+    return;
+  }
+  const d = document.createElement("div");
+  d.className = "updbar";
+  d.innerHTML = `<span>kaizen <b>${esc(upd.latest)}</b> is available. You are running ${esc(upd.version)}.</span><button class="btn pri" id="upd-go">Update kaizen</button>`;
+  $("pbody").prepend(d);
+  const b = $("upd-go");
+  b.onclick = async () => {
+    if (!confirm(`Update kaizen to ${upd.latest}? The board restarts, and agents running inside cards stop.`)) return;
+    b.disabled = true;
+    b.textContent = "Updating…";
+    const r = await post("/upgrade", {});
+    if (!r.ok) {
+      b.disabled = false;
+      b.textContent = "Update kaizen";
+      return;
+    }
+    b.textContent = "Restarting…";
+    setTimeout(() => location.reload(), 20000);
+  };
+}
+
+export function initUpdate() {
+  fetch("/version")
+    .then((r) => r.json())
+    .then((v) => {
+      if (gotVer(v) && view === "settings") openSettings();
+    })
+    .catch(() => {});
+}

package/web/board/views.ts

@@ -0,0 +1,65 @@
+import { store } from "./store.ts";
+import { $ } from "./dom.ts";
+import { openSources } from "./icebox.ts";
+import { close } from "./panel.ts";
+import { openSettings } from "./settings.ts";
+
+// ---- views: the board, or Settings and the Icebox as pages in the docked panel, each with its own address
+export let view = "board";
+export const markView = (v) => {
+  document
+    .querySelectorAll(".rail a.it")
+    .forEach((a) =>
+      a.dataset.view === v ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current"),
+    );
+  // The Icebox is titled in the header, top left, like the board.
+  document.querySelector(".hdr h1").textContent = v === "sources" ? "Icebox" : "Board";
+};
+export function go(v, push) {
+  store.pageGen++;
+  if (v === "icebox") v = "sources";
+  if (!["settings", "sources"].includes(v)) v = "board";
+  const was = view;
+  view = v;
+  markView(v);
+  document.body.classList.toggle("paged", v !== "board");
+  document.body.classList.toggle("ice", v === "sources");
+  if (push && v !== was)
+    history.pushState(null, "", v === "board" ? location.pathname : "?view=" + (v === "sources" ? "icebox" : v));
+  const p = $("panel");
+  if (v === "board") {
+    if (was === "board") return;
+    // Undocked without the slide: it was a page, not a drawer leaving.
+    p.style.transition = "none";
+    p.classList.remove("open", "docked");
+    p.offsetWidth;
+    p.style.transition = "";
+    close();
+    return;
+  }
+  p.classList.add("docked");
+  if (v === "settings") openSettings();
+  else openSources();
+}
+
+export function initViews() {
+  document.querySelectorAll(".rail a[data-view]").forEach((a) => {
+    if (a.dataset.view === "notes") return;
+    a.onclick = (e) => {
+      if (e.ctrlKey || e.metaKey || e.shiftKey || e.button) return;
+      e.preventDefault();
+      if (a.dataset.view === "settings") store.setQ = "";
+      go(a.dataset.view, true);
+    };
+  });
+  document.querySelector(".rail .home").onclick = (e) => {
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.button) return;
+    e.preventDefault();
+    go("board", true);
+  };
+  addEventListener("popstate", () => go(new URLSearchParams(location.search).get("view")));
+  // The menu's theme switch while Settings shows: its Theme row follows.
+  addEventListener("kz-theme", () => {
+    if (view === "settings") openSettings();
+  });
+}