@enigmax/dashboard 0.1.52 → 0.1.54

package/assets/index.html

@@ -361,6 +361,13 @@
         }
         .modal-back.show .modal { transform: none; opacity: 1; }
         .modal.wide { max-width: 900px; }
+        .as-top { display: flex; gap: 8px; margin: 14px 0 6px; }
+        .as-list { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; }
+        .as-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--surface2); cursor: pointer; }
+        .as-row:last-child { border-bottom: none; }
+        .as-row input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
+        .as-name { font-size: 13px; color: var(--text); font-family: var(--mono); }
+        .as-src { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
         .modal-title { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); }
         .modal-msg { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 8px; word-break: break-word; }
         .modal-input {
@@ -632,6 +639,11 @@
             <div class="set-cat-h">Skill settings</div>
             <div id="skillSettings" class="set-grid"></div>
         </div>
+        <div class="panel" id="memPanel">
+            <div class="set-cat-h">Agent memory</div>
+            <div class="set-cat-b">Customize the instruction files enigma deploys to each agent (CLAUDE.md / AGENTS.md). Your edits follow the Customized-skill updates policy on the next sync: overwrite restores the managed version, keep preserves them.</div>
+            <div id="memBody" class="set-grid"><div class="empty" style="padding:12px 0">Loading...</div></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>
@@ -664,11 +676,6 @@
                 </div>
             </div>
         </div>
-        <div class="panel" id="memPanel">
-            <div class="set-cat-h">Agent memory</div>
-            <div class="set-cat-b">Customize the instruction files enigma deploys to each agent (CLAUDE.md / AGENTS.md). Your edits follow the Customized-skill updates policy on the next sync: overwrite restores the managed version, keep preserves them.</div>
-            <div id="memBody" class="set-grid"><div class="empty" style="padding:12px 0">Loading...</div></div>
-        </div>
     </section>
 
     <section id="view-resources" style="display:none">
@@ -2596,12 +2603,10 @@ export {
         async function loadSettings() {
             if (isProjectScope()) return loadProjectSettings();
             const port = $("dashPortPanel"); if (port) port.style.display = ""; // global-only panel
-            const mp = $("memPanel"); if (mp) mp.style.display = "";
             try {
                 const data = await (await fetch("/api/settings", { cache: "no-store" })).json();
                 renderSettings(data.categories || []);
                 renderDashPort(data);
-                loadMemory();
             } catch { $("settingsBody").innerHTML = '<div class="empty" style="padding:24px 0">Settings unavailable.</div>'; }
         }
 
@@ -2650,7 +2655,7 @@ export {
         }
 
         async function loadMemory(project) {
-            const el = project ? $("projMemBody") : $("memBody");
+            const el = $("memBody"); // global + project share this panel (one scope shown at a time)
             if (!el) return;
             try {
                 const q = project ? "/api/memory?path=" + encodeURIComponent(project) : "/api/memory";
@@ -2703,8 +2708,8 @@ export {
             } catch { toast("Could not reach the server.", "err"); }
         }
 
-        // Edit/reset buttons live in both the global panel (#memBody) and the project view
-        // (#projMemBody, mutually exclusive by scope); one document-level delegate covers both.
+        // The memory editor lives in the Skills tab (#memBody, scope-aware via memProject());
+        // a document-level delegate handles its edit/reset buttons in global and project scope.
         document.addEventListener("click", (e) => {
             const ed = e.target.closest && e.target.closest("[data-mem-edit]");
             if (ed) { openMemoryEditor(ed.dataset.memEdit, memProject()); return; }
@@ -2952,7 +2957,7 @@ export {
                 $("skillsBody").innerHTML =
                     '<div class="panel"><div class="set-cat-h">Auto-detect skills by stack</div>'
                     + '<div class="set-cat-b">Scan this project (packages, config files, gems) and install the matching community skills for its stack - hash-verified and kept separate from the policy skills below.</div>'
-                    + '<div class="ladd"><button type="button" class="toggle on with-icon" data-proj-autoskills><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>Detect &amp; install</button></div></div>'
+                    + '<div class="ladd"><button type="button" class="toggle on with-icon" data-proj-autoskills><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>Detect skills</button></div></div>'
                     + section("Policy skills", "Deploy enigma's policy skills into this project, per app. A green chip means the skill is in that app's project folder.", skills, "No skills.");
                 return;
             }
@@ -3069,6 +3074,7 @@ export {
             if (isProjectScope()) return loadProjectSkills();
             skillScope = "global";
             loadSkillSettings();
+            loadMemory();
             try {
                 const res = await fetch("/api/skills", { cache: "no-store" });
                 renderSkills((await res.json()).skills || []);
@@ -3434,7 +3440,6 @@ export {
         async function loadProjectSettings() {
             const el = $("settingsBody");
             const port = $("dashPortPanel"); if (port) port.style.display = "none"; // global-only
-            const mp = $("memPanel"); if (mp) mp.style.display = "none"; // global panel; project memory is rendered inline below
             el.innerHTML = '<div class="empty" style="padding:24px 0">Loading...</div>';
             let d; try { d = await fetchProjectDetail(); } catch { el.innerHTML = '<div class="empty" style="padding:24px 0">Project unavailable.</div>'; return; }
             if (d.error) { el.innerHTML = '<div class="empty" style="padding:24px 0">' + esc(d.error) + "</div>"; return; }
@@ -3449,13 +3454,11 @@ export {
                 + '<div class="set-row"><div class="set-meta"><div class="set-name">Git hooks</div><div class="set-hint">commit secret guard for this repo</div></div><div class="set-ctl">' + hooks + "</div></div>"
                 + '<div class="set-row"><div class="set-meta"><div class="set-name">AI quality gate</div><div class="set-hint">validate changes through the gate pipeline before push (needs the gate feature enabled)</div></div><div class="set-ctl">' + gate + "</div></div></div></div>"
                 + '<div class="panel"><div class="set-cat-h">Project config</div><div class="set-cat-b">applies only to this project (its .enigma.json). Settings not shown here are global-only - switch Scope to Global for those.</div><div class="set-grid">' + cfg + "</div></div>"
-                + '<div class="panel"><div class="set-cat-h">Agent memory</div><div class="set-cat-b">Customize this project\'s instruction files (CLAUDE.md / AGENTS.md). Edits follow the Customized-skill updates policy on the next sync.</div><div id="projMemBody" class="set-grid"><div class="empty" style="padding:12px 0">Loading...</div></div></div>'
                 + '<div class="panel"><div class="set-cat-h">Manage</div><div class="set-grid">'
                 + '<div class="set-row"><div class="set-meta"><div class="set-name">Name</div><div class="set-hint">display name for this project (must be unique)</div></div><div class="set-ctl"><input class="linput" data-proj-name value="' + esc(d.label) + '" spellcheck="false" style="width:200px"></div></div>'
                 + '<div class="set-row"><div class="set-meta"><div class="set-name">Description</div><div class="set-hint">optional note shown in the header</div></div><div class="set-ctl ladd" style="align-items:center"><input class="linput" data-proj-desc value="' + esc(d.description || "") + '" placeholder="optional" style="flex:none;width:240px"><button type="button" class="toggle on" data-proj-save-meta>Save</button></div></div>'
                 + '<div class="set-row"><div class="set-meta"><div class="set-name">Forget project</div><div class="set-hint">remove it from the dashboard list - its files are not touched</div></div><div class="set-ctl"><button type="button" class="toggle" data-proj-forget>Forget</button></div></div>'
                 + "</div></div>";
-            loadMemory(currentScope);
         }
         async function saveProjectMeta() {
             if (!isProjectScope()) return;
@@ -3474,6 +3477,7 @@ export {
             skillScope = "project";
             const el = $("skillsBody");
             const ss = $("skillSettings"); if (ss) ss.innerHTML = '<div class="set-cat-b" style="padding:0 0 4px">Skill settings are global - switch Scope to Global to change them.</div>';
+            loadMemory(currentScope);
             el.innerHTML = '<div class="empty" style="padding:24px 0">Loading...</div>';
             let d; try { d = await fetchProjectDetail(); } catch { el.innerHTML = '<div class="empty" style="padding:24px 0">Project unavailable.</div>'; return; }
             if (d.error) { el.innerHTML = '<div class="empty" style="padding:24px 0">' + esc(d.error) + "</div>"; return; }
@@ -3498,6 +3502,60 @@ export {
                 loadProjectsList(); // refresh selector badges
             } catch { setNote(activeView === "skills" ? "skillsNote" : "settingsNote", "Could not reach the server.", "err"); }
         }
+        // Autoskills: detect the project's stack, let the user pick which community skills to
+        // install (all checked by default), then install the selected ones - or cancel.
+        async function autoskillsFlow() {
+            if (!isProjectScope()) return;
+            setNote("skillsNote", "Detecting your stack...");
+            let out;
+            try { out = await (await fetch("/api/projects/action", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ path: currentScope, op: "autoskills-detect" }) })).json(); }
+            catch { setNote("skillsNote", "Could not reach the server.", "err"); return; }
+            if (!out.ok) { setNote("skillsNote", out.error || "Detection failed.", "err"); return; }
+            const skills = out.skills || [];
+            if (!skills.length) { setNote("skillsNote", (out.detected ? "Detected " + out.detected + " - " : "") + "no matching community skills.", "ok"); return; }
+            setNote("skillsNote", out.detected ? ("Detected " + out.detected + ".") : "");
+            const selected = await openAutoskillsModal(out.detected, skills);
+            if (selected == null) { setNote("skillsNote", "Cancelled."); return; }
+            if (!selected.length) { setNote("skillsNote", "Nothing selected.", "err"); return; }
+            setNote("skillsNote", "Installing " + selected.length + " skill(s)...");
+            try {
+                const ins = await (await fetch("/api/projects/action", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ path: currentScope, op: "autoskills-install", skills: selected }) })).json();
+                if (ins.ok) { setNote("skillsNote", ins.note || "Installed.", "ok"); loadProjectSkills(); loadProjectsList(); }
+                else setNote("skillsNote", ins.error || ins.note || "Install failed.", "err");
+            } catch { setNote("skillsNote", "Could not reach the server.", "err"); }
+        }
+
+        // Selection modal: one checkbox per detected skill (all checked), Select all / Clear, and
+        // Install selected / Cancel. Resolves to the chosen refs, or null when cancelled.
+        function openAutoskillsModal(detected, skills) {
+            return new Promise((resolve) => {
+                const back = document.createElement("div");
+                back.className = "modal-back";
+                const rows = skills.map((s, i) =>
+                    '<label class="as-row"><input type="checkbox" checked data-as="' + i + '">'
+                    + '<span class="as-name">' + esc(s.name) + "</span>"
+                    + '<span class="as-src">' + (s.sources || []).map((x) => '<span class="tag">' + esc(x) + "</span>").join("") + "</span></label>").join("");
+                back.innerHTML = '<div class="modal wide" role="dialog" aria-modal="true">'
+                    + '<div class="modal-title">Install stack skills</div>'
+                    + '<div class="modal-msg">' + (detected ? "Detected " + esc(detected) + ". " : "") + esc(skills.length + " matching community skill(s)") + " - pick which to install. They are hash-verified and kept separate from the policy skills.</div>"
+                    + '<div class="as-top"><button type="button" class="toggle" data-as-all>Select all</button><button type="button" class="toggle" data-as-none>Clear</button></div>'
+                    + '<div class="as-list">' + rows + "</div>"
+                    + '<div class="modal-acts"><button type="button" class="toggle modal-cancel">Cancel</button>'
+                    + '<button type="button" class="toggle on modal-ok">Install selected</button></div></div>';
+                document.body.appendChild(back);
+                requestAnimationFrame(() => back.classList.add("show"));
+                let done = false;
+                const close = (val) => { if (done) return; done = true; back.classList.remove("show"); setTimeout(() => back.remove(), 200); resolve(val); };
+                const boxes = () => Array.from(back.querySelectorAll("input[data-as]"));
+                back.querySelector("[data-as-all]").addEventListener("click", () => boxes().forEach((b) => { b.checked = true; }));
+                back.querySelector("[data-as-none]").addEventListener("click", () => boxes().forEach((b) => { b.checked = false; }));
+                back.querySelector(".modal-cancel").addEventListener("click", () => close(null));
+                back.addEventListener("mousedown", (e) => { if (e.target === back) close(null); });
+                back.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); close(null); } });
+                back.querySelector(".modal-ok").addEventListener("click", () => close(boxes().filter((b) => b.checked).map((b) => skills[Number(b.dataset.as)].ref)));
+            });
+        }
+
         async function forgetProject() {
             if (!isProjectScope()) return;
             if (!(await askConfirm("Forget project", "Stop managing " + scopeLabel() + "? Its files are not touched.", false))) return;
@@ -3509,7 +3567,7 @@ export {
         }
         function onProjectControlClick(e) {
             if (!isProjectScope()) return;
-            if (e.target.closest("[data-proj-autoskills]")) { projAction({ op: "autoskills" }, "Scan this project and install the matching community skills for its stack?"); return; }
+            if (e.target.closest("[data-proj-autoskills]")) { autoskillsFlow(); return; }
             const chip = e.target.closest("[data-pskill]"); // per-app deploy chip in the Skills view
             if (chip) { projAction({ op: "skill", name: chip.dataset.pskill, agent: chip.dataset.pagent, on: chip.dataset.poff !== "1" }); return; }
             const sk = e.target.closest("[data-proj-skill]");

package/package.json

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