@enigmax/dashboard 0.1.4 → 0.1.6

package/assets/index.html

@@ -13,7 +13,7 @@
         body {
             margin: 0; background: var(--bg); color: var(--text);
             font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-            -webkit-font-smoothing: antialiased; padding: 24px; max-width: 1040px; margin: 0 auto;
+            -webkit-font-smoothing: antialiased; padding: 24px; max-width: 2200px; margin: 0 auto;
         }
         a { color: var(--accent2); }
         header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
@@ -108,12 +108,18 @@
             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; }
+        /* Settings: two-column grid of rows on wide screens, so a long config list stays compact. */
+        .set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 32px; }
+        .set-grid .set-row { padding: 10px 0; }
+        .panel > .set-cat-h { margin-top: 0; }
         .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); }
+        .tag.exp { color: var(--accent); border-color: var(--accent); background: rgba(224,164,88,0.10); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
+        .tag.meas { color: var(--good); border-color: var(--good); background: rgba(111,207,151,0.10); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
         .editor {
             width: 100%; min-height: 360px; resize: vertical; background: var(--surface2); color: var(--text);
             border: 1px solid var(--border); border-radius: 8px; padding: 12px;
@@ -175,7 +181,10 @@
         <div class="panel">
             <div class="panel-head">
                 <h2>Enigma Systems <small>what's active - configuration, not savings</small></h2>
-                <div class="ctrls"><button id="updateBtn" type="button" class="toggle on">Check &amp; update</button></div>
+                <div class="ctrls">
+                    <button id="refreshBtn" type="button" class="toggle">Refresh</button>
+                    <button id="updateBtn" type="button" class="toggle on">Check &amp; update</button>
+                </div>
             </div>
             <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>
@@ -293,11 +302,9 @@
         <div class="page-head">
             <h1>Settings</h1>
             <p>Everything you can configure with <code>enigma config</code> or the terminal UI, editable here. Changes apply at global scope and take effect immediately; toggles that change agent memory need an agent restart.</p>
-        </div>
-        <div class="panel">
-            <div id="settingsBody"><div class="empty" style="padding:24px 0">Loading settings...</div></div>
             <div id="settingsNote" class="set-note"></div>
         </div>
+        <div id="settingsBody"><div class="empty" style="padding:24px 0">Loading settings...</div></div>
     </section>
 
     <footer>
@@ -644,9 +651,14 @@
             $("updated").textContent = "Updated " + new Date(data.generatedAt || Date.now()).toLocaleTimeString();
         }
 
-        async function poll() {
-            // Headroom pattern: never hit the server while the tab is hidden.
+        // Auto-refresh is on by default while the tab is focused; `live` mirrors the
+        // dashboard-live config (read from /api/status). A forced refresh (button / view
+        // change) always runs so the user can refresh even with auto-refresh off.
+        let live = true;
+        async function poll(force) {
+            // Never hit the server while the tab is hidden, or when auto-refresh is off (unless forced).
             if (document.hidden) return;
+            if (!live && !force) return;
             try {
                 const res = await fetch("/api/stats", { cache: "no-store" });
                 render(await res.json());
@@ -659,6 +671,15 @@
         // --- settings subpage (mirrors the TUI registry over /api/settings) ---
         function esc(s) { return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c])); }
 
+        // Turn "(experimental)" and " · measured/experimental" label suffixes into visual badges.
+        function labelWithBadges(text) {
+            let name = String(text);
+            const badges = [];
+            if (/\(experimental\)/i.test(name)) { name = name.replace(/\s*\(experimental\)/i, ""); badges.push(["experimental", "exp"]); }
+            name = name.replace(/\s*·\s*(measured|experimental)\b/gi, (_, w) => { badges.push([w.toLowerCase(), w.toLowerCase() === "experimental" ? "exp" : "meas"]); return ""; });
+            return esc(name) + badges.map(([t, c]) => ' <span class="tag ' + c + '">' + esc(t) + "</span>").join("");
+        }
+
         function settingRow(s) {
             const ctl = s.choices
                 ? '<select class="choice" data-skey="' + esc(s.key) + '">'
@@ -666,7 +687,7 @@
                     + "</select>"
                 : '<button type="button" class="toggle' + (s.value ? " on" : "") + '" data-skey="' + esc(s.key)
                     + '" data-kind="bool" data-on="' + (s.value ? 1 : 0) + '">' + (s.value ? "On" : "Off") + "</button>";
-            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(s.label) + "</div>"
+            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + labelWithBadges(s.label) + "</div>"
                 + '<div class="set-hint">' + esc(s.hint) + (s.globalOnly ? " · global" : "") + "</div></div>"
                 + '<div class="set-ctl">' + ctl + "</div></div>";
         }
@@ -674,9 +695,11 @@
         function renderSettings(cats) {
             const el = $("settingsBody");
             if (!cats.length) { el.innerHTML = '<div class="empty" style="padding:24px 0">No settings available.</div>'; return; }
-            el.innerHTML = cats.map((c) => '<div class="set-cat"><div class="set-cat-h">' + esc(c.title) + "</div>"
+            // One panel per category; settings laid out in a responsive 2-column grid so a
+            // long config list stays scannable on a wide screen.
+            el.innerHTML = cats.map((c) => '<div class="panel"><div class="set-cat-h">' + esc(c.title) + "</div>"
                 + (c.blurb ? '<div class="set-cat-b">' + esc(c.blurb) + "</div>" : "")
-                + c.settings.map(settingRow).join("") + "</div>").join("");
+                + '<div class="set-grid">' + c.settings.map(settingRow).join("") + "</div></div>").join("");
         }
 
         async function postSetting(key, value, ctl) {
@@ -720,7 +743,7 @@
         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 item = (k, v) => '<div class="sys-item"><span class="k">' + labelWithBadges(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>"
@@ -753,19 +776,28 @@
             try {
                 const res = await fetch("/api/update", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" });
                 const out = await res.json();
-                $("updateNote").textContent = out.ok ? (out.note || "Updated.") : ("Update failed: " + (out.error || "error"));
-                loadSystems();
-                if (skillsLoaded) loadSkills();
+                if (!out.ok) { $("updateNote").textContent = "Update failed: " + (out.error || "error"); return; }
+                // The UI bundle may have been refreshed server-side; reload so the browser
+                // picks up the new dashboard and fresh data automatically.
+                $("updateNote").textContent = (out.note || "Updated.") + " Refreshing the dashboard...";
+                setTimeout(() => location.reload(), 1200);
             } catch { $("updateNote").textContent = "Could not reach the server to update."; }
         }
 
-        async function loadSystems() {
+        async function loadSystems(force) {
+            if (!live && !force) return;
             try {
                 const r = await fetch("/api/status", { cache: "no-store" });
-                renderSystems((await r.json()).systems);
+                const sys = (await r.json()).systems;
+                if (sys) live = sys.live !== false; // pick up the dashboard-live config
+                renderSystems(sys);
             } catch { $("systems").innerHTML = '<div class="empty" style="padding:16px 0">Status unavailable.</div>'; }
         }
 
+        function onSavings() { const h = (location.hash || "").replace(/^#\/?/, ""); return h !== "settings" && h !== "skills"; }
+        // One refresh of everything visible on the Savings view; `force` ignores auto-refresh-off.
+        function refreshAll(force) { poll(force); if (onSavings()) loadSystems(force); }
+
         // --- skills subpage (lists enigma + external skills over /api/skills) ---
         function skillRow(s) {
             const ver = s.version ? '<span class="tag">v' + esc(s.version) + "</span>" : "";
@@ -871,16 +903,17 @@
             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") { loadSystems(); if (chart) { try { applyRange(); } catch { /* not ready */ } } }
+            if (v === "savings") { loadSystems(true); if (chart) { try { applyRange(); } catch { /* not ready */ } } }
         }
 
         initChart();
-        poll();
-        setInterval(poll, POLL_MS);
-        document.addEventListener("visibilitychange", () => { if (!document.hidden) poll(); });
+        poll(true);
+        setInterval(() => refreshAll(false), POLL_MS);
+        document.addEventListener("visibilitychange", () => { if (!document.hidden) refreshAll(true); });
         wireSettings();
         wireSkills();
         $("updateBtn").addEventListener("click", runUpdate);
+        $("refreshBtn").addEventListener("click", () => refreshAll(true));
         window.addEventListener("hashchange", route);
         route();
     </script>

package/package.json

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