讓 Claude Code 在另一台 Mac 也能預覽圖，連 mosh 都可以

我平常讓 Claude Code（Anthropic 出的 AI 寫程式工具）跑在 MacBook Pro 上，人拿 MacBook Air 透過 ssh 或 mosh 連進去用。問題是對話裡的圖我都看不到：貼上去的截圖只剩 [Image #1]，Claude 寫出來的 chart.png、plan.md 也只是一串路徑。

Day 277 我寫過想幫 Claude Code 加兩種預覽：貼圖的縮圖、輸入框的草稿預覽，當時還沒動手。社群已經有人先做了一個版本 cc-image-view，貼圖時確實看得到縮圖，但只在單機上管用：我從 Air 連進 Pro，圖還是看不到，mosh 下更只剩一個空白框。讓 mosh 闔上筆電、換網路都不會斷線的那個設計，也是圖片被丟掉的原因。所以今天跟 Claude 一起做了 cc-preview（Claude Code 的外掛，可以改它的畫面），補上跨兩台電腦、還有 mosh 的情況。

滑鼠移過去就看得到圖

• 回覆、提示詞、工具結果裡提到的檔案都會有按鈕。滑鼠移到按鈕上，就能看到圖片，或 Markdown 檔的前幾行。
• 貼圖之後、送出之前，輸入框上方會先顯示縮圖。
• 點一下就在側邊面板打開：Markdown 完整排版、圖片放大看，還能上一張、下一張翻。
• 側邊面板可以放大到 100%，用 h j k l 移動。
• 自動判斷連線方式：終端機能顯示圖片就用真的像素，不能（mosh）就用彩色字元畫。

檔案在 Pro 上，終端機在 Air 上

送圖片內容，不送檔案路徑。畫圖的終端機在 Air 上，檔案卻在 Pro 上。cc-image-view 是把檔案路徑交給終端機自己去讀，但 Air 讀不到 Pro 的檔案。cc-preview 改成在 Pro 上把圖讀出來，直接把圖片內容送過去。

mosh 傳不了圖，就用字元畫。ssh 像一條水管，什麼資料都原封不動送到你的終端機。mosh 不一樣：它自己維護一份畫面，每一格只記一個字元加兩個顏色，只同步這張表。圖片在這張表裡沒有位置，就被丟掉了。

所以在 mosh 下，cc-preview 用 ▘▝▀▖▌▞▛ 這類方塊字元畫圖。每一格放 4 個像素、兩種顏色，每一格都挑失真最少的分法，橫向解析度比常見的半格畫法多一倍。

字元有天花板，那就放大。寬 100 個字的面板，橫向大約只有 200 個像素，一張照片動輒 1440 以上，再怎麼挑字元都補不回來。可行的是放大加移動：我在本機把畫面畫出來檢查，放大到 100% 時，測試照片上的條碼和底下的數字用字元就讀得出來。

看程式的上下關係判斷連線，不去問終端機。一般判斷終端機能不能顯示圖，是送一段查詢給終端機，看它回什麼。但它的回覆會被當成鍵盤輸入，先被 Claude Code 讀走。所以 cc-preview 改看行程樹（電腦上每個程式是誰開的）：Claude Code 上面有沒有 mosh-server 或 sshd？本機終端機是不是 Ghostty、kitty、WezTerm？

麻煩的是 herdr（終端機分頁管理工具）：斷線之後它還在跑，當初開它的那條連線可能早就不在了。cc-preview 的做法是找最近有輸入的那個終端機，也就是你現在正在打字的那一個。

沒把握就退一步：哪一步失敗，就把錯誤顯示出來，而不是留一個空白框。

證據比猜測有用

「沒作用」其實是「被擋住」。縮圖有畫出來，只是被開著的面板擠到看不見。現在輸入框上方那一排會自動縮小：先拿掉邊框，再拿掉圖，最後只留按鈕。

不要只靠一個地方啟動。對話中途執行 /reload-plugins 之後，負責啟動的那段程式不一定會跑，背景工作就默默沒開始。現在改成好幾個地方都能啟動，哪一個先跑到就由它啟動。

哪些實測過，哪些還在等確認

約 2000 行 TypeScript 程式碼，32 個測試全過。不經過 mosh 時，滑鼠預覽和側邊面板都實測可用；mosh 下面板的字元畫面也實測過。mosh 下輸入框上方的縮圖，關掉舊外掛之後還在等最後確認。影片預覽跟著舊外掛一起停用了，之後再補。

不確定圖送得到，就用字元畫，至少一定看得到東西。

想自己試的話

cc-preview 開源了，程式公開在 GitHub：https://github.com/andrew54068/claude-plugins/tree/main/cc-preview

在 Claude Code 裡跑這兩行就裝好：

/plugin marketplace add andrew54068/claude-plugins
/plugin install cc-preview@andrew54068

需要 Claude Code 2.1.289 以上，而且要在全螢幕模式（滑鼠移上去看預覽、點開面板都靠這個）。裝好之後：

• 回覆、提示詞、工具結果裡提到的圖片或 Markdown 檔，旁邊會多一個按鈕。滑鼠移上去看預覽，點一下在側邊開啟。
• 貼圖之後、送出之前，輸入框上方就會看到縮圖。
• 面板裡的按鍵：數字 1–9 直接挑、p／n 上下一張、a 回列表、c 複製路徑、g 切換像素或字元、i／o 放大縮小、h j k l 移動、Esc 關閉。
• mosh 不用特別設定，會自動改用字元畫。走 ssh 搭配 Ghostty 或 kitty，就是真的像素。

這是接著 cc-image-view 做的，貼圖縮圖、轉檔、暫存資料夾那幾段沿用它的寫法，授權和出處都寫在 repo 的 NOTICE。