5 Commits
Author SHA1 Message Date
JianMiauandClaude Fable 5 4e4563e861 完成時氣泡改顯示最後一句回覆,不再延到下一輪才出現
根本原因:
Stop 事件時 main.js 已從 transcript 附上最後一句助理訊息(narration),
但 renderer 的 Stop 分支寫死顯示「完成!」沒使用它,也沒把 narrationId
標記為已顯示;下一輪第一個工具事件呼叫 sayActivity 時,transcript 裡
最新的助理訊息仍是上一輪結尾、id 又沒被消費過,就被當成新話顯示出來。

影響:
對話收尾只看得到「完成!」,看不到 AI 的最後一句回覆;等使用者送出
下一句指令後,寵物反而冒出上一輪的舊訊息,時序錯亂。

修法:
Stop 時若帶有 narration,氣泡直接顯示「 最後一句」並消費 narrationId,
沒有才退回「完成!」;UserPromptSubmit 也先把當下 narrationId 標記為已
顯示,雙重保險。另修 release.js 只挑檔名含當前版本的產物,避免 dist/
殘留的舊版檔案混進新 release。版號 2.0.9。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-24 16:40:32 +08:00
JianMiauandClaude Fable 5 7060571df1 修正被 VS Code 蓋住:定期重新宣告置頂
摘要:
每 2 秒重新宣告一次置頂,並在螢幕配置變動與啟動後各補一次。

根本原因:
Windows 會把視窗踢出 topmost band,卻留著 WS_EX_TOPMOST 樣式位元。
以 Win32 檢查實際情況:寵物視窗的 exStyle 是 0x08280028(含 WS_EX_TOPMOST),
但 z-order 排在 Z=4,而兩個 TOPMOST=false 的 VS Code 視窗排在 Z=1 與 Z=2,
也就是它們蓋在寵物上面。Electron 這邊仍以為自己是置頂的,
setAlwaysOnTop 已經在建立視窗時與勾選選單時都設過,所以不會自己修好。

影響:
寵物被 VS Code 之類的一般視窗蓋住,只能重啟或重新勾一次選單的「永遠置頂」。

修法:
- 新增 reassertTopmost():setAlwaysOnTop(true, "screen-saver") 之後再呼叫 moveTop()。
  單靠 setAlwaysOnTop 不夠——狀態沒變時它可能不會真的呼叫 SetWindowPos;
  moveTop() 會強制 SetWindowPos,對 WS_EX_TOPMOST 的視窗即為插回 topmost band 最上面。
  視窗是 WS_EX_NOACTIVATE + focusable:false(已用 Win32 確認),不會搶焦點。
- 每 TOPMOST_REASSERT_MS(2000)呼叫一次;display-metrics-changed / added / removed
  也各接一次,因為螢幕配置變動最容易觸發降級。
- ready-to-show 的 showInactive 後補一次;選單勾選置頂時也補一次。
- 拖曳中(dragTimer 存在)跳過,避免和每 16 ms 的位置更新打架。
- 結束時清掉 timer。

驗證:
- 先從外部對執行中的視窗呼叫 SetWindowPos(HWND_TOPMOST) 確認這正是有效解:
  寵物由 Z=4 移到 Z=0,兩個 VS Code 視窗退到 Z=5、Z=6。
- 再以改好的版本實測守護行為,用 SetWindowPos(HWND_BOTTOM) 模擬 Windows 的降級:
  基準 petZ=0 TOPMOST=true 上方 0 個;強制降級後 petZ=17 TOPMOST=false 上方 4 個
  (VS Code 兩個、CM 等);1 秒後回到 petZ=0 TOPMOST=true 上方 0 個;3 秒後維持。
- 以 ELECTRON_RUN_AS_NODE 讀打包後 app.asar,確認版本 2.0.8 與八項改動都在出貨檔案裡。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-24 14:36:36 +08:00
JianMiauandClaude Fable 5 cd4b618be0 補上遺漏的氣泡標題列
摘要:
整理記憶中、需要你授權、工具失敗、錯誤訊息、一般通知、掰掰這六個氣泡補上第一行標題。

根本原因:
上一版把氣泡改成兩行時,是以「原本帶(專案名)尾綴」為線索去改呼叫點,
但這六個訊息本來就沒有尾綴,所以整批漏掉,顯示出來只有單行、沒有專案或對話名稱。

影響:
壓縮記憶、等授權、出錯這些最需要知道是哪個 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
JianMiauandClaude Fable 5 42083acec5 修正有時候卡住無法拖曳:點穿狀態改由主程序輪詢驅動
摘要:
點穿的命中判定不再只依賴 renderer 的 mousemove,改由主程序每 50 ms 的游標輪詢一起驅動,
並在每格畫完後用最後已知座標重驗一次。

根本原因:
視窗預設 setIgnoreMouseEvents(true, { forward: true }),而唯一會把它切回可互動的地方
是 renderer 的 mousemove。問題是視窗處於點穿狀態時,Electron 的 forward 不保證會把
mousemove 轉發進來——本次開發過程中已實測到:游標直接跳到寵物上收不到事件,
慢慢掃過去才收得到。
於是只要在「游標還停在寵物身上」時進入點穿(例如游標停在某一點,動畫換格後
該點的像素變成透明),就再也收不到 mousemove,ignoringMouse 永遠是 true,
滑鼠按下也傳不進視窗,就變成按不動也拖不動,而且不會自己好。
另外 startCursorPolling 的內容原本被 `!config.followCursor` 整段擋掉,
而追視預設為關,所以主程序根本沒有在追游標,沒有任何備援路徑。

影響:
寵物有時候完全無法拖曳或點擊,只能重啟;游標停在人物邊緣或半透明處時特別容易發生。

修法:
- startCursorPolling 的守衛從 `!win || !config.followCursor || dragTimer` 改為
  `!win || dragTimer`,輪詢一律執行;只有送 pet:cursor(追視用)那一行仍看 followCursor。
- 主程序新增 pet:cursor-pos,送出視窗相對座標;preload 開放該頻道。
- renderer 把命中判定集中成 refreshHitTest(),mousemove 與 pet:cursor-pos 走同一條路,
  並在 pressed / drag 期間不動點穿狀態,避免拖曳中途鬆手。
- tick 畫完後若最後已知座標落在人物方框內就重驗一次,處理「游標沒動但換格導致
  該點像素改變」的情況。
- mouseout 時清掉 lastPoint。
- README 的設計重點補上為何不能只靠 mousemove。

驗證:
- 實機加暫時診斷確認 pet:cursor-pos 確實送達 renderer,且回報的 canvasRect
  (57,72,183,209)與依視窗尺寸手算的結果一致;確認後移除診斷碼。
- 以 DOM stub 載入完整 renderer.js 並讓 getImageData 的 alpha 可切換,14 項全過:
  壓在人物上會解除點穿並觸發 hover 跳躍、有通知主程序、方框內但透明維持點穿、
  方框外點穿且非 hover、拖曳中與按住中都不改點穿、pet:cursor-pos 有註冊且
  直接跳到人物上也能解除點穿、以及最關鍵的一組——先進入點穿狀態,
  再由 pet:cursor-pos 在同一點換格後把它救回來,這正是原本卡死的情境。
- 以 ELECTRON_RUN_AS_NODE 讀打包後 app.asar,確認版本 2.0.6 與九項改動都在出貨檔案裡。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-24 13:51:28 +08:00
JianMiauandClaude Fable 5 93f635dd01 氣泡改成兩行,第一行顯示對話名稱或專案名
摘要:
氣泡上方加一行標題(/rename 設的對話名稱,沒設就用專案資料夾名),訊息移到第二行。

根本原因:
原本把專案名以「(專案名)」的形式接在訊息尾巴,訊息本身就短,
加了括號後更容易被氣泡的單行省略號截掉,而且同時開多個 session 時
要看到最後才知道是哪一個在叫你。

影響:
多 session 並行時不容易分辨氣泡是哪個專案發出的;訊息也被括號擠掉。

修法:
- index.html 氣泡內加 #bubble-title;style.css 把單行限制從 #bubble 移到
  #bubble-title 與 #bubble-text 各自身上,兩行各自省略,
  並以 :empty 讓沒有標題時整行收起來,不留空白。
- say() 增加第四個參數 title,事件處理處的八個呼叫點改傳標題、移除 suffix。
- main.js 的 latestNarration 改名為 readTranscript,同一次反向掃描同時取出
  助理說明與 custom-title(/rename 會把它寫進 transcript),兩者都拿到就提早結束;
  收到事件時把 sessionTitle 一併併進 payload。
- 標題優先序:對話名稱 > 專案資料夾名 > 不顯示。

驗證:
- 單元測試以真實 transcript 執行 readTranscript:取到對話名稱 "claude-pet"、
  同時取到助理說明、快取一致、路徑不存在或為 null 時回 null,6 項全過。
- 實機截圖確認兩行版面正確。截圖當下剛好收到另一個 session 的真實事件,
  標題顯示 "telegram-codex-bot"、第二行是該 session 的助理說明,
  等於用實際流量驗證了多 session 下的標題辨識。
- 以 ELECTRON_RUN_AS_NODE 讀打包後 app.asar,確認版本 2.0.5 與十項改動都在出貨檔案裡,
  包含舊的 suffix 已完全移除。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-24 12:09:01 +08:00
9 changed files with 160 additions and 47 deletions
+13 -2
View File
@@ -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,8 +241,9 @@ Claude Code ──hookstdin 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 更新視窗位置,游標離開視窗也不會掉;方向由水平位移決定。
- **置頂要定期重新宣告**:Windows 有時候會把視窗踢出 topmost band,卻留著 `WS_EX_TOPMOST` 樣式位元——從外部檢查看到 `TOPMOST=true`,但 z-order 排在一般視窗(例如 VS Code)之下,寵物就被蓋住,而 Electron 這邊仍以為自己是置頂的,不會自己修好。所以每 2 秒重新宣告一次,並在螢幕配置變動時立刻補一次。`setAlwaysOnTop` 在狀態沒變時可能不會真的呼叫 `SetWindowPos`,因此再補一個 `moveTop()` 強制插回 topmost band 最上面;視窗是 `WS_EX_NOACTIVATE` + `focusable: false`,不會搶焦點。
- **行為邏輯以 Codex 為準**,細節見[與 Codex 的對照](#與-codex-的對照)。
- **顯示尺寸與 sprite 來源尺寸分開**:`CELL_W/CELL_H`192 × 208)只用來從 spritesheet 取格子,畫到畫面上的是 `PET_W/PET_H`126 × 137Codex 的 mascot 尺寸)。視窗寬度另有 `MIN_WIN_W = 240` 的下限,免得寵物變小後氣泡被截掉。
- **Spritesheet 以 data URL 傳給 renderer**,避免 `file://` 跨來源污染 canvas 導致 `getImageData` 失敗。
@@ -264,6 +267,14 @@ Claude Code ──hookstdin 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 並依檔案大小快取,
+61 -13
View File
@@ -37,6 +37,7 @@ const PAD_BOTTOM = 8;
const MIN_WIN_W = 240; // 視窗最小寬度,保留氣泡的可讀寬度(Codex 的氣泡也遠寬於寵物本身)
// Codex 的 mascot 寬度可調範圍是 80224 pxike() 的 clamp);以 126 為 100%,這幾檔都落在範圍內
const SCALES = [0.65, 0.8, 1, 1.25, 1.5, 1.75];
const TOPMOST_REASSERT_MS = 2000; // 多久重新宣告一次置頂(見 reassertTopmost
const DEFAULT_CONFIG = {
activePetId: "xiao-nian",
@@ -55,6 +56,7 @@ let tray = null;
let pets = [];
let dragTimer = null;
let cursorTimer = null;
let topmostTimer = null;
let lastCursor = { x: NaN, y: NaN };
let currentState = { anim: "idle", base: "idle", sessions: 0 };
@@ -99,16 +101,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 +122,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;
@@ -271,7 +281,10 @@ function createWindow() {
if (config.alwaysOnTop) win.setAlwaysOnTop(true, "screen-saver");
win.setIgnoreMouseEvents(true, { forward: true });
win.loadFile(path.join(APP_DIR, "renderer", "index.html"));
win.once("ready-to-show", () => win.showInactive());
win.once("ready-to-show", () => {
win.showInactive();
reassertTopmost();
});
win.on("closed", () => { win = null; });
}
@@ -318,13 +331,42 @@ function endDrag(save) {
// ---------- cursor look ----------
// Windows 有時候會把視窗踢出 topmost band,卻留著 WS_EX_TOPMOST 樣式位元:
// 從外部檢查會看到 TOPMOST=true,但 z-order 排在一般視窗(例如 VS Code)之下,
// 於是寵物就被蓋住,而 Electron 這邊仍以為自己是置頂的,不會自己修好。
// setAlwaysOnTop 在狀態沒變時可能不會真的呼叫 SetWindowPos,所以再補一個 moveTop()
// 強制重新插回 topmost band 的最上面(視窗是 WS_EX_NOACTIVATE + focusable:false,不會搶焦點)。
function reassertTopmost() {
if (!win || win.isDestroyed() || !config.alwaysOnTop || dragTimer) return;
try {
win.setAlwaysOnTop(true, "screen-saver");
win.moveTop();
} catch { /* 視窗正在關閉就算了 */ }
}
function startTopmostGuard() {
topmostTimer = setInterval(reassertTopmost, TOPMOST_REASSERT_MS);
// 螢幕配置變動最容易觸發降級,變動後立刻補一次
screen.on("display-metrics-changed", reassertTopmost);
screen.on("display-added", reassertTopmost);
screen.on("display-removed", reassertTopmost);
}
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 +388,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);
@@ -469,6 +514,7 @@ function buildMenu() {
config.alwaysOnTop = item.checked;
saveConfig();
win?.setAlwaysOnTop(item.checked, "screen-saver");
if (item.checked) reassertTopmost();
},
},
{
@@ -586,6 +632,7 @@ if (!app.requestSingleInstanceLock()) {
createTray();
startServer();
startCursorPolling();
startTopmostGuard();
appendLog(`started pet=${activePet()?.id || "none"} scale=${config.scale} port=${config.port}`);
});
@@ -595,6 +642,7 @@ if (!app.requestSingleInstanceLock()) {
app.on("before-quit", () => {
if (cursorTimer) clearInterval(cursorTimer);
if (topmostTimer) clearInterval(topmostTimer);
endDrag(false);
});
}
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "claude-pet",
"version": "2.0.4",
"version": "2.0.9",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "claude-pet",
"version": "2.0.4",
"version": "2.0.9",
"devDependencies": {
"electron": "^43.4.1",
"electron-builder": "^26.0.12"
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "claude-pet",
"version": "2.0.4",
"version": "2.0.9",
"description": "Codex Pets 相容的 Claude Code 桌面寵物(spriteVersionNumber 29 個動作列 + 16 方向追視)",
"main": "main.js",
"private": true,
+1
View File
@@ -20,6 +20,7 @@ const ON = new Set([
"pet:settings",
"pet:event",
"pet:cursor",
"pet:cursor-pos",
"pet:drag-move",
]);
+1 -1
View File
@@ -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>
+60 -25
View File
@@ -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,29 +399,31 @@ 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");
// 這時 transcript 裡最新的助理訊息還是上一輪的結尾,
// 先標記成已顯示,免得接下來的工具事件把它當成新話講出來
if (p.narrationId) lastNarrationId = p.narrationId;
hideBubble();
break;
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 +432,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 +459,18 @@ function handleEvent(p) {
// Codexturn 完成且未讀 → review(播 review 3 次後沉澱),直到使用者回到該 thread 才回 idle。
// 這裡對應成:維持 review 直到該 session 有下一個動作(UserPromptSubmit)、結束或 7 天到期。
setState(s, "review");
say(`✅ 完成!${suffix}`, 8000);
// 收尾時把最後一句回覆講出來,而不是只說「完成」
if (p.narration) {
lastNarrationId = p.narrationId || lastNarrationId;
say(`${firstSentence(p.narration)}`, 8000, false, title);
} else {
say("✅ 完成!", 8000, false, title);
}
break;
case "StopFailure":
// Codexturn 失敗 → 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 +478,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 +504,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 +555,9 @@ function tick(now) {
prevBase = base;
draw(anim);
// 換格會改變游標底下的像素。游標沒移動時主程序不會再送座標,
// 所以這裡自己重驗一次,否則會卡在點穿狀態動不了。
if (lastPoint && overPetArea(lastPoint.x, lastPoint.y)) refreshHitTest();
requestAnimationFrame(tick);
}
@@ -649,6 +669,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 +695,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 +729,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";
+19 -2
View File
@@ -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 {
+2 -1
View File
@@ -144,8 +144,9 @@ async function main() {
console.log(`Tag : ${TAG}`);
if (!fs.existsSync(DIST_DIR)) throw new Error(`找不到 ${DIST_DIR},先執行 npm run dist`);
// dist/ 可能留著前幾版的產物,只挑檔名含當前版本的,免得舊檔混進新 release
const files = fs.readdirSync(DIST_DIR)
.filter((f) => ASSET_PATTERNS.some((re) => re.test(f)))
.filter((f) => ASSET_PATTERNS.some((re) => re.test(f)) && f.includes(pkg.version))
.map((f) => path.join(DIST_DIR, f))
.filter((f) => fs.statSync(f).isFile());
if (!files.length) throw new Error(`${DIST_DIR} 裡沒有 .exe / .zip,先執行 npm run dist`);