@enigmax/dashboard 0.1.6 → 0.1.7

package/assets/index.html

@@ -130,6 +130,17 @@
             border-radius: 7px; padding: 5px 14px; font-size: 12px; cursor: pointer; font-family: inherit;
         }
         .btn-danger:hover { border-color: var(--accent2); }
+        /* List settings (guard block/allow globs, custom secret patterns): chips + add input. A list row spans the full grid width. */
+        .set-row.list { grid-column: 1 / -1; align-items: stretch; flex-direction: column; }
+        .lchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+        .lchip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px 3px 9px; font-size: 12px; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+        .lchip .lx { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px; font-family: inherit; }
+        .lchip .lx:hover { color: var(--accent2); }
+        .lnone { color: var(--muted); font-size: 12px; margin-top: 8px; font-style: italic; }
+        .ladd { display: flex; gap: 8px; margin-top: 8px; }
+        .linput { flex: 1; min-width: 0; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+        .laddb { background: var(--surface2); color: var(--accent); border: 1px solid var(--border); border-radius: 7px; padding: 5px 14px; font-size: 12px; cursor: pointer; font-family: inherit; }
+        .laddb:hover { border-color: var(--accent); }
         .sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
         .sys-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--surface2); font-size: 13px; }
         .sys-item .k { color: var(--muted); }
@@ -148,6 +159,8 @@
         </div>
         <nav class="tabs">
             <a href="#/" data-view="savings" class="tab active">Savings</a>
+            <a href="#/usage" data-view="usage" class="tab">Usage</a>
+            <a href="#/accounts" data-view="accounts" class="tab">Accounts</a>
             <a href="#/skills" data-view="skills" class="tab">Skills</a>
             <a href="#/settings" data-view="settings" class="tab">Settings</a>
         </nav>
@@ -215,25 +228,6 @@
             <div id="chartEmpty" class="empty" style="display:none">No compression activity recorded yet. Run <code>enigma compress &lt;file&gt;</code> or enable the compression MCP (<code>enigma config compress on</code>).</div>
         </div>
 
-        <div class="panel" id="usagePanel" style="display:none">
-            <h2 style="margin-bottom:4px">Real Tool Usage <small id="usageSub">Claude Code transcripts</small></h2>
-            <div class="sub" style="margin-bottom:14px">Measured token consumption and real prompt-cache savings, read-only from your own session logs. Deliberately not attributed to skills or output-style: a transcript has no counterfactual baseline, so any such number would be invented.</div>
-            <div class="grid" style="margin-bottom:16px">
-                <div class="card"><div class="label">Cache Saved</div><div id="uCacheMoney" class="value good">-</div><div class="foot">Est. from prompt caching</div></div>
-                <div class="card"><div class="label">Cache Reads</div><div id="uCacheRead" class="value accent">-</div><div class="foot">Tokens served from cache</div></div>
-                <div class="card"><div class="label">Input Tokens</div><div id="uInput" class="value">-</div><div class="foot">Consumed across sessions</div></div>
-                <div class="card"><div class="label">Output Tokens</div><div id="uOutput" class="value">-</div><div class="foot">Generated by the agent</div></div>
-                <div class="card"><div class="label">Sessions</div><div id="uSessions" class="value">-</div><div id="uSessionsFoot" class="foot">Transcripts scanned</div></div>
-            </div>
-            <h2 style="margin:0 0 10px">By Model</h2>
-            <div id="uByModel"></div>
-        </div>
-
-        <div class="panel" id="usageHint" style="display:none">
-            <h2 style="margin-bottom:8px">Real Tool Usage <small>opt-in</small></h2>
-            <div class="sub">Show real token consumption and prompt-cache savings from your Claude Code sessions in <a href="#/settings">Settings</a> (Real tool-usage stats). enigma reads only your local session transcripts; nothing is sent anywhere.</div>
-        </div>
-
         <div class="panel">
             <h2 style="margin-bottom:14px">Savings By Source <small>which app/CLI compressed</small></h2>
             <div id="sources"></div>
@@ -276,6 +270,61 @@
         </div>
     </main>
 
+    <section id="view-usage" style="display:none">
+        <div class="page-head">
+            <h1>Claude Usage</h1>
+            <p>Measured token consumption and estimated cost, read-only from your own Claude Code session transcripts (<code>~/.claude/projects</code>). Cost is an estimate from a per-model price table; real spend is billed by Anthropic. Nothing is sent anywhere.</p>
+        </div>
+        <div class="panel" id="usagePanel" style="display:none">
+            <div class="grid" style="margin-bottom:16px">
+                <div class="card"><div class="label">Est. Cost</div><div id="uCost" class="value accent">-</div><div class="foot">All sessions, per-model pricing</div></div>
+                <div class="card"><div class="label">Cache Saved</div><div id="uCacheMoney" class="value good">-</div><div class="foot">Est. from prompt caching</div></div>
+                <div class="card"><div class="label">Input Tokens</div><div id="uInput" class="value">-</div><div class="foot">Consumed across sessions</div></div>
+                <div class="card"><div class="label">Output Tokens</div><div id="uOutput" class="value">-</div><div class="foot">Generated by the agent</div></div>
+                <div class="card"><div class="label">Cache Reads</div><div id="uCacheRead" class="value accent">-</div><div class="foot">Tokens served from cache</div></div>
+                <div class="card"><div class="label">Sessions</div><div id="uSessions" class="value">-</div><div id="uSessionsFoot" class="foot">Transcripts scanned</div></div>
+            </div>
+            <div id="uBlockWrap" style="display:none;margin-bottom:6px">
+                <h2 style="margin-bottom:10px">Current 5-hour block <small id="uBlockState"></small></h2>
+                <div class="bar-row"><span class="name" style="width:120px">Window</span><div class="bar-track"><div id="uBlockBar" class="bar-fill" style="background:var(--accent)"></div></div><span id="uBlockTime" class="num">-</span></div>
+                <div class="stat-line" style="margin:12px 0 0">
+                    <div>Tokens <b id="uBlockTokens">-</b></div>
+                    <div>Cost <b id="uBlockCost">-</b></div>
+                    <div>Burn rate <b id="uBlockBurn">-</b></div>
+                    <div>Projected <b id="uBlockProj">-</b></div>
+                </div>
+            </div>
+            <h2 style="margin:18px 0 10px">By Model</h2>
+            <div id="uByModel"></div>
+            <h2 style="margin:18px 0 10px">By Project</h2>
+            <div id="uByProject"></div>
+            <h2 style="margin:18px 0 10px">Recent Sessions</h2>
+            <div class="tbl-wrap"><div id="uRecent"></div></div>
+        </div>
+        <div class="panel" id="usageHint" style="display:none">
+            <h2 style="margin-bottom:8px">Real tool usage <small>opt-in</small></h2>
+            <div class="sub">Turn on <b>Real tool-usage stats</b> in <a href="#/settings">Settings</a> to read your Claude Code sessions for token consumption and cost. enigma reads only your local session transcripts; nothing is sent anywhere.</div>
+        </div>
+    </section>
+
+    <section id="view-accounts" style="display:none">
+        <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
+            <div style="flex:1">
+                <h1>Accounts &amp; Profiles</h1>
+                <p>Manage per-tool logins and profiles (a profile pins one account per tool and drives launches), the same as the terminal UI. Logging an account IN happens in a terminal - the browser shows the command to run.</p>
+            </div>
+        </div>
+        <div class="panel">
+            <div class="panel-head"><h2>Accounts</h2><button id="accAdd" type="button" class="toggle on">Add account</button></div>
+            <div id="accountsBody"><div class="empty" style="padding:24px 0">Loading accounts...</div></div>
+        </div>
+        <div class="panel">
+            <div class="panel-head"><h2>Profiles</h2><button id="profAdd" type="button" class="toggle on">Add profile</button></div>
+            <div id="profilesBody"><div class="empty" style="padding:24px 0">Loading profiles...</div></div>
+        </div>
+        <div id="accountsNote" class="set-note"></div>
+    </section>
+
     <section id="view-skills" style="display:none">
         <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
             <div style="flex:1">
@@ -299,11 +348,17 @@
     </section>
 
     <section id="view-settings" style="display:none">
-        <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 id="settingsNote" class="set-note"></div>
+        <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
+            <div style="flex:1">
+                <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 style="display:flex;gap:8px;white-space:nowrap">
+                <button id="cfgExport" type="button" class="toggle">Export config</button>
+                <button id="cfgImport" type="button" class="toggle">Import config</button>
+            </div>
         </div>
+        <div id="settingsNote" class="set-note"></div>
         <div id="settingsBody"><div class="empty" style="padding:24px 0">Loading settings...</div></div>
     </section>
 
@@ -458,28 +513,58 @@
         }
 
         // Real tool-usage panel (Claude Code transcripts). null = the opt-in flag is off.
+        function shortProject(p) { p = String(p || ""); return p.length > 44 ? "..." + p.slice(-41) : p; }
+
+        // One token/cost breakdown table (By Model / By Project), sorted by cost then tokens.
+        function renderUsageTable(el, map, pending, label) {
+            const entries = Object.entries(map || {}).sort((a, b) => ((b[1].cost || 0) - (a[1].cost || 0)) || ((b[1].input + b[1].output) - (a[1].input + a[1].output)));
+            if (!entries.length) { el.innerHTML = '<div class="empty" style="padding:16px 0">' + (pending ? "Scanning..." : "No usage recorded yet.") + "</div>"; return; }
+            el.innerHTML = '<table class="tbl"><thead><tr><th>' + label + '</th><th class="r">Input</th><th class="r">Output</th>'
+                + '<th class="r">Cache reads</th><th class="r">Msgs</th><th class="r">Cost</th></tr></thead><tbody>'
+                + entries.map(([k, v]) => '<tr><td>' + esc(label === "Project" ? shortProject(k) : k) + '</td><td class="r">' + fmt(v.input) + '</td><td class="r">'
+                    + fmt(v.output) + '</td><td class="r good">' + fmt(v.cacheRead) + '</td><td class="r">' + fmt(v.messages) + '</td><td class="r">' + fmtUsd(v.cost || 0) + "</td></tr>").join("")
+                + "</tbody></table>";
+        }
+
+        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 || "-")
+                    + '</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 renderUsage(u) {
             const panel = $("usagePanel"), hint = $("usageHint");
             if (!u) { panel.style.display = "none"; hint.style.display = "block"; return; }
             hint.style.display = "none";
             panel.style.display = "block";
+            $("uCost").textContent = fmtUsd(u.cost || 0);
             $("uCacheMoney").textContent = fmtUsd(cacheMoney(u.cacheRead || 0));
             $("uCacheRead").textContent = fmt(u.cacheRead || 0);
             $("uInput").textContent = fmt(u.input || 0);
             $("uOutput").textContent = fmt(u.output || 0);
             $("uSessions").textContent = fmt(u.sessions || 0);
             $("uSessionsFoot").textContent = u.pending ? "scanning sessions..." : fmt(u.scannedFiles || 0) + " files scanned";
-            const entries = Object.entries(u.byModel || {}).sort((a, b) => ((b[1].input + b[1].output) - (a[1].input + a[1].output)));
-            const el = $("uByModel");
-            if (!entries.length) {
-                el.innerHTML = '<div class="empty" style="padding:20px 0">' + (u.pending ? "Scanning session transcripts..." : "No usage recorded yet.") + "</div>";
-                return;
-            }
-            el.innerHTML = '<table class="tbl"><thead><tr><th>Model</th><th class="r">Input</th><th class="r">Output</th>'
-                + '<th class="r">Cache reads</th><th class="r">Messages</th></tr></thead><tbody>'
-                + entries.map(([m, v]) => '<tr><td>' + m + '</td><td class="r">' + fmt(v.input) + '</td><td class="r">'
-                    + fmt(v.output) + '</td><td class="r good">' + fmt(v.cacheRead) + '</td><td class="r">' + fmt(v.messages) + "</td></tr>").join("")
-                + "</tbody></table>";
+            // Current 5-hour block (computed locally from transcript timestamps).
+            const b = u.block, bw = $("uBlockWrap");
+            if (b && b.startedAt) {
+                bw.style.display = "block";
+                const now = Date.now(), total = 5 * 3600 * 1000;
+                const pct = Math.max(0, Math.min(100, Math.round((now - b.startedAt) / total * 100)));
+                $("uBlockBar").style.width = pct + "%";
+                $("uBlockState").textContent = b.active ? "active" : "window elapsed";
+                const remMin = Math.max(0, Math.round((b.endsAt - now) / 60000));
+                $("uBlockTime").textContent = b.active ? (remMin + " min left") : "ended";
+                $("uBlockTokens").textContent = fmt(b.tokens || 0);
+                $("uBlockCost").textContent = fmtUsd(b.cost || 0);
+                $("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"; }
+            renderUsageTable($("uByModel"), u.byModel, u.pending, "Model");
+            renderUsageTable($("uByProject"), u.byProject, u.pending, "Project");
+            renderRecentSessions($("uRecent"), u.recentSessions, u.pending);
         }
 
         function renderCache(c) {
@@ -681,6 +766,19 @@
         }
 
         function settingRow(s) {
+            if (s.kind === "list") {
+                const items = s.items || [];
+                const chips = items.length
+                    ? '<div class="lchips">' + items.map((it) => '<span class="lchip">' + esc(it)
+                        + '<button type="button" class="lx" title="remove" data-skey="' + esc(s.key) + '" data-item="' + esc(it) + '">x</button></span>').join("") + "</div>"
+                    : '<div class="lnone">none - using the built-in defaults</div>';
+                const adder = '<div class="ladd"><input type="text" class="linput" data-skey="' + esc(s.key)
+                    + '" placeholder="' + esc(s.itemHint || "add an entry...") + '">'
+                    + '<button type="button" class="laddb" data-skey="' + esc(s.key) + '">Add</button></div>';
+                return '<div class="set-row list"><div class="set-meta"><div class="set-name">' + labelWithBadges(s.label) + "</div>"
+                    + '<div class="set-hint">' + esc(s.hint) + (s.globalOnly ? " · global" : "") + "</div>"
+                    + chips + adder + "</div></div>";
+            }
             const ctl = s.choices
                 ? '<select class="choice" data-skey="' + esc(s.key) + '">'
                     + s.choices.map((c) => '<option value="' + esc(c) + '"' + (c === s.choice ? " selected" : "") + ">" + esc(c) + "</option>").join("")
@@ -715,16 +813,42 @@
             } catch { $("settingsNote").textContent = "Could not reach the server to change " + key + "."; }
         }
 
+        // List settings: add/remove one entry, then reload so the chips reflect disk truth.
+        async function postListOp(key, op, item) {
+            item = (item || "").trim();
+            if (!item) return;
+            $("settingsNote").textContent = (op === "add" ? "Adding to " : "Removing from ") + key + "...";
+            try {
+                const res = await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ key, value: { op, item } }) });
+                const out = await res.json();
+                if (!out.ok) { $("settingsNote").textContent = "Could not change " + key + ": " + (out.error || "error"); return; }
+                $("settingsNote").textContent = "Saved " + key + ".";
+                await loadSettings();
+            } catch { $("settingsNote").textContent = "Could not reach the server to change " + key + "."; }
+        }
+
         function wireSettings() {
             const el = $("settingsBody");
             el.addEventListener("click", (e) => {
                 const b = e.target.closest("button.toggle");
-                if (b) postSetting(b.dataset.skey, b.dataset.on !== "1", b);
+                if (b) { postSetting(b.dataset.skey, b.dataset.on !== "1", b); return; }
+                const rm = e.target.closest("button.lx");
+                if (rm) { postListOp(rm.dataset.skey, "remove", rm.dataset.item); return; }
+                const add = e.target.closest("button.laddb");
+                if (add) {
+                    const inp = el.querySelector('input.linput[data-skey="' + (window.CSS && CSS.escape ? CSS.escape(add.dataset.skey) : add.dataset.skey) + '"]');
+                    if (inp) { postListOp(add.dataset.skey, "add", inp.value); inp.value = ""; }
+                }
             });
             el.addEventListener("change", (e) => {
                 const sel = e.target.closest("select.choice");
                 if (sel) postSetting(sel.dataset.skey, sel.value, sel);
             });
+            el.addEventListener("keydown", (e) => {
+                if (e.key !== "Enter") return;
+                const inp = e.target.closest("input.linput");
+                if (inp) { e.preventDefault(); postListOp(inp.dataset.skey, "add", inp.value); inp.value = ""; }
+            });
         }
 
         let settingsLoaded = false;
@@ -754,12 +878,30 @@
                 ? item("Proxy measured · real", '<span class="tag">' + fmt(ps.calls) + " calls</span><span class=\"tag\">"
                     + fmt(ps.input) + " in</span><span class=\"tag\">" + fmt(ps.output) + " out</span><span class=\"tag\">" + fmt(ps.cacheRead) + " cache</span>")
                 : "";
+            const proxyLast = (ps.lastRequestAt || 0) > 0
+                ? item("Proxy last request · real", '<span class="tag">' + esc(fmtDuration((Date.now() - ps.lastRequestAt) / 1000) + " ago")
+                    + '</span><span class="tag">' + esc(new Date(ps.lastRequestAt).toLocaleString()) + "</span>")
+                : "";
+            // Prompt secret guard: configured state + what it has actually blocked (measured).
+            const guardState = s.promptSecretGuard
+                ? '<span class="pill on">on</span><span class="tag">' + esc(s.promptSecretMode || "redact") + "</span>"
+                : pill("off", "off");
+            const promptGuard = item("Prompt secret guard · experimental", guardState);
+            const blockedTotal = (ps.redacted || 0) + (ps.rejected || 0);
+            const promptBlocked = blockedTotal > 0
+                ? item("Prompt secrets blocked · real", '<span class="tag">' + fmt(ps.redacted || 0) + " redacted</span><span class=\"tag\">"
+                    + fmt(ps.rejected || 0) + " rejected</span>"
+                    + ((ps.lastBlockedAt || 0) > 0 ? '<span class="tag">' + esc(fmtDuration((Date.now() - ps.lastBlockedAt) / 1000) + " ago") + "</span>" : ""))
+                : "";
             const guard = (sec.guardProtects || []).map((p) => '<span class="tag">' + esc(p) + "</span>").join("");
             el.innerHTML =
                   item("Context compression (MCP) · measured", boolPill(s.compress))
                 + item("Real tool-usage stats · measured", boolPill(s.usageStats))
-                + item("Claude Code measuring proxy · experimental", boolPill(s.proxy))
+                + item("Claude Code proxy · experimental", boolPill(s.proxy))
                 + proxyMeasured
+                + proxyLast
+                + promptGuard
+                + promptBlocked
                 + item("Token-efficient output", levelPill(s.outputStyle))
                 + item("Minimal code", levelPill(s.minimalCode))
                 + item("Parallel sub-agents", boolPill(s.parallelSubagents))
@@ -892,16 +1034,141 @@
             } catch { $("skillsBody").innerHTML = '<div class="empty" style="padding:24px 0">Skills unavailable.</div>'; }
         }
 
-        // --- hash routing between the Savings, Skills and Settings subpages ---
+        // --- accounts & profiles subpage (mirrors the TUI hub over /api/accounts) ---
+        let accountsLoaded = false;
+        let accTools = [];
+        async function loadAccounts() {
+            try { const r = await fetch("/api/accounts", { cache: "no-store" }); renderAccounts(await r.json()); }
+            catch { $("accountsBody").innerHTML = '<div class="empty" style="padding:24px 0">Accounts unavailable.</div>'; }
+        }
+        function accountRow(a) {
+            const badges = (a.active ? '<span class="tag meas">active</span>' : "")
+                + (a.loggedIn ? '<span class="tag">' + esc(a.email || "logged in") + "</span>" : '<span class="tag warn">not logged in</span>');
+            const btn = (act, label, cls) => '<button type="button" class="' + (cls || "toggle") + '" data-acc="' + act + '" data-tool="' + esc(a.tool) + '" data-name="' + esc(a.name) + '">' + label + "</button>";
+            const acts = '<div class="set-ctl" style="display:flex;gap:6px;flex-wrap:wrap">'
+                + (a.active ? "" : btn("activate", "Use"))
+                + (a.loggedIn ? "" : btn("login", "Log in..."))
+                + (a.removable ? btn("rename", "Rename") + btn("remove", "Remove", "btn-danger") : "")
+                + "</div>";
+            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(a.name) + ' <span class="tag ext">' + esc(a.toolLabel) + "</span> " + badges
+                + '</div><div class="set-hint">' + esc(a.dir) + "</div></div>" + acts + "</div>";
+        }
+        function profileRow(p, tools, accounts) {
+            const maps = tools.map((t) => {
+                const cur = p.accounts[t.name] || "";
+                const opts = ['<option value="">(none)</option>'].concat(accounts.filter((a) => a.tool === t.name)
+                    .map((a) => '<option value="' + esc(a.name) + '"' + (a.name === cur ? " selected" : "") + ">" + esc(a.name) + "</option>")).join("");
+                return '<label style="font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;margin:0 12px 6px 0">' + esc(t.label)
+                    + ' <select class="choice" data-prof-tool="' + esc(t.name) + '" data-prof="' + esc(p.name) + '">' + opts + "</select></label>";
+            }).join("");
+            const acts = '<div class="set-ctl" style="display:flex;gap:6px">'
+                + (p.active ? "" : '<button type="button" class="toggle" data-prof-act="activate" data-name="' + esc(p.name) + '">Use</button>')
+                + '<button type="button" class="toggle" data-prof-act="rename" data-name="' + esc(p.name) + '">Rename</button>'
+                + '<button type="button" class="btn-danger" data-prof-act="remove" data-name="' + esc(p.name) + '">Remove</button></div>';
+            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(p.name) + (p.active ? ' <span class="tag meas">active</span>' : "")
+                + '</div><div class="set-hint" style="margin-top:6px">' + maps + "</div></div>" + acts + "</div>";
+        }
+        function renderAccounts(d) {
+            d = d || {};
+            const accounts = d.accounts || [], profiles = d.profiles || [], tools = d.tools || [];
+            accTools = tools;
+            $("accountsBody").innerHTML = accounts.length ? accounts.map(accountRow).join("") : '<div class="empty" style="padding:20px 0">No accounts.</div>';
+            $("profilesBody").innerHTML = profiles.length ? profiles.map((p) => profileRow(p, tools, accounts)).join("")
+                : '<div class="empty" style="padding:20px 0">No profiles yet. Add one to pin an account per tool.</div>';
+        }
+        async function accAction(op, payload) {
+            $("accountsNote").textContent = "Working...";
+            try {
+                const r = await fetch("/api/accounts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(Object.assign({ op }, payload)) });
+                const out = await r.json();
+                $("accountsNote").textContent = out.ok ? "Saved." : ("Error: " + (out.error || "failed"));
+                if (out.data) renderAccounts(out.data);
+            } catch { $("accountsNote").textContent = "Could not reach the server."; }
+        }
+        function wireAccounts() {
+            $("accAdd").addEventListener("click", () => {
+                const tool = accTools.length === 1 ? accTools[0].name : prompt("Which tool? (" + accTools.map((t) => t.name).join(" / ") + ")", accTools[0] ? accTools[0].name : "");
+                if (!tool) return;
+                const name = prompt("New account name (e.g. work):", "");
+                if (name) accAction("account.add", { tool, name });
+            });
+            $("profAdd").addEventListener("click", () => { const name = prompt("New profile name:", ""); if (name) accAction("profile.add", { name }); });
+            $("accountsBody").addEventListener("click", (e) => {
+                const b = e.target.closest("button[data-acc]"); if (!b) return;
+                const op = b.dataset.acc, tool = b.dataset.tool, name = b.dataset.name;
+                if (op === "activate") accAction("account.activate", { tool, name });
+                else if (op === "remove") { if (confirm("Remove account '" + name + "' and delete its local config dir?")) accAction("account.remove", { tool, name }); }
+                else if (op === "rename") { const nn = prompt("Rename '" + name + "' to:", name); if (nn && nn !== name) accAction("account.rename", { tool, name, newName: nn }); }
+                else if (op === "login") { $("accountsNote").textContent = "To log in, run this in a terminal:  enigma " + tool + " " + name; }
+            });
+            $("profilesBody").addEventListener("click", (e) => {
+                const b = e.target.closest("button[data-prof-act]"); if (!b) return;
+                const op = b.dataset.profAct, name = b.dataset.name;
+                if (op === "activate") accAction("profile.activate", { name });
+                else if (op === "remove") { if (confirm("Remove profile '" + name + "'? (its accounts are kept)")) accAction("profile.remove", { name }); }
+                else if (op === "rename") { const nn = prompt("Rename profile '" + name + "' to:", name); if (nn && nn !== name) accAction("profile.rename", { name, newName: nn }); }
+            });
+            $("profilesBody").addEventListener("change", (e) => {
+                const sel = e.target.closest("select[data-prof-tool]"); if (!sel) return;
+                accAction("profile.setAccount", { profile: sel.dataset.prof, tool: sel.dataset.profTool, account: sel.value || null });
+            });
+        }
+
+        // --- config import / export (the browser file picker is what "asks where") ---
+        async function exportConfig() {
+            $("settingsNote").textContent = "Exporting...";
+            let text;
+            try { text = await (await fetch("/api/config-export", { cache: "no-store" })).text(); }
+            catch { $("settingsNote").textContent = "Export failed."; return; }
+            const name = "enigma-config-" + new Date().toISOString().slice(0, 10) + ".json";
+            if (window.showSaveFilePicker) {
+                try {
+                    const h = await window.showSaveFilePicker({ suggestedName: name, types: [{ description: "JSON", accept: { "application/json": [".json"] } }] });
+                    const w = await h.createWritable(); await w.write(text); await w.close();
+                    $("settingsNote").textContent = "Exported (no secrets included)."; return;
+                } catch (e) { if (e && e.name === "AbortError") { $("settingsNote").textContent = "Export cancelled."; return; } }
+            }
+            const url = URL.createObjectURL(new Blob([text], { type: "application/json" }));
+            const a = document.createElement("a"); a.href = url; a.download = name; a.click(); URL.revokeObjectURL(url);
+            $("settingsNote").textContent = "Exported to your downloads (no secrets included).";
+        }
+        async function importConfig() {
+            let text = null;
+            if (window.showOpenFilePicker) {
+                try { const [h] = await window.showOpenFilePicker({ types: [{ description: "JSON", accept: { "application/json": [".json"] } }] }); text = await (await h.getFile()).text(); }
+                catch (e) { if (e && e.name === "AbortError") return; }
+            }
+            if (text === null) {
+                text = await new Promise((res) => {
+                    const inp = document.createElement("input"); inp.type = "file"; inp.accept = "application/json,.json";
+                    inp.onchange = () => { const f = inp.files[0]; if (!f) { res(null); return; } const rd = new FileReader(); rd.onload = () => res(String(rd.result)); rd.readAsText(f); };
+                    inp.click();
+                });
+                if (text === null) return;
+            }
+            let body; try { body = JSON.parse(text); } catch { $("settingsNote").textContent = "That file is not valid JSON."; return; }
+            $("settingsNote").textContent = "Importing...";
+            try {
+                const out = await (await fetch("/api/config-import", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })).json();
+                if (!out.ok) { $("settingsNote").textContent = "Import failed: " + (out.error || "error"); return; }
+                $("settingsNote").textContent = "Imported: " + (out.applied || []).join(", ") + ((out.skipped && out.skipped.length) ? ("  ·  skipped: " + out.skipped.join(", ")) : "");
+                settingsLoaded = false; loadSettings(); accountsLoaded = false;
+            } catch { $("settingsNote").textContent = "Could not reach the server to import."; }
+        }
+
+        // --- hash routing between the subpages ---
         function route() {
             const h = (location.hash || "").replace(/^#\/?/, "");
-            const v = (h === "settings" || h === "skills") ? h : "savings";
+            const v = ["usage", "accounts", "settings", "skills"].includes(h) ? h : "savings";
             $("view-savings").style.display = v === "savings" ? "" : "none";
+            $("view-usage").style.display = v === "usage" ? "" : "none";
+            $("view-accounts").style.display = v === "accounts" ? "" : "none";
             $("view-skills").style.display = v === "skills" ? "" : "none";
             $("view-settings").style.display = v === "settings" ? "" : "none";
             document.querySelectorAll(".tab").forEach((t) => t.classList.toggle("active", t.dataset.view === v));
             if (v === "settings" && !settingsLoaded) { settingsLoaded = true; loadSettings(); }
             if (v === "skills" && !skillsLoaded) { skillsLoaded = true; loadSkills(); }
+            if (v === "accounts" && !accountsLoaded) { accountsLoaded = true; loadAccounts(); }
             // The chart was sized while its view may have been hidden; nudge it on return.
             if (v === "savings") { loadSystems(true); if (chart) { try { applyRange(); } catch { /* not ready */ } } }
         }
@@ -912,6 +1179,9 @@
         document.addEventListener("visibilitychange", () => { if (!document.hidden) refreshAll(true); });
         wireSettings();
         wireSkills();
+        wireAccounts();
+        $("cfgExport").addEventListener("click", exportConfig);
+        $("cfgImport").addEventListener("click", importConfig);
         $("updateBtn").addEventListener("click", runUpdate);
         $("refreshBtn").addEventListener("click", () => refreshAll(true));
         window.addEventListener("hashchange", route);