@enigmax/dashboard 0.1.98 → 0.1.99

package/assets/index.html

@@ -200,8 +200,6 @@
         .set-cat { margin-bottom: 18px; }
         .set-cat:last-child { margin-bottom: 0; }
         .set-cat-h { font-family: var(--mono); color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
-        /* A path in a header is a literal: uppercasing it prints something that does not exist. */
-        .set-cat-h code { text-transform: none; letter-spacing: 0; }
         .set-cat-b { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
         .set-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--surface2); }
         .set-row:last-child { border-bottom: none; }
@@ -510,6 +508,11 @@
             width: 100%; min-height: 300px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
             resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2;
         }
+        /* The model row grows a text field and a Save when "Custom" is picked. That cluster does
+           not fit a grid column beside its label (`.set-ctl` never shrinks), so the row takes the
+           full grid width while it is showing and its controls wrap instead of squeezing the label. */
+        #gateModelRow.wide { grid-column: 1 / -1; }
+        #gateModelRow .set-ctl { flex-wrap: wrap; justify-content: flex-end; }
         .gate-run { padding: 13px 0; border-top: 1px solid var(--border-soft); }
         .gate-run:first-child { border-top: 0; padding-top: 4px; }
         .gate-run-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@@ -594,6 +597,17 @@
         }
         .modal-back.show .modal { transform: none; opacity: 1; }
         .modal.wide { max-width: 900px; }
+        /* Info dialog: the paths and links a panel would otherwise print in its header. */
+        .modal.info { max-width: 560px; }
+        .info-row { padding: 10px 0; border-top: 1px solid var(--surface2); }
+        .info-row:first-of-type { border-top: none; }
+        .info-k { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
+        .info-v { display: flex; align-items: center; gap: 8px; }
+        /* A path is a literal that must stay readable: it wraps rather than overflowing the dialog. */
+        .info-v code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
+        .info-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
+        .info-links a { color: var(--accent); font-size: 12px; text-decoration: none; }
+        .info-links a:hover { text-decoration: underline; }
         /* Command palette: the same backdrop and surface as every other dialog, sat in the top
            third so the result list grows downwards without moving the input under the caret. */
         /* The palette lives in the markup instead of being created per open, so it needs this:
@@ -1075,6 +1089,7 @@
                 <h1>Quality gate</h1>
                 <p>The pipeline your agent drives before a change reaches the push target: review, tests, docs, lint, PR and CI. Switch the scope selector to a project to see that repository's runs and its own config.</p>
             </div>
+            <button id="gateInfo" type="button" class="iconbtn" title="Where this is configured" aria-label="Where the gate is configured"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></button>
             <button id="gateRefresh" type="button" class="iconbtn" title="Refresh" aria-label="Refresh the gate view"><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 class="gate-bar">
@@ -1098,7 +1113,7 @@
         </div>
 
         <div class="panel" id="gateSetPanel">
-            <div class="set-cat-h">Pipeline settings <code id="gateCfgPath"></code></div>
+            <div class="set-cat-h">Pipeline settings</div>
             <div class="sub" style="margin-bottom:10px">What the daemon runs and how hard it tries. Model and auto-fix limits are what a run's duration and token cost actually hang on.</div>
             <div class="set-grid">
                 <div class="set-row">
@@ -1128,8 +1143,8 @@
         </div>
 
         <div class="panel">
-            <div class="set-cat-h">Global configuration <code class="gate-cfg-path"></code></div>
-            <div class="sub" style="margin-bottom:10px">The same file as raw YAML, for the keys with no control above (agent paths, ACP targets, ignore patterns, evidence). Saved only when it parses, so a typo here never reaches the daemon.</div>
+            <div class="set-cat-h">Global configuration</div>
+            <div class="sub" style="margin-bottom:10px">The global config as raw YAML, for the keys with no control above (agent paths, ACP targets, ignore patterns, evidence). Saved only when it parses, so a typo here never reaches the daemon.</div>
             <textarea id="gateCfg" class="linput gate-yaml" spellcheck="false" autocapitalize="none" autocorrect="off" aria-label="Global gate configuration"></textarea>
             <div class="ladd" style="gap:8px;align-items:center">
                 <button id="gateCfgSave" type="button" class="toggle on" disabled title="No changes to save">Save</button>
@@ -1138,7 +1153,7 @@
         </div>
 
         <div class="panel" id="gateRepoPanel" style="display:none">
-            <div class="set-cat-h">Repository configuration <code id="gateRepoCfgPath"></code></div>
+            <div class="set-cat-h">Repository configuration</div>
             <div class="sub" style="margin-bottom:10px">Committed with the repository and merged over the global config. Only the fields the gate trusts from a branch take effect.</div>
             <textarea id="gateRepoCfg" class="linput gate-yaml" spellcheck="false" autocapitalize="none" autocorrect="off" aria-label="Repository gate configuration"></textarea>
             <div class="ladd" style="gap:8px;align-items:center">
@@ -3423,6 +3438,55 @@ export {
         const askIconChoice = (title, iconOptions, value, message) => openModal({ title, message, field: { iconOptions, value } });
         const askConfirm = (title, message, danger) => openModal({ title, message, danger, okLabel: danger ? "Remove" : "OK" }).then(Boolean);
 
+        const COPY_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        const CHECK_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="M20 6 9 17l-5-5"/></svg>';
+        /** Copies `text`, with the button confirming it; falls back to execCommand where the clipboard API is blocked. */
+        function copyToClipboard(text, btn) {
+            const done = () => {
+                toast.success("Copied");
+                if (!btn) return;
+                const before = btn.innerHTML;
+                btn.innerHTML = CHECK_ICON;
+                setTimeout(() => { btn.innerHTML = before; }, 1200);
+            };
+            (navigator.clipboard ? navigator.clipboard.writeText(text) : Promise.reject()).then(done).catch(() => {
+                const ta = document.createElement("textarea");
+                ta.value = text; document.body.appendChild(ta); ta.select();
+                try { document.execCommand("copy"); done(); } catch { toast.error("Copy failed"); }
+                document.body.removeChild(ta);
+            });
+        }
+
+        // Read-only dialog behind an info icon: the paths and links a panel header would otherwise
+        // print inline. Rows are labelled literals with a copy action; a row with no value is dropped.
+        function openInfoModal({ title, intro, rows, note, links }) {
+            const back = document.createElement("div");
+            back.className = "modal-back";
+            const list = (rows || []).filter((r) => r && r.value).map((r) =>
+                '<div class="info-row"><div class="info-k">' + esc(r.label) + "</div>"
+                + '<div class="info-v"><code>' + esc(r.value) + "</code>"
+                + '<button type="button" class="iconbtn" data-copy="' + esc(r.value) + '" title="Copy" aria-label="Copy the ' + esc(r.label.toLowerCase()) + '">' + COPY_ICON + "</button></div>"
+                + (r.hint ? '<div class="set-hint">' + esc(r.hint) + "</div>" : "") + "</div>").join("");
+            back.innerHTML = '<div class="modal info" role="dialog" aria-modal="true">'
+                + '<div class="modal-title">' + esc(title) + "</div>"
+                + (intro ? '<div class="modal-msg">' + esc(intro) + "</div>" : "")
+                + list
+                + (note ? '<div class="set-hint" style="margin-top:12px">' + esc(note) + "</div>" : "")
+                + ((links || []).length
+                    ? '<div class="info-links">' + links.map((l) => '<a href="' + esc(l.href) + '" target="_blank" rel="noopener noreferrer">' + esc(l.label) + "</a>").join("") + "</div>"
+                    : "")
+                + '<div class="modal-acts"><button type="button" class="toggle on modal-ok">Close</button></div></div>';
+            document.body.appendChild(back);
+            requestAnimationFrame(() => back.classList.add("show"));
+            let done = false;
+            const close = () => { if (done) return; done = true; back.classList.remove("show"); setTimeout(() => back.remove(), 200); };
+            back.querySelector(".modal-ok").addEventListener("click", close);
+            back.addEventListener("mousedown", (e) => { if (e.target === back) close(); });
+            back.addEventListener("keydown", (e) => { if (e.key === "Escape" || e.key === "Enter") { e.preventDefault(); close(); } });
+            back.querySelectorAll("[data-copy]").forEach((b) => b.addEventListener("click", () => copyToClipboard(b.dataset.copy, b)));
+            back.querySelector(".modal-ok").focus();
+        }
+
         // Turn "(experimental)" and " · measured/experimental" label suffixes into visual badges.
         function labelWithBadges(text) {
             let name = String(text);
@@ -4322,6 +4386,26 @@ export {
         // is Bun-only), so an unavailable history reports itself instead of blanking the page.
         const gateSaved = { global: "", repo: "" };
         let gateWritable = true;
+        // Where the gate keeps its files, kept for the info dialog instead of printed in the headers.
+        let gateWhere = { global: "", repo: "", root: "", note: "" };
+        const GATE_DOCS_URL = "https://fjrg2007.github.io/enigma/docs/concepts/gate";
+        const GATE_COMMANDS_URL = "https://fjrg2007.github.io/enigma/docs/reference/commands";
+        function openGateInfo() {
+            openInfoModal({
+                title: "Gate configuration",
+                intro: "Where the gate reads its settings and keeps its run history.",
+                rows: [
+                    { label: "Global config", value: gateWhere.global, hint: "applies to every repository" },
+                    { label: "Repository config", value: gateWhere.repo, hint: "committed with the repository, merged over the global config" },
+                    { label: "Gate home", value: gateWhere.root, hint: "run database, logs and the daemon pid file" },
+                ],
+                note: gateWhere.note,
+                links: [
+                    { label: "Gate documentation", href: GATE_DOCS_URL },
+                    { label: "Command reference", href: GATE_COMMANDS_URL },
+                ],
+            });
+        }
         function gateEls(which) {
             return which === "global"
                 ? { area: $("gateCfg"), btn: $("gateCfgSave"), note: "gateCfgNote" }
@@ -4407,7 +4491,12 @@ export {
         const GATE_MODEL_CUSTOM = "__custom__";
         let gateSavedModel = "";
 
-        /** Rebuilds the model dropdown for `agent` and selects `model` (empty = the agent default). */
+        /**
+         * Rebuilds the model dropdown for `agent` and selects `model` (empty = the agent default).
+         * `agent` must be the RESOLVED agent: the backend reads and writes the model on whatever
+         * `auto` probed to, so keying the list off the declared name left every stored model under
+         * `agent: auto` falling through to "Custom".
+         */
         function renderGateModel(agent, model) {
             const sel = $("gateModelSel"), inp = $("gateModel");
             const opts = [["", "auto (agent default)"]].concat(GATE_MODELS[agent] || [], [[GATE_MODEL_CUSTOM, "Custom model id..."]]);
@@ -4424,6 +4513,8 @@ export {
             const custom = $("gateModelSel").value === GATE_MODEL_CUSTOM;
             $("gateModel").style.display = custom ? "" : "none";
             $("gateModelSave").style.display = custom ? "" : "none";
+            // Select + field + Save is wider than one settings column; the row takes the full width.
+            $("gateModelRow").classList.toggle("wide", custom);
             syncGateModelSave();
         }
         /** No-op rule: nothing to save while the typed id still equals the stored one. */
@@ -4449,7 +4540,7 @@ export {
                 ? "auto: first agent found on PATH - currently " + s.agentResolved
                 : "which coding agent the pipeline drives";
             $("gateModelRow").style.display = s.modelSupported ? "" : "none";
-            renderGateModel(s.agent, s.model || "");
+            renderGateModel(s.agentResolved || s.agent, s.model || "");
             $("gateModelHint").textContent = "passed to " + s.agentResolved
                 + " on every step; a smaller model is the one change that cuts both run time and tokens";
             $("gateCiTimeout").value = s.ciTimeout || "";
@@ -4486,9 +4577,14 @@ export {
                 : '<div class="empty" style="padding:12px 0">' + (g.runsAvailable === false ? esc(g.runsNote || "Run history unavailable.") : (repo ? "No runs recorded for this repository yet." : "No run in flight.")) + "</div>";
             gatePoll();
             if (live) return;
-            const cfgPath = (g.globalConfig || {}).path || "";
-            $("gateCfgPath").textContent = cfgPath;
-            for (const el of document.querySelectorAll(".gate-cfg-path")) el.textContent = cfgPath;
+            // The paths are not header decoration: they live behind the info icon, which is the
+            // only place they are worth the room.
+            gateWhere = {
+                global: (g.globalConfig || {}).path || "",
+                repo: repo ? (repo.configPath || "") : "",
+                root: g.root || "",
+                note: g.canWrite === false ? (g.writeNote || "") : "",
+            };
             gateSaved.global = (g.globalConfig || {}).text || "";
             $("gateCfg").value = gateSaved.global;
             // A runtime that cannot parse a gate config must not write one: read-only, with the reason.
@@ -4500,7 +4596,6 @@ export {
             renderGateSettings(g.settings);
             $("gateRepoPanel").style.display = repo ? "" : "none";
             if (repo) {
-                $("gateRepoCfgPath").textContent = repo.configPath || "";
                 gateSaved.repo = repo.text || "";
                 $("gateRepoCfg").value = gateSaved.repo;
                 syncGateSave("repo");
@@ -4590,6 +4685,7 @@ export {
             await loadGate();
         }
         $("gateRefresh").addEventListener("click", () => loadGate());
+        $("gateInfo").addEventListener("click", openGateInfo);
         $("gateCfg").addEventListener("input", () => syncGateSave("global"));
         $("gateRepoCfg").addEventListener("input", () => syncGateSave("repo"));
         $("gateCfgSave").addEventListener("click", () => saveGateCfg("global"));
@@ -5394,7 +5490,6 @@ export {
             // The button is an icon, so the toast is not the only confirmation: swap the icon for a
             // check on the control itself, then restore the captured original markup.
             const copyIcon = copyBtn.innerHTML;
-            const CHECK_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="M20 6 9 17l-5-5"/></svg>';
             let copyTimer = null;
             const copied = () => {
                 toast.success("Copied curl");

package/package.json

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