kaizen-agent 1.42.2 → 1.43.1

package/web/board/panel.ts

@@ -5,7 +5,7 @@ import { APPROVAL, answer, confirmAnswers, confirmRevise, decide, decided, resum
 import { cardEl, key, render } from "./cards.ts";
 import { chat } from "./chat.ts";
 import { stopDictation } from "./dictation.ts";
-import { $, esc } from "./dom.ts";
+import { $, html, raw } from "./dom.ts";
 import { fixForm, fixOff } from "./fixes.ts";
 import { commitPush, confirmCommit, gitBtn } from "./git.ts";
 import { ICON, WORD, need } from "./labels.ts";
@@ -51,7 +51,7 @@ export function open(c, keepTab) {
   $("pterm").hidden = true;
   if (c.kind === "idea") {
     store.runDoc = null;
-    $("psub").innerHTML = `<span class="pst"><span class="st d-idea"><svg><use href="#s-idea"/></svg></span>Idea</span><span class="pst dim">${esc(c.where.split(/[\\/]/).pop() || c.where)}</span>`;
+    $("psub").innerHTML = html`<span class="pst"><span class="st d-idea"><svg><use href="#s-idea"/></svg></span>Idea</span><span class="pst dim">${c.where.split(/[\\/]/).pop() || c.where}</span>`;
     $("ptabs").innerHTML = "";
     ideaBody(c);
     const foot = $("pfoot");
@@ -97,7 +97,7 @@ function showProgress(c) {
     st: [...src.matchAll(/^\s*-\s*(todo|doing|done):/gm)].map((m) => m[1]),
     w: +/width:(\d+)%/.exec(h)[1],
   };
-  $("pbody").innerHTML = h + (store.runDoc.backlog ? "<h3>Backlog</h3>" + md(store.runDoc.backlog, true) : "");
+  $("pbody").innerHTML = html`${raw(h)}${store.runDoc.backlog ? html`<h3>Backlog</h3>${raw(md(store.runDoc.backlog, true))}` : ""}`;
   const bar = $("pbody").querySelector(".pbar i");
   if (prev && prev.w !== lastProg.w) {
     bar.style.width = prev.w + "%";
@@ -129,9 +129,9 @@ export async function openRun(c, refresh, again) {
   if (refresh && ta && document.activeElement === ta) return;
   // The board's own status mark, then what it waits on: chips, not a dotted line.
   $("psub").innerHTML =
-    `<span class="pst"><span class="st d-${ICON[c.status] || "idea"}"><svg><use href="#s-${ICON[c.status] || "idea"}"/></svg></span>${esc(cap(WORD[c.status] || c.status))}</span>` +
-    (c.awaiting ? `<span class="pst dim">${esc(cap(need(c.awaiting)))}</span>` : "") +
-    (c.parent ? `<span class="pst link" title="Filed by this run">${esc(c.parent)}</span>` : "");
+    html`<span class="pst"><span class="st d-${ICON[c.status] || "idea"}"><svg><use href="#s-${ICON[c.status] || "idea"}"/></svg></span>${cap(WORD[c.status] || c.status)}</span>` +
+    (c.awaiting ? html`<span class="pst dim">${cap(need(c.awaiting))}</span>` : "") +
+    (c.parent ? html`<span class="pst link" title="Filed by this run">${c.parent}</span>` : "");
   // Only tabs with something in them show. A card whose agent runs in the board gets its
   // terminal behind the header's terminal button, chosen once right after a launch from here.
   const tabs = TABS.filter(
@@ -162,7 +162,7 @@ export async function openRun(c, refresh, again) {
     openRun(c, true);
   };
   $("ptabs").innerHTML = tabs
-    .map((t) => `<button class="${t[1] === store.tab ? "on" : ""}" data-k="${t[1]}">${t[0]}</button>`)
+    .map((t) => html`<button class="${t[1] === store.tab ? "on" : ""}" data-k="${t[1]}">${t[0]}</button>`)
     .join("");
   [...$("ptabs").children].forEach(
     (b) =>
@@ -180,15 +180,15 @@ export async function openRun(c, refresh, again) {
     chat(c, doc, ro);
   } else
     $("pbody").innerHTML = doc
-      ? md(doc, k === "backlog")
-      : `<p style="color:var(--dim)">No ${{ request: "request", plan: "plan", impl: "work report", preview: "preview", review: "review", backlog: "backlog" }[k]} yet.</p>`;
+      ? raw(md(doc, k === "backlog"))
+      : html`<p style="color:var(--dim)">No ${{ request: "request", plan: "plan", impl: "work report", preview: "preview", review: "review", backlog: "backlog" }[k]} yet.</p>`;
   if (k === "backlog") showProgress(c);
   if (k === "review") fixForm(c);
   // The notebook's notes that link here, each opening that note: above the run's own notes.
   if (k === "notes" && store.runDoc.linkedFrom && store.runDoc.linkedFrom.length)
     $("pbody").insertAdjacentHTML(
       "afterbegin",
-      `<h3>Linked from notes</h3><ul class="lnk">${store.runDoc.linkedFrom.map((n) => `<li><a href="/notebook?dir=${encodeURIComponent(c.state)}&amp;note=${encodeURIComponent(n)}">${esc(n)}</a></li>`).join("")}</ul>`,
+      html`<h3>Linked from notes</h3><ul class="lnk">${store.runDoc.linkedFrom.map((n) => html`<li><a href="/notebook?dir=${encodeURIComponent(c.state)}&amp;note=${encodeURIComponent(n)}">${n}</a></li>`)}</ul>`,
     );
   // Only the panel the link asked for: another card opened meanwhile drops the mark.
   if (hit && !refresh) {
@@ -209,7 +209,7 @@ export async function openRun(c, refresh, again) {
     qs = pq || [];
   // Its in-card agent ended on a waiting or done run: reopen that conversation, nothing sent.
   const rs = c.pty && !c.pty.alive ? `<button class="btn" data-a="resume">Resume session</button>` : "";
-  if (c.archived) foot.innerHTML = arch;
+  if (c.archived) foot.innerHTML = raw(arch);
   else if ((c.status === "waiting" || c.awaiting === "findings") && APPROVAL[c.awaiting]) {
     const sent = decided.has(answer(c)),
       asks = !pq
@@ -221,13 +221,13 @@ export async function openRun(c, refresh, again) {
     const more =
       gitBtn(c).replace(/class="btn( pri)?"/g, "") +
       `<button data-a="archive">Archive</button><hr><button data-a="ab" class="danger">Abandon</button>`;
-    foot.innerHTML = `<span class="note">${sent ? "Sent to your agent." : APPROVAL[c.awaiting] + asks + " Answering here opens a new agent session."}</span><details class="more"><summary class="btn ghost">More</summary><div class="menu-pop">${more}</div></details>${rs}<span class="dec"><button class="btn" data-a="revise"${sent ? " disabled" : ""}>Revise</button><button class="btn pri" data-a="approve"${sent ? " disabled" : ""}>${c.awaiting === "findings" ? "Approve as-is" : "Approve"}</button></span>`;
+    foot.innerHTML = html`<span class="note">${sent ? "Sent to your agent." : APPROVAL[c.awaiting] + asks + " Answering here opens a new agent session."}</span><details class="more"><summary class="btn ghost">More</summary><div class="menu-pop">${raw(more)}</div></details>${raw(rs)}<span class="dec"><button class="btn" data-a="revise"${sent ? " disabled" : ""}>Revise</button><button class="btn pri" data-a="approve"${sent ? " disabled" : ""}>${c.awaiting === "findings" ? "Approve as-is" : "Approve"}</button></span>`;
   } else if (c.status === "waiting")
-    foot.innerHTML = `<span class="note">Waiting on you: ${esc(need(c.awaiting))}. Answer in the ${c.pty && c.pty.alive ? "terminal (button at the top)" : "terminal running this run"}.</span>${arch}<button class="btn ghost" data-a="ab">Abandon</button>${rs}`;
-  else if (c.status === "done") foot.innerHTML = arch + rs;
-  else if (c.status === "abandoned") foot.innerHTML = arch;
+    foot.innerHTML = html`<span class="note">Waiting on you: ${need(c.awaiting)}. Answer in the ${c.pty && c.pty.alive ? "terminal (button at the top)" : "terminal running this run"}.</span>${raw(arch)}<button class="btn ghost" data-a="ab">Abandon</button>${raw(rs)}`;
+  else if (c.status === "done") foot.innerHTML = raw(arch + rs);
+  else if (c.status === "abandoned") foot.innerHTML = raw(arch);
   else
-    foot.innerHTML = `<span class="note">${c.pty && !c.pty.alive ? "Its agent ended before the stage finished. Resume continues it here." : c.status === "stalled" ? "No progress for a while. Resume it, or abandon it." : c.pty ? "" : "Running in your agent."}</span>${arch}<button class="btn ghost" data-a="ab">Abandon run</button>${resumable(c) ? `<button class="btn pri" data-a="resume">Resume</button>` : ""}`;
+    foot.innerHTML = html`<span class="note">${c.pty && !c.pty.alive ? "Its agent ended before the stage finished. Resume continues it here." : c.status === "stalled" ? "No progress for a while. Resume it, or abandon it." : c.pty ? "" : "Running in your agent."}</span>${raw(arch)}<button class="btn ghost" data-a="ab">Abandon run</button>${resumable(c) ? html`<button class="btn pri" data-a="resume">Resume</button>` : ""}`;
   foot.querySelectorAll("[data-a]").forEach(
     (b) =>
       (b.onclick = () => {
@@ -290,6 +290,12 @@ export function deep() {
   hit = m ? { type: m[1], n: +m[2], k: key(c) } : null;
   open(c, !!t);
 }
+// A run's panel on the tab of one of its items, that item scrolled to and marked.
+export function openAt(c, type, n) {
+  store.tab = type === "finding" ? "review" : "backlog";
+  hit = { type, n, k: key(c) };
+  open(c, true);
+}
 // What md() leaves of a line as text: no backticks or stars, a link reduced to its words.
 function mark(h) {
   hit = null;

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");
@@ -58,7 +57,7 @@ async function pick(v) {
   } else if (v === "__new") {
     // A name, and where it goes: the projects folder unless typed or picked.
     const dl = modal(
-      `<b>New project</b><input name="name" placeholder="Project name" aria-label="Project name" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Create in (a new folder is made)" aria-label="Create in" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Create</button></div>`,
+      `<b>New project</b><input name="name" placeholder="Project name" aria-label="Project name" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Folder to create" aria-label="Create in" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Create</button></div>`,
     );
     const f = dl.querySelector("form"),
       name = f.querySelector("[name=name]"),
@@ -97,7 +96,7 @@ async function pick(v) {
   } else if (v === "__clone") {
     // One form: the link, then where it goes. The folder fills in once the link names a repo.
     const dl = modal(
-      `<b>Clone from GitHub</b><input name="url" placeholder="https://github.com/owner/repo or git@github.com:owner/repo" aria-label="GitHub link (https or ssh)" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Clone into (a new folder is made)" aria-label="Clone into" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Clone</button></div>`,
+      `<b>Clone from GitHub</b><input name="url" placeholder="https://github.com/owner/repo" aria-label="GitHub link (https or ssh)" spellcheck="false" autocomplete="off"><div class="row"><input name="to" placeholder="Folder to clone into" aria-label="Clone into" spellcheck="false" autocomplete="off"><button type="button" class="btn ghost" data-a="pick">Pick…</button></div><div class="row"><button type="button" class="btn ghost" data-a="x">Cancel</button><button class="btn pri">Clone</button></div>`,
     );
     const f = dl.querySelector("form"),
       url = f.querySelector("[name=url]"),
@@ -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";
@@ -47,59 +47,59 @@ export async function openSettings() {
   $("psub").textContent = "";
   $("psub").title = "";
   // 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.
+  // ‹ value › for a choice, stepping and wrapping like a game's options screen. The row's
+  // label names the control; its help sits under it.
   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>`;
+    // Wired by stepper() below; the group takes its name from the row's label.
+    return html`<span class="step" id="${id}" role="group" aria-labelledby="${id}-l"><button id="${id}-prev" aria-label="Previous">‹</button><output aria-live="polite">${on === "" ? "—" : on}</output><button id="${id}-next" aria-label="Next">›</button></span>`;
   };
-  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>`;
+  // `off`: the row has no effect while another setting stands as it is; dimmed, still editable.
+  const row = (label, control, hint, id, q, off = false) =>
+    html`<div class="srow${off ? " off" : ""}" data-q="${q.toLowerCase()}"><label for="${id}" id="${id}-l">${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, r.idle].filter(Boolean).join(" · "),
                     id,
                     [r.label, r.help, r.key, g, ...r.values].join(" "),
+                    !!r.idle,
                   );
-                })
-                .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. Paste a new one to replace it" : "Desktop app client id from Google Cloud"}" 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. Paste a new one to replace it" : ""}" 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();
@@ -158,7 +158,32 @@ export async function openSettings() {
       toast(j.error || "Could not start Google sign-in");
     }
   };
-  $("th").onchange = (e) => setTheme(e.target.value);
+  // A stepper keeps its own position, so each click moves one value even before a save
+  // re-renders the panel; the shown value changes at once and apply() gets the new one.
+  // ←/→ press its arrows; focus moves to the arrow pressed.
+  const stepper = (el, vals, on, apply) => {
+    let i = Math.max(vals.indexOf(on), 0);
+    const step = (d) => {
+      i = (i + d + vals.length) % vals.length;
+      el.querySelector("output").textContent = vals[i] === "" ? "—" : vals[i];
+      apply(vals[i]);
+    };
+    $(el.id + "-prev").onclick = () => step(-1);
+    $(el.id + "-next").onclick = () => step(1);
+    el.onkeydown = (e) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      const b = $(el.id + (e.key === "ArrowLeft" ? "-prev" : "-next"));
+      b.focus();
+      b.click();
+    };
+  };
+  // Re-rendering replaces the arrows, so the one pressed gets focus back.
+  const refocus = async (f) => {
+    await openSettings();
+    if (f && /^s-preset-|-(prev|next)$/.test(f)) $(f)?.focus();
+  };
+  stepper($("th"), ["system", "light", "dark"], cur, setTheme);
   $("nt").onclick = () => {
     askNotify();
     setTimeout(openSettings, 300);
@@ -170,16 +195,22 @@ export async function openSettings() {
         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();
+        await refocus(f);
       };
-      if (el.tagName === "SELECT" || el.tagName === "INPUT")
+      if (el.tagName === "INPUT")
         el.onchange = async () => {
           await save(el.value.trim());
-          if (el.tagName === "INPUT") load();
+          load();
         };
       else el.querySelectorAll("[data-v]").forEach((b) => (b.onclick = () => save(b.dataset.v)));
       if (el.matches(".chk")) el.onclick = () => save(el.dataset.v);
+      // Clicks in quick succession save once, the value they settle on.
+      let t;
+      if (el.matches(".step"))
+        stepper(el, r.values, r.value, (v) => {
+          clearTimeout(t);
+          t = setTimeout(() => save(v), 300);
+        });
       // 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 () => {

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: "",