@enigmax/dashboard 0.1.108 → 0.1.109

package/assets/index.html

@@ -3580,7 +3580,8 @@ export {
                     + s.choices.map((c) => '<option value="' + esc(c) + '"' + (c === s.choice ? " selected" : "") + ">" + esc(prettyChoice(c)) + "</option>").join("")
                     + "</select>"
                 : '<button type="button" class="toggle' + (s.value ? " on" : "") + '" data-skey="' + esc(s.key)
-                    + '" data-kind="bool" data-on="' + (s.value ? 1 : 0) + '">' + (s.value ? "On" : "Off") + "</button>";
+                    + '" data-kind="bool" role="switch" aria-checked="' + (s.value ? "true" : "false")
+                    + '" data-on="' + (s.value ? 1 : 0) + '">' + (s.value ? "On" : "Off") + "</button>";
             return '<div class="set-row"><div class="set-meta"><div class="set-name">' + settingIcon(s.key) + labelWithBadges(s.label) + "</div>"
                 + '<div class="set-hint">' + linkify(s.hint) + (s.globalOnly ? " · global" : "") + "</div></div>"
                 + '<div class="set-ctl">' + ctl + "</div></div>";
@@ -3598,7 +3599,19 @@ export {
                 + '<div class="set-grid">' + c.settings.map(settingRow).join("") + "</div></div>").join("");
         }
 
-        function applyBool(ctl, on) { ctl.classList.toggle("on", on); ctl.textContent = on ? "On" : "Off"; ctl.dataset.on = on ? 1 : 0; }
+        // The one painter for every switch on this page: the class the CSS reads, the ARIA state a
+        // screen reader reads, the data-on the click handlers read, and the label when the switch
+        // carries one. Painted before the write lands and rolled back if the server refuses - every
+        // switch here writes through something slow (re-rendering skills, rewriting each agent's
+        // settings and hooks), so one that only moves once the write returns reads as dead.
+        function paintSwitch(btn, on, onLabel, offLabel) {
+            if (!btn) return;
+            btn.classList.toggle("on", !!on);
+            btn.setAttribute("aria-checked", on ? "true" : "false");
+            btn.dataset.on = on ? "1" : "0";
+            if (onLabel != null) btn.textContent = on ? onLabel : offLabel;
+        }
+        function applyBool(ctl, on) { paintSwitch(ctl, on, "On", "Off"); }
 
         // One place that turns an /api/* call into parsed JSON, or an Error naming the real
         // cause. res.json() throws on any reply that is not JSON - an empty 405, or an HTML
@@ -4561,12 +4574,7 @@ export {
         }
         // The two on/off switches at the top of the page. Both are optimistic: the switch flips
         // first and rolls back if the server refuses, like every other control here.
-        function gateBool(btn, on) {
-            btn.textContent = on ? "on" : "off";
-            btn.classList.toggle("on", !!on);
-            btn.dataset.on = on ? "1" : "0";
-            btn.setAttribute("aria-checked", on ? "true" : "false");
-        }
+        function gateBool(btn, on) { paintSwitch(btn, on, "on", "off"); }
         // Defaults for every gate setting, straight from the gate's own config loader (the
         // server resolves an empty config rather than keeping a second copy of the numbers).
         // They drive the "default N" hint and the per-row reset below.
@@ -5573,8 +5581,7 @@ export {
         function renderCodeGraph(view) {
             view = view || {};
             const on = !!view.enabled;
-            const t = $("cgToggle");
-            t.classList.toggle("on", on); t.setAttribute("aria-checked", on ? "true" : "false"); t.textContent = on ? "On" : "Off";
+            paintSwitch($("cgToggle"), on, "On", "Off");
             const projects = view.projects || [];
             const projHtml = projects.length
                 ? projects.map((p) => {
@@ -5622,9 +5629,19 @@ export {
             } catch { setNote("cgNote", "Could not reach the server.", "err"); return null; }
         }
         async function cgToggleAction() {
-            const turnOn = $("cgToggle").getAttribute("aria-checked") !== "true";
-            const out = await cgPost({ op: "toggle", on: turnOn, project: cgProject || undefined }, "Saving...");
-            if (out) setNote("cgNote", out.ok ? (turnOn ? "Code graph enabled - tools exposed to your agents (restart them to load it)." : "Code graph disabled.") : (out.error || "Action failed."), out.ok ? "ok" : "err");
+            const btn = $("cgToggle");
+            const was = btn.getAttribute("aria-checked") === "true";
+            paintSwitch(btn, !was, "On", "Off");
+            const out = await cgPost({ op: "toggle", on: !was }, was ? "Disabling..." : "Enabling...");
+            if (!out || !out.ok) {
+                paintSwitch(btn, was, "On", "Off");
+                if (out) setNote("cgNote", out.error || "Action failed.", "err"); // cgPost already reported an unreachable server
+                return;
+            }
+            paintSwitch(btn, !!out.enabled, "On", "Off"); // the server's answer wins over the optimistic paint
+            setNote("cgNote", out.enabled
+                ? "Code graph enabled - tools and session hooks wired; agents pick it up on their next session."
+                : "Code graph disabled - tools and session hooks removed.", "ok");
         }
         async function cgIndexAction() {
             const root = $("cgRoot").value.trim();
@@ -5766,7 +5783,7 @@ export {
             $("pgSend").addEventListener("click", pgSend);
             $("pgSaveDefault").addEventListener("click", pgSaveDefault);
             const tog = $("pgTools");
-            tog.addEventListener("click", () => { const on = tog.getAttribute("aria-checked") !== "true"; tog.classList.toggle("on", on); tog.setAttribute("aria-checked", on ? "true" : "false"); tog.textContent = on ? "On" : "Off"; });
+            tog.addEventListener("click", () => paintSwitch(tog, tog.getAttribute("aria-checked") !== "true", "On", "Off"));
             $("pgMode").addEventListener("change", pgSyncMode);
             const copyBtn = $("pgCopyCurl");
             // The button is an icon, so the toast is not the only confirmation: swap the icon for a
@@ -5859,11 +5876,7 @@ export {
             $("recallKey").disabled = !!p.keyFromEnv;
             // claude-local needs no base/key; hide that row for it.
             $("recallKeyRow").style.display = p.provider === "claude-local" ? "none" : "";
-            const llmBtn = $("recallLlmBtn");
-            llmBtn.textContent = p.llm ? "on" : "off";
-            llmBtn.classList.toggle("on", !!p.llm);
-            llmBtn.dataset.on = p.llm ? "1" : "0";
-            llmBtn.setAttribute("aria-checked", p.llm ? "true" : "false");
+            paintSwitch($("recallLlmBtn"), p.llm, "on", "off");
         }
         let recallItemsById = {};
         // Multi-select state for the Recall list: a Set of selected ids, the ordered ids as
@@ -5958,14 +5971,25 @@ export {
                 setNote("recallNote", out.ok ? (op === "sync" ? "Synced." : "Cleared.") : (out.error || "Action failed."), out.ok ? "ok" : "err");
             } catch { setNote("recallNote", "Could not reach the server.", "err"); }
         }
-        async function setRecallEnabled(on) {
+        // The recall switch carries its state in its own label ("Enable recall" when off, "Disable"
+        // when on), in its title and in what the next click asks for - so an optimistic paint has to
+        // move all three. Painting the switch alone left a button reading "Enable recall" while
+        // already on, offering to turn on what it had just turned on, until loadRecall() re-rendered.
+        function paintRecallSwitch(btn, on) {
+            paintSwitch(btn, on, "Disable", "Enable recall");
+            if (!btn) return;
+            btn.dataset.recallOn = on ? "0" : "1";
+            btn.title = on ? "Turn session memory off" : "Turn session memory on";
+        }
+        async function setRecallEnabled(on, btn) {
+            paintRecallSwitch(btn, on);
             setNote("recallNote", on ? "Enabling recall..." : "Disabling recall...");
             try {
                 const out = await (await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ key: "recall", value: on }) })).json();
-                if (!out.ok) { setNote("recallNote", "Could not change recall: " + (out.error || "error"), "err"); return; }
+                if (!out.ok) { paintRecallSwitch(btn, !on); setNote("recallNote", "Could not change recall: " + (out.error || "error"), "err"); return; }
                 setNote("recallNote", out.restartNote || (on ? "Recall enabled." : "Recall disabled."), out.restartNote ? "warn" : "ok");
                 loadRecall();
-            } catch { setNote("recallNote", "Could not reach the server.", "err"); }
+            } catch { paintRecallSwitch(btn, !on); setNote("recallNote", "Could not reach the server.", "err"); }
         }
         async function recallProviderPost(extra, msg) {
             setNote("recallNote", msg || "Saving provider...");
@@ -5990,7 +6014,7 @@ export {
             $("recallClear").addEventListener("click", () => recallAction("clear", "Delete all stored session memory? This cannot be undone."));
             $("recallBody").addEventListener("click", (e) => {
                 const t = e.target.closest("[data-recall-on]");
-                if (t) setRecallEnabled(t.dataset.recallOn === "1");
+                if (t) setRecallEnabled(t.dataset.recallOn === "1", t);
             });
             // Provider panel: save provider; flip LLM curation. The provider picker is the
             // custom icon dropdown (recallProvVal), wired in renderRecallProvider.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/dashboard",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "description": "Local browser dashboard UI for enigma: the static page and chart assets enigma serves on its loopback dashboard (savings, real tool usage, in-browser settings). Installed on demand by enigma-cli; not a runtime dependency.",
   "type": "module",
   "files": [