@enigmax/dashboard 0.1.69 → 0.1.71

package/assets/index.html

@@ -526,6 +526,7 @@
             <a href="#/settings" data-view="settings" class="tab">Settings</a>
             <a href="#/resources" data-view="resources" class="tab">Resources</a>
             <a href="#/recall" data-view="recall" class="tab">Recall</a>
+            <a href="#/codegraph" data-view="codegraph" class="tab">Code graph</a>
             <a href="#/packs" data-view="packs" class="tab">Packs</a>
         </nav>
         <div class="nav">
@@ -873,6 +874,24 @@
         <div id="recallList"></div>
     </section>
 
+    <section id="view-codegraph" style="display:none">
+        <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>
+            </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>
+        </div>
+        <div id="cgNote" class="set-note"></div>
+        <div class="panel">
+            <div class="set-cat-h">Index a project</div>
+            <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 id="cgBody"><div class="empty" style="padding:12px 0">Loading...</div></div>
+    </section>
+
     <footer>
         Polling pauses automatically when this tab is hidden, and the server caches each snapshot - so an open dashboard costs almost nothing.
         Data source: <code>~/.enigma/ccr/stats.json</code> + <code>history.jsonl</code> - reset it with <code>enigma compress --clear</code>. Enigma <span id="ver"></span>
@@ -3156,6 +3175,7 @@ export {
             const guard = (sec.guardProtects || []).map((p) => '<span class="tag">' + esc(p) + "</span>").join("");
             el.innerHTML =
                   item("Context compression (MCP) · measured", boolPill(s.compress))
+                + item("Codebase memory / code graph (MCP)", boolPill(s.codeGraph))
                 + item("Real tool-usage stats · measured", boolPill(s.usageStats))
                 + item("Claude Code proxy · experimental", boolPill(s.proxy))
                 + item("Live usage windows · real", boolPill(s.usageApi))
@@ -3713,7 +3733,7 @@ export {
 
         // --- hash routing between the subpages ---
         // Single source of truth for the subpage ids (savings is the default/fallback).
-        const VIEWS = ["savings", "usage", "accounts", "skills", "settings", "resources", "recall", "packs"];
+        const VIEWS = ["savings", "usage", "accounts", "skills", "settings", "resources", "recall", "codegraph", "packs"];
         // Views that apply to a single project; the rest are global/machine-level only.
         const PROJECT_VIEWS = ["settings", "skills"];
         let activeView = "savings";
@@ -3734,6 +3754,7 @@ export {
             else if (v === "usage") { loadProviderStatus(); if (!usageAccountsLoaded) { usageAccountsLoaded = true; loadUsageAccounts(); } }
             else if (v === "resources") loadResources();
             else if (v === "recall") loadRecall();
+            else if (v === "codegraph") loadCodeGraph();
             else if (v === "packs") loadPacks();
             // The chart was sized while its view may have been hidden; nudge it on return.
             else if (v === "savings") { loadSystems(true); if (chart) { try { applyRange(); } catch { /* not ready */ } } }
@@ -3857,6 +3878,90 @@ export {
             });
         }
 
+        // --- code graph subpage (native structural code memory) ---
+        let cgProject = null;
+        // Render one architecture/schema field defensively (arrays -> chips, objects -> count).
+        function cgItem(x) {
+            if (x && typeof x === "object") return String(x.name || x.label || x.path || x.id || JSON.stringify(x)).slice(0, 60);
+            return String(x);
+        }
+        function cgVal(v) {
+            if (Array.isArray(v)) {
+                if (!v.length) return '<span class="tag">none</span>';
+                return v.slice(0, 16).map((x) => '<span class="tag">' + esc(cgItem(x)) + "</span>").join(" ")
+                    + (v.length > 16 ? ' <span class="set-hint">+' + (v.length - 16) + " more</span>" : "");
+            }
+            if (v && typeof v === "object") {
+                const ents = Object.entries(v);
+                if (!ents.length) return '<span class="tag">none</span>';
+                return ents.slice(0, 16).map(([k, n]) => '<span class="tag">' + esc(k) + " " + esc(String(n)) + "</span>").join(" ");
+            }
+            return esc(String(v));
+        }
+        function cgSection(title, obj) {
+            const entries = obj && typeof obj === "object" ? Object.entries(obj) : [];
+            if (!entries.length) return "";
+            return '<div class="panel"><div class="set-cat-h">' + esc(title) + "</div>"
+                + entries.map(([k, v]) => '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(k) + '</div><div class="set-hint">' + cgVal(v) + "</div></div></div>").join("")
+                + "</div>";
+        }
+        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";
+            const projects = view.projects || [];
+            const projHtml = projects.length
+                ? projects.map((p) => {
+                    const sel = p.name === view.selected;
+                    return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(p.name)
+                        + (sel ? ' <span class="tag" style="color:var(--ok)">viewing</span>' : "")
+                        + '</div><div class="set-hint">' + esc((p.files || 0) + " files · " + (p.symbols || 0) + " symbols · " + (p.root || "")) + '</div></div>'
+                        + '<div class="set-ctl"><button type="button" class="toggle' + (sel ? " on" : "") + '" data-cg-project="' + esc(p.name) + '">View</button></div></div>';
+                }).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>";
+            if (view.architecture) html += cgSection("Architecture" + (view.selected ? " - " + view.selected : ""), view.architecture);
+            if (view.schema) html += cgSection("Graph schema", view.schema);
+            $("cgBody").innerHTML = html;
+        }
+        async function loadCodeGraph() {
+            $("cgNote").textContent = "";
+            try {
+                const q = cgProject ? "?project=" + encodeURIComponent(cgProject) : "";
+                renderCodeGraph(await (await fetch("/api/codegraph" + q, { cache: "no-store" })).json());
+            } catch { $("cgBody").innerHTML = '<div class="empty" style="padding:12px 0">Code graph unavailable.</div>'; }
+        }
+        async function cgPost(payload, working) {
+            setNote("cgNote", working);
+            try {
+                const out = await (await fetch("/api/codegraph", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) })).json();
+                if (out.view) renderCodeGraph(out.view);
+                return out;
+            } 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");
+        }
+        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"); }
+        }
+        function wireCodeGraph() {
+            $("cgRefresh").addEventListener("click", loadCodeGraph);
+            $("cgToggle").addEventListener("click", cgToggleAction);
+            $("cgIndex").addEventListener("click", cgIndexAction);
+            $("view-codegraph").addEventListener("click", (e) => {
+                const b = e.target.closest("button[data-cg-project]");
+                if (!b) return;
+                cgProject = b.dataset.cgProject;
+                loadCodeGraph();
+            });
+        }
+
         // --- recall subpage (local session memory; reads your own transcripts) ---
         const RECALL_TYPES = ["bugfix", "feature", "refactor", "change", "discovery", "decision", "security"];
         let recallProjSig = "";
@@ -4425,6 +4530,7 @@ export {
         wireUsage();
         wireResources();
         wireRecall();
+        wireCodeGraph();
         wirePacks();
         wireScope();
         enhanceAll(); // upgrade every static <select> into the shared pretty dropdown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/dashboard",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "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": [