kaizen-agent 1.42.2 → 1.43.0

package/web/board/projects.ts

@@ -1,7 +1,7 @@
 import { store } from "./store.ts";
 import { load, post } from "./api.ts";
-import { render } from "./cards.ts";
-import { $, esc, ico, modal } from "./dom.ts";
+import { newIdea, render } from "./cards.ts";
+import { $, html, ico, modal } from "./dom.ts";
 import { openSources, srcOpen } from "./icebox.ts";
 import { toast } from "./toast.ts";
 import { view } from "./views.ts";
@@ -20,13 +20,13 @@ export const short = (l) => l.split(/[\\/]/).pop() || l;
 // A project's mark in every picker: its own logo when /state found one, else its initial.
 // A logo the browser cannot draw falls back to the initial too.
 export const plogo = (dir, label = "") => {
-  const ini = `<span class="plogo" aria-hidden="true">${esc((short(label) || "?").charAt(0).toUpperCase())}</span>`;
+  const ini = html`<span class="plogo" aria-hidden="true">${(short(label) || "?").charAt(0).toUpperCase()}</span>`;
   return store.S?.projects?.some((p) => p.dir === dir && p.logo)
-    ? `<img class="plogo" src="/project-logo?dir=${encodeURIComponent(dir)}" alt="" loading="lazy" onerror="this.outerHTML=this.dataset.f" data-f="${esc(ini)}">`
+    ? html`<img class="plogo" src="/project-logo?dir=${encodeURIComponent(dir)}" alt="" loading="lazy" onerror="this.outerHTML=this.dataset.f" data-f="${String(ini)}">`
     : ini;
 };
 // A picker row: the mark, then the folder name; the full path in the tooltip.
-const prow = (dir, label) => `${plogo(dir, label)}<span>${esc(short(label))}</span>`;
+const prow = (dir, label) => html`${plogo(dir, label)}<span>${short(label)}</span>`;
 // The project picker: a button shaped like a select that opens a search field over the list.
 export function list() {
   const q = $("projq").value.trim().toLowerCase();
@@ -34,8 +34,7 @@ export function list() {
   $("projs").innerHTML =
     store.PL.map((p, i) =>
       p[0].toLowerCase().includes(q)
-        ? (p[2] && !g++ ? `<div class="grp">In your projects folder</div>` : "") +
-          `<button role="option" data-i="${i}" title="${esc(p[0])}">${p[1] === "all" ? `<span class="plogo" aria-hidden="true">${ico("board")}</span><span>${esc(p[0])}</span>` : p[1] === "__new" || p[1] === "__find" || p[1] === "__clone" ? `<span class="plogo" aria-hidden="true">${ico("plus")}</span><span>${esc(p[0])}</span>` : prow(p[1], p[0])}</button>`
+        ? html`${p[2] && !g++ ? html`<div class="grp">In your projects folder</div>` : ""}<button role="option" data-i="${i}" title="${p[0]}">${p[1] === "all" ? html`<span class="plogo" aria-hidden="true">${ico("board")}</span><span>${p[0]}</span>` : p[1] === "__new" || p[1] === "__find" || p[1] === "__clone" ? html`<span class="plogo" aria-hidden="true">${ico("plus")}</span><span>${p[0]}</span>` : prow(p[1], p[0])}</button>`
         : "",
     ).join("") || `<div class="grp">No match</div>`;
   const f = $("projs").querySelector("button");
@@ -175,7 +174,7 @@ export function ideaCombo(f) {
         .filter((p) => p.label.toLowerCase().includes(t))
         .map(
           (p) =>
-            `<button type="button" role="option" data-d="${esc(p.dir)}" title="${esc(p.label)}" class="${p.dir === newDir ? "on" : ""}">${prow(p.dir, p.label)}</button>`,
+            html`<button type="button" role="option" data-d="${p.dir}" title="${p.label}" class="${p.dir === newDir ? "on" : ""}">${prow(p.dir, p.label)}</button>`,
         )
         .join("") || `<div class="grp">No match</div>`;
     box.querySelectorAll("button").forEach(
@@ -231,7 +230,7 @@ export function showList() {
   $("shows").innerHTML =
     SP.map((p, i) =>
       p.label.toLowerCase().includes(q)
-        ? `<button type="button" role="menuitemcheckbox" data-i="${i}" aria-checked="${store.shown.has(p.dir)}" title="${esc(p.label)}">${prow(p.dir, p.label)}<svg class="ck"><use href="#i-check"/></svg></button>`
+        ? html`<button type="button" role="menuitemcheckbox" data-i="${i}" aria-checked="${String(store.shown.has(p.dir))}" title="${p.label}">${prow(p.dir, p.label)}<svg class="ck"><use href="#i-check"/></svg></button>`
         : "",
     ).join("") || `<div class="grp">No match</div>`;
   const n = SP.filter((p) => store.shown.has(p.dir)).length;
@@ -313,9 +312,5 @@ export function initProjects() {
       $("show").setAttribute("aria-expanded", false);
     }
   });
-  $("newtop").onclick = () => {
-    store.mode = "new";
-    render();
-    $("board").scrollTo(0, 0);
-  };
+  $("newtop").onclick = newIdea;
 }

package/web/board/settings.ts

@@ -2,7 +2,7 @@ import { store } from "./store.ts";
 import { termStop } from "./agent-term.ts";
 import { load, post } from "./api.ts";
 import { stopDictation } from "./dictation.ts";
-import { $, esc, SKEL } from "./dom.ts";
+import { $, html, SKEL } from "./dom.ts";
 import { close } from "./panel.ts";
 import { askNotify, toast } from "./toast.ts";
 import { updBar } from "./update.ts";
@@ -51,55 +51,51 @@ export async function openSettings() {
   const ctl = (id, vals, on) => {
     // The preset is a segmented control over the tiers; custom, which only an edit to another row makes, lights none.
     if (id === "s-preset")
-      return `<span class="bar" id="${id}" role="group" aria-label="Preset">${vals
+      return html`<span class="bar" id="${id}" role="group" aria-label="Preset">${vals
         .filter((v) => v !== "custom")
-        .map((v) => `<button id="${id}-${v}" data-v="${v}" class="${v === on ? "on" : ""}" aria-pressed="${v === on}">${v}</button>`)
-        .join("")}</span>`;
+        .map((v) => html`<button id="${id}-${v}" data-v="${v}" class="${v === on ? "on" : ""}" aria-pressed="${String(v === on)}">${v}</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>`;
+      return html`<button class="chk${yes ? " on" : ""}" id="${id}" data-v="${yes ? "false" : "true"}" role="switch" aria-checked="${String(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>`;
+      return html`<span class="bar" id="${id}" role="group">${vals.map((v) => html`<button data-v="${v}" class="${v === on ? "on" : ""}" aria-pressed="${String(v === on)}">${v}</button>`)}</span>`;
+    return html`<select class="sel" id="${id}">${vals.map((v) => html`<option value="${v}"${v === on ? " selected" : ""}>${v === "" ? "—" : v}</option>`)}</select>`;
   };
   const row = (label, control, hint, id, q) =>
-    `<div class="srow" data-q="${esc(q.toLowerCase())}"><label for="${id}">${esc(label)}</label>${control}${hint ? `<p class="hint">${hint}</p>` : ""}</div>`;
+    html`<div class="srow" data-q="${q.toLowerCase()}"><label for="${id}">${label}</label>${control}${hint ? html`<p class="hint">${hint}</p>` : ""}</div>`;
   const hadFocus = document.activeElement?.id === "sq";
   const np = typeof Notification === "undefined" ? null : Notification.permission;
   const ntHelp = np ? (np === "denied" ? "Blocked by this browser" : "") : "Not supported in this 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>
+  $("pbody").innerHTML = html`<div class="sq"><input class="sel" id="sq" type="search" placeholder="Search settings" aria-label="Search settings" spellcheck="false" autocomplete="off" value="${store.setQ}"></div>
   ${
     cfg
       ? groups(cfg.rows)
           .map(
             ([g, rows]) =>
-              `<h3 class="sg">${esc(g)}</h3><div class="sgrp">${rows
+              html`<h3 class="sg">${g}</h3><div class="sgrp">${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">`
+                        ? html`<span class="fpick"><input class="sel" id="${id}" value="${r.value}" placeholder="not set" spellcheck="false"><button class="btn" id="${id}-pick" type="button">Browse…</button></span>`
+                        : html`<input class="sel" id="${id}" value="${r.value}" placeholder="not set" spellcheck="false">`
                       : ctl(id, r.values, r.value),
-                    esc(r.help),
+                    r.help,
                     id,
                     [r.label, r.help, r.key, g, ...r.values].join(" "),
                   );
-                })
-                .join("")}</div>`,
+                })}</div>`,
           )
-          .join("")
-      : `<p class="snone">Settings could not be read. Run <code>kaizen settings</code>.</p>`
+      : html`<p class="snone">Settings could not be read. Run <code>kaizen settings</code>.</p>`
   }
-  <h3 class="sg">Google</h3><div class="sgrp">${row("OAuth client id", `<input class="sel" id="gg-id" placeholder="${gg.hasClient ? "saved; type to replace" : "from Google Cloud, Desktop app"}" spellcheck="false" autocomplete="off">`, "", "gg-id", "google oauth client id sheets write back")}
-  ${row("OAuth client secret", `<span class="fpick"><input class="sel" id="gg-secret" type="password" placeholder="${gg.hasClient ? "saved; type to replace" : ""}" spellcheck="false" autocomplete="off"><button class="btn" id="gg-save" type="button">Save</button></span>`, "", "gg-secret", "google oauth client secret")}
-  ${row("Google account", `<button class="btn${gg.connected ? "" : " pri"}" id="gg-conn" type="button"${gg.hasClient || gg.connected ? "" : " disabled"}>${gg.connected ? "Disconnect" : "Connect"}</button>`, "", "gg-conn", "google account connect sheets write back")}</div>
+  <h3 class="sg">Google</h3><div class="sgrp">${row("OAuth client id", html`<input class="sel" id="gg-id" placeholder="${gg.hasClient ? "saved; type to replace" : "from Google Cloud, Desktop app"}" spellcheck="false" autocomplete="off">`, "", "gg-id", "google oauth client id sheets write back")}
+  ${row("OAuth client secret", html`<span class="fpick"><input class="sel" id="gg-secret" type="password" placeholder="${gg.hasClient ? "saved; type to replace" : ""}" spellcheck="false" autocomplete="off"><button class="btn" id="gg-save" type="button">Save</button></span>`, "", "gg-secret", "google oauth client secret")}
+  ${row("Google account", html`<button class="btn${gg.connected ? "" : " pri"}" id="gg-conn" type="button"${gg.hasClient || gg.connected ? "" : " disabled"}>${gg.connected ? "Disconnect" : "Connect"}</button>`, "", "gg-conn", "google account connect sheets write back")}</div>
   <h3 class="sg">Browser</h3><div class="sgrp">${row("Theme", ctl("th", ["system", "light", "dark"], cur), "", "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")}</div>
+  ${row("Notifications", html`<button class="chk${np === "granted" ? " on" : ""}" id="nt" role="switch" aria-checked="${String(np === "granted")}"${np && np !== "denied" ? "" : " disabled"}></button>`, ntHelp, "nt", "notifications " + ntHelp + " browser")}</div>
   <p class="snone" id="snone" hidden></p>`;
   // Hides rows that do not match, then any group (and its chip) left with none.
   updBar();

package/web/board/store.ts

@@ -14,6 +14,8 @@ export const store = {
   lastTab: "request",
   runDoc: null,
   clearMenu: false,
+  // The Ideas column's severity menu, on its Backlog tab.
+  sevMenu: false,
   wantTerm: null,
   // The settings search survives the re-render each save does; the gear button starts it empty.
   setQ: "",

package/web/board/update.ts

@@ -1,5 +1,5 @@
 import { post } from "./api.ts";
-import { $, esc } from "./dom.ts";
+import { $, html } from "./dom.ts";
 import { openSettings } from "./settings.ts";
 import { view } from "./views.ts";
 
@@ -21,16 +21,16 @@ export function updBar() {
   const d = document.createElement("div");
   d.className = `updbar${upd ? "" : " quiet"}`;
   if (!upd) {
-    d.innerHTML = `<span id="upd-msg" aria-live="polite">${ver ? `kaizen ${esc(ver.version)}` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
+    d.innerHTML = html`<span id="upd-msg" aria-live="polite">${ver ? `kaizen ${ver.version}` : "kaizen"}</span><button class="btn" id="upd-chk">Check for updates</button>`;
   } else {
     // What's new: each newer release's one-line title, shown on hover, focus or click.
-    const notes = (upd.notes || []).map((n) => `<li><b>${esc(n.v)}</b> ${esc(n.text)}</li>`).join("");
-    const news = notes
-      ? `<span class="updnew"><button class="btn" aria-describedby="upd-notes">What's new</button><span class="updpop" id="upd-notes" role="tooltip"><ul>${notes}</ul><a href="https://github.com/hfadhlullah/kaizen/releases" target="_blank" rel="noopener">All release notes</a></span></span>`
+    const notes = (upd.notes || []).map((n) => html`<li><b>${n.v}</b> ${n.text}</li>`);
+    const news = notes.length
+      ? html`<span class="updnew"><button class="btn" aria-describedby="upd-notes">What's new</button><span class="updpop" id="upd-notes" role="tooltip"><ul>${notes}</ul><a href="https://github.com/hfadhlullah/kaizen/releases" target="_blank" rel="noopener">All release notes</a></span></span>`
       : "";
-    d.innerHTML = `<span>kaizen <b>${esc(upd.latest)}</b> is available. You are running ${esc(upd.version)}.</span><span class="updact">${news}<button class="btn" id="upd-chk">Check for updates</button><button class="btn pri" id="upd-go">Update kaizen</button></span>`;
+    d.innerHTML = html`<span>kaizen <b>${upd.latest}</b> is available. You are running ${upd.version}.</span><span class="updact">${news}<button class="btn" id="upd-chk">Check for updates</button><button class="btn pri" id="upd-go">Update kaizen</button></span>`;
   }
-  if (ver && ver.failed) d.insertAdjacentHTML("afterbegin", `<span class="updfail" role="alert">Last update failed: ${esc(ver.failed)}</span>`);
+  if (ver && ver.failed) d.insertAdjacentHTML("afterbegin", html`<span class="updfail" role="alert">Last update failed: ${ver.failed}</span>`);
   $("pbody").prepend(d);
   const check = $("upd-chk");
   check.onclick = async () => {

package/web/board.html

@@ -144,6 +144,18 @@ section h2{margin:0;font-size:13px;color:var(--ink);font-weight:500;display:flex
 section h2 i{font-style:normal;font-weight:400;font-size:12px;color:var(--dim)}
 section h2 i:empty{display:none}
 section h2 .ib{margin-left:auto}
+/* Ideas column: its title is two icon tabs, Ideas | Backlog; on Backlog a severity filter icon */
+.itabs{display:flex;align-items:center;gap:2px}
+.itabs [role=tab]{min-height:26px;padding:0 8px;border:0;border-radius:13px;background:none;color:var(--dim);font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
+.itabs [role=tab] svg{width:14px;height:14px;stroke-width:1.7}
+.itabs [role=tab][aria-selected=true]{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--dim) 14%,transparent)}
+.itabs i{font-style:normal}
+.itabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+section h2 .sevf{margin-left:auto}section h2 .sevf~.ib{margin-left:0}
+section h2 .sevf.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
+.sev-pop{top:30px;right:0;min-width:180px}
+.sev-pop button i{font-style:normal;color:var(--dim);margin-left:auto;background:none;padding:0}
+.sev-pop button[aria-checked=true]{color:var(--accent)}
 ul{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-direction:column;gap:6px}
 
 /* card, Linear grammar in our palette