Day 277
用 Mod 補上 TUI 的預覽
一直以來，用 TUI（終端機裡的文字介面）都有一個痛點：一旦遇到需要預覽的檔案，支援度就很差。
像圖片，光看檔名和路徑，沒辦法確認內容。所以最近我才試著用另一個工具來瀏覽圖片。
Mod 讓我們自己加上工作時需要的畫面和操作。它能接收 Claude Code 的事件、記住狀態，再決定畫面怎麼更新、工作怎麼繼續。
看到 Claude Code 的 Mods，我第一個想到的就是圖片預覽，以及輸入框的 preview（預覽）。這些需要另外切出去看的東西，現在可以做成 mod，放回 Claude Code 的介面裡。
這篇分享：從有人分享的例子看 Mod 怎麼運作、它跟 hooks 的差別，以及我想加的兩種預覽。預覽是接下來想做的功能，還沒有實作。
這些是應用構想，不需要每一種都先找別人做好的 mod。官方也提供 /plugin-authoring，可以把需求說給 Claude，請它寫，例如：
幫我做一個 mod，在輸入框旁邊顯示目前草稿的 Markdown 預覽。
我修改文字時就更新預覽，由我在原本的輸入框按送出。
分享裡的面板，背後都在接收事件
有人分享了幾種 mod 的用法。有一個 Flight Recorder，把模型請求和工具呼叫排成時間軸；Output Tray 則把產出的檔案列在旁邊，讓你開啟所在的資料夾。
把這兩個例子放在一起看，運作方式就很清楚了：
- Claude Code 發生一件事，例如呼叫工具或完成一輪工作
- Mod 的程式收到事件，把要用的資訊記下來
- 畫面更新時，再把那些資訊畫成時間軸或檔案清單
不同事件的處理函式可以共用同一份狀態。負責記錄的函式，把檔案加進清單；負責顯示畫面的函式，讀取清單；你按下按鈕，又能接著觸發操作。
從這些例子，我看到 mod 可以把工作時發生的事件，變成看得見、能操作的介面。
分享裡的 Model Router 則把事件接上實際動作：在送出模型請求時，控制子代理使用哪個模型。Mod 能改畫面，也能介入工作流程。
Mod 也用 hooks，差別在接到了哪裡
Hook 指的是事件發生時會被呼叫的處理程式。Mod 裡的這些函式，官方也叫 hooks。
要比較的是，以前寫在設定檔裡的 settings hooks，跟 Mod 裡的函式 hooks。
| 設定檔裡的 hooks | Mod | |
|---|---|---|
| 怎麼接進來 | 在設定檔指定事件和處理方式，例如執行指令、呼叫 HTTP 服務或模型 | 把 JavaScript 或 TypeScript 函式註冊到 Claude Code 的事件上，在 Claude Code 裡跑 |
| 怎麼接到畫面 | 回傳訊息、判斷結果或補充上下文 | 還能把共用狀態畫成面板、按鈕、輸入欄位，接收操作後再更新 |
| 典型用途 | 工具執行前檢查，改完檔案後跑檢查程式 | 持續更新的工作時間軸、檔案預覽、自訂操作面板 |
兩者都能自動處理事件，也都能影響工具呼叫。若只是改完檔案後跑一支檢查程式，原本的 hook 就做得到。
我想要的圖片預覽，則需要把檔案內容畫在對話旁邊，並在圖片變動後更新。Mod 提供了這種介面整合的能力。
前一天提到的 prompt 是這次的指令；Skill 是可重複讀取的工作指引；MCP server 提供外部工具。Mod 擴充的是 Claude Code 本身的事件處理與介面。plugin（外掛）則是包裝方式，可以把它們放在同一份外掛裡。
圖片產生後，我想直接在旁邊看到
假設正在請 AI 修改一張圖，我想在對話旁邊放一個預覽面板：原圖長什麼樣、改完的圖長什麼樣，直接看得見。
每次產出新版本，面板就更新，旁邊再放檔名或版本。要確認 AI 改了什麼，就不用另外開一個工具，再找一次那張圖。
這個構想需要幾個部分配合：找到產出的圖片、記住要顯示哪一張、把圖片畫出來，以及在檔案變動後重新整理。
官方的 Mod 元件清單已經有 Image，目前列為終端機支援，Desktop 沒有列為支援。它提供了顯示圖片的基本元件，但完整的預覽流程仍要自己做，還要在實際使用的終端機上測試。
往後碰到需要預覽的檔案，就多了一個做法：把預覽功能做成 mod，放在自己的工作介面裡。
輸入框旁邊，也可以有送出前的預覽
另一個想像是，在輸入框旁邊放一個 preview。
有時候給 AI 的指令很長，裡面有條列、程式碼和範例。打完之後，我想先把整段內容攤開來看，確認段落和範例有沒有放對，再按送出。
做法可以是，輸入框照常打字，旁邊的面板用 Markdown 排版顯示同一份草稿。修改文字時，預覽也跟著更新。
這有 API 可以支援：prompt.edit 會在編輯輸入框時觸發，Mod 也能讀取草稿；畫面元件裡有 Markdown。把它們接起來，就能朝這個方向做。
這裡預覽的是自己正在寫的指令，不代表已經看見 Claude 最後收到的全部上下文。後續還可能有 Skill 或 hooks 加入其他內容。
想像可以從「我一直切出去看什麼」開始
圖片和輸入框之外，還可以想：
- 每次都切去看 Git diff，可以在旁邊列出這一輪改過的檔案，選一份看差異
- 等 AI 做完才知道產出放哪裡，可以留一個持續更新的產出清單
- 很長的工作流程，可以把自己的檢查清單放在旁邊，逐項確認
這些是應用構想。
Mods 需要 Claude Code v2.1.287 或更新版本。開啟這場對話的熱重載後，新建或修改的 mod 會在回合結束時載入；預設只跟著這場對話，包含之後恢復對話時。要拿到其他對話用，得另外保存，再用 --plugin-dir 或外掛安裝方式載入。
單純顯示圖片、排版和記錄事件，可以由程式處理，不必每次呼叫模型。請 Claude 幫忙寫程式，或讓 mod 用 $.model.complete 產生摘要，仍會使用模型額度。
Mod 使用你的使用者權限，也不受 Claude Code 的 Bash 沙箱保護。拿到別人的 mod，可以先用 claude plugin validate 做靜態檢查，列出事件和 API 呼叫，再看來源與程式內容。它是會跑的程式，不是只有一份文字設定。
我第一個想加的，就是在 TUI 裡直接看圖，以及在送出前看清楚自己寫的指令。
Mark Kashef 影片 Claude Code Now Has Mods. Here Are 10 Worth Stealing：https://www.youtube.com/watch?v=uvIopT_2sY0 Claude Code Mods 官方總覽：https://code.claude.com/docs/en/plugins/mods/overview 官方建立 Mod 的流程：https://code.claude.com/docs/en/plugins/mods/create Mods API：https://code.claude.com/docs/en/plugins/mods/api Mod 事件處理：https://code.claude.com/docs/en/plugins/mods/events 設定檔 Hooks：https://code.claude.com/docs/en/hooks Mods 畫面擴充：https://code.claude.com/docs/en/plugins/mods/interface Mods 事件與元件參考：https://code.claude.com/docs/en/plugins/mods/reference Day 276 One-shot prompt 的 shot 是什麼：https://www.dawsonwang.com/day/276