@enigmax/dashboard 0.1.1 → 0.1.3

package/assets/index.html

@@ -108,6 +108,29 @@
             border-radius: 7px; padding: 5px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
         }
         .set-note { color: var(--accent); font-size: 12px; min-height: 16px; margin-top: 10px; }
+        .tag {
+            display: inline-block; font-size: 11px; color: var(--muted); background: var(--surface2);
+            border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
+        }
+        .tag.ext { color: var(--accent2); }
+        .tag.warn { color: var(--accent); border-color: var(--accent); }
+        .editor {
+            width: 100%; min-height: 360px; resize: vertical; background: var(--surface2); color: var(--text);
+            border: 1px solid var(--border); border-radius: 8px; padding: 12px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
+        }
+        .btn-danger {
+            background: var(--surface2); color: var(--accent2); border: 1px solid var(--border);
+            border-radius: 7px; padding: 5px 14px; font-size: 12px; cursor: pointer; font-family: inherit;
+        }
+        .btn-danger:hover { border-color: var(--accent2); }
+        .sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
+        .sys-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--surface2); font-size: 13px; }
+        .sys-item .k { color: var(--muted); }
+        .pill { font-size: 11px; border-radius: 6px; padding: 2px 9px; border: 1px solid var(--border); white-space: nowrap; }
+        .pill.on { color: #06210f; background: var(--good); border-color: var(--good); font-weight: 600; }
+        .pill.off { color: var(--muted); background: var(--surface2); }
+        .pill.lvl { color: #1a1206; background: var(--accent); border-color: var(--accent); font-weight: 600; }
         @media (max-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } header { gap: 12px; } }
     </style>
 </head>
@@ -119,6 +142,7 @@
         </div>
         <nav class="tabs">
             <a href="#/" data-view="savings" class="tab active">Savings</a>
+            <a href="#/skills" data-view="skills" class="tab">Skills</a>
             <a href="#/settings" data-view="settings" class="tab">Settings</a>
         </nav>
         <div class="nav">
@@ -148,6 +172,12 @@
             <div class="card"><div class="label">Best Compression</div><div id="best" class="value">-</div><div class="foot">Most saved in one call</div></div>
         </div>
 
+        <div class="panel">
+            <h2 style="margin-bottom:4px">Enigma Systems <small>what's active - configuration, not savings</small></h2>
+            <div class="sub" style="margin-bottom:14px">Only Context Compression and (opt-in) real tool-usage are measured for savings below. The rest is shown as state: enigma can't measure their effect because they run inside the agent, not through enigma - so it reports their configuration honestly instead of inventing a number.</div>
+            <div id="systems" class="sys-grid"><div class="empty" style="padding:16px 0">Loading...</div></div>
+        </div>
+
         <div class="panel">
             <div class="panel-head">
                 <h2>Savings Per Day <small id="rangeLabel"></small></h2>
@@ -233,6 +263,28 @@
         </div>
     </main>
 
+    <section id="view-skills" style="display:none">
+        <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
+            <div style="flex:1">
+                <h1>Skills</h1>
+                <p>The skills installed in your agents - enigma's own and any external ones you added. Edit a skill's content, disable/enable or remove it, and check whether enigma's skills are up to date.</p>
+            </div>
+            <button id="skillsCheck" type="button" class="toggle on" style="white-space:nowrap">Check for updates</button>
+        </div>
+        <div id="skillEditor" class="panel" style="display:none">
+            <div class="panel-head"><h2>Editing <span id="seName"></span> <small id="seWarn"></small></h2></div>
+            <textarea id="seText" class="editor" spellcheck="false"></textarea>
+            <div style="margin-top:10px;display:flex;gap:8px">
+                <button id="seSave" type="button" class="toggle on">Save</button>
+                <button id="seCancel" type="button" class="toggle">Cancel</button>
+            </div>
+        </div>
+        <div class="panel">
+            <div id="skillsBody"><div class="empty" style="padding:24px 0">Loading skills...</div></div>
+            <div id="skillsNote" class="set-note"></div>
+        </div>
+    </section>
+
     <section id="view-settings" style="display:none">
         <div class="page-head">
             <h1>Settings</h1>
@@ -656,15 +708,144 @@
             } catch { $("settingsBody").innerHTML = '<div class="empty" style="padding:24px 0">Settings unavailable.</div>'; }
         }
 
-        // --- hash routing between the Savings and Settings subpages ---
+        // --- "Enigma systems" overview (factual state, never invented savings) ---
+        function pill(state, text) { return '<span class="pill ' + state + '">' + esc(text) + "</span>"; }
+        function boolPill(b) { return b ? pill("on", "on") : pill("off", "off"); }
+        function levelPill(v) { return (!v || v === "off") ? pill("off", "off") : pill("lvl", v); }
+
+        function renderSystems(s) {
+            const el = $("systems");
+            if (!s) { el.innerHTML = '<div class="empty" style="padding:16px 0">Status unavailable.</div>'; return; }
+            const item = (k, v) => '<div class="sys-item"><span class="k">' + k + '</span><span class="v">' + v + "</span></div>";
+            const sk = s.skills || {};
+            const skillTags = '<span class="tag">' + (sk.enigma || 0) + " enigma</span>"
+                + '<span class="tag ext">' + (sk.external || 0) + " external</span>"
+                + ((sk.disabled || 0) ? '<span class="tag">' + sk.disabled + " disabled</span>" : "");
+            el.innerHTML =
+                  item("Context compression (MCP) · measured", boolPill(s.compress))
+                + item("Real tool-usage stats · measured", boolPill(s.usageStats))
+                + item("Token-efficient output", levelPill(s.outputStyle))
+                + item("Minimal code", levelPill(s.minimalCode))
+                + item("Parallel sub-agents", boolPill(s.parallelSubagents))
+                + item("Auto-lint on edit", boolPill(s.autoLint))
+                + item("Commit emoji", boolPill(s.commitEmoji))
+                + item("Local dashboard", pill(s.dashboard === "off" ? "off" : "lvl", s.dashboard || "off"))
+                + item("Skills", skillTags);
+        }
+
+        async function loadSystems() {
+            try {
+                const r = await fetch("/api/status", { cache: "no-store" });
+                renderSystems((await r.json()).systems);
+            } catch { $("systems").innerHTML = '<div class="empty" style="padding:16px 0">Status unavailable.</div>'; }
+        }
+
+        // --- skills subpage (lists enigma + external skills over /api/skills) ---
+        function skillRow(s) {
+            const ver = s.version ? '<span class="tag">v' + esc(s.version) + "</span>" : "";
+            const where = s.agents && s.agents.length ? '<span class="tag">' + s.agents.map(esc).join(", ") + "</span>"
+                : (s.discarded ? '<span class="tag">disabled</span>' : '<span class="tag">not deployed</span>');
+            const ext = s.source === "external" ? '<span class="tag ext">external</span>' : "";
+            const upd = s.source !== "enigma" ? ""
+                : s.update === "update" ? '<span class="tag warn">update available</span>'
+                : s.update === "modified" ? '<span class="tag ext">modified</span>' : "";
+            const edit = '<button type="button" class="toggle" data-name="' + esc(s.name) + '" data-action="edit" data-enigma="' + (s.source === "enigma" ? 1 : 0) + '">Edit</button>';
+            const main = s.source === "enigma"
+                ? '<button type="button" class="toggle' + (s.discarded ? "" : " on") + '" data-name="' + esc(s.name)
+                    + '" data-action="' + (s.discarded ? "enable" : "disable") + '">' + (s.discarded ? "Disabled" : "Enabled") + "</button>"
+                : '<button type="button" class="btn-danger" data-name="' + esc(s.name) + '" data-action="remove">Remove</button>';
+            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(s.name) + ext + ver + upd + where + "</div>"
+                + '<div class="set-hint">' + esc(s.description || "") + '</div></div><div class="set-ctl" style="display:flex;gap:8px">' + edit + main + "</div></div>";
+        }
+
+        function renderSkills(skills) {
+            const enigma = skills.filter((s) => s.source === "enigma");
+            const ext = skills.filter((s) => s.source === "external");
+            const section = (title, blurb, list, emptyText) => '<div class="set-cat"><div class="set-cat-h">' + title + "</div>"
+                + '<div class="set-cat-b">' + blurb + "</div>"
+                + (list.length ? list.map(skillRow).join("") : '<div class="empty" style="padding:16px 0">' + emptyText + "</div>") + "</div>";
+            $("skillsBody").innerHTML =
+                section("Enigma skills", "Distributed and kept current by enigma. Disable to remove from your agents; enable to restore.", enigma, "No enigma skills.")
+                + section("External skills", "Skills enigma did not author, found in your agents. Remove deletes the skill from every agent that has it.", ext, "No external skills found.");
+        }
+
+        async function postSkill(name, action) {
+            $("skillsNote").textContent = "Working...";
+            try {
+                const res = await fetch("/api/skills", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, action }) });
+                const out = await res.json();
+                if (!out.ok) { $("skillsNote").textContent = "Could not " + action + " " + name + ": " + (out.error || "error"); return; }
+                if (out.skills) renderSkills(out.skills);
+                $("skillsNote").textContent = out.note || ("Done: " + name);
+            } catch { $("skillsNote").textContent = "Could not reach the server to change " + name + "."; }
+        }
+
+        // Inline SKILL.md editor (one skill at a time).
+        let editing = null;
+        async function openEditor(name, isEnigma) {
+            $("skillsNote").textContent = "Loading " + name + "...";
+            try {
+                const res = await fetch("/api/skills", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, action: "read" }) });
+                const out = await res.json();
+                if (!out.ok) { $("skillsNote").textContent = "Could not open " + name + ": " + (out.error || "error"); return; }
+                editing = name;
+                $("seName").textContent = name;
+                $("seWarn").textContent = isEnigma ? "managed by enigma - local edits revert on the next update/sync" : "external skill";
+                $("seText").value = out.content || "";
+                $("skillEditor").style.display = "";
+                $("skillsNote").textContent = "";
+                window.scrollTo({ top: 0, behavior: "smooth" });
+                $("seText").focus();
+            } catch { $("skillsNote").textContent = "Could not reach the server."; }
+        }
+        function closeEditor() { editing = null; $("skillEditor").style.display = "none"; }
+        async function saveEditor() {
+            if (!editing) return;
+            $("skillsNote").textContent = "Saving " + editing + "...";
+            try {
+                const res = await fetch("/api/skills", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: editing, action: "save", content: $("seText").value }) });
+                const out = await res.json();
+                if (!out.ok) { $("skillsNote").textContent = "Could not save " + editing + ": " + (out.error || "error"); return; }
+                if (out.skills) renderSkills(out.skills);
+                $("skillsNote").textContent = out.note || "Saved.";
+                closeEditor();
+            } catch { $("skillsNote").textContent = "Could not reach the server."; }
+        }
+
+        function wireSkills() {
+            $("skillsBody").addEventListener("click", (e) => {
+                const b = e.target.closest("button[data-action]");
+                if (!b) return;
+                const { name, action } = b.dataset;
+                if (action === "edit") { openEditor(name, b.dataset.enigma === "1"); return; }
+                if (action === "remove" && !confirm('Remove the external skill "' + name + '" from all agents? This deletes it from disk.')) return;
+                postSkill(name, action);
+            });
+            $("seSave").addEventListener("click", saveEditor);
+            $("seCancel").addEventListener("click", closeEditor);
+            $("skillsCheck").addEventListener("click", () => postSkill("*", "check-updates"));
+        }
+
+        let skillsLoaded = false;
+        async function loadSkills() {
+            try {
+                const res = await fetch("/api/skills", { cache: "no-store" });
+                renderSkills((await res.json()).skills || []);
+            } catch { $("skillsBody").innerHTML = '<div class="empty" style="padding:24px 0">Skills unavailable.</div>'; }
+        }
+
+        // --- hash routing between the Savings, Skills and Settings subpages ---
         function route() {
-            const v = (location.hash || "").replace(/^#\/?/, "") === "settings" ? "settings" : "savings";
+            const h = (location.hash || "").replace(/^#\/?/, "");
+            const v = (h === "settings" || h === "skills") ? h : "savings";
             $("view-savings").style.display = v === "savings" ? "" : "none";
+            $("view-skills").style.display = v === "skills" ? "" : "none";
             $("view-settings").style.display = v === "settings" ? "" : "none";
             document.querySelectorAll(".tab").forEach((t) => t.classList.toggle("active", t.dataset.view === v));
             if (v === "settings" && !settingsLoaded) { settingsLoaded = true; loadSettings(); }
+            if (v === "skills" && !skillsLoaded) { skillsLoaded = true; loadSkills(); }
             // The chart was sized while its view may have been hidden; nudge it on return.
-            if (v === "savings" && chart) { try { applyRange(); } catch { /* not ready */ } }
+            if (v === "savings") { loadSystems(); if (chart) { try { applyRange(); } catch { /* not ready */ } } }
         }
 
         initChart();
@@ -672,6 +853,7 @@
         setInterval(poll, POLL_MS);
         document.addEventListener("visibilitychange", () => { if (!document.hidden) poll(); });
         wireSettings();
+        wireSkills();
         window.addEventListener("hashchange", route);
         route();
     </script>

package/package.json

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