nikserg/skim

更新 Skim 示範資產

重新產生產品示範影片以及與登陸頁面一起發布的淺色/深色介面截圖。 一切均由真實的 Skim 使用者介面驅動，並針對模擬的 Tauri IPC 層 (demo/mock/) 執行， 因此絕不會觸及真實的帳戶、郵件信箱或模型。

輸出內容，全部發布到 docs/ 中：

• skim-demo.mp4 — 腳本化的功能導覽 (1280×800)
• skim-light.jpg, skim-dark.jpg — 介面截圖，寬度 800px

請勿提交或推送

此技能僅更新磁碟上的檔案。請勿執行 git add、git commit 或 git push。 使用者應自行審閱重新產生的資產，並決定保留哪些內容——這些是二進位檔案， 會產生大量差異，而且一個看似正常的執行（退出碼為 0）仍可能在視覺上出錯。 讓工作目錄保持未暫存狀態是正確的結果。

僅當使用者在同一個請求中明確要求時（例如「重新產生並提交它們」），才觸碰 git。 否則，最終只需告訴他們檔案已更新且未暫存。

執行方式

從儲存庫根目錄執行：

npm run demo

這會串聯三個步驟：demo:record (Playwright 驅動真實 UI → demo/output/raw.webm) → demo:encode (ffmpeg → MP4，複製到 docs/) → demo:shots (兩種主題 → docs/)。

如果只有部分使用者介面變更，僅執行所需的部分——這樣更快，且能讓不相關的資產保持位元組完全一致：

• npm run demo:shots — 僅截圖 (靜態 UI、顏色、佈局變更)
• npm run demo:record && npm run demo:encode — 僅影片 (流程、AI 行為)

前置需求：npm install 且 ffmpeg 在 PATH 路徑中。整個過程大約需要幾分鐘； 錄製是最慢的部分。

npm run demo 以 demo:browser (playwright install chromium) 開始——當瀏覽器已存在時為無操作。 如果執行時出現「Executable doesn't exist at ...chromium_headless_shell-NNNN」錯誤， 那是 Playwright 的瀏覽器建置與函式庫版本不同步（^ 版本的提升會重新指向它， 且 headless shell 是與 Chromium 分開的下載項目）。執行 npm run demo:browser 或完整的 npm run demo 即可解決——無需將其視為示範問題進行除錯。 單獨的 demo:record / demo:shots 腳本會跳過此檢查。

在報告成功之前進行驗證

一個執行可能退出碼為 0，但仍然產生損壞的影片。未處理的模擬命令會傳回 undefined 而非拋出錯誤，這會顯示為空白窗格而不是錯誤——所以請 相信你的眼睛，而不是退出碼。

1. 確認 docs/ 中的三個檔案有最新的修改時間。
2. 檢查尺寸：截圖寬度為 800px，MP4 為 1280×800。
3. 提取整個 MP4 的各個影格並實際檢視它們。按比例而非固定秒數取樣—— 導覽的長度會隨著場景新增或節奏調整而改變，因此硬編碼的時間戳會失效：

   dur=$(ffprobe -v error -show_entries format=duration -of csv=p=0 docs/skim-demo.mp4)
   for k in 1 2 3 4 5 6 7; do
     ffmpeg -y -hide_banner -loglevel error \
       -ss $(echo "$dur * $k / 8" | bc -l) -i docs/skim-demo.mp4 -frames:v 1 /tmp/f$k.png
   done
   

   每個影格都應顯示已填入內容的窗格，且 AI 場景應有其串流文字。demo/output/progress.log 會在每個場景完成時記錄其名稱， 這有助於將錯誤影格追溯到產生它的步驟。
4. 檢視兩張截圖——特別檢查深色主題那張（郵件正文在一個沙盒化的 iframe 中渲染， 帶有自身的佈景主題邏輯，可能會出現深色疊深色的情況）。

回報哪些檔案變更了以及你看到了什麼。如果某個場景看起來有問題，請修復它，而不是直接發布。

當使用者介面變更後導覽中斷時

測試工具依賴兩個約定。失敗訊息會告訴你哪一個發生了變化：

IPC 命令名稱 (demo/mock/tauri-core.ts)。模擬層實作了 invoke()，並使用 switch 來比對命令名稱，這些名稱對應 src/lib/api.ts。如果某個命令被重新命名或新增， 請加入對應的 case。症狀：出現空白窗格或缺少資料，而非崩潰。

選擇器和英文標籤 (demo/record.mjs)。導覽會點擊諸如 .row、.quick-btn:has-text("Summarize")、.ai-input .instruction 等元素。重新命名的 CSS 類別或 src/lib/i18n/locales/en.json 中變更的字串會破壞匹配的步驟，並且超時錯誤 會指出失敗的選擇器。示範會強制設定 locale: "en"，因此英文標籤是關鍵。

測試用的固定資料也是如此：demo/mock/data.ts 會比對 ai.prompt_* 字串， 以決定快速提示會得到哪個腳本化的回答，且導覽會等待這些回答中的特定詞語 （"sync"、"yours"、"4.2"）。重新表述固定資料會導致依賴它的等待超時。

所有固定資料和每個腳本化的 AI 回應都存在於 demo/mock/data.ts 中——當你想要示範 顯示不同的內容（不同的郵件、不同的摘要、不同的草稿回覆）時，這就是需要編輯的檔案。

編輯 record.mjs 時會困擾你的非顯而易見事項：

• 編輯器主體是一個 <textarea>。其串流內容是它的 value，而不是它的 text—— 請使用 waitValue 而不是 waitText 來等待。
• .compose-window textarea 也會匹配到 AI 指令框（它在 DOM 中出現得更早）。 對於郵件主體，請使用 .compose-window > textarea。
• 撰寫場景透過雜湊導航，並且必須在之後呼叫 page.reload()——僅使用雜湊的 goto 不會重新掛載 SPA，因此撰寫器永遠不會出現。
• 請在 browser.close() 之前使用 video.saveAs() 儲存影片，否則會失敗並顯示 「target closed」。

節奏與佈景主題

預設值已調整為適合可讀的登陸影片。可以透過環境變數覆蓋每次執行的設定（所有單位為毫秒）： DEMO_READ (每個畫面的停留時間)、DEMO_BEAT (動作之間的間隔)、DEMO_TYPE (按鍵延遲)、 以及 DEMO_AI_TYPING / DEMO_AI_THINK / DEMO_AI_STEP (AI 串流節奏)。當你在場景中新增內容後 覺得節奏太快時，這會很有用。

佈景主題有兩個維度——"<cold|warm>-<light|dark>"，例如 warm-light (應用程式預設)。 兩個腳本都透過 localStorage (skimdemo.theme) 強制設定主題，模擬層會從 get_settings 傳回該主題：

• 影片固定為 warm-light；使用 DEMO_THEME=cold-dark npm run demo:record 覆蓋。
• 截圖會渲染 warm-light → docs/skim-light.jpg 和 warm-dark → docs/skim-dark.jpg (在 demo/screenshots.mjs 中的 SHOTS 陣列將主題對應到檔案名稱)。

請注意舊的單一維度值："light" 和 "dark" 仍然可以解析，但會對應到 冷色 調色板， 因此傳入它們會靜默地渲染錯誤的色溫而不是失敗。

DEMO_PREBUILT=1 提供來自 demo/dist-demo 的靜態建置，而不是開發伺服器—— 在資源受限或無頭環境中很方便。

更多細節位於 demo/README.md。