weflow-cli 1.9.0 → 1.11.0

package/resources/js/graph3d/viewer2d.js

@@ -0,0 +1,448 @@
+// 2D 图谱视图（canvas）。数据与坐标都是构建期内联进来的，这里只负责画与交互。
+//
+// 为什么是 canvas 而不是 SVG/DOM：5 万个点用元素画，光建元素就要几秒 —— 这和 Obsidian 全局图谱
+// 在十万级上吃力的原因同类。这里每帧只做三件事：一次批量描线、按线分三批批量填点、一小批文字。
+// 视口外的点与线直接跳过（所以缩放到任何一级，画的都只是眼前这些）。
+//
+// 坐标分两套，别混：**世界坐标**（构建期算出来的那套，成千上万）用来画点线，套在 context 变换里；
+// **屏幕坐标**用来写字与命中判断。第一版把两套混着用，图形会被画到屏幕外。
+//
+// 标签只给度数最高的一小批：5 万个名字全画上去就是一团墨，什么也读不出来。
+(() => {
+  'use strict'
+
+  const data = window.__DATA__ || { nodes: [], links: [] }
+  const nodes = data.nodes
+  const N = nodes.length
+  const flat = String(window.__POS__ || '').split(',')
+  const X = new Float64Array(N)
+  const Y = new Float64Array(N)
+  for (let i = 0; i < N; i += 1) {
+    X[i] = Number(flat[2 * i]) || 0
+    Y[i] = Number(flat[2 * i + 1]) || 0
+  }
+
+  const index = new Map()
+  for (let i = 0; i < N; i += 1) index.set(nodes[i].id, i)
+
+  // **画给人看的一律用 `name`**：主键是 `线:名字`（两条线各有一张同名页时要分开），
+  // 直接把主键印在画布上，两个同名概念会像叫「wiki:DeepSeek」「chat:DeepSeek」。
+  const LINE_LABELS = data.lineLabels || {}
+  const label = (n) => n.name || n.id
+  const lineLabel = (n) => LINE_LABELS[n.line] || n.line || ''
+
+  const edges = []
+  for (const pair of data.links) {
+    const a = index.get(pair[0])
+    const b = index.get(pair[1])
+    if (a === undefined || b === undefined) continue // 悬空边（上游过滤过，这里再兜一次）
+    edges.push(a, b)
+  }
+  const E = Int32Array.from(edges)
+  const adj = new Array(N)
+  for (let i = 0; i < N; i += 1) adj[i] = []
+  for (let k = 0; k < E.length; k += 2) {
+    adj[E[k]].push(E[k + 1])
+    adj[E[k + 1]].push(E[k])
+  }
+
+  const bucketOf = (line) => (line === 'wiki' || line === 'chat' ? line : 'other')
+  const LINE_COLOR = { wiki: '#6ea8fe', chat: '#f0a35e', other: '#8b98b3' }
+
+  // **按线预排一次**：每帧就能一趟扫完。不为分色把 5 万个点扫三遍 —— 省下的是纯遍历时间。
+  const ORDER = new Int32Array(N)
+  for (let i = 0; i < N; i += 1) ORDER[i] = i
+  ORDER.sort((a, b) => bucketOf(nodes[a].line).localeCompare(bucketOf(nodes[b].line)))
+  // 排序后同一条线的点连成一段，扫一遍就能得到三个桶的边界（顺序与上面的字典序一致）
+  const BUCKET_LINE = ['chat', 'other', 'wiki']
+  const BUCKET = [0, 0, 0, N]
+  {
+    let cursor = 0
+    for (let b = 0; b < 3; b += 1) {
+      BUCKET[b] = cursor
+      while (cursor < N && bucketOf(nodes[ORDER[cursor]].line) === BUCKET_LINE[b]) cursor += 1
+    }
+    BUCKET[3] = N
+  }
+
+  // 边的**世界坐标**中位长度：乘上当前缩放就是屏幕上的长度。缩到看不见时直接不画边 ——
+  // 一屏 14 万条线糊成一片，没有信息量，却要花掉每帧四成的时间。
+  const MEDIAN_EDGE = (() => {
+    if (E.length === 0) return 0
+    const total = E.length / 2
+    const step = Math.max(1, Math.floor(total / 2000))
+    const lens = []
+    for (let k = 0; k < E.length; k += 2 * step) {
+      lens.push(Math.hypot(X[E[k]] - X[E[k + 1]], Y[E[k]] - Y[E[k + 1]]))
+    }
+    lens.sort((a, b) => a - b)
+    return lens[lens.length >> 1] || 0
+  })()
+  const EDGE_MIN_PX = 2 // 屏幕上短于这么多像素的边就别画了
+
+  // 度数最高的一批画名字（其余只在鼠标指着或点开时显示）
+  const labelled = nodes
+    .map((_n, i) => i)
+    .sort((a, b) => (nodes[b].deg || 0) - (nodes[a].deg || 0))
+    .slice(0, 80)
+  const labelledSet = new Set(labelled)
+  const LABEL_MAX = 40 // 一屏最多这么多名字，超了就前面的优先（还得互相避让，见 draw 里那段）
+
+  const canvas = document.getElementById('cv')
+  const hudStats = document.getElementById('stats')
+  const hudInfo = document.getElementById('info')
+  const boot = document.getElementById('boot')
+  const q = document.getElementById('q')
+  const HINT = '拖动平移 · 滚轮缩放 · 点一个概念看它连谁 · 双击空白复位'
+
+  let ctx = null
+  try {
+    ctx = canvas && canvas.getContext ? canvas.getContext('2d') : null
+  } catch (_error) {
+    ctx = null
+  }
+  if (!ctx) {
+    if (boot) boot.textContent = '这个浏览器给不出 2D 画布，图谱无法渲染'
+    return
+  }
+
+  const dpr = Math.min(2, window.devicePixelRatio || 1)
+  const view = { scale: 1, x: 0, y: 0 } // 世界 → 屏幕：sx = view.x + X * scale
+  let hovered = -1
+  let focus = -1
+  let neighbours = null
+
+  const cssW = () => canvas.clientWidth || window.innerWidth || 800
+  const cssH = () => canvas.clientHeight || window.innerHeight || 600
+
+  function escapeHtml(text) {
+    return String(text).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]))
+  }
+
+  function resize() {
+    const w = cssW()
+    const h = cssH()
+    // **画布尺寸与 CSS 尺寸必须一起设**：canvas 是替换元素，`position:fixed; inset:0` 不会
+    // 让它铺满（它保持固有的 300x150）—— 只设 width/height（后备缓冲）而 CSS 盒还是 300x150 的话，
+    // `clientWidth` 就一直是 300，整张图会被算进左上角那一小块。第一版就是这么错的。
+    canvas.style.width = `${w}px`
+    canvas.style.height = `${h}px`
+    canvas.width = Math.floor(w * dpr)
+    canvas.height = Math.floor(h * dpr)
+    draw()
+  }
+
+  function fit() {
+    let minX = Infinity
+    let minY = Infinity
+    let maxX = -Infinity
+    let maxY = -Infinity
+    for (let i = 0; i < N; i += 1) {
+      if (X[i] < minX) minX = X[i]
+      if (X[i] > maxX) maxX = X[i]
+      if (Y[i] < minY) minY = Y[i]
+      if (Y[i] > maxY) maxY = Y[i]
+    }
+    if (!Number.isFinite(minX)) {
+      view.scale = 1
+      view.x = cssW() / 2
+      view.y = cssH() / 2
+      draw()
+      return
+    }
+    const pad = 28
+    view.scale = Math.max(1e-6, Math.min((cssW() - pad * 2) / Math.max(1, maxX - minX),
+                                         (cssH() - pad * 2) / Math.max(1, maxY - minY)))
+    view.x = cssW() / 2 - ((minX + maxX) / 2) * view.scale
+    view.y = cssH() / 2 - ((minY + maxY) / 2) * view.scale
+    draw()
+  }
+
+  /** 屏幕坐标 → 命中的节点下标（找不到是 -1）。 */
+  function pick(px, py) {
+    const s = view.scale
+    const wx = (px - view.x) / s
+    const wy = (py - view.y) / s
+    const tol = 7 / s
+    let best = -1
+    let bestD = tol * tol
+    for (let i = 0; i < N; i += 1) {
+      const dx = X[i] - wx
+      const dy = Y[i] - wy
+      const d = dx * dx + dy * dy
+      if (d <= bestD) {
+        bestD = d
+        best = i
+      }
+    }
+    return best
+  }
+
+  function draw() {
+    const w = cssW()
+    const h = cssH()
+    const s = view.scale
+    const ox = view.x
+    const oy = view.y
+
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, w, h)
+
+    // 视口在世界坐标里的范围（多留一点余量，免得边缘的点被切掉半个）
+    const pad = 4 / s
+    const x0 = -ox / s - pad
+    const y0 = -oy / s - pad
+    const x1 = (w - ox) / s + pad
+    const y1 = (h - oy) / s + pad
+
+    // ---- 世界坐标：点与线 ----
+    ctx.setTransform(dpr * s, 0, 0, dpr * s, dpr * ox, dpr * oy)
+
+    // 聚焦时把无关的点线压暗（不是藏起来）：结构还在，但一眼看得出它连的是谁
+    const dimOthers = focus >= 0
+    const near = (i) => !dimOthers || i === focus || (neighbours !== null && neighbours.has(i))
+
+    // 屏幕上的边短到看不清时，整批不画（见 MEDIAN_EDGE 那段）
+    const drawEdges = MEDIAN_EDGE * s >= EDGE_MIN_PX
+    ctx.lineWidth = 0.7 / s
+    ctx.strokeStyle = dimOthers ? 'rgba(96,116,152,0.10)' : 'rgba(96,116,152,0.26)'
+    ctx.beginPath()
+    for (let k = 0; drawEdges && k < E.length; k += 2) {
+      const i = E[k]
+      const j = E[k + 1]
+      if (dimOthers && !(near(i) && near(j))) continue
+      const xi = X[i]
+      const yi = Y[i]
+      const xj = X[j]
+      const yj = Y[j]
+      if ((xi < x0 && xj < x0) || (xi > x1 && xj > x1)) continue
+      if ((yi < y0 && yj < y0) || (yi > y1 && yj > y1)) continue
+      ctx.moveTo(xi, yi)
+      ctx.lineTo(xj, yj)
+    }
+    ctx.stroke()
+
+    // 一趟扫完（ORDER 已按线排好，每段一个桶一次 fill），而不是为了分色把全部点扫三遍
+    for (let b = 0; b < 3; b += 1) {
+      const from = BUCKET[b]
+      const to = BUCKET[b + 1]
+      if (from === to) continue
+      ctx.beginPath()
+      ctx.fillStyle = LINE_COLOR[BUCKET_LINE[b]]
+      let any = false
+      for (let k = from; k < to; k += 1) {
+        const i = ORDER[k]
+        if (X[i] < x0 || X[i] > x1 || Y[i] < y0 || Y[i] > y1) continue
+        if (dimOthers && !near(i)) continue
+        const deg = nodes[i].deg || 0
+        const r = (i === focus ? 4 : deg >= 50 ? 2.6 : deg >= 10 ? 1.9 : 1.4) / s
+        // **屏幕上小到看不出圆角时用方块**：实测 5 万个方块 3.4ms、5 万个圆 9.0ms。
+        // 缩到最远时每个点不到 2px，方块与圆在这里没有任何视觉差别。
+        if (r * s < 2) ctx.rect(X[i] - r, Y[i] - r, r * 2, r * 2)
+        else {
+          ctx.moveTo(X[i] + r, Y[i])
+          ctx.arc(X[i], Y[i], r, 0, Math.PI * 2)
+        }
+        any = true
+      }
+      if (any) ctx.fill()
+    }
+
+    // ---- 屏幕坐标：名字 ----
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.font = '11px "Segoe UI","Microsoft YaHei",system-ui,sans-serif'
+    ctx.textAlign = 'left'
+    ctx.textBaseline = 'middle'
+    // 只遍历"要画名字的那一小批"，而不是全部 5 万个（以前每帧都要扫 N 次 Set 查询）
+    const extra = []
+    if (hovered >= 0 && !labelledSet.has(hovered)) extra.push(hovered)
+    if (focus >= 0 && focus !== hovered && !labelledSet.has(focus)) extra.push(focus)
+    // **聚焦时的候选换成"它自己 + 它连着的那些"**：其余点都压暗了，给它们画名字只会糊住
+    // 中间那个。邻居按度数从高到低（`LABEL_MAX` 截断时先给连接多的），所以同一张图每次
+    // 画出来的名字是一样的。
+    //
+    // 这里原来写的是"聚焦就只画 `extra`"，而 `extra` 只装**不在度数最高那批里的**点 ——
+    // 于是点开一个枢纽（小图里就是点开任何一个点）画布上**一个名字都没有**，正好与上面
+    // "一眼看得出它连的是谁"相反（2026-10-11 修）。
+    const focusLabels = []
+    if (dimOthers) {
+      focusLabels.push(focus)
+      if (neighbours) {
+        for (const j of [...neighbours].sort((a, b) => (nodes[b].deg || 0) - (nodes[a].deg || 0))) {
+          focusLabels.push(j)
+        }
+      }
+    }
+    // **互相压住的名字谁也别画**（贪心避让）：度数最高的那批全是枢纽，它们本来就挤在中心，
+    // 早先那版把它们全画出来，正中间是一团白字，等于没有标签。鼠标指着/点开的那两个永远画。
+    const placed = []
+    let shownLabels = 0
+    for (const i of dimOthers ? focusLabels.concat(extra) : labelled.concat(extra)) {
+      const sx = ox + X[i] * s
+      const sy = oy + Y[i] * s
+      if (sx < -40 || sy < -20 || sx > w + 40 || sy > h + 20) continue
+      const forced = i === hovered || i === focus
+      if (!forced) {
+        if (shownLabels >= LABEL_MAX) continue
+        let clash = false
+        for (let p = 0; p < placed.length; p += 1) {
+          if (Math.abs(placed[p][0] - sx) < 52 && Math.abs(placed[p][1] - sy) < 13) {
+            clash = true
+            break
+          }
+        }
+        if (clash) continue
+      }
+      placed.push([sx, sy])
+      shownLabels += 1
+      ctx.fillStyle = forced ? '#ffffff' : 'rgba(201,211,230,0.78)'
+      ctx.fillText(label(nodes[i]), sx + 6, sy)
+    }
+  }
+
+  // **每帧最多画一次。** 拖动、滚轮、悬停原本是每个事件都直接 draw()；事件比一帧还密时
+  // （拖动时一秒几百个 pointermove）画布就一直在重画，一次 12.8ms —— 操作会"粘住"，这才是
+  // 它最初卡的主因。合并成每帧一次之后，帧时间就是那一次 draw 的时间，交互立刻顺。
+  const RAF = (typeof window.requestAnimationFrame === 'function')
+    ? (fn) => window.requestAnimationFrame(fn)
+    : (fn) => setTimeout(fn, 16)
+  let scheduled = false
+  function scheduleDraw() {
+    if (scheduled) return
+    scheduled = true
+    RAF(() => {
+      scheduled = false
+      draw()
+    })
+  }
+
+  function setFocus(i) {
+    focus = i
+    if (i >= 0) {
+      neighbours = new Set(adj[i])
+      if (hudInfo) {
+        const names = [...neighbours].slice(0, 6).map((j) => label(nodes[j])).join('、')
+        const more = neighbours.size > 6 ? ' 等' : ''
+        hudInfo.innerHTML = `<b>${escapeHtml(label(nodes[i]))}</b> · ${escapeHtml(lineLabel(nodes[i]))} · 连 ${neighbours.size} 个（${escapeHtml(names)}${more}）`
+      }
+    } else {
+      neighbours = null
+      if (hudInfo) hudInfo.textContent = HINT
+    }
+    scheduleDraw()
+  }
+
+  // ---- 交互 ----
+  let dragging = false
+  let lastX = 0
+  let lastY = 0
+  let moved = 0
+
+  canvas.addEventListener('pointerdown', (event) => {
+    if (event.button !== 0) return
+    dragging = true
+    moved = 0
+    lastX = event.clientX
+    lastY = event.clientY
+    if (canvas.setPointerCapture) canvas.setPointerCapture(event.pointerId)
+  })
+  canvas.addEventListener('pointermove', (event) => {
+    if (dragging) {
+      const dx = event.clientX - lastX
+      const dy = event.clientY - lastY
+      moved += Math.abs(dx) + Math.abs(dy)
+      lastX = event.clientX
+      lastY = event.clientY
+      view.x += dx
+      view.y += dy
+      scheduleDraw()
+      return
+    }
+    const rect = canvas.getBoundingClientRect()
+    const hit = pick(event.clientX - rect.left, event.clientY - rect.top)
+    if (hit !== hovered) {
+      hovered = hit
+      canvas.style.cursor = hit >= 0 ? 'pointer' : 'grab'
+      scheduleDraw()
+    }
+  })
+  canvas.addEventListener('pointerup', (event) => {
+    if (!dragging) return
+    dragging = false
+    if (moved > 3) return // 拖过就是平移，不算点选
+    const rect = canvas.getBoundingClientRect()
+    setFocus(pick(event.clientX - rect.left, event.clientY - rect.top))
+  })
+  canvas.addEventListener('dblclick', () => setFocus(-1))
+  canvas.addEventListener('pointerleave', () => {
+    if (hovered >= 0) {
+      hovered = -1
+      scheduleDraw()
+    }
+  })
+  canvas.addEventListener('wheel', (event) => {
+    event.preventDefault()
+    const rect = canvas.getBoundingClientRect()
+    const px = event.clientX - rect.left
+    const py = event.clientY - rect.top
+    const next = Math.max(0.02, Math.min(60, view.scale * Math.exp(-event.deltaY * 0.0015)))
+    const k = next / view.scale
+    view.x = px - (px - view.x) * k
+    view.y = py - (py - view.y) * k
+    view.scale = next
+    scheduleDraw()
+  }, { passive: false })
+
+  if (q) {
+    q.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter') return
+      const needle = q.value.trim().toLowerCase()
+      if (!needle) return
+      // 搜 `name`（主键也认，方便精确指定某一条线）。同名两页都在时**两个都算命中**，
+      // 跳连接更多的那张并把另一条线也说出来 —— 合并视图里这正是要看见的东西。
+      const exact = []
+      for (let i = 0; i < N; i += 1) {
+        if (label(nodes[i]).toLowerCase() === needle || nodes[i].id.toLowerCase() === needle) exact.push(i)
+      }
+      let pool = exact
+      if (!pool.length) {
+        pool = []
+        for (let i = 0; i < N; i += 1) {
+          if (label(nodes[i]).toLowerCase().includes(needle)) pool.push(i)
+        }
+      }
+      if (!pool.length) {
+        if (hudInfo) hudInfo.textContent = `没找到「${q.value.trim()}」`
+        return
+      }
+      pool.sort((a, b) => (nodes[b].deg || 0) - (nodes[a].deg || 0))
+      const hit = pool[0]
+      view.scale = Math.max(view.scale, 2.5)
+      view.x = cssW() / 2 - X[hit] * view.scale
+      view.y = cssH() / 2 - Y[hit] * view.scale
+      setFocus(hit)
+      if (pool.length > 1 && hudInfo) {
+        hudInfo.innerHTML += `<div>两条线都有「${escapeHtml(label(nodes[hit]))}」：${escapeHtml(pool.map((i) => lineLabel(nodes[i])).join('、'))}</div>`
+      }
+    })
+  }
+
+  if (hudStats) {
+    let wiki = 0
+    let chat = 0
+    for (let i = 0; i < N; i += 1) {
+      if (nodes[i].line === 'wiki') wiki += 1
+      else if (nodes[i].line === 'chat') chat += 1
+    }
+    hudStats.textContent = `${N.toLocaleString('en-US')} 个概念 · ${(E.length / 2).toLocaleString('en-US')} 条链接`
+      + ` · ${LINE_LABELS.wiki || 'wiki'} ${wiki.toLocaleString('en-US')} / ${LINE_LABELS.chat || 'chat'} ${chat.toLocaleString('en-US')}`
+  }
+  if (hudInfo) hudInfo.textContent = HINT
+  if (boot) boot.style.display = 'none'
+
+  window.addEventListener('resize', resize)
+  resize()
+  fit()
+  // 给冒烟测试一个把手：能问它"画了多少个点、多少条线"
+  window.__GRAPH2D__ = { nodes: N, edges: E.length / 2, draw, fit, view }
+})()

package/resources/panel/index.html

@@ -29,6 +29,9 @@
       <span class="brand">第二大脑</span>
       <span id="status" class="status">连接中…</span>
       <button id="collapse" type="button" class="ghost" hidden>收起</button>
+      <!-- "它记住了什么"（只读）。**不经过模型**：那条路由只返回数据，页面只渲染；
+           模型看到的是另一份（带预算与脱敏）。点开时才拉一次，不轮询。 -->
+      <button id="memory" type="button" class="ghost" title="它记住了什么（只读）">记忆</button>
     </header>
 
     <main id="log" aria-live="polite"></main>
@@ -40,6 +43,15 @@
 
     <footer id="foot"></footer>
 
+    <section id="memory-panel" hidden>
+      <div class="memhead">
+        <span class="brand">它记住了什么</span>
+        <span id="memory-note" class="status"></span>
+        <button id="memory-close" type="button" class="ghost">关闭</button>
+      </div>
+      <div id="memory-list" class="memlist"></div>
+    </section>
+
     <div id="tail" aria-hidden="true"></div>
   </div>
 

package/resources/panel/panel.css

@@ -245,6 +245,62 @@ body.ball-happy #ball .face {
   background-image: url('/panel/mascot-happy.png');
 }
 
+/* ---- 被拎起来那一下（6 帧硬切） ----
+
+   按下球时它像被拎住后颈提起、松手落回。**硬切，不做淡入** —— 同上面 ball-happy 那条的理由：
+   换帧本来就是一帧的事，淡入反而像"图片正在加载"。
+
+   按住期间它同时**在被拎着左右摆**（摆动幅度与朝哪一侧偏由 JS 算，见 `renderer.js` 里那一节；
+   晃起来从**按下那一刻**就开始，不必先拖动），松手才停。下面第 1 条同时也是"摆多大都不会被裁"的依据。
+
+   五条规矩，每条都对应一处会静默出错的地方：
+
+   1. **必须写在 `body.ball-happy` 之后**：同特异性时后写的赢，而"正在被拎"比"被捏了一下"
+      更该被看见（按下那一下这两个类同时挂着）。
+   2. **动画期间把虹膜层藏掉**：这五帧的眼睛是画死的，叠上会动的虹膜就是两个瞳仁 ——
+      与忙 / 连不上 / 额度用完那几张同理。
+   3. **动画期间连悬停放大与按下压扁一起停**：帧本身已在逐帧收小（最小那帧比静止帧小 8%），
+      再叠 `scale(1.02)` 与 `:active` 的 `scale(.92)` 就成了缩两回，看起来是"躲开"而不是
+      "被提起来"。这条的选择器特异性高于那两条，所以能压住它们。
+   4. **切帧只换 `background-image`**：不动尺寸、不动位置，所以不会跳。
+   5. **过渡要短（45ms）**：这条 transform 现在不只是"按下那一下的姿势" —— 按住期间它一直在**左右摆**
+      （`dangleTick` 每 16ms 写一个新角度）。90ms 那版是照着"一次性倾斜"写的：一阶滞后在 900ms 的
+      周期上会吃掉约 15% 的幅度、再把画面拖后约 90ms，也就是**看到的比算出来的小一圈**，
+      而这条测试看不见（测试读的是 `--dangle-deg` 这个属性，不是渲染结果）。 */
+body.ball-lift #ball { transform: rotate(var(--dangle-deg, 0deg)); transition: transform 45ms linear; }
+body.ball-lift #ball .iris { display: none; }
+body.ball-lift-up-1 #ball .face { background-image: url('/panel/mascot-lift-up-1.png'); }
+body.ball-lift-up-2 #ball .face { background-image: url('/panel/mascot-lift-up-2.png'); }
+body.ball-lift-up-3 #ball .face { background-image: url('/panel/mascot-lift-up-3.png'); }
+body.ball-lift-up-4 #ball .face { background-image: url('/panel/mascot-lift-up-4.png'); }
+body.ball-lift-up-5 #ball .face { background-image: url('/panel/mascot-lift-up-5.png'); }
+body.ball-lift-up-6 #ball .face { background-image: url('/panel/mascot-lift-up-6.png'); }
+body.ball-lift-down-1 #ball .face { background-image: url('/panel/mascot-lift-down-1.png'); }
+body.ball-lift-down-2 #ball .face { background-image: url('/panel/mascot-lift-down-2.png'); }
+body.ball-lift-down-3 #ball .face { background-image: url('/panel/mascot-lift-down-3.png'); }
+body.ball-lift-down-4 #ball .face { background-image: url('/panel/mascot-lift-down-4.png'); }
+body.ball-lift-down-5 #ball .face { background-image: url('/panel/mascot-lift-down-5.png'); }
+body.ball-lift-down-6 #ball .face { background-image: url('/panel/mascot-lift-down-6.png'); }
+
+/* ---- 挠痒痒（2026-10-02，倾斜已去掉） ----
+
+   鼠标在球身上划过就扭：4 张生图姿势帧循环（只负责表情与爪子的小动作），停下 260ms 收。
+
+   **这里曾经还有一条 `transform: rotate(var(--tickle-deg))`，2026-10-02 去掉了。** 倾斜与"被拎起来"
+   走的是同一个视觉通道（都是 `#ball` 上的 rotate），于是随手扫过看起来像一次小号起飞。用户的报告：
+   「为什么鼠标划动也会晃，而不是在起飞状态才会晃」—— 现在**旋转只归被拎那条**，划过只有帧、不转动。
+   两条规矩：
+
+   1. **必须写在这四条脸规则之后**：同特异性时后写的赢，挠痒痒的姿势要压过空闲脸。
+   2. **藏掉虹膜层**：这 4 帧的眼睛是画死的，叠上会动的虹膜就是两个瞳仁。
+
+   （反向断言在 `test/panel-lift-frames.test.ts`：挠痒痒那块 CSS 里不许再出现 rotate。） */
+body.ball-tickle #ball .iris { display: none; }
+body.ball-tickle-1 #ball .face { background-image: url('/panel/mascot-tickle-1.png'); }
+body.ball-tickle-2 #ball .face { background-image: url('/panel/mascot-tickle-2.png'); }
+body.ball-tickle-3 #ball .face { background-image: url('/panel/mascot-tickle-3.png'); }
+body.ball-tickle-4 #ball .face { background-image: url('/panel/mascot-tickle-4.png'); }
+
 /* ---------------------------------------------------------------- 状态 */
 
 /* 状态的表达**全在那四张脸上**（见上面 `.face` 那几条）：忙=思考、连不上=委屈、
@@ -457,3 +513,58 @@ footer {
   font-size: 12px;
 }
 footer .warn { color: var(--warn); }
+
+
+/* ---- "它记住了什么"（只读） ----
+
+   盖在对话之上的一层：记忆是"关于我"的东西，与某一句问答不同，混进对话流里会让人以为
+   那是这一轮说的话。只读、不经过模型 —— `/api/memory` 只返回数据，页面只渲染。
+   写在整个文件末尾是有意的：那条 reduced-motion 断言看的是它自己那段开头 240 个字符，
+   往前面插规则会把它挤出窗口。 */
+#memory-panel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border-radius: var(--bubble-radius);
+  z-index: 3;
+}
+#memory-panel[hidden] { display: none; }
+.memhead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.memhead .status { flex: 1; }
+.memlist {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.memlist .fact { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
+.memlist .fact p { margin: 0; }
+.memlist .muted { color: var(--dim); font-size: 12px; }
+.memlist .fact .muted { margin-top: 4px; }
+
+/* ---- 答完了高兴一下 + 偶尔眨一下眼（2026-10-04） ----
+
+   两条都由 `renderer.js` 判"什么时候不播"，这里只管长什么样。
+
+   跳：**没有生图帧**，是位移 + 轻微缩放 + 现有的眯眼笑脸 —— 模型画"蹲下去"一定会把身体压扁，
+   而跳本来就只是位移。空中那步的 0.96 不是随手取的：内容到球心 125.25 / 圆半径 128，
+   缩到 0.96 之后才抬得起那 7 像素（120.2 + 7 = 127.2 < 128）。改数之前先重算这条。
+
+   眨眼：2 帧，**眼睛以外与静止帧逐像素相同**（出图后只把眼睛带贴回来），所以藏虹膜层就够，
+   不会整颗球闪一下。 */
+body.ball-hop #ball { transform: translateY(var(--hop-y, 0px)) scale(var(--hop-scale, 1)); transition: transform 95ms ease-out; }
+body.ball-hop-happy #ball .face { background-image: url('/panel/mascot-happy.png'); }
+body.ball-hop #ball .iris { display: none; }
+body.ball-blink #ball .iris { display: none; }
+body.ball-blink-1 #ball .face { background-image: url('/panel/mascot-blink-1.png'); }
+body.ball-blink-2 #ball .face { background-image: url('/panel/mascot-blink-2.png'); }