npm - @pinkpixel/memi - Versions diffs - 0.0.0-stage → 0.1.0 - Mend

@pinkpixel/memi 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/LICENSE +202 -0
package/package.json +56 -4
package/skills/memi-curate/SKILL.md +89 -0
package/skills/memi-memory/SKILL.md +141 -0
package/skills/memi-memory/references/examples.md +50 -0
package/skills/memi-memory/references/rubrics.md +44 -0
package/skills/memi-setup/SKILL.md +144 -0
package/ui/css/controls.css +274 -0
package/ui/css/dialogs.css +145 -0
package/ui/css/layout.css +237 -0
package/ui/css/memories.css +168 -0
package/ui/css/tokens.css +125 -0
package/ui/favicon.svg +1 -0
package/ui/fonts/OFL.txt +192 -0
package/ui/fonts/geist-latin-wght-normal.woff2 +0 -0
package/ui/fonts/geist-mono-latin-wght-normal.woff2 +0 -0
package/ui/index.html +75 -0
package/ui/js/api.js +30 -0
package/ui/js/confirm.js +29 -0
package/ui/js/dom.js +49 -0
package/ui/js/editor.js +133 -0
package/ui/js/icons.js +29 -0
package/ui/js/list.js +66 -0
package/ui/js/main.js +244 -0
package/ui/js/sidebar.js +85 -0
package/ui/js/state.js +61 -0
package/ui/js/toast.js +10 -0
package/README.md +0 -3

package/ui/fonts/geist-latin-wght-normal.woff2 ADDED Viewed

Binary file

package/ui/fonts/geist-mono-latin-wght-normal.woff2 ADDED Viewed

Binary file

package/ui/index.html ADDED Viewed

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="color-scheme" content="dark" />
+    <title>memi</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="/css/tokens.css" />
+    <link rel="stylesheet" href="/css/layout.css" />
+    <link rel="stylesheet" href="/css/controls.css" />
+    <link rel="stylesheet" href="/css/memories.css" />
+    <link rel="stylesheet" href="/css/dialogs.css" />
+    <script type="module" src="/js/main.js"></script>
+  </head>
+  <body>
+    <div class="app">
+      <aside class="sidebar" id="sidebar" aria-label="Filters">
+        <div class="sidebar-head">
+          <span class="brand">memi</span>
+          <button class="btn btn-icon sidebar-close" id="drawer-close" type="button" title="Close filters" aria-label="Close filters">
+            <span data-icon="x"></span>
+          </button>
+        </div>
+        <div class="sidebar-body" id="filters"></div>
+        <div class="sidebar-foot" id="embedder"></div>
+      </aside>
+      <button class="backdrop" id="backdrop" type="button" tabindex="-1" aria-label="Close filters"></button>
+      <main class="main">
+        <header class="topbar">
+          <button class="btn filters-toggle" id="drawer-open" type="button" aria-controls="sidebar" aria-expanded="false" title="Filters">
+            <span data-icon="sliders-horizontal"></span>
+            Filters
+          </button>
+          <span class="spacer"></span>
+          <div class="search">
+            <span data-icon="search"></span>
+            <input class="input" id="search" type="search" placeholder="Search memories" aria-label="Search memories" autocomplete="off" spellcheck="false" />
+            <button class="btn btn-icon clear" id="search-clear" type="button" title="Clear search" aria-label="Clear search" hidden>
+              <span data-icon="x"></span>
+            </button>
+          </div>
+          <button class="btn btn-primary" id="new" type="button" title="New memory (n)">
+            <span data-icon="plus"></span>
+            New
+          </button>
+        </header>
+        <div class="statusline">
+          <div class="left" id="summary" aria-live="polite"></div>
+          <div class="right">
+            <div class="segmented" id="mode" role="group" aria-label="Search mode" hidden></div>
+            <select class="select" id="order" aria-label="Sort order">
+              <option value="recent">Recent</option>
+              <option value="oldest">Oldest</option>
+              <option value="importance">Importance</option>
+            </select>
+          </div>
+        </div>
+        <div class="scroller" id="scroller">
+          <div class="banners" id="banners"></div>
+          <ul class="list" id="list" aria-label="Memories"></ul>
+          <div id="empty"></div>
+          <div class="list-foot" id="more"></div>
+        </div>
+      </main>
+    </div>
+    <dialog class="sheet" id="editor" aria-labelledby="editor-title"></dialog>
+    <dialog class="modal" id="confirm" aria-labelledby="confirm-title"></dialog>
+    <div id="toasts" role="status" aria-live="polite"></div>
+  </body>
+</html>

package/ui/js/api.js ADDED Viewed

@@ -0,0 +1,30 @@
+async function call(method, path, body) {
+  let res;
+  try {
+    res = await fetch(path, {
+      method,
+      headers: body === undefined ? undefined : { "content-type": "application/json" },
+      body: body === undefined ? undefined : JSON.stringify(body),
+    });
+  } catch {
+    throw new Error("Can't reach memi. Is `memi ui` still running?");
+  }
+  if (res.status === 204) return null;
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error ?? `Request failed (${res.status})`);
+  return data;
+}
+export const getStatus = () => call("GET", "/api/status");
+export function listMemories(params) {
+  const qs = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null && value !== "") qs.set(key, String(value));
+  }
+  return call("GET", `/api/memories?${qs}`);
+}
+export const addMemory = (body) => call("POST", "/api/memories", body);
+export const updateMemory = (id, body) => call("PATCH", `/api/memories/${id}`, body);
+export const deleteMemory = (id) => call("DELETE", `/api/memories/${id}`);

package/ui/js/confirm.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { $, clear, h } from "./dom.js";
+const SNIPPET = 160;
+/** Asks before deleting. Resolves true only if Delete was chosen. */
+export function confirmDelete(memory) {
+  const dlg = $("#confirm");
+  const text = memory.content.length > SNIPPET ? `${memory.content.slice(0, SNIPPET)}...` : memory.content;
+  clear(dlg).append(
+    h(
+      "form",
+      { method: "dialog", class: "dialog-form" },
+      h("div", { class: "dialog-head" }, h("h2", { id: "confirm-title" }, `Delete memory #${memory.id}?`)),
+      h("div", { class: "dialog-body" }, h("p", {}, text), h("p", { class: "fine" }, "This can't be undone.")),
+      h(
+        "div",
+        { class: "dialog-foot" },
+        h("span", { class: "spacer" }),
+        h("button", { class: "btn", type: "submit", value: "cancel", autofocus: true }, "Cancel"),
+        h("button", { class: "btn btn-danger solid", type: "submit", value: "delete" }, "Delete"),
+      ),
+    ),
+  );
+  return new Promise((resolve) => {
+    dlg.addEventListener("close", () => resolve(dlg.returnValue === "delete"), { once: true });
+    dlg.returnValue = "cancel";
+    dlg.showModal();
+  });
+}

package/ui/js/dom.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { icon } from "./icons.js";
+// These are set as properties. Everything else becomes an attribute (aria-*, for, list, role, ...).
+const PROPS = new Set(["value", "checked", "disabled", "selected", "hidden", "textContent"]);
+/**
+ * Creates an element. String children always become text nodes, never markup, so memory
+ * text (which anyone can write) can't inject HTML.
+ */
+export function h(tag, props = {}, ...children) {
+  const el = document.createElement(tag);
+  for (const [key, value] of Object.entries(props ?? {})) {
+    if (value == null || value === false) continue;
+    if (key === "class") el.className = value;
+    else if (key.startsWith("on") && typeof value === "function") el.addEventListener(key.slice(2), value);
+    else if (PROPS.has(key)) el[key] = value;
+    else el.setAttribute(key, value === true ? "" : String(value));
+  }
+  el.append(...children.flat().filter((c) => c != null && c !== false));
+  return el;
+}
+export const $ = (selector, root = document) => root.querySelector(selector);
+export function clear(el) {
+  el.replaceChildren();
+  return el;
+}
+/** Fills every <span data-icon="name"> under root with its icon. */
+export function hydrateIcons(root = document) {
+  for (const el of root.querySelectorAll("[data-icon]")) el.replaceWith(icon(el.dataset.icon));
+}
+/** Re-renders and keeps keyboard focus on the same control if it still exists. */
+export function keepFocus(render) {
+  const key = document.activeElement?.dataset?.key;
+  render();
+  if (key) document.querySelector(`[data-key="${CSS.escape(key)}"]`)?.focus();
+}
+export async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/ui/js/editor.js ADDED Viewed

@@ -0,0 +1,133 @@
+import * as api from "./api.js";
+import { $, clear, h } from "./dom.js";
+import { icon } from "./icons.js";
+const MAX = 8000;
+function field(label, id, control, ...rest) {
+  return h("div", { class: "field" }, h("label", { for: id }, label), control, ...rest);
+}
+const radio = (name, value, label, checked, onchange) =>
+  h("label", {}, h("input", { type: "radio", name, value: String(value), checked, onchange }), label);
+/**
+ * Opens the side sheet to add a memory (memory = null) or edit one.
+ * ctx: { categories, projects, currentProject, onSaved(result, isNew), onDelete(memory) }
+ */
+export function openEditor(ctx, memory) {
+  const dlg = $("#editor");
+  const isNew = !memory;
+  const m = memory ?? {
+    content: "",
+    category: "context",
+    importance: 3,
+    tags: [],
+    pinned: false,
+    scope: ctx.currentProject ? "project" : "global",
+    project: ctx.currentProject,
+  };
+  const content = h("textarea", { class: "textarea", id: "f-content", required: true, maxlength: MAX, rows: 7, value: m.content, placeholder: "What should be remembered?" });
+  const category = h("input", { class: "input", id: "f-category", list: "f-categories", value: m.category, autocomplete: "off", spellcheck: "false", maxlength: 32, required: true });
+  const tags = h("input", { class: "input", id: "f-tags", value: m.tags.join(", "), autocomplete: "off", spellcheck: "false", placeholder: "ci, deploy" });
+  const project = h("input", { class: "input", id: "f-project", list: "f-projects", value: m.project ?? "", autocomplete: "off", spellcheck: "false", placeholder: "Project name" });
+  const pinned = h("input", { type: "checkbox", id: "f-pinned", checked: m.pinned });
+  const error = h("p", { class: "form-error", role: "alert", hidden: true });
+  const save = h("button", { class: "btn btn-primary", type: "submit" }, isNew ? "Save" : "Save changes");
+  const syncScope = () => {
+    const isProject = form.elements.scope.value === "project";
+    projectField.hidden = !isProject;
+    project.required = isProject;
+  };
+  const projectField = h("div", { class: "field" }, h("label", { for: "f-project" }, "Project"), project);
+  const form = h(
+    "form",
+    { class: "dialog-form" },
+    h(
+      "div",
+      { class: "dialog-head" },
+      h("h2", { id: "editor-title" }, isNew ? "New memory" : `Memory #${m.id}`),
+      h("button", { class: "btn btn-icon", type: "button", title: "Close", "aria-label": "Close", onclick: () => dlg.close() }, icon("x")),
+    ),
+    h(
+      "div",
+      { class: "dialog-body" },
+      field("Memory", "f-content", content),
+      h(
+        "div",
+        { class: "field-row" },
+        h("div", { class: "field" }, h("label", { for: "f-category" }, "Category"), category),
+        h("div", { class: "field" }, h("span", { class: "label", id: "l-importance" }, "Importance"), h("div", { class: "segmented", role: "radiogroup", "aria-labelledby": "l-importance" }, ...[1, 2, 3, 4, 5].map((n) => radio("importance", n, String(n), m.importance === n)))),
+      ),
+      h(
+        "div",
+        { class: "field" },
+        h("span", { class: "label", id: "l-scope" }, "Scope"),
+        h("div", { class: "segmented", role: "radiogroup", "aria-labelledby": "l-scope" }, radio("scope", "global", "Global", m.scope === "global", syncScope), radio("scope", "project", "Project", m.scope === "project", syncScope)),
+      ),
+      projectField,
+      field("Tags", "f-tags", tags),
+      h("label", { class: "check-row", for: "f-pinned" }, pinned, "Pinned"),
+      h("datalist", { id: "f-categories" }, ...ctx.categories.map((c) => h("option", { value: c.name }))),
+      h("datalist", { id: "f-projects" }, ...ctx.projects.map((p) => h("option", { value: p.project }))),
+      error,
+      isNew ? null : h("p", { class: "fine" }, `Created ${new Date(m.createdAt).toLocaleString()}`, h("br"), `Updated ${new Date(m.updatedAt).toLocaleString()}`, m.agent ? ` by ${m.agent}` : ""),
+    ),
+    h(
+      "div",
+      { class: "dialog-foot" },
+      isNew ? null : h("button", { class: "btn btn-danger", type: "button", onclick: () => ctx.onDelete(memory) }, icon("trash-2", 16), "Delete"),
+      h("span", { class: "spacer" }),
+      h("button", { class: "btn", type: "button", onclick: () => dlg.close() }, "Cancel"),
+      save,
+    ),
+  );
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const isProject = form.elements.scope.value === "project";
+    const body = {
+      content: content.value,
+      category: category.value,
+      importance: Number(form.elements.importance.value),
+      tags: tags.value.split(",").map((t) => t.trim()).filter(Boolean),
+      pinned: pinned.checked,
+      scope: isProject ? "project" : "global",
+      project: isProject ? project.value.trim() : isNew ? undefined : null,
+    };
+    error.hidden = true;
+    save.classList.add("loading");
+    try {
+      const result = isNew ? await api.addMemory(body) : await api.updateMemory(m.id, body);
+      dlg.close();
+      ctx.onSaved(result, isNew);
+    } catch (err) {
+      error.textContent = err.message;
+      error.hidden = false;
+    } finally {
+      save.classList.remove("loading");
+    }
+  });
+  form.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) form.requestSubmit();
+  });
+  // Clicking the dimmed area closes the sheet, but not when a text selection merely ends there.
+  let downOnBackdrop = false;
+  dlg.onmousedown = (e) => (downOnBackdrop = e.target === dlg);
+  dlg.onclick = (e) => {
+    if (e.target === dlg && downOnBackdrop) dlg.close();
+  };
+  clear(dlg).append(form);
+  syncScope();
+  dlg.showModal();
+  // On a phone, focusing an existing memory would raise the keyboard over the form. New memories always want typing.
+  if (isNew || matchMedia("(pointer: fine)").matches) {
+    content.focus();
+    if (!isNew) content.setSelectionRange(0, 0);
+  }
+}

package/ui/js/icons.js ADDED Viewed

@@ -0,0 +1,29 @@
+// Icons from Lucide (https://lucide.dev), ISC License. Copyright (c) Lucide Contributors.
+// The markup below is static and trusted. Never put user text in it.
+const PATHS = {
+  "check": '<path d="M20 6 9 17l-5-5"/>',
+  "copy": '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/> <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  "folder": '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+  "globe": '<circle cx="12" cy="12" r="10"/> <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/> <path d="M2 12h20"/>',
+  "info": '<circle cx="12" cy="12" r="10"/> <path d="M12 16v-4"/> <path d="M12 8h.01"/>',
+  "pencil": '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/> <path d="m15 5 4 4"/>',
+  "pin-off": '<path d="M12 17v5"/> <path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/> <path d="m2 2 20 20"/> <path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/>',
+  "pin": '<path d="M12 17v5"/> <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>',
+  "plus": '<path d="M5 12h14"/> <path d="M12 5v14"/>',
+  "search": '<path d="m21 21-4.34-4.34"/> <circle cx="11" cy="11" r="8"/>',
+  "sliders-horizontal": '<path d="M10 5H3"/> <path d="M12 19H3"/> <path d="M14 3v4"/> <path d="M16 17v4"/> <path d="M21 12h-9"/> <path d="M21 19h-5"/> <path d="M21 5h-7"/> <path d="M8 10v4"/> <path d="M8 12H3"/>',
+  "trash-2": '<path d="M10 11v6"/> <path d="M14 11v6"/> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/> <path d="M3 6h18"/> <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
+  "triangle-alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/> <path d="M12 9v4"/> <path d="M12 17h.01"/>',
+  "x": '<path d="M18 6 6 18"/> <path d="m6 6 12 12"/>',
+};
+/** Returns an inline SVG element. It inherits color from the surrounding text. */
+export function icon(name, size = 18) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  for (const [k, v] of Object.entries({
+    width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
+    "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false",
+  })) svg.setAttribute(k, v);
+  svg.innerHTML = PATHS[name] ?? "";
+  return svg;
+}

package/ui/js/list.js ADDED Viewed

@@ -0,0 +1,66 @@
+import { h } from "./dom.js";
+import { icon } from "./icons.js";
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const UNITS = [
+  ["year", 31536000],
+  ["month", 2592000],
+  ["day", 86400],
+  ["hour", 3600],
+  ["minute", 60],
+];
+function ago(iso) {
+  const seconds = (Date.parse(iso) - Date.now()) / 1000;
+  for (const [unit, size] of UNITS) if (Math.abs(seconds) >= size) return rtf.format(Math.round(seconds / size), unit);
+  return "just now";
+}
+function pips(n) {
+  const wrap = h("span", { class: "pips", role: "img", "aria-label": `Importance ${n} of 5`, title: `Importance ${n} of 5` });
+  for (let i = 1; i <= 5; i++) wrap.append(h("span", { class: i <= n ? "pip on" : "pip" }));
+  return wrap;
+}
+function meta(m) {
+  const where = m.scope === "global" ? [icon("globe", 12), "global"] : [icon("folder", 12), m.project];
+  return h(
+    "div",
+    { class: "meta" },
+    m.pinned ? h("span", { class: "chip pinned" }, icon("pin", 12), h("span", { class: "sr-only" }, "Pinned")) : null,
+    h("span", { class: "chip category" }, m.category),
+    pips(m.importance),
+    h("span", { class: "chip" }, ...where),
+    ...m.tags.map((t) => h("span", { class: "chip" }, `#${t}`)),
+    h("span", {}, `#${m.id}`),
+    h("time", { datetime: m.updatedAt, title: new Date(m.updatedAt).toLocaleString() }, ago(m.updatedAt)),
+    m.agent ? h("span", {}, `by ${m.agent}`) : null,
+  );
+}
+/** One memory row: the text opens the editor, the buttons beside it pin and delete. */
+export function rowEl(m, { onEdit, onPin, onDelete }) {
+  return h(
+    "li",
+    { class: "row", "data-id": m.id },
+    h("button", { class: "row-main", type: "button", "aria-label": `Edit memory ${m.id}`, onclick: () => onEdit(m) }, h("span", { class: "row-content" }, m.content), meta(m)),
+    h(
+      "div",
+      { class: "row-actions" },
+      h(
+        "button",
+        {
+          class: "btn btn-icon",
+          type: "button",
+          "data-key": `pin-${m.id}`,
+          "aria-pressed": m.pinned ? "true" : "false",
+          title: m.pinned ? "Unpin" : "Pin",
+          "aria-label": m.pinned ? `Unpin memory ${m.id}` : `Pin memory ${m.id}`,
+          onclick: () => onPin(m),
+        },
+        icon(m.pinned ? "pin-off" : "pin"),
+      ),
+      h("button", { class: "btn btn-icon danger", type: "button", title: "Delete", "aria-label": `Delete memory ${m.id}`, onclick: () => onDelete(m) }, icon("trash-2")),
+    ),
+  );
+}

package/ui/js/main.js ADDED Viewed

@@ -0,0 +1,244 @@
+import * as api from "./api.js";
+import { confirmDelete } from "./confirm.js";
+import { $, clear, copyText, h, hydrateIcons, keepFocus } from "./dom.js";
+import { openEditor } from "./editor.js";
+import { icon } from "./icons.js";
+import { rowEl } from "./list.js";
+import { renderSidebar } from "./sidebar.js";
+import { PAGE, hasFilters, queryParams, savePrefs, state } from "./state.js";
+import { toast } from "./toast.js";
+const els = {
+  sidebar: $("#sidebar"),
+  backdrop: $("#backdrop"),
+  drawerOpen: $("#drawer-open"),
+  search: $("#search"),
+  clear: $("#search-clear"),
+  mode: $("#mode"),
+  order: $("#order"),
+  summary: $("#summary"),
+  banners: $("#banners"),
+  list: $("#list"),
+  empty: $("#empty"),
+  more: $("#more"),
+};
+const phone = matchMedia("(max-width: 899px)");
+let loadSeq = 0;
+/* Drawer (phones only) */
+function setDrawer(open) {
+  els.sidebar.classList.toggle("open", open);
+  els.backdrop.classList.toggle("open", open);
+  els.drawerOpen.setAttribute("aria-expanded", String(open));
+  els.sidebar.inert = phone.matches && !open;
+  if (open) els.sidebar.querySelector("button, input")?.focus();
+}
+phone.addEventListener("change", () => setDrawer(false));
+/* Loading */
+async function loadStatus() {
+  try {
+    state.status = await api.getStatus();
+    keepFocus(() => renderSidebar(onFilterChange));
+    renderBanners();
+  } catch (err) {
+    state.error = err.message;
+    renderResults();
+  }
+}
+async function loadMemories({ append = false } = {}) {
+  const seq = ++loadSeq;
+  state.loading = true;
+  els.list.setAttribute("aria-busy", "true");
+  try {
+    const r = await api.listMemories(queryParams(append ? state.items.length : 0));
+    if (seq !== loadSeq) return;
+    state.items = append ? [...state.items, ...r.items] : r.items;
+    state.total = r.total;
+    state.modeUsed = r.modeUsed;
+    state.note = r.note;
+    state.error = null;
+  } catch (err) {
+    if (seq !== loadSeq) return;
+    state.error = err.message;
+  }
+  state.loading = false;
+  els.list.removeAttribute("aria-busy");
+  renderResults();
+}
+const refresh = () => Promise.all([loadStatus(), loadMemories()]);
+function onFilterChange() {
+  if (phone.matches) setDrawer(false);
+  keepFocus(() => renderSidebar(onFilterChange));
+  loadMemories();
+}
+function clearFilters() {
+  Object.assign(state, { query: "", scope: { kind: "all", project: null }, category: "", minImportance: 0, pinned: false });
+  els.search.value = "";
+  els.clear.hidden = true;
+  renderSidebar(onFilterChange);
+  loadMemories();
+}
+/* Rendering */
+const MODE_LABELS = { hybrid: "Hybrid", semantic: "Meaning", text: "Keyword" };
+function renderBanners() {
+  clear(els.banners);
+  const s = state.status;
+  if (state.error) {
+    els.banners.append(
+      h("div", { class: "banner error", role: "alert" }, icon("triangle-alert"), h("span", { class: "text" }, state.error), h("button", { class: "btn", type: "button", onclick: refresh }, "Retry")),
+    );
+  }
+  if (!s) return;
+  const command = (text) =>
+    h("code", {}, text, h("button", { class: "btn btn-icon", type: "button", title: "Copy command", "aria-label": `Copy ${text}`, onclick: async (e) => ((await copyText(text)) ? toast("Copied.", { kind: "success", ms: 1800 }) : toast("Couldn't copy. Select it instead.", { kind: "error" })) }, icon("copy", 14)));
+  if (s.state.status === "mismatch") {
+    const { provider, model } = s.state.stored;
+    els.banners.append(
+      h("div", { class: "banner", title: s.warning }, icon("triangle-alert"), h("span", { class: "text" }, `Embedder changed from ${provider}/${model}. Semantic search is off. Memories are kept. Run`), command("memi reindex")),
+    );
+  } else if (s.state.status === "ok" && s.vectors < s.total) {
+    els.banners.append(h("div", { class: "banner" }, icon("info"), h("span", { class: "text" }, `${s.total - s.vectors} memories have no vector yet. Run`), command("memi reindex --missing")));
+  }
+}
+function renderResults() {
+  renderBanners();
+  const searching = state.query !== "";
+  const noun = (n) => `${n} ${searching ? "result" : "memor"}${searching ? (n === 1 ? "" : "s") : n === 1 ? "y" : "ies"}`;
+  clear(els.summary).append(h("span", {}, state.loading && !state.items.length ? "Loading" : noun(state.total)));
+  if (searching && state.modeUsed && state.modeUsed !== state.mode && state.note) {
+    els.summary.append(h("span", { class: "chip", title: state.note }, icon("info", 12), `${MODE_LABELS[state.modeUsed]} results only`));
+  }
+  els.order.hidden = searching;
+  els.mode.hidden = !searching;
+  clear(els.list);
+  const handlers = { onEdit: edit, onPin: pin, onDelete: remove };
+  els.list.append(...state.items.map((m) => rowEl(m, handlers)));
+  clear(els.empty);
+  if (!state.items.length && !state.loading && !state.error) {
+    els.empty.append(
+      h(
+        "div",
+        { class: "empty" },
+        h("p", {}, searching || hasFilters() ? "Nothing matches." : "No memories yet."),
+        searching || hasFilters()
+          ? h("button", { class: "btn", type: "button", onclick: clearFilters }, "Clear filters")
+          : h("button", { class: "btn btn-primary", type: "button", onclick: add }, icon("plus", 16), "New memory"),
+      ),
+    );
+  }
+  clear(els.more);
+  if (!searching && state.items.length < state.total) {
+    els.more.append(h("button", { class: "btn", type: "button", onclick: () => loadMemories({ append: true }) }, `Show more (${state.total - state.items.length} left)`));
+  } else if (searching && state.total >= PAGE) {
+    els.more.append(h("span", { class: "fine" }, `Top ${PAGE} shown`));
+  }
+}
+function renderMode() {
+  clear(els.mode).append(
+    ...Object.entries(MODE_LABELS).map(([value, label]) =>
+      h("button", { type: "button", "aria-pressed": state.mode === value ? "true" : "false", onclick: () => ((state.mode = value), savePrefs(), renderMode(), loadMemories()) }, label),
+    ),
+  );
+}
+/* Actions */
+const editorContext = () => ({
+  categories: state.status?.categories ?? [],
+  projects: state.status?.projects ?? [],
+  currentProject: state.status?.currentProject ?? null,
+  onSaved: (result, isNew) => {
+    toast(isNew ? `Saved #${result.memory.id}.` : "Saved.", { kind: "success" });
+    if (result.similar?.length) toast(`Similar to ${result.similar.map((s) => `#${s.memory.id}`).join(", ")}. You may want to merge them.`);
+    if (result.warning) toast(result.warning, { kind: "error" });
+    refresh();
+  },
+  onDelete: remove,
+});
+const add = () => openEditor(editorContext(), null);
+const edit = (memory) => openEditor(editorContext(), memory);
+async function pin(memory) {
+  try {
+    const { memory: updated } = await api.updateMemory(memory.id, { pinned: !memory.pinned });
+    if (state.pinned) return refresh();
+    const i = state.items.findIndex((m) => m.id === memory.id);
+    if (i >= 0) state.items[i] = updated;
+    keepFocus(renderResults);
+  } catch (err) {
+    toast(err.message, { kind: "error" });
+  }
+}
+async function remove(memory) {
+  if (!(await confirmDelete(memory))) return;
+  try {
+    await api.deleteMemory(memory.id);
+    $("#editor").close();
+    toast(`Deleted #${memory.id}.`);
+    refresh();
+  } catch (err) {
+    toast(err.message, { kind: "error" });
+  }
+}
+/* Wiring */
+let timer;
+function onSearchInput() {
+  els.clear.hidden = els.search.value === "";
+  clearTimeout(timer);
+  timer = setTimeout(() => {
+    state.query = els.search.value.trim();
+    loadMemories();
+  }, 220);
+}
+els.search.addEventListener("input", onSearchInput);
+els.search.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && els.search.value) {
+    els.search.value = "";
+    onSearchInput();
+  }
+});
+els.clear.addEventListener("click", () => {
+  els.search.value = "";
+  onSearchInput();
+  els.search.focus();
+});
+els.order.value = state.order;
+els.order.addEventListener("change", () => ((state.order = els.order.value), savePrefs(), loadMemories()));
+$("#new").addEventListener("click", add);
+els.drawerOpen.addEventListener("click", () => setDrawer(true));
+$("#drawer-close").addEventListener("click", () => (setDrawer(false), els.drawerOpen.focus()));
+els.backdrop.addEventListener("click", () => setDrawer(false));
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && els.sidebar.classList.contains("open")) return (setDrawer(false), els.drawerOpen.focus());
+  const typing = e.target.closest?.("input, textarea, select, [contenteditable]");
+  if (typing || e.ctrlKey || e.metaKey || e.altKey || document.querySelector("dialog[open]")) return;
+  if (e.key === "/") (e.preventDefault(), els.search.focus());
+  else if (e.key === "n") (e.preventDefault(), add());
+});
+hydrateIcons();
+renderMode();
+setDrawer(false);
+refresh();