@enigmax/dashboard 0.1.68 → 0.1.70

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,19 @@
         <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 knowledge graph of symbols, call chains, and routes. Enabling it registers the code-intelligence server in your agents so they can query the graph over MCP. Complements <a href="#/recall">Recall</a> (session memory).</p>
+            </div>
+            <button id="cgToggle" type="button" class="toggle" role="switch" aria-checked="false" aria-label="Codebase memory">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 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 +3170,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))
@@ -3503,8 +3518,11 @@ export {
         const TRASH_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
         const REFRESH_ICON = '<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>';
         function accountRow(a) {
+            const stateTxt = a.loginState === "expired" ? "session expired" : a.loginState === "empty" ? "signed out" : a.loginState === "absent" ? "not logged in" : "";
             const badges = (a.active ? '<span class="tag meas">active</span>' : "")
-                + (a.loggedIn ? '<span class="tag">' + esc(a.email || "logged in") + "</span>" : '<span class="tag warn">not logged in</span>');
+                + (a.loggedIn
+                    ? '<span class="tag">' + esc(a.email || "logged in") + "</span>"
+                    : '<span class="tag warn">' + (a.email ? esc(a.email) + " · " : "") + (stateTxt || "not logged in") + "</span>");
             const btn = (act, label, cls) => '<button type="button" class="' + (cls || "toggle") + '" data-acc="' + act + '" data-tool="' + esc(a.tool) + '" data-name="' + esc(a.name) + '">' + label + "</button>";
             const removeBtn = '<button type="button" class="btn-danger icon" title="Remove" aria-label="Remove account ' + esc(a.name) + '" data-acc="remove" data-tool="' + esc(a.tool) + '" data-name="' + esc(a.name) + '">' + TRASH_ICON + "</button>";
             // Provider override (e.g. MiniMax) only for tools that support it, and never the
@@ -3512,7 +3530,7 @@ export {
             const provBtn = (a.supportsProvider && a.removable) ? btn("provider", "Provider") : "";
             const acts = '<div class="set-ctl" style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">'
                 + (a.active ? "" : btn("activate", "Use"))
-                + (a.loggedIn ? "" : btn("login", "Log in..."))
+                + btn("login", a.loggedIn ? "Re-login" : "Log in")
                 + provBtn
                 + (a.removable ? btn("rename", "Rename") + removeBtn : "")
                 + "</div>";
@@ -3560,7 +3578,7 @@ export {
                 const r = await fetch("/api/accounts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(Object.assign({ op }, payload)) });
                 const out = await r.json();
                 if (out.data) renderAccounts(out.data);
-                if (out.ok) { setNote("accountsNote", "Saved.", "ok"); return; }
+                if (out.ok) { setNote("accountsNote", out.note || "Saved.", "ok"); return; }
                 if (rollback && !out.data) rollback();
                 setNote("accountsNote", "Error: " + (out.error || "failed"), "err");
             } catch { if (rollback) rollback(); setNote("accountsNote", "Could not reach the server.", "err"); }
@@ -3644,7 +3662,7 @@ export {
                 if (op === "activate") accAction("account.activate", { tool, name });
                 else if (op === "remove") { if (await askConfirm("Remove account", "Remove account '" + name + "' and delete its local config dir?", true)) accAction("account.remove", { tool, name }); }
                 else if (op === "rename") { const taken = accAccounts.filter((a) => a.tool === tool).map((a) => a.name); const nn = await askText("Rename account", name, "Rename '" + name + "' to:", nameValidator(taken, name)); if (nn && nn !== name) accAction("account.rename", { tool, name, newName: nn }); }
-                else if (op === "login") { setNote("accountsNote", "To log in, run this in a terminal:  enigma " + tool + " " + name); }
+                else if (op === "login") accAction("account.login", { tool, name });
                 else if (op === "provider") {
                     const a = accAccounts.find((x) => x.tool === tool && x.name === name);
                     if (!a) return;
@@ -3710,7 +3728,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";
@@ -3731,6 +3749,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 */ } } }
@@ -3808,9 +3827,9 @@ export {
                 const stTag = (s) => s === "expired" ? " (login expired)" : s === "empty" ? " (not signed in)" : s === "absent" ? " (no login)" : "";
                 const opts = '<option value="">follow active (' + esc(p.resolvedAccount || "default") + ")" + stTag(p.resolvedState) + "</option>"
                     + (p.accounts || []).map((a) => '<option value="' + esc(a.name) + '"' + (p.defaultAccount === a.name ? " selected" : "") + ">" + esc(a.name) + (a.label && a.label !== a.name ? " - " + esc(a.label) : "") + stTag(a.state) + "</option>").join("");
-                const warn = p.installed && (p.resolvedState === "expired" || p.resolvedState === "empty")
+                const warn = (p.installed && !p.contextReady && (p.resolvedState === "expired" || p.resolvedState === "empty"))
                     ? '<div class="set-hint" style="margin-top:6px;color:var(--warn,#e0a020)">This login is ' + (p.resolvedState === "expired" ? "expired" : "not signed in") + ' - the pack may ask you to log in. Refresh it (launch that account once) or pick another above.</div>'
-                    : "";
+                    : (p.installed && p.contextReady ? '<div class="set-hint" style="margin-top:6px;color:var(--ok)">Active session ready - launches without asking to log in.</div>' : "");
                 const accountSel = p.installed
                     ? '<label class="set-hint" style="display:flex;align-items:center;gap:8px;margin-top:10px">Account that seeds this pack:'
                         + '<select data-pack-account data-id="' + esc(p.id) + '">' + opts + "</select></label>" + warn
@@ -3854,6 +3873,82 @@ export {
             });
         }
 
+        // --- code graph subpage (structural code memory) ---
+        let cgProject = null;
+        // A single architecture/schema field, rendered defensively (shape varies by tool version).
+        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, 12).map((x) => '<span class="tag">' + esc(cgItem(x)) + "</span>").join(" ")
+                    + (v.length > 12 ? ' <span class="set-hint">+' + (v.length - 12) + " more</span>" : "");
+            }
+            if (v && typeof v === "object") return '<span class="set-hint">' + esc(Object.keys(v).length + " field(s)") + "</span>";
+            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";
+            if (!view.available) {
+                $("cgBody").innerHTML = '<div class="panel"><div class="set-cat-h">Not installed</div>'
+                    + '<div class="set-hint" style="padding:6px 0">The code-intelligence engine is not available yet. When enabled, your agent fetches it automatically on first use (needs <code>npx</code> on PATH). Then tell your agent "Index this project".</div></div>';
+                return;
+            }
+            const projects = view.projects || [];
+            const projHtml = projects.length
+                ? projects.map((p) => {
+                    const name = p.name || p.root || "";
+                    const sel = name === view.selected;
+                    return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(name)
+                        + (sel ? ' <span class="tag" style="color:var(--ok)">viewing</span>' : "")
+                        + '</div><div class="set-hint">' + esc(p.root || "") + '</div></div>'
+                        + '<div class="set-ctl"><button type="button" class="toggle' + (sel ? " on" : "") + '" data-cg-project="' + esc(name) + '">View</button></div></div>';
+                }).join("")
+                : '<div class="empty" style="padding:12px 0">No projects indexed yet. In your agent, say "Index this project".</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 cgToggleAction() {
+            const turnOn = $("cgToggle").getAttribute("aria-checked") !== "true";
+            setNote("cgNote", "Saving...");
+            try {
+                const out = await (await fetch("/api/codegraph", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ op: "toggle", on: turnOn, project: cgProject || undefined }) })).json();
+                if (out.view) renderCodeGraph(out.view);
+                setNote("cgNote", out.ok ? (turnOn ? "Codebase memory enabled - registered in your agents (restart them to load it)." : "Codebase memory disabled.") : (out.error || "Action failed."), out.ok ? "ok" : "err");
+            } catch { setNote("cgNote", "Could not reach the server.", "err"); }
+        }
+        function wireCodeGraph() {
+            $("cgRefresh").addEventListener("click", loadCodeGraph);
+            $("cgToggle").addEventListener("click", cgToggleAction);
+            $("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 = "";
@@ -4422,6 +4517,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.68",
+  "version": "0.1.70",
   "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": [