dsh-context-memory 0.3.0 → 0.4.1

package/lib/memory.web.js

@@ -107,42 +107,541 @@ var en = {
 };
 
 // src/client/view.tsx
+var import_react2 = require("react");
+
+// src/client/ui.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var PANEL_PATH = "/api/context-memory.panel";
-var RECALL_PATH = "/api/context-memory.recall";
-var REMEMBER_PATH = "/api/context-memory.remember";
-var FORGET_PATH = "/api/context-memory.forget";
-var wrap = { display: "flex", flexDirection: "column", gap: 12, maxWidth: 820, fontFamily: "inherit" };
-var head = { display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" };
-var muted = { fontSize: 12, opacity: 0.75 };
-var table = { borderCollapse: "collapse", width: "100%" };
-var th = { textAlign: "left", padding: "4px 10px 4px 0", fontWeight: 600, fontSize: 12, opacity: 0.8, borderBottom: "0.5px solid rgba(128,128,128,0.4)" };
-var td = { padding: "6px 10px 6px 0", fontSize: 13, borderBottom: "0.5px solid rgba(128,128,128,0.18)" };
-var list = { margin: 0, paddingLeft: 18, fontSize: 13 };
-var card = { padding: "8px 12px", borderRadius: 6, border: "1px solid rgba(128,128,128,0.2)", fontSize: 13 };
-var btn = { fontSize: 12, cursor: "pointer", padding: "3px 10px", borderRadius: 4, border: "0.5px solid rgba(128,128,128,0.4)" };
-var dangerBtn = { ...btn, color: "#e55", borderColor: "#e55" };
-var inputStyle = { fontSize: 13, padding: "4px 8px", borderRadius: 4, border: "0.5px solid rgba(128,128,128,0.4)", flex: 1 };
-function usePanel() {
-  const [state, setState] = (0, import_react.useState)({ payload: null, error: null });
+var T = {
+  accent: "var(--accent, #4B8BBE)",
+  accentHover: "var(--accent-hover, #3a6f9e)",
+  error: "var(--error, #e53935)",
+  success: "var(--success, #2e7d32)",
+  warning: "var(--warning, #ed6c02)",
+  bg: "var(--bg-secondary, rgba(128,128,128,0.04))",
+  bgHover: "var(--bg-tertiary, rgba(128,128,128,0.08))",
+  border: "var(--border, rgba(128,128,128,0.2))",
+  text: "var(--text-primary, inherit)",
+  muted: "var(--text-secondary, rgba(128,128,128,0.65))",
+  surface: "var(--bg-primary, #fff)"
+};
+var injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.textContent = `
+@keyframes dsh-fade-in{from{opacity:0}to{opacity:1}}
+@keyframes dsh-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+@keyframes dsh-spin{to{transform:rotate(360deg)}}
+.dsh-modal-overlay{animation:dsh-fade-in .15s ease}
+.dsh-modal-body{animation:dsh-slide-up .2s ease}
+.dsh-toast{animation:dsh-slide-up .2s ease}
+.dsh-spin{animation:dsh-spin .6s linear infinite}
+  `;
+  document.head.appendChild(el);
+}
+function Modal({
+  title,
+  onClose,
+  children,
+  footer,
+  width = 520
+}) {
+  (0, import_react.useEffect)(() => {
+    ensureStyles();
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "dsh-modal-overlay",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.45)",
+        backdropFilter: "blur(3px)",
+        WebkitBackdropFilter: "blur(3px)"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "dsh-modal-body",
+          style: {
+            background: T.surface,
+            borderRadius: 14,
+            boxShadow: "0 12px 40px rgba(0,0,0,0.25)",
+            width: `min(92vw, ${width}px)`,
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 22px",
+                  borderBottom: `1px solid ${T.border}`
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: 0, fontSize: 15, fontWeight: 600 }, children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: 20,
+                        color: T.muted,
+                        padding: "0 4px",
+                        lineHeight: 1,
+                        borderRadius: 4
+                      },
+                      "aria-label": "Close",
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 22, overflow: "auto", flex: 1 }, children }),
+            footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  padding: "14px 22px",
+                  borderTop: `1px solid ${T.border}`,
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 10,
+                  background: T.bg
+                },
+                children: footer
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  onConfirm,
+  onClose,
+  danger
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Modal,
+    {
+      title,
+      onClose,
+      width: 420,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Button,
+          {
+            variant: danger === true ? "danger" : "primary",
+            onClick: () => {
+              onConfirm();
+              onClose();
+            },
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.6 }, children: message })
+    }
+  );
+}
+function Button({
+  variant = "secondary",
+  size = "md",
+  children,
+  style,
+  ...rest
+}) {
+  const base = {
+    cursor: "pointer",
+    borderRadius: 7,
+    fontWeight: 500,
+    transition: "all 0.15s ease",
+    border: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    fontSize: size === "sm" ? 12 : 13,
+    padding: size === "sm" ? "5px 12px" : "8px 18px",
+    fontFamily: "inherit"
+  };
+  const variants = {
+    primary: { background: T.accent, color: "#fff" },
+    secondary: {
+      background: T.bg,
+      color: T.text,
+      border: `1px solid ${T.border}`
+    },
+    danger: {
+      background: "transparent",
+      color: T.error,
+      border: `1px solid ${T.error}`
+    },
+    ghost: { background: "transparent", color: T.muted, border: "none" }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: { ...base, ...variants[variant], ...style }, ...rest, children });
+}
+function Card({
+  title,
+  icon,
+  children,
+  actions,
+  style,
+  padding = 14
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        borderRadius: 10,
+        border: `1px solid ${T.border}`,
+        background: T.bg,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        (title !== void 0 || actions !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              borderBottom: title !== void 0 ? `1px solid ${T.border}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 6 }, children: [
+                icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: icon }),
+                title
+              ] }),
+              actions
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding }, children })
+      ]
+    }
+  );
+}
+function StatCard({
+  value,
+  label,
+  color,
+  unit
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minWidth: 90,
+        textAlign: "center",
+        padding: "14px 10px",
+        borderRadius: 10,
+        border: `1px solid ${T.border}`,
+        background: T.bg
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 24, fontWeight: 700, color: color ?? T.text, lineHeight: 1.2 }, children: [
+          value,
+          unit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 13, fontWeight: 500, opacity: 0.7, marginLeft: 2 }, children: unit })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: T.muted, marginTop: 4 }, children: label })
+      ]
+    }
+  );
+}
+function Badge({
+  children,
+  color = "default"
+}) {
+  const colors = {
+    default: { bg: "rgba(128,128,128,0.12)", fg: T.muted },
+    success: { bg: "rgba(46,125,50,0.12)", fg: T.success },
+    error: { bg: "rgba(229,57,53,0.12)", fg: T.error },
+    warning: { bg: "rgba(245,124,0,0.12)", fg: T.warning },
+    info: { bg: "rgba(75,139,190,0.12)", fg: T.accent }
+  };
+  const c = colors[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: "2px 9px",
+        borderRadius: 10,
+        fontSize: 11,
+        fontWeight: 600,
+        background: c.bg,
+        color: c.fg
+      },
+      children
+    }
+  );
+}
+function Input({
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      ...rest,
+      style: {
+        fontSize: 13,
+        padding: "8px 12px",
+        borderRadius: 7,
+        border: `1px solid ${T.border}`,
+        background: T.surface,
+        color: T.text,
+        width: "100%",
+        boxSizing: "border-box",
+        fontFamily: "inherit",
+        outline: "none",
+        transition: "border-color 0.15s",
+        ...style
+      }
+    }
+  );
+}
+function Select({
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "select",
+    {
+      ...rest,
+      style: {
+        fontSize: 13,
+        padding: "8px 12px",
+        borderRadius: 7,
+        border: `1px solid ${T.border}`,
+        background: T.surface,
+        color: T.text,
+        cursor: "pointer",
+        fontFamily: "inherit",
+        outline: "none",
+        ...style
+      },
+      children
+    }
+  );
+}
+var ToastContext = (0, import_react.createContext)(
+  () => {
+  }
+);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = (0, import_react.useState)([]);
+  const show = (0, import_react.useCallback)((type, message) => {
+    const id = Date.now() + Math.random();
+    setToasts((t) => [...t, { id, type, message }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: show, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          zIndex: 2e3,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8
+        },
+        children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "dsh-toast",
+            style: {
+              padding: "12px 18px",
+              borderRadius: 8,
+              fontSize: 13,
+              fontWeight: 500,
+              boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
+              color: "#fff",
+              background: t.type === "success" ? T.success : t.type === "error" ? T.error : T.accent,
+              maxWidth: 360
+            },
+            children: t.message
+          },
+          t.id
+        ))
+      }
+    )
+  ] });
+}
+function useToast() {
+  return (0, import_react.useContext)(ToastContext);
+}
+function Spinner({ size = 16 }) {
+  ensureStyles();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "dsh-spin",
+      style: {
+        display: "inline-block",
+        width: size,
+        height: size,
+        border: `2px solid ${T.border}`,
+        borderTopColor: T.accent,
+        borderRadius: "50%"
+      }
+    }
+  );
+}
+function EmptyState({
+  icon,
+  message
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        textAlign: "center",
+        padding: "36px 16px",
+        color: T.muted
+      },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 36, marginBottom: 10, opacity: 0.4 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: message })
+      ]
+    }
+  );
+}
+function SectionTitle({
+  icon,
+  children,
+  actions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginTop: 6,
+        marginBottom: 8
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            style: {
+              fontSize: 14,
+              fontWeight: 600,
+              display: "flex",
+              alignItems: "center",
+              gap: 6
+            },
+            children: [
+              icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: icon }),
+              children
+            ]
+          }
+        ),
+        actions
+      ]
+    }
+  );
+}
+var tableStyles = {
+  table: {
+    borderCollapse: "collapse",
+    width: "100%"
+  },
+  th: {
+    textAlign: "left",
+    padding: "8px 12px 8px 0",
+    fontWeight: 600,
+    fontSize: 12,
+    color: T.muted,
+    borderBottom: `1px solid ${T.border}`
+  },
+  td: {
+    padding: "8px 12px 8px 0",
+    fontSize: 13,
+    borderBottom: "1px solid rgba(128,128,128,0.08)"
+  },
+  clickRow: { cursor: "pointer" }
+};
+function Field({
+  label,
+  children,
+  hint
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { style: { fontSize: 12, fontWeight: 600, color: T.text }, children: label }),
+    children,
+    hint !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, color: T.muted }, children: hint })
+  ] });
+}
+function usePanel(path) {
+  const [payload, setPayload] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
   const [tick, setTick] = (0, import_react.useState)(0);
   const reload = (0, import_react.useCallback)(() => setTick((v) => v + 1), []);
   (0, import_react.useEffect)(() => {
     const c = new AbortController();
-    setState((p) => ({ ...p, error: null }));
-    fetch(PANEL_PATH, { signal: c.signal }).then(async (r) => {
+    setError(null);
+    fetch(path, { signal: c.signal }).then(async (r) => {
       if (!r.ok) throw new Error(String(r.status));
       return r.json();
-    }).then((payload) => {
-      if (!c.signal.aborted) setState({ payload, error: null });
+    }).then((p) => {
+      if (!c.signal.aborted) setPayload(p);
     }).catch((e) => {
-      if (!c.signal.aborted) setState({ payload: null, error: e instanceof Error ? e.message : String(e) });
+      if (!c.signal.aborted) setPayload(null), setError(e instanceof Error ? e.message : String(e));
     });
     return () => c.abort();
-  }, [tick]);
-  return { ...state, reload };
+  }, [tick, path]);
+  return (0, import_react.useMemo)(() => ({ payload, error, reload }), [payload, error, reload]);
 }
+
+// src/client/view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PANEL_PATH = "/api/context-memory.panel";
+var RECALL_PATH = "/api/context-memory.recall";
+var REMEMBER_PATH = "/api/context-memory.remember";
+var FORGET_PATH = "/api/context-memory.forget";
 function checkLabel(memory, t) {
   if (!memory.guard) return t("checkNone");
   switch (memory.verification?.outcome) {
@@ -157,211 +656,203 @@ function checkLabel(memory, t) {
   }
 }
 function provenance(memory) {
-  return [
-    memory.source,
-    memory.sessionId !== void 0 ? `session ${memory.sessionId}` : null,
-    memory.step !== void 0 ? `step ${String(memory.step)}` : null
-  ].filter((part) => part !== null).join(" \xB7 ");
+  return [memory.source, memory.sessionId !== void 0 ? `session ${memory.sessionId}` : null, memory.step !== void 0 ? `step ${String(memory.step)}` : null].filter((part) => part !== null).join(" \xB7 ");
 }
-function SearchBar({ t, onResult }) {
-  const [query, setQuery] = (0, import_react.useState)("");
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const handleSearch = (0, import_react.useCallback)(async () => {
-    if (!query.trim()) {
-      onResult(null);
-      return;
-    }
-    setLoading(true);
+function AddMemoryModal({ t, onClose, onAdded }) {
+  const toast = useToast();
+  const [text, setText] = (0, import_react2.useState)("");
+  const [subject, setSubject] = (0, import_react2.useState)("");
+  const [kind, setKind] = (0, import_react2.useState)("fact");
+  const [adding, setAdding] = (0, import_react2.useState)(false);
+  const handleAdd = (0, import_react2.useCallback)(async () => {
+    if (!text.trim()) return;
+    setAdding(true);
     try {
-      const r = await fetch(`${RECALL_PATH}?q=${encodeURIComponent(query)}&limit=10`);
+      const r = await fetch(REMEMBER_PATH, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ text, subject: subject || void 0, kind, source: "user" }) });
       if (r.ok) {
-        const data = await r.json();
-        onResult(data.hits);
+        toast("success", t("memoryAdded"));
+        onAdded();
+        onClose();
       }
     } finally {
-      setLoading(false);
+      setAdding(false);
     }
-  }, [query, onResult]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: inputStyle, placeholder: t("searchPlaceholder"), value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
-      if (e.key === "Enter") handleSearch();
-    } }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: btn, disabled: loading, onClick: handleSearch, children: loading ? "\u2026" : t("search") })
-  ] });
+  }, [text, subject, kind, t, toast, onAdded, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Modal,
+    {
+      title: t("addMemory"),
+      onClose,
+      width: 500,
+      footer: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "secondary", onClick: onClose, children: t("cancel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Button, { variant: "primary", disabled: adding || !text.trim(), onClick: handleAdd, children: [
+          adding ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: 14 }) : null,
+          " ",
+          t("add")
+        ] })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Field, { label: t("memoryText"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { value: text, onChange: (e) => setText(e.target.value), placeholder: t("memoryTextPlaceholder") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Field, { label: t("subjectOptional"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { value: subject, onChange: (e) => setSubject(e.target.value), placeholder: t("subjectPlaceholder") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Field, { label: t("kind"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Select, { value: kind, onChange: (e) => setKind(e.target.value), style: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "fact", children: t("kindFact") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "decision", children: t("kindDecision") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "preference", children: t("kindPreference") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "pitfall", children: t("kindPitfall") })
+        ] }) })
+      ] })
+    }
+  );
 }
-function AddMemoryForm({ t, onAdded }) {
-  const [text, setText] = (0, import_react.useState)("");
-  const [subject, setSubject] = (0, import_react.useState)("");
-  const [kind, setKind] = (0, import_react.useState)("fact");
-  const [adding, setAdding] = (0, import_react.useState)(false);
-  const handleAdd = (0, import_react.useCallback)(async () => {
-    if (!text.trim()) return;
-    setAdding(true);
+function ContextMemoryPanelInner({ t }) {
+  const { payload, error, reload } = usePanel(PANEL_PATH);
+  const toast = useToast();
+  const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
+  const [searchHits, setSearchHits] = (0, import_react2.useState)(null);
+  const [searching, setSearching] = (0, import_react2.useState)(false);
+  const [addOpen, setAddOpen] = (0, import_react2.useState)(false);
+  const [forgetTarget, setForgetTarget] = (0, import_react2.useState)(null);
+  const handleSearch = (0, import_react2.useCallback)(async () => {
+    if (!searchQuery.trim()) {
+      setSearchHits(null);
+      return;
+    }
+    setSearching(true);
     try {
-      await fetch(REMEMBER_PATH, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ text, subject: subject || void 0, kind, source: "user" })
-      });
-      setText("");
-      setSubject("");
-      setKind("fact");
-      onAdded();
+      const r = await fetch(`${RECALL_PATH}?q=${encodeURIComponent(searchQuery)}&limit=10`);
+      if (r.ok) {
+        setSearchHits((await r.json()).hits);
+      }
     } finally {
-      setAdding(false);
+      setSearching(false);
+    }
+  }, [searchQuery]);
+  const handleForget = (0, import_react2.useCallback)(async () => {
+    if (forgetTarget === null) return;
+    const r = await fetch(FORGET_PATH, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(forgetTarget) });
+    if (r.ok) {
+      toast("success", t("forgotten"));
+      setForgetTarget(null);
+      reload();
     }
-  }, [text, subject, kind, onAdded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...card, display: "flex", flexDirection: "column", gap: 6 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 12 }, children: [
+  }, [forgetTarget, t, toast, reload]);
+  const header = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { style: { fontSize: 15 }, children: [
+      "\u{1F9E0} ",
+      t("title")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Button, { variant: "primary", size: "sm", onClick: () => setAddOpen(true), children: [
       "\u2795 ",
       t("addMemory")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: inputStyle, placeholder: t("memoryText"), value: text, onChange: (e) => setText(e.target.value) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { style: inputStyle, placeholder: t("subjectOptional"), value: subject, onChange: (e) => setSubject(e.target.value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { style: { ...btn, flex: "0 0 auto" }, value: kind, onChange: (e) => setKind(e.target.value), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "fact", children: t("kindFact") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "decision", children: t("kindDecision") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "preference", children: t("kindPreference") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "pitfall", children: t("kindPitfall") })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: btn, disabled: adding, onClick: handleAdd, children: adding ? "\u2026" : t("add") })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "secondary", size: "sm", onClick: reload, children: t("refresh") })
   ] });
-}
-function ContextMemoryPanel({ t }) {
-  const { payload, error, reload } = usePanel();
-  const [searchHits, setSearchHits] = (0, import_react.useState)(null);
-  const handleForget = (0, import_react.useCallback)(async (id, reason) => {
-    await fetch(FORGET_PATH, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ id, reason }) });
-    reload();
-  }, [reload]);
-  const header = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { style: head, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 13 }, children: [
-      "\u{1F9E0} ",
-      t("title")
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flex: 1 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: btn, onClick: reload, children: t("refresh") })
+  if (error !== null) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { maxWidth: 820 }, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { role: "alert", style: { margin: 0, fontSize: 13, color: "var(--error, #e53935)" }, children: [
+      t("failed"),
+      ": ",
+      error
+    ] }) })
   ] });
-  if (error !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: wrap, children: [
-      header,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "alert", style: { margin: 0, fontSize: 13 }, children: [
-        t("failed"),
-        ": ",
-        error
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: reload, style: { ...btn, alignSelf: "flex-start" }, children: t("retry") })
-    ] });
-  }
-  if (payload === null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: muted, "aria-live": "polite", children: t("loading") });
-  const { totals } = payload;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: wrap, children: [
+  if (payload === null) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { maxWidth: 820 }, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: 28 }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 14, maxWidth: 820 }, children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: muted, children: [
-      t("active"),
-      " ",
-      totals.active,
-      " \xB7 ",
-      t("checkPassed"),
-      " ",
-      totals.verified,
-      " \xB7 ",
-      t("unverified"),
-      " ",
-      totals.unverified,
-      " \xB7 ",
-      t("superseded"),
-      " ",
-      totals.superseded
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 10, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.totals.active, label: t("active") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.totals.verified, label: t("checkPassed") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.totals.unverified, label: t("unverified") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatCard, { value: payload.totals.superseded, label: t("superseded") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchBar, { t, onResult: setSearchHits }),
-    searchHits !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: card, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 12 }, children: [
-        t("searchResults"),
-        " (",
-        searchHits.length,
-        ")"
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Card, { title: t("search"), icon: "\u{1F50D}", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Input,
+          {
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: t("searchPlaceholder"),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSearch();
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Button, { variant: "secondary", onClick: handleSearch, disabled: searching, children: [
+          searching ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: 14 }) : null,
+          " ",
+          t("search")
+        ] })
       ] }),
-      searchHits.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: muted, children: t("noResults") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: list, children: searchHits.map((hit) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { marginBottom: 4 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 11 }, children: hit.memory.id }),
-        " (",
-        hit.score.toFixed(2),
-        ") ",
-        hit.memory.text,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { ...muted, marginLeft: 8 }, children: [
+      searchHits !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 10 }, children: searchHits.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyState, { message: t("noResults") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: searchHits.map((hit) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "baseline" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { color: "info", children: hit.score.toFixed(2) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 12 }, children: hit.memory.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { fontSize: 10, opacity: 0.5 }, children: [
           "\u2014 ",
           hit.why
         ] })
-      ] }, hit.memory.id)) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AddMemoryForm, { t, onAdded: reload }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 13 }, children: [
-      "\u26A0\uFE0F ",
-      t("conflicts")
+      ] }, hit.memory.id)) }) })
     ] }),
-    payload.conflicts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: muted, children: t("noConflicts") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: list, children: payload.conflicts.map((conflict) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: conflict.subject }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { ...list, fontSize: 12, opacity: 0.85 }, children: conflict.memories.map((memory) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 11 }, children: memory.id }),
-        " ",
-        memory.text,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: { ...dangerBtn, marginLeft: 8 }, onClick: () => handleForget(memory.id, `conflict resolved: ${conflict.subject}`), children: t("resolve") })
-      ] }, memory.id)) })
-    ] }, conflict.subject)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 13 }, children: [
-      "\u2705 ",
-      t("active")
+    payload.conflicts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionTitle, { icon: "\u26A0\uFE0F", children: t("conflicts") }),
+      payload.conflicts.map((conflict) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { title: conflict.subject, children: conflict.memories.map((memory) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: { fontSize: 11 }, children: memory.id }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 12, flex: 1 }, children: memory.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "danger", size: "sm", onClick: () => setForgetTarget({ id: memory.id, reason: `conflict resolved: ${conflict.subject}` }), children: t("resolve") })
+      ] }, memory.id)) }, conflict.subject))
     ] }),
-    payload.active.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 13, opacity: 0.8 }, children: t("empty") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: table, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: "Id" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("memory") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("kind") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("status") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("from") }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SectionTitle, { icon: "\u2705", children: t("active") }),
+    payload.active.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyState, { icon: "\u{1F4ED}", message: t("empty") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { padding: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: tableStyles.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: "Id" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("memory") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("kind") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("status") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("from") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: payload.active.map((memory) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 11 }, children: memory.id }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: memory.text }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: memory.kind }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: checkLabel(memory, t) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: provenance(memory) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", style: dangerBtn, onClick: () => handleForget(memory.id, "superseded from panel"), children: [
-          "\u{1F5D1} ",
-          t("forget")
-        ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: payload.active.map((memory) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: { fontSize: 11 }, children: memory.id }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: memory.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: memory.kind }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: checkLabel(memory, t) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: { ...tableStyles.td, fontSize: 11, opacity: 0.6 }, children: provenance(memory) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { variant: "danger", size: "sm", onClick: () => setForgetTarget({ id: memory.id, reason: "superseded from panel" }), children: "\u{1F5D1}" }) })
       ] }, memory.id)) })
-    ] }),
-    payload.superseded.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { style: { fontSize: 13 }, children: [
-        "\u{1F4E6} ",
+    ] }) }),
+    payload.superseded.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SectionTitle, { icon: "\u{1F4E6}", children: [
         t("superseded"),
         " (",
         payload.superseded.length,
         ")"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: table, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: "Id" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("memory") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("kind") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("status") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: th, children: t("from") })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Card, { padding: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: tableStyles.table, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: "Id" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("memory") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("kind") }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { style: tableStyles.th, children: t("status") })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: payload.superseded.map((memory) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { style: { fontSize: 11 }, children: memory.id }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: memory.text }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: memory.kind }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: checkLabel(memory, t) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: td, children: provenance(memory) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: payload.superseded.map((memory) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: { fontSize: 11 }, children: memory.id }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: memory.text }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: memory.kind }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { style: tableStyles.td, children: checkLabel(memory, t) })
         ] }, memory.id)) })
-      ] })
-    ] })
+      ] }) })
+    ] }),
+    addOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AddMemoryModal, { t, onClose: () => setAddOpen(false), onAdded: reload }),
+    forgetTarget !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConfirmDialog, { title: t("forget"), message: t("confirmForget"), confirmLabel: t("forget"), danger: true, onConfirm: handleForget, onClose: () => setForgetTarget(null) })
   ] });
 }
+function ContextMemoryPanel({ t }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContextMemoryPanelInner, { t }) });
+}
 
 // src/client/index.tsx
 var inject = ["slots", "locale"];
@@ -371,7 +862,7 @@ function apply(ctx) {
     {
       name: "settings.section",
       id: "context-memory",
-      order: 46,
+      order: 45,
       label: () => ctx.locale.bind(NS)("nav"),
       locale: NS
     },