kaizen-agent 1.43.0 → 1.43.1

package/skills/kaizen/spec-main.md

@@ -97,13 +97,48 @@ tab from staying empty; the reviewer flagging it later is a second net, not the
 
 ---
 
+## Docs gate
+
+Before a run can be `done` — in every runner and every mode, `auto` included — bring
+the project's docs vault up to date with what the run changed. Apply it once the review
+is settled and before the final approval report, so the user approves the notes with
+the work; where the user's answer sends findings back to be fixed, apply it again over
+those fixes before setting `stage: "done"`. In a run with a `worktree`, edit the notes
+in the worktree, where the vault is committed with the code. Where
+`notes/Project/Index.md` does not exist in the state directory, there is no vault and
+nothing to do. The builder already updates the notes it can see during the build; this
+is the step that catches what it could not: fix iterations after it, and changes no
+note covers.
+
+1. **What changed:** every path named in `03-impl.md` and in each
+   `05-iterations/*-fix.md`, leaving out `.kaizen/` itself.
+2. **Covered:** for each note whose `sources` include one of those paths (a folder in
+   `sources` covers everything under it), check the note against the changed files.
+   Where the change made it untrue or left something out, correct it as *Keep the
+   project's docs vault current* in [`spec-build.md`](spec-build.md) says — never the
+   `## Notes` section — set `updated` to today, and append the `Log.md` line, unless the
+   builder already wrote this run's line, in which case add the notes to it.
+3. **Not covered:** a changed path no note's `sources` reach. Add it to the `sources`
+   of the note whose area it belongs to and describe it there; where it belongs to no
+   area, write a note for it as step 4 of *Update* in [`docs.md`](docs.md) says and
+   list it in `Index.md`. A path that is not part of the project's material — a lock
+   file, a generated bundle — needs no note.
+4. **Lint** the notes touched, as *Lint* in [`docs.md`](docs.md) lists, and fix what
+   this run broke.
+
+Name the notes touched in the final report; the commit at done includes them. A run
+whose changes leave every note true touches nothing and says so in one line.
+
+---
+
 ## Final approval
 
 Controlled by `approvals.review`, skipped in `auto`.
 
 Report: what was built (for a code run, show its Preview proof), verification results, findings fixed, findings still open,
 every criterion the reviewer answered `CANNOT VERIFY` with the check it says a human
-must make, and anything the builder noted as out of scope. Where the run used `runner: lite`, say
+must make, anything the builder noted as out of scope, and the notes the *Docs gate*
+touched. Where the run used `runner: lite`, say
 so in that report — the reviewer saw the work, and nobody should read a same-session
 review as an independent one because the output looked the same.
 Later build requests in the same session follow *Follow-ups are runs too* in [`spec.md`](spec.md): a revise of this run until it is `done`, then a new linked run.
@@ -133,10 +168,10 @@ Set `stage: "done"` in `state.json` once the user accepts.
 
 **Commit at done, when `git.auto_commit` is `true`.** Setting `stage: "done"` — the
 user approving at review, or an `auto` run finishing — is then the ask to commit, under
-either runner. Commit only the files this run changed (the paths `03-impl.md` names,
-that `git status` shows changed), by path: `git add -A -- <paths>` then
-`git commit -m <message> -- <paths>`, never the whole tree, since other sessions edit
-the same checkout. The message is `03-impl.md`'s `## Commit`. In a run with a
+either runner. Commit only the files this run changed (the paths `03-impl.md` names
+and the notes the *Docs gate* touched, that `git status` shows changed), by path:
+`git add -A -- <paths>` then `git commit -m <message> -- <paths>`, never the whole
+tree, since other sessions edit the same checkout. The message is `03-impl.md`'s `## Commit`. In a run with a
 `worktree`, commit there. Then write `runs/<id>/07-commit.md` as `commit: <short sha>`
 and `pushed: no`, so the board shows it committed and offers the push. Never push. A
 failed commit is reported as printed; the run is still `done`. With the setting

package/skills/kaizen/spec-review.md

@@ -125,7 +125,8 @@ and no criterion is `CANNOT VERIFY`; otherwise
 `; <n> cannot verify` when any criterion was — even when every count is 0, so an open
 human check never reads as a clean pass.
 
-The reviewer also appends any durable lesson about this material to `memory.md` —
+Where `review.write_memory` is true (the default), the reviewer also appends any
+durable lesson about this material to `memory.md` —
 a recurring bug pattern, a non-obvious constraint, a convention worth keeping. Not
 run-specific detail; only what the next run would want to know.
 

package/skills/kaizen-help/SKILL.md

@@ -88,15 +88,11 @@ Each iteration is written to `runs/<id>/05-iterations/`.
 | `auto_fix.enabled` | `true` | Auto-fix findings vs. escalate everything |
 | `auto_fix.min_severity` | `high` | Threshold for auto-fix (`critical\|high\|medium\|low`) |
 | `auto_fix.max_iterations` | `2` | Fix/recheck rounds before escalating remaining findings |
-| `track.default` | `auto` (inferred per run) | Pin a track for a repo that is always one kind of work |
 | `review.write_memory` | `true` | Let the reviewer append lessons to `.kaizen/memory.md` |
 | `backlog.enabled` | `true` | Capture what a run deliberately did not do |
-| `backlog.file` | `06-backlog.md` | Per-run backlog file |
-| `backlog.orphan_file` | `backlog.md` | Where a pruned run's open items are rescued to |
 | `state.dir` | `.kaizen` | State directory |
 | `state.keep_runs` | `20` | Completed runs kept before pruning oldest (rescues open backlog first) |
 | `git.auto_commit` | `false` | `true`: commit the run's changed files when it is done; never pushes |
-| `git.branch_before_implement` | `true` | Branch before implement stage when on the default branch |
 | `subagents.model` | `inherit` | Model the stage subagents run on (opus/sonnet/haiku, Claude Code only) |
 | `subagents.effort` | `inherit` | Reasoning effort for the stage subagents (low/medium/high, Claude Code only) |
 | `sources.every` | `24h` | How often the web board checks request sources for new ideas (`off\|1h\|6h\|24h`) |

package/web/board/agent-term.ts

@@ -11,7 +11,7 @@ let termKey = null,
   termOff = null,
   termLib = null;
 export const where = (r) => (r.pty ? "running in its card" : "opened in your terminal");
-const termLoad = () =>
+export const termLoad = () =>
   (termLib ||= new Promise((ok, no) => {
     const l = document.createElement("link");
     l.rel = "stylesheet";

package/web/board/api.ts

@@ -3,6 +3,7 @@ import { key, render } from "./cards.ts";
 import { $ } from "./dom.ts";
 import { close, ideaBody, open, openRun } from "./panel.ts";
 import { notifyUser, toast } from "./toast.ts";
+import { openTerms, termsShowing } from "./terms.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;
@@ -36,6 +37,7 @@ export async function load(quiet) {
   }
   // A redraw under a form being typed in would reset its fields and its focus.
   if (!(quiet && store.mode && $("board").querySelector(".inl input"))) render();
+  if (termsShowing()) openTerms();
   // Run on an idea closed the panel: open the card on its agent once the board knows the session.
   if (store.wantTerm && !store.openKey && !store.mode) {
     const n = store.S.cards.find((x) => key(x) === store.wantTerm && x.pty);

package/web/board/cards.ts

@@ -237,6 +237,7 @@ function card(c) {
     } else {
       items.push(["open", actionOf(c), ico("open")]);
       items.push(["archive", "Archive", ico("archive")]);
+      if (c.column === 1 && c.status !== "abandoned") items.push(["toidea", "Back to idea", ico("restore")]);
       if (c.status === "waiting" || c.status === "running" || c.status === "stalled") {
         items.push(null, ["reject", "Abandon", ico("x"), "danger"]);
       }
@@ -267,6 +268,12 @@ function card(c) {
           toggleArchive(c, a === "archive");
           return;
         }
+        if (a === "toidea") {
+          const r = await post("/to-idea", { dir: c.state, id: c.id });
+          if (r.ok) toast("Back in Ideas");
+          load();
+          return;
+        }
         store.mode = a;
         store.modeKey = k;
         render();
@@ -302,7 +309,7 @@ function inlineForm(c) {
   li.className = "inl";
   const dir = c.state;
   if (store.mode === "edit") {
-    li.innerHTML = html`<input value="${c.text}"><textarea placeholder="Notes: links, paths, background">${c.notes || ""}</textarea><div class="q dim" id="clong" hidden>The first line is over 72 characters; logs will cut it short.</div><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Save</button></div>`;
+    li.innerHTML = html`<input value="${c.text}"><textarea placeholder="Anything the planner should know">${c.notes || ""}</textarea><div class="q dim" id="clong" hidden>The first line is over 72 characters; logs will cut it short.</div><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Save</button></div>`;
     li.querySelector("[data-a=s]").onclick = async () => {
       const next = li.querySelector("input").value.trim(),
         notes = li.querySelector("textarea").value.trim();
@@ -314,7 +321,7 @@ function inlineForm(c) {
   }
   if (store.mode === "reject") {
     const idea = c.kind !== "run";
-    li.innerHTML = html`<div class="q">${c.kind === "backlog" ? "Not doing this backlog item?" : idea ? "Reject this idea?" : "Abandon this run?"} The reason is recorded.</div><input placeholder="Reason"><div class="row"><button class="btn ghost" data-a="c">Keep it</button><button class="btn warn" data-a="s">${idea ? "Reject" : "Abandon"}</button></div>`;
+    li.innerHTML = html`<div class="q">${c.kind === "backlog" ? "Not doing this backlog item?" : idea ? "Reject this idea?" : "Abandon this run?"} The reason is recorded.</div><input placeholder="Why not?"><div class="row"><button class="btn ghost" data-a="c">Keep it</button><button class="btn warn" data-a="s">${idea ? "Reject" : "Abandon"}</button></div>`;
     li.querySelector("[data-a=s]").onclick = async () => {
       const why = li.querySelector("input").value.trim();
       if (!why) {
@@ -450,7 +457,7 @@ async function startRun(c, kind) {
   const backlog = c.kind === "backlog" ? { source: c.source, n: c.n } : undefined;
   const r = await post("/run", { dir: c.state, text: c.text, backlog, kind, agent: p ? p.agent : undefined, yolo });
   if (r.ok) {
-    toast((kind === "full" ? "Full" : "Lite") + (yolo ? " yolo" : "") + " run " + where(r) + ": " + via(r.agent));
+    toast((kind === "full" ? "Full" : kind === "lite" ? "Lite" : "Started") + (yolo ? " yolo" : "") + " run " + where(r) + ": " + via(r.agent));
     // A backlog card has no terminal of its own; the run's card gets it once the run exists.
     if (r.pty && !backlog) store.wantTerm = key(c);
   }
@@ -461,12 +468,13 @@ const HINT = { 1: "Ideas you run are planned here", 2: "Approved plans are built
 
 // The new-idea form, wired into f: inline at the top of Ideas, or in a modal.
 function ideaForm(f, close) {
-  f.innerHTML = html`${store.all ? html`<div class="combo" id="ndc"><button type="button" class="sel" id="newdir" aria-label="Project for this idea" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" hidden><input class="sel" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="nds" role="listbox"></div></div></div>` : ""}<input id="newidea" placeholder="What would you like done?"><textarea id="newnotes" placeholder="Notes: links, paths, background (optional)"></textarea><div class="att" id="newatt"></div><input type="file" id="newfile" multiple hidden><div class="row"><button type="button" class="ib" id="newpick" aria-label="Attach files" title="Attach files">${ico("clip")}</button><button type="button" class="btn ghost" id="nc">Cancel</button><button type="button" class="btn pri" id="ns">Add</button></div>`;
+  f.innerHTML = html`${store.all ? html`<div class="combo" id="ndc"><button type="button" class="sel" id="newdir" aria-label="Project for this idea" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" hidden><input class="sel" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="nds" role="listbox"></div></div></div>` : ""}<input id="newidea" placeholder="What do you want to build?"><textarea id="newnotes" placeholder="Anything the planner should know (optional)"></textarea><div class="att" id="newatt"></div><input type="file" id="newfile" multiple hidden><div class="row"><button type="button" class="ib" id="newpick" aria-label="Attach files" title="Attach files">${ico("clip")}</button><button type="button" class="btn ghost" id="nc">Cancel</button><div class="split"><button type="button" class="btn pri" id="ns">Add</button><button type="button" class="btn pri" id="nm" aria-label="More ways to add" aria-haspopup="menu" aria-expanded="false">${ico("chev")}</button><div class="menu-pop" role="menu" hidden><button type="button" role="menuitem" id="nr" title="Add the idea and run it now">${ico("play")}Start run</button></div></div></div>`;
   const inp = f.querySelector("#newidea"),
     files = [];
   draft(inp, "f:new:0");
   draft(f.querySelector("textarea"), "f:new:1");
-  const save = async () => {
+  // run: add the idea, then launch it at once with the project's runner and agent.
+  const save = async (run) => {
     const text = inp.value.trim();
     if (!text) return;
     const notes = f.querySelector("textarea").value.trim();
@@ -481,6 +489,11 @@ function ideaForm(f, close) {
         const n = await post("/note", { dir, for: text, text: "", files: enc });
         if (!n.ok) toast("Idea added, files not attached");
       }
+      if (run) {
+        await load();
+        const c = store.S.cards.find((x) => x.kind === "idea" && x.text === text && (!dir || x.state === dir));
+        if (c) return startRun(c);
+      }
     }
     load();
   };
@@ -503,7 +516,37 @@ function ideaForm(f, close) {
         }
     };
   if (store.all) ideaCombo(f);
-  f.querySelector("#ns").onclick = save;
+  f.querySelector("#ns").onclick = () => save(false);
+  f.querySelector("#nr").onclick = () => save(true);
+  {
+    const mb = f.querySelector("#nm"),
+      menu = f.querySelector(".split .menu-pop");
+    // Focus moves into the menu only when it was opened from the keyboard.
+    const show = (on, kbd) => {
+      menu.hidden = !on;
+      mb.setAttribute("aria-expanded", String(on));
+      if (on && kbd) setTimeout(() => menu.querySelector("button").focus());
+    };
+    mb.onclick = (e) => {
+      e.stopPropagation();
+      show(menu.hidden, e.detail === 0);
+    };
+    menu.onkeydown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        show(false);
+        mb.focus();
+      }
+    };
+    f.addEventListener("click", (e) => {
+      if (!menu.hidden && !e.target.closest(".split")) show(false);
+    });
+    const sp = f.querySelector(".split");
+    sp.addEventListener("focusout", (e) => {
+      if (!sp.contains(e.relatedTarget)) show(false);
+    });
+  }
   f.querySelector("#nc").onclick = close;
   {
     const m = mic([inp, f.querySelector("textarea")]);
@@ -512,7 +555,7 @@ function ideaForm(f, close) {
   inp.onkeydown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
-      save();
+      save(false);
     }
     if (e.key === "Escape") {
       e.preventDefault();

package/web/board/git.ts

@@ -31,7 +31,7 @@ export function gitBtn(c) {
 export function confirmCommit(c, msg) {
   const g = store.runDoc.git,
     foot = $("pfoot");
-  foot.innerHTML = html`<div class="inl" style="flex:1"><div class="q">Commit ${g.files.length} changed file${g.files.length === 1 ? "" : "s"} on ${g.branch || "this branch"} and push to ${g.remote}?</div><div class="q dim">Only the files this run's report names.${g.others ? ` ${g.others} other changed file${g.others === 1 ? " is" : "s are"} left alone.` : ""}</div><pre class="files">${g.files.join("\n")}</pre>${g.shared && g.shared.length ? html`<div class="q">These files also hold other runs' changes, and a file is committed whole:</div><pre class="files">${g.shared.join("\n")}</pre>` : ""}<textarea aria-label="Commit message" placeholder="feat(scope): what changed">${msg || commitMsg(store.runDoc.impl) || c.title || c.text}</textarea><div class="q dim" id="clong" hidden>The first line is over 72 characters; logs will cut it short.</div><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Commit &amp; push</button></div></div>`;
+  foot.innerHTML = html`<div class="inl" style="flex:1"><div class="q">Commit ${g.files.length} changed file${g.files.length === 1 ? "" : "s"} on ${g.branch || "this branch"} and push to ${g.remote}?</div><div class="q dim">Only the files this run's report names.${g.others ? ` ${g.others} other changed file${g.others === 1 ? " is" : "s are"} left alone.` : ""}</div><pre class="files">${g.files.join("\n")}</pre>${g.shared && g.shared.length ? html`<div class="q">These files also hold other runs' changes, and a file is committed whole:</div><pre class="files">${g.shared.join("\n")}</pre>` : ""}<textarea aria-label="Commit message" placeholder="Describe what changed">${msg || commitMsg(store.runDoc.impl) || c.title || c.text}</textarea><div class="q dim" id="clong" hidden>The first line is over 72 characters; logs will cut it short.</div><div class="row"><button class="btn ghost" data-a="c">Cancel</button><button class="btn pri" data-a="s">Commit &amp; push</button></div></div>`;
   const inp = foot.querySelector("textarea"),
     go = foot.querySelector("[data-a=s]");
   inp.focus();

package/web/board/icebox.ts

@@ -975,7 +975,7 @@ export async function openSources() {
       if (!dir && !showable().length) return toast("Pick a project first");
       // The new-idea form, cut down: the request, files, dictation and, in All projects, the project.
       const dl = modal(
-        `${all ? `<div class="combo" id="ndc"><button type="button" class="sel" id="newdir" aria-label="Project for this request" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" hidden><input class="sel" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="nds" role="listbox"></div></div></div>` : ""}<textarea id="newidea" placeholder="New request for the icebox" aria-label="Request"></textarea><div class="att"></div><input type="file" multiple hidden><div class="row"><button type="button" class="ib" id="newpick" aria-label="Attach files" title="Attach files">${ico("clip")}</button><button type="button" class="btn ghost" value="">Cancel</button><button class="btn pri">Add</button></div>`,
+        `${all ? `<div class="combo" id="ndc"><button type="button" class="sel" id="newdir" aria-label="Project for this request" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" hidden><input class="sel" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="nds" role="listbox"></div></div></div>` : ""}<textarea id="newidea" placeholder="What did someone ask for?" aria-label="Request"></textarea><div class="att"></div><input type="file" multiple hidden><div class="row"><button type="button" class="ib" id="newpick" aria-label="Attach files" title="Attach files">${ico("clip")}</button><button type="button" class="btn ghost" value="">Cancel</button><button class="btn pri">Add</button></div>`,
       );
       const f = dl.querySelector("form"),
         inp = f.querySelector("textarea"),

package/web/board/keys.ts

@@ -54,6 +54,8 @@ export function initKeys() {
       } else close();
       return;
     }
+    // The Terminal page has no cards to move between; its keys are the terminals'.
+    if (view === "terminal") return;
     if (e.key === "n" && !document.querySelector("dialog[open]")) {
       if (view !== "board") go("board", true);
       newIdea();

package/web/board/live.ts

@@ -34,9 +34,10 @@ const v0 = ((v) => (v === "icebox" ? "sources" : v))(new URLSearchParams(locatio
 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));
+  markView(["settings", "sources", "terminal"].includes(v0) ? v0 : "board");
+  document.body.classList.toggle("paged", ["settings", "sources", "terminal"].includes(v0));
   document.body.classList.toggle("ice", v0 === "sources");
+  document.body.classList.toggle("termv", v0 === "terminal");
   (async () => {
     let d;
     try {

package/web/board/projects.ts

@@ -57,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]"),
@@ -96,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]"),

package/web/board/settings.ts

@@ -47,7 +47,8 @@ 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")
@@ -60,10 +61,12 @@ export async function openSettings() {
     }
     if (vals.every((v) => /^\d+$/.test(v)))
       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>`;
+    // 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) =>
-    html`<div class="srow" data-q="${q.toLowerCase()}"><label for="${id}">${label}</label>${control}${hint ? html`<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";
@@ -83,16 +86,17 @@ export async function openSettings() {
                         ? 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),
-                    r.help,
+                    [r.help, r.idle].filter(Boolean).join(" · "),
                     id,
                     [r.label, r.help, r.key, g, ...r.values].join(" "),
+                    !!r.idle,
                   );
                 })}</div>`,
           )
       : 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", 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")}
+  <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", 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>
@@ -154,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);
@@ -166,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 () => {