補上遺漏的氣泡標題列

摘要：整理記憶中、需要你授權、工具失敗、錯誤訊息、一般通知、掰掰這六個氣泡補上第一行標題。根本原因：上一版把氣泡改成兩行時，是以「原本帶（專案名）尾綴」為線索去改呼叫點，但這六個訊息本來就沒有尾綴，所以整批漏掉，顯示出來只有單行、沒有專案或對話名稱。影響：壓縮記憶、等授權、出錯這些最需要知道是哪個 session 的時候，反而看不到來源。修法： - handleEvent 內六個 say() 補上 title 參數。 - 選單「動作測試」的氣泡給標題「動作測試」，才分得出是測試不是真的事件。 - first-awake 的「嗨，我是〈寵物名〉」維持沒有標題：它不屬於任何 session，訊息本身已含寵物名，CSS 的 :empty 會把空標題整行收起來，不會留空白。驗證：以 DOM stub 載入完整 renderer.js 驅動 handleEvent，11 項全過： PreCompact 的標題與訊息、其餘五個補上的事件都帶標題、原本就有的「完成」仍正常、對話名稱優先於專案名、無 cwd 也無對話名時標題為空字串、滑鼠停留提示為兩行。另以靜態掃描確認 handleEvent 內全部 13 個 say() 都帶 title，並在打包後的 app.asar 上重跑同一項掃描。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
修正有時候卡住無法拖曳：點穿狀態改由主程序輪詢驅動
2026-08-24 14:06:50 +08:00 · 2026-08-24 13:51:28 +08:00 · 2026-08-24 12:09:01 +08:00
8 changed files with 118 additions and 45 deletions
@@ -40,7 +40,7 @@
 - **真正的桌面寵物** — 透明、無邊框、永遠置頂；透明區域**點穿**，只有壓在人物像素上滑鼠才會被吃掉，不擋你操作底下的視窗。
 - **不搶焦點** — 視窗設為 non-focusable，點她不會讓終端機失焦。
 - **拖曳 / 點擊 / 右鍵** — 拖曳時依方向播 running-left / running-right 並記住位置；點一下揮手；右鍵或系統匣開選單。
- **對話氣泡** — 完成、需要授權、有問題要問你、工具失敗、整理記憶中……一眼看出 Claude Code 在等什麼。
+- **對話氣泡（兩行）** — 第一行是**對話名稱**（`/rename` 設的）或專案資料夾名，第二行才是訊息。同時開多個 session 時一眼就知道是哪一個在叫你。
 - **工作中即時播報** — 氣泡會顯示正在用的工具與對象（`⚙️ 執行 npm run dist`、`📖 讀 renderer.js`），以及助理剛說的那句話（`💬 …`）。**注意：這不是思考過程**，原因見[能顯示什麼、不能顯示什麼](#能顯示什麼不能顯示什麼)。
 - **多 session** — 同時開好幾個 Claude Code 時，以 `waiting > running > review > idle` 的優先序顯示最需要你注意的那個。
 - **Codex 寵物自動出現** — 預設也掃描 `~/.codex/pets`，Codex hatch 出來的寵物直接在選單裡切換。
@@ -211,6 +211,8 @@ Spritesheet：**1536 × 2288**，8 欄 × 11 列，每格 **192 × 208**，透

 事件紀錄：`%USERPROFILE%\.claude-pet\events.log`（超過 2 MB 自動清空）。

+氣泡的第一行是對話名稱或專案名，第二行是訊息；標題為空時整行會收起來，不會留空白。
+
 ## 架構與檔案

 ```
@@ -239,7 +241,7 @@ Claude Code ──hook（stdin JSON）──▶ hook/claude-pet-hook.js ──PO

 設計重點：

- **點穿**：視窗預設 `setIgnoreMouseEvents(true, { forward: true })`，renderer 在 mousemove 時讀 canvas 該點 alpha（或是否在氣泡上）來即時切換，所以透明處永遠點得到底下的視窗。
+- **點穿**：視窗預設 `setIgnoreMouseEvents(true, { forward: true })`，renderer 讀 canvas 該點的 alpha（或是否壓在氣泡上）來即時切換，所以透明處永遠點得到底下的視窗。判定的座標有兩個來源：renderer 自己的 mousemove，以及**主程序每 50 ms 的游標輪詢**。後者是必要的——視窗處於點穿狀態時 Electron 的 `forward` 不保證會把 mousemove 轉發進來（游標直接跳到寵物上常常收不到），只靠 mousemove 會在「游標還停在寵物身上時進入點穿」之後再也收不到事件，變成永遠卡在點穿、按不下去也拖不動。另外每一格畫完也會用最後已知座標重驗一次，因為換格會改變游標底下的像素。
 - **拖曳**：由主程序用 `screen.getCursorScreenPoint()` 每 16 ms 更新視窗位置，游標離開視窗也不會掉；方向由水平位移決定。
 - **行為邏輯以 Codex 為準**，細節見[與 Codex 的對照](#與-codex-的對照)。
 - **顯示尺寸與 sprite 來源尺寸分開**：`CELL_W/CELL_H`（192 × 208）只用來從 spritesheet 取格子，畫到畫面上的是 `PET_W/PET_H`（126 × 137，Codex 的 mascot 尺寸）。視窗寬度另有 `MIN_WIN_W = 240` 的下限，免得寵物變小後氣泡被截掉。
@@ -264,6 +266,14 @@ Claude Code ──hook（stdin JSON）──▶ hook/claude-pet-hook.js ──PO
 |---|---|---|
 | 工具動作 | `⚙️ 執行 npm run dist`、`📖 讀 renderer.js` | hook 的 `tool_name` 與 `tool_input` |
 | 助理說明 | 助理剛講那段話的第一句 | 由 `transcript_path` 讀 transcript 尾端的 `text` 區塊 |
+| 氣泡標題 | 對話名稱，沒設就用專案資料夾名 | transcript 的 `custom-title`（`/rename` 寫進去的），退回 `cwd` 的最後一段 |
+
+氣泡長這樣：
+
+```
+claude-pet
+💬 兩行氣泡正確運作，這是真實事件。
+```

 同一段說明只播報一次（以 transcript 的 uuid 判斷），markdown 標記會先清掉，
 等待授權時不播報以免蓋掉固定氣泡。讀 transcript 只讀最後 192 KB 並依檔案大小快取，
@@ -99,16 +99,19 @@ function appendLog(line) {
 // Claude Code 從 2.1.238 起不再把 thinking 的文字寫進 transcript（只剩加密簽章），
 // 但助理的可見說明（text 區塊）還在。讀檔尾就夠了，transcript 會長到好幾 MB。
 const TRANSCRIPT_TAIL = 192 * 1024;
-const narrationCache = new Map();   // path → { size, id, text }
+const narrationCache = new Map();   // path → { size, value }

-function latestNarration(file) {
+// 回傳 { narration: { id, text } | null, title: string | null }
+// title 取自 /rename 寫進 transcript 的 custom-title，沒有就讓呼叫端退回專案名
+function readTranscript(file) {
  if (typeof file !== "string" || !file) return null;
  let stat;
  try { stat = fs.statSync(file); } catch { return null; }
  const cached = narrationCache.get(file);
  if (cached && cached.size === stat.size) return cached.value;

-  let value = null;
+  let narration = null;
+  let title = null;
  try {
    const start = Math.max(0, stat.size - TRANSCRIPT_TAIL);
    const fd = fs.openSync(file, "r");
@@ -117,24 +120,29 @@ function latestNarration(file) {
    fs.closeSync(fd);
    const lines = buf.toString("utf8").split("\n");
    if (start > 0) lines.shift();   // 第一行多半被切一半
-    for (let i = lines.length - 1; i >= 0; i--) {
+    // 由後往前找，先遇到的就是最新的；兩樣都拿到就停
+    for (let i = lines.length - 1; i >= 0 && !(narration && title); i--) {
      const line = lines[i].trim();
      if (!line) continue;
      let entry;
      try { entry = JSON.parse(line); } catch { continue; }
-      if (entry.type !== "assistant") continue;
+      if (!title && entry.type === "custom-title" && typeof entry.customTitle === "string" && entry.customTitle.trim()) {
+        title = entry.customTitle.trim().slice(0, 60);
+        continue;
+      }
+      if (narration || entry.type !== "assistant") continue;
      const content = entry.message?.content;
      if (!Array.isArray(content)) continue;
      for (const block of content) {
        if (block?.type === "text" && typeof block.text === "string" && block.text.trim()) {
-          value = { id: entry.uuid || entry.timestamp || String(i), text: block.text.trim().slice(0, 400) };
+          narration = { id: entry.uuid || entry.timestamp || String(i), text: block.text.trim().slice(0, 400) };
          break;
        }
      }
-      if (value) break;
    }
  } catch { /* 讀不到就算了，寵物不該因此出錯 */ }

+  const value = { narration, title };
  narrationCache.set(file, { size: stat.size, value });
  if (narrationCache.size > 32) narrationCache.delete(narrationCache.keys().next().value);
  return value;
@@ -320,11 +328,19 @@ function endDrag(save) {

 function startCursorPolling() {
  cursorTimer = setInterval(() => {
-    if (!win || !config.followCursor || dragTimer) return;
+    if (!win || dragTimer) return;
    const p = screen.getCursorScreenPoint();
    if (p.x === lastCursor.x && p.y === lastCursor.y) return;
    lastCursor = p;
    const b = win.getBounds();
+    // 點穿判定不能只靠 renderer 的 mousemove。視窗處於點穿狀態時，Electron 的
+    // setIgnoreMouseEvents(true, { forward: true }) 並不保證一定會把 mousemove 轉發進來
+    // （游標直接跳到寵物上常常收不到，慢慢移過去才會）。一旦在游標還停在寵物身上時
+    // 進入點穿，就再也收不到事件、ignoringMouse 永遠是 true，滑鼠按下也傳不進視窗
+    // → 就是「有時候卡住無法拖曳」。主程序自己輪詢絕對不會漏，所以改由這裡把
+    // 視窗相對座標送過去，讓 renderer 重新做一次判定。
+    send("pet:cursor-pos", { x: p.x - b.x, y: p.y - b.y });
+    if (!config.followCursor) return;
    const cx = b.x + b.width / 2;
    const cy = b.y + BUBBLE_H + (PET_H * config.scale) / 2; // 人物方框的中心，與 Codex 相同
    send("pet:cursor", { dx: p.x - cx, dy: p.y - cy });
@@ -346,10 +362,13 @@ function startServer() {
        try { payload = JSON.parse(body || "{}"); } catch { /* bad json */ }
        if (payload && typeof payload === "object") {
          appendLog(JSON.stringify(payload));
-          const narration = latestNarration(payload.transcriptPath);
-          if (narration) {
-            payload.narration = narration.text;
-            payload.narrationId = narration.id;
+          const info = readTranscript(payload.transcriptPath);
+          if (info) {
+            if (info.narration) {
+              payload.narration = info.narration.text;
+              payload.narrationId = info.narration.id;
+            }
+            if (info.title) payload.sessionTitle = info.title;
          }
          send("pet:event", payload);
          res.writeHead(204);
@@ -1,12 +1,12 @@
 {
  "name": "claude-pet",
-  "version": "2.0.4",
+  "version": "2.0.7",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "claude-pet",
-      "version": "2.0.4",
+      "version": "2.0.7",
      "devDependencies": {
        "electron": "^43.4.1",
        "electron-builder": "^26.0.12"
@@ -1,6 +1,6 @@
 {
  "name": "claude-pet",
-  "version": "2.0.4",
+  "version": "2.0.7",
  "description": "Codex Pets 相容的 Claude Code 桌面寵物（spriteVersionNumber 2：9 個動作列 + 16 方向追視）",
  "main": "main.js",
  "private": true,
@@ -20,6 +20,7 @@ const ON = new Set([
  "pet:settings",
  "pet:event",
  "pet:cursor",
+  "pet:cursor-pos",
  "pet:drag-move",
 ]);

@@ -8,7 +8,7 @@
 </head>
 <body>
  <div id="stage">
-    <div id="bubble" class="hidden"><span id="bubble-text"></span></div>
+    <div id="bubble" class="hidden"><span id="bubble-title"></span><span id="bubble-text"></span></div>
    <canvas id="sprite" width="126" height="137"></canvas>
  </div>
  <script src="renderer.js"></script>
@@ -76,6 +76,7 @@ const TOOL_LABELS = {
 const canvas = document.getElementById("sprite");
 const ctx = canvas.getContext("2d", { willReadFrequently: true });
 const bubble = document.getElementById("bubble");
+const bubbleTitle = document.getElementById("bubble-title");
 const bubbleText = document.getElementById("bubble-text");

 let sheet = null;
@@ -149,6 +150,7 @@ let bubbleTimer = null;
 let bubbleSticky = false;
 let ignoringMouse = true;
 let hovered = false;          // 游標是否壓在人物的不透明像素上
+let lastPoint = null;         // 最後已知的游標位置（視窗相對），主程序輪詢或 mousemove 都會更新
 let pressed = null;
 let lastReported = "";

@@ -347,18 +349,23 @@ function shortTarget(target, toolName) {
  return t.slice(0, 44);
 }

+// 氣泡第一行：對話名稱（/rename 設的）優先，其次專案資料夾名
+function bubbleTitleOf(p, cwd) {
+  return p.sessionTitle || projectName(cwd) || "";
+}
+
 // 有什麼就顯示什麼：優先顯示新的助理說明，否則顯示正在用的工具
-function sayActivity(p) {
+function sayActivity(p, title) {
  if (baseState() === "waiting") return;   // 別蓋掉在等授權的固定氣泡
  if (p.narration && p.narrationId && p.narrationId !== lastNarrationId) {
    lastNarrationId = p.narrationId;
-    say(`💬 ${firstSentence(p.narration)}`, ACTIVITY_MS);
+    say(`💬 ${firstSentence(p.narration)}`, ACTIVITY_MS, false, title);
    return;
  }
  if (!p.toolName) return;
  const label = TOOL_LABELS[p.toolName] || `🔧 ${p.toolName}`;
  const detail = p.toolName === "Task" && p.agentType ? p.agentType : p.toolTarget;
-  say(detail ? `${label} ${shortTarget(detail, p.toolName)}` : label, ACTIVITY_MS);
+  say(detail ? `${label} ${shortTarget(detail, p.toolName)}` : label, ACTIVITY_MS, false, title);
 }

 function projectName(cwd) {
@@ -368,10 +375,12 @@ function projectName(cwd) {

 // ---------- 氣泡 ----------

-function say(text, ms, sticky = false) {
+// title 是第一行（對話名稱或專案名），text 是第二行
+function say(text, ms, sticky = false, title = "") {
  clearTimeout(bubbleTimer);
+  bubbleTitle.textContent = title || "";
  bubbleText.textContent = text;
-  bubble.title = text;
+  bubble.title = title ? `${title}\n${text}` : text;
  bubble.classList.remove("hidden");
  bubbleSticky = sticky;
  if (ms > 0) bubbleTimer = setTimeout(hideBubble, ms);
@@ -390,14 +399,13 @@ function handleEvent(p) {
  if (p.event === "__test") return handleTest(p);

  const s = session(p.sessionId, p.cwd);
-  const proj = projectName(s.cwd);
-  const suffix = proj ? `（${proj}）` : "";
+  const title = bubbleTitleOf(p, s.cwd);

  switch (p.event) {
    case "SessionStart":
      setState(s, "idle");
      // Codex 的 waving 只在寵物第一次醒來（first-awake），新 thread 不會揮手；這裡只留資訊氣泡
-      if (!p.source || p.source === "startup") say(`👋 嗨！${suffix}`, 3000);
+      if (!p.source || p.source === "startup") say("👋 嗨！", 3000, false, title);
      break;
    case "UserPromptSubmit":
      setState(s, "running");
@@ -406,13 +414,13 @@ function handleEvent(p) {
    case "PreToolUse":
      if (p.toolName === "AskUserQuestion") {
        setState(s, "waiting");
-        say(`❓ 有問題想問你${suffix}`, 0, true);
+        say("❓ 有問題想問你", 0, true, title);
      } else if (p.toolName === "ExitPlanMode") {
        setState(s, "waiting");
-        say(`📋 計畫等你確認${suffix}`, 0, true);
+        say("📋 計畫等你確認", 0, true, title);
      } else {
        setState(s, "running");
-        sayActivity(p);
+        sayActivity(p, title);
      }
      break;
    case "PostToolUse":
@@ -421,25 +429,25 @@ function handleEvent(p) {
    case "PostToolUseFailure":
      // Codex：單一工具失敗不會改變 turn 的狀態（turn 還在跑），寵物維持 running，只給個氣泡
      setState(s, "running");
-      say(`😵 ${p.toolName || "工具"} 失敗了`, 4000);
+      say(`😵 ${p.toolName || "工具"} 失敗了`, 4000, false, title);
      break;
    case "PermissionRequest":
      setState(s, "waiting");
-      say(`🔐 需要你授權${p.toolName ? `：${p.toolName}` : ""}`, 0, true);
+      say(`🔐 需要你授權${p.toolName ? `：${p.toolName}` : ""}`, 0, true, title);
      break;
    case "Notification": {
      const t = p.notificationType;
      if (t === "permission_prompt") {
        setState(s, "waiting");
-        say(`🔐 需要你授權${suffix}`, 0, true);
+        say("🔐 需要你授權", 0, true, title);
      } else if (t === "idle_prompt") {
        // Codex 的 waiting 只對應授權、提問、計畫確認；單純等你下指令不算，狀態不變
-        say(`💤 在等你回覆${suffix}`, 4000);
+        say("💤 在等你回覆", 4000, false, title);
      } else if (t === "elicitation_dialog") {
        setState(s, "waiting");
-        say(`❓ 有問題想問你${suffix}`, 0, true);
+        say("❓ 有問題想問你", 0, true, title);
      } else if (p.message) {
-        say(`💬 ${p.message}`, 4000);
+        say(`💬 ${p.message}`, 4000, false, title);
      }
      break;
    }
@@ -448,12 +456,12 @@ function handleEvent(p) {
      // Codex：turn 完成且未讀 → review（播 review 3 次後沉澱），直到使用者回到該 thread 才回 idle。
      // 這裡對應成：維持 review 直到該 session 有下一個動作（UserPromptSubmit）、結束或 7 天到期。
      setState(s, "review");
-      say(`✅ 完成！${suffix}`, 8000);
+      say("✅ 完成！", 8000, false, title);
      break;
    case "StopFailure":
      // Codex：turn 失敗 → failed 狀態（播 failed 3 次後沉澱），維持到下一個 turn 或 1 小時到期
      setState(s, "failed");
-      say(`❌ ${p.error || "出錯了"}`, 8000);
+      say(`❌ ${p.error || "出錯了"}`, 8000, false, title);
      break;
    case "SubagentStart":
    case "SubagentStop":
@@ -461,13 +469,13 @@ function handleEvent(p) {
      break;
    case "PreCompact":
      setState(s, "running");
-      say("🗜️ 整理記憶中…", 3000);
+      say("🗜️ 整理記憶中…", 3000, false, title);
      break;
    case "SessionEnd":
      sessions.delete(p.sessionId || "default");
      if (sessions.size === 0) {
        hideBubble();
-        say("👋 掰掰", 2000);
+        say("👋 掰掰", 2000, false, title);
      }
      break;
    default:
@@ -487,7 +495,7 @@ function handleTest(p) {
  } else if (anim in PRIORITY) {
    const s = session("test");
    setState(s, anim);
-    if (anim === "waiting") say("🔐（測試）需要你授權", 0, true);
+    if (anim === "waiting") say("🔐（測試）需要你授權", 0, true, "動作測試");
    else if (anim === "idle") hideBubble();
  }
  report();
@@ -538,6 +546,9 @@ function tick(now) {
  prevBase = base;

  draw(anim);
+  // 換格會改變游標底下的像素。游標沒移動時主程序不會再送座標，
+  // 所以這裡自己重驗一次，否則會卡在點穿狀態動不了。
+  if (lastPoint && overPetArea(lastPoint.x, lastPoint.y)) refreshHitTest();
  requestAnimationFrame(tick);
 }

@@ -649,6 +660,15 @@ function setHovered(on) {
  if (overlay?.fromHover) overlay = null;
 }

+// 命中判定集中在這裡：mousemove 與主程序輪詢都走同一條路。
+// 主程序每 50 ms 一定會送座標過來，所以就算 mousemove 沒被轉發進來也能復原。
+function refreshHitTest() {
+  if (!lastPoint || pressed || drag) return;   // 拖曳中不要動點穿狀態
+  const { x, y } = lastPoint;
+  setHovered(overPetArea(x, y));
+  setIgnore(!(overSprite(x, y) || overBubble(x, y)));
+}
+
 function setIgnore(ignore) {
  if (ignore === ignoringMouse) return;
  ignoringMouse = ignore;
@@ -666,13 +686,13 @@ window.addEventListener("mousemove", (e) => {
    }
    return;
  }
-  setHovered(overPetArea(e.clientX, e.clientY));
-  // 點穿判定仍看實際像素，透明處要能點到底下的視窗
-  setIgnore(!(overSprite(e.clientX, e.clientY) || overBubble(e.clientX, e.clientY)));
+  lastPoint = { x: e.clientX, y: e.clientY };
+  refreshHitTest();
 });

 document.addEventListener("mouseout", (e) => {
  if (e.relatedTarget || pressed) return;
+  lastPoint = null;
  setHovered(false);
  setIgnore(true);
 });
@@ -700,6 +720,12 @@ window.addEventListener("mouseup", (e) => {

 window.addEventListener("contextmenu", (e) => e.preventDefault());

+// 主程序的游標輪詢：不管 mousemove 有沒有被轉發進來都會到
+window.pet.on("pet:cursor-pos", ({ x, y }) => {
+  lastPoint = { x, y };
+  refreshHitTest();
+});
+
 window.pet.on("pet:drag-move", ({ dx }) => {
  // Codex：單一取樣的水平位移 >= 4 才切 running-right，<= -4 才切 running-left
  if (drag && Math.abs(dx) >= 4) drag.dir = dx < 0 ? "left" : "right";
@@ -30,11 +30,28 @@ html, body {
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+  cursor: pointer;
+}
+
+/* 標題與內文各自佔一行，各自省略；沒有標題時整行收起來 */
+#bubble-title,
+#bubble-text {
+  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  transition: opacity 0.18s ease, transform 0.18s ease;
-  cursor: pointer;
+}
+
+#bubble-title {
+  font-size: 11px;
+  line-height: 1.3;
+  color: #6b7280;
+}
+
+#bubble-title:empty {
+  display: none;
 }

 #bubble::after {