@enigmax/dashboard 0.1.60 → 0.1.61

package/assets/index.html

@@ -710,10 +710,13 @@
         <div id="recallBody"><div class="empty" style="padding:12px 0">Loading...</div></div>
         <div id="recallProviderPanel" class="panel" style="display:none">
             <div class="set-cat-h">Memory provider</div>
-            <div class="set-hint" style="padding:4px 0">Which LLM curates your memory (keeps only what's worth remembering). <code>claude-local</code> uses your Claude Code login - no key. For another provider, pick it and set the model/base/key; the key can also come from <code>ENIGMA_RECALL_API_KEY</code>.</div>
-            <div class="set-row"><div class="set-meta"><div class="set-name">LLM curation</div><div class="set-hint">off = deterministic heuristic, no network</div></div><div class="set-ctl"><button id="recallLlmBtn" type="button" class="toggle">...</button></div></div>
+            <div class="set-hint" style="padding:4px 0">Which model curates your memory - it keeps only what's worth remembering. The default reuses your local Claude Code login (no key). Or pick Anthropic or an OpenAI-compatible API and add its key. The key is stored encrypted, and <code>ENIGMA_RECALL_API_KEY</code> overrides it.</div>
+            <div class="set-row"><div class="set-meta"><div class="set-name">LLM curation</div><div class="set-hint">Off falls back to a local heuristic - no network calls</div></div><div class="set-ctl"><button id="recallLlmBtn" type="button" class="toggle" data-kind="bool" role="switch" aria-checked="false" aria-label="LLM curation">off</button></div></div>
             <div class="ladd" style="gap:8px;flex-wrap:wrap;margin-top:8px">
-                <select id="recallProv" class="linput" style="max-width:160px"></select>
+                <div class="dd" id="recallProvDD">
+                    <button type="button" class="dd-btn" aria-haspopup="listbox" aria-expanded="false"><span class="dd-ic"></span><span class="dd-label"></span><svg class="dd-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
+                    <ul class="dd-menu" role="listbox" aria-label="Memory provider" hidden></ul>
+                </div>
                 <input id="recallModel" class="linput" placeholder="model (provider default)" style="flex:1;min-width:160px">
             </div>
             <div id="recallKeyRow" class="ladd" style="gap:8px;flex-wrap:wrap;margin-top:8px">
@@ -730,6 +733,24 @@
                 <select id="recallProject" class="linput" style="max-width:200px"></select>
             </div>
         </div>
+        <div id="recallAddPanel" class="panel" style="display:none">
+            <div class="set-cat-h">Add a memory</div>
+            <div class="set-hint" style="padding:4px 0">Write one yourself, or generate it from a short note with the configured model.</div>
+            <div class="ladd" style="gap:8px;flex-wrap:wrap">
+                <select id="recallNewType" class="linput" style="max-width:150px"></select>
+                <input id="recallNewTitle" class="linput" placeholder="Title" style="flex:1;min-width:200px">
+                <input id="recallNewProject" class="linput" placeholder="Project (optional)" style="flex:1;min-width:140px">
+            </div>
+            <div class="ladd" style="gap:8px;flex-wrap:wrap;margin-top:8px">
+                <input id="recallNewNarrative" class="linput" placeholder="What's worth remembering (optional)" style="flex:1;min-width:240px">
+                <input id="recallNewFacts" class="linput" placeholder="Facts, comma-separated (optional)" style="flex:1;min-width:200px">
+            </div>
+            <div style="margin-top:8px"><button id="recallCreate" type="button" class="toggle on">Save memory</button></div>
+            <div class="ladd" style="gap:8px;flex-wrap:wrap;margin-top:12px;border-top:1px solid rgba(128,128,128,.2);padding-top:12px">
+                <input id="recallGenNote" class="linput" placeholder="Note to generate a memory from..." style="flex:1;min-width:260px">
+                <button id="recallGenerate" type="button" class="toggle" title="Generate a structured memory from your note">Generate with LLM</button>
+            </div>
+        </div>
         <div id="recallList"></div>
     </section>
 
@@ -3361,14 +3382,14 @@ export {
             v = v || {};
             if (!v.available) {
                 $("recallBody").innerHTML = '<div class="panel"><div class="empty" style="padding:16px 0">Recall needs the enigma binary - open the dashboard via the enigma app.</div></div>';
-                $("recallSearch").style.display = "none"; $("recallProviderPanel").style.display = "none"; $("recallList").innerHTML = ""; return;
+                $("recallSearch").style.display = "none"; $("recallProviderPanel").style.display = "none"; $("recallAddPanel").style.display = "none"; $("recallList").innerHTML = ""; return;
             }
             if (!v.enabled) {
                 $("recallBody").innerHTML = '<div class="panel"><div class="set-cat-h">Session memory is off</div>'
                     + '<div class="set-hint" style="padding:8px 0">Build a searchable memory of your coding sessions from your own transcripts.</div>'
                     + '<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><button type="button" class="toggle" data-recall-on="1">Enable recall</button>'
                     + '<span class="set-hint">or run <code>enigma config recall on</code></span></div></div>';
-                $("recallSearch").style.display = "none"; $("recallProviderPanel").style.display = "none"; $("recallList").innerHTML = ""; return;
+                $("recallSearch").style.display = "none"; $("recallProviderPanel").style.display = "none"; $("recallAddPanel").style.display = "none"; $("recallList").innerHTML = ""; return;
             }
             const s = v.stats || {};
             const types = Object.entries(s.byType || {}).map(([t, n]) => '<span class="tag">' + esc(t) + " " + n + "</span>").join(" ");
@@ -3379,7 +3400,9 @@ export {
                 + (s.projects || 0) + " projects · " + Math.round((s.dbBytes || 0) / 1024) + " KB · " + esc(last) + "</div>"
                 + (types ? '<div style="padding-top:6px">' + types + "</div>" : "") + "</div>";
             $("recallSearch").style.display = "";
+            $("recallAddPanel").style.display = "";
             if (!$("recallType").options.length) $("recallType").innerHTML = '<option value="">All types</option>' + RECALL_TYPES.map((t) => '<option value="' + t + '">' + t + "</option>").join("");
+            if (!$("recallNewType").options.length) $("recallNewType").innerHTML = RECALL_TYPES.map((t) => '<option value="' + t + '">' + t + "</option>").join("");
             const sig = (v.projects || []).join("|");
             if (sig !== recallProjSig) {
                 const keep = $("recallProject").value;
@@ -3390,13 +3413,30 @@ export {
             renderRecallProvider(v.provider);
             renderRecallList(v.items);
         }
-        let recallProvSig = "";
+        // Provider picker shows the right logo + a human label (the stored value stays the
+        // internal id). claude-local and anthropic are Anthropic models (Claude logo); openai
+        // is any OpenAI-compatible endpoint (OpenAI/Codex logo).
+        const RECALL_PROV_META = {
+            "claude-local": { label: "Claude Code (local login)", icon: "claude" },
+            "anthropic":    { label: "Anthropic API",            icon: "claude" },
+            "openai":       { label: "OpenAI-compatible",         icon: "codex" },
+        };
+        let recallProvDD = null, recallProvVal = "claude-local";
         function renderRecallProvider(p) {
             if (!p) { $("recallProviderPanel").style.display = "none"; return; }
             $("recallProviderPanel").style.display = "";
-            const sig = (p.providers || []).join("|");
-            if (sig !== recallProvSig) { $("recallProv").innerHTML = (p.providers || []).map((x) => '<option value="' + x + '">' + x + "</option>").join(""); recallProvSig = sig; }
-            $("recallProv").value = p.provider;
+            recallProvVal = p.provider;
+            if (!recallProvDD) {
+                const entries = (p.providers || []).map((v) => {
+                    const m = RECALL_PROV_META[v] || { label: v, icon: "" };
+                    return { value: v, label: m.label, icon: agentSvg(m.icon) };
+                });
+                recallProvDD = iconDropdown("recallProvDD", entries, () => recallProvVal, (val) => {
+                    recallProvVal = val;
+                    $("recallKeyRow").style.display = val === "claude-local" ? "none" : "";
+                });
+            }
+            recallProvDD.render();
             $("recallModel").value = p.model || "";
             $("recallBase").value = p.base || "";
             $("recallKey").placeholder = p.keyFromEnv ? "set via ENIGMA_RECALL_API_KEY" : (p.hasKey ? "set - leave blank to keep" : "API key");
@@ -3407,6 +3447,7 @@ export {
             llmBtn.textContent = p.llm ? "on" : "off";
             llmBtn.classList.toggle("on", !!p.llm);
             llmBtn.dataset.on = p.llm ? "1" : "0";
+            llmBtn.setAttribute("aria-checked", p.llm ? "true" : "false");
         }
         let recallItemsById = {};
         function recallRowHtml(it, anchorId) {
@@ -3425,7 +3466,8 @@ export {
                 + facts
                 + (it.concepts && it.concepts.length ? '<div style="margin-top:6px">' + tags(it.concepts) + "</div>" : "")
                 + list("Modified", it.files) + list("Read", it.filesRead)
-                + '<div style="margin-top:8px"><button type="button" class="toggle" data-tl="' + it.id + '">Show timeline</button></div>'
+                + '<div style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap"><button type="button" class="toggle" data-tl="' + it.id + '">Show timeline</button>'
+                + (it.id ? '<button type="button" class="btn-danger" data-del="' + it.id + '" title="Delete this memory">Delete</button>' : "") + "</div>"
                 + '<div class="rtl" id="rtl-' + it.id + '"></div></div>';
         }
         function renderRecallList(items) {
@@ -3482,6 +3524,16 @@ export {
                 setNote("recallNote", out.ok ? "Saved." : (out.error || "Failed."), out.ok ? "ok" : "err");
             } catch { setNote("recallNote", "Could not reach the server.", "err"); }
         }
+        // Generic recall action post (delete/create/generate); refreshes the view and returns ok.
+        async function recallOpPost(body, msg, okMsg) {
+            setNote("recallNote", msg || "Working...");
+            try {
+                const out = await (await fetch("/api/recall", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })).json();
+                if (out.view) renderRecall(out.view);
+                setNote("recallNote", out.ok ? (okMsg || "Done.") : (out.error || "Failed."), out.ok ? "ok" : "err");
+                return out.ok;
+            } catch { setNote("recallNote", "Could not reach the server.", "err"); return false; }
+        }
         function wireRecall() {
             $("recallSync").addEventListener("click", () => recallAction("sync"));
             $("recallClear").addEventListener("click", () => recallAction("clear", "Delete all stored session memory? This cannot be undone."));
@@ -3489,20 +3541,43 @@ export {
                 const t = e.target.closest("[data-recall-on]");
                 if (t) setRecallEnabled(t.dataset.recallOn === "1");
             });
-            // Provider panel: toggle which select fields apply; save provider; flip LLM curation.
-            $("recallProv").addEventListener("change", () => { $("recallKeyRow").style.display = $("recallProv").value === "claude-local" ? "none" : ""; });
+            // Provider panel: save provider; flip LLM curation. The provider picker is the
+            // custom icon dropdown (recallProvVal), wired in renderRecallProvider.
             $("recallProvSave").addEventListener("click", () => {
-                const e = { provider: $("recallProv").value, model: $("recallModel").value.trim(), base: $("recallBase").value.trim() };
+                const e = { provider: recallProvVal, model: $("recallModel").value.trim(), base: $("recallBase").value.trim() };
                 if (!$("recallKey").disabled && $("recallKey").value) e.key = $("recallKey").value; // only send a key the user typed
                 recallProviderPost(e, "Saving provider...");
                 $("recallKey").value = "";
             });
             $("recallLlmBtn").addEventListener("click", () => recallProviderPost({ llm: $("recallLlmBtn").dataset.on !== "1" }, "Updating curation..."));
+            // Add a memory: manual form, or generate one from a note via the configured model.
+            $("recallCreate").addEventListener("click", async () => {
+                const title = $("recallNewTitle").value.trim();
+                if (!title) { setNote("recallNote", "A title is required.", "err"); return; }
+                const facts = $("recallNewFacts").value.split(",").map((s) => s.trim()).filter(Boolean);
+                const ok = await recallOpPost({
+                    op: "create", type: $("recallNewType").value, title, project: $("recallNewProject").value.trim(),
+                    narrative: $("recallNewNarrative").value.trim(), facts,
+                }, "Saving memory...", "Memory saved.");
+                if (ok) { $("recallNewTitle").value = ""; $("recallNewNarrative").value = ""; $("recallNewFacts").value = ""; }
+            });
+            $("recallGenerate").addEventListener("click", async () => {
+                const prompt = $("recallGenNote").value.trim();
+                if (!prompt) { setNote("recallNote", "Write a note to generate from.", "err"); return; }
+                const ok = await recallOpPost({ op: "generate", prompt, project: $("recallNewProject").value.trim() }, "Generating memory...", "Memory generated.");
+                if (ok) $("recallGenNote").value = "";
+            });
             let t; const deb = () => { clearTimeout(t); t = setTimeout(loadRecall, 250); };
             $("recallQ").addEventListener("input", deb);
             $("recallType").addEventListener("change", loadRecall);
             $("recallProject").addEventListener("change", loadRecall);
-            $("recallList").addEventListener("click", (e) => {
+            $("recallList").addEventListener("click", async (e) => {
+                const del = e.target.closest("[data-del]");
+                if (del) {
+                    if (!(await askConfirm("Delete memory", "Delete this memory? This cannot be undone.", true))) return;
+                    recallOpPost({ op: "delete", id: Number(del.dataset.del) }, "Deleting...", "Memory deleted.");
+                    return;
+                }
                 const tl = e.target.closest("[data-tl]");
                 if (tl) { loadRecallTimeline(tl.dataset.tl); return; }
                 const row = e.target.closest("[data-rid]");

package/package.json

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