我受不了 Claude Code 的側欄，所以自己做了 CODD
我一直都是 CLI 派。
Claude Code 的桌面版其實已經做得不錯，我偶爾也會開來測試功能或做教學。但真的要進入開發狀態，我最後還是會回到終端機。不是因為桌面版不能用，而是我的專案跟 session 實在開太多了，多到原本方便的側欄，反而變成我每天最常卡住的地方。
這篇想記錄的，就是我怎麼從「側欄真的好難整理」，一路做到 VS Code 擴充功能、遠端網頁工具，最後又冒出一個新的桌面應用程式。我暫時把它叫作 CODD。
我還是比較習慣用 CLI
我用 Claude Code 開發時，大部分時間都直接在 CLI 裡操作。對我來說，CLI 的自由度比較高。要切資料夾、開新的 session、搭配其他指令，直接在終端機處理最快，也不用一直在不同畫面之間切來切去。
當然，我還是會用 Claude Code 桌面版。像是上課示範、研究新功能，或是要從另一台裝置接著操作時，桌面版就有它方便的地方。
問題通常不是功能夠不夠，而是我自己的需求太複雜。
像是我常常同時開很多專案，每個專案又不只一個 session。有些在跑課程規劃、有些在修問題、有些只是先開著，想說晚一點再回來。開到後面，session 散在不同專案裡，要找回剛才做到哪裡，光切換就會花掉不少時間。
專案一多，側欄就開始很難整理
Claude Code 桌面版遇到的問題：Claude 桌面版側欄的資料夾標題各占一整列，專案和 session 一多就不好整理。
我遇到的問題大概有兩個。
第一個是每個專案都需要顯示完整名稱和資料夾資訊。這對一般使用者很清楚，但我的專案一多，側欄很快就會塞滿。畫面能看到的數量有限，想換個順序或把相關工作放在一起，也沒有我想像中那麼順手。
第二個是那些「最近沒有用，但又不想刪」的 Project 或 session。
你會想說先留著，搞不好晚一點還要回去。可是全部留著，側欄就會越來越長；真的要移掉，我只是現在不開，又不代表後天、下禮拜不會開!?（什麼歪理 😆）
我真正想要的其實很簡單：同一個地方可以放很多專案、每個專案可以開自己的終端機和 session，而且我一眼就能看出現在在哪一個專案。
既然現成的介面不太符合我的習慣，那就先自己做一個。
把多個專案塞進同一個 VS Code：自己開發的 TermDeck
後來我做了一個 VS Code 擴充功能，叫作 TermDeck。
我過去本來就很常待在 VS Code 裡。除了寫程式，我跟 AI 對話時也不太喜歡直接在小小的輸入框裡打長文，通常會先在編輯器把內容整理好，再貼進 Claude Code。所以把專案與 terminal 的管理也放進 VS Code，對我來說很合理。
不過原本預設的 VSCode 是每一個視窗開一個專案，而就我剛剛所提到的來說，我會一次開好幾個專案，對於原本的 VSCode 就是開一大多的視窗來處理一大堆的專案，這種崩潰程度是不亞於 Claude Code 桌面版的。
所以後來我開發一個整合工具，目的就是可以在單一的 VSCode 視窗，開啟大量的專案及 Claude Code Session。
TermDeck 讓我在同一個 VS Code 視窗裡管理多個專案，以及各自的 terminal session。
TermDeck 現在主要幫我做幾件事：
- 同一個視窗可以放進很多專案，不用每個專案都再開一套 VS Code。
- 每個專案底下可以有自己的 terminal 群組，Claude Code session 不會全部混在一起。
- 專案可以設定不同顏色，切換時比較不容易看錯。
- 切換專案只是在不同 terminal 和檔案之間移動，不需要整個視窗重新載入。
- 我可以直接看到哪些 terminal 正在跑指令，不用一個一個點進去確認。
這個擴充功能我已經用了滿長一段時間，後來也把它放上 Visual Studio Marketplace。想直接看實際功能，可以到 TermDeck 的安裝頁面。
老實說，當初真的只是想解決自己的問題。結果用久之後，我開始覺得這個做法不只適合 VS Code，拿來管理遠端裝置好像也很合理。
後來又做了一個可以從手機操作的遠端版本
大概三個月前我有另外做了一個網頁工具，比較像是遠端版的 Claude Code 控制介面。
我只要連上特定網址，就可以從手機或另一台電腦看到遠端裝置上的 session，接著原本的工作繼續做。最早的版本其實只能控制單一資料夾，但我自己用過之後覺得太方便，所以功能就一直往上加。
現在我可以先在遠端裝置設定好很多專案。需要工作時，按一下就能替某個專案開新的 session，再直接跟 Claude Code 對話。
那台裝置本身比較輕量，CPU、記憶體和硬碟都不算多，所以我也很在意它現在還剩多少資源。與其偶爾連進去檢查，我乾脆把裝置狀態放在介面左下角，開網頁時就能順便看到。
網頁版 CODD 的畫面：左邊是 session 清單與裝置狀態，右邊是選取的 session，右下角是可以送出訊息的輸入區。
這張畫面大致分成四個區域：
- 左側 session 列表：可以看到目前有哪些對話，並快速切換。
- 左下裝置資訊：顯示遠端機器的狀態、儲存空間與剩餘用量。
- 右側主要畫面：顯示目前選到的 session 與對話內容。
- 右下輸入區：可以直接送出內容，位置也有特別考慮手機操作。
做著做著，我突然發現，這個遠端工具和 TermDeck 想解決的其實是同一件事，那麼何不將兩個整合在一起呢？
CODD 就是從這兩個工具長出來的
我現在正在做的 CODD，想把 TermDeck 和遠端網頁工具的經驗合在一起。
介面會保留遠端工具那種清楚的 session 管理方式，但它會是一個適合放在本機執行的桌面工具。可以替專案建立群組、用顏色區分、查看裝置狀態與剩餘用量，也能快速開啟新的 Claude Code session。
輸入區也是我很在意的一塊。
VS Code 好用的地方，就是文字可以慢慢整理。我要寫一大段 prompt、貼 Markdown，甚至先把想法改個幾次，都比在一般對話框裡舒服。CODD 會保留這種比較完整的文字輸入空間，同時支援貼上圖片，讓 Claude Code 可以直接讀畫面或圖片裡的文字。
不過我不打算把它做成另一套很重的 IDE。
它最重要的工作還是管理專案、session 和輸入內容。功能可以慢慢增加，但整體要夠輕量，不然為了管理 Claude Code 又多開一個很吃資源的程式，感覺也有點本末倒置。
CODD 桌面版開發中的畫面，是不是跟網頁版很像 😆
目前的進度
現在已經將原型給開發出來了，說實在以現在的 AI 來說，開發一個應用程式比以前快非常多。
不過這次的開發還是花了蠻多時間。從一開始跟 AI 討論構想，到後來請 AI 把 wireframe 和 mockup 畫出來；到開發的階段時，還區分為五個階段才將原型製作出來。
光原型的製作，五個階段每個大概都需要花上將近一天的時間才能跑完，總共大概花了 4 到 5 天才把原型製作完成。中途也發生非常多的狀況，比如說它的額度不足之類的，我們需要用一些方式來增加額度（真的比開發網頁還要久 😅）。
現在原型開發出來，大部分功能其實蠻接近我想要的樣子，但有一些小地方還需要再修：
- 筆記功能在輸入上有一些小問題
- RWD 切換、縮放的時候，會有略微跑版的情況
目前整體來說都很接近我想要的樣子，我希望在測試沒有問題之後再進行釋出。