chore(release): v0.2.6 — Settings UX, empty pool by default, CMF port check

- Settings: "?" help tooltips on every option; router key auto-probes the
  connection right after saving (no more hanging "unavailable")
- Local models card reworked into 3 clear steps (install cortiq → add model →
  run locally); removed the hand-entered .cmf path / pool-id fields — models
  are added via the Import tab and the managed server registers them
- Fresh install ships an EMPTY model pool; the local .cmf is auto-registered by
  the managed CMF server, so it needs no static [[models]] entry
- New: port-availability check — GET /admin/api/cmf/port + "Check port" button
  with next-free-port suggestion. bind()+connect() probe so Docker-proxied /
  dual-stack ports (e.g. 8081) are correctly detected as occupied
- /admin/api/cmf now reports the serving model + port; card shows "▶ serving …"
- On-demand runtime install: POST /admin/api/cmf/install

web/js/views/settings.js

@@ -4,12 +4,22 @@ import { t } from "../i18n.js";
 import { api } from "../api.js";
 import { appState, SITE_URL } from "../app.js";
 
-function field(label, control, hint) {
-  return h("label", { class: "field" }, h("span", {}, label), control, hint ? h("div", { class: "hint" }, hint) : null);
+// A small "?" badge with a hover/focus tooltip explaining a setting.
+function help(text) {
+  return text ? h("span", { class: "help", title: text, tabindex: "0", role: "img", "aria-label": text }, "?") : null;
 }
-function check(label, checked) {
+function field(label, control, hint, helpText) {
+  return h(
+    "label",
+    { class: "field" },
+    h("span", {}, label, helpText ? " " : null, help(helpText)),
+    control,
+    hint ? h("div", { class: "hint" }, hint) : null
+  );
+}
+function check(label, checked, helpText) {
   const cb = h("input", { type: "checkbox", checked: checked ? true : null });
-  return { node: h("label", { class: "check" }, cb, label), cb };
+  return { node: h("label", { class: "check" }, cb, label, helpText ? " " : null, help(helpText)), cb };
 }
 
 // Flatten router usage (nested account/usage objects) into readable, wrapping
@@ -59,8 +69,8 @@ export async function renderSettings() {
   const rKeyEnv = h("input", { value: s.router?.api_key_env || "", placeholder: "CORTIQ_ROUTER_KEY" });
   const rTimeout = h("input", { type: "number", value: s.router?.timeout_ms ?? 800 });
   const rTax = h("input", { value: s.router?.taxonomy_id || "" });
-  const rVerify = check(t("settings.router.verifyTls"), s.router?.verify_tls);
-  const rEnabled = check(t("settings.router.enabled"), s.router?.enabled !== false);
+  const rVerify = check(t("settings.router.verifyTls"), s.router?.verify_tls, t("settings.router.verifyTlsHelp"));
+  const rEnabled = check(t("settings.router.enabled"), s.router?.enabled !== false, t("settings.router.enabledHelp"));
   // router key value (write-only; stored in the secret store, like model keys)
   const rKeySource =
     (secretsData.secrets || []).find((x) => x.name === (s.router?.api_key_env || "CORTIQ_ROUTER_KEY"))?.source ||
@@ -108,37 +118,16 @@ export async function renderSettings() {
     rKeyBadge.className = "badge store";
     return true;
   }
-  const saveKeyBtn = h("button", { class: "btn sm" }, "✓ " + t("settings.router.saveKey"));
-  saveKeyBtn.addEventListener("click", async () => {
-    saveKeyBtn.disabled = true;
-    try {
-      if (await saveKey()) toast(t("settings.router.keySaved"), "good");
-      else toast(t("settings.router.keyEmpty"), "warn");
-    } catch (e) {
-      toast(String(e.message || e), "bad");
-    }
-    saveKeyBtn.disabled = false;
-  });
-  // "Test router" — real /v1/route call: tells key problems apart from a down router
-  const probeBtn = h("button", { class: "btn" }, t("settings.router.test"));
+  // Shared connection test (real /v1/route call) — tells key problems apart from
+  // a down router. Rendered into probeOut; also used right after saving the key.
   const probeOut = h("div", { class: "hint", style: "margin-top:8px" });
-  probeBtn.addEventListener("click", async () => {
-    probeBtn.disabled = true;
+  async function runProbe() {
     mount(probeOut, h("span", { class: "spinner" }));
     try {
-      // If a key was just pasted but not saved, persist it first so the test uses it.
-      if (rSecret.value.trim()) {
-        try {
-          await saveKey();
-        } catch (_) {
-          /* fall through — probe will report no_key/auth */
-        }
-      }
       const r = await api.probeRouter();
       const parts = [t(probeMsgKey(r.status), { ms: r.latency_ms ?? "—" })];
       if (r.message) parts.push(" — " + r.message);
-      const line = h("span", {}, ...parts);
-      const out = [line];
+      const out = [h("span", {}, ...parts)];
       if (PROBE_SITE_STATUSES.includes(r.status)) {
         out.push(" · ", h("a", { href: SITE_URL, target: "_blank", rel: "noopener" }, t("dash.health.getKey") + " ↗"));
       }
@@ -150,9 +139,37 @@ export async function renderSettings() {
       }
       mount(probeOut, h("div", {}, h("span", { class: "badge " + (r.ok ? "ok" : "bad") }, r.ok ? "OK" : "×"), " ", ...out));
       toast(t(probeMsgKey(r.status), { ms: r.latency_ms ?? "—" }), r.ok ? "good" : "bad");
+      return r.ok;
     } catch (e) {
       mount(probeOut, String(e.message || e));
+      return false;
     }
+  }
+  const saveKeyBtn = h("button", { class: "btn sm" }, "✓ " + t("settings.router.saveKey"));
+  saveKeyBtn.addEventListener("click", async () => {
+    saveKeyBtn.disabled = true;
+    try {
+      if (await saveKey()) {
+        toast(t("settings.router.keySaved"), "good");
+        // Immediately test the connection so the user sees reachable/error at once,
+        // instead of a stale "unavailable" until something re-checks.
+        if (rEnabled.cb.checked) await runProbe();
+      } else {
+        toast(t("settings.router.keyEmpty"), "warn");
+      }
+    } catch (e) {
+      toast(String(e.message || e), "bad");
+    }
+    saveKeyBtn.disabled = false;
+  });
+  const probeBtn = h("button", { class: "btn" }, t("settings.router.test"));
+  probeBtn.addEventListener("click", async () => {
+    probeBtn.disabled = true;
+    // If a key was pasted but not saved, persist it first so the test uses it.
+    if (rSecret.value.trim()) {
+      try { await saveKey(); } catch (_) { /* probe will report no_key/auth */ }
+    }
+    await runProbe();
     probeBtn.disabled = false;
   });
   // route
@@ -165,18 +182,18 @@ export async function renderSettings() {
   const brCool = h("input", { value: s.breaker?.cooldown || "30s" });
   // log
   const logSel = h("select", {}, ...["error", "warn", "info", "debug", "trace"].map((x) => h("option", { value: x, selected: x === s.log?.level }, x)));
-  const logBodies = check(t("settings.log.bodies"), s.log?.bodies);
+  const logBodies = check(t("settings.log.bodies"), s.log?.bodies, t("settings.log.bodiesHelp"));
   // telemetry / cortiq
-  const metricsCb = check(t("settings.telemetry.metrics"), s.telemetry?.metrics);
-  const echoCb = check(t("settings.cortiq.echo"), s.cortiq?.echo);
+  const metricsCb = check(t("settings.telemetry.metrics"), s.telemetry?.metrics, t("settings.telemetry.metricsHelp"));
+  const echoCb = check(t("settings.cortiq.echo"), s.cortiq?.echo, t("settings.cortiq.echoHelp"));
   // stats
-  const statsEnabled = check(t("settings.stats.enabled"), s.stats?.enabled);
+  const statsEnabled = check(t("settings.stats.enabled"), s.stats?.enabled, t("settings.stats.enabledHelp"));
   const statsFile = h("input", { value: s.stats?.file || "" });
   const statsRet = h("input", { value: s.stats?.retention || "7d" });
   // cache
   const modelsData = await api.listModels();
   const embedModels = (modelsData.models || []).filter((m) => m.kind === "embedding").map((m) => m.id);
-  const cacheEnabled = check(t("settings.cache.enabled"), s.cache?.enabled);
+  const cacheEnabled = check(t("settings.cache.enabled"), s.cache?.enabled, t("settings.cache.enabledHelp"));
   const cacheThresh = h("input", { type: "number", step: "0.01", value: s.cache?.threshold ?? 0.92 });
   const cacheTtlIn = h("input", { value: s.cache?.ttl || "1h" });
   const cacheEmbedSel = h(
@@ -186,15 +203,93 @@ export async function renderSettings() {
     ...embedModels.map((id) => h("option", { value: id, selected: id === s.cache?.embed_model }, id))
   );
   // local models (CMF) — run a local .cmf server and/or force local-only routing
-  const cmfLocalOnly = check(t("settings.cmf.localOnly"), s.cmf?.local_only);
-  const cmfManage = check(t("settings.cmf.manage"), s.cmf?.manage_server);
-  const cmfAutoInstall = check(t("settings.cmf.autoInstall"), s.cmf?.auto_install);
-  const cmfAutoUpdate = check(t("settings.cmf.autoUpdate"), s.cmf?.auto_update);
-  const cmfModel = h("input", { value: s.cmf?.local_model || "", placeholder: "models/model.cmf" });
+  const cmfLocalOnly = check(t("settings.cmf.localOnly"), s.cmf?.local_only, t("settings.cmf.localOnlyHelp"));
+  const cmfManage = check(t("settings.cmf.manage"), s.cmf?.manage_server, t("settings.cmf.manageHelp"));
+  const cmfAutoInstall = check(t("settings.cmf.autoInstall"), s.cmf?.auto_install, t("settings.cmf.autoInstallHelp"));
+  const cmfAutoUpdate = check(t("settings.cmf.autoUpdate"), s.cmf?.auto_update, t("settings.cmf.autoUpdateHelp"));
+  const cmfModel = h("input", { value: s.cmf?.local_model || "", placeholder: "models/my-model.cmf" });
   const cmfPort = h("input", { type: "number", value: s.cmf?.local_port ?? 8081 });
-  const cmfModelId = h("input", { value: s.cmf?.model_id || "cmf-local" });
   const cmfThreads = h("input", { type: "number", min: 0, value: s.cmf?.threads ?? 8 });
-  const cmfGpu = check(t("settings.cmf.gpu"), s.cmf?.gpu);
+  const cmfGpu = check(t("settings.cmf.gpu"), s.cmf?.gpu, t("settings.cmf.gpuHelp"));
+  const cmfModelIdVal = s.cmf?.model_id || "cmf-local"; // auto — no manual "model id" field
+  // "Install cortiq" — the CLI that RUNS the .cmf format. Must be present before
+  // a local model server can start; this is step 1 for a new user.
+  const cmfStatusEl = h("span", { class: "muted" }, "…");
+  const cmfInstallBtn = h("button", { class: "btn" }, t("settings.cmf.install"));
+  // live "serving <model> on :<port>" indicator for the managed local server
+  const cmfServingEl = h("div", { class: "hint" });
+  async function refreshCmfStatus() {
+    try {
+      const st = await api.cmfStatus();
+      cmfInstallBtn.textContent = st.installed ? t("settings.cmf.reinstall") : t("settings.cmf.install");
+      mount(
+        cmfStatusEl,
+        st.installed
+          ? h("span", {}, h("span", { class: "badge ok" }, "✓"), " cortiq " + (st.version || ""))
+          : h("span", {}, h("span", { class: "badge bad" }, "×"), " " + t("settings.cmf.notInstalled"))
+      );
+      // reflect the managed server state under the "run locally" toggle
+      if (st.manage_server && st.running) {
+        mount(cmfServingEl, h("span", { style: "color:var(--good)" },
+          "▶ " + t("settings.cmf.serving", { model: st.model_id || "", port: st.local_port }) + (st.healthy ? "" : " …")));
+      } else if (st.last_error) {
+        mount(cmfServingEl, h("span", { style: "color:var(--bad)" }, "✗ " + st.last_error));
+      } else {
+        mount(cmfServingEl, "");
+      }
+    } catch (_) {
+      mount(cmfStatusEl, "—");
+    }
+  }
+  cmfInstallBtn.addEventListener("click", async () => {
+    cmfInstallBtn.disabled = true;
+    mount(cmfStatusEl, h("span", {}, h("span", { class: "spinner" }), " " + t("settings.cmf.installing")));
+    try {
+      await api.cmfInstall();
+      // install compiles from crates.io — poll status for a few minutes
+      for (let i = 0; i < 120; i++) {
+        await new Promise((r) => setTimeout(r, 3000));
+        const st = await api.cmfStatus();
+        if (st.installed) { toast(t("settings.cmf.installedOk"), "good"); break; }
+        if (st.last_error) { toast(st.last_error, "bad"); break; }
+      }
+    } catch (e) {
+      toast(String(e.message || e), "bad");
+    }
+    await refreshCmfStatus();
+    cmfInstallBtn.disabled = false;
+  });
+  refreshCmfStatus();
+
+  // Port availability check — let the user confirm the chosen port is free
+  // before enabling the managed server (the default 8081 often clashes).
+  const cmfPortStatus = h("span", { class: "small", style: "margin-left:8px" });
+  const cmfPortCheckBtn = h("button", { class: "btn small", type: "button" }, t("settings.cmf.checkPort"));
+  async function checkPort() {
+    const p = parseInt(cmfPort.value, 10);
+    if (!p) { mount(cmfPortStatus, ""); return; }
+    cmfPortCheckBtn.disabled = true;
+    mount(cmfPortStatus, t("status.checking"));
+    try {
+      const r = await api.cmfPortCheck(p);
+      if (r.available) {
+        mount(cmfPortStatus, h("span", { style: "color:var(--good)" }, "✓ " + t("settings.cmf.portFree")));
+      } else {
+        const kids = [h("span", { style: "color:var(--bad)" }, "✗ " + t("settings.cmf.portBusy"))];
+        if (r.suggested) {
+          const useBtn = h("button", { class: "btn small", type: "button", style: "margin-left:8px" },
+            t("settings.cmf.useSuggested", { port: r.suggested }));
+          useBtn.addEventListener("click", () => { cmfPort.value = r.suggested; checkPort(); });
+          kids.push(useBtn);
+        }
+        mount(cmfPortStatus, h("span", {}, ...kids));
+      }
+    } catch (e) {
+      mount(cmfPortStatus, String(e.message || e));
+    }
+    cmfPortCheckBtn.disabled = false;
+  }
+  cmfPortCheckBtn.addEventListener("click", checkPort);
 
   const saveBtn = h("button", { class: "btn primary" }, t("common.save"));
   saveBtn.addEventListener("click", async () => {
@@ -242,7 +337,7 @@ export async function renderSettings() {
         auto_update: cmfAutoUpdate.cb.checked,
         local_model: cmfModel.value.trim(),
         local_port: parseInt(cmfPort.value) || 8081,
-        model_id: cmfModelId.value.trim() || "cmf-local",
+        model_id: cmfModelIdVal,
         threads: parseInt(cmfThreads.value) || 0,
         gpu: cmfGpu.cb.checked,
       },
@@ -372,13 +467,33 @@ export async function renderSettings() {
         "div",
         { class: "card" },
         h("div", { class: "card-head" }, h("h3", {}, t("settings.cmf"))),
-        cmfLocalOnly.node,
-        cmfManage.node,
+        h("div", { class: "hint" }, t("settings.cmf.intro")),
+        // Step 1 — install the cortiq runtime (the CLI that runs .cmf models).
+        h(
+          "label",
+          { class: "field" },
+          h("span", {}, "1. " + t("settings.cmf.runtime"), " ", help(t("settings.cmf.runtimeHelp"))),
+          h("div", { class: "flex", style: "gap:8px;align-items:center;flex-wrap:wrap" }, cmfInstallBtn, cmfStatusEl)
+        ),
         h("div", { class: "row" }, cmfAutoInstall.node, cmfAutoUpdate.node),
-        field(t("settings.cmf.model"), cmfModel),
-        h("div", { class: "row" }, field(t("settings.cmf.port"), cmfPort), field(t("settings.cmf.modelId"), cmfModelId)),
-        h("div", { class: "row" }, field(t("settings.cmf.threads"), cmfThreads), cmfGpu.node),
-        h("div", { class: "hint" }, t("settings.cmf.note")),
+        h("div", { class: "divider" }),
+        // Step 2 — add a model. Models are imported in the Models/Import tab; here
+        // you just point the local server at the .cmf file it produced.
+        h("div", { class: "field" }, h("span", {}, "2. " + t("settings.cmf.addModel"), " ", help(t("settings.cmf.addModelHelp"))),
+          h("div", { class: "hint" }, t("settings.cmf.importNote"),
+            " ", h("a", { href: "#/import" }, t("settings.cmf.importLink") + " ↗"))),
+        field(t("settings.cmf.model"), cmfModel, null, t("settings.cmf.modelHelp")),
+        h("div", { class: "divider" }),
+        // Step 3 — run it locally + performance.
+        cmfManage.node,
+        cmfServingEl,
+        h("div", { class: "row" },
+          field(t("settings.cmf.port"),
+            h("div", { class: "flex wrap" }, cmfPort, cmfPortCheckBtn, cmfPortStatus),
+            null, t("settings.cmf.portHelp")),
+          field(t("settings.cmf.threads"), cmfThreads, null, t("settings.cmf.threadsHelp"))),
+        cmfGpu.node,
+        cmfLocalOnly.node,
         h("div", { class: "hint" }, t("settings.cmf.speedNote"))
       )
     ),