@enigmax/dashboard 0.1.107 → 0.1.109

package/assets/index.html

@@ -1339,7 +1339,7 @@
         <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
             <div style="flex:1">
                 <h1>Code graph</h1>
-                <p>Structural memory of your codebase - a native knowledge graph of the symbols each file defines, the modules it imports and cross-file references. Enabling it exposes enigma's code-graph tools to your agents over MCP. Complements <a href="#/recall">Recall</a> (session memory).</p>
+                <p>Structural memory of your codebase - a native knowledge graph of the symbols each file defines, what imports what, and which symbol calls which. Your agents query it over MCP to find code, trace a change's blast radius and read a file's API surface without opening it. Complements <a href="#/recall">Recall</a> (session memory).</p>
             </div>
             <button id="cgToggle" type="button" class="toggle" data-kind="bool" role="switch" aria-checked="false" aria-label="Code graph">Off</button>
             <button id="cgRefresh" type="button" class="iconbtn" title="Refresh" aria-label="Refresh"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></button>
@@ -1350,6 +1350,12 @@
             <div class="set-hint" style="padding:4px 0">Build the graph for a codebase. Leave the path empty to index enigma's own working directory.</div>
             <div class="ladd" style="gap:8px;flex-wrap:wrap"><input id="cgRoot" class="linput" placeholder="absolute project path (optional)" style="flex:1;min-width:240px"><button id="cgIndex" type="button" class="toggle on">Index</button></div>
         </div>
+        <div class="panel">
+            <div class="set-cat-h">Ask the graph</div>
+            <div class="set-hint" style="padding:4px 0">Describe a task and get the symbols and files it concerns, ranked, with exact line numbers. The same answer your agents get from the MCP tools.</div>
+            <div class="ladd" style="gap:8px;flex-wrap:wrap"><input id="cgQuery" class="linput" placeholder="where is the session token refreshed?" style="flex:1;min-width:240px"><button id="cgAsk" type="button" class="toggle on">Ask</button></div>
+            <div id="cgAskOut"></div>
+        </div>
         <div id="cgBody"><div class="empty" style="padding:12px 0">Loading...</div></div>
     </section>
 
@@ -3574,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>";
@@ -3592,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
@@ -4555,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.
@@ -5567,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) => {
@@ -5580,9 +5593,25 @@ export {
                 }).join("")
                 : '<div class="empty" style="padding:12px 0">No projects indexed yet. Use "Index a project" above.</div>';
             let html = '<div class="panel"><div class="set-cat-h">Indexed projects <small>' + projects.length + "</small></div>" + projHtml + "</div>";
+            // Drift is stated, not hidden: a graph that has fallen behind the code answers
+            // confidently and wrongly, and the only cue would otherwise be a stale line number.
+            const fresh = view.freshness;
+            if (fresh) {
+                const stale = fresh.stale || 0;
+                html += '<div class="panel"><div class="set-cat-h">Freshness</div><div class="set-row"><div class="set-meta"><div class="set-name">'
+                    + (stale === 0 ? "Up to date" : stale + " file" + (stale === 1 ? "" : "s") + " changed since indexing")
+                    + '</div><div class="set-hint">' + esc("indexed " + new Date(fresh.indexedAt).toLocaleString()
+                        + (fresh.truncated ? " · incomplete: the scan hit a limit, so some files were never indexed" : "")) + "</div></div>"
+                    + (stale === 0 ? "" : '<div class="set-ctl"><button type="button" class="toggle on" data-cg-reindex="' + esc(fresh.root) + '">Re-index</button></div>')
+                    + "</div></div>";
+            }
             if (view.architecture) html += cgSection("Architecture" + (view.selected ? " - " + view.selected : ""), view.architecture);
             if (view.schema) html += cgSection("Graph schema", view.schema);
             $("cgBody").innerHTML = html;
+            const ask = view.ask;
+            $("cgAskOut").innerHTML = ask
+                ? '<pre style="white-space:pre-wrap;overflow-x:auto;margin:10px 0 0;font-size:12px">' + esc(ask.report) + "</pre>"
+                : "";
         }
         async function loadCodeGraph() {
             $("cgNote").textContent = "";
@@ -5600,20 +5629,44 @@ 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();
             const out = await cgPost({ op: "index", root: root || undefined }, "Indexing...");
             if (out) { if (out.view && out.view.selected) cgProject = out.view.selected; setNote("cgNote", out.ok ? "Indexed." : (out.error || "Indexing failed."), out.ok ? "ok" : "err"); }
         }
+        async function cgAskAction() {
+            const query = $("cgQuery").value.trim();
+            if (!query) { setNote("cgNote", "Type a question first.", "err"); return; }
+            const out = await cgPost({ op: "ask", query, project: cgProject || undefined }, "Searching...");
+            if (out) setNote("cgNote", out.ok ? "" : (out.error || "Query failed."), out.ok ? "ok" : "err");
+        }
         function wireCodeGraph() {
             $("cgRefresh").addEventListener("click", loadCodeGraph);
             $("cgToggle").addEventListener("click", cgToggleAction);
             $("cgIndex").addEventListener("click", cgIndexAction);
+            $("cgAsk").addEventListener("click", cgAskAction);
+            $("cgQuery").addEventListener("keydown", (e) => { if (e.key === "Enter") cgAskAction(); });
             $("view-codegraph").addEventListener("click", (e) => {
+                const reindex = e.target.closest("button[data-cg-reindex]");
+                if (reindex) {
+                    cgPost({ op: "index", root: reindex.dataset.cgReindex }, "Re-indexing...")
+                        .then((out) => { if (out) setNote("cgNote", out.ok ? "Re-indexed." : (out.error || "Indexing failed."), out.ok ? "ok" : "err"); });
+                    return;
+                }
                 const b = e.target.closest("button[data-cg-project]");
                 if (!b) return;
                 cgProject = b.dataset.cgProject;
@@ -5730,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
@@ -5823,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
@@ -5922,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...");
@@ -5954,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.107",
+  "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": [