micro-models-agent 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to Micro Models Agent (MMA) will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.10.0] - 2026-09-27
+
+### Added
+
+- **Config registry expansion** (`src/config/registry.ts`, `src/config/registry-extra.ts`): ~110 keys now editable via `/config`, `mma config set` and web Settings; new value types `json` (objects, 20K limit, `JSON.parse`) and `list` (string arrays, comma-separated in REPL). `registry.ts` stays frozen (grandfathered over 300 lines) — new defs live in `registry-extra.ts`, merged into `DEFINITIONS` by concat.
+- **`mma config set` validation + `--force`** (`src/cli/commands.ts`): writes go through `setConfigValue` by default (bad value → `cli.config_invalid`, nothing persisted); `--force` is a raw dotted-path escape hatch without validation.
+- **`/security status` (REPL + web)** (`src/cli/repl-commands.ts`, `src/modules/webui/commands-settings.ts`): read-only summary (`security · on/off`, `↳` lines per STYLE.md) plus `/security <key> [value]` registry writes; handler maps per rule #17, automatic in web `/api/commands` HELP.
+- **Provider form fields** (`src/modules/webui/providers-api.ts`): `maxCompletionTokens` (512–128000), `cache` (mechanism/report selects + 6 bool flags), `retry{maxRetries,baseDelay,maxDelay}`; mirrored to legacy when active, validation failure keeps the existing `400 invalid-provider`.
+- **Web MCP CRUD** (`src/modules/webui/settings-api.ts`, `server.ts` route table): `POST /api/mcp` (create) + `PUT /api/mcp/:id` (full edit, `stdio→command` / `sse|http→url` required), `restartRequired: true`.
+- **Web LSP read/edit** (`src/modules/webui/settings-api.ts`): `GET /api/lsp` table + `PUT /api/lsp/:lang` (`enabled/timeout/command/args` only; add/remove stays JSON-only), `restartRequired: true`.
+- **Generic web settings controls** (`src/modules/webui/assets/js/settings-controls.js`): `controlFor` renders bool/enum/int/share/list/json per registry type.
+- **Settings information architecture** (`src/modules/webui/assets/js/settings-controls.js`, `index.html`, `settings.js`): `PANEL_SECTIONS` is the single source of truth mapping each panel to *named* sections, so a section title always describes the keys under it and no key sits in an "Advanced" bucket. Sidebar grew to 14 intent-named sections (network/browser/sessions split out; `advanced` keeps only diagnostics/retry/service), each panel renders titled cards with a one-line explanation, and the per-group count badges are gone.
+- **Settings search** (`src/modules/webui/assets/js/settings.js`, `index.html`, `styles.css`): a search box over the same `PANEL_SECTIONS` table plus i18n labels; results show label + owning panel + dotted key, selection switches the panel and flashes the row (`Esc` clears).
+- **Structured editors for list/JSON keys** (`src/config/registry.ts` `ConfigKeyDef.editor`, `src/config/registry-extra.ts`, `src/modules/webui/assets/js/settings-controls.js`): registry metadata now tells the GUI how to render a value. `tags` = removable chips with an inline adder (bash/path/network rule lists, `tools.defaultTags`, `contentScan.dangerousPatterns`), `checkboxes` = multiselect over a fixed set (`auditNotifier.eventTypes`), `table` = typed record rows (`pricing.overrides`, `experts`, `modelCapabilities`). Tables validate the record client-side and never post a half-filled row; editors post JSON, and `parseConfigValue` accepts a JSON array for `list` keys so values containing commas (regexes like `a{1,3}`) survive.
+- **Memory add dialog** (`src/modules/webui/assets/js/settings.js`): adding a memory entry uses the shared nested dialog (category + multi-line note) instead of the cramped inline row.
+
+### Changed
+
+- **Provider upsert semantics** (`src/modules/webui/providers-api.ts`): a create-POST naming the only entry of a virgin legacy config updates it in place instead of `409 name-conflict`; genuine collisions in multi-entry configs still return `name-conflict`.
+- **One nested settings dialog** (`src/modules/webui/assets/js/settings.js`, `index.html`, `styles.css`): provider, MCP-server and LSP-server edits all open in the shared `#subOverlay` (`openSubDialog`/`closeSubDialog`) above the settings modal, with focus trap, focus return and Esc/backdrop close; the inline MCP/LSP forms and the provider-only overlay are gone.
+
+### Fixed
+
+- **Audit event checkboxes** (`src/modules/webui/assets/styles.css`, `src/i18n/*.json`): `.row input` (a right-aligned 120px field) was inherited by checkboxes, so the label drifted away from the box; checkboxes now reset width/alignment and lay out in an even grid, and every option has a human label (`security block`, `bash command`, …) instead of a raw id.
+- **Settings reported a stale MMA version** (`src/config/registry.ts`): the `version` key returned `config.version` — the config-schema version written at first launch (`2.0.0`), which never matched a release. It now reports the installed package version (`readMmaVersion()`, read at call time), so the web Settings panel and `/config version` show the real release; the description no longer claims "(read-only)".
+
 ## [2.9.0] - 2026-09-26
 
 ### Added

package/dist/assets/app.js

@@ -210,6 +210,11 @@ function applyStaticI18n() {
     const p = mi.dataset.p;
     if (p) mi.textContent = t("web.settings." + p);
   });
+  const settingsSearch = document.getElementById("setSearch");
+  if (settingsSearch) {
+    settingsSearch.placeholder = t("web.settings.search_placeholder");
+    settingsSearch.setAttribute("aria-label", t("web.settings.search_placeholder"));
+  }
   document.querySelectorAll(".content-col .panel").forEach((panel) => {
     const h3 = panel.querySelector("h3");
     const name = panel.id.replace(/^p-/, "");

package/dist/assets/index.html

@@ -88,18 +88,29 @@
   <div class="modal" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
     <div class="modal-top"><span class="modal-top-icon" id="settingsIcon" aria-hidden="true"></span> <span id="settingsTitle">settings</span> <span class="saved" id="saveIndicator" role="status" aria-live="polite"></span> <button class="x linkbtn" id="closeSettings" type="button">✕ close</button></div>
     <div class="modal-body">
-      <div class="menu-col" id="setMenu" role="tablist" aria-label="settings sections">
-        <div class="mi on" data-p="general">General</div>
-        <div class="mi" data-p="model">Model &amp; Provider</div>
-        <div class="mi" data-p="context">Context</div>
-        <div class="mi" data-p="reasoning">Reasoning</div>
-        <div class="mi" data-p="agent">Agent</div>
-        <div class="mi" data-p="ui">UI &amp; Theme</div>
-        <div class="mi" data-p="memory">Memory</div>
-        <div class="mi" data-p="skills">Skills</div>
-        <div class="mi" data-p="plugins">Plugins · MCP</div>
-        <div class="mi" data-p="security">Security</div>
-        <div class="mi" data-p="advanced">Advanced</div>
+      <div class="menu-col">
+        <div class="set-search">
+          <span class="set-search-icon" id="setSearchIcon" aria-hidden="true"></span>
+          <input id="setSearch" type="search" autocomplete="off" spellcheck="false" placeholder="search settings" aria-label="search settings">
+          <button class="set-search-clear linkbtn" id="setSearchClear" type="button" hidden>✕</button>
+        </div>
+        <div id="setMenu" role="tablist" aria-label="settings sections">
+          <div class="mi on" data-p="general">General</div>
+          <div class="mi" data-p="model">Model &amp; Provider</div>
+          <div class="mi" data-p="context">Context</div>
+          <div class="mi" data-p="reasoning">Reasoning</div>
+          <div class="mi" data-p="agent">Agent</div>
+          <div class="mi" data-p="network">Network</div>
+          <div class="mi" data-p="browser">Browser</div>
+          <div class="mi" data-p="sessions">Sessions</div>
+          <div class="mi" data-p="ui">UI &amp; Theme</div>
+          <div class="mi" data-p="memory">Memory</div>
+          <div class="mi" data-p="skills">Skills</div>
+          <div class="mi" data-p="plugins">Plugins · MCP</div>
+          <div class="mi" data-p="security">Security</div>
+          <div class="mi" data-p="advanced">Advanced</div>
+        </div>
+        <div class="set-results" id="setResults" role="listbox" aria-label="search results" hidden></div>
       </div>
       <div class="content-col">
         <div class="panel on" id="p-general"><h3>General</h3><div class="rows" data-panel="general"></div></div>
@@ -107,6 +118,9 @@
         <div class="panel" id="p-context"><h3>Context</h3><div class="rows" data-panel="context"></div></div>
         <div class="panel" id="p-reasoning"><h3>Reasoning</h3><div class="rows" data-panel="reasoning"></div></div>
         <div class="panel" id="p-agent"><h3>Agent</h3><div class="rows" data-panel="agent"></div></div>
+        <div class="panel" id="p-network"><h3>Network</h3><div class="rows" data-panel="network"></div></div>
+        <div class="panel" id="p-browser"><h3>Browser</h3><div class="rows" data-panel="browser"></div></div>
+        <div class="panel" id="p-sessions"><h3>Sessions</h3><div class="rows" data-panel="sessions"></div></div>
         <div class="panel" id="p-ui"><h3>UI &amp; Theme</h3><div class="rows" data-panel="ui"></div></div>
         <div class="panel" id="p-memory"><h3>Memory</h3><div class="rows" data-panel="memory"></div></div>
         <div class="panel" id="p-skills"><h3>Skills</h3><div class="rows" data-panel="skills"></div></div>
@@ -131,10 +145,10 @@
   </div>
 </div>
 
-<div class="overlay overlay-nested" id="providerOverlay">
-  <div class="modal modal-provider" role="dialog" aria-modal="true" aria-labelledby="providerFormTitle">
-    <div class="modal-top"><span id="providerFormTitle">provider</span><button class="x linkbtn" id="closeProvider" type="button">✕ close</button></div>
-    <div class="modal-body provider-body" id="providerFormHost"></div>
+<div class="overlay overlay-nested" id="subOverlay">
+  <div class="modal modal-sub" role="dialog" aria-modal="true" aria-labelledby="subTitle">
+    <div class="modal-top"><span id="subTitle"></span><button class="x linkbtn" id="closeSub" type="button">✕ close</button></div>
+    <div class="modal-body provider-body" id="subHost"></div>
   </div>
 </div>
 

package/dist/assets/js/dom.js

@@ -69,6 +69,10 @@ refresh: [
 ],
 "chevron-down": [["path", { d: "m6 9 6 6 6-6" }]],
 "chevron-right": [["path", { d: "m9 18 6-6-6-6" }]],
+search: [
+  ["circle", { cx: 11, cy: 11, r: 8 }],
+  ["path", { d: "m21 21-4.3-4.3" }],
+],
 "arrow-up": [["path", { d: "M12 19V5" }], ["path", { d: "m5 12 7-7 7 7" }]],
 panel: [
   ["rect", { width: 18, height: 18, x: 3, y: 3, rx: 2, ry: 2 }],

package/dist/assets/js/settings-controls.js

@@ -0,0 +1,452 @@
+// Generic settings controls for the `mma web` settings modal (`settings.js`).
+// One renderer per registry `valueType`; rows, labels and descriptions stay in
+// `settings.js` (same `row`/`el` styling). Never uses innerHTML — all user or
+// config data goes through `textContent` (XSS rule).
+import { el, makeToggle } from "./dom.js";
+import { t } from "./i18n.js";
+
+// Validate raw JSON text without posting. Empty input is invalid (the backend
+// would reject it too); the caller shows `error` inline and skips the POST.
+export function validateJson(text) {
+  const raw = String(text == null ? "" : text).trim();
+  if (!raw) return { ok: false, error: "required" };
+  try {
+    JSON.parse(raw);
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: e instanceof Error ? e.message : "invalid JSON" };
+  }
+}
+
+function textInput(label, value) {
+  const input = el("input");
+  input.setAttribute("aria-label", label);
+  input.value = value;
+  return input;
+}
+
+// `def`: registry entry ({valueType, enum, min, max, step, readOnly}).
+// `value`: current config value at the key (`getPath` result).
+// `ctx`: { label, enumLabel(v), post(rawValue) } — `post` is `settings.js`
+// `postConfig`, injected so this module never touches the API directly.
+export function controlFor(def, value, ctx) {
+  if (def.readOnly) {
+    const ro = el("span", "val dim", value == null ? "—" : String(value));
+    if (value != null) ro.title = String(value);
+    return ro;
+  }
+  if (def.valueType === "bool") {
+    return makeToggle(!!value, (next) => {
+      ctx.post(next);
+      return true;
+    });
+  }
+  if (def.valueType === "enum") {
+    const sel = el("select");
+    sel.setAttribute("aria-label", ctx.label);
+    (def.enum || []).forEach((v) => {
+      const o = el("option", "", ctx.enumLabel(v));
+      o.value = v;
+      if (v === value) o.selected = true;
+      sel.appendChild(o);
+    });
+    sel.addEventListener("change", () => ctx.post(sel.value));
+    return sel;
+  }
+  if (def.valueType === "int") {
+    const input = textInput(ctx.label, value == null ? "" : String(value));
+    input.type = "number";
+    if (def.min != null) input.min = String(def.min);
+    if (def.max != null) input.max = String(def.max);
+    if (def.step != null) input.step = String(def.step);
+    input.addEventListener("change", () => ctx.post(input.value));
+    return input;
+  }
+  if (def.valueType === "share") {
+    const input = textInput(ctx.label, value == null ? "" : Math.round(Number(value) * 100) + "%");
+    input.addEventListener("change", () => ctx.post(input.value));
+    return input;
+  }
+  const editor = def.editor;
+  if (editor && editor.kind === "tags" && (def.valueType === "list" || def.valueType === "json")) {
+    return tagsEditor(value, ctx, editor);
+  }
+  if (editor && editor.kind === "checkboxes") {
+    return checkboxEditor(value, ctx, editor);
+  }
+  if (editor && editor.kind === "table") {
+    return tableEditor(value, ctx, editor);
+  }
+  if (def.valueType === "list") {
+    const shown = Array.isArray(value) ? value.join(", ") : value == null ? "" : String(value);
+    const input = textInput(ctx.label, shown);
+    input.placeholder = "a, b, c";
+    // The backend splits the raw comma string — post it verbatim.
+    input.addEventListener("change", () => ctx.post(input.value));
+    return input;
+  }
+  if (def.valueType === "json") {
+    const wrap = el("div", "jsonctl");
+    const area = el("textarea");
+    area.setAttribute("aria-label", ctx.label);
+    area.rows = 3;
+    area.value = value == null ? "" : JSON.stringify(value, null, 2);
+    const err = el("div", "json-err");
+    err.hidden = true;
+    area.addEventListener("input", () => {
+      const r = validateJson(area.value);
+      err.hidden = r.ok;
+      err.textContent = r.ok ? "" : String(r.error || "invalid JSON");
+    });
+    // Post only when valid — an invalid draft stays editable, no error toast.
+    area.addEventListener("change", () => {
+      if (validateJson(area.value).ok) ctx.post(area.value.trim());
+      else area.focus();
+    });
+    wrap.appendChild(area);
+    wrap.appendChild(err);
+    return wrap;
+  }
+  const input = textInput(ctx.label, value == null ? "" : String(value));
+  input.addEventListener("change", () => ctx.post(input.value));
+  return input;
+}
+
+// --- structured editors for list/json keys --------------------------------
+// Each posts a JSON string; `parseConfigValue` accepts a JSON array for `list`
+// and JSON.parse for `json`, so values containing commas (regexes, tags) survive.
+
+/** String chips with per-item remove and an inline "add" field. */
+function tagsEditor(value, ctx, editor) {
+  const items = Array.isArray(value) ? value.map(String) : [];
+  const wrap = el("div", "tagsctl ctl-block");
+  const list = el("div", "tags-list");
+  const commit = () => ctx.post(JSON.stringify(items));
+  const draw = () => {
+    list.textContent = "";
+    items.forEach((tag, i) => {
+      const chip = el("span", "tag-chip");
+      const text = el("span", "tag-text", tag);
+      text.title = tag;
+      chip.appendChild(text);
+      const rm = el("button", "tag-rm linkbtn", "✕");
+      rm.type = "button";
+      rm.setAttribute("aria-label", `${ctx.label}: remove ${tag}`);
+      rm.addEventListener("click", () => {
+        items.splice(i, 1);
+        commit();
+        draw();
+      });
+      chip.appendChild(rm);
+      list.appendChild(chip);
+    });
+    if (!items.length) list.appendChild(el("span", "tags-empty", ctx.emptyLabel || "—"));
+  };
+  draw();
+  wrap.appendChild(list);
+  const adder = el("div", "tags-add");
+  const inp = el("input");
+  inp.type = "text";
+  inp.placeholder = editor.placeholder || "…";
+  inp.setAttribute("aria-label", ctx.label);
+  const submit = () => {
+    const v = inp.value.trim();
+    if (!v || items.includes(v)) {
+      inp.select();
+      return;
+    }
+    items.push(v);
+    commit();
+    draw();
+    inp.value = "";
+    inp.focus();
+  };
+  inp.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+  });
+  adder.appendChild(inp);
+  const plus = el("button", "tags-plus linkbtn", "+");
+  plus.type = "button";
+  plus.setAttribute("aria-label", `${ctx.label}: add`);
+  plus.addEventListener("click", submit);
+  adder.appendChild(plus);
+  wrap.appendChild(adder);
+  return wrap;
+}
+
+/** Multiselect over a fixed option list (an empty selection = all). */
+function checkboxEditor(value, ctx, editor) {
+  const selected = new Set(Array.isArray(value) ? value.map(String) : []);
+  const wrap = el("div", "checksctl ctl-block");
+  (editor.options || []).forEach((opt) => {
+    const label = el("label", "check-line");
+    const box = el("input");
+    box.type = "checkbox";
+    box.checked = selected.has(opt);
+    box.addEventListener("change", () => {
+      if (box.checked) selected.add(opt);
+      else selected.delete(opt);
+      ctx.post(JSON.stringify([...selected]));
+    });
+    label.appendChild(box);
+    label.appendChild(el("span", "", ctx.enumLabel ? ctx.enumLabel(opt) : opt));
+    wrap.appendChild(label);
+  });
+  return wrap;
+}
+
+/** Record editor: one row per key, typed columns, add/remove.
+ *
+ * Rows are held locally and the whole record is validated client-side before
+ * posting, so a half-filled new row never round-trips to the server (which
+ * would reject the object with a generic "invalid"). Nothing is posted until
+ * the record satisfies the required columns. */
+function tableEditor(value, ctx, editor) {
+  const columns = editor.columns || [];
+  const keyCol = columns[0];
+  const rest = columns.slice(1);
+  const source = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+  const rows = Object.entries(source).map(([name, val]) => ({
+    name,
+    val: val && typeof val === "object" ? { ...val } : {},
+    error: "",
+  }));
+  const wrap = el("div", "tablectl ctl-block");
+  const head = el("div", "table-head");
+  columns.forEach((c) => head.appendChild(el("span", "table-th", ctx.fieldLabel(c.key))));
+  wrap.appendChild(head);
+  const body = el("div", "table-body");
+  const error = el("div", "json-err");
+  error.hidden = true;
+
+  const colIsArray = (col) => col.array === true;
+  const isBlank = (v) => v === undefined || v === "" || (Array.isArray(v) && v.length === 0);
+
+  /** Build the record; empty optional values are dropped. Returns null + reason. */
+  const build = () => {
+    const out = {};
+    for (const row of rows) {
+      if (!row.name) return { ok: false, reason: "empty name" };
+      if (out[row.name] !== undefined) return { ok: false, reason: `duplicate: ${row.name}` };
+      const entry = {};
+      for (const col of rest) {
+        const v = row.val[col.key];
+        if (col.optional && isBlank(v)) continue;
+        if (!col.optional && isBlank(v)) return { ok: false, reason: `${row.name}: ${ctx.fieldLabel(col.key)}` };
+        if (col.type === "number") {
+          const n = Number(v);
+          if (!Number.isFinite(n) || n < 0) return { ok: false, reason: `${row.name}: ${ctx.fieldLabel(col.key)}` };
+          entry[col.key] = n;
+        } else if (col.type === "bool") {
+          if (v === true) entry[col.key] = true;
+        } else {
+          entry[col.key] = colIsArray(col) ? v : String(v);
+        }
+      }
+      out[row.name] = entry;
+    }
+    return { ok: true, value: out };
+  };
+
+  const sync = () => {
+    const built = build();
+    if (!built.ok) {
+      error.hidden = false;
+      error.textContent = t("web.settings.table_invalid", { field: built.reason });
+      return false;
+    }
+    error.hidden = true;
+    error.textContent = "";
+    ctx.post(JSON.stringify(built.value));
+    return true;
+  };
+
+  const writeValue = (row, col, input) => {
+    if (col.type === "bool") {
+      if (input.checked) row.val[col.key] = true;
+      else delete row.val[col.key];
+    } else if (col.type === "number") {
+      const raw = input.value.trim();
+      if (raw === "") delete row.val[col.key];
+      else row.val[col.key] = Number(raw);
+    } else {
+      const raw = input.value.trim();
+      if (raw === "") delete row.val[col.key];
+      else row.val[col.key] = colIsArray(col) ? raw.split(",").map((s) => s.trim()).filter(Boolean) : raw;
+    }
+  };
+
+  const inputFor = (row, col) => {
+    const input = el("input");
+    const v = row.val[col.key];
+    if (col.type === "bool") {
+      input.type = "checkbox";
+      input.checked = v === true;
+    } else if (col.type === "number") {
+      input.type = "number";
+      input.value = v == null ? "" : String(v);
+    } else {
+      input.type = "text";
+      input.value = Array.isArray(v) ? v.join(", ") : v == null ? "" : String(v);
+    }
+    input.setAttribute("aria-label", `${row.name}: ${ctx.fieldLabel(col.key)}`);
+    input.addEventListener("change", () => {
+      writeValue(row, col, input);
+      sync();
+    });
+    return input;
+  };
+
+  const draw = () => {
+    body.textContent = "";
+    rows.forEach((row) => {
+      const elRow = el("div", "table-row");
+      elRow.dataset.key = row.name;
+      const keyInput = el("input");
+      keyInput.type = "text";
+      keyInput.value = row.name;
+      keyInput.placeholder = ctx.fieldLabel(keyCol.key);
+      keyInput.setAttribute("aria-label", ctx.fieldLabel(keyCol.key));
+      keyInput.addEventListener("change", () => {
+        row.name = keyInput.value.trim();
+        if (sync()) {
+          elRow.dataset.key = row.name;
+        }
+      });
+      elRow.appendChild(keyInput);
+      rest.forEach((col) => elRow.appendChild(inputFor(row, col)));
+      const rm = el("button", "table-rm linkbtn", "✕");
+      rm.type = "button";
+      rm.setAttribute("aria-label", `${ctx.label}: remove ${row.name}`);
+      rm.addEventListener("click", () => {
+        rows.splice(rows.indexOf(row), 1);
+        if (sync()) draw();
+      });
+      elRow.appendChild(rm);
+      body.appendChild(elRow);
+    });
+  };
+  draw();
+  wrap.appendChild(body);
+  wrap.appendChild(error);
+
+  const adder = el("div", "table-add");
+  const nameInput = el("input");
+  nameInput.type = "text";
+  nameInput.placeholder = ctx.fieldLabel(keyCol.key);
+  nameInput.setAttribute("aria-label", `${ctx.label}: new ${ctx.fieldLabel(keyCol.key)}`);
+  // A new row is local until it satisfies the required columns — no POST yet.
+  const submit = () => {
+    const name = nameInput.value.trim();
+    if (!name || rows.some((r) => r.name === name)) {
+      nameInput.select();
+      return;
+    }
+    const seed = {};
+    rows.push({ name, val: seed, error: "" });
+    nameInput.value = "";
+    draw();
+    const last = body.lastElementChild;
+    const first = last && last.querySelectorAll("input")[1];
+    if (first) first.focus();
+  };
+  nameInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+  });
+  adder.appendChild(nameInput);
+  const plus = el("button", "table-plus linkbtn", "+");
+  plus.type = "button";
+  plus.setAttribute("aria-label", `${ctx.label}: add`);
+  plus.addEventListener("click", submit);
+  adder.appendChild(plus);
+  wrap.appendChild(adder);
+  return wrap;
+}
+
+// Single source of truth for the settings information architecture.
+//
+// Every panel is a list of *named sections* — the title must describe exactly
+// what is inside (research: settings fail when category names do not match the
+// controls under them, and when an "Advanced" bucket collects unrelated keys).
+// `search` (settings.js) indexes the same table, so a key can never be
+// reachable but unfindable.
+//
+// Panel ids match `data-p` / `data-panel` in index.html. Panels with custom
+// bodies (model, ui, memory, skills, plugins) render their own content first
+// and then these sections.
+export const PANEL_SECTIONS = {
+  general: [
+    { id: "general.interface", titleKey: "web.settings.sec.general.interface", keys: ["locale", "ui.verbosity"] },
+    { id: "general.agent", titleKey: "web.settings.sec.general.agent", descKey: "web.settings.sec.general.agent.desc", keys: ["maxToolIterations", "stuckThreshold", "autoPlan"] },
+    { id: "general.provider", titleKey: "web.settings.sec.general.provider", keys: ["provider.fallback"] },
+  ],
+  model: [
+    { id: "model.tuning", titleKey: "web.settings.sec.model.tuning", descKey: "web.settings.sec.model.tuning.desc", keys: ["provider.maxCompletionTokens", "modelLoad.autoLoad", "modelLoad.flashAttention", "modelLoad.evalBatchSize", "modelLoad.offloadKvCacheToGpu"] },
+    { id: "model.capabilities", titleKey: "web.settings.sec.model.capabilities", descKey: "web.settings.sec.model.capabilities.desc", keys: ["modelCapabilities"] },
+  ],
+  context: [
+    { id: "context.window", titleKey: "web.settings.sec.context.window", descKey: "web.settings.sec.context.window.desc", keys: ["contextWindow", "contextBudget.systemPrompt", "contextBudget.responseReserve"] },
+    { id: "context.compaction", titleKey: "web.settings.sec.context.compaction", descKey: "web.settings.sec.context.compaction.desc", keys: ["contextBudget.compactionThreshold", "contextBudget.compactionMinLoad"] },
+    { id: "context.instructions", titleKey: "web.settings.sec.context.instructions", descKey: "web.settings.sec.context.instructions.desc", keys: ["instructions.summarize"] },
+    { id: "context.log", titleKey: "web.settings.sec.context.log", descKey: "web.settings.sec.context.log.desc", keys: ["contextLog.enabled", "contextLog.redact"] },
+  ],
+  reasoning: [
+    { id: "reasoning.display", titleKey: "web.settings.sec.reasoning.display", keys: ["showReasoning"] },
+    { id: "reasoning.effort", titleKey: "web.settings.sec.reasoning.effort", descKey: "web.settings.sec.reasoning.effort.desc", keys: ["reasoning.mode", "reasoning.min", "reasoning.max", "reasoning.baseline", "reasoning.overrideCooldown"] },
+  ],
+  agent: [
+    { id: "agent.moe", titleKey: "web.settings.sec.agent.moe", descKey: "web.settings.sec.agent.moe.desc", keys: ["moe.enabled", "moe.maxReplanCycles", "experts"] },
+    { id: "agent.critic", titleKey: "web.settings.sec.agent.critic", descKey: "web.settings.sec.agent.critic.desc", keys: ["critic.enabled", "critic.maxCalls", "critic.maxRepairCycles", "critic.timeoutMs"] },
+    { id: "agent.tools", titleKey: "web.settings.sec.agent.tools", descKey: "web.settings.sec.agent.tools.desc", keys: ["tools.enableOnDemand", "tools.defaultTags", "skills.budget"] },
+    { id: "agent.subagent", titleKey: "web.settings.sec.agent.subagent", descKey: "web.settings.sec.agent.subagent.desc", keys: ["subagent.resultMode", "subagent.maxSummaryChars", "subagent.maxParallelChunkQueries", "subagent.stableSystemPrompt"] },
+    { id: "agent.hallucination", titleKey: "web.settings.sec.agent.hallucination", descKey: "web.settings.sec.agent.hallucination.desc", keys: ["hallucination.judge.enabled"] },
+  ],
+  network: [
+    { id: "network.web", titleKey: "web.settings.sec.network.web", descKey: "web.settings.sec.network.web.desc", keys: ["webSearch.enabled"] },
+    { id: "network.error", titleKey: "web.settings.sec.network.error", descKey: "web.settings.sec.network.error.desc", keys: ["errorWebSearch.enabled", "errorWebSearch.threshold", "errorWebSearch.maxResults", "errorWebSearch.maxQueryChars", "errorWebSearch.maxSearchesPerSession", "errorWebSearch.requestTimeoutMs"] },
+  ],
+  browser: [
+    { id: "browser.main", titleKey: "web.settings.sec.browser.main", keys: ["browser.enabled", "browser.headless"] },
+    { id: "browser.limits", titleKey: "web.settings.sec.browser.limits", descKey: "web.settings.sec.browser.limits.desc", keys: ["browser.maxElements", "browser.maxContentChars", "browser.maxConsoleEntries", "browser.maxConsoleLineChars"] },
+    { id: "browser.viewport", titleKey: "web.settings.sec.browser.viewport", keys: ["browser.viewportWidth", "browser.viewportHeight", "browser.navigationTimeout"] },
+  ],
+  sessions: [
+    { id: "sessions.main", titleKey: "web.settings.sec.sessions.main", descKey: "web.settings.sec.sessions.main.desc", keys: ["session.autoSave", "session.autoName", "session.maxSessions", "session.isolateMemory"] },
+    { id: "sessions.isolation", titleKey: "web.settings.sec.sessions.isolation", descKey: "web.settings.sec.sessions.isolation.desc", keys: ["sessionIsolation.enabled", "sessionIsolation.isolatePlugins", "sessionIsolation.isolateTempFiles"] },
+  ],
+  ui: [
+    { id: "ui.chat", titleKey: "web.settings.sec.ui.chat", descKey: "web.settings.sec.ui.chat.desc", keys: ["ui.spinner", "ui.showContextStats", "ui.showCompaction"] },
+  ],
+  security: [
+    { id: "security.switches", titleKey: "web.settings.sec.security.switches", descKey: "web.settings.sec.security.switches.desc", keys: ["security.enabled", "security.bash.enabled", "security.bash.blockDangerousFlags", "security.paths.enabled", "security.contentScan.enabled", "security.network.enabled", "security.sessionEncryption.enabled"] },
+    { id: "security.limits", titleKey: "web.settings.sec.security.limits", descKey: "web.settings.sec.security.limits.desc", keys: ["security.maxRecursionDepth", "security.maxFileOperations", "security.rateLimits.maxRequestsPerMinute", "security.rateLimits.maxParallelTasks", "security.network.requestTimeout", "security.network.maxResponseSize"] },
+    { id: "security.bash", titleKey: "web.settings.sec.security.bash", descKey: "web.settings.sec.security.bash.desc", keys: ["security.bash.blacklist", "security.bash.whitelist", "security.bash.dangerousFlags", "security.bash.dangerousOperators"] },
+    { id: "security.paths", titleKey: "web.settings.sec.security.paths", descKey: "web.settings.sec.security.paths.desc", keys: ["security.paths.denied", "security.paths.allowed"] },
+    { id: "security.network", titleKey: "web.settings.sec.security.network", descKey: "web.settings.sec.security.network.desc", keys: ["security.network.deniedDomains", "security.network.allowedDomains"] },
+    { id: "security.scan", titleKey: "web.settings.sec.security.scan", descKey: "web.settings.sec.security.scan.desc", keys: ["security.contentScan.dangerousPatterns"] },
+    { id: "security.audit", titleKey: "web.settings.sec.security.audit", descKey: "web.settings.sec.security.audit.desc", keys: ["security.auditNotifier.enabled", "security.auditNotifier.filePath", "security.auditNotifier.webhookUrl", "security.auditNotifier.webhookTimeout", "security.auditNotifier.minSeverity", "security.auditNotifier.maxRetries", "security.auditNotifier.eventTypes"] },
+    { id: "security.encryption", titleKey: "web.settings.sec.security.encryption", descKey: "web.settings.sec.security.encryption.desc", keys: ["security.sessionEncryption.encryptHistory", "security.sessionEncryption.encryptSessionLog", "security.sessionEncryption.keyPath"] },
+  ],
+  advanced: [
+    { id: "advanced.diagnostics", titleKey: "web.settings.sec.advanced.diagnostics", descKey: "web.settings.sec.advanced.diagnostics.desc", keys: ["logLevel", "version"] },
+    { id: "advanced.retry", titleKey: "web.settings.sec.advanced.retry", descKey: "web.settings.sec.advanced.retry.desc", keys: ["retry.maxRetries", "retry.baseDelay", "retry.maxDelay", "retry.maxStreamRetries", "retry.noDataTimeoutMs"] },
+    { id: "advanced.service", titleKey: "web.settings.sec.advanced.service", descKey: "web.settings.sec.advanced.service.desc", keys: ["pricing.enabled", "pricing.overrides", "updater.enabled", "updater.checkOnStart", "updater.autoInstall", "updater.intervalMs"] },
+  ],
+};
+
+/** Flat `key -> panelId` index (search + "where does this setting live"). */
+export function keyToPanel() {
+  const map = new Map();
+  for (const [panel, sections] of Object.entries(PANEL_SECTIONS)) {
+    for (const section of sections) {
+      for (const key of section.keys) map.set(key, panel);
+    }
+  }
+  return map;
+}