@enigmax/dashboard 0.1.63 → 0.1.65

package/assets/index.html

@@ -321,6 +321,12 @@
         /* Per-memory delete in the Recall list: kept to the right and revealed on row hover/focus. */
         .recall-del { margin-left: auto; opacity: 0; transition: opacity .12s; }
         .set-row:hover .recall-del, .recall-del:focus-visible { opacity: 1; }
+        /* Recall multi-select: a checkbox per row, a highlight for selected rows, and a bulk-action
+           bar that appears only while something is selected. Ctrl/Cmd+click toggles, Shift+click ranges. */
+        .rc-check { flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); margin: 0; }
+        .set-row.sel { background: rgba(224, 164, 88, .10); }
+        .rc-bulk { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
+        .rc-bulk .rc-seln { font-size: 12px; color: var(--muted); }
         /* 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; }
@@ -454,6 +460,10 @@
         .modal-fl { display: block; margin-top: 14px; margin-bottom: 5px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
         .modal-fl .modal-opt { text-transform: none; letter-spacing: 0; opacity: .75; }
         .modal-fl + .modal-input { margin-top: 0; }
+        /* Provider-override editor labels + key hint. */
+        .prov-l { display: block; margin-top: 12px; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+        .prov-hint { margin-top: 8px; font-size: 12px; color: var(--muted); word-break: break-word; }
+        .prov-hint a { color: var(--accent); }
         /* Usage view provider/account pickers. */
         .useg-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
         .useg-pick select { width: auto; min-width: 170px; }
@@ -516,6 +526,7 @@
             <a href="#/settings" data-view="settings" class="tab">Settings</a>
             <a href="#/resources" data-view="resources" class="tab">Resources</a>
             <a href="#/recall" data-view="recall" class="tab">Recall</a>
+            <a href="#/packs" data-view="packs" class="tab">Packs</a>
         </nav>
         <div class="nav">
             <label class="scope-wrap" title="Scope: global config or a specific project"><span class="scope-lbl">Scope</span><select id="scopeSel" class="scope-sel"><option value="global">Global</option></select></label>
@@ -793,6 +804,18 @@
         <div class="panel"><div class="set-cat-h">Processes <small>by memory</small></div><div id="resProcs"><div class="empty" style="padding:12px 0">Loading...</div></div></div>
     </section>
 
+    <section id="view-packs" style="display:none">
+        <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
+            <div style="flex:1">
+                <h1>Packs</h1>
+                <p>Optional harness packs you can add on demand. Each runs in its own <strong>isolated agent context</strong>, so its skills and commands never load into your normal coding agent. Launch a pack from a terminal with <code>enigma &lt;pack&gt;</code>.</p>
+            </div>
+            <button id="packsRefresh" type="button" class="iconbtn" title="Refresh" aria-label="Refresh"><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 id="packsNote" class="set-note"></div>
+        <div id="packsBody"><div class="empty" style="padding:12px 0">Loading...</div></div>
+    </section>
+
     <section id="view-recall" style="display:none">
         <div class="page-head" style="display:flex;align-items:flex-start;gap:16px">
             <div style="flex:1">
@@ -3460,7 +3483,7 @@ export {
 
         // --- accounts & profiles subpage (mirrors the TUI hub over /api/accounts) ---
         let accountsLoaded = false;
-        let accTools = [], accAccounts = [], accProfiles = [];
+        let accTools = [], accAccounts = [], accProfiles = [], accPresets = [];
         // Real-time name validator mirroring the server (accounts.ts validateAccountName + the
         // duplicate checks), so the modal blocks an invalid or already-used name as the user types.
         // `taken` = names already in scope (per-tool for accounts, global for profiles); `current`
@@ -3483,16 +3506,23 @@ export {
                 + (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 removeBtn = '<button type="button" class="btn-danger icon" title="Remove" aria-label="Remove account ' + esc(a.name) + '" data-acc="remove" data-tool="' + esc(a.tool) + '" data-name="' + esc(a.name) + '">' + TRASH_ICON + "</button>";
+            // Provider override (e.g. MiniMax) only for tools that support it, and never the
+            // built-in "default" account (kept on the vendor default). Managed accounts only.
+            const provBtn = (a.supportsProvider && a.removable) ? btn("provider", "Provider") : "";
             const acts = '<div class="set-ctl" style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">'
                 + (a.active ? "" : btn("activate", "Use"))
                 + (a.loggedIn ? "" : btn("login", "Log in..."))
+                + provBtn
                 + (a.removable ? btn("rename", "Rename") + removeBtn : "")
                 + "</div>";
             const toolIc = agentSvg(a.tool);
             const toolBadge = toolIc
                 ? '<span class="aicon set-ic" title="' + esc(a.toolLabel) + '" aria-label="' + esc(a.toolLabel) + '">' + toolIc + "</span>"
                 : '<span class="tag ext">' + esc(a.toolLabel) + "</span> ";
-            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(a.name) + " " + toolBadge + badges
+            const provTag = a.provider
+                ? ' <span class="tag meas" title="' + esc(a.provider.baseUrl) + '">via ' + esc(a.provider.preset && a.provider.preset !== "custom" ? a.provider.preset : "custom") + (a.provider.model ? " · " + esc(a.provider.model) : "") + "</span>"
+                : "";
+            return '<div class="set-row"><div class="set-meta"><div class="set-name">' + esc(a.name) + " " + toolBadge + badges + provTag
                 + '</div><div class="set-hint">' + esc(a.dir) + "</div></div>" + acts + "</div>";
         }
         function profileRow(p, tools, accounts) {
@@ -3515,7 +3545,7 @@ export {
         function renderAccounts(d) {
             d = d || {};
             const accounts = d.accounts || [], profiles = d.profiles || [], tools = d.tools || [];
-            accTools = tools; accAccounts = accounts; accProfiles = profiles;
+            accTools = tools; accAccounts = accounts; accProfiles = profiles; accPresets = d.presets || [];
             $("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>';
@@ -3534,6 +3564,69 @@ export {
                 setNote("accountsNote", "Error: " + (out.error || "failed"), "err");
             } catch { if (rollback) rollback(); setNote("accountsNote", "Could not reach the server.", "err"); }
         }
+        // Provider-override editor: a small multi-field modal (backend select + base/model/token)
+        // since openModal only does single fields. Resolves to { clear:true } to drop the override,
+        // an object to set it ({ baseUrl, model?, preset?, token? } - token only when typed), or null.
+        function editProvider(a) {
+            return new Promise((resolve) => {
+                const toolPresets = accPresets.filter((p) => p.tool === a.tool);
+                const cur = a.provider; // { baseUrl, model?, preset?, hasToken } | null
+                const opts = ['<option value="default">Default (Anthropic)</option>']
+                    .concat(toolPresets.map((p) => '<option value="' + esc(p.id) + '">' + esc(p.label) + "</option>"))
+                    .concat(['<option value="custom">Custom (Anthropic-compatible)</option>']).join("");
+                const back = document.createElement("div");
+                back.className = "modal-back";
+                back.innerHTML = '<div class="modal" role="dialog" aria-modal="true" style="max-width:480px;text-align:left">'
+                    + '<div class="modal-title">Provider for ' + esc(a.name) + "</div>"
+                    + '<div class="modal-msg">Point ' + esc(a.toolLabel) + " at another Anthropic-compatible backend (e.g. MiniMax), or keep the default.</div>"
+                    + '<label class="prov-l">Backend</label><select class="modal-input" id="provSel">' + opts + "</select>"
+                    + '<div id="provFields" style="margin-top:8px">'
+                    + '<label class="prov-l">Base URL</label><input class="modal-input" id="provBase" placeholder="https://...">'
+                    + '<label class="prov-l">Model</label><input class="modal-input" id="provModel" placeholder="(provider default)">'
+                    + '<label class="prov-l">API key</label><input class="modal-input" id="provToken" type="password" autocomplete="off" placeholder="' + (cur && cur.hasToken ? "set - leave blank to keep" : "API key") + '">'
+                    + '<div class="prov-hint" id="provHint"></div></div>'
+                    + '<div class="modal-acts"><button type="button" class="toggle modal-cancel">Cancel</button>'
+                    + '<button type="button" class="toggle on modal-ok">Save</button></div></div>';
+                document.body.appendChild(back);
+                requestAnimationFrame(() => back.classList.add("show"));
+                const sel = back.querySelector("#provSel"), fields = back.querySelector("#provFields");
+                const base = back.querySelector("#provBase"), model = back.querySelector("#provModel"), token = back.querySelector("#provToken"), hint = back.querySelector("#provHint");
+                sel.value = cur ? (cur.preset && cur.preset !== "custom" ? cur.preset : "custom") : "default";
+                function applySel() {
+                    const v = sel.value;
+                    fields.style.display = v === "default" ? "none" : "";
+                    if (v === "default") return;
+                    const preset = toolPresets.find((p) => p.id === v);
+                    if (preset) {
+                        base.value = (cur && cur.preset === v && cur.baseUrl) || preset.baseUrl;
+                        model.value = (cur && cur.preset === v && cur.model) || preset.model || "";
+                        hint.innerHTML = preset.tokenUrl ? 'Get a key at <a href="' + esc(preset.tokenUrl) + '" target="_blank" rel="noopener">' + esc(preset.tokenUrl) + "</a>" : "";
+                    } else {
+                        base.value = (cur && (!cur.preset || cur.preset === "custom") && cur.baseUrl) || "";
+                        model.value = (cur && cur.model) || "";
+                        hint.textContent = "";
+                    }
+                }
+                applySel();
+                sel.addEventListener("change", applySel);
+                let done = false;
+                const close = (val) => { if (done) return; done = true; back.classList.remove("show"); setTimeout(() => back.remove(), 200); resolve(val); };
+                back.querySelector(".modal-cancel").addEventListener("click", () => close(null));
+                back.addEventListener("mousedown", (e) => { if (e.target === back) close(null); });
+                back.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); close(null); } });
+                back.querySelector(".modal-ok").addEventListener("click", () => {
+                    if (sel.value === "default") { close({ clear: true }); return; }
+                    const b = base.value.trim();
+                    if (!/^https?:\/\//i.test(b)) { hint.textContent = "Enter a base URL starting with http:// or https://"; return; }
+                    const out = { baseUrl: b };
+                    if (model.value.trim()) out.model = model.value.trim();
+                    if (sel.value !== "custom") out.preset = sel.value;
+                    if (token.value) out.token = token.value; // only send a typed key (blank keeps the stored one)
+                    close(out);
+                });
+                sel.focus();
+            });
+        }
         function wireAccounts() {
             $("accAdd").addEventListener("click", async () => {
                 const tool = accTools.length === 1 ? accTools[0].name
@@ -3551,6 +3644,12 @@ export {
                 else if (op === "remove") { if (await askConfirm("Remove account", "Remove account '" + name + "' and delete its local config dir?", true)) accAction("account.remove", { tool, name }); }
                 else if (op === "rename") { const taken = accAccounts.filter((a) => a.tool === tool).map((a) => a.name); const nn = await askText("Rename account", name, "Rename '" + name + "' to:", nameValidator(taken, name)); if (nn && nn !== name) accAction("account.rename", { tool, name, newName: nn }); }
                 else if (op === "login") { setNote("accountsNote", "To log in, run this in a terminal:  enigma " + tool + " " + name); }
+                else if (op === "provider") {
+                    const a = accAccounts.find((x) => x.tool === tool && x.name === name);
+                    if (!a) return;
+                    const out = await editProvider(a);
+                    if (out) accAction("account.provider", { tool, name, provider: out.clear ? null : out });
+                }
             });
             $("profilesBody").addEventListener("click", async (e) => {
                 const b = e.target.closest("button[data-prof-act]"); if (!b) return;
@@ -3610,7 +3709,7 @@ export {
 
         // --- hash routing between the subpages ---
         // Single source of truth for the subpage ids (savings is the default/fallback).
-        const VIEWS = ["savings", "usage", "accounts", "skills", "settings", "resources", "recall"];
+        const VIEWS = ["savings", "usage", "accounts", "skills", "settings", "resources", "recall", "packs"];
         // Views that apply to a single project; the rest are global/machine-level only.
         const PROJECT_VIEWS = ["settings", "skills"];
         let activeView = "savings";
@@ -3631,6 +3730,7 @@ export {
             else if (v === "usage") { loadProviderStatus(); if (!usageAccountsLoaded) { usageAccountsLoaded = true; loadUsageAccounts(); } }
             else if (v === "resources") loadResources();
             else if (v === "recall") loadRecall();
+            else if (v === "packs") loadPacks();
             // The chart was sized while its view may have been hidden; nudge it on return.
             else if (v === "savings") { loadSystems(true); if (chart) { try { applyRange(); } catch { /* not ready */ } } }
         }
@@ -3690,6 +3790,52 @@ export {
             });
         }
 
+        // --- packs subpage (optional isolated harness packs; marketplace) ---
+        function renderPacks(list) {
+            list = list || [];
+            if (!list.length) { $("packsBody").innerHTML = '<div class="empty" style="padding:12px 0">No packs available.</div>'; return; }
+            $("packsBody").innerHTML = list.map((p) => {
+                const tags = (p.tags || []).map((t) => '<span class="tag">' + esc(t) + '</span>').join(" ");
+                const state = p.installed ? '<span class="tag">' + (p.version ? "installed " + esc(p.version) : "installed") + '</span>' : '<span class="tag">not installed</span>';
+                const added = p.enabled ? '<span class="tag" style="color:var(--ok)">added</span>' : "";
+                const actions = p.installed
+                    ? '<button type="button" class="toggle on" data-pack="launch" data-id="' + esc(p.id) + '">Launch command</button>'
+                        + '<button type="button" class="toggle" data-pack="setup" data-id="' + esc(p.id) + '" title="Register the pack MCP servers (needs Python 3)">Setup MCP</button>'
+                        + '<button type="button" class="toggle" data-pack="update" data-id="' + esc(p.id) + '">Update</button>'
+                        + '<button type="button" class="btn-danger" data-pack="remove" data-id="' + esc(p.id) + '">Remove</button>'
+                    : '<button type="button" class="toggle on" data-pack="install" data-id="' + esc(p.id) + '">Install</button>';
+                return '<div class="panel"><div class="set-row"><div class="set-meta">'
+                    + '<div class="set-name">' + esc(p.label) + " " + state + " " + added + '</div>'
+                    + '<div class="set-hint">' + esc(p.description) + '</div>'
+                    + '<div class="set-hint" style="margin-top:6px">' + tags + ' &nbsp; <a href="' + esc(p.homepage) + '" target="_blank" rel="noopener">source</a></div>'
+                    + '</div></div><div class="set-ctl" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px">' + actions + '</div></div>';
+            }).join("");
+        }
+        async function loadPacks() {
+            $("packsNote").textContent = "";
+            try { renderPacks((await (await fetch("/api/packs", { cache: "no-store" })).json()).packs); }
+            catch { $("packsBody").innerHTML = '<div class="empty" style="padding:12px 0">Packs unavailable.</div>'; }
+        }
+        async function packAction(id, action) {
+            const confirmMsg = action === "remove" ? "Remove this pack and its isolated context?" : null;
+            if (confirmMsg && !(await askConfirm("Confirm", confirmMsg, true))) return;
+            setNote("packsNote", action === "install" || action === "update" ? "Working..." : "Saving...");
+            try {
+                const out = await (await fetch("/api/packs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id, action }) })).json();
+                if (out.packs) renderPacks(out.packs);
+                if (out.command) { try { await navigator.clipboard.writeText(out.command); } catch { /* clipboard blocked */ } }
+                setNote("packsNote", out.note || out.error || (out.ok ? "Done." : "Action failed."), out.ok ? "ok" : "err");
+            } catch { setNote("packsNote", "Could not reach the server.", "err"); }
+        }
+        function wirePacks() {
+            $("packsRefresh").addEventListener("click", loadPacks);
+            $("view-packs").addEventListener("click", (e) => {
+                const b = e.target.closest("button[data-pack]");
+                if (!b) return;
+                packAction(b.dataset.id, b.dataset.pack);
+            });
+        }
+
         // --- recall subpage (local session memory; reads your own transcripts) ---
         const RECALL_TYPES = ["bugfix", "feature", "refactor", "change", "discovery", "decision", "security"];
         let recallProjSig = "";
@@ -3765,6 +3911,9 @@ export {
             llmBtn.setAttribute("aria-checked", p.llm ? "true" : "false");
         }
         let recallItemsById = {};
+        // Multi-select state for the Recall list: a Set of selected ids, the ordered ids as
+        // rendered (for Shift range selection), and the anchor index for the next Shift+click.
+        let recallSel = new Set(), recallOrderIds = [], recallAnchorIdx = null;
         function recallRowHtml(it, anchorId) {
             const ic = '<span class="aicon" title="' + esc(it.source) + '" aria-label="' + esc(it.source) + '">' + (agentSvg(it.source) || esc(it.source)) + "</span>";
             const date = it.createdAt ? new Date(it.createdAt).toISOString().slice(0, 10) : "";
@@ -3786,13 +3935,45 @@ export {
         }
         function renderRecallList(items) {
             recallItemsById = {};
+            // A fresh list invalidates the previous selection (ids may have changed).
+            recallSel = new Set(); recallOrderIds = []; recallAnchorIdx = null;
             if (!items || !items.length) { $("recallList").innerHTML = '<div class="empty" style="padding:16px 0">No memories yet - run a sync, or adjust your search.</div>'; return; }
-            $("recallList").innerHTML = '<div class="panel">' + items.map((it) => {
-                if (it.id) recallItemsById[it.id] = it;
+            const rows = items.map((it) => {
+                // data-idx aligns with recallOrderIds (id'd rows only) so Shift ranges are exact.
+                let dataIdx = "";
+                if (it.id) { recallItemsById[it.id] = it; recallOrderIds.push(it.id); dataIdx = recallOrderIds.length - 1; }
                 const del = it.id ? '<button type="button" class="btn-danger icon recall-del" title="Delete memory" aria-label="Delete this memory" data-del="' + it.id + '">' + TRASH_ICON + "</button>" : "";
-                return '<div class="set-row" style="cursor:pointer" data-rid="' + (it.id || "") + '">' + recallRowHtml(it) + del + "</div>"
+                const check = it.id ? '<input type="checkbox" class="rc-check" data-id="' + it.id + '" aria-label="Select this memory">' : '<span style="width:15px;flex:0 0 auto"></span>';
+                return '<div class="set-row" style="cursor:pointer" data-rid="' + (it.id || "") + '"' + (it.id ? ' data-idx="' + dataIdx + '"' : "") + '>' + check + recallRowHtml(it) + del + "</div>"
                     + '<div id="rd-' + (it.id || "") + '" style="display:none"></div>';
-            }).join("") + "</div>";
+            }).join("");
+            // Bulk-action bar (hidden until something is selected) + the rows.
+            $("recallList").innerHTML = '<div id="recallBulk" class="rc-bulk" style="display:none">'
+                + '<span class="rc-seln" id="recallSelN"></span>'
+                + '<button type="button" class="btn-danger" data-bulk-del>Delete selected</button>'
+                + '<button type="button" class="toggle" data-bulk-clear>Clear selection</button></div>'
+                + '<div class="panel">' + rows + "</div>";
+        }
+        /** Reflect the current selection in the DOM: row highlight, checkboxes, and the bulk bar. */
+        function updateRecallSelUI() {
+            document.querySelectorAll("#recallList .set-row[data-rid]").forEach((row) => {
+                const id = Number(row.dataset.rid);
+                const on = recallSel.has(id);
+                row.classList.toggle("sel", on);
+                const cb = row.querySelector(".rc-check");
+                if (cb) cb.checked = on;
+            });
+            const bar = $("recallBulk");
+            if (bar) {
+                bar.style.display = recallSel.size ? "" : "none";
+                const n = $("recallSelN");
+                if (n) n.textContent = recallSel.size + (recallSel.size === 1 ? " memory selected" : " memories selected");
+            }
+        }
+        /** Select every id between two row indices (inclusive), for Shift+click range selection. */
+        function recallSelectRange(fromIdx, toIdx) {
+            const lo = Math.min(fromIdx, toIdx), hi = Math.max(fromIdx, toIdx);
+            for (let i = lo; i <= hi; i++) { const id = recallOrderIds[i]; if (id) recallSel.add(id); }
         }
         async function loadRecallTimeline(id) {
             const el = $("rtl-" + id);
@@ -3887,6 +4068,16 @@ export {
             $("recallType").addEventListener("change", loadRecall);
             $("recallProject").addEventListener("change", loadRecall);
             $("recallList").addEventListener("click", async (e) => {
+                // Bulk actions on the current multi-selection.
+                if (e.target.closest("[data-bulk-clear]")) { recallSel.clear(); recallAnchorIdx = null; updateRecallSelUI(); return; }
+                if (e.target.closest("[data-bulk-del]")) {
+                    const ids = [...recallSel];
+                    if (!ids.length) return;
+                    const noun = ids.length === 1 ? "memory" : "memories";
+                    if (!(await askConfirm("Delete memories", "Delete " + ids.length + " selected " + noun + "? This cannot be undone.", true))) return;
+                    recallOpPost({ op: "delete", ids }, "Deleting " + ids.length + "...", ids.length + " " + noun + " deleted.");
+                    return;
+                }
                 const del = e.target.closest("[data-del]");
                 if (del) {
                     if (!(await askConfirm("Delete memory", "Delete this memory? This cannot be undone.", true))) return;
@@ -3897,6 +4088,22 @@ export {
                 if (tl) { loadRecallTimeline(tl.dataset.tl); return; }
                 const row = e.target.closest("[data-rid]");
                 if (!row || !row.dataset.rid) return;
+                const id = Number(row.dataset.rid);
+                const cb = e.target.closest(".rc-check");
+                // Selection shortcuts: a checkbox click, Ctrl/Cmd+click (toggle one), or Shift+click
+                // (select the range from the last-clicked anchor through this row, inclusive).
+                if (cb || e.ctrlKey || e.metaKey || e.shiftKey) {
+                    const idx = row.dataset.idx === undefined ? -1 : Number(row.dataset.idx);
+                    if (e.shiftKey && recallAnchorIdx !== null && idx >= 0) {
+                        recallSelectRange(recallAnchorIdx, idx);
+                    } else {
+                        if (recallSel.has(id)) recallSel.delete(id); else recallSel.add(id);
+                        if (idx >= 0) recallAnchorIdx = idx;
+                    }
+                    updateRecallSelUI();
+                    return;
+                }
+                // Plain click expands/collapses the detail (unchanged).
                 const detail = $("rd-" + row.dataset.rid);
                 if (!detail) return;
                 if (detail.innerHTML === "") detail.innerHTML = recallDetailHtml(recallItemsById[row.dataset.rid]);
@@ -4197,6 +4404,7 @@ export {
         wireUsage();
         wireResources();
         wireRecall();
+        wirePacks();
         wireScope();
         enhanceAll(); // upgrade every static <select> into the shared pretty dropdown
         $("cfgExport").addEventListener("click", exportConfig);

package/package.json

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