@enigmax/dashboard 0.1.113 → 0.1.115

package/assets/index.html

@@ -25,6 +25,9 @@
             --elev: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 42%);
             --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
             --shadow-2: 0 18px 40px -22px rgba(0,0,0,0.75);
+            /* Hover borders, scrollbars and the text that sits on a filled accent or good pill. */
+            --border-strong: #2f3744; --scrollbar: #2b3340;
+            --on-accent: #1a1206; --on-good: #06210f;
         }
         * { box-sizing: border-box; }
         /* An icon never gives up its size to the text beside it. Every svg here is an icon, and
@@ -60,6 +63,8 @@
            otherwise stay glued to the sidebar with all the empty space piled on the right. */
         .content { flex: 1; min-width: 0; padding: 30px 30px 48px; max-width: 1560px; margin-inline: auto; }
         .iconbtn.nav-burger { display: none; }
+        /* The rail carries the wordmark; once the rail is a drawer the header shows it instead. */
+        .wordmark.mob-brand { display: none; }
         .nav-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,0.6); }
         a { color: var(--accent2); }
         /* Quality floor: one visible keyboard-focus ring for every interactive control
@@ -133,7 +138,7 @@
         }
         /* A faint top-edge highlight so a card reads as a lit surface, not a flat rectangle. */
         .card::before { content: ""; position: absolute; inset: 0; background: var(--elev); pointer-events: none; }
-        .card:hover { border-color: #2f3744; transform: translateY(-2px); box-shadow: var(--shadow-1), var(--shadow-2); }
+        .card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-1), var(--shadow-2); }
         /* Hero KPI (Money Saved): spans two columns, accent-lit - the loudest thing on the page. */
         .card.hero { grid-column: span 2; border-color: rgba(224,164,88,0.35); background: linear-gradient(135deg, var(--accent-weak), transparent 62%), var(--surface); }
         .card.hero .value { font-size: 42px; }
@@ -171,7 +176,7 @@
             transition: color .15s, background .15s, border-color .15s;
         }
         .ranges button:hover { color: var(--text); }
-        .ranges button.active { background: var(--accent); color: #1a1206; border-color: var(--accent); font-weight: 600; }
+        .ranges button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
         .chartwrap { position: relative; width: 100%; height: 280px; }
         /* Suppress the charting library's attribution logo. */
         #tv-attr-logo { display: none !important; }
@@ -271,8 +276,8 @@
         .iconbtn.spinning svg { animation: spin .7s linear infinite; }
         .toggle.with-icon { display: inline-flex; align-items: center; gap: 6px; }
         .toggle.with-icon svg { width: 14px; height: 14px; display: block; }
-        .toggle:hover { color: var(--text); border-color: #2f3744; }
-        .toggle.on { background: var(--good); color: #06210f; border-color: var(--good); font-weight: 600; }
+        .toggle:hover { color: var(--text); border-color: var(--border-strong); }
+        .toggle.on { background: var(--good); color: var(--on-good); border-color: var(--good); font-weight: 600; }
         /* Boolean settings render as a sliding switch. Only the bool controls carry
            data-kind="bool" - action buttons reuse .toggle and stay buttons. The On/Off
            text is kept for screen readers but pushed off-screen; the knob is drawn with
@@ -288,12 +293,12 @@
             width: 18px; height: 18px; border-radius: 50%; background: #cdd2da;
             transition: left .18s, background .18s;
         }
-        .toggle[data-kind="bool"]:hover { border-color: #2f3744; }
+        .toggle[data-kind="bool"]:hover { border-color: var(--border-strong); }
         .toggle[data-kind="bool"].on { background: var(--good); border-color: var(--good); }
-        .toggle[data-kind="bool"].on::after { left: 23px; background: #06210f; }
+        .toggle[data-kind="bool"].on::after { left: 23px; background: var(--on-good); }
         /* Compact icon-only button (e.g. Edit), instead of a text button. */
         .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: color .15s, border-color .15s, transform .1s; }
-        .iconbtn:hover { color: var(--accent); border-color: #2f3744; }
+        .iconbtn:hover { color: var(--accent); border-color: var(--border-strong); }
         .iconbtn svg { width: 15px; height: 15px; display: block; }
         select.choice {
             background: var(--surface2); color: var(--text); border: 1px solid var(--border);
@@ -432,8 +437,8 @@
         /* Per-agent skill toggles: one pill per app (the app's icon), green when the skill is on for it; the app name is the tooltip. */
         .set-agents { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
         .achip { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); cursor: pointer; text-decoration: none; transition: color .15s, background .15s, border-color .15s; }
-        .achip:hover { border-color: #2f3744; color: var(--text); }
-        .achip.on { background: var(--good); color: #06210f; border-color: var(--good); }
+        .achip:hover { border-color: var(--border-strong); color: var(--text); }
+        .achip.on { background: var(--good); color: var(--on-good); border-color: var(--good); }
         .achip:disabled { opacity: .35; cursor: not-allowed; }
         .achip svg { width: 14px; height: 14px; display: block; }
         /* Inline app icons in the "where deployed" tag (static, name in tooltip). */
@@ -462,6 +467,15 @@
         .pg-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
         .pg-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); padding-top: 4px; }
         .pg-check label { color: var(--muted); }
+        .ad-pool { display: flex; flex-wrap: wrap; gap: 8px 16px; }
+        .ad-pool label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; min-width: 0; max-width: 100%; }
+        .ad-pool label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .ad-pool input { accent-color: var(--good); }
+        .ad-pool .aicon { color: var(--muted); }
+        .ad-pool.off { opacity: .5; }
+        .ad-fixed.off { opacity: .5; }
+        .ad-err { color: var(--bad); font-size: 11px; }
+        .ad-err:empty { display: none; }
         .pg-out { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 360px; overflow-y: auto; margin: 0; }
         /* Claude-style usage window gauges (current session / weekly all / weekly Sonnet). */
         .wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
@@ -494,10 +508,10 @@
         /* Both halves hold text of unpredictable length (a setting label, a port, a model id, a
            command), so the row is built to shrink rather than to push: min-width:0 defeats the
            default min-width:auto that makes a flex/grid item refuse to go below its content
-           width, flex-wrap lets the value drop to its own line instead of spilling out of the
-           card, and overflow-wrap:anywhere lets a long unbroken label break (unlike break-word,
+           width, the two grid columns keep the state on the right of every card (a wrapping
+           flex row put it under the label in some cards and beside it in others), and overflow-wrap:anywhere lets a long unbroken label break (unlike break-word,
            it also lowers min-content, which is what stops the grid track being forced wider). */
-        .sys-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 11px 14px; font-size: 13px; background: var(--surface2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
+        .sys-item { display: grid; grid-template-columns: minmax(min(100%, 140px), 1fr) minmax(0, auto); align-items: center; gap: 6px 12px; min-width: 0; padding: 11px 14px; font-size: 13px; background: var(--surface2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
         .sys-item .k { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
         .sys-item .v { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
         .sys-item .v .tag { overflow-wrap: anywhere; }
@@ -505,13 +519,13 @@
         .sys-item .pill.off { background: transparent; }
         /* Rows whose value is a list of chips span the full width and let the chips wrap with
            even spacing, instead of cramming many tags into one compact half-column cell. */
-        .sys-item.wide { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 8px; }
+        .sys-item.wide { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
         .sys-item.wide .v { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
         .sys-item.wide .v .tag { margin-left: 0; }
         .pill { font-size: 11px; border-radius: 6px; padding: 2px 9px; border: 1px solid var(--border); white-space: nowrap; }
-        .pill.on { color: #06210f; background: var(--good); border-color: var(--good); font-weight: 600; }
+        .pill.on { color: var(--on-good); background: var(--good); border-color: var(--good); font-weight: 600; }
         .pill.off { color: var(--muted); background: var(--surface2); }
-        .pill.lvl { color: #1a1206; background: var(--accent); border-color: var(--accent); font-weight: 600; }
+        .pill.lvl { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
         /* Claude operational-status pill (status.claude.com). */
         .cstatus { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 5px 11px; background: rgba(0,0,0,0.25); border: 1px solid var(--border-soft); border-radius: 999px; white-space: nowrap; }
         .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
@@ -577,6 +591,7 @@
             }
             .sidebar.open { transform: none; }
             .iconbtn.side-x, .iconbtn.nav-burger { display: inline-flex; }
+            .wordmark.mob-brand { display: inline-flex; font-size: 18px; }
             .content { padding: 18px; }
             .tabs .tab { padding: 11px 12px; font-size: 13.5px; }
             body.nav-open { overflow: hidden; }
@@ -585,7 +600,9 @@
             .content { padding: 16px; }
             .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
             header { gap: 12px; }
-            .nav { margin-left: auto; flex-wrap: wrap; gap: 10px; }
+            /* Burger and wordmark share the first row; the toolbar takes a full row below. */
+            .nav { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; gap: 10px; }
+            .nav .cmdk { flex: 1 1 auto; }
             /* A settings row is label + controls side by side, and the control cluster is
                flex-shrink: 0 so a wide one (account actions, a select plus three buttons)
                pushes the row past the viewport. Here the row wraps and the cluster is
@@ -600,11 +617,11 @@
             .set-ctl { flex-shrink: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
         }
         /* Pretty scrollbars across the whole dashboard (thin, rounded, themed). */
-        * { scrollbar-width: thin; scrollbar-color: #2b3340 transparent; }
+        * { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
         ::-webkit-scrollbar { width: 10px; height: 10px; }
         ::-webkit-scrollbar-track { background: transparent; }
         ::-webkit-scrollbar-corner { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #2b3340; border-radius: 999px; }
+        ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; }
         ::-webkit-scrollbar-thumb:hover { background: #3a4150; }
         /* Scope selector (global vs a project) in the header. */
         .scope-wrap { display: inline-flex; align-items: center; gap: 6px; }
@@ -719,7 +736,7 @@
            picker is a custom listbox - the logo shows on the button AND inside every option. */
         .dd { position: relative; }
         .dd-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 170px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12px; font-family: var(--mono); cursor: pointer; }
-        .dd-btn:hover { border-color: #2f3744; }
+        .dd-btn:hover { border-color: var(--border-strong); }
         .dd-btn .dd-label { flex: 1; text-align: left; }
         .dd-btn .dd-caret { width: 13px; height: 13px; flex: 0 0 auto; color: var(--muted); }
         .dd-ic { display: inline-flex; align-items: center; }
@@ -749,7 +766,7 @@
             border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; font-family: var(--mono);
             transition: border-color .15s, background .15s, transform .1s;
         }
-        .pick-card:hover { border-color: #2f3744; }
+        .pick-card:hover { border-color: var(--border-strong); }
         .pick-card:active { transform: scale(0.98); }
         .pick-card.sel { border-color: var(--accent); }
         .pick-card svg { width: 20px; height: 20px; display: block; flex: none; color: var(--muted); }
@@ -828,7 +845,7 @@
                 </a>
                 <a href="#/playground" data-view="playground" class="tab">
                     <svg class="tab-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 17 6-6-6-6"/><path d="M12 19h8"/></svg>
-                    <span>Playground</span>
+                    <span>Local API</span>
                 </a>
             </div>
             <div class="nav-group" role="group" aria-labelledby="ng-code">
@@ -897,6 +914,7 @@
         <button type="button" id="navOpen" class="iconbtn nav-burger" title="Menu" aria-label="Open the menu" aria-expanded="false" aria-controls="sidebar">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
         </button>
+        <div class="wordmark mob-brand" aria-hidden="true">Enigma<span>.</span></div>
         <div class="nav">
             <button type="button" id="palOpen" class="cmdk" aria-label="Search views and projects" aria-haspopup="dialog">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
@@ -1418,9 +1436,44 @@
 
     <section id="view-playground" style="display:none">
         <div class="page-head">
-            <h1>API Playground</h1>
-            <p>Test the local agent API without leaving the dashboard. Pick a format (OpenAI or Anthropic), a backend, and send a message. Run it in-process (no server needed) or against a running <code>enigma api</code> with an auth key.</p>
+            <h1>Local API</h1>
+            <p>Set which account answers <code>enigma api</code> requests, then try it below.</p>
         </div>
+        <div class="panel" id="adPanel">
+            <div class="set-cat-h">Server defaults</div>
+            <div class="set-cat-b">What <code>enigma api</code> starts with. A command-line flag overrides them for one run; changes apply the next time the server starts.</div>
+            <div class="pg-grid">
+                <label class="pg-field"><span>Account rotation</span>
+                    <select id="adRotation"></select>
+                </label>
+                <label class="pg-field ad-fixed"><span>Default account</span>
+                    <select id="adAccount"><option value="">(active account)</option></select>
+                </label>
+                <label class="pg-field ad-fixed"><span>Default profile</span>
+                    <select id="adProfile"><option value="">(none)</option></select>
+                </label>
+                <label class="pg-field ad-fixed"><span>Default pack</span>
+                    <select id="adPack"><option value="">(none)</option></select>
+                </label>
+                <label class="pg-field"><span>Port</span>
+                    <input id="adPort" class="linput" type="number" min="1" max="65535" step="1" inputmode="numeric" aria-describedby="adPortErr">
+                    <small id="adPortErr" class="ad-err" role="alert"></small>
+                </label>
+                <div class="pg-field"><span>Callers choose the account</span>
+                    <button id="adClient" type="button" class="toggle on" data-kind="bool" role="switch" aria-checked="true" aria-label="Let requests pick their own account, profile or pack">On</button>
+                </div>
+            </div>
+            <div id="adRotationHint" class="set-hint"></div>
+            <div class="pg-field" id="adPoolWrap"><span>Accounts in the rotation <small>(none checked = every account; fill-first uses them in the order you check them)</small></span>
+                <div id="adPool" class="ad-pool"></div>
+            </div>
+            <div class="ladd" style="gap:8px;align-items:center">
+                <button id="adSave" type="button" class="toggle on" disabled>Save defaults</button>
+                <button id="adDiscard" type="button" class="laddb" style="display:none">Discard changes</button>
+                <span id="adNote" class="set-hint"></span>
+            </div>
+        </div>
+        <div class="set-cat-h" style="margin:18px 0 8px">Playground</div>
         <div class="panel">
             <div class="pg-grid">
                 <label class="pg-field"><span>Run</span>
@@ -1445,13 +1498,13 @@
                     <input id="pgKey" class="linput" type="password" placeholder="Bearer token / ENIGMA_API_KEY">
                 </label>
                 <label class="pg-field"><span>Account <small>(optional)</small></span>
-                    <select id="pgAccount"><option value="">(active)</option></select>
+                    <select id="pgAccount"><option value="">(server default)</option></select>
                 </label>
                 <label class="pg-field"><span>Profile <small>(optional)</small></span>
-                    <select id="pgProfile"><option value="">(none)</option></select>
+                    <select id="pgProfile"><option value="">(server default)</option></select>
                 </label>
                 <label class="pg-field"><span>Pack <small>(optional)</small></span>
-                    <select id="pgPack"><option value="">(none)</option></select>
+                    <select id="pgPack"><option value="">(server default)</option></select>
                 </label>
                 <div class="pg-field pg-tools"><span>Agent tools <small>(Read/Write/Bash...)</small></span>
                     <button id="pgTools" type="button" class="toggle on" data-kind="bool" role="switch" aria-checked="true" aria-label="Enable agent tools">On</button>
@@ -1460,10 +1513,6 @@
                     <input id="pgImage" type="file" accept="image/*" class="linput">
                 </label>
             </div>
-            <div class="ladd" style="gap:8px;align-items:center">
-                <button id="pgSaveDefault" type="button" class="laddb">Save context as <code>enigma api</code> default</button>
-                <span id="pgDefaultNote" class="set-hint"></span>
-            </div>
             <label class="pg-field"><span>System prompt <small>(optional)</small></span>
                 <input id="pgSystem" class="linput" placeholder="e.g. You are a terse assistant.">
             </label>
@@ -3651,8 +3700,9 @@ export {
 
         function renderSettings(cats) {
             const el = $("settingsBody");
-            // Skill-related settings live in the Skills tab; drop them here so they aren't shown twice.
-            cats = (cats || []).map((c) => ({ ...c, settings: (c.settings || []).filter((s) => SKILL_SETTING_KEYS.indexOf(s.key) === -1) })).filter((c) => c.settings.length);
+            // Skill-related settings live in the Skills tab and the API server's in the Local API tab;
+            // drop them here so they aren't shown twice.
+            cats = (cats || []).map((c) => ({ ...c, settings: (c.settings || []).filter((s) => SKILL_SETTING_KEYS.indexOf(s.key) === -1 && !/^api-/.test(s.key)) })).filter((c) => c.settings.length);
             if (!cats.length) { el.innerHTML = '<div class="empty" style="padding:24px 0">No settings available.</div>'; return; }
             // One panel per category; settings laid out in a responsive 2-column grid so a
             // long config list stays scannable on a wide screen.
@@ -4050,7 +4100,7 @@ export {
         // config stores `opencode` and `rovodev`, the reader sees OpenCode and Rovo Dev.
         const AGENT_LABELS = {
             auto: "Auto", claude: "Claude Code", codex: "Codex",
-            opencode: "OpenCode", rovodev: "Rovo Dev", pi: "Pi"
+            opencode: "OpenCode", kimi: "Kimi Code", rovodev: "Rovo Dev", pi: "Pi"
         };
         // App label -> internal name. Normalized so every label variant maps to an icon:
         // "Claude Code", "Codex"/"OpenAI Codex", "opencode"/"OpenCode", "Rovo Dev", "Pi".
@@ -5081,7 +5131,7 @@ export {
 
         /**
          * The palette's engine, from @enigmax/primitives: subsequence ranking (so "qgate"
-         * finds "Quality gate" and "plyg" finds "Playground"), the debounce and the
+         * finds "Quality gate" and "lapi" finds "Local API"), the debounce and the
          * cancellation. The scorer this replaced is the one the package now ships, so the
          * dashboard and every other consumer rank the same way.
          */
@@ -6333,30 +6383,149 @@ export {
             if (!opts.length) opts.push('<option value="claude" data-icon="claude">Claude Code (default)</option>');
             sel.innerHTML = opts.join("");
             syncDD(sel);
-            // Context selectors: account (labeled by tool), profile, pack.
-            const acc = $("pgAccount");
-            acc.innerHTML = '<option value="">(active)</option>' + (info.accounts || []).map((a) =>
-                '<option value="' + esc(a.name) + '" data-icon="' + esc(agentName(a.tool)) + '">' + esc(a.name) + " (" + esc(agentLabel(a.tool)) + ")</option>").join("");
-            syncDD(acc);
-            const prof = $("pgProfile");
-            prof.innerHTML = '<option value="">(none)</option>' + (info.profiles || []).map((n) => '<option value="' + esc(n) + '">' + esc(n) + "</option>").join("");
-            syncDD(prof);
-            const pk = $("pgPack");
-            pk.innerHTML = '<option value="">(none)</option>' + (info.packs || []).map((p) => '<option value="' + esc(p.id) + '">' + esc(p.label) + (p.installed ? "" : " - not installed") + "</option>").join("");
-            syncDD(pk);
-            // Pre-select the persisted server default so the playground matches `enigma api`.
-            const def = info.defaults || { account: "", profile: "", pack: "" };
-            acc.value = def.account || ""; syncDD(acc);
-            prof.value = def.profile || ""; syncDD(prof);
-            pk.value = def.pack || ""; syncDD(pk);
-            renderPgDefault(def);
-            $("pgBase").placeholder = "http://127.0.0.1:" + (info.apiPort || 8000);
+            // Context selectors: account (labeled by tool), profile, pack. Blank = whatever the
+            // server defaults below pick (the rotation included), so a test matches `enigma api`.
+            fillContextSelect($("pgAccount"), "(server default)", accountOptions(info.accounts));
+            fillContextSelect($("pgProfile"), "(server default)", (info.profiles || []).map((n) => ({ value: n, label: n })));
+            fillContextSelect($("pgPack"), "(server default)", packOptions(info.packs));
+            fillContextSelect($("adAccount"), "(active account)", accountOptions(info.accounts));
+            fillContextSelect($("adProfile"), "(none)", (info.profiles || []).map((n) => ({ value: n, label: n })));
+            fillContextSelect($("adPack"), "(none)", packOptions(info.packs));
+            const rot = $("adRotation");
+            rot.innerHTML = (info.rotations || ["off"]).map((r) => '<option value="' + esc(r) + '">' + esc(prettyChoice(r)) + "</option>").join("");
+            adInfo = info;
+            adApply(info.defaults);
+            $("pgBase").placeholder = "http://127.0.0.1:" + ((info.defaults && info.defaults.port) || info.apiPort || 8000);
             pgSyncMode();
         }
-        function renderPgDefault(def) {
-            def = def || {};
-            const parts = [def.pack && "pack " + def.pack, def.account && "account " + def.account, def.profile && "profile " + def.profile].filter(Boolean);
-            $("pgDefaultNote").textContent = parts.length ? "Current default: " + parts.join(", ") : "Current default: active account";
+        function fillContextSelect(sel, blank, items) {
+            sel.innerHTML = '<option value="">' + esc(blank) + "</option>" + items.map((o) =>
+                '<option value="' + esc(o.value) + '"' + (o.icon ? ' data-icon="' + esc(o.icon) + '"' : "") + ">" + esc(o.label) + "</option>").join("");
+            syncDD(sel);
+        }
+        function accountOptions(accounts) {
+            return (accounts || []).map((a) => ({ value: a.name, label: a.name + " (" + agentLabel(a.tool) + ")", icon: agentName(a.tool) }));
+        }
+        function packOptions(packs) {
+            return (packs || []).map((p) => ({ value: p.id, label: p.label + (p.installed ? "" : " - not installed") }));
+        }
+
+        // --- Server defaults for `enigma api` (account, rotation, pool, caller choice, port) ---
+        let adInfo = null;
+        let adSaved = null;
+        let adPicked = [];
+        const AD_ROTATION_HINT = {
+            "off": "Requests that name no account use the default account, profile or pack below.",
+            "round-robin": "Requests that name no account take turns across the accounts below. One that hits a usage limit is retried on the next.",
+            "least-used": "Requests that name no account go to the one with the least use in its current 5-hour window. One that hits a usage limit is retried on the next.",
+            "fill-first": "Requests use the first account below until it hits a usage limit, then the next one.",
+            "random": "Requests that name no account go to a random account below. One that hits a usage limit is retried on the next.",
+        };
+        // Unique account names (the pool is by name; the same name can exist for several agents), saved pool order first.
+        function adPoolNames(pool) {
+            const all = [];
+            ((adInfo && adInfo.accounts) || []).forEach((a) => { if (all.indexOf(a.name) === -1) all.push(a.name); });
+            return (pool || []).filter((n) => all.indexOf(n) !== -1).concat(all.filter((n) => (pool || []).indexOf(n) === -1));
+        }
+        function adRenderPool(pool) {
+            const el = $("adPool");
+            const names = adPoolNames(pool);
+            if (!names.length) { el.innerHTML = '<span class="lnone">No accounts yet - add one in Accounts.</span>'; return; }
+            el.innerHTML = names.map((n) => {
+                const tools = ((adInfo && adInfo.accounts) || []).filter((a) => a.name === n).map((a) => a.tool);
+                const icon = tools.length === 1 ? '<span class="aicon" aria-hidden="true">' + (agentSvg(agentName(tools[0])) || "") + "</span>" : "";
+                return '<label title="' + esc(n + " (" + tools.map(agentLabel).join(", ") + ")") + '"><input type="checkbox" data-pool="' + esc(n) + '"'
+                    + ((pool || []).indexOf(n) !== -1 ? " checked" : "") + ">" + icon + "<span>" + esc(n) + "</span></label>";
+            }).join("");
+        }
+        function adApply(def) {
+            def = def || { account: "", profile: "", pack: "", rotation: "off", pool: [], clientContext: true, port: 8000 };
+            adSaved = { account: def.account || "", profile: def.profile || "", pack: def.pack || "", rotation: def.rotation || "off", pool: (def.pool || []).slice(), clientContext: def.clientContext !== false, port: def.port || 8000 };
+            $("adAccount").value = adSaved.account; syncDD($("adAccount"));
+            $("adProfile").value = adSaved.profile; syncDD($("adProfile"));
+            $("adPack").value = adSaved.pack; syncDD($("adPack"));
+            $("adRotation").value = adSaved.rotation; syncDD($("adRotation"));
+            $("adPort").value = String(adSaved.port);
+            paintSwitch($("adClient"), adSaved.clientContext, "On", "Off");
+            adPicked = adSaved.pool.slice();
+            adRenderPool(adSaved.pool);
+            adSync();
+        }
+        function adRead() {
+            const checked = [...$("adPool").querySelectorAll("input[data-pool]:checked")].map((i) => i.dataset.pool);
+            // Pool order is the order accounts were checked in (fill-first walks it), saved ones first.
+            const pool = adPicked.filter((n) => checked.indexOf(n) !== -1).concat(checked.filter((n) => adPicked.indexOf(n) === -1));
+            return {
+                account: $("adAccount").value, profile: $("adProfile").value, pack: $("adPack").value,
+                rotation: $("adRotation").value, pool,
+                clientContext: $("adClient").getAttribute("aria-checked") === "true",
+                port: $("adPort").value.trim(),
+            };
+        }
+        function adPortError(v) {
+            if (v === "") return "Enter a port.";
+            const n = Number(v);
+            return Number.isInteger(n) && n >= 1 && n <= 65535 ? "" : "Use a whole number from 1 to 65535.";
+        }
+        // Dirty = the form differs from what was loaded, so a value changed and put back leaves Save off.
+        function adDirty(cur) {
+            if (!adSaved) return false;
+            return cur.account !== adSaved.account || cur.profile !== adSaved.profile || cur.pack !== adSaved.pack
+                || cur.rotation !== adSaved.rotation || cur.clientContext !== adSaved.clientContext
+                || Number(cur.port) !== adSaved.port || cur.pool.join("\n") !== adSaved.pool.join("\n");
+        }
+        function adSync() {
+            const cur = adRead();
+            const rotating = cur.rotation !== "off";
+            $("adRotationHint").textContent = AD_ROTATION_HINT[cur.rotation] || "";
+            $("adPool").classList.toggle("off", !rotating);
+            $("adPoolWrap").style.display = rotating ? "" : "none";
+            document.querySelectorAll("#adPanel .ad-fixed").forEach((el) => el.classList.toggle("off", rotating));
+            const portErr = adPortError(cur.port);
+            $("adPortErr").textContent = portErr;
+            $("adPort").setAttribute("aria-invalid", portErr ? "true" : "false");
+            const dirty = adDirty(cur);
+            $("adSave").disabled = !dirty || !!portErr;
+            $("adSave").title = portErr ? portErr : (dirty ? "" : "Nothing changed");
+            $("adDiscard").style.display = dirty ? "" : "none";
+        }
+        async function adSave() {
+            const cur = adRead();
+            if (adPortError(cur.port) || !adDirty(cur)) return;
+            const btn = $("adSave");
+            btn.disabled = true;
+            setNote("adNote", "Saving defaults...");
+            try {
+                const out = await apiJson("/api/playground", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ op: "set-defaults", ...cur, port: Number(cur.port) }) });
+                if (!out.ok) {
+                    setNote("adNote", "Could not save: " + (out.error || "error"), "err");
+                    const focus = { account: "adAccount", profile: "adProfile", pack: "adPack", rotation: "adRotation", port: "adPort", clientContext: "adClient" }[out.field];
+                    if (focus && $(focus)) $(focus).focus();
+                    adSync();
+                    return;
+                }
+                adApply(out.defaults);
+                setNote("adNote", "Saved. Restart 'enigma api' to use them.", "ok");
+            } catch (e) {
+                setNote("adNote", "Could not save: " + e.message, "err");
+                adSync();
+            }
+        }
+        function wireApiDefaults() {
+            ["adAccount", "adProfile", "adPack", "adRotation"].forEach((id) => $(id).addEventListener("change", adSync));
+            $("adPort").addEventListener("input", adSync);
+            $("adPool").addEventListener("change", (e) => {
+                const box = e.target.closest("input[data-pool]");
+                if (box) {
+                    adPicked = adPicked.filter((n) => n !== box.dataset.pool);
+                    if (box.checked) adPicked.push(box.dataset.pool);
+                }
+                adSync();
+            });
+            const cl = $("adClient");
+            cl.addEventListener("click", () => { paintSwitch(cl, cl.getAttribute("aria-checked") !== "true", "On", "Off"); adSync(); });
+            $("adSave").addEventListener("click", adSave);
+            $("adDiscard").addEventListener("click", () => adApply(adSaved));
         }
         function pgSyncMode() {
             const http = $("pgMode").value === "http";
@@ -6408,6 +6577,7 @@ export {
             const meta = [];
             if (out.format) meta.push(out.format === "anthropic" ? "Anthropic" : "OpenAI");
             if (out.tool) meta.push(out.tool);
+            if (out.account) meta.push("account " + out.account);
             if (typeof out.status === "number") meta.push("HTTP " + out.status);
             if (out.usage) meta.push(out.usage.input + " in / " + out.usage.output + " out");
             $("pgMeta").textContent = meta.join(" · ");
@@ -6415,17 +6585,9 @@ export {
             $("pgRaw").textContent = out.response ? (typeof out.response === "string" ? out.response : JSON.stringify(out.response, null, 2)) : "";
             $("pgCurl").textContent = out.curl || "";
         }
-        async function pgSaveDefault() {
-            const payload = { op: "set-defaults", account: $("pgAccount").value || "", profile: $("pgProfile").value || "", pack: $("pgPack").value || "" };
-            try {
-                const out = await (await fetch("/api/playground", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) })).json();
-                if (out.ok) { renderPgDefault(out.defaults); toast.success("Saved as the enigma api default"); }
-                else toast.error(out.error || "Could not save the default");
-            } catch { toast.error("Could not reach the dashboard server."); }
-        }
         function wirePlayground() {
+            wireApiDefaults();
             $("pgSend").addEventListener("click", pgSend);
-            $("pgSaveDefault").addEventListener("click", pgSaveDefault);
             const tog = $("pgTools");
             tog.addEventListener("click", () => paintSwitch(tog, tog.getAttribute("aria-checked") !== "true", "On", "Off"));
             $("pgMode").addEventListener("change", pgSyncMode);

package/package.json

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