@enigmax/dashboard 0.1.46 → 0.1.48

package/assets/index.html

@@ -363,6 +363,9 @@
             border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-family: var(--mono);
         }
         .modal-input:focus { outline: none; border-color: var(--accent); }
+        .modal-fl { display: block; margin-top: 14px; margin-bottom: 5px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+        .modal-fl .modal-opt { text-transform: none; letter-spacing: 0; opacity: .75; }
+        .modal-fl + .modal-input { margin-top: 0; }
         /* Usage view provider/account pickers. */
         .useg-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
         .useg-pick select { width: auto; min-width: 170px; }
@@ -2778,8 +2781,19 @@ export {
         // Brand icon + text in one inline tag; the icon is omitted when there is none (e.g. content types).
         function iconLabel(ic, text) { return '<span class="srctag">' + (ic ? '<span class="aicon">' + ic + '</span>' : '') + esc(text) + '</span>'; }
 
+        let skillScope = "global"; // "global" | "project" - the same rows render in both
         function skillRow(s) {
             const ver = s.version ? '<span class="tag">v' + esc(s.version) + "</span>" : "";
+            // Project scope: same row, but the per-app chips toggle deployment INTO this project
+            // (data-pskill, handled by the scope delegate) and the global-only controls are hidden.
+            if (skillScope === "project") {
+                const chips = (s.agentStates || []).map((a) =>
+                    '<button type="button" class="achip' + (a.deployed ? " on" : "") + '" data-pskill="' + esc(s.name) + '" data-pagent="' + esc(a.name) + '" data-poff="' + (a.deployed ? 1 : 0) + '" aria-label="' + esc(a.label) + '" title="'
+                    + (a.deployed ? esc(a.label) + " - deployed, click to remove" : esc(a.label) + " - not deployed, click to deploy") + '">' + (agentSvg(a.name) || esc(a.label)) + "</button>").join("");
+                return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(s.name) + ver + "</div>"
+                    + '<div class="set-hint">' + esc(s.description || "") + "</div>"
+                    + '<div class="set-agents">' + (chips || '<span class="tag">no agents</span>') + "</div></div></div>";
+            }
             // Last-edited date (from skill.json), shown relative via the vendored <relative-time>.
             const edited = s.updated ? '<span class="tag" title="Last edited ' + esc(new Date(s.updated).toLocaleString()) + '">edited '
                 + rtime(new Date(s.updated).getTime(), 'format="relative"', new Date(s.updated).toLocaleDateString()) + "</span>" : "";
@@ -2828,11 +2842,15 @@ export {
         let lastSkills = [];
         function renderSkills(skills) {
             lastSkills = skills; // kept so the editor can offer per-app save targets
-            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>";
+            if (skillScope === "project") {
+                $("skillsBody").innerHTML = section("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;
+            }
+            const enigma = skills.filter((s) => s.source === "enigma");
+            const ext = skills.filter((s) => s.source === "external");
             $("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.");
@@ -2942,6 +2960,7 @@ export {
         let skillsLoaded = false;
         async function loadSkills() {
             if (isProjectScope()) return loadProjectSkills();
+            skillScope = "global";
             loadSkillSettings();
             try {
                 const res = await fetch("/api/skills", { cache: "no-store" });
@@ -3208,21 +3227,74 @@ export {
             catch { projectsCache = []; }
             populateScopeSelector();
         }
-        async function openCreateProject() {
-            const path = await askText("Create new project", "", "Absolute path to the project folder (its name becomes the label):",
-                (v) => /^(\/|[A-Za-z]:[\\/]|\\\\)/.test(v) ? null : "Enter an absolute path, e.g. /home/you/app or C:\\path\\to\\app.");
-            if (!path) return;
-            const before = new Set(projectsCache.map((p) => p.path));
-            let out;
-            try { out = await (await fetch("/api/projects", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ op: "add", path }) })).json(); }
-            catch { await openModal({ title: "Could not add project", message: "Could not reach the server." }); return; }
-            if (!out.ok) { await openModal({ title: "Could not add project", message: out.error || "That path could not be added." }); return; }
-            projectsCache = out.projects || projectsCache;
-            const added = projectsCache.find((p) => !before.has(p.path)) || projectsCache[projectsCache.length - 1];
-            currentScope = added ? added.path : "global";
-            try { localStorage.setItem("enigmaScope", currentScope); } catch { /* */ }
-            populateScopeSelector();
-            location.hash = "#/settings"; route();
+        function baseName(p) { return (p || "").trim().replace(/[\\/]+$/, "").split(/[\\/]/).pop() || ""; }
+        function openCreateProject() {
+            const back = document.createElement("div");
+            back.className = "modal-back";
+            back.innerHTML =
+                '<div class="modal" role="dialog" aria-modal="true">'
+                + '<div class="modal-title">Create new project</div>'
+                + '<label class="modal-fl">Path</label><input class="modal-input" data-f="path" placeholder="/home/you/project" autocomplete="off" spellcheck="false">'
+                + '<div class="modal-err" data-e="path"></div>'
+                + '<label class="modal-fl">Name</label><input class="modal-input" data-f="name" placeholder="project name" autocomplete="off" spellcheck="false">'
+                + '<div class="modal-err" data-e="name"></div>'
+                + '<label class="modal-fl">Description <span class="modal-opt">(optional)</span></label><input class="modal-input" data-f="desc" placeholder="what this project is" autocomplete="off">'
+                + '<div class="modal-acts"><button type="button" class="toggle modal-cancel">Cancel</button><button type="button" class="toggle on modal-ok" disabled>Create</button></div></div>';
+            document.body.appendChild(back);
+            requestAnimationFrame(() => back.classList.add("show"));
+            const $f = (s) => back.querySelector(s);
+            const pathInp = $f('[data-f="path"]'), nameInp = $f('[data-f="name"]'), descInp = $f('[data-f="desc"]');
+            const pathErr = $f('[data-e="path"]'), nameErr = $f('[data-e="name"]'), okBtn = $f(".modal-ok");
+            let nameEdited = false, pathOk = false, nameOk = false, reqId = 0, debounce;
+            let done = false;
+            const close = () => { if (done) return; done = true; back.classList.remove("show"); setTimeout(() => back.remove(), 200); };
+            const refreshOk = () => { okBtn.disabled = !(pathOk && nameOk); };
+            // Name: required + not a duplicate (checked live against the loaded list; the server re-checks on add).
+            const checkName = () => {
+                const nm = nameInp.value.trim();
+                if (!nm) { nameErr.textContent = "Enter a name."; nameOk = false; }
+                else if (projectsCache.some((p) => p.label.toLowerCase() === nm.toLowerCase())) { nameErr.textContent = "A project with this name already exists."; nameOk = false; }
+                else { nameErr.textContent = ""; nameOk = true; }
+                refreshOk();
+            };
+            // Path: client format check, then a debounced server check (exists on disk + not already a project).
+            const validatePath = async () => {
+                const myId = ++reqId, path = pathInp.value.trim();
+                try {
+                    const out = await (await fetch("/api/projects", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ op: "validate", path }) })).json();
+                    if (myId !== reqId) return; // a newer keystroke superseded this
+                    pathErr.textContent = out.pathError || ""; pathOk = !out.pathError; refreshOk();
+                } catch { /* keep the client-side state */ }
+            };
+            const onPath = () => {
+                const path = pathInp.value.trim();
+                if (!nameEdited) { nameInp.value = baseName(path); checkName(); }
+                if (!path) { pathErr.textContent = "Enter a path."; pathOk = false; refreshOk(); return; }
+                if (!/^(\/|[A-Za-z]:[\\/]|\\\\)/.test(path)) { pathErr.textContent = "Enter an absolute path (e.g. /home/you/app or C:\\path)."; pathOk = false; refreshOk(); return; }
+                pathErr.textContent = "Checking..."; pathOk = false; refreshOk();
+                clearTimeout(debounce); debounce = setTimeout(validatePath, 300);
+            };
+            pathInp.addEventListener("input", onPath);
+            nameInp.addEventListener("input", () => { nameEdited = true; checkName(); });
+            back.querySelector(".modal-cancel").addEventListener("click", close);
+            back.addEventListener("mousedown", (e) => { if (e.target === back) close(); });
+            back.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); close(); } else if (e.key === "Enter" && !okBtn.disabled) { e.preventDefault(); okBtn.click(); } });
+            okBtn.addEventListener("click", async () => {
+                if (okBtn.disabled) return;
+                const before = new Set(projectsCache.map((p) => p.path));
+                let out;
+                try { out = await (await fetch("/api/projects", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ op: "add", path: pathInp.value.trim(), name: nameInp.value.trim(), description: descInp.value.trim() }) })).json(); }
+                catch { pathErr.textContent = "Could not reach the server."; return; }
+                if (!out.ok) { pathErr.textContent = out.error || "Could not add the project."; pathOk = false; refreshOk(); return; }
+                projectsCache = out.projects || projectsCache;
+                const added = projectsCache.find((p) => !before.has(p.path)) || projectsCache[projectsCache.length - 1];
+                currentScope = added ? added.path : "global";
+                try { localStorage.setItem("enigmaScope", currentScope); } catch { /* */ }
+                populateScopeSelector();
+                close();
+                location.hash = "#/settings"; route();
+            });
+            pathInp.focus();
         }
         function wireScope() {
             const sel = $("scopeSel");
@@ -3243,7 +3315,7 @@ export {
             const asSwitch = !c.choices || (c.choices.length === 2 && c.choices.indexOf(c.offChoice) !== -1);
             const ctl = !asSwitch
                 ? '<select class="choice" data-proj-cfg="' + esc(c.key) + '">' + c.choices.map((x) => '<option value="' + esc(x) + '"' + (x === c.choice ? " selected" : "") + ">" + esc(prettyChoice(x)) + "</option>").join("") + "</select>"
-                : '<button type="button" class="toggle' + (c.value ? " on" : "") + '" data-proj-cfg-bool="' + esc(c.key) + '" data-on="' + (c.value ? 1 : 0) + '">' + (c.value ? "On" : "Off") + "</button>";
+                : '<button type="button" class="toggle' + (c.value ? " on" : "") + '" data-kind="bool" data-proj-cfg-bool="' + esc(c.key) + '" data-on="' + (c.value ? 1 : 0) + '" title="' + (c.value ? "On" : "Off") + '">' + (c.value ? "On" : "Off") + "</button>";
             const reset = c.overridden ? ' <button type="button" class="iconbtn" data-proj-cfg-reset="' + esc(c.key) + '" title="Inherit global">reset</button>' : "";
             const badge = c.overridden ? ' <span class="tag">project</span>' : ' <span class="tag">inherited</span>';
             return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(c.label) + badge + '</div><div class="set-hint">' + esc(c.hint) + "</div></div>"
@@ -3262,28 +3334,47 @@ export {
             const hooks = d.hooks ? '<span class="tag">installed</span>' : (d.isGitRepo ? '<button type="button" class="toggle on" data-proj-act="hooks">Install git hooks</button>' : '<span class="tag">not a git repo</span>');
             const gate = d.gate ? '<span class="tag">initialized</span> <button type="button" class="toggle" data-proj-act="gate-eject">Eject</button>' : '<button type="button" class="toggle on" data-proj-act="gate-init">Initialize gate</button>';
             const cfg = (d.config || []).map(projConfigRow).join("") || '<div class="empty" style="padding:8px 0">No project settings.</div>';
+            const descLine = d.description ? " &middot; " + esc(d.description) : "";
             el.innerHTML =
-                '<div class="scope-banner">Editing <b>' + esc(d.label) + "</b> &middot; " + esc(d.path) + " &middot; " + agentsLine + "</div>"
+                '<div class="scope-banner">Editing <b>' + esc(d.label) + "</b> &middot; " + esc(d.path) + descLine + " &middot; " + agentsLine + "</div>"
                 + '<div class="panel"><div class="set-cat-h">Setup</div><div class="set-grid">'
                 + '<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">Manage</div><div class="set-grid"><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>';
+                + '<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>";
+        }
+        async function saveProjectMeta() {
+            if (!isProjectScope()) return;
+            const nameInp = document.querySelector("[data-proj-name]"), descInp = document.querySelector("[data-proj-desc]");
+            const name = nameInp ? nameInp.value.trim() : undefined, description = descInp ? descInp.value.trim() : "";
+            try {
+                const out = await (await fetch("/api/projects", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ op: "update", path: currentScope, name, description }) })).json();
+                if (!out.ok) { setNote("settingsNote", out.error || "Could not save.", "err"); return; }
+                projectsCache = out.projects || projectsCache;
+                populateScopeSelector(); // reflect the renamed project in the selector
+                setNote("settingsNote", "Saved.", "ok");
+                loadProjectSettings();
+            } catch { setNote("settingsNote", "Could not reach the server.", "err"); }
         }
         async function loadProjectSkills() {
+            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>';
             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; }
-            const deployed = new Set(); (d.agents || []).forEach((a) => (a.deployed || []).forEach((s) => deployed.add(s)));
-            const rows = (d.available || []).map((s) => {
-                const on = deployed.has(s.name);
-                return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(s.name) + '</div><div class="set-hint">' + esc(s.description || "") + "</div></div>"
-                    + '<div class="set-ctl"><button type="button" class="toggle' + (on ? " on" : "") + '" data-proj-skill="' + esc(s.name) + '" data-on="' + (on ? 1 : 0) + '">' + (on ? "On" : "Off") + "</button></div></div>";
-            }).join("") || '<div class="empty" style="padding:8px 0">No skills.</div>';
-            el.innerHTML = '<div class="scope-banner">Skills for <b>' + esc(d.label) + "</b> &middot; deploy or remove for this project</div>"
-                + '<div class="panel"><div class="set-grid">' + rows + "</div></div>";
+            // Build the SAME skill objects renderSkills/skillRow use globally; agentStates carries
+            // this project's per-app deployment so the rows render identically (chips per app).
+            const agents = d.agents || [];
+            const skills = (d.available || []).map((s) => ({
+                name: s.name, description: s.description, source: "enigma",
+                agentStates: agents.map((a) => ({ name: a.name, label: a.label, deployed: (a.deployed || []).indexOf(s.name) !== -1 })),
+            }));
+            renderSkills(skills);
         }
         async function projAction(payload, confirmMsg) {
             if (!isProjectScope()) return;
@@ -3308,12 +3399,15 @@ export {
         }
         function onProjectControlClick(e) {
             if (!isProjectScope()) 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]");
             if (sk) { projAction({ op: "skill", name: sk.dataset.projSkill, on: sk.dataset.on !== "1" }); return; }
             const cb = e.target.closest("[data-proj-cfg-bool]");
             if (cb) { projAction({ op: "config-set", key: cb.dataset.projCfgBool, value: cb.dataset.on !== "1" }); return; }
             const rs = e.target.closest("[data-proj-cfg-reset]");
             if (rs) { projAction({ op: "config-unset", key: rs.dataset.projCfgReset }); return; }
+            if (e.target.closest("[data-proj-save-meta]")) { saveProjectMeta(); return; }
             if (e.target.closest("[data-proj-forget]")) { forgetProject(); return; }
             const act = e.target.closest("[data-proj-act]");
             if (act) {

package/package.json

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