weflow-cli 1.8.2 → 1.10.0

package/resources/panel/main.cjs

@@ -21,6 +21,17 @@ const { trayMenuTemplate } = require('./tray-menu.cjs')
 const { quickMenuTemplate } = require('./quick-menu.cjs')
 
 const ENDPOINT_FILE = join(os.homedir(), '.weflow-cli', 'assistant_endpoint.json')
+
+// 排查用：`WEFLOW_PANEL_DEBUG_PORT=9333` 时才开一个本机调试口（**默认关**，不设就没有）。
+//
+// 为什么需要它：「球看不见」这类问题我复现不了 —— 透明窗口**截图不可靠**（GDI 抓不到
+// DWM 合成的分层窗口，拍到的往往是它后面的东西），而窗口是不是隐藏、页面算出来的
+// `display`/`hidden` 是什么、有没有 JS 报错，全都在窗口**内部**。前两次只能靠"重启一下"
+// 糊过去，第三次就该有个能问的入口了。开放的是 127.0.0.1 上的 CDP，和 Chrome 的调试口同类。
+const DEBUG_PORT = Number(process.env.WEFLOW_PANEL_DEBUG_PORT || 0)
+if (Number.isInteger(DEBUG_PORT) && DEBUG_PORT > 0) {
+  app.commandLine.appendSwitch('remote-debugging-port', String(DEBUG_PORT))
+}
 const POSITION_FILE = join(os.homedir(), '.weflow-cli', 'panel_position.json')
 const COOKIE_NAME = 'weflow_panel'
 /** 收起时气泡淡出多久。页面照着淡、主进程照着等——**只此一处**，两边不会走散。
@@ -37,6 +48,25 @@ let shortCircuitFailures = 0
  */
 let ballAnchor = { side: 'left', anchorY: 'bottom' }
 
+/**
+ * 半隐（"躲起来"）：球被推到屏幕左/右边松手时，只留 `PEEK_SIZE` 那么宽露在外面。
+ *
+ * 用户要的是一个朴素的桌宠行为：推到边上就藏起来、点一下再出来。三个决定写在明处：
+ *
+ * - **只做左右**：上下贴边在 Windows 上会跟任务栏、窗口贴边打架；而且一个圆球从上下边
+ *   半隐看着像被切了，不像"躲"。
+ * - **半隐时第一次点击只是"出来"，不展开气泡**：藏起来的状态下点它，意思一定是"回来"，
+ *   不是"跟我说话"。点第二下才展开。这条不用通知页面——**页面自己不记形态**（它只发请求、
+ *   照着 `panel:mode` 做），所以不展开就不会有任何状态错位。
+ * - **不持久化**：重启后是正常那张脸、离边 24px。半隐时窗口**整窗贴在边上、完全可见**
+ *   （切边靠图给，窗口不出去），所以记下来的坐标是可达的——重启后球就停在屏幕边上，
+ *   不是不见了。也就是说这件事不需要标志位，也不会出"球丢了"的事故。
+ *
+ * 存的是 `{edge, area}` 而不是只存 edge：恢复要用那块工作区，而半隐时球心虽然还在屏内，
+ * 但按球心去找工作区会拿到"离球心最近的那块"，不如直接记住当时用的是哪块。
+ */
+let hiddenAt = null
+
 /**
  * 跑一条 CLI 命令（目前只用来停助手）。**这里踩过一个坑，写法不能再简化**：
  *
@@ -72,11 +102,39 @@ function spawnCli(cliArgs) {
 // `--ball-size` / `--bubble-width` / `--bubble-gap`（CSS 拿不到 JS 的值），那几份由
 // `test/panel-packaging.test.ts` 断言与本模块的这些值相等。
 const { BALL_SIZE, EDGE_MARGIN, BUBBLE_SIZE, bubbleLayout, ballRectInWindow,
-        defaultBallPosition: defaultBall, clampInto, resolveStartPosition } = require('./ball-position.cjs')
+        defaultBallPosition: defaultBall, clampInto, resolveStartPosition,
+        edgeToHide, hiddenPosition, revealedPosition } = require('./ball-position.cjs')
 
 function workAreas() { return screen.getAllDisplays().map((d) => d.workArea) }
 function primaryWorkArea() { return screen.getPrimaryDisplay().workArea }
 
+/**
+ * 鼠标位置的推送（给"眼珠跟着鼠标"用）。
+ *
+ * **为什么是轮询**：Electron 主进程**没有**鼠标移动事件，只有 `screen.getCursorScreenPoint()`
+ * 这个"主动去问"的 API。所以按固定间隔采样，而且**只在坐标真的变了时**才推一次——
+ * 鼠标不动时一次 IPC 都不发；鼠标在动时也只发十几分之一，剩下的交给渲染进程补间到 60fps。
+ *
+ * 间隔 120ms 是够的：眼珠那边有几百毫秒量级的缓动，采样比它快一截就行，再密只是白耗电。
+ * 窗口不可见或已销毁时**既不采样也不推**（收起来了就没人看，没必要测）。
+ */
+const CURSOR_POLL_MS = 120
+let cursorTimer = null
+let lastCursor = null
+
+function startCursorFeed() {
+  if (cursorTimer) return
+  cursorTimer = setInterval(() => {
+    if (!win || win.isDestroyed() || !win.isVisible()) return
+    const point = screen.getCursorScreenPoint()
+    if (lastCursor && lastCursor.x === point.x && lastCursor.y === point.y) return
+    lastCursor = point
+    win.webContents.send('panel:cursor', { x: point.x, y: point.y })
+  }, CURSOR_POLL_MS)
+  // 别让这个定时器成为"进程还活着的理由"——它只是画面装饰，不该拖着 app 不退
+  if (typeof cursorTimer.unref === 'function') cursorTimer.unref()
+}
+
 /** 小球该在哪儿。**默认放右下角**——从前不给 `x/y`，于是它落在 Windows 顺手给的位置
  * （本机实测 815,418，屏幕中偏左），那不叫"屏幕角落一个球"。 */
 function defaultBallPosition() { return defaultBall(primaryWorkArea(), BALL_SIZE, EDGE_MARGIN) }
@@ -138,6 +196,31 @@ function schedulePositionSave() {
   saveTimer = setTimeout(flushPosition, 400)
 }
 
+/** 拖球松手：贴到左右边就藏进去。没贴边什么都不做。 */
+function maybeHideAtEdge() {
+  if (!ballMode || !win || win.isDestroyed()) return
+  const from = win.getContentBounds()
+  const hit = edgeToHide({ x: from.x, y: from.y }, workAreas())
+  if (!hit) return
+  const to = hiddenPosition({ x: from.x, y: from.y }, hit.edge, hit.area)
+  hiddenAt = { edge: hit.edge, area: hit.area }
+  win.setContentBounds({ x: to.x, y: to.y, width: BALL_SIZE, height: BALL_SIZE })
+  // 换姿势这件事只有主进程知道（它才管窗口贴哪条边），所以由它告诉页面：
+  // 页面照 `ball-peek` / `ball-peek-right` 换成探头那张脸、并摘掉圆角。
+  win.webContents.send('panel:mode', { mode: 'ball', peek: hit.edge, done: true })
+}
+
+/** 从半隐出来：完全露出、留出平时的边距，并记一次位置。 */
+function revealBall() {
+  if (!hiddenAt || !win || win.isDestroyed()) return
+  const from = win.getContentBounds()
+  const to = revealedPosition({ x: from.x, y: from.y }, hiddenAt.edge, hiddenAt.area)
+  hiddenAt = null
+  savePosition(to.x, to.y)
+  win.setContentBounds({ x: to.x, y: to.y, width: BALL_SIZE, height: BALL_SIZE })
+  win.webContents.send('panel:mode', { mode: 'ball', peek: null, done: true })
+}
+
 /** 读端点文件。**任何一种不可信都当没读出来**（同 `src/panel/endpoint.ts` 的纪律） */
 function readEndpoint() {
   try {
@@ -272,7 +355,21 @@ async function buildWindow() {
  * （`fade` → 页面开始淡出；`done` → 页面换成球形态），因为窗口要等淡完才能缩，而页面
  * 要等窗口缩完才能把气泡摘掉——晚一帧就会在球那 96x96 的窗口里看见一条气泡的边。
  */
-function setMode(mode, opts) {
+/**
+ * 等渲染进程真的画完一帧。
+ *
+ * **不能只 `setTimeout`**：那是猜它画完了没有，机器忙的时候会猜错 —— 而猜错的后果就是退回成
+ * "球先闪一下"那个原始 bug。`executeJavaScript` 能把页面里 rAF 的结果等回来；再加一个上限，
+ * 页面没就绪时宁可漏一次（球闪一下）也不能把展开卡住。
+ */
+function nextPaint(target, timeoutMs = 120) {
+  const painted = target.webContents
+    .executeJavaScript('new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r(1))))')
+    .catch(() => 1)
+  return Promise.race([painted, new Promise((resolve) => setTimeout(resolve, timeoutMs))])
+}
+
+async function setMode(mode, opts) {
   if (!win) return
   const chat = mode === 'chat'
 
@@ -293,8 +390,25 @@ function setMode(mode, opts) {
     ballAnchor = { side: layout.side, anchorY: layout.anchorY }
     win.setAlwaysOnTop(false)     // 对话时不必压着别的窗口
     win.setSkipTaskbar(false)
+    win.setResizable(true)        // 展开后可调大小（要在 setContentBounds 之前，见函数开头那段）
+
+    // **先摆锚、等页面画完，最后才改窗口尺寸。**（2026-09-29 用户报"点一下球先闪到别处再闪回来"）
+    //
+    // 顺序反过来就是那个 bug：窗口先变大的那一两帧里，球还按**旧锚**画 —— 而球的锚在展开后
+    // 要换角（气泡在上方时球得钉在窗口上缘、气泡在右边时球得钉在左缘），默认锚是"右下"。
+    // 于是球被画在新窗口的另一个角上：实测纵向差 (气泡高 − 球高)，肉眼就是"跳一下再回来"。
+    //
+    // 折叠那条路早就是这么做的（先把 `panel:mode` 发出去，等一帧再缩窗口，见下面 shrink 那段），
+    // 展开这条漏了同一件事 —— 两半本来就该对称。
+    //
+    // 为什么要发**两条**消息：第一条只摆锚（`anchorOnly`），第二条才切形态。切早了气泡会显出来，
+    // 而那会儿窗口还是 96px，气泡正好盖住球 —— 那是同一个坑的另一面。
+    win.webContents.send('panel:mode', {
+      mode: 'chat', side: layout.side, anchorY: layout.anchorY,
+      bubbleHeight: layout.bubbleHeight, anchorOnly: true,
+    })
+    await nextPaint(win)
     win.setContentBounds(layout.window)
-    win.setResizable(true)        // 展开后可调大小
     // **展开之后要自己走到前面来。** 对话形态按设计不置顶，而"谁在最前面"此前完全靠运气：
     // 右键那条路尤其明显——球是置顶的、看得见，可原生菜单一关，Windows 可能把焦点还给了
     // 别的窗口，于是候选出在一个被压在后面的窗口里，用户的原话是"不知道消息返回到哪里了"。
@@ -377,7 +491,18 @@ if (!app.requestSingleInstanceLock()) {
   app.on('second-instance', () => { win?.show(); win?.focus() })
 
   app.whenReady().then(async () => {
-    ipcMain.handle('panel:setMode', (_event, mode, opts) => setMode(mode, opts))
+    // 眼珠跟着鼠标：主进程按 120ms 采样光标、只在变化时推。**不收发凭据、不出机器**。
+    startCursorFeed()
+
+    ipcMain.handle('panel:setMode', (_event, mode, opts) => {
+      // 半隐时**第一次点击只是"出来"**，不展开气泡（理由见 `hiddenAt` 那段注释）。
+      // 页面不记形态，所以这一次不展开不会留下任何不一致。
+      if (hiddenAt) {
+        revealBall()
+        return { revealed: true }
+      }
+      return setMode(mode, opts)
+    })
 
     // 右键"快速回复"。**用原生菜单**：它画在窗口外面，所以球那个小窗口不用先展开
     // （页内菜单做不到这一点——它会被窗口裁掉）。选中回一个名字，关掉没选回 null。
@@ -403,6 +528,9 @@ if (!app.requestSingleInstanceLock()) {
     let dragOrigin = null
     ipcMain.handle('panel:dragStart', (_event, point) => {
       if (!win || win.isDestroyed()) return null
+      // 拖一个藏着的球 = 把它拉出来。**必须在读 bounds 之前**：`revealBall` 会挪窗口，
+      // 而下面的 `dragOrigin` 是拿窗口位置算的——先挪再记，球才不会在光标底下跳一下。
+      revealBall()
       const from = win.getContentBounds()
       // **尺寸也在这里记一次**（不只是位置）。理由见 dragMove 那段注释：
       // 每次移动去读"当前尺寸"会在**可缩放**的窗口上让尺寸跟着位移一起长。
@@ -434,7 +562,11 @@ if (!app.requestSingleInstanceLock()) {
       })
       return null
     })
-    ipcMain.handle('panel:dragEnd', () => { dragOrigin = null; return null })
+    ipcMain.handle('panel:dragEnd', () => {
+      dragOrigin = null
+      maybeHideAtEdge()      // 松手时贴到左右边就藏进去
+      return null
+    })
     ipcMain.handle('panel:info', () => ({ daemonRunning: !!readEndpoint(), endpointFile: ENDPOINT_FILE }))
     /**
      * 凭据失效时自愈：重读端点文件（守护进程每次启动都换 token），刷新 cookie 并重载。

package/resources/panel/panel.css

@@ -104,7 +104,7 @@ header {
      浏览器降级那条路靠这条 `display: none` 永远看不见球（那一侧 `hidden` 属性也还在）。 */
   display: none;
   /* 固定尺寸、钉在窗口的某个角上（下面的 shell 规则给角）：**尺寸不跟着窗口长**，
-     否则展开过程中会看到一只被拉成巨型的猫。球形态下窗口就是 76×76，铺满即整窗。 */
+     否则展开过程中会看到一只被拉成巨型的猫。球形态下窗口就是 96×96（= `--ball-size`），铺满即整窗。 */
   position: fixed;
   width: var(--ball-size);
   height: var(--ball-size);
@@ -116,7 +116,7 @@ header {
   /* **不要在这里写 `-webkit-app-region: drag`**：Windows 上拖拽区会吞掉鼠标事件，
      页面收不到 click，球就点不开了（实测的故障就是这个）。拖动自己实现，见 renderer.js。 */
 
-  /* 球本身**没有底色**：下面那层 `.glow` 才是"背景"，上面 `.face` 是吉祥物。
+  /* 球本身**没有底色**（`.glow` 那层已在 2026-09-29 删掉，现在球上只有吉祥物这一层）。
      **换 `mascot.png` 时：内容必须全部落在内切圆里。** 球（连 `.face` 自己）都是
      `border-radius: 50%`，图会被裁成圆的——而这张图的内容一向是**铺满画布**的
      （2026-09-27 那版源图 1254²，内容占 98%），直接铺上去，角上的东西就没了：
@@ -156,31 +156,69 @@ body.shell.bubble-right #ball { right: auto; left: 0; }
 body.shell.anchor-top #ball { bottom: auto; top: 0; }
 #ball > span { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
 
-#ball .glow {
-  background: none;
-}
+/* **球背后什么都没有**（2026-09-29 彻底去掉）。
 
-/* 光晕**只在有状态时画出来**。做成软边光晕而不是硬边圆盘：硬边就又回到"一只盘子"了，
-   而软边在浅底与深底上都只是"猫身后的一团光"，不需要再靠一圈亮环去定边界。 */
-body.busy #ball .glow,
-body.offline #ball .glow,
-body.quota #ball .glow {
-  background:
-    radial-gradient(circle at 50% 46%,
-      hsl(var(--hue) 82% 58% / .95) 0%,
-      hsl(calc(var(--hue) + 26) 78% 46% / .78) 38%,
-      hsl(calc(var(--hue) + 44) 70% 38% / .32) 62%,
-      transparent 78%);
-}
+   这条线索两进两退，都记在这里，免得再来一次：
+   - 最早这层**一直**亮着（用户当初要的"会变动的背景"）；
+   - 2026-09-26 缩到"只在有状态时画"，理由写的是"球背后永远有一圈彩色圆盘，'这张图是
+     透明的'根本看不出来"；
+   - 2026-09-29 用户**又提了一次一模一样的话**（"思考的时候背景不是透明的"）—— 剩下的
+     就是"忙"时那一圈。同一个意见提两次，说明它要的不是"少画一点"，是**不要**。
+   所以整层拿掉：元素、三条状态规则、`--hue`、`drift` 与 `breathe` 两个动画一起删。
+
+   **状态灯没有丢**：四个状态本来就各有一张脸（忙=思考、连不上=委屈、额度用完=累、
+   空闲=原图），那才是主信号；光晕只是"余光能看见"的补充。想再要一个不占背景的提示，
+   应该做成**外圈**（`box-shadow` 之类画在球外面），而不是再往猫背后放一层盘子。 */
 
-/* 上面那层：吉祥物本体，形状不变 */
+/* 上面那层：吉祥物本体，形状不变。
+   **注意是 `mascot-base.png` 而不是 `mascot.png`**：前者是把虹膜挖掉的版本（挖掉的地方填成
+   眼白），专门给"眼球跟着鼠标动"用的；后者眼球是画死的，拿它当底会看到两个瞳仁
+   （一个跟着动、一个不动）。两张图零偏移叠起来与原图**逐像素相同**，所以换底不改变外观。 */
 #ball .face {
-  background-image: url('/panel/mascot.png');
+  background-image: url('/panel/mascot-base.png');
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* 虹膜层：**唯一会动的那一层**，`renderer.js` 按鼠标方向给它 translate。
+   与 `.face` 同一张画布（256²）铺满，所以偏移量给对了它就还在原来的位置上。
+   只动 transform —— 合成器直接做，不重排、不重绘；这是这个效果几乎不耗电的原因。 */
+#ball .iris {
+  background-image: url('/panel/mascot-iris.png');
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
+  will-change: transform;
 }
 
+/* **另外四张脸的眼睛是画死的**（瞳孔与高光都在图上），往上叠一层会动的虹膜就会看到
+   两个瞳仁。所以那几张脸出现时把虹膜层藏掉 —— 于是球只在"空闲"和"被捏"两种情况下有眼神，
+   忙 / 连不上 / 额度用完时不动。**这是刻意的**：那三种状态本来就该用整张脸说话，
+   而且它们恰恰是"不空闲"的时候，眼睛还在追着鼠标看反而不对。 */
+body.busy #ball .iris,
+body.offline #ball .iris,
+body.quota #ball .iris,
+body.ball-happy #ball .iris { display: none; }
+
+/* ---- 半隐：躲在屏幕边后面探头（`mascot-peek.png`） ----
+
+   这张图的左边**是一条笔直的切边**（内容贴着画布 x=0），放上去时窗口的左边就是屏幕的边，
+   于是看着就像猫被显示器边框挡住了。两条随之而来的规矩：
+
+   1. **必须去掉球的圆角**：`border-radius: 50%` 会把那条直切边剪成一段弧，一看就露馅。
+   2. **悬停不许放大**：`scale(1.02)` 会让切边离开屏幕边 1%（在 96px 上是 1px）——那 1px
+      就是一条缝。所以半隐时把放大那两条关掉。
+
+   右边那张**不另存素材**，把同一张水平镜像即可。 */
+body.ball-peek #ball { border-radius: 0; }
+body.ball-peek #ball .face { background-image: url('/panel/mascot-peek.png'); }
+body.ball-peek-right #ball .face { transform: scaleX(-1); }
+/* 这张脸的眼睛是画死的（同忙/累那几张），叠会动的虹膜就是两个瞳仁 */
+body.ball-peek #ball .iris { display: none; }
+body.ball-peek #ball:hover,
+body.ball-peek #ball:active { transform: none; }
+
 /* 三个**真状态**各有一张脸：忙（思考中）、连不上时委屈、额度用完时累。
    接的全是现成的状态类（`setBallState` 早就挂 busy/offline/quota 了），**不新增状态机**；
    光晕照旧画——它是"余光能看见"的环境灯，表情是盯着看才见的细节，两者说的是同一件事，
@@ -207,54 +245,72 @@ body.ball-happy #ball .face {
   background-image: url('/panel/mascot-happy.png');
 }
 
-/* 色相流动 —— 现在只在**忙碌**时跑（空闲时那一层根本不画）。
-   8 秒一圈由 `body.busy` 那条给；色相本身只是被 `drift` 驱动的数值。 */
-@property --hue { syntax: '<number>'; inherits: true; initial-value: 224; }
-#ball { --hue: 224; }
-@keyframes drift {
-  0%   { --hue: 224; }        /* 蓝 */
-  25%  { --hue: 268; }        /* 紫 */
-  50%  { --hue: 316; }        /* 品红 */
-  75%  { --hue: 190; }        /* 青 */
-  100% { --hue: 224; }
-}
-
-/* **空闲时球后面什么都没有**（2026-09-26 改）。
-
-   这一层原来一直亮着，那是用户当初要的"会变动的背景"。但两个代价在用过之后才显出来：
-   球背后永远有一圈彩色圆盘，**"这张图是透明的"这件事根本看不出来**；而它同时兼着状态灯，
-   一直亮着就等于没有状态灯——离线、忙碌、额度用完，球长得都一样。
-
-   现在：**静止 = 只有猫，亮起来 = 有话说**。这是那条需求的**范围缩小，不是取消**——
-   色相流动还在，只是改在忙碌时发生（下面那条）。 */
+/* ---- 被拎起来那一下（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'); }
 
 /* ---------------------------------------------------------------- 状态 */
 
-/* 正在想事情：光晕变亮、转得快，并且轻轻呼吸。
-   这一条的用处不只是好看——球收起来的时候，此前**完全看不出它在干活**。 */
-body.busy #ball .glow {
-  /* 8 秒转一圈色相（不是 3 秒）：呼吸的节奏交给 1.5s，色相再快就变成闪了 */
-  animation: drift 8s linear infinite, breathe 1.5s ease-in-out infinite;
-}
-@keyframes breathe {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.08); opacity: .82; }
-}
-
-/* 连不上 / 出错：换成暖色并停住流动——不动的东西才会被注意到 */
-body.offline #ball { --hue: 12; }
-body.offline #ball .glow { animation: none; opacity: .9; }
-
-/* 今天的额度用完了：琥珀色 */
-body.quota #ball { --hue: 38; }
-body.quota #ball .glow { animation: none; opacity: .85; }
+/* 状态的表达**全在那四张脸上**（见上面 `.face` 那几条）：忙=思考、连不上=委屈、
+   额度用完=累、空闲=原图。原先这里还有一层会变色/呼吸的光晕，2026-09-29 按用户要求
+   整层去掉了——理由写在上一条注释里（同一个意见提了两次）。 */
 
 /* 系统说"减少动态效果"就照办：停掉所有流动，只留静止的光晕。
    展开/收起那两段也一起停（下面那几条，**写在原来那条之后**——测试盯的是这一段开头
    240 个字符里就有 `animation: none`，把新规则插在前面会把它挤出窗口）。 */
 @media (prefers-reduced-motion: reduce) {
-  #ball .glow,
-  body.busy #ball .glow { animation: none; }
   body.mode-chat #bubble { animation: none; }
   body.mode-chat.closing #bubble { animation: none; opacity: 0; }
   #ball { transition: none; }
@@ -345,6 +401,41 @@ main {
 
 /* 助手回答下的复制按钮。**常显**而不是 hover 才出现：这是个常驻小窗，
    鼠标常常不在它上面，hover 等于没有。做得很淡，不跟正文抢注意力。 */
+/* "思考过程"：挂在助手那条回答下面，**默认折叠**。
+   摊开会把每次回答都变成一屏日志，而不想看的人还得滚过它；想核对"它到底查没查"的人
+   点一下展开。视觉上刻意压暗压小——它是附注，不是回答的一部分。 */
+.thinking {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--dim);
+}
+.thinking > summary {
+  cursor: pointer;
+  list-style: none;            /* 默认那个三角在深色底上很难看，自己画一个 */
+  user-select: none;
+}
+.thinking > summary::before {
+  content: '▸ ';
+  display: inline-block;
+  transition: transform .12s ease;
+}
+.thinking[open] > summary::before { transform: rotate(90deg); }
+.thinking > summary:hover { color: var(--text); }
+.thinking-line {
+  margin: 4px 0 0 14px;
+  font-family: ui-monospace, Consolas, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  opacity: .85;
+}
+/* 模型真返回的推理内容（多数模型不给，所以这一段常常根本不出现） */
+.thinking-reasoning {
+  border-left: 2px solid var(--line);
+  padding-left: 8px;
+  font-family: inherit;
+  opacity: .75;
+}
+
 .turn .copy {
   display: block;
   margin-top: 6px;
@@ -422,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'); }

package/resources/panel/preload.cjs

@@ -73,7 +73,33 @@ contextBridge.exposeInMainWorld('weflowPanel', {
       anchorY: payload && payload.anchorY === 'top' ? 'top' : 'bottom',
       bubbleHeight: clampInt(payload && payload.bubbleHeight, 10000, 1),
       fadeMs: clampInt(payload && payload.fadeMs, 2000),
+      // 半隐：'left' / 'right' / null（null = 正常那张脸）。只认这两个字符串，
+      // 别的一律当 null —— 和上面几个字段同一条规矩，不把主进程给的东西原样透传。
+      peek: payload && (payload.peek === 'left' || payload.peek === 'right') ? payload.peek : null,
       done: !!(payload && payload.done),
     }))
   },
+  /**
+   * 鼠标在**屏幕**上的位置，用来做"眼珠跟着鼠标"。
+   *
+   * **为什么必须由主进程给**：球只有 96×96，鼠标绝大多数时间在窗口**外面**，
+   * 渲染进程的 `mousemove` 收不到任何东西。`screen.getCursorScreenPoint()` 只有主进程有。
+   * 主进程按固定间隔采样、**只在坐标变了的时候**推一次（见 main.cjs 那段）。
+   *
+   * 载荷照上面的规矩收窄：两个整数、夹进屏幕坐标的合理范围；坏载荷**直接丢掉**，
+   * 不交给页面。它只在**本机进程内**走（主进程 → 这个窗口的渲染进程），不出机器、不进日志。
+   */
+  onCursor: (cb) => {
+    if (typeof cb !== 'function') return
+    const clamp = (value) => {
+      const n = Math.round(Number(value))
+      return Number.isFinite(n) ? Math.min(Math.max(n, -32768), 32767) : null
+    }
+    ipcRenderer.on('panel:cursor', (_event, payload) => {
+      const x = clamp(payload && payload.x)
+      const y = clamp(payload && payload.y)
+      if (x === null || y === null) return
+      cb({ x, y })
+    })
+  },
 })