dsh-memory-engine 0.7.0-beta.2b → 0.7.0-beta.6b

package/lib/client.js

@@ -22,14 +22,18 @@ window.__ModuleLoader__.load({
   if (!ctx) throw new Error('Canvas 2D 不可用');
   const colors = { '人格':[255,215,106], '印象':[143,216,255], '知识':[126,231,178], '日记':[190,160,255], '对话':[255,160,140], '情绪':[255,90,90] };
   const fallback = [145,205,255];
-  let nodes = [], links = [], hubs = [];
+  let nodes = [], links = [], hubs = [], linkTwinkle = [], visibleLinks = [];
   const byId = new Map(), adjacency = new Map(), sprites = new Map();
   const pulses = [], firing = new Map(), selections = new Set();
+  // 默认不画连线（数量太大会卡），只画选中光点周围的线
+  let selectedId=null, selectedNeighbours=new Set();
   if (typeof options.onSelect === 'function') selections.add(options.onSelect);
   let seed = 987654321;
   const random = () => ((seed = seed * 16807 % 2147483647) - 1) / 2147483646;
   let width=0,height=0,dpr=1,rotX=0.3,rotY=0.15,zoom=data.nodes.length<50?1.6:1,autoSpin=true;
-  let drag=null,nextFire=0,lastTime=0,rafId=null,running=false,destroyed=false,generation=0,observer=null;
+  let spinSpeed=data.spinSpeed??0.35,resumeAt=0;
+  const frameInterval=Number.isFinite(options.frameInterval)?Math.max(0,options.frameInterval):0;
+  let drag=null,nextFire=0,lastTime=0,lastDrawAt=0,rafId=null,running=false,destroyed=false,generation=0,observer=null;
 
 function glowSprite(rgb) {
   const off = document.createElement('canvas');
@@ -43,11 +47,26 @@ function glowSprite(rgb) {
   return off;
 }
 
+  // 字符串 → 32 位无符号哈希。给连线的闪烁参数做种子：
+  // 用 id 而不是 Math.random，保证同一条线在每次打开时节奏一致（不会每次刷新都跳），
+  // 但不同连线之间互不同步。
+  function hashString(text) {
+    let hash = 2166136261;
+    for (let i = 0; i < text.length; i++) {
+      hash ^= text.charCodeAt(i);
+      hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+  }
+
   function setData(nextData) {
     if (destroyed) return;
+    spinSpeed=nextData.spinSpeed??0.35;
     nodes = nextData.nodes.map(node => ({ ...node, pos: { ...node.pos } }));
     links = nextData.links.map(link => [...link]);
     byId.clear(); adjacency.clear(); sprites.clear(); pulses.length = 0; firing.clear();
+    selectedId=typeof options.selectedId==='string'?options.selectedId:null;
+    selectedNeighbours=new Set(selectedId?(adjacency.get(selectedId)||[]):[]);
     seed = 987654321; nextFire = 0;
     for (const node of nextData.nodes) byId.set(node.id, node);
     for (const node of nodes) adjacency.set(node.id, []);
@@ -55,6 +74,41 @@ function glowSprite(rgb) {
       if (adjacency.has(left) && adjacency.has(right)) { adjacency.get(left).push(right); adjacency.get(right).push(left); }
     }
     hubs = nodes.filter(star => star.degree > 0).sort((left,right) => right.degree-left.degree).slice(0,6);
+    // 每条连线一份自己的闪烁参数：相位和频率都不一样，整体才不会"齐刷刷"地一起亮。
+    // 用连线两端 id 的哈希做种子，保证同一条线每次打开图的节奏一致（不会跳变），
+    // 但线与线之间互不同步。
+    linkTwinkle = links.map(([left, right]) => {
+      const h = hashString(left + '|' + right);
+      return {
+        // 频率调低：周期从 4~18 秒放慢到 18~55 秒，变成"慢慢呼吸"而不是"闪"
+        freq: 0.000114 + (h % 1000) / 1000 * 0.000235,
+        phase: (Math.floor(h / 1000) % 6283) / 1000,       // 0 ~ 6.28，彼此错开
+        amp: 0.05 + (Math.floor(h / 7e6) % 100) / 100 * 0.12,
+        // 弯曲：一半往左弯一半往右弯，弯度 8%~24%。
+        // 之前所有线都朝同一侧弯，视觉上像漩涡，边界区域就显空。
+        bow: (h % 2 === 0 ? 1 : -1) * (0.08 + (Math.floor(h / 13) % 100) / 100 * 0.16),
+        // 端点偏移：同一个节点被很多线连时，让它们从不同角度进来，散成扇面而不是叠成一条
+        jitterStart: ((Math.floor(h / 31) % 100) / 100 - 0.5) * 1.6,
+        jitterEnd: ((Math.floor(h / 977) % 100) / 100 - 0.5) * 1.6,
+      };
+    });
+    // 连线数量会随记忆增长爆炸（332 条时 383 根，479 条时 1738 根）。
+    // 每帧全画会卡，所以按"两端留存"排序，最多画 LINK_DRAW_CAP 根最亮的，
+    // 其余的不进这一帧（数据没丢，只是不画，缩放/点击仍按全量算）。
+    const LINK_DRAW_CAP = 1200;
+    if (links.length <= LINK_DRAW_CAP) {
+      visibleLinks = links.map((_, index) => index);
+    } else {
+      const byIdLocal = new Map(nodes.map(node => [node.id, node]));
+      const strength = index => {
+        const [left, right] = links[index];
+        const a = byIdLocal.get(left), b = byIdLocal.get(right);
+        return Math.min(a?.retention ?? 0, b?.retention ?? 0) + Math.min(a?.degree ?? 0, b?.degree ?? 0) * 0.002;
+      };
+      visibleLinks = links.map((_, index) => index)
+        .sort((x, y) => strength(y) - strength(x))
+        .slice(0, LINK_DRAW_CAP);
+    }
 for (const star of nodes) {
   star._rgb = colors[star.kind] || fallback;
   const count = Math.min(9, 4 + Math.round(Math.sqrt(star.degree) * 1.2));
@@ -90,9 +144,21 @@ function project(pos) {
 }
 function fire(id,now) {
   firing.set(id,1);
-  for (const other of adjacency.get(id)||[]) {
-    firing.set(other,Math.max(0.65,firing.get(other)||0));
-    pulses.push({from:id,to:other,born:now,life:900+Math.random()*700});
+  const neighbours=adjacency.get(id)||[];
+  // 选中某个光点时，把它的关联线都点亮几条脉冲（最多 24 条，避免又糊成一片）；
+  // 未选中时的随机心跳只挑 2~4 条，避免整片区域同时亮。
+  const selected = id===selectedId;
+  const limit = selected ? 24 : 2+Math.floor(Math.random()*3);
+  const count=Math.min(neighbours.length,limit);
+  const picked=new Set();
+  let guard=0;
+  while (picked.size<count && neighbours.length && guard++<400) {
+    picked.add(neighbours[Math.floor(Math.random()*neighbours.length)]);
+  }
+  for (const other of picked) {
+    // 邻居亮度也压低：原来 0.65 会让整片区域同时亮起来
+    firing.set(other,Math.max(selected?0.4:0.26,firing.get(other)||0));
+    pulses.push({from:id,to:other,born:now,life:700+Math.random()*2400});
   }
 }
 
@@ -107,11 +173,14 @@ function fire(id,now) {
     if (score<bestScore) {bestScore=score;best=star;}
   }
   if (!best) return;
+  selectedId = best.id;
+  selectedNeighbours = new Set(adjacency.get(best.id) || []);
   fire(best.id,performance.now());
     for (const callback of selections) callback(byId.get(best.id));
   }
 
   function onPointerDown(event) {
+    resumeAt=Infinity;
     autoSpin=false; drag={x:event.clientX,y:event.clientY,moved:0,pointerId:event.pointerId};
     canvas.setPointerCapture(event.pointerId);
   }
@@ -122,6 +191,7 @@ function fire(id,now) {
     rotY+=dx*0.006; rotX=Math.max(-1.5,Math.min(1.5,rotX+dy*0.006));
   }
   function releaseDrag() {
+    if (drag && running) resumeAt=performance.now()+2000;
     if (drag && canvas.hasPointerCapture(drag.pointerId)) canvas.releasePointerCapture(drag.pointerId);
     drag=null;
   }
@@ -140,13 +210,27 @@ function fire(id,now) {
 
 function frame(now) {
   const delta=Math.min(50,now-lastTime||16.7); lastTime=now;
-  if (autoSpin) rotY+=0.0011*delta/16.7;
-  if (now>nextFire) { nextFire=now+1000+Math.random()*1500; if (hubs.length) fire(hubs[Math.floor(Math.random()*hubs.length)].id,now); }
+  if (!autoSpin && !drag && now>=resumeAt) autoSpin=true;
+  if (autoSpin) rotY+=0.0011*spinSpeed*3*delta/16.7;
+  if (now>nextFire) {
+    // 默认不画连线，所以也不撒"沿线的脉冲"——否则会出现飘来飘去的小点，找不到来源。
+    // 选中光点后，脉冲只在它的关联线上跑。
+    if (selectedId) {
+      fire(selectedId,now);
+    } else {
+      // 没选中时只让枢纽光点自己亮一下，不动线
+      if (hubs.length) {
+        const hub=hubs[Math.floor(Math.random()*hubs.length)];
+        firing.set(hub.id,1);
+      }
+    }
+    nextFire=now+1400+Math.random()*3200;
+  }
   ctx.globalCompositeOperation='source-over'; ctx.fillStyle='#03060c'; ctx.fillRect(0,0,width,height);
   ctx.strokeStyle='rgba(40,90,140,0.055)';ctx.lineWidth=1;
   for (let index=0;index<20;index++) {
     const y=index/20*height;
-    ctx.beginPath();ctx.moveTo(0,y);ctx.bezierCurveTo(width*.3,y+Math.sin(now*.0003+index)*30,width*.7,y-Math.cos(now*.00025+index)*30,width,y);ctx.stroke();
+    ctx.beginPath();ctx.moveTo(0,y);ctx.bezierCurveTo(width*.3,y+Math.sin(now*.00007+index)*30,width*.7,y-Math.cos(now*.00006+index)*30,width,y);ctx.stroke();
   }
   const points=[];
   for (const star of nodes) {
@@ -154,19 +238,39 @@ function frame(now) {
     if (!p || p.x< -100 || p.x>width+100 || p.y< -100 || p.y>height+100) {star._screen=null;continue;}
     points.push({star,p});
   }
-  points.sort((left,right)=>right.p.depth-left.p.depth);
+  points.sort((left,right)=>left.star.isCore?1:right.star.isCore?-1:right.p.depth-left.p.depth);
   const screen=new Map(points.map(point=>[point.star.id,point]));
-  ctx.globalCompositeOperation='lighter';
-  for (const [left,right] of links) {
-    const first=screen.get(left),second=screen.get(right);
-    if (!first||!second) continue;
-    const act=Math.max(firing.get(left)||0,firing.get(right)||0);
-    const alpha=Math.min(.85,.1*Math.min(first.star.retention,second.star.retention)+.35*act);
-    if (alpha<.01) continue;
-    const mx=(first.p.x+second.p.x)/2+(first.p.y-second.p.y)*.18;
-    const my=(first.p.y+second.p.y)/2+(second.p.x-first.p.x)*.18;
-    ctx.strokeStyle='rgba(110,190,255,'+alpha+')';ctx.lineWidth=.7+act*1.6;
-    ctx.beginPath();ctx.moveTo(first.p.x,first.p.y);ctx.quadraticCurveTo(mx,my,second.p.x,second.p.y);ctx.stroke();
+  // 连线只在"选中某个光点"时画，且只画和它相连的那些。
+  // 全量 1738 根每帧画会卡；默认干干净净，点谁看谁的关联。
+  const linkPaths=[];
+  if (selectedId) {
+    for (const [left,right] of links) {
+      if (left!==selectedId && right!==selectedId) continue;
+      const first=screen.get(left),second=screen.get(right);
+      if (!first||!second) continue;
+      const target = left===selectedId ? second : first;
+      const ret = Math.min(first.star.retention, second.star.retention);
+      const alpha = Math.min(.9, .22 + ret*.35);
+      const dx=second.p.x-first.p.x, dy=second.p.y-first.p.y;
+      const len=Math.hypot(dx,dy)||1;
+      const nx=-dy/len, ny=dx/len;
+      // 朝选中点那一侧弯，形成"从中心散开"的观感
+      const bow = (target===second ? 1 : -1) * .16;
+      const mx=(first.p.x+second.p.x)/2+nx*len*bow*.5;
+      const my=(first.p.y+second.p.y)/2+ny*len*bow*.5;
+      linkPaths.push([first.p.x,first.p.y,mx,my,second.p.x,second.p.y,alpha]);
+    }
+  }
+  if (linkPaths.length) {
+    ctx.strokeStyle='rgba(110,190,255,0.30)';
+    ctx.lineWidth=1;
+    ctx.beginPath();
+    for (const p of linkPaths) { ctx.moveTo(p[0],p[1]); ctx.quadraticCurveTo(p[2],p[3],p[4],p[5]); }
+    ctx.stroke();
+    // 更亮的一层，让关联线看得清
+    ctx.strokeStyle='rgba(160,220,255,0.22)';
+    ctx.lineWidth=2;
+    ctx.stroke();
   }
   for (let index=pulses.length-1;index>=0;index--) {
     const pulse=pulses[index],fraction=(now-pulse.born)/pulse.life;
@@ -182,8 +286,25 @@ function frame(now) {
   for (const {star,p} of points) {
     const act=firing.get(star.id)||0,ret=Math.max(.05,Math.min(1.2,star.retention));
     const intensity=Math.min(1,.22+ret*.72)*(1+act*1.1);
-    const radius=Math.max(2,star.radius*p.scale*.55)*(1+Math.sin(now*.0016+(star.pos.x+star.pos.z)*.3)*.06)*(1+act*.5);
+    // 每颗星自己的呼吸频率和相位：从 id 哈希来，避免全图同一个节拍
+    if (star._pulse===undefined) {
+      const h=hashString(star.id);
+      star._pulse={freq:0.00018+(h%1000)/1000*0.00045,phase:(Math.floor(h/1000)%6283)/1000,amp:0.035+(Math.floor(h/7e6)%100)/100*0.045};
+    }
+    const pulse=star._pulse;
+    const breathe=Math.sin(now*pulse.freq+pulse.phase)*pulse.amp;
+    const radius=Math.max(2,star.radius*p.scale*.55)*(1+breathe)*(1+act*.5);
     const rgb=star._rgb.join(',');
+    if (star.isCore) {
+      const halo=ctx.createRadialGradient(p.x,p.y,radius*.75,p.x,p.y,radius*2.2);
+      halo.addColorStop(0,'rgba('+rgb+',0.12)');
+      halo.addColorStop(.65,'rgba('+rgb+',0.04)');
+      halo.addColorStop(1,'rgba('+rgb+',0)');
+      ctx.fillStyle=halo;ctx.beginPath();ctx.arc(p.x,p.y,radius*2.2,0,Math.PI*2);ctx.fill();
+      ctx.strokeStyle='rgba('+rgb+',0.38)';ctx.lineWidth=.7;ctx.setLineDash([3,5]);ctx.lineDashOffset=-now*.008;
+      ctx.beginPath();ctx.arc(p.x,p.y,radius*1.6,0,Math.PI*2);ctx.stroke();
+      ctx.setLineDash([]);ctx.lineDashOffset=0;
+    }
     ctx.strokeStyle='rgba('+rgb+','+Math.min(1,.3*intensity)+')';
     if (radius>2.5) for (const branch of star._dendrites) {
       const length=radius*2.2*branch.length,dx=Math.cos(branch.angle),dy=Math.sin(branch.angle);
@@ -218,7 +339,7 @@ function frame(now) {
 }
   function start() {
     if (running || destroyed) return;
-    running=true; lastTime=0; nextFire=0;
+    running=true; lastTime=0; nextFire=0; autoSpin=true; resumeAt=0;
     const currentGeneration = ++generation;
     canvas.addEventListener('pointerdown',onPointerDown);
     canvas.addEventListener('pointermove',onPointerMove);
@@ -234,6 +355,13 @@ function frame(now) {
     function tick(now) {
       if (!running || destroyed || currentGeneration !== generation) return;
       rafId=null;
+      // 帧率上限靠 options.frameInterval 控制（默认 0 = 不限）。
+      // 界面里按 40fps 传；测试里不传，保持逐帧确定性。
+      if (frameInterval > 0 && now - lastDrawAt < frameInterval) {
+        rafId=window.requestAnimationFrame(tick);
+        return;
+      }
+      lastDrawAt = now;
       frame(now);
       if (running && !destroyed && currentGeneration === generation) rafId=window.requestAnimationFrame(tick);
     }
@@ -277,17 +405,21 @@ function frame(now) {
 
     var defaultSettings = { hideButton: false, showGuideOnEmpty: true };
     var actionStyle = { padding: "7px 12px", borderRadius: "8px", border: "1px solid #6999b8", background: "#102236", color: "#e2f4ff", font: "inherit", cursor: "pointer" };
+    var fieldStyle = { boxSizing: "border-box", padding: "10px 12px", borderRadius: "8px", border: "1px solid #35536b", background: "#091422", color: "#e2f4ff", font: "inherit", minWidth: 0 };
+    var kinds = ["知识", "印象", "对话", "事件", "日记"];
 
-    function readApi(url, signal) {
-      return fetch(url, { cache: "no-store", signal: signal }).then(function (response) {
-        if (!response.ok) throw new Error("HTTP " + response.status);
-        return response.json();
-      }).then(function (result) {
-        if (!result || result.ok !== true || !result.data || typeof result.data !== "object") throw new Error("接口返回格式无效");
-        return result.data;
+    function requestApi(url, options) {
+      return fetch(url, Object.assign({ cache: "no-store" }, options)).then(function (response) {
+        return response.json().then(function (result) {
+          if (!response.ok || !result || result.ok !== true) throw new Error(result && result.error || "HTTP " + response.status);
+          if (!result.data || typeof result.data !== "object") throw new Error("接口返回格式无效");
+          return result.data;
+        });
       });
     }
 
+    function readApi(url, signal) { return requestApi(url, { signal: signal }); }
+
     function loadSettings() {
       var controller = new AbortController();
       var timer = setTimeout(function () { controller.abort(); }, 5000);
@@ -367,6 +499,8 @@ function frame(now) {
     function MemoryDetails(props) {
       var node = props.node;
       var text = typeof node.text === "string" ? node.text : "";
+      if (node.isCore) text = Array.from(text).slice(0, 4000).join("");
+      var defaultCopyLabel = node.isCore ? "复制全文" : "复制正文";
       var title = String(node.title || "").trim() || Array.from(text).slice(0, 20).join("");
       var date = new Date(node.ts);
       var day = Number.isFinite(date.getTime()) ? date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0") : "未知";
@@ -379,7 +513,7 @@ function frame(now) {
       ];
       var emotion = Array.isArray(node.emotion) ? node.emotion.filter(function (item) { return item && item.tag; }).map(function (item) { return item.tag; }).join(" / ") : "";
       if (emotion) rows.push(["情绪", emotion]);
-      var copiedState = React.useState("复制正文");
+      var copiedState = React.useState(defaultCopyLabel);
       var copyLabel = copiedState[0];
       var setCopyLabel = copiedState[1];
       var timer = React.useRef(null);
@@ -389,10 +523,10 @@ function frame(now) {
         copyVersion.current++;
         clearTimeout(timer.current);
         timer.current = null;
-        setCopyLabel("复制正文");
+        setCopyLabel(defaultCopyLabel);
         if (body.current) body.current.scrollTop = 0;
         return function () { copyVersion.current++; clearTimeout(timer.current); timer.current = null; };
-      }, [node.id, text]);
+      }, [node.id, text, defaultCopyLabel]);
       function copyBody() {
         var version = ++copyVersion.current;
         clearTimeout(timer.current);
@@ -400,7 +534,7 @@ function frame(now) {
           if (version !== copyVersion.current) return;
           setCopyLabel("已复制 ✓");
           timer.current = setTimeout(function () {
-            if (version === copyVersion.current) setCopyLabel("复制正文");
+            if (version === copyVersion.current) setCopyLabel(defaultCopyLabel);
             timer.current = null;
           }, 1800);
         }, function () {
@@ -414,13 +548,13 @@ function frame(now) {
         React.createElement("span", { "data-memory-engine-detail-kind": "true", style: { color: "#a4e6ff", background: "#15344b", borderRadius: "6px", padding: "2px 8px", overflowWrap: "anywhere" } }, node.kind || "未分类"),
         React.createElement("button", { type: "button", "aria-label": "关闭记忆详情", onClick: props.onClose, style: { border: 0, padding: "2px 6px", background: "transparent", color: "#a4bad0", fontSize: "22px", cursor: "pointer" } }, "×")),
       React.createElement("h2", { "data-memory-engine-detail-title": "true", style: { margin: "10px 0", fontSize: "18px", color: "#b7e9ff", overflowWrap: "anywhere", whiteSpace: "normal", maxHeight: "18vh", overflowY: "auto", flexShrink: 0 } }, title),
-      React.createElement("dl", { style: { display: "grid", gridTemplateColumns: "64px minmax(0,1fr)", gap: "5px 10px", margin: "0 0 12px", fontSize: "12px", color: "#9fb7ce", maxHeight: "25vh", overflowY: "auto", flexShrink: 0 } },
+      node.isCore ? null : React.createElement("dl", { style: { display: "grid", gridTemplateColumns: "64px minmax(0,1fr)", gap: "5px 10px", margin: "0 0 12px", fontSize: "12px", color: "#9fb7ce", maxHeight: "25vh", overflowY: "auto", flexShrink: 0 } },
         rows.map(function (row) { return React.createElement(React.Fragment, { key: row[0] },
           React.createElement("dt", { style: { margin: 0 } }, row[0]),
           React.createElement("dd", { style: { margin: 0, overflowWrap: "anywhere" } }, row[1])); })),
       React.createElement("div", { ref: body, "data-memory-engine-detail-text": "true", style: { minHeight: 0, flex: "1 1 auto", overflowY: "auto", whiteSpace: "pre-wrap", overflowWrap: "anywhere", borderTop: "1px solid #3976a055", borderBottom: "1px solid #3976a055", padding: "12px 0" } }, text),
       React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "12px", flexShrink: 0 } },
-        React.createElement("button", { type: "button", "data-memory-engine-highlight": "true", style: actionStyle, onClick: props.onHighlight }, "在图里高亮它"),
+        node.isCore ? null : React.createElement("button", { type: "button", "data-memory-engine-highlight": "true", style: actionStyle, onClick: props.onHighlight }, "在图里高亮它"),
         React.createElement("button", { type: "button", "data-memory-engine-copy-body": "true", style: actionStyle, onClick: copyBody }, copyLabel)));
     }
 
@@ -442,7 +576,7 @@ function frame(now) {
         setError("");
         readApi("/memory-engine/api/map", controller.signal).then(function (nextData) {
           if (!active) return;
-          renderer = createRenderer(canvas.current, nextData);
+          renderer = createRenderer(canvas.current, nextData, { frameInterval: 25 });
           props.rendererRef.current = renderer;
           renderer.onSelect(function (node) { props.selectionVersion.current++; props.onSelect(node); });
           renderer.start();
@@ -482,12 +616,303 @@ function frame(now) {
             React.createElement("span", { style: { width: "52px", height: "5px", borderRadius: "5px", background: "#335066", overflow: "hidden" } },
               React.createElement("i", { style: { display: "block", height: "100%", background: "#6bc9fa", width: Math.min(100, Math.max(0, item.retention * 100)) + "%" } })));
         })) : null,
-        React.createElement("div", { style: { position: "absolute", right: "18px", bottom: "18px", pointerEvents: "none", color: "#7b99ad", font: "13px system-ui,sans-serif" } }, "拖拽旋转 · 滚轮缩放 · 点击选中神经元"),
+        React.createElement("div", { style: { position: "absolute", right: "18px", bottom: "18px", pointerEvents: "none", color: "#7b99ad", font: "13px system-ui,sans-serif" } }, "拖拽旋转 · 滚轮缩放 · 点光点看关联"),
         error ? React.createElement("div", { role: "alert", style: { position: "absolute", inset: "40% 20% auto", textAlign: "center", color: "#d8e9f8" } },
           React.createElement("p", null, "图谱加载失败：" + error),
           React.createElement("button", { type: "button", style: actionStyle, onClick: function () { setRetry(function (value) { return value + 1; }); } }, "重试")) : null);
     }
 
+    function ConfirmationDialog(props) {
+      var valueState = React.useState("");
+      var value = valueState[0], setValue = valueState[1];
+      var errorState = React.useState("");
+      var error = errorState[0], setError = errorState[1];
+      var form = React.useRef(null);
+      React.useEffect(function () {
+        var active = document.activeElement;
+        var target = form.current && form.current.querySelector("input,button");
+        if (target) target.focus();
+        return function () { if (active && active.isConnected) active.focus(); };
+      }, []);
+      function onKey(event) {
+        if (event.key === "Escape") {
+          event.preventDefault(); event.stopPropagation();
+          if (!props.busy) props.onClose();
+        }
+        if (event.key === "Tab" && form.current) {
+          var controls = Array.from(form.current.querySelectorAll("input,button")).filter(function (control) { return !control.disabled; });
+          if (!controls.length) { event.preventDefault(); return; }
+          var index = controls.indexOf(document.activeElement);
+          if (event.shiftKey && index <= 0) { event.preventDefault(); controls[controls.length - 1].focus(); }
+          else if (!event.shiftKey && (index === -1 || index === controls.length - 1)) { event.preventDefault(); controls[0].focus(); }
+        }
+      }
+      return React.createElement("div", { "data-memory-engine-confirm": "true", onKeyDown: onKey,
+        style: { position: "fixed", inset: 0, zIndex: 3, display: "grid", placeItems: "center", padding: "24px", background: "#03060ccc" } },
+        React.createElement("form", { ref: form, role: "dialog", "aria-modal": "true", "aria-label": props.title,
+          onSubmit: function (event) {
+            event.preventDefault();
+            if (props.busy) return;
+            if (props.requireDelete && value !== "DELETE") { setError("请输入大写 DELETE，其他内容不会执行清空。"); return; }
+            setError(""); props.onConfirm();
+          },
+          style: { width: "min(460px,100%)", padding: "24px", border: "1px solid #8b505c", borderRadius: "16px", background: "#101a29", color: "#e2f4ff", boxShadow: "0 16px 80px #0008" } },
+          React.createElement("h2", { style: { margin: "0 0 12px", fontSize: "20px" } }, props.title),
+          React.createElement("p", { style: { color: "#c2cedc" } }, props.message),
+          props.requireDelete ? React.createElement("label", null, "输入 DELETE 确认",
+            React.createElement("input", { "aria-label": "输入 DELETE 确认", autoComplete: "off", value: value, disabled: props.busy,
+              onChange: function (event) { setValue(event.target.value); setError(""); }, style: Object.assign({}, fieldStyle, { display: "block", width: "100%", marginTop: "8px" }) })) : null,
+          error || props.error ? React.createElement("p", { role: "alert", style: { color: "#ffb8b8" } }, error || props.error) : null,
+          React.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "10px", marginTop: "24px" } },
+            React.createElement("button", { type: "button", disabled: props.busy, onClick: props.onClose, style: actionStyle }, "取消"),
+            React.createElement("button", { type: "submit", disabled: props.busy, style: Object.assign({}, actionStyle, { borderColor: "#c86b7a", background: "#572a38" }) }, props.busy ? "正在处理…" : props.submitLabel))));
+    }
+
+    function MemoryRow(props) {
+      var item = props.item;
+      var expandedState = React.useState(false);
+      var expanded = expandedState[0], setExpanded = expandedState[1];
+      var detailState = React.useState(item);
+      var detail = detailState[0], setDetail = detailState[1];
+      var editState = React.useState(null);
+      var edit = editState[0], setEdit = editState[1];
+      var confirmState = React.useState(false);
+      var confirming = confirmState[0], setConfirming = confirmState[1];
+      var errorState = React.useState("");
+      var error = errorState[0], setError = errorState[1];
+      var loadingState = React.useState(false);
+      var loading = loadingState[0], setLoading = loadingState[1];
+      var busyState = React.useState(false);
+      var busy = busyState[0], setBusy = busyState[1];
+      var mutation = React.useRef(null);
+      React.useEffect(function () { return function () { if (mutation.current) mutation.current.abort(); }; }, []);
+      React.useEffect(function () {
+        if (!expanded) return;
+        var controller = new AbortController();
+        setLoading(true); setError("");
+        readApi("/memory-engine/api/item/" + encodeURIComponent(item.id), controller.signal).then(function (result) {
+          if (!controller.signal.aborted) setDetail(result);
+        }).catch(function (failure) {
+          if (!controller.signal.aborted) setError("读取详情失败：" + failure.message);
+        }).finally(function () { if (!controller.signal.aborted) setLoading(false); });
+        return function () { controller.abort(); };
+      }, [expanded, item.id]);
+      function mutate(method) {
+        if (mutation.current) return;
+        var controller = new AbortController();
+        mutation.current = controller;
+        setBusy(true); setError("");
+        var options = { method: method, signal: controller.signal };
+        if (method === "PUT") { options.headers = { "Content-Type": "application/json" }; options.body = JSON.stringify(edit); }
+        requestApi("/memory-engine/api/item/" + encodeURIComponent(item.id), options).then(function () {
+          if (controller.signal.aborted) return;
+          setEdit(null); setExpanded(false); setConfirming(false); props.onChanged();
+        }).catch(function (failure) {
+          if (!controller.signal.aborted) setError((method === "PUT" ? "保存失败：" : "删除失败：") + failure.message);
+        }).finally(function () {
+          if (!controller.signal.aborted) { mutation.current = null; setBusy(false); }
+        });
+      }
+      function change(field, value) { setEdit(function (previous) { var next = Object.assign({}, previous); next[field] = value; return next; }); }
+      var choices = kinds.includes(detail.kind) ? kinds : [detail.kind].concat(kinds);
+      return React.createElement("article", { "data-memory-engine-row": item.id,
+        style: { marginBottom: "12px", border: "1px solid " + (expanded ? "#4c85a4" : "#263f54"), borderRadius: "12px", background: "#0b1624", overflowWrap: "anywhere" } },
+        React.createElement("button", { type: "button", "data-memory-engine-expand": item.id, "aria-expanded": expanded, disabled: busy,
+          onClick: function () { setExpanded(!expanded); setEdit(null); setError(""); },
+          style: { width: "100%", display: "block", padding: "18px 20px", border: 0, borderRadius: "12px", background: "transparent", color: "inherit", textAlign: "left", font: "inherit", cursor: "pointer" } },
+          React.createElement("span", { style: { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" } },
+            React.createElement("span", { style: { color: "#a4e6ff", background: "#15344b", padding: "2px 8px", borderRadius: "6px", flexShrink: 0 } }, item.kind),
+            React.createElement("strong", { style: { flex: "1 1 180px", overflowWrap: "anywhere" } }, item.title),
+            React.createElement("span", { style: { color: "#8db0c7", fontSize: "12px", whiteSpace: "nowrap" } }, "留存 " + item.retention.toFixed(2) + " · " + item.degree + " 个连接")),
+          !expanded ? React.createElement("span", { style: { display: "block", color: "#9fb7ce", marginTop: "8px", overflowWrap: "anywhere" } }, item.preview) : null),
+        expanded ? React.createElement("div", { style: { padding: "0 20px 18px" } },
+          loading ? React.createElement("p", { role: "status" }, "正在读取全文…") : null,
+          edit ? React.createElement("form", { "data-memory-engine-editor": item.id, onSubmit: function (event) { event.preventDefault(); mutate("PUT"); } },
+            React.createElement("textarea", { "aria-label": "记忆正文", value: edit.text, disabled: busy,
+              onChange: function (event) { change("text", event.target.value); },
+              style: Object.assign({}, fieldStyle, { width: "100%", minHeight: "150px", maxHeight: "40vh", resize: "vertical", lineHeight: 1.7 }) }),
+            React.createElement("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap", margin: "12px 0" } },
+              React.createElement("label", null, "分类 ", React.createElement("select", { "aria-label": "编辑分类", value: edit.kind, disabled: busy, style: fieldStyle,
+                onChange: function (event) { change("kind", event.target.value); } }, choices.map(function (value) { return React.createElement("option", { key: value, value: value }, value); }))),
+              React.createElement("label", null, "重要度 ", React.createElement("select", { "aria-label": "编辑重要度", value: edit.heat, disabled: busy, style: fieldStyle,
+                onChange: function (event) { change("heat", Number(event.target.value)); } },
+                [[1, "热（1）"], [2, "温（2）"], [3, "冷（3）"]].map(function (entry) { return React.createElement("option", { key: entry[0], value: entry[0] }, entry[1]); }))),
+              React.createElement("label", null, "相关人 ", React.createElement("input", { "aria-label": "编辑相关人", value: edit.who, disabled: busy,
+                onChange: function (event) { change("who", event.target.value); }, style: Object.assign({}, fieldStyle, { width: "140px" }) }))),
+            React.createElement("div", { style: { display: "flex", gap: "8px" } },
+              React.createElement("button", { type: "submit", disabled: busy, "data-memory-engine-save": "true", style: actionStyle }, busy ? "正在保存…" : "保存"),
+              React.createElement("button", { type: "button", disabled: busy, "data-memory-engine-cancel-edit": "true", style: actionStyle,
+                onClick: function () { setEdit(null); setExpanded(false); setError(""); } }, "取消")))
+            : React.createElement(React.Fragment, null,
+              React.createElement("div", { "data-memory-engine-full-text": "true", style: { whiteSpace: "pre-wrap", maxHeight: "40vh", overflowY: "auto", color: "#c2d3e3", marginBottom: "14px" } }, detail.text),
+              React.createElement("div", { style: { display: "flex", gap: "8px" } },
+                React.createElement("button", { type: "button", "data-memory-engine-edit": item.id, disabled: loading || busy, style: actionStyle,
+                  onClick: function () { setError(""); setEdit({ text: detail.text, kind: detail.kind, heat: detail.heat, who: detail.who || "" }); } }, "编辑"),
+                React.createElement("button", { type: "button", "data-memory-engine-delete": item.id, disabled: loading || busy,
+                  onClick: function () { setError(""); setConfirming(true); }, style: Object.assign({}, actionStyle, { color: "#ffb8b8", borderColor: "#8b505c" }) }, "删除"))),
+          error ? React.createElement("p", { role: "alert", style: { color: "#ffb8b8" } }, error) : null) : null,
+        confirming ? React.createElement(ConfirmationDialog, { title: "删除这条记忆", message: "确定删除这条记忆？不可撤销。操作前会保留备份。", submitLabel: "确定删除",
+          busy: busy, error: error, onClose: function () { setConfirming(false); }, onConfirm: function () { mutate("DELETE"); } }) : null);
+    }
+
+    function MemoryList(props) {
+      var searchState = React.useState("");
+      var search = searchState[0], setSearch = searchState[1];
+      var queryState = React.useState("");
+      var query = queryState[0], setQuery = queryState[1];
+      var kindState = React.useState("");
+      var kind = kindState[0], setKind = kindState[1];
+      var sortState = React.useState("recent");
+      var sort = sortState[0], setSort = sortState[1];
+      var offsetState = React.useState(0);
+      var offset = offsetState[0], setOffset = offsetState[1];
+      var pageState = React.useState({ items: [], total: 0, allTotal: 0 });
+      var page = pageState[0], setPage = pageState[1];
+      var loadingState = React.useState(true);
+      var loading = loadingState[0], setLoading = loadingState[1];
+      var errorState = React.useState("");
+      var error = errorState[0], setError = errorState[1];
+      var retryState = React.useState(0);
+      var retry = retryState[0], setRetry = retryState[1];
+      function refresh() {
+        setOffset(0); setRetry(function (value) { return value + 1; });
+        if (props.onChanged) props.onChanged();
+      }
+      React.useEffect(function () {
+        if (search === query) return;
+        var timer = setTimeout(function () { setOffset(0); setQuery(search); }, 250);
+        return function () { clearTimeout(timer); };
+      }, [search]);
+      React.useEffect(function () {
+        var controller = new AbortController();
+        var active = true;
+        setLoading(true); setError("");
+        var params = new URLSearchParams({ q: query, kind: kind, sort: sort, limit: "50", offset: String(offset) });
+        readApi("/memory-engine/api/list?" + params, controller.signal).then(function (result) {
+          if (!active) return;
+          setPage(function (previous) { return Object.assign({}, result, { items: offset === 0 ? result.items : previous.items.concat(result.items) }); });
+        }).catch(function (failure) {
+          if (active) setError("加载记忆失败：" + failure.message);
+        }).finally(function () { if (active) setLoading(false); });
+        return function () { active = false; controller.abort(); };
+      }, [query, kind, sort, offset, retry]);
+      return React.createElement("section", {
+        "aria-label": "记忆列表", "data-memory-engine-list": "true",
+        style: { position: "absolute", inset: "76px 0 0", display: "flex", flexDirection: "column", color: "#dbeaf8", font: "14px/1.6 system-ui,sans-serif" },
+      }, React.createElement("div", { style: { width: "min(980px,100%)", margin: "0 auto", padding: "0 24px 16px", display: "flex", gap: "12px", flexWrap: "wrap" } },
+        React.createElement("input", { type: "search", "aria-label": "搜索记忆", placeholder: "搜索正文或标题…", value: search,
+          onChange: function (event) { setSearch(event.target.value); }, style: Object.assign({}, fieldStyle, { flex: "1 1 220px" }) }),
+        React.createElement("select", { "aria-label": "分类筛选", value: kind, style: fieldStyle,
+          onChange: function (event) { setOffset(0); setKind(event.target.value); } },
+          [""].concat(kinds).map(function (value) { return React.createElement("option", { key: value, value: value }, value || "全部分类"); })),
+        React.createElement("select", { "aria-label": "记忆排序", value: sort, style: fieldStyle,
+          onChange: function (event) { setOffset(0); setSort(event.target.value); } },
+          [["recent", "最近"], ["oldest", "最老"], ["fading", "快忘了"], ["degree", "连接最多"]].map(function (entry) { return React.createElement("option", { key: entry[0], value: entry[0] }, entry[1]); }))),
+      React.createElement("div", { "data-memory-engine-list-scroll": "true", style: { flex: 1, minHeight: 0, overflowY: "auto", padding: "0 24px 24px" } },
+        React.createElement("div", { style: { maxWidth: "932px", margin: "0 auto" }, "aria-busy": loading },
+          error ? React.createElement("div", { role: "alert", style: { color: "#ffb8b8", padding: "16px" } }, error,
+            React.createElement("button", { type: "button", style: actionStyle, onClick: function () { setRetry(function (value) { return value + 1; }); } }, "重试")) : null,
+          page.items.map(function (item) {
+            return React.createElement(MemoryRow, { key: item.id, item: item, onChanged: refresh });
+          }),
+          !loading && !error && !page.items.length ? React.createElement("p", { role: "status", style: { padding: "24px", textAlign: "center", color: "#9fb7ce" } }, page.allTotal ? "没有匹配的记忆，试试其他关键词或分类。" : "还没有记忆，可以点右上角 ? 查看导入方法。") : null)),
+          React.createElement("div", { "data-memory-engine-list-total": "true", style: { padding: "14px", textAlign: "center", color: "#9fb7ce", flexShrink: 0, borderTop: "1px solid #263f54" } },
+            "共 " + page.total + " 条 · 已显示 " + page.items.length + " 条",
+            loading ? React.createElement("span", { role: "status" }, " · 正在加载…") : null,
+            page.items.length < page.total ? React.createElement("button", { type: "button", "data-memory-engine-more": "true", disabled: loading || search !== query || !!error,
+              onClick: function () { setOffset(page.items.length); }, style: Object.assign({}, actionStyle, { marginLeft: "12px", opacity: loading ? 0.5 : 1 }) }, "加载更多") : null));
+    }
+
+    function MemorySettings(props) {
+      var statsState = React.useState(null);
+      var stats = statsState[0], setStats = statsState[1];
+      var errorState = React.useState("");
+      var error = errorState[0], setError = errorState[1];
+      var noticeState = React.useState("");
+      var notice = noticeState[0], setNotice = noticeState[1];
+      var retryState = React.useState(0);
+      var retry = retryState[0], setRetry = retryState[1];
+      var busyState = React.useState(false);
+      var busy = busyState[0], setBusy = busyState[1];
+      var confirmState = React.useState(false);
+      var confirming = confirmState[0], setConfirming = confirmState[1];
+      var mutation = React.useRef(null);
+      var download = React.useRef(null);
+      var timer = React.useRef(null);
+      var active = React.useRef(true);
+      React.useEffect(function () {
+        active.current = true;
+        return function () {
+          active.current = false;
+          if (mutation.current) mutation.current.abort();
+          clearTimeout(timer.current);
+          if (download.current) URL.revokeObjectURL(download.current);
+        };
+      }, []);
+      React.useEffect(function () {
+        var controller = new AbortController();
+        setError("");
+        readApi("/memory-engine/api/stats", controller.signal).then(function (result) {
+          if (!controller.signal.aborted) setStats(result);
+        }).catch(function (failure) {
+          if (!controller.signal.aborted) setError("读取设置失败：" + failure.message);
+        });
+        return function () { controller.abort(); };
+      }, [retry]);
+      function manage(clearing) {
+        if (mutation.current) return;
+        var controller = new AbortController();
+        mutation.current = controller; setBusy(true); setError(""); setNotice("");
+        var options = { signal: controller.signal };
+        if (clearing) { options.method = "POST"; options.headers = { "Content-Type": "application/json" }; options.body = JSON.stringify({ confirm: "DELETE" }); }
+        requestApi("/memory-engine/api/" + (clearing ? "clear" : "export"), options).then(function (result) {
+          if (controller.signal.aborted) return;
+          if (clearing) { props.onCleared(); return; }
+          if (download.current) URL.revokeObjectURL(download.current);
+          clearTimeout(timer.current);
+          download.current = URL.createObjectURL(new Blob([JSON.stringify({ ok: true, data: result }, null, 2) + "\n"], { type: "application/json;charset=utf-8" }));
+          var anchor = document.createElement("a");
+          var date = new Date();
+          anchor.href = download.current;
+          anchor.download = "memories-" + date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0") + ".json";
+          document.body.appendChild(anchor); anchor.click(); anchor.remove();
+          timer.current = setTimeout(function () { URL.revokeObjectURL(download.current); download.current = null; timer.current = null; }, 1000);
+          setNotice("已开始下载，共 " + result.total + " 条记忆。");
+        }).catch(function (failure) {
+          if (!controller.signal.aborted) setError((clearing ? "清空失败：" : "导出失败：") + failure.message);
+        }).finally(function () {
+          if (!controller.signal.aborted) { mutation.current = null; setBusy(false); }
+        });
+      }
+      var directory = stats ? stats.file.replace(/[\\/][^\\/]*$/, "") : "";
+      return React.createElement("section", { "aria-label": "记忆设置", "data-memory-engine-settings": "true",
+        style: { position: "absolute", inset: "76px 0 0", overflowY: "auto", padding: "0 24px 32px", color: "#dbeaf8", font: "14px/1.7 system-ui,sans-serif" } },
+        React.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", padding: "28px", border: "1px solid #263f54", borderRadius: "14px", background: "#0b1624" } },
+          React.createElement("h2", { style: { margin: "0 0 20px", fontSize: "20px", color: "#b7e9ff" } }, "数据管理"),
+          stats ? React.createElement(React.Fragment, null,
+            React.createElement("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: "12px" } },
+              React.createElement("span", { style: { flex: "1 1 360px", overflowWrap: "anywhere" } }, "数据目录：", React.createElement("code", { "data-memory-engine-directory": "true" }, directory)),
+              React.createElement("button", { type: "button", "data-memory-engine-copy-path": "true", style: actionStyle,
+                onClick: function () {
+                  setNotice(""); setError("");
+                  copyText(directory).then(function () { if (active.current) setNotice("数据目录已复制 ✓"); }, function () { if (active.current) setError("复制路径失败，请手动复制上方目录。"); });
+                } }, "复制路径")),
+            React.createElement("p", { "data-memory-engine-storage-stats": "true", style: { color: "#9fb7ce", margin: "16px 0 24px" } }, "记忆条数：" + stats.total + "　 文件大小：" + (stats.bytes / 1024).toFixed(1) + " KB"))
+            : React.createElement("p", { role: "status" }, error ? "暂时无法读取数据目录。" : "正在读取数据目录…"),
+          error ? React.createElement("div", { role: "alert", style: { color: "#ffb8b8", marginBottom: "16px" } }, error,
+            !stats ? React.createElement("button", { type: "button", style: actionStyle, onClick: function () { setRetry(function (value) { return value + 1; }); } }, "重试") : null) : null,
+          notice ? React.createElement("p", { role: "status", style: { color: "#9fe5c4" } }, notice) : null,
+          React.createElement("div", { style: { padding: "24px 0", borderTop: "1px solid #263f54", borderBottom: "1px solid #263f54" } },
+            React.createElement("button", { type: "button", "data-memory-engine-export": "true", disabled: busy, onClick: function () { manage(false); }, style: actionStyle }, "导出全部记忆（JSON）"),
+            React.createElement("p", { style: { margin: "10px 0 0", fontSize: "12px", color: "#9fb7ce" } }, "下载包含全部原始条目的 JSON 文件。导入已有记忆请使用 memory_import 工具。")),
+          React.createElement("h3", { style: { color: "#ffb8b8", marginTop: "24px" } }, "危险操作"),
+          React.createElement("p", { style: { color: "#9fb7ce" } }, "清空前会自动备份，最近五份操作备份保留在数据目录。"),
+          React.createElement("button", { type: "button", "data-memory-engine-clear": "true", disabled: busy,
+            onClick: function () { setError(""); setNotice(""); setConfirming(true); }, style: Object.assign({}, actionStyle, { color: "#ffb8b8", borderColor: "#8b505c", background: "#341c28" }) }, "清空全部记忆")),
+        confirming ? React.createElement(ConfirmationDialog, { title: "清空全部记忆", message: "这会删除当前记忆库的全部条目。请确认已导出需要保留的内容。", requireDelete: true,
+          submitLabel: "确认清空", busy: busy, error: error, onClose: function () { setConfirming(false); }, onConfirm: function () { manage(true); } }) : null);
+    }
+
     function MemoryButton(props) {
       var settings = props.settings;
       var state = React.useState(false);
@@ -508,6 +933,8 @@ function frame(now) {
       var selectedState = React.useState(null);
       var selected = selectedState[0];
       var setSelected = selectedState[1];
+      var tabState = React.useState("map");
+      var tab = tabState[0], setTab = tabState[1];
       var renderer = React.useRef(null);
       var selectionVersion = React.useRef(0);
       var pointer = React.useRef(null);
@@ -522,6 +949,7 @@ function frame(now) {
         dismissed.current = false;
         setGuideOpen(false);
         setSelected(null);
+        setTab("map");
         setOpen(Date.now());
       }
       function closeMap() { setSelected(null); setOpen(false); }
@@ -562,6 +990,7 @@ function frame(now) {
         function onEscape() { if (guideOpen) closeGuide(); else if (selected) setSelected(null); else closeMap(); }
         function onKey(event) {
           if (event.key !== "Escape") return;
+          if (event.target && event.target.closest && event.target.closest("[data-memory-engine-confirm]")) return;
           event.preventDefault();
           event.stopPropagation();
           if (!event.repeat) onEscape();
@@ -585,12 +1014,20 @@ function frame(now) {
         onPointerDownCapture: startPointer, onPointerMoveCapture: movePointer,
         onPointerCancelCapture: function () { pointer.current = null; }, onClick: dismissOutside,
         style: { position: "fixed", inset: 0, maxWidth: "none", maxHeight: "none", zIndex: 9999, background: "#03060c" },
-      }, React.createElement(MemoryCanvas, { key: open, rendererRef: renderer, selectionVersion: selectionVersion, onSelect: setSelected }),
+      }, tab === "map" ? React.createElement(MemoryCanvas, { key: open, rendererRef: renderer, selectionVersion: selectionVersion, onSelect: setSelected })
+        : tab === "memories" ? React.createElement(MemoryList, { onChanged: function () { setRetry(function (value) { return value + 1; }); } })
+          : React.createElement(MemorySettings, { onCleared: function () { openMap(); setGuideOpen(true); } }),
+      tab !== "map" ? React.createElement("strong", { style: { position: "absolute", top: "23px", left: "24px", font: "600 18px system-ui,sans-serif", color: "#b7e9ff" } }, "记忆管理") : null,
       React.createElement("style", null, "@keyframes dsh-memory-detail-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@media(prefers-reduced-motion:reduce){[data-memory-engine-detail]{animation:none!important}}"),
       React.createElement("div", {
         "data-memory-engine-controls": "true",
         style: { position: "absolute", top: "16px", right: "18px", zIndex: 1, display: "flex", gap: "8px" },
-      }, React.createElement("button", {
+      }, React.createElement("div", { role: "tablist", "aria-label": "记忆面板", style: { display: "flex", gap: "4px", marginRight: "8px" } },
+        [["map", "图谱"], ["memories", "记忆"], ["settings", "设置"]].map(function (entry) {
+          return React.createElement("button", { key: entry[0], type: "button", role: "tab", "aria-selected": tab === entry[0], "data-memory-engine-tab": entry[0],
+            onClick: function () { setSelected(null); setTab(entry[0]); },
+            style: Object.assign({}, actionStyle, { background: tab === entry[0] ? "#204762" : "#091422", borderColor: tab === entry[0] ? "#8acded" : "#35536b" }) }, entry[1]);
+        })), React.createElement("button", {
         ref: help, type: "button", onClick: function () { setGuideOpen(true); },
         "aria-label": "查看使用指南", title: "使用指南", style: actionStyle,
       }, "?"), React.createElement("button", {