@modusensus/dsh-mneme 0.7.9 → 0.7.11

package/lib/client.js

@@ -0,0 +1,2086 @@
+window.__ModuleLoader__.load({
+  id: "@modusensus/dsh-mneme",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+
+    let react = require("react");
+    let primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+    let { useState, useEffect, useCallback, useRef } = react;
+    const IconArchiveOutline20 = primitives.IconArchiveOutline20;
+
+    // Portal target for the hero fallback surface. The host whitelists
+    // react-dom for its own bundles (dsh-client-ui-trajectory requires it);
+    // when the runtime rejects it for plugins the overlay renders in place —
+    // position:fixed keeps it viewport-sized either way.
+    let reactDom = null;
+    try { reactDom = require("react-dom"); } catch { reactDom = null; }
+
+    // Node-graph pictogram (three nodes joined by edges). The primitives kit
+    // ships no network/graph icon, and its share-style glyph reads as
+    // "share" — exactly the confusion this custom 16px replacement avoids.
+    const GraphNodesIcon = ({ size = 16, className }) => h("svg", {
+      width: size,
+      height: size,
+      className,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+      h("path", {
+        d: "M8 5.2 4.6 10.4M8 5.2l3.4 5.2M5.2 12h5.6",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }),
+      h("circle", { cx: 8, cy: 3.4, r: 1.8, fill: "currentColor" }),
+      h("circle", { cx: 3.6, cy: 12, r: 1.8, fill: "currentColor" }),
+      h("circle", { cx: 12.4, cy: 12, r: 1.8, fill: "currentColor" })
+    );
+
+    // Stroke icons, Lucide path data (ISC license) inlined as [tag, attrs]
+    // tuples — the plugin runtime cannot require third-party libraries, so
+    // the data ships with the bundle (the morphicons/lucide pairing the
+    // data package documents, minus the runtime dependency). Stroke picks
+    // up currentColor, so icons follow the host theme tokens.
+    const ICON_PATHS = {
+      database: [["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }], ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5" }], ["path", { d: "M3 12A9 3 0 0 0 21 12" }]],
+      waypoints: [["path", { d: "m10.586 5.414-5.172 5.172" }], ["path", { d: "m18.586 13.414-5.172 5.172" }], ["path", { d: "M6 12h12" }], ["circle", { cx: "12", cy: "20", r: "2" }], ["circle", { cx: "12", cy: "4", r: "2" }], ["circle", { cx: "20", cy: "12", r: "2" }], ["circle", { cx: "4", cy: "12", r: "2" }]],
+      settings: [["path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { cx: "12", cy: "12", r: "3" }]],
+      search: [["path", { d: "m21 21-4.34-4.34" }], ["circle", { cx: "11", cy: "11", r: "8" }]],
+      refresh: [["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }], ["path", { d: "M21 3v5h-5" }], ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }], ["path", { d: "M8 16H3v5" }]],
+      chevronDown: [["path", { d: "m6 9 6 6 6-6" }]],
+      chevronRight: [["path", { d: "m9 18 6-6-6-6" }]],
+      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" }]],
+      check: [["path", { d: "M20 6 9 17l-5-5" }]],
+      inbox: [["polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }]],
+      activity: [["path", { d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" }]]
+    };
+    const Icon = ({ name, size = 16, className }) => {
+      const parts = ICON_PATHS[name];
+      if (!parts) return null;
+      return h("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className,
+        "aria-hidden": "true"
+      }, parts.map(([tag, attrs], i) => h(tag, { key: i, ...attrs })));
+    };
+
+    // Unified API fetcher: attaches the optional apiToken (set in the settings
+    // view, persisted in localStorage) as a Bearer header. When no token has
+    // been configured the header is omitted and the API stays open (default).
+    const API_TOKEN_KEY = "dsh-mneme-api-token";
+    function apiFetch(path, opts = {}) {
+      const token = (typeof window !== "undefined" && window.localStorage)
+        ? window.localStorage.getItem(API_TOKEN_KEY) || ""
+        : "";
+      const headers = { ...(opts.headers || {}) };
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      return fetch(path, { ...opts, headers });
+    }
+
+    const inject = ["slots", "locale"];
+
+    const NS = "memory";
+
+    const dictionaries = {
+      zh: {
+        "memory.panel.empty": "暂无记忆条目",
+        "memory.panel.open": "记忆",
+        "memory.tab.all": "全部",
+        "memory.tab.preference": "偏好",
+        "memory.tab.project": "项目",
+        "memory.tab.decision": "决策",
+        "memory.tab.history": "历史",
+        "memory.settings.title": "记忆库设置",
+        "memory.settings.profile": "用户画像",
+        "memory.settings.profileHint": "写一段自我介绍（角色、背景、偏好），Agent 每轮对话都会自动带上。",
+        "memory.settings.profileSave": "保存画像",
+        "memory.settings.profileSaved": "画像已保存",
+        "memory.settings.rules": "规则",
+        "memory.settings.rulesHint": "给 Agent 立下必须遵守的规矩，随时增删，下一轮即生效。",
+        "memory.settings.ruleAdd": "添加规则",
+        "memory.settings.rulePlaceholder": "例如：回答时总是先给结论",
+        "memory.settings.commands": "自定义指令",
+        "memory.settings.commandsHint": "把常用提示词存成 / 命令，聊天时直接键入调用。",
+        "memory.settings.cmdName": "命令名",
+        "memory.settings.cmdDesc": "描述",
+        "memory.settings.cmdInstruction": "指令内容",
+        "memory.settings.cmdAdd": "添加命令",
+        "memory.settings.cmdDelete": "删除",
+        "memory.settings.empty": "暂无内容",
+        "memory.panel.semantic": "语义",
+        "memory.sidebar.aria": "打开记忆库",
+        "memory.view.label": "记忆库",
+        "memory.overlay.close": "关闭",
+        "memory.explorer.tabMemory": "记忆",
+        "memory.explorer.tabEntities": "实体",
+        "memory.explorer.tabSettings": "设置",
+        "memory.explorer.tabStatus": "状态",
+        "memory.entities.count": "{n} 个实体",
+        "memory.entities.pick": "从左侧选择一个实体，查看它的属性与关系",
+        "memory.entities.none": "暂无实体：开启实体抽取后，记忆里的人物 / 项目 / 概念会自动沉淀到这里",
+        "memory.entities.attrs": "属性",
+        "memory.entities.relations": "关系",
+        "memory.entities.mentions": "{n} 次提及",
+        "memory.entities.lastSeen": "最近出现",
+        "memory.entities.graph": "关系图谱",
+        "memory.entity.person": "人物",
+        "memory.entity.project": "项目",
+        "memory.entity.concept": "概念",
+        "memory.entity.technology": "技术",
+        "memory.entity.organization": "组织",
+        "memory.entity.other": "其他",
+        "memory.explorer.search": "搜索标题或内容…",
+        "memory.explorer.searchTitle": "语义检索",
+        "memory.explorer.types": "分类",
+        "memory.explorer.timeline": "时间树",
+        "memory.explorer.detail": "详情",
+        "memory.explorer.emptyDetail": "在时间树中选择一条记忆查看全文",
+        "memory.explorer.copy": "复制全文",
+        "memory.explorer.copied": "已复制",
+        "memory.explorer.refresh": "刷新",
+        "memory.explorer.loadMore": "加载更多",
+        "memory.explorer.count": "共 {n} 条",
+        "memory.explorer.empty": "暂无记忆条目",
+        "memory.explorer.source": "来源",
+        "memory.explorer.created": "创建",
+        "memory.explorer.updated": "更新",
+        "memory.explorer.tags": "标签",
+        "memory.explorer.importance": "重要性",
+        "memory.explorer.topK": "返回数量",
+        "memory.explorer.topKOption": "返回 {n} 条",
+        "memory.card.open": "在主区记忆库中查看全文",
+        "memory.time.now": "刚刚",
+        "memory.time.seconds": "{n}秒前",
+        "memory.time.minutes": "{n}分钟前",
+        "memory.time.hours": "{n}小时前",
+        "memory.time.days": "{n}天前",
+        "memory.graph.title": "记忆图谱",
+        "memory.graph.aria": "记忆图谱",
+        "memory.graph.placeholder": "输入实体名，查看关联网络…",
+        "memory.graph.depth": "跳数",
+        "memory.graph.empty": "图谱待积累：随对话记忆的沉淀，实体与关系会自动进入图谱",
+        "memory.graph.notFound": "未找到该实体",
+        "memory.graph.attrs": "属性",
+        "memory.graph.related": "关联记忆",
+        "memory.graph.relation": "关系",
+        "memory.graph.sourceMemory": "查看来源记忆",
+        "memory.graph.hint": "拖拽节点调整布局 · 空白处拖动平移 · 滚轮缩放",
+        "memory.graph.resetView": "重置视图",
+        "memory.graph.viewInGraph": "在实体视图中打开",
+        "memory.graph.loading": "加载中…",
+        "memory.graph.distance": "距中心 {n} 跳",
+        "memory.settings.vectorTitle": "向量搜索",
+        "memory.settings.vectorHint": "搜索不再只认字面：接入任意 OpenAI 兼容的 embedding 接口后，意思相近的记忆也能被召回。",
+        "memory.settings.vectorEnabled": "启用向量搜索",
+        "memory.settings.vectorBaseUrl": "API 地址 (Base URL)",
+        "memory.settings.vectorApiKey": "API Key",
+        "memory.settings.vectorModel": "模型名",
+        "memory.settings.vectorSave": "保存配置",
+        "memory.settings.vectorSaved": "配置已保存",
+        "memory.settings.vectorReindex": "重建索引",
+        "memory.settings.vectorReindexing": "索引中…",
+        "memory.settings.vectorReindexDone": "已索引 {n} 条",
+        "memory.settings.apiTokenTitle": "API Token（可选）",
+        "memory.settings.apiTokenHint": "给面板的写操作加一道锁：设置后，修改记忆或配置需要携带 Token，纯浏览不受影响。清空并保存可关闭。",
+        "memory.settings.apiTokenPlaceholder": "留空 = 不鉴权（默认）",
+        "memory.settings.apiTokenSave": "保存 Token",
+        "memory.settings.apiTokenSaved": "Token 已保存",
+        "memory.explorer.delete": "删除",
+        "memory.explorer.confirmDelete": "确认删除?",
+        "memory.explorer.cancel": "取消",
+        "memory.explorer.deleted": "已删除",
+        "memory.explorer.deleteFailed": "删除失败",
+        "memory.status.memories": "记忆总数",
+        "memory.status.entities": "实体",
+        "memory.status.vector": "向量索引",
+        "memory.status.vectorOn": "已启用",
+        "memory.status.vectorOff": "未启用",
+        "memory.status.llm": "LLM 消耗",
+        "memory.status.llmCalls": "近 7 天 · {n} 次调用",
+        "memory.status.error": "加载失败"
+      },
+      en: {
+        "memory.panel.empty": "No memories yet",
+        "memory.panel.open": "Memory",
+        "memory.tab.all": "All",
+        "memory.tab.preference": "Preferences",
+        "memory.tab.project": "Projects",
+        "memory.tab.decision": "Decisions",
+        "memory.tab.history": "History",
+        "memory.settings.title": "Memory Settings",
+        "memory.settings.profile": "User Profile",
+        "memory.settings.profileHint": "Describe yourself once — the agent reads it every turn.",
+        "memory.settings.profileSave": "Save Profile",
+        "memory.settings.profileSaved": "Profile saved",
+        "memory.settings.rules": "Rules",
+        "memory.settings.rulesHint": "Rules the agent must follow — add or remove anytime, effective next turn.",
+        "memory.settings.ruleAdd": "Add Rule",
+        "memory.settings.rulePlaceholder": "e.g. Always lead with a conclusion",
+        "memory.settings.commands": "Custom Commands",
+        "memory.settings.commandsHint": "Save prompts as slash commands and invoke them right from the composer.",
+        "memory.settings.cmdName": "Name",
+        "memory.settings.cmdDesc": "Description",
+        "memory.settings.cmdInstruction": "Instruction",
+        "memory.settings.cmdAdd": "Add Command",
+        "memory.settings.cmdDelete": "Delete",
+        "memory.settings.empty": "Nothing yet",
+        "memory.panel.semantic": "Semantic",
+        "memory.sidebar.aria": "Open memory panel",
+        "memory.view.label": "Memory",
+        "memory.overlay.close": "Close",
+        "memory.explorer.tabMemory": "Memories",
+        "memory.explorer.tabEntities": "Entities",
+        "memory.explorer.tabSettings": "Settings",
+        "memory.explorer.tabStatus": "Status",
+        "memory.entities.count": "{n} entities",
+        "memory.entities.pick": "Select an entity to see its attributes and relations",
+        "memory.entities.none": "No entities yet — turn on entity extraction and people / projects / concepts will accumulate here",
+        "memory.entities.attrs": "Attributes",
+        "memory.entities.relations": "Relations",
+        "memory.entities.mentions": "{n} mentions",
+        "memory.entities.lastSeen": "Last seen",
+        "memory.entities.graph": "Relation graph",
+        "memory.entity.person": "People",
+        "memory.entity.project": "Projects",
+        "memory.entity.concept": "Concepts",
+        "memory.entity.technology": "Technologies",
+        "memory.entity.organization": "Organizations",
+        "memory.entity.other": "Others",
+        "memory.explorer.search": "Search title or content…",
+        "memory.explorer.searchTitle": "Semantic Search",
+        "memory.explorer.types": "Types",
+        "memory.explorer.timeline": "Timeline",
+        "memory.explorer.detail": "Details",
+        "memory.explorer.emptyDetail": "Select a memory in the timeline to read it",
+        "memory.explorer.copy": "Copy content",
+        "memory.explorer.copied": "Copied",
+        "memory.explorer.refresh": "Refresh",
+        "memory.explorer.loadMore": "Load more",
+        "memory.explorer.count": "{n} items",
+        "memory.explorer.empty": "No memories yet",
+        "memory.explorer.source": "Source",
+        "memory.explorer.created": "Created",
+        "memory.explorer.updated": "Updated",
+        "memory.explorer.tags": "Tags",
+        "memory.explorer.importance": "Importance",
+        "memory.explorer.topK": "Results limit",
+        "memory.explorer.topKOption": "Return {n}",
+        "memory.card.open": "Open full text in the Memory tab",
+        "memory.time.now": "just now",
+        "memory.time.seconds": "{n}s ago",
+        "memory.time.minutes": "{n}m ago",
+        "memory.time.hours": "{n}h ago",
+        "memory.time.days": "{n}d ago",
+        "memory.graph.title": "Memory Graph",
+        "memory.graph.aria": "Memory graph",
+        "memory.graph.placeholder": "Type an entity name to see its network…",
+        "memory.graph.depth": "hops",
+        "memory.graph.empty": "The graph is waiting for data: entities and relations accumulate as memories are extracted",
+        "memory.graph.notFound": "Entity not found",
+        "memory.graph.attrs": "Attributes",
+        "memory.graph.related": "Related memories",
+        "memory.graph.relation": "Relation",
+        "memory.graph.sourceMemory": "View source memory",
+        "memory.graph.hint": "Drag nodes to rearrange · drag the background to pan · scroll to zoom",
+        "memory.graph.resetView": "Reset view",
+        "memory.graph.viewInGraph": "Open in entity explorer",
+        "memory.graph.loading": "Loading…",
+        "memory.graph.distance": "{n} hop(s) from root",
+        "memory.settings.vectorTitle": "Vector Search",
+        "memory.settings.vectorHint": "Match by meaning, not just wording — connect any OpenAI-compatible embeddings API.",
+        "memory.settings.vectorEnabled": "Enable vector search",
+        "memory.settings.vectorBaseUrl": "Base URL",
+        "memory.settings.vectorApiKey": "API Key",
+        "memory.settings.vectorModel": "Model",
+        "memory.settings.vectorSave": "Save Config",
+        "memory.settings.vectorSaved": "Config saved",
+        "memory.settings.vectorReindex": "Reindex",
+        "memory.settings.vectorReindexing": "Indexing…",
+        "memory.settings.vectorReindexDone": "Indexed {n} items",
+        "memory.settings.apiTokenTitle": "API Token (optional)",
+        "memory.settings.apiTokenHint": "Lock write operations behind a token — browsing stays open. Clear and save to disable.",
+        "memory.settings.apiTokenPlaceholder": "Empty = no auth (default)",
+        "memory.settings.apiTokenSave": "Save Token",
+        "memory.settings.apiTokenSaved": "Token saved",
+        "memory.explorer.delete": "Delete",
+        "memory.explorer.confirmDelete": "Confirm delete?",
+        "memory.explorer.cancel": "Cancel",
+        "memory.explorer.deleted": "Deleted",
+        "memory.explorer.deleteFailed": "Delete failed",
+        "memory.status.memories": "Total memories",
+        "memory.status.entities": "Entities",
+        "memory.status.vector": "Vector index",
+        "memory.status.vectorOn": "Enabled",
+        "memory.status.vectorOff": "Disabled",
+        "memory.status.llm": "LLM Usage",
+        "memory.status.llmCalls": "Last 7 days · {n} calls",
+        "memory.status.error": "Failed to load"
+      }
+    };
+
+    function typeLabel(t, type) {
+      const key = `memory.tab.${type}`;
+      const label = t(key);
+      return label && label !== key ? label : String(type);
+    }
+
+    // Entity types live under their own i18n subtree (person/project/...);
+    // unknown or "other" falls back to the raw type string.
+    function entityTypeLabel(t, type) {
+      const key = `memory.entity.${type}`;
+      const label = t(key);
+      return label && label !== key ? label : String(type);
+    }
+
+    function formatDate(value) {
+      if (!value) return "—";
+      const date = new Date(value);
+      return Number.isNaN(date.getTime()) ? "—" : date.toLocaleString();
+    }
+
+    // Relative time ("2分钟前") keeps cards scannable; anything older than a
+    // week falls back to the absolute date. The card meta shows the relative
+    // form and carries the full timestamp in a title tooltip.
+    function formatRelativeTime(value, t) {
+      if (!value) return "—";
+      const ms = new Date(value).getTime();
+      if (Number.isNaN(ms)) return "—";
+      const diff = Date.now() - ms;
+      if (diff < 60_000) return t("memory.time.now");
+      const minutes = Math.floor(diff / 60_000);
+      if (minutes < 60) return t("memory.time.minutes").replace("{n}", String(minutes));
+      const hours = Math.floor(minutes / 60);
+      if (hours < 24) return t("memory.time.hours").replace("{n}", String(hours));
+      const days = Math.floor(hours / 24);
+      if (days < 7) return t("memory.time.days").replace("{n}", String(days));
+      return new Date(ms).toLocaleDateString();
+    }
+
+    // Memory-library stylesheet, injected once per page following the host's
+    // data-plugin-css convention. Every value resolves to the host's design
+    // tokens: background layers, label/border/interactive aliases and the
+    // --dsw-font-* scale, so the page reads as a first-party view beside
+    // Chat / Trajectory (flat layer-1 canvas, hairline column separators,
+    // text-turns-brand-blue active states — no boxed panels).
+    const CSS_TAG = "@modusensus/dsh-mneme/drawer.css";
+    const css = [
+      // --- sidebar foot trigger (wide row / collapsed rail icon) ---
+      ".mneme-trigger{box-sizing:border-box;cursor:pointer;width:calc(100% + 4px);height:42px;color:var(--dsw-alias-label-primary);background:0 0;border:none;border-radius:12px;flex:none;align-items:center;gap:8px;margin:4px -2px;padding:0 10px 0 8px;font-family:inherit;font-size:14px;line-height:22px;display:flex;overflow:hidden}",
+      ".mneme-trigger:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-trigger.mneme-rail{border-radius:50%;justify-content:center;gap:0;width:36px;height:36px;margin:8px 0 10px;padding:0}",
+      ".mneme-trigger-label{white-space:nowrap;overflow:hidden}",
+      // --- shared controls ---
+      ".mneme-search{box-sizing:border-box;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base,transparent);color:var(--dsw-alias-label-primary);font-family:inherit;font-size:13px;outline:none;transition:border-color .12s,box-shadow .12s}",
+      ".mneme-search:focus{border-color:var(--dsw-alias-state-business-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-business-primary) 15%,transparent)}",
+      ".mneme-search::placeholder{color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-chip{height:26px;padding:0 10px;border-radius:8px;border:1px solid transparent;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:12px;line-height:16px;display:inline-flex;align-items:center}",
+      ".mneme-chip:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-chip.mneme-active{color:var(--dsw-alias-state-business-primary);background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,transparent)}",
+      ".mneme-select{box-sizing:border-box;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base,transparent);color:var(--dsw-alias-label-primary);font-family:inherit;font-size:13px;outline:none}",
+      ".mneme-footbtn{border:none;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:12px;line-height:16px;padding:3px 8px;border-radius:6px}",
+      ".mneme-footbtn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}",
+      ".mneme-hint{color:var(--dsw-alias-label-tertiary);padding:24px 0;text-align:center;font-size:13px}",
+      ".mneme-entitychip{flex:none;height:26px;padding:0 10px;border-radius:8px;border:none;background:none;color:var(--dsw-alias-state-business-primary);cursor:pointer;font-family:inherit;font-size:12px;line-height:16px;display:inline-flex;align-items:center}",
+      ".mneme-entitychip:hover{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,transparent)}",
+      // --- main-area memory library page ---
+      ".mneme-x{flex:1;min-height:0;height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;background:var(--dsw-alias-bg-layer-1);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2)}",
+      ".mneme-xbar{flex:none;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--dsw-alias-border-l2);padding:0 16px}",
+      ".mneme-filterbar{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--dsw-alias-border-l2)}",
+      ".mneme-vtabs{display:flex;align-items:stretch;height:38px}",
+      ".mneme-vtab{position:relative;border:0;background:none;cursor:pointer;padding:0 10px;color:var(--dsw-alias-label-tertiary);font-family:inherit;font-size:13px;font-weight:500;line-height:16px;display:inline-flex;align-items:center;gap:6px}",
+      ".mneme-vtab:hover{color:var(--dsw-alias-label-primary)}",
+      ".mneme-vtab.mneme-active{color:var(--dsw-alias-state-business-primary)}",
+      ".mneme-vtab.mneme-active::after{content:\"\";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--dsw-alias-state-business-primary)}",
+      ".mneme-xtools{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 0 0 12px}",
+      ".mneme-xcount{flex:none;font-size:12px;line-height:16px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}",
+      // --- three-column browse layout: hairline separators, no outer box ---
+      ".mneme-xmain{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}",
+      ".mneme-xside{flex:none;width:236px;min-width:0;min-height:0;overflow-y:auto;padding:12px;border-right:1px solid var(--dsw-alias-border-l2);box-sizing:border-box;display:flex;flex-direction:column;gap:8px}",
+      ".mneme-xside--filter{width:214px}",
+      ".mneme-xbrowse{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}",
+      ".mneme-xrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}",
+      ".mneme-xsearch{width:100%}",
+      ".mneme-xselect{flex:1;min-width:0}",
+      ".mneme-xcolhead{flex:none;font-size:12px;font-weight:500;color:var(--dsw-alias-label-tertiary);padding:2px 8px 8px}",
+      ".mneme-xtype{display:flex;justify-content:flex-start;align-items:center;gap:8px;width:100%;padding:5px 8px;border:none;border-radius:8px;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:13px;line-height:18px;text-align:left}",
+      ".mneme-xtype:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-xtype.mneme-active{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary);font-weight:500}",
+      ".mneme-xcount2{flex:none;margin-left:auto;font-size:12px;color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-xmonth{display:flex;align-items:center;gap:4px;width:100%;padding:6px 8px 4px;border:none;border-radius:8px;background:none;color:var(--dsw-alias-label-primary);cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;line-height:18px;text-align:left}",
+      ".mneme-xmonth:first-child{margin-top:0}",
+      ".mneme-xmonth:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-xcaret{flex:none;font-size:10px;color:var(--dsw-alias-label-tertiary);width:10px}",
+      ".mneme-xday{display:flex;align-items:center;gap:4px;margin:6px 0 2px 22px;padding:2px 6px;border:none;border-radius:6px;background:none;font-family:inherit;font-size:12px;line-height:16px;color:var(--dsw-alias-label-tertiary);cursor:pointer;text-align:left}",
+      ".mneme-xday:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}",
+      ".mneme-xitem{display:flex;gap:8px;align-items:baseline;width:calc(100% - 22px);margin-left:22px;padding:4px 8px;border:none;border-radius:8px;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:13px;line-height:18px;text-align:left}",
+      ".mneme-xitem:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-xitem.mneme-active{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary)}",
+      ".mneme-xtime{flex:none;font-size:12px;line-height:16px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}",
+      ".mneme-xname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+      ".mneme-xempty{padding:18px 16px;text-align:center;color:var(--dsw-alias-label-tertiary);font-size:13px}",
+      // --- memory-type color dots (mirrored across filter / timeline / detail) ---
+      ".mneme-xdot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}",
+      ".mneme-xdot--all{background:transparent;border:1.5px solid currentColor;opacity:.55;box-sizing:border-box}",
+      ".mneme-xitem .mneme-xdot{align-self:center}",
+      // --- detail column (preview pane sits BELOW the timeline: the list is
+      // the primary scan target, the detail grows only when something is
+      // selected so the empty state never eats the viewport) ---
+      ".mneme-xdetail{flex:none;max-height:56%;min-height:0;overflow-y:auto;padding:12px 20px 16px;border-top:1px solid var(--dsw-alias-border-l2)}",
+      ".mneme-xtree{flex:1;min-height:0;overflow-y:auto;padding:8px 10px 28px}",
+      ".mneme-xdinner{max-width:720px}",
+      ".mneme-xdtitle{font-size:16px;font-weight:600;line-height:24px;color:var(--dsw-alias-label-primary);margin-bottom:10px;word-break:break-word}",
+      ".mneme-xdmeta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-xdsrc{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}",
+      ".mneme-xdcontent{margin-top:14px;font-size:14px;line-height:1.75;color:var(--dsw-alias-label-primary);white-space:pre-wrap;word-break:break-word}",
+      ".mneme-xdactions{display:flex;gap:8px;margin-top:18px}",
+      // --- graph sub-view (fills the content area under the tabs) ---
+      ".mneme-graph{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding:12px 16px 16px;box-sizing:border-box}",
+      ".mneme-graphbar{display:flex;gap:8px;align-items:center;flex:none;margin-bottom:10px}",
+      ".mneme-graphsvg{flex:1;min-height:180px;width:100%;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-button-elevated-fill);cursor:grab;touch-action:none}",
+      ".mneme-gnode{cursor:pointer}",
+      ".mneme-gnode circle{stroke:var(--dsw-alias-bg-layer-2);stroke-width:2;transition:stroke-width .12s}",
+      ".mneme-gnode:hover circle{stroke-width:4}",
+      ".mneme-gnode.mneme-groot circle{stroke:var(--dsw-alias-state-business-primary);stroke-width:3}",
+      ".mneme-glabel{fill:var(--dsw-alias-label-secondary);font-size:11px;text-anchor:middle;pointer-events:none;user-select:none}",
+      ".mneme-gedge{stroke:var(--dsw-alias-label-dimmed);stroke-width:1.5;cursor:pointer}",
+      ".mneme-gedge:hover{stroke:var(--dsw-alias-state-business-primary)}",
+      ".mneme-gedge-dashed{stroke-dasharray:5 4;opacity:.7}",
+      ".mneme-graphhint{flex:none;color:var(--dsw-alias-label-tertiary);font-size:13px;text-align:center;padding:6px 0 2px}",
+      ".mneme-graphside{flex:none;max-height:220px;overflow-y:auto;border-top:1px solid var(--dsw-alias-border-l1);margin-top:10px;padding-top:10px}",
+      ".mneme-gs-title{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary);margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}",
+      ".mneme-gs-meta{font-size:13px;color:var(--dsw-alias-label-tertiary);margin-bottom:6px}",
+      ".mneme-gs-attr{display:flex;gap:6px;font-size:13px;padding:2px 0}",
+      ".mneme-gs-attrkey{flex:none;color:var(--dsw-alias-label-tertiary);font-size:13px}",
+      ".mneme-gs-attrval{color:var(--dsw-alias-label-secondary);word-break:break-word;font-size:13px}",
+      ".mneme-gs-link{display:block;width:100%;text-align:left;border:none;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:13px;padding:3px 6px;border-radius:6px;word-break:break-word}",
+      ".mneme-gs-link:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}",
+      // --- entity explorer: rail + layered detail (entities → attrs → relations → graph) ---
+      ".mneme-ent{flex:1;min-height:0;display:flex;overflow:hidden}",
+      ".mneme-entrail{flex:none;width:224px;min-height:0;overflow-y:auto;padding:12px;border-right:1px solid var(--dsw-alias-border-l2);box-sizing:border-box;display:flex;flex-direction:column;gap:4px}",
+      ".mneme-enttype{display:flex;align-items:center;gap:6px;width:100%;padding:8px 8px 2px;border:none;background:none;color:var(--dsw-alias-label-tertiary);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;line-height:16px;text-align:left;letter-spacing:.02em}",
+      ".mneme-entitem{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:none;border-radius:8px;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:13px;line-height:18px;text-align:left}",
+      ".mneme-entitem:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-entitem.mneme-active{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary)}",
+      ".mneme-entname{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+      ".mneme-entmentions{flex:none;font-size:11px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}",
+      ".mneme-entdetail{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:20px 24px 32px;box-sizing:border-box}",
+      ".mneme-entinner{max-width:720px}",
+      ".mneme-enttitle{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;line-height:24px;color:var(--dsw-alias-label-primary);word-break:break-word}",
+      ".mneme-enttitle .mneme-xdot{width:10px;height:10px}",
+      ".mneme-entmeta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-layer{margin-top:24px}",
+      ".mneme-layerhead{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);margin-bottom:10px}",
+      ".mneme-layercount{font-size:12px;font-weight:400;color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-attrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}",
+      ".mneme-attrcard{min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;padding:8px 12px}",
+      ".mneme-attrkey{font-size:11px;color:var(--dsw-alias-label-tertiary);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+      ".mneme-attrval{font-size:13px;line-height:19px;color:var(--dsw-alias-label-primary);word-break:break-word}",
+      ".mneme-relrow{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;border-radius:10px;background:none;color:var(--dsw-alias-label-secondary);cursor:pointer;font-family:inherit;font-size:13px;line-height:20px;text-align:left}",
+      ".mneme-relrow:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-reltype{flex:none;font-size:11px;line-height:16px;color:var(--dsw-alias-state-business-primary);border:1px solid color-mix(in srgb,var(--dsw-alias-state-business-primary) 35%,transparent);border-radius:6px;padding:0 6px}",
+      ".mneme-relname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+      // --- settings: quiet stacked sections, one concern per section ---
+      ".mneme-set{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 48px;box-sizing:border-box}",
+      ".mneme-set-inner{max-width:680px}",
+      ".mneme-set-sec{padding:20px 0 24px;border-bottom:1px solid var(--dsw-alias-border-l2)}",
+      ".mneme-set-sec:last-child{border-bottom:none}",
+      ".mneme-set-title{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary);margin-bottom:4px}",
+      ".mneme-set-desc{font-size:13px;line-height:19px;color:var(--dsw-alias-label-tertiary);margin-bottom:14px}",
+      ".mneme-set-input{box-sizing:border-box;width:100%;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base,transparent);color:var(--dsw-alias-label-primary);font-family:inherit;font-size:13px;outline:none;margin-bottom:10px;transition:border-color .12s,box-shadow .12s}",
+      ".mneme-set-input:focus{border-color:var(--dsw-alias-state-business-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-state-business-primary) 15%,transparent)}",
+      ".mneme-set-input::placeholder{color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-set-input--area{height:auto;min-height:76px;padding:8px 12px;resize:vertical;line-height:1.6}",
+      ".mneme-btn{flex:none;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:none;color:var(--dsw-alias-label-primary);cursor:pointer;font-family:inherit;font-size:12px;line-height:16px;display:inline-flex;align-items:center;gap:6px}",
+      ".mneme-btn:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-btn:disabled{opacity:.5;cursor:default}",
+      ".mneme-saved{font-size:12px;color:var(--dsw-alias-state-success,#2a7)}",
+      // rule rows: numbered chips + hover-revealed delete
+      ".mneme-set-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;margin-bottom:8px;background:var(--dsw-alias-bg-base,transparent)}",
+      ".mneme-set-idx{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}",
+      ".mneme-set-ruletext{flex:1;min-width:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);word-break:break-word}",
+      ".mneme-set-del{flex:none;opacity:0;transition:opacity .12s;border:none;background:none;color:var(--dsw-alias-label-tertiary);cursor:pointer;font-size:14px;line-height:20px;padding:0 4px;border-radius:6px}",
+      ".mneme-set-row:hover .mneme-set-del,.mneme-set-row:focus-within .mneme-set-del{opacity:1}",
+      ".mneme-set-del:hover{color:var(--dsw-alias-state-error,#c33);background:var(--dsw-alias-interactive-bg-hover)}",
+      ".mneme-set-cmd{flex:1;min-width:0}",
+      ".mneme-set-cmdname{font-size:13px;font-weight:600;color:var(--dsw-alias-state-business-primary)}",
+      ".mneme-set-cmddesc{font-size:12px;line-height:17px;color:var(--dsw-alias-label-tertiary);margin-top:1px;word-break:break-word}",
+      // --- settings sub-view ---
+      ".mneme-set{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 48px;box-sizing:border-box}",
+      // --- hero fallback: full-viewport memory library when no tab ring exists ---
+      // The host hides the whole conversation tab ring while a session is
+      // blank (hero screen), so the sidebar entry cannot activate the tab
+      // there. This surface reuses the exact MemoryExplorer UI at full size —
+      // not a side drawer — so the library stays reachable from any state.
+      ".mneme-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--dsw-alias-bg-layer-1);animation:mneme-fadein .12s ease-out}",
+      ".mneme-overlaybar{flex:none;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px 0 16px;border-bottom:1px solid var(--dsw-alias-border-l2)}",
+      ".mneme-overlaytitle{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}",
+      ".mneme-overlaybody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}",
+      "@keyframes mneme-fadein{from{opacity:0}to{opacity:1}}",
+      // --- explorer refresh: paged month tree, sticky headers, inline icons ---
+      ".mneme-vtabico{flex:none;opacity:.85}",
+      ".mneme-xsearchwrap{position:relative;flex:none}",
+      ".mneme-xsearchico{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--dsw-alias-label-tertiary);pointer-events:none}",
+      ".mneme-xsearchwrap .mneme-xsearch{padding-left:27px}",
+      ".mneme-footbtn{display:inline-flex;align-items:center;gap:4px}",
+      ".mneme-xmonth{position:sticky;top:0;z-index:2;background:var(--dsw-alias-bg-layer-1);display:flex;align-items:center;gap:6px}",
+      ".mneme-xmonthcount{margin-left:auto;color:var(--dsw-alias-label-tertiary);font-weight:400;font-variant-numeric:tabular-nums}",
+      ".mneme-xcaret{display:inline-flex;align-items:center;justify-content:center;color:var(--dsw-alias-label-tertiary)}",
+      ".mneme-xmore{display:flex;justify-content:center;align-items:center;padding:10px 0 24px;min-height:20px}",
+      ".mneme-xemptyico{display:block;margin:0 auto 6px;opacity:.7}",
+      // --- status sub-view: responsive stat-card grid (auto-fill, ~220px min) ---
+      ".mneme-status{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 32px;box-sizing:border-box}",
+      ".mneme-statusgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;max-width:960px}",
+      ".mneme-statuscard{min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;padding:14px}",
+      ".mneme-statusnum{font-size:24px;font-weight:600;line-height:32px;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}",
+      ".mneme-statuscap{margin-top:4px;font-size:13px;line-height:19px;color:var(--dsw-alias-label-tertiary);word-break:break-word}",
+      // --- destructive actions: red outline = delete, solid red = confirm ---
+      ".mneme-btndanger{color:var(--dsw-alias-state-error,#c33);border-color:var(--dsw-alias-state-error,#c33)}",
+      ".mneme-btndanger:hover{background:color-mix(in srgb,var(--dsw-alias-state-error,#c33) 12%,transparent)}",
+      ".mneme-btndangerconfirm{background:var(--dsw-alias-state-error,#c33);border-color:var(--dsw-alias-state-error,#c33);color:#fff}",
+      ".mneme-btndangerconfirm:hover{filter:brightness(.9)}"
+    ].join("\n");
+    if (typeof document !== "undefined" && document.querySelector(`style[data-plugin-css="${CSS_TAG}"]`) === null) {
+      const tag = document.createElement("style");
+      tag.dataset.plugin = "@modusensus/dsh-mneme";
+      tag.dataset.pluginCss = CSS_TAG;
+      tag.textContent = css;
+      document.head.appendChild(tag);
+    }
+
+    const h = react.createElement;
+
+    // --- graph view constants ---
+    // Entity type → node fill. The host has no palette token for categorical
+    // data, so these are fixed hues tuned for both light and dark themes
+    // (medium saturation, similar luminance).
+    const TYPE_COLORS = {
+      person: "#3b82f6",
+      project: "#22c55e",
+      concept: "#a855f7",
+      technology: "#f59e0b",
+      organization: "#06b6d4"
+    };
+    function typeColor(type) {
+      return TYPE_COLORS[type] || "#94a3b8";
+    }
+
+    // Memory-type → dot fill, shared by the type filter, timeline rows and the
+    // detail meta so one hue always means one memory type across the panel.
+    // Same palette rules as TYPE_COLORS: fixed hues, medium saturation,
+    // similar luminance, legible on light and dark themes.
+    const MEMORY_TYPE_COLORS = {
+      preference: "#f59e0b",
+      project: "#22c55e",
+      decision: "#3b82f6",
+      summary: "#a855f7",
+      history: "#94a3b8"
+    };
+    function memoryTypeColor(type) {
+      return MEMORY_TYPE_COLORS[type] || "#94a3b8";
+    }
+
+    // Compact date for the detail meta ("2026/8/16"); the full timestamp
+    // stays in the tooltip.
+    function formatDateShort(value) {
+      if (!value) return "—";
+      const date = new Date(value);
+      return Number.isNaN(date.getTime()) ? "—" : date.toLocaleDateString();
+    }
+    // Graph canvas space: the svg's fixed viewBox. The simulation runs in
+    // these user units — never in CSS pixels — so node positions always land
+    // inside the drawn area; the browser scales the viewBox to whatever the
+    // element's CSS size is (small window, hidden tab, maximized #72).
+    const VIEW_W = 380, VIEW_H = 300;
+
+    function nodeRadius(n) {
+      // mention_count → area-ish growth, clamped so hubs stay legible.
+      return 7 + Math.min(20, Math.max(1, n.mention_count ?? 1)) * 0.55;
+    }
+
+    // Deterministic golden-angle spiral: no two nodes start overlapping, and
+    // re-running the layout for the same data is stable (no random seeding).
+    function initialPositions(nodes, width, height) {
+      const cx = width / 2;
+      const cy = height / 2;
+      return nodes.map((n, i) => {
+        const r = i === 0 ? 0 : 34 + 13 * Math.sqrt(i);
+        const a = i * 2.39996;
+        return { ...n, x: cx + r * Math.cos(a), y: cy + r * Math.sin(a), vx: 0, vy: 0, pinned: false };
+      });
+    }
+
+    // --- Entity explorer: the entity-gene layers made visible ---
+    // Rail = the entity directory (grouped by type, mention-ranked inside a
+    // type). Detail = the layered structure from docs/ENTITIES.md:
+    //   ① 属性  current snapshot of entity_attrs (saveAttr invalidates old rows)
+    //   ② 关系  entity_relations touching the entity (from the 1-hop ego walk)
+    //   ③ 关联记忆  memories recalled through the entity: prefix search
+    //   ④ 关系图谱  the same ego graph the old graph-only tab drew
+    function EntityPanel({ t, focusEntity, onJumpMemory }) {
+      const [entities, setEntities] = useState(null); // null = still loading
+      const [railQuery, setRailQuery] = useState("");
+      const [entityName, setEntityName] = useState(focusEntity || "");
+      const [depth, setDepth] = useState(1);
+      const [data, setData] = useState(null);
+      const [status, setStatus] = useState("idle"); // idle | loading | ready | notfound | error
+      const [selected, setSelected] = useState(null); // { kind: "node"|"edge", node?|edge? }
+      const [attrs, setAttrs] = useState([]);
+      const [related, setRelated] = useState([]);
+      const svgRef = useRef(null);
+      const posRef = useRef([]); // live simulation positions, not React state
+      const dragRef = useRef(null); // { id, moved }
+      const viewRef = useRef({ x: 0, y: 0, k: 1 }); // pan/zoom viewport, viewBox units
+      const [frame, setFrame] = useState(0); // re-render tick driven by the simulation
+
+      useEffect(() => {
+        let cancelled = false;
+        apiFetch("/api/dsh-mneme/entities?limit=500")
+          .then((r) => (r.ok ? r.json() : { entities: [] }))
+          .then((j) => { if (!cancelled) setEntities(Array.isArray(j.entities) ? j.entities : []); })
+          .catch(() => { if (!cancelled) setEntities([]); });
+        return () => { cancelled = true; };
+      }, []);
+
+      useEffect(() => {
+        if (focusEntity && focusEntity !== entityName) {
+          setEntityName(focusEntity);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [focusEntity]);
+
+      // Auto-select the most recently seen entity so the layers are never a
+      // dead end on first open (the rail still allows picking another one).
+      useEffect(() => {
+        if (!entities || entityName || entities.length === 0) return;
+        setEntityName(entities[0].name);
+      }, [entities, entityName]);
+
+      const load = useCallback(async (name, d) => {
+        if (!name) { setData(null); setStatus("idle"); return; }
+        setStatus("loading");
+        setSelected(null);
+        try {
+          const res = await apiFetch(`/api/dsh-mneme/semantic/graph/ego?entity=${encodeURIComponent(name)}&depth=${d}`);
+          if (res.status === 404) { setData(null); setStatus("notfound"); return; }
+          if (!res.ok) { setData(null); setStatus("error"); return; }
+          const json = await res.json();
+          setData(json);
+          setStatus("ready");
+        } catch {
+          setData(null);
+          setStatus("error");
+        }
+      }, []);
+
+      useEffect(() => { load(entityName, depth); }, [load, entityName, depth]);
+
+      // Layer data for the selected entity: current attrs + related memories.
+      useEffect(() => {
+        setAttrs([]);
+        setRelated([]);
+        if (!entityName) return;
+        let cancelled = false;
+        apiFetch(`/api/dsh-mneme/semantic/graph/entity-attrs?entity=${encodeURIComponent(entityName)}`)
+          .then((r) => (r.ok ? r.json() : { attrs: [] }))
+          .then((j) => { if (!cancelled) setAttrs(Array.isArray(j.attrs) ? j.attrs : []); })
+          .catch(() => {});
+        apiFetch(`/api/dsh-mneme/search?q=${encodeURIComponent("entity:" + entityName)}&limit=10`)
+          .then((r) => (r.ok ? r.json() : { items: [] }))
+          .then((j) => { if (!cancelled) setRelated(Array.isArray(j.items) ? j.items : []); })
+          .catch(() => {});
+        return () => { cancelled = true; };
+      }, [entityName]);
+
+      // Simulation: run in rAF against posRef, tick React only every few frames.
+      // Re-seeds when data changes; dragging writes straight into posRef.
+      useEffect(() => {
+        if (!data || data.nodes.length === 0) return;
+        // Bounds in viewBox units: measuring clientWidth here put the gravity
+        // center and clamp range outside the 380-wide viewBox once the window
+        // (or its hidden-then-shown container) got wide, and every node was
+        // clipped off-canvas — the maximized-invisible bug (#72).
+        posRef.current = initialPositions(data.nodes, VIEW_W, VIEW_H);
+        const byId = new Map(posRef.current.map((n) => [n.id, n]));
+        const edges = data.edges;
+        let raf = 0;
+        let n = 0;
+        const tick = () => {
+          const nodes = posRef.current;
+          // pairwise repulsion, capped so far nodes don't explode
+          for (let i = 0; i < nodes.length; i++) {
+            for (let j = i + 1; j < nodes.length; j++) {
+              const a = nodes[i], b = nodes[j];
+              let dx = b.x - a.x, dy = b.y - a.y;
+              let d2 = dx * dx + dy * dy;
+              if (d2 < 1) { dx = (Math.random() - 0.5) || 1; dy = (Math.random() - 0.5) || 1; d2 = dx * dx + dy * dy; }
+              const d = Math.sqrt(d2);
+              const f = Math.min(2200 / d2, 6);
+              const fx = (dx / d) * f, fy = (dy / d) * f;
+              a.vx -= fx; a.vy -= fy; b.vx += fx; b.vy += fy;
+            }
+          }
+          // edge springs pull toward the target length
+          for (const e of edges) {
+            const a = byId.get(e.from), b = byId.get(e.to);
+            if (!a || !b) continue;
+            const dx = b.x - a.x, dy = b.y - a.y;
+            const d = Math.sqrt(dx * dx + dy * dy) || 1;
+            const f = (d - 90) * 0.02;
+            const fx = (dx / d) * f, fy = (dy / d) * f;
+            a.vx += fx; a.vy += fy; b.vx -= fx; b.vy -= fy;
+          }
+          let energy = 0;
+          for (const node of nodes) {
+            // gentle gravity toward center keeps the cloud from drifting off-canvas
+            node.vx += (VIEW_W / 2 - node.x) * 0.002;
+            node.vy += (VIEW_H / 2 - node.y) * 0.002;
+            if (node.pinned || node === dragRef.current?.node) { node.vx = 0; node.vy = 0; continue; }
+            node.vx *= 0.85; node.vy *= 0.85;
+            node.x = Math.max(nodeRadius(node) + 4, Math.min(VIEW_W - nodeRadius(node) - 4, node.x + node.vx));
+            node.y = Math.max(nodeRadius(node) + 14, Math.min(VIEW_H - nodeRadius(node) - 14, node.y + node.vy));
+            energy += Math.abs(node.vx) + Math.abs(node.vy);
+          }
+          n++;
+          if (n % 3 === 0) setFrame((f) => f + 1);
+          if (n < 300 && energy > 0.4) raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+      }, [data]);
+
+      // drag handling on the svg surface
+      const onNodeMouseDown = (e, node) => {
+        e.preventDefault();
+        e.stopPropagation(); // node drag must not start a background pan
+        dragRef.current = { node, moved: false };
+        const startX = e.clientX, startY = e.clientY;
+        const origX = node.x, origY = node.y;
+        const svg = svgRef.current;
+        const rect = svg.getBoundingClientRect();
+        const scale = VIEW_W / Math.max(1, rect.width) / viewRef.current.k; // viewBox units per css px, zoom-aware
+        const onMove = (ev) => {
+          dragRef.current.moved = true;
+          node.x = origX + (ev.clientX - startX) * scale;
+          node.y = origY + (ev.clientY - startY) * scale;
+          setFrame((f) => f + 1);
+        };
+        const onUp = () => {
+          window.removeEventListener("mousemove", onMove);
+          window.removeEventListener("mouseup", onUp);
+          setTimeout(() => { dragRef.current = null; }, 0);
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+      };
+
+      const onNodeClick = (node) => {
+        if (dragRef.current?.moved) return; // it was a drag, not a click
+        setSelected({ kind: "node", node });
+      };
+      const onEdgeClick = (edge) => setSelected({ kind: "edge", edge });
+
+      // --- canvas pan & zoom ---
+      // The viewport (translate + scale) lives in viewRef so the simulation
+      // and the handlers share it without re-mounting; every mutation bumps
+      // `frame` to re-render. Panning starts on the bare svg surface (node
+      // mousedowns stopPropagation above); zooming is a native non-passive
+      // wheel listener because React attaches wheel handlers passively and
+      // could not preventDefault the page scroll.
+      const svgToView = (clientX, clientY) => {
+        const svg = svgRef.current;
+        const rect = svg.getBoundingClientRect();
+        const sx = VIEW_W / Math.max(1, rect.width);
+        const sy = VIEW_H / Math.max(1, rect.height);
+        return { x: (clientX - rect.left) * sx, y: (clientY - rect.top) * sy };
+      };
+
+      const onSurfaceMouseDown = (e) => {
+        if (e.button !== 0) return;
+        e.preventDefault();
+        const start = { x: e.clientX, y: e.clientY };
+        const orig = { ...viewRef.current };
+        const onMove = (ev) => {
+          const rect = svgRef.current?.getBoundingClientRect();
+          if (!rect) return;
+          const sx = VIEW_W / Math.max(1, rect.width);
+          const sy = VIEW_H / Math.max(1, rect.height);
+          const v = viewRef.current;
+          v.x = orig.x + (ev.clientX - start.x) * sx;
+          v.y = orig.y + (ev.clientY - start.y) * sy;
+          setFrame((f) => f + 1);
+        };
+        const onUp = () => {
+          window.removeEventListener("mousemove", onMove);
+          window.removeEventListener("mouseup", onUp);
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+      };
+
+      useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg) return undefined;
+        const onWheel = (e) => {
+          e.preventDefault();
+          const v = viewRef.current;
+          const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+          const k = Math.min(3, Math.max(0.5, v.k * factor));
+          const s = svgToView(e.clientX, e.clientY);
+          // keep the point under the cursor pinned while the scale changes
+          const px = (s.x - v.x) / v.k;
+          const py = (s.y - v.y) / v.k;
+          v.k = k;
+          v.x = s.x - px * k;
+          v.y = s.y - py * k;
+          setFrame((f) => f + 1);
+        };
+        svg.addEventListener("wheel", onWheel, { passive: false });
+        return () => svg.removeEventListener("wheel", onWheel);
+      });
+
+      const resetView = () => {
+        viewRef.current = { x: 0, y: 0, k: 1 };
+        setFrame((f) => f + 1);
+      };
+
+      const nodes = posRef.current;
+      const nodeById = new Map(nodes.map((n) => [n.id, n]));
+
+      // --- rail: entity directory grouped by type ---
+      const q = railQuery.trim().toLowerCase();
+      const visibleEntities = (entities || []).filter((e) => !q || (e.name || "").toLowerCase().includes(q));
+      const ENTITY_TYPE_ORDER = ["person", "project", "concept", "technology", "organization"];
+      const groups = [];
+      const byType = new Map();
+      for (const e of visibleEntities) {
+        const key = ENTITY_TYPE_ORDER.includes(e.type) ? e.type : "other";
+        if (!byType.has(key)) { const g = { key, items: [] }; byType.set(key, g); groups.push(g); }
+        byType.get(key).items.push(e);
+      }
+
+      const entity = entities?.find((e) => e.name === entityName) || null;
+      const rootEdges = (data?.edges || []).filter((e) => e.from === data?.root?.id || e.to === data?.root?.id);
+      const graphStatus = status === "ready" && data && data.nodes.length <= 1 ? "empty" : status;
+
+      const rail = h("div", { className: "mneme-entrail" },
+        h("div", { className: "mneme-xcolhead" }, t("memory.view.label")),
+        h("input", {
+          className: "mneme-search mneme-xsearch",
+          placeholder: t("memory.graph.placeholder"),
+          value: railQuery,
+          onChange: (e) => setRailQuery(e.target.value)
+        }),
+        entities === null && h("div", { className: "mneme-xempty" }, "…"),
+        entities !== null && entities.length === 0 && h("div", { className: "mneme-xempty" }, t("memory.entities.none")),
+        entities !== null && entities.length > 0 && h("div", { className: "mneme-xcount" },
+          t("memory.entities.count").replace("{n}", String(entities.length))),
+        groups.map((g) => h("div", { key: g.key },
+          h("div", { className: "mneme-enttype" },
+            h("span", { className: "mneme-xdot", style: { color: typeColor(g.key === "other" ? null : g.key) }, "aria-hidden": "true" }),
+            entityTypeLabel(t, g.key)
+          ),
+          g.items.map((e) => h("button", {
+            key: e.id,
+            className: e.name === entityName ? "mneme-entitem mneme-active" : "mneme-entitem",
+            onClick: () => setEntityName(e.name)
+          },
+            h("span", { className: "mneme-entname" }, e.name),
+            h("span", { className: "mneme-entmentions" }, `×${e.mention_count ?? 1}`)
+          ))
+        ))
+      );
+
+      // side card for a clicked (non-root) node or edge inside the graph layer
+      const side = selected?.kind === "node"
+        ? h("div", { className: "mneme-graphside" },
+            h("div", { className: "mneme-gs-title" },
+              h("span", null, selected.node.name),
+              h("span", { className: "mneme-gs-meta" },
+                `${entityTypeLabel(t, selected.node.type || "concept")} · ★${selected.node.mention_count ?? 1}`)
+            ),
+            selected.node.name !== entityName && h("button", {
+              className: "mneme-footbtn",
+              onClick: () => setEntityName(selected.node.name)
+            }, t("memory.graph.viewInGraph")),
+            attrs.length > 0 && h("div", null,
+              h("div", { className: "mneme-gs-meta" }, t("memory.graph.attrs")),
+              attrs.map((a, i) => h("div", { key: i, className: "mneme-gs-attr" },
+                h("span", { className: "mneme-gs-attrkey" }, `${a.key}:`),
+                h("span", { className: "mneme-gs-attrval" }, a.value)
+              ))
+            )
+          )
+        : selected?.kind === "edge"
+          ? h("div", { className: "mneme-graphside" },
+              h("div", { className: "mneme-gs-title" },
+                h("span", null,
+                  `${nodeById.get(selected.edge.from)?.name ?? "?"} → ${selected.edge.relation_type} → ${nodeById.get(selected.edge.to)?.name ?? "?"}`)
+              ),
+              h("div", { className: "mneme-gs-meta" },
+                `${t("memory.graph.relation")} · ${formatRelativeTime(selected.edge.created_at, t)}`),
+              selected.edge.memory_id && h("button", {
+                className: "mneme-footbtn",
+                onClick: () => onJumpMemory && onJumpMemory({ id: selected.edge.memory_id })
+              }, t("memory.graph.sourceMemory"))
+            )
+          : null;
+
+      const detail = h("div", { className: "mneme-entdetail" },
+        h("div", { className: "mneme-entinner" },
+          status === "idle" && h("div", { className: "mneme-hint" }, t("memory.entities.pick")),
+          status === "loading" && h("div", { className: "mneme-hint" }, t("memory.graph.loading")),
+          status === "notfound" && h("div", { className: "mneme-hint" }, t("memory.graph.notFound")),
+          status === "error" && h("div", { className: "mneme-hint" }, t("memory.panel.empty")),
+          status === "ready" && entity && h(react.Fragment, null,
+            h("div", { className: "mneme-enttitle" },
+              h("span", { className: "mneme-xdot", style: { color: typeColor(entity.type) }, "aria-hidden": "true" }),
+              entity.name
+            ),
+            h("div", { className: "mneme-entmeta" },
+              h("span", null, entityTypeLabel(t, entity.type || "other")),
+              h("span", null, t("memory.entities.mentions").replace("{n}", String(entity.mention_count ?? 1))),
+              h("span", { title: formatDate(entity.last_seen) },
+                `${t("memory.entities.lastSeen")}: ${formatRelativeTime(entity.last_seen, t)}`)
+            ),
+            // ① 属性 — current snapshot (valid_until IS NULL)
+            h("div", { className: "mneme-layer" },
+              h("div", { className: "mneme-layerhead" },
+                t("memory.entities.attrs"),
+                h("span", { className: "mneme-layercount" }, String(attrs.length))
+              ),
+              attrs.length === 0
+                ? h("div", { className: "mneme-xempty" }, t("memory.settings.empty"))
+                : h("div", { className: "mneme-attrgrid" },
+                    attrs.map((a, i) => h("div", { key: i, className: "mneme-attrcard", title: a.value },
+                      h("div", { className: "mneme-attrkey" }, a.key),
+                      h("div", { className: "mneme-attrval" }, a.value)
+                    ))
+                  )
+            ),
+            // ② 关系 — both directions from the 1-hop ego walk
+            h("div", { className: "mneme-layer" },
+              h("div", { className: "mneme-layerhead" },
+                t("memory.entities.relations"),
+                h("span", { className: "mneme-layercount" }, String(rootEdges.length))
+              ),
+              rootEdges.length === 0
+                ? h("div", { className: "mneme-xempty" }, t("memory.settings.empty"))
+                : rootEdges.map((e) => {
+                    const out = e.from === data.root.id;
+                    const other = nodeById.get(out ? e.to : e.from);
+                    const otherName = other?.name ?? (out ? e.to : e.from);
+                    return h("button", {
+                      key: e.id,
+                      className: "mneme-relrow",
+                      title: e.memory_id ? t("memory.graph.sourceMemory") : undefined,
+                      onClick: () => { if (e.memory_id && onJumpMemory) onJumpMemory({ id: e.memory_id }); }
+                    },
+                      h("span", { className: "mneme-relname", style: { textAlign: "right", flex: 1 } }, entity.name),
+                      h("span", { className: "mneme-reltype" }, e.relation_type),
+                      h("span", { className: "mneme-relname", style: { flex: 1 } }, otherName)
+                    );
+                  })
+            ),
+            // ③ 关联记忆 — entity: prefix recall
+            related.length > 0 && h("div", { className: "mneme-layer" },
+              h("div", { className: "mneme-layerhead" },
+                t("memory.graph.related"),
+                h("span", { className: "mneme-layercount" }, String(related.length))
+              ),
+              related.map((m) => h("button", {
+                key: m.id,
+                type: "button",
+                className: "mneme-gs-link",
+                title: t("memory.card.open"),
+                onClick: () => onJumpMemory && onJumpMemory(m)
+              }, m.title || m.content?.slice(0, 60)))
+            ),
+            // ④ 关系图谱 — the ego graph
+            h("div", { className: "mneme-layer" },
+              h("div", { className: "mneme-layerhead" },
+                t("memory.entities.graph"),
+                h("span", { className: "mneme-layercount" },
+                  h("button", {
+                    className: depth === 2 ? "mneme-chip mneme-active" : "mneme-chip",
+                    title: t("memory.graph.depth"),
+                    onClick: () => setDepth(depth === 1 ? 2 : 1)
+                  }, `${depth} ${t("memory.graph.depth")}`)),
+                h("span", { className: "mneme-layercount" },
+                  h("button", {
+                    className: "mneme-chip",
+                    title: t("memory.graph.resetView"),
+                    onClick: resetView
+                  }, t("memory.graph.resetView")))
+              ),
+              graphStatus === "empty"
+                ? h("div", { className: "mneme-hint" }, t("memory.graph.empty"))
+                : h(react.Fragment, null,
+                    h("svg", {
+                      ref: svgRef,
+                      className: "mneme-graphsvg",
+                      viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+                      style: { height: 320 },
+                      onMouseDown: onSurfaceMouseDown
+                    },
+                      h("g", {
+                        transform: `translate(${viewRef.current.x},${viewRef.current.y}) scale(${viewRef.current.k})`
+                      },
+                        data.edges.map((e) => {
+                          const a = nodeById.get(e.from), b = nodeById.get(e.to);
+                          if (!a || !b) return null;
+                          return h("line", {
+                            key: e.id,
+                            x1: a.x, y1: a.y, x2: b.x, y2: b.y,
+                            className: e.memory_id ? "mneme-gedge" : "mneme-gedge mneme-gedge-dashed",
+                            onClick: () => onEdgeClick(e)
+                          });
+                        }),
+                        nodes.map((n) => h("g", {
+                          key: n.id,
+                          className: n.id === data.root.id ? "mneme-gnode mneme-groot" : "mneme-gnode",
+                          transform: `translate(${n.x},${n.y})`,
+                          onMouseDown: (e) => onNodeMouseDown(e, n),
+                          onClick: () => onNodeClick(n),
+                          "data-node": n.name
+                        },
+                          h("circle", { r: nodeRadius(n), fill: typeColor(n.type) }),
+                          h("text", { className: "mneme-glabel", y: nodeRadius(n) + 13 }, n.name)
+                        ))
+                      )
+                    ),
+                    h("div", { className: "mneme-graphhint" }, t("memory.graph.hint"))
+                  ),
+              side
+            )
+          )
+        )
+      );
+
+      return h("div", { className: "mneme-ent" }, rail, detail);
+    }
+
+
+    function SettingsContent({ t }) {
+      const [profile, setProfile] = react.useState("");
+      const [rules, setRules] = react.useState([]);
+      const [commands, setCommands] = react.useState([]);
+      const [newRule, setNewRule] = react.useState("");
+      const [newCmd, setNewCmd] = react.useState({ name: "", description: "", instruction: "" });
+      const [saved, setSaved] = react.useState(false);
+      const [cmdError, setCmdError] = react.useState("");
+      const [vector, setVector] = react.useState({ enabled: false, baseUrl: "", apiKey: "", model: "" });
+      const [vectorSaved, setVectorSaved] = react.useState(false);
+      const [reindexing, setReindexing] = react.useState(false);
+      const [reindexMsg, setReindexMsg] = react.useState("");
+      const [apiToken, setApiToken] = react.useState(() =>
+        (typeof window !== "undefined" && window.localStorage) ? window.localStorage.getItem("dsh-mneme-api-token") || "" : ""
+      );
+      const [apiTokenSaved, setApiTokenSaved] = react.useState(false);
+
+      const load = react.useCallback(async () => {
+        try {
+          const [p, r, c, v] = await Promise.all([
+            apiFetch("/api/dsh-mneme/profile").then((res) => res.json()),
+            apiFetch("/api/dsh-mneme/rules").then((res) => res.json()),
+            apiFetch("/api/dsh-mneme/commands").then((res) => res.json()),
+            apiFetch("/api/dsh-mneme/vector-config").then((res) => res.json())
+          ]);
+          setProfile(p.profile || "");
+          setRules(Array.isArray(r.rules) ? r.rules : []);
+          setCommands(Array.isArray(c.commands) ? c.commands : []);
+          setVector(v.config || { enabled: false, baseUrl: "", apiKey: "", model: "" });
+        } catch { /* ignore */ }
+      }, []);
+
+      react.useEffect(() => { load(); }, [load]);
+
+      async function saveProfile() {
+        try {
+          await apiFetch("/api/dsh-mneme/profile", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ profile })
+          });
+          setSaved(true);
+          setTimeout(() => setSaved(false), 1500);
+        } catch { /* ignore */ }
+      }
+
+      async function putRules(next) {
+        await apiFetch("/api/dsh-mneme/rules", {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ rules: next })
+        });
+      }
+
+      async function addRule() {
+        const text = newRule.trim();
+        if (!text) return;
+        const next = [...rules, text];
+        await putRules(next);
+        setRules(next);
+        setNewRule("");
+      }
+
+      async function removeRule(index) {
+        const next = rules.filter((_, i) => i !== index);
+        await putRules(next);
+        setRules(next);
+      }
+
+      async function addCommand() {
+        const name = newCmd.name.trim();
+        const instruction = newCmd.instruction.trim();
+        if (!name || !instruction) return;
+        try {
+          const res = await apiFetch("/api/dsh-mneme/commands", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name, description: newCmd.description, instruction })
+          });
+          const data = await res.json();
+          if (!res.ok) { setCmdError(data.error || "failed"); return; }
+          setCmdError("");
+          setCommands([...commands, data.command]);
+          setNewCmd({ name: "", description: "", instruction: "" });
+        } catch { setCmdError("failed"); }
+      }
+
+      async function removeCommand(id) {
+        await apiFetch(`/api/dsh-mneme/commands?id=${encodeURIComponent(id)}`, { method: "DELETE" });
+        setCommands(commands.filter((c) => c.id !== id));
+      }
+
+      async function saveVector() {
+        try {
+          await apiFetch("/api/dsh-mneme/vector-config", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(vector)
+          });
+          setVectorSaved(true);
+          setTimeout(() => setVectorSaved(false), 1500);
+        } catch { /* ignore */ }
+      }
+
+      async function reindex() {
+        setReindexing(true);
+        setReindexMsg("");
+        try {
+          const res = await apiFetch("/api/dsh-mneme/vector-reindex");
+          const data = await res.json();
+          const n = data.indexed ?? 0;
+          setReindexMsg(t("memory.settings.vectorReindexDone").replace("{n}", String(n)));
+        } catch { setReindexMsg(""); }
+        setReindexing(false);
+      }
+
+      function saveToken() {
+        try {
+          if (apiToken.trim()) window.localStorage.setItem("dsh-mneme-api-token", apiToken.trim());
+          else window.localStorage.removeItem("dsh-mneme-api-token");
+          setApiTokenSaved(true);
+          setTimeout(() => setApiTokenSaved(false), 1500);
+        } catch { /* ignore */ }
+      }
+
+      return h("div", null,
+        // 用户画像 — who the agent is talking to
+        h("section", { className: "mneme-set-sec" },
+          h("div", { className: "mneme-set-title" }, t("memory.settings.profile")),
+          h("div", { className: "mneme-set-desc" }, t("memory.settings.profileHint")),
+          h("textarea", {
+            className: "mneme-set-input mneme-set-input--area",
+            value: profile,
+            placeholder: t("memory.settings.profile"),
+            onChange: (e) => setProfile(e.target.value)
+          }),
+          h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
+            h("button", { className: "mneme-btn", onClick: saveProfile }, t("memory.settings.profileSave")),
+            saved && h("span", { className: "mneme-saved" }, t("memory.settings.profileSaved"))
+          )
+        ),
+        // 规则 — numbered rows, hover reveals the delete affordance
+        h("section", { className: "mneme-set-sec" },
+          h("div", { className: "mneme-set-title" }, t("memory.settings.rules")),
+          h("div", { className: "mneme-set-desc" }, t("memory.settings.rulesHint")),
+          rules.length === 0 && h("div", { className: "mneme-xempty" }, t("memory.settings.empty")),
+          rules.map((rule, i) =>
+            h("div", { key: i, className: "mneme-set-row" },
+              h("span", { className: "mneme-set-idx" }, String(i + 1)),
+              h("span", { className: "mneme-set-ruletext" }, rule),
+              h("button", {
+                className: "mneme-set-del",
+                title: t("memory.settings.cmdDelete"),
+                "aria-label": t("memory.settings.cmdDelete"),
+                onClick: () => removeRule(i)
+              }, "×")
+            )
+          ),
+          h("div", { style: { display: "flex", gap: 8 } },
+            h("input", {
+              className: "mneme-set-input",
+              style: { marginBottom: 0 },
+              value: newRule,
+              placeholder: t("memory.settings.rulePlaceholder"),
+              onChange: (e) => setNewRule(e.target.value),
+              onKeyDown: (e) => { if (e.key === "Enter") addRule(); }
+            }),
+            h("button", { className: "mneme-btn", onClick: addRule }, t("memory.settings.ruleAdd"))
+          )
+        ),
+        // 自定义指令 — slash commands as titled rows
+        h("section", { className: "mneme-set-sec" },
+          h("div", { className: "mneme-set-title" }, t("memory.settings.commands")),
+          h("div", { className: "mneme-set-desc" }, t("memory.settings.commandsHint")),
+          commands.length === 0 && h("div", { className: "mneme-xempty" }, t("memory.settings.empty")),
+          commands.map((cmd) =>
+            h("div", { key: cmd.id, className: "mneme-set-row" },
+              h("div", { className: "mneme-set-cmd" },
+                h("div", { className: "mneme-set-cmdname" }, `/${cmd.name}`),
+                (cmd.description || cmd.instruction) && h("div", { className: "mneme-set-cmddesc" }, cmd.description || cmd.instruction)
+              ),
+              h("button", {
+                className: "mneme-set-del",
+                title: t("memory.settings.cmdDelete"),
+                "aria-label": t("memory.settings.cmdDelete"),
+                onClick: () => removeCommand(cmd.id)
+              }, "×")
+            )
+          ),
+          h("div", { style: { display: "grid", gap: 8, marginTop: 10 } },
+            h("div", { style: { display: "flex", gap: 8 } },
+              h("input", { className: "mneme-set-input", style: { marginBottom: 0 }, value: newCmd.name, placeholder: t("memory.settings.cmdName"), onChange: (e) => setNewCmd({ ...newCmd, name: e.target.value }) }),
+              h("input", { className: "mneme-set-input", style: { marginBottom: 0 }, value: newCmd.description, placeholder: t("memory.settings.cmdDesc"), onChange: (e) => setNewCmd({ ...newCmd, description: e.target.value }) })
+            ),
+            h("textarea", { className: "mneme-set-input mneme-set-input--area", style: { minHeight: 56 }, value: newCmd.instruction, placeholder: t("memory.settings.cmdInstruction"), onChange: (e) => setNewCmd({ ...newCmd, instruction: e.target.value }) }),
+            h("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
+              h("button", { className: "mneme-btn", onClick: addCommand }, t("memory.settings.cmdAdd")),
+              cmdError && h("span", { style: { fontSize: 12, color: "var(--dsw-alias-state-error, #c33)" } }, cmdError)
+            )
+          )
+        ),
+        // 向量搜索 — semantic recall over an embeddings API
+        h("section", { className: "mneme-set-sec" },
+          h("div", { className: "mneme-set-title" }, t("memory.settings.vectorTitle")),
+          h("div", { className: "mneme-set-desc" }, t("memory.settings.vectorHint")),
+          h("label", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 10, fontSize: 13, color: "var(--dsw-alias-label-primary)" } },
+            h("input", { type: "checkbox", checked: !!vector.enabled, onChange: (e) => setVector({ ...vector, enabled: e.target.checked }) }),
+            h("span", null, t("memory.settings.vectorEnabled"))
+          ),
+          h("input", { className: "mneme-set-input", value: vector.baseUrl, placeholder: t("memory.settings.vectorBaseUrl"), onChange: (e) => setVector({ ...vector, baseUrl: e.target.value }) }),
+          h("input", { className: "mneme-set-input", type: "password", value: vector.apiKey, placeholder: t("memory.settings.vectorApiKey"), onChange: (e) => setVector({ ...vector, apiKey: e.target.value }) }),
+          h("input", { className: "mneme-set-input", value: vector.model, placeholder: t("memory.settings.vectorModel"), onChange: (e) => setVector({ ...vector, model: e.target.value }) }),
+          h("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" } },
+            h("button", { className: "mneme-btn", onClick: saveVector }, t("memory.settings.vectorSave")),
+            vectorSaved && h("span", { className: "mneme-saved" }, t("memory.settings.vectorSaved")),
+            h("button", { className: "mneme-btn", onClick: reindex, disabled: reindexing }, reindexing ? t("memory.settings.vectorReindexing") : t("memory.settings.vectorReindex")),
+            reindexMsg && h("span", { style: { fontSize: 12, color: "var(--dsw-alias-label-secondary, #666)" } }, reindexMsg)
+          )
+        ),
+        // API Token — advanced, last
+        h("section", { className: "mneme-set-sec" },
+          h("div", { className: "mneme-set-title" }, t("memory.settings.apiTokenTitle")),
+          h("div", { className: "mneme-set-desc" }, t("memory.settings.apiTokenHint")),
+          h("div", { style: { display: "flex", gap: 8 } },
+            h("input", {
+              className: "mneme-set-input",
+              style: { marginBottom: 0 },
+              type: "password",
+              value: apiToken,
+              placeholder: t("memory.settings.apiTokenPlaceholder"),
+              onChange: (e) => setApiToken(e.target.value)
+            }),
+            h("button", { className: "mneme-btn", onClick: saveToken }, t("memory.settings.apiTokenSave"))
+          ),
+          apiTokenSaved && h("div", { style: { marginTop: 8 } }, h("span", { className: "mneme-saved" }, t("memory.settings.apiTokenSaved")))
+        )
+      );
+    }
+
+    // --- Main-area memory library: the single home for every memory feature ---
+    // Registered under conversation.view beside Chat / Trajectory. The old
+    // right-hand drawer is gone: the sidebar foot entry activates this tab
+    // directly. The framework keeps the active-view setter private to the
+    // conversation package, and the DOM tab click is the one stable
+    // activation path available to plugins.
+    //
+    // One host constraint remains: the conversation header (and with it the
+    // whole tab ring) is hidden while a session is blank — the new-chat hero
+    // screen. There the tab simply does not exist, so activateExplorerTab
+    // resolves false and the sidebar entry falls back to the full-viewport
+    // overlay surface below.
+    // Candidate tabs whose label matches ours exactly. The conversation tab
+    // ring carries no registrant id in the DOM, so the label is all we have —
+    // but other plugins may register views (or settings dialogs may render
+    // panes) with the same text, and hidden panes still sit in the document.
+    // Restrict to rendered tabs (offsetParent filters display:none subtrees)
+    // and verify by rendering, not by label alone (see activateExplorerTab).
+    function findExplorerTabs(label) {
+      const matches = [];
+      for (const tab of document.querySelectorAll('[role="tab"]')) {
+        if ((tab.textContent || "").trim() !== label) continue;
+        if (tab.offsetParent === null && getComputedStyle(tab).position !== "fixed") continue;
+        matches.push(tab);
+      }
+      return matches;
+    }
+
+    // Click the memory library tab and wait (bounded, rAF-polled) until the
+    // host marks it selected AND our explorer actually rendered (`.mneme-x`).
+    // aria-selected alone cannot tell our tab from a same-labelled tab of
+    // another plugin — the sidebar entry must not activate theirs. On a
+    // failed candidate, move on to the next one; resolve false when the
+    // fallback overlay should take over.
+    function activateExplorerTab(label) {
+      return new Promise((resolve) => {
+        const candidates = findExplorerTabs(label);
+        if (candidates.length === 0) { resolve(false); return; }
+        let index = 0;
+        const tryNext = () => {
+          if (index >= candidates.length) { resolve(false); return; }
+          const tab = candidates[index++];
+          tab.click();
+          const deadline = Date.now() + 400;
+          (function check() {
+            const rendered = document.querySelector(".mneme-x") !== null;
+            if (tab.getAttribute("aria-selected") === "true" && rendered) { resolve(true); return; }
+            if (Date.now() >= deadline) { setTimeout(tryNext, 0); return; }
+            requestAnimationFrame(check);
+          })();
+        };
+        tryNext();
+      });
+    }
+
+    // --- Hero fallback overlay state (module-level pub/sub) ---
+    const overlayListeners = new Set();
+    let overlayOpenState = false;
+    function setOverlayOpen(v) {
+      if (v === overlayOpenState) return;
+      overlayOpenState = v;
+      for (const fn of overlayListeners) fn();
+    }
+    function useOverlayOpen() {
+      const [open, setOpen] = useState(overlayOpenState);
+      useEffect(() => {
+        const fn = () => setOpen(overlayOpenState);
+        overlayListeners.add(fn);
+        return () => { overlayListeners.delete(fn); };
+      }, []);
+      return [open, setOverlayOpen];
+    }
+
+    // Full-viewport memory library for states without a tab ring (new-chat
+    // hero). Same MemoryExplorer component as the tab view — identical
+    // three-column layout, graph and settings — plus a slim top bar with a
+    // close affordance. Esc closes. Portalled to <body> so sidebar stacking
+    // contexts cannot clip it.
+    function MemoryOverlay({ t }) {
+      const [open, setOpen] = useOverlayOpen();
+      useEffect(() => {
+        if (!open) return undefined;
+        const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+      }, [open]);
+      if (!open) return null;
+      const tree = h("div", { className: "mneme-overlay", role: "region", "aria-label": t("memory.view.label") },
+        h("div", { className: "mneme-overlaybar" },
+          h("span", { className: "mneme-overlaytitle" }, t("memory.view.label")),
+          h("button", {
+            type: "button",
+            className: "mneme-footbtn",
+            onClick: () => setOpen(false)
+          }, t("memory.overlay.close"))
+        ),
+        h("div", { className: "mneme-overlaybody" }, h(MemoryExplorer, { t }))
+      );
+      if (reactDom && typeof document !== "undefined") return reactDom.createPortal(tree, document.body);
+      return tree;
+    }
+
+    const EXPLORER_TYPES = ["preference", "project", "decision", "summary", "history"];
+    const PAGE_SIZE = 100; // browse page size — the tree grows by 100-row pages
+
+    // --- Status sub-view: a responsive grid of stat cards. Every card owns
+    // its fetch, loading ("…") and error state, so one failing endpoint
+    // never blanks or blocks the others. ---
+    function StatusCard({ t, title, loading, error, num, cap }) {
+      return h("div", { className: "mneme-statuscard" },
+        h("div", { className: "mneme-xcolhead" }, title),
+        loading
+          ? h("div", { className: "mneme-statusnum" }, "…")
+          : error
+            ? h("div", { className: "mneme-statuscap", style: { color: "var(--dsw-alias-state-error,#c33)" } }, t("memory.status.error"))
+            : h(react.Fragment, null,
+                h("div", { className: "mneme-statusnum" }, num),
+                cap ? h("div", { className: "mneme-statuscap" }, cap) : null
+              )
+      );
+    }
+
+    // 记忆总数 — list total plus per-type subtotals; each subtotal request
+    // may fail independently (rendered as "—") without sinking the card.
+    function MemoriesStatusCard({ t }) {
+      const [state, setState] = useState({ loading: true, error: false, total: 0, byType: [] });
+      useEffect(() => {
+        let cancelled = false;
+        const one = (ty) =>
+          apiFetch(`/api/dsh-mneme/list?limit=1&order=chrono${ty ? `&type=${encodeURIComponent(ty)}` : ""}`)
+            .then((res) => { if (!res.ok) throw new Error("http"); return res.json(); });
+        one()
+          .then((all) => {
+            if (cancelled) return null;
+            const total = all.total || 0;
+            return Promise.all(EXPLORER_TYPES.map((ty) =>
+              one(ty).then((j) => [ty, j.total || 0]).catch(() => [ty, null])
+            )).then((byType) => {
+              if (!cancelled) setState({ loading: false, error: false, total, byType });
+            });
+          })
+          .catch(() => { if (!cancelled) setState({ loading: false, error: true, total: 0, byType: [] }); });
+        return () => { cancelled = true; };
+      }, []);
+      const cap = state.byType
+        .map(([ty, n]) => `${typeLabel(t, ty)} ${n === null ? "—" : n}`)
+        .join(" · ");
+      return h(StatusCard, {
+        t,
+        title: t("memory.status.memories"),
+        loading: state.loading,
+        error: state.error,
+        num: state.total.toLocaleString(),
+        cap
+      });
+    }
+
+    // 实体 — directory snapshot grouped by entity type.
+    function EntitiesStatusCard({ t }) {
+      const [state, setState] = useState({ loading: true, error: false, total: 0, byType: [] });
+      useEffect(() => {
+        let cancelled = false;
+        const order = ["organization", "person", "project", "technology", "concept"];
+        apiFetch("/api/dsh-mneme/entities?limit=500")
+          .then((res) => { if (!res.ok) throw new Error("http"); return res.json(); })
+          .then((j) => {
+            if (cancelled) return;
+            const list = Array.isArray(j.entities) ? j.entities : [];
+            const counts = new Map();
+            for (const e of list) {
+              const key = order.includes(e.type) ? e.type : "other";
+              counts.set(key, (counts.get(key) || 0) + 1);
+            }
+            const byType = order.concat("other")
+              .filter((k) => counts.has(k))
+              .map((k) => [k, counts.get(k)]);
+            setState({ loading: false, error: false, total: list.length, byType });
+          })
+          .catch(() => { if (!cancelled) setState({ loading: false, error: true, total: 0, byType: [] }); });
+        return () => { cancelled = true; };
+      }, []);
+      const cap = state.byType.map(([ty, n]) => `${entityTypeLabel(t, ty)} ${n}`).join(" · ");
+      return h(StatusCard, {
+        t,
+        title: t("memory.status.entities"),
+        loading: state.loading,
+        error: state.error,
+        num: state.total.toLocaleString(),
+        cap
+      });
+    }
+
+    // 向量索引 — whether semantic recall is switched on.
+    function VectorStatusCard({ t }) {
+      const [state, setState] = useState({ loading: true, error: false, enabled: false });
+      useEffect(() => {
+        let cancelled = false;
+        apiFetch("/api/dsh-mneme/vector-config")
+          .then((res) => { if (!res.ok) throw new Error("http"); return res.json(); })
+          .then((j) => { if (!cancelled) setState({ loading: false, error: false, enabled: !!j.config?.enabled }); })
+          .catch(() => { if (!cancelled) setState({ loading: false, error: true, enabled: false }); });
+        return () => { cancelled = true; };
+      }, []);
+      return h(StatusCard, {
+        t,
+        title: t("memory.status.vector"),
+        loading: state.loading,
+        error: state.error,
+        num: state.enabled ? t("memory.status.vectorOn") : t("memory.status.vectorOff"),
+        cap: ""
+      });
+    }
+
+    // LLM 消耗 — calls + tokens over the trailing 7 days.
+    function LlmStatusCard({ t }) {
+      const [state, setState] = useState({ loading: true, error: false, calls: 0, tokens: 0 });
+      useEffect(() => {
+        let cancelled = false;
+        apiFetch("/api/dsh-mneme/semantic/llm-audit/stats?days=7")
+          .then((res) => { if (!res.ok) throw new Error("http"); return res.json(); })
+          .then((j) => {
+            if (cancelled) return;
+            const s = j && typeof j === "object" ? (j.stats || j) : {};
+            setState({ loading: false, error: false, calls: Number(s.total_calls ?? 0), tokens: Number(s.total_tokens ?? 0) });
+          })
+          .catch(() => { if (!cancelled) setState({ loading: false, error: true, calls: 0, tokens: 0 }); });
+        return () => { cancelled = true; };
+      }, []);
+      return h(StatusCard, {
+        t,
+        title: t("memory.status.llm"),
+        loading: state.loading,
+        error: state.error,
+        num: state.tokens.toLocaleString(),
+        cap: t("memory.status.llmCalls").replace("{n}", state.calls.toLocaleString())
+      });
+    }
+
+    function StatusPanel({ t }) {
+      return h("div", { className: "mneme-status" },
+        h("div", { className: "mneme-statusgrid" },
+          h(MemoriesStatusCard, { t }),
+          h(EntitiesStatusCard, { t }),
+          h(VectorStatusCard, { t }),
+          h(LlmStatusCard, { t })
+        )
+      );
+    }
+
+
+    function MemoryExplorer({ t }) {
+      const [view, setView] = useState("memory"); // memory | entity | status | settings
+      const [items, setItems] = useState([]); // loaded browse pages, chrono desc
+      const [total, setTotal] = useState(0); // server count for the current type filter
+      const [loading, setLoading] = useState(true);
+      const [loadingMore, setLoadingMore] = useState(false);
+      const [type, setType] = useState("all");
+      const [minImp, setMinImp] = useState(0); // importance floor: 0 = all, else 3/4/5
+      const [query, setQuery] = useState("");
+      const [semantic, setSemantic] = useState(false);
+      const [vecEnabled, setVecEnabled] = useState(false);
+      const [searchTopK, setSearchTopK] = useState(20);
+      const [remoteItems, setRemoteItems] = useState(null);
+      const [selectedId, setSelectedId] = useState(null);
+      const [expandedMonths, setExpandedMonths] = useState(null); // null = 仅最新一个月展开
+      const [collapsed, setCollapsed] = useState({});
+      const [copied, setCopied] = useState(false);
+      const [reloadKey, setReloadKey] = useState(0);
+      const [confirmDelete, setConfirmDelete] = useState(false); // two-step delete armed
+      const [deleting, setDeleting] = useState(false);
+      const [deleteError, setDeleteError] = useState(false);
+      const [deleteMsg, setDeleteMsg] = useState(false); // transient "deleted" notice
+      const [graphFocus, setGraphFocus] = useState("");
+      const itemRefs = useRef(new Map());
+      const moreRef = useRef(null);
+
+      useEffect(() => {
+        apiFetch("/api/dsh-mneme/vector-config")
+          .then((res) => res.json())
+          .then((d) => setVecEnabled(!!d.config?.enabled))
+          .catch(() => {});
+      }, []);
+
+      // One query string behind every browse-list fetch (initial page,
+      // loadMore, auto-refresh): the type filter and the importance floor
+      // always travel together, so counts and pagination stay consistent.
+      const filterQS = (type === "all" ? "" : `&type=${encodeURIComponent(type)}`)
+        + (minImp ? `&minImportance=${minImp}` : "");
+      const listUrl = (offset) => `/api/dsh-mneme/list?limit=${PAGE_SIZE}&offset=${offset}${filterQS}&order=chrono`;
+
+      // Browse = paged, pure-chronological pages (order=chrono). The default
+      // importance ordering would interleave months across pages and break
+      // the month tree; type filters server-side so pages stay consistent
+      // however large the store grows.
+      useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        apiFetch(listUrl(0))
+          .then((res) => (res.ok ? res.json() : { items: [], total: 0 }))
+          .then((d) => {
+            if (cancelled) return;
+            setItems(d.items || []);
+            setTotal(d.total || 0);
+            setExpandedMonths(null); // 新数据回到「仅最新月展开」
+            setLoading(false);
+          })
+          .catch(() => { if (!cancelled) { setItems([]); setTotal(0); setLoading(false); } });
+        return () => { cancelled = true; };
+      }, [reloadKey, filterQS]);
+
+      const canLoadMore = !query.trim() && !remoteItems && items.length < total;
+      const loadMore = useCallback(() => {
+        if (loadingMore || query.trim() || remoteItems) return;
+        if (items.length >= total) return;
+        setLoadingMore(true);
+        apiFetch(listUrl(items.length))
+          .then((res) => (res.ok ? res.json() : { items: [] }))
+          .then((d) => setItems((cur) => cur.concat(d.items || [])))
+          .catch(() => {})
+          .finally(() => setLoadingMore(false));
+      }, [items.length, total, loadingMore, query, remoteItems, filterQS]);
+
+      // Infinite scroll: a sentinel just past the loaded rows pulls the next
+      // page while browsing (search results arrive complete already).
+      useEffect(() => {
+        const el = moreRef.current;
+        if (!el || !canLoadMore) return undefined;
+        const io = new IntersectionObserver((entries) => {
+          if (entries.some((e) => e.isIntersecting)) loadMore();
+        }, { root: el.closest(".mneme-xtree"), rootMargin: "240px" });
+        io.observe(el);
+        return () => io.disconnect();
+      }, [canLoadMore, loadMore]);
+
+      // Search hits the server so matches are global — not limited to the
+      // loaded pages: keyword = literal text; vector = semantic ranking
+      // (the pipeline falls back to keyword when no embedder is available).
+      useEffect(() => {
+        const query0 = query.trim();
+        if (!query0 || query0.startsWith("entity:")) { setRemoteItems(null); return; }
+        let cancelled = false;
+        const timer = setTimeout(() => {
+          const mode = semantic ? "vector" : "keyword";
+          apiFetch(`/api/dsh-mneme/search?q=${encodeURIComponent(query0)}&mode=${mode}&topK=${searchTopK}`)
+            .then((res) => (res.ok ? res.json() : { items: [] }))
+            .then((d) => { if (!cancelled) setRemoteItems(d.items || []); })
+            .catch(() => { if (!cancelled) setRemoteItems([]); });
+        }, 250);
+        return () => { cancelled = true; clearTimeout(timer); };
+      }, [query, semantic, searchTopK]);
+
+      // Live view: while the memory tab is open, quietly re-fetch page 1
+      // every 30s (and on every activation) so fresh memories surface
+      // without a manual refresh. Later pages stay as loaded.
+      const refreshFirstPage = useCallback(() => {
+        if (query.trim() || remoteItems) return;
+        apiFetch(listUrl(0))
+          .then((res) => (res.ok ? res.json() : null))
+          .then((d) => {
+            if (!d) return;
+            setTotal(d.total || 0);
+            setItems((cur) => {
+              const fresh = d.items || [];
+              const seen = new Set(fresh.map((m) => m.id));
+              return fresh.concat(cur.filter((m) => !seen.has(m.id)));
+            });
+          })
+          .catch(() => {});
+      }, [query, remoteItems, filterQS]);
+
+      useEffect(() => {
+        if (view !== "memory") return undefined;
+        refreshFirstPage();
+        const iv = setInterval(() => {
+          if (document.visibilityState === "visible") refreshFirstPage();
+        }, 30000);
+        return () => clearInterval(iv);
+      }, [view, refreshFirstPage]);
+
+      useEffect(() => {
+        if (!selectedId) return;
+        itemRefs.current.get(selectedId)?.scrollIntoView({ block: "nearest" });
+      }, [selectedId]);
+
+      // The two-step delete arms per selection: switching or clearing the
+      // target disarms it, so a stale confirm can never delete a new pick.
+      useEffect(() => {
+        setConfirmDelete(false);
+        setDeleteError(false);
+      }, [selectedId]);
+
+      const q = query.trim().toLowerCase();
+      // "entity:" is the graph entry grammar: typing it means the user wants
+      // the entity's neighborhood, not a memory list. Offer the jump instead
+      // of auto-switching so the list stays predictable.
+      const entityQuery = query.trim().startsWith("entity:")
+        ? query.trim().slice(7).trim()
+        : "";
+      // Search results were filtered server-side (global); the type rail
+      // still narrows them. Browse mode serves the loaded pages as-is —
+      // type filtering happened in the query.
+      const visible = remoteItems
+        ? remoteItems.filter((m) => type === "all" || m.type === type)
+        : items;
+
+      const counts = {};
+      for (const m of items) counts[m.type] = (counts[m.type] || 0) + 1;
+      const knownTypes = EXPLORER_TYPES.filter((k) => counts[k]);
+      const extraTypes = Object.keys(counts)
+        .filter((k) => !EXPLORER_TYPES.includes(k))
+        .sort((a, b) => counts[b] - counts[a]);
+
+      // Time tree: sort newest first, then group month → day in one pass so
+      // the grouping follows the sort order instead of re-sorting buckets.
+      const sorted = [...visible].sort((a, b) =>
+        new Date(b.updated_at || b.created_at || 0) - new Date(a.updated_at || a.created_at || 0));
+      const months = [];
+      let curMonth = null, curDay = null;
+      for (const m of sorted) {
+        const d = new Date(m.updated_at || m.created_at || 0);
+        const valid = !Number.isNaN(d.getTime());
+        const mk = valid ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}` : "unknown";
+        if (!curMonth || curMonth.key !== mk) {
+          curMonth = {
+            key: mk,
+            label: valid ? d.toLocaleDateString(undefined, { year: "numeric", month: "long" }) : "—",
+            days: []
+          };
+          months.push(curMonth);
+          curDay = null;
+        }
+        const dk = valid ? `${mk}-${String(d.getDate())}` : "unknown";
+        if (!curDay || curDay.key !== dk) {
+          curDay = { key: dk, label: valid ? d.toLocaleDateString(undefined, { day: "numeric" }) : "—", items: [] };
+          curMonth.days.push(curDay);
+        }
+        curDay.items.push(m);
+      }
+      for (const mo of months) mo.count = mo.days.reduce((s, d) => s + d.items.length, 0);
+
+      const selected = visible.find((m) => m.id === selectedId) || null;
+
+      const copyContent = () => {
+        if (!selected) return;
+        navigator.clipboard?.writeText(selected.content || "").then(
+          () => { setCopied(true); setTimeout(() => setCopied(false), 1500); },
+          () => {}
+        );
+      };
+
+      // Two-step delete (no window.confirm): the red button arms, a second
+      // click commits POST /api/dsh-mneme/delete. On success the row leaves
+      // every local view (browse pages + search results), the selection
+      // clears and the total shrinks; failures — 404 included — surface as
+      // a transient red note next to the actions.
+      const deleteSelected = () => {
+        if (!selected || deleting) return;
+        const id = selected.id;
+        setDeleting(true);
+        setDeleteError(false);
+        apiFetch("/api/dsh-mneme/delete", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ id })
+        })
+          .then((res) => { if (!res.ok) throw new Error("http"); })
+          .then(() => {
+            setItems((cur) => cur.filter((m) => m.id !== id));
+            setRemoteItems((cur) => (cur ? cur.filter((m) => m.id !== id) : cur));
+            setTotal((n) => Math.max(0, n - 1));
+            setSelectedId(null);
+            setConfirmDelete(false);
+            setDeleteMsg(true);
+            setTimeout(() => setDeleteMsg(false), 2500);
+          })
+          .catch(() => {
+            setDeleteError(true);
+            setTimeout(() => setDeleteError(false), 4000);
+          })
+          .finally(() => setDeleting(false));
+      };
+
+      // Graph → memory jump: land on the browser tab with filters reset so
+      // the target row is visible, selected and scrolled into view. A target
+      // beyond the loaded pages renders as a single-row result set instead
+      // of pulling page after page to find it.
+      const jumpToMemory = (target) => {
+        if (!target?.id) return;
+        setView("memory");
+        setType("all");
+        setQuery("");
+        setRemoteItems(items.some((m) => m.id === target.id) ? null : [target]);
+        setExpandedMonths(null);
+        setSelectedId(target.id);
+      };
+
+      const openGraphFor = (name) => {
+        setGraphFocus(name || "");
+        setView("entity");
+      };
+
+      const subviews = [
+        { key: "memory", label: t("memory.explorer.tabMemory") },
+        { key: "entity", label: t("memory.explorer.tabEntities") },
+        { key: "status", label: t("memory.explorer.tabStatus") },
+        { key: "settings", label: t("memory.explorer.tabSettings") }
+      ];
+
+      return h("div", { className: "mneme-x" },
+        h("div", { className: "mneme-xbar" },
+          h("nav", { className: "mneme-vtabs", "aria-label": t("memory.view.label") },
+            subviews.map((s) =>
+              h("button", {
+                key: s.key,
+                type: "button",
+                className: view === s.key ? "mneme-vtab mneme-active" : "mneme-vtab",
+                "aria-pressed": String(view === s.key),
+                onClick: () => setView(s.key)
+              },
+                h(Icon, { name: s.key === "memory" ? "database" : s.key === "entity" ? "waypoints" : s.key === "status" ? "activity" : "settings", size: 14, className: "mneme-vtabico" }),
+                s.label
+              ))
+          ),
+          ),
+        view === "memory" && h("div", { className: "mneme-xmain" },
+          h("div", { className: "mneme-xside" },
+            h("div", { className: "mneme-xcolhead" }, t("memory.explorer.searchTitle")),
+            h("div", { className: "mneme-xsearchwrap" },
+              h(Icon, { name: "search", size: 14, className: "mneme-xsearchico" }),
+              h("input", {
+                className: "mneme-search mneme-xsearch",
+                placeholder: t("memory.explorer.search"),
+                value: query,
+                onChange: (e) => setQuery(e.target.value)
+              })
+            ),
+            entityQuery && h("button", {
+              className: "mneme-entitychip",
+              style: { textAlign: "left", justifyContent: "flex-start" },
+              onClick: () => openGraphFor(entityQuery)
+            }, `${t("memory.graph.viewInGraph")} “${entityQuery}”`),
+            h("div", { className: "mneme-xrow" },
+              vecEnabled && h("button", {
+                className: semantic ? "mneme-chip mneme-active" : "mneme-chip",
+                title: t("memory.settings.vectorTitle"),
+                onClick: () => setSemantic(!semantic)
+              }, t("memory.panel.semantic")),
+              h("select", {
+                className: "mneme-select mneme-xselect",
+                value: searchTopK,
+                onChange: (e) => setSearchTopK(Number(e.target.value)),
+                title: t("memory.explorer.topK")
+              }, [5, 10, 20, 50].map((n) => h("option", { key: n, value: n }, t("memory.explorer.topKOption").replace("{n}", String(n)))))
+            ),
+            h("div", { className: "mneme-xrow" },
+              h("span", { className: "mneme-xcount" }, t("memory.explorer.count").replace("{n}", String(visible.length))),
+              h("button", { className: "mneme-footbtn", onClick: () => setReloadKey((k) => k + 1) },
+                h(Icon, { name: "refresh", size: 12 }), t("memory.explorer.refresh"))
+            )
+          ),
+          h("div", { className: "mneme-xside mneme-xside--filter" },
+            h("div", { className: "mneme-xcolhead" }, t("memory.explorer.importance")),
+            h("div", { className: "mneme-xrow" },
+              [0, 3, 4, 5].map((v) =>
+                h("button", {
+                  key: v,
+                  className: minImp === v ? "mneme-chip mneme-active" : "mneme-chip",
+                  onClick: () => setMinImp(v)
+                }, v === 0 ? t("memory.tab.all") : `★${v}+`))
+            ),
+            h("div", { className: "mneme-xcolhead" }, t("memory.explorer.types")),
+            h("button", {
+              className: type === "all" ? "mneme-xtype mneme-active" : "mneme-xtype",
+              onClick: () => setType("all")
+            }, h("span", { className: "mneme-xdot mneme-xdot--all", "aria-hidden": "true" }), h("span", null, t("memory.tab.all")), h("span", { className: "mneme-xcount2" }, String(items.length))),
+            knownTypes.concat(extraTypes).map((key) =>
+              h("button", {
+                key,
+                className: type === key ? "mneme-xtype mneme-active" : "mneme-xtype",
+                onClick: () => setType(key)
+              },
+                h("span", { className: "mneme-xdot", style: { color: memoryTypeColor(key) }, title: typeLabel(t, key), "aria-hidden": "true" }),
+                h("span", null, typeLabel(t, key)),
+                h("span", { className: "mneme-xcount2" }, String(counts[key]))
+              ))
+          ),
+          h("div", { className: "mneme-xbrowse" },
+            h("div", { className: "mneme-xtree" },
+              h("div", { className: "mneme-xcolhead" }, t("memory.explorer.timeline")),
+              loading
+                ? h("div", { className: "mneme-xempty" }, "…")
+                : visible.length === 0
+                  ? h("div", { className: "mneme-xempty" },
+                      h(Icon, { name: "inbox", size: 20, className: "mneme-xemptyico" }),
+                      t("memory.explorer.empty"))
+                  : months.map((month, mi) => {
+                      // Only the newest month starts expanded; older months
+                      // stay a one-line header until clicked — a several-
+                      // thousand-row store renders a handful of DOM nodes.
+                      const open = expandedMonths ? !!expandedMonths[month.key] : mi === 0;
+                      return h("div", { key: month.key },
+                        h("button", {
+                          className: "mneme-xmonth",
+                          "aria-expanded": String(open),
+                          onClick: () => setExpandedMonths((c) => {
+                            const base = c || (months.length ? { [months[0].key]: true } : {});
+                            return { ...base, [month.key]: !open };
+                          })
+                        },
+                          h("span", { className: "mneme-xcaret" }, h(Icon, { name: open ? "chevronDown" : "chevronRight", size: 12 })),
+                          h("span", null, month.label),
+                          h("span", { className: "mneme-xmonthcount" }, String(month.count))
+                        ),
+                        open && month.days.map((day) =>
+                          h("div", { key: day.key },
+                            h("button", {
+                              className: "mneme-xday",
+                              "aria-expanded": String(!collapsed[day.key]),
+                              onClick: () => setCollapsed((c) => ({ ...c, [day.key]: !c[day.key] }))
+                            },
+                              h("span", { className: "mneme-xcaret" }, h(Icon, { name: collapsed[day.key] ? "chevronRight" : "chevronDown", size: 11 })),
+                              day.label
+                            ),
+                            !collapsed[day.key] && day.items.map((m) => {
+                              const d = new Date(m.updated_at || m.created_at || 0);
+                              const time = Number.isNaN(d.getTime())
+                                ? ""
+                                : d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+                              return h("button", {
+                                key: m.id,
+                                ref: (el) => { if (el) itemRefs.current.set(m.id, el); else itemRefs.current.delete(m.id); },
+                                className: m.id === selectedId ? "mneme-xitem mneme-active" : "mneme-xitem",
+                                onClick: () => setSelectedId(m.id)
+                              },
+                                h("span", { className: "mneme-xdot", style: { color: memoryTypeColor(m.type) }, title: typeLabel(t, m.type), "aria-hidden": "true" }),
+                                h("span", { className: "mneme-xtime" }, time),
+                                h("span", { className: "mneme-xname" }, m.title || m.content?.slice(0, 40))
+                              );
+                            })
+                          ))
+                      );
+                    }),
+              h("div", { ref: moreRef, className: "mneme-xmore" },
+                canLoadMore
+                  ? h("button", { className: "mneme-footbtn", disabled: loadingMore, onClick: loadMore },
+                      loadingMore ? "…" : `${t("memory.explorer.loadMore")}（${items.length}/${total}）`)
+                  : (!loading && visible.length > 0 && !q && !remoteItems
+                      ? h("span", { className: "mneme-xcount" }, `${items.length} / ${total}`)
+                      : null)
+              )
+            ),
+            h("div", { className: "mneme-xdetail" },
+              selected
+                ? h(react.Fragment, { key: selected.id },
+                    h("div", { className: "mneme-xdinner" },
+                      h("div", { className: "mneme-xdtitle" }, selected.title),
+                      h("div", { className: "mneme-xdmeta" },
+                        h("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" } },
+                          h("span", { className: "mneme-xdot", style: { color: memoryTypeColor(selected.type) }, "aria-hidden": "true" }),
+                          `${typeLabel(t, selected.type)} · ${t("memory.explorer.importance")} ★${selected.importance}`
+                        ),
+                        selected.source && h("span", { title: selected.source },
+                          `${t("memory.explorer.source")}: `,
+                          h("span", { className: "mneme-xdsrc" }, selected.source)),
+                        h("span", { title: formatDate(selected.created_at) }, `${t("memory.explorer.created")}: ${formatDateShort(selected.created_at)}`),
+                        h("span", { title: formatDate(selected.updated_at) }, `${t("memory.explorer.updated")}: ${formatRelativeTime(selected.updated_at, t)}`)
+                      ),
+                      Array.isArray(selected.tags) && selected.tags.length > 0 && h("div", { className: "mneme-xdmeta" },
+                        h("span", null, `${t("memory.explorer.tags")}: ${selected.tags.join(" · ")}`)
+                      ),
+                      h("div", { className: "mneme-xdcontent" }, selected.content),
+                      h("div", { className: "mneme-xdactions" },
+                        h("button", { className: "mneme-footbtn", onClick: copyContent },
+                          h(Icon, { name: copied ? "check" : "copy", size: 12 }),
+                          copied ? t("memory.explorer.copied") : t("memory.explorer.copy")),
+                        // two-step delete: red outline arms, solid red commits
+                        confirmDelete
+                          ? h(react.Fragment, null,
+                              h("button", {
+                                className: "mneme-btn mneme-btndangerconfirm",
+                                disabled: deleting,
+                                onClick: deleteSelected
+                              }, t("memory.explorer.confirmDelete")),
+                              h("button", {
+                                className: "mneme-btn",
+                                onClick: () => setConfirmDelete(false)
+                              }, t("memory.explorer.cancel"))
+                            )
+                          : h("button", {
+                              className: "mneme-btn mneme-btndanger",
+                              onClick: () => setConfirmDelete(true)
+                            }, t("memory.explorer.delete")),
+                        deleteError && h("span", { style: { fontSize: 12, color: "var(--dsw-alias-state-error,#c33)" } },
+                          t("memory.explorer.deleteFailed"))
+                      )
+                    )
+                  )
+                : h("div", { className: "mneme-xempty" },
+                    deleteMsg && h("div", { className: "mneme-saved", style: { marginBottom: 6 } }, t("memory.explorer.deleted")),
+                    t("memory.explorer.emptyDetail"))
+            )
+          )
+        ),
+        view === "entity" && h(EntityPanel, { t, focusEntity: graphFocus, onJumpMemory: jumpToMemory }),
+        view === "status" && h(StatusPanel, { t }),
+        view === "settings" && h("div", { className: "mneme-set" },
+          h("div", { className: "mneme-set-inner" }, h(SettingsContent, { t }))
+        )
+      );
+    }
+
+    // --- Sidebar foot entry: the wide row / rail icon that activates the
+    // main-area memory library tab. When the tab ring is absent (new-chat
+    // hero screen hides the conversation header entirely) the same click
+    // opens the full-viewport overlay instead — the library stays reachable
+    // from every conversation state.
+    function SidebarTrigger({ wide, t }) {
+      const [, setOpen] = useOverlayOpen();
+      return h("button", {
+        type: "button",
+        className: wide ? "mneme-trigger" : "mneme-trigger mneme-rail",
+        "aria-label": t("memory.sidebar.aria"),
+        title: t("memory.sidebar.aria"),
+        onClick: () => {
+          activateExplorerTab(t("memory.view.label")).then((ok) => { if (!ok) setOpen(true); });
+        }
+      },
+        h(IconArchiveOutline20, { size: wide ? 16 : 18 }),
+        wide && h("span", { className: "mneme-trigger-label" }, t("memory.panel.open"))
+      );
+    }
+
+    function apply(ctx) {
+      ctx.effect(() => ctx.locale.register(NS, dictionaries), "dsh-mneme: dictionaries");
+
+      // Register the memory entry beside Settings at the sidebar foot. The
+      // entry renders a wide row (icon + label) when the sidebar is expanded
+      // and a rail icon when collapsed; clicking activates the memory
+      // library conversation view.
+      ctx.slots.inject("sidebar.footer.action", () => {
+        const t = ctx.locale.bind(NS);
+        return ctx.slots.register({
+          name: "sidebar.footer.action",
+          id: "dsh-mneme",
+          order: 0,
+          label: () => t("memory.panel.open")
+        }, (props) => h(react.Fragment, null,
+          h(SidebarTrigger, { ...props, t }),
+          // The overlay mounts from the always-rendered sidebar slot so it
+          // survives conversation switches; the portal moves it to <body>.
+          h(MemoryOverlay, { t })
+        ));
+      });
+
+      // Register the memory library as a conversation view tab, beside
+      // Chat / Trajectory. The view ignores its session props: the library
+      // reads the memory store over HTTP. It hosts every memory feature —
+      // browse, graph and settings — in the main content area.
+      ctx.slots.inject("conversation.view", () => {
+        const t = ctx.locale.bind(NS);
+        return ctx.slots.register({
+          name: "conversation.view",
+          id: "dsh-mneme-memory",
+          order: 30,
+          locale: NS,
+          label: () => t("memory.view.label")
+        }, () => h(MemoryExplorer, { t }));
+      });
+    }
+
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  }
+});