@enigmax/dashboard 0.1.9 → 0.1.11

package/assets/index.html

@@ -306,6 +306,9 @@
                     <div>Projected <b id="uBlockProj">-</b></div>
                 </div>
             </div>
+            <div id="uProviders" class="sub" style="margin:4px 0 0"></div>
+            <h2 style="margin:18px 0 10px">By Account <small>per Claude login</small></h2>
+            <div id="uByAccount"></div>
             <h2 style="margin:18px 0 10px">By Model</h2>
             <div id="uByModel"></div>
             <h2 style="margin:18px 0 10px">By Project</h2>
@@ -542,21 +545,36 @@
             const reset = w.kind === "session"
                 ? (w.resetsAt ? "Resets " + fmtResetIn(w.resetsAt) : "No active session")
                 : (w.resetsAt ? fmtResetAt(w.resetsAt) : "");
-            let body;
-            if (sub === "weeklySonnet" && (w.used || 0) === 0) {
-                body = '<div class="wval muted">You haven\'t used Sonnet yet</div>';
-            } else if (w.pct != null) {
-                const p = Math.round(w.pct);
-                const col = w.pct >= 90 ? "var(--accent2)" : "var(--accent)";
-                body = '<div class="wval">' + p + '% used</div>'
-                    + '<div class="bar-track" style="margin-top:8px"><div class="bar-fill" style="width:' + Math.min(100, w.pct) + '%;background:' + col + '"></div></div>';
+            const live = w.live ? ' <span class="tag meas">live</span>' : "";
+            const span = w.kind === "session" ? 5 * 3600000 : 7 * 86400000;
+            const head = '<div class="wcard"><div class="wtitle">' + esc(w.label) + live + '</div><div class="wreset">' + esc(reset) + '</div>';
+            if (sub === "weeklySonnet" && (w.used || 0) === 0 && w.pct == null) {
+                return head + '<div class="wval muted">You haven\'t used Sonnet yet</div></div>';
+            }
+            // Every card shows a bar: the real usage % when known (live or vs a set limit),
+            // otherwise how much of the window has elapsed in time - so the weekly card has a
+            // bar even before the proxy has captured live limits.
+            let barPct, barCol, barNote, valLine;
+            if (w.pct != null) {
+                barPct = Math.min(100, w.pct);
+                barCol = w.pct >= 90 ? "var(--accent2)" : "var(--accent)";
+                barNote = (w.live ? "live · " : "") + fmt(w.used || 0) + " tok";
+                valLine = Math.round(w.pct) + "% used";
+            } else if (w.resetsAt) {
+                const start = w.resetsAt - span;
+                barPct = Math.max(0, Math.min(100, (Date.now() - start) / span * 100));
+                barCol = "var(--muted)";
+                barNote = "window " + Math.round(barPct) + "% elapsed";
+                valLine = fmt(w.used || 0) + " tok";
             } else {
-                body = '<div class="wval">' + fmt(w.used || 0) + ' tok</div>'
-                    + '<div class="wset"><input type="number" min="0" class="wlimit" data-plan="' + sub + '" placeholder="set limit (tokens)">'
-                    + '<button type="button" class="laddb" data-plan="' + sub + '">Set</button></div>';
+                barPct = 0; barCol = "var(--muted)"; barNote = ""; valLine = fmt(w.used || 0) + " tok";
             }
-            const live = w.live ? ' <span class="tag meas">live</span>' : "";
-            return '<div class="wcard"><div class="wtitle">' + esc(w.label) + live + '</div><div class="wreset">' + esc(reset) + '</div>' + body + '</div>';
+            const bar = '<div class="bar-track" style="margin-top:8px"><div class="bar-fill" style="width:' + barPct + '%;background:' + barCol + '"></div></div>'
+                + (barNote ? '<div class="wreset" style="margin-top:4px">' + esc(barNote) + "</div>" : "");
+            const setter = w.pct == null
+                ? '<div class="wset"><input type="number" min="0" class="wlimit" data-plan="' + sub + '" placeholder="set limit for %"><button type="button" class="laddb" data-plan="' + sub + '">Set</button></div>'
+                : "";
+            return head + '<div class="wval">' + valLine + "</div>" + bar + setter + "</div>";
         }
         function renderWindows(u) {
             const w = u && u.windows;
@@ -599,12 +617,20 @@
         function renderRecentSessions(el, rows, pending) {
             rows = rows || [];
             if (!rows.length) { el.innerHTML = '<div class="empty" style="padding:16px 0">' + (pending ? "Scanning..." : "No sessions yet.") + "</div>"; return; }
-            el.innerHTML = '<table class="tbl"><thead><tr><th>Last active</th><th>Project</th><th>Model</th><th class="r">Input</th><th class="r">Output</th><th class="r">Cost</th></tr></thead><tbody>'
-                + rows.map((s) => '<tr><td>' + (s.lastActive ? new Date(s.lastActive).toLocaleString() : "-") + '</td><td>' + esc(shortProject(s.project)) + '</td><td>' + esc(s.model || "-")
+            el.innerHTML = '<table class="tbl"><thead><tr><th>Last active</th><th>Account</th><th>Project</th><th>Model</th><th class="r">Input</th><th class="r">Output</th><th class="r">Cost</th></tr></thead><tbody>'
+                + rows.map((s) => '<tr><td>' + (s.lastActive ? new Date(s.lastActive).toLocaleString() : "-") + '</td><td>' + esc(s.account || "default") + '</td><td>' + esc(shortProject(s.project)) + '</td><td>' + esc(s.model || "-")
                     + '</td><td class="r">' + fmt(s.input) + '</td><td class="r">' + fmt(s.output) + '</td><td class="r">' + fmtUsd(s.cost || 0) + "</td></tr>").join("")
                 + "</tbody></table>";
         }
 
+        function renderProviders(list) {
+            list = list || [];
+            const el = $("uProviders");
+            if (!list.length) { el.innerHTML = ""; return; }
+            el.innerHTML = "Providers: " + list.map((p) =>
+                '<span class="tag ' + (p.available ? "meas" : "") + '">' + esc(p.label) + (p.available ? "" : " - " + esc(p.note)) + "</span>").join("");
+        }
+
         function renderUsage(u) {
             const panel = $("usagePanel"), hint = $("usageHint");
             if (!u) { panel.style.display = "none"; hint.style.display = "block"; return; }
@@ -633,6 +659,8 @@
                 $("uBlockBurn").textContent = fmt(Math.round(b.burnRatePerMin || 0)) + " tok/min";
                 $("uBlockProj").textContent = fmt(b.projectedTokens || 0) + " · " + fmtUsd(b.projectedCost || 0);
             } else { bw.style.display = "none"; }
+            renderProviders(u.providers);
+            renderUsageTable($("uByAccount"), u.byAccount, u.pending, "Account");
             renderUsageTable($("uByModel"), u.byModel, u.pending, "Model");
             renderUsageTable($("uByProject"), u.byProject, u.pending, "Project");
             renderRecentSessions($("uRecent"), u.recentSessions, u.pending);

package/package.json

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