ClaudeMods
☰
ZH-TW
● 0 人在線上 · 瀏覽 0 次
贊助提交作品
GitHub 儲存庫 · 發布者 KyongSik-Yoon

desktop-look

讓終端機記錄看起來像 Claude Code 桌面應用程式:提示氣泡、工具卡片與資訊列

KyongSik-Yoon@KyongSik-Yoon

KyongSik-Yoon/claude-mods/tree/main/desktop-look

原貼文圖片1
已翻譯

關於這個 mod

desktop-look

讓終端機記錄更像桌面應用程式的 Claude Code 外掛。

前後對照、資訊列、執行中與失敗狀態

  • 提示氣泡:你自己的訊息位在右側的圓角氣泡裡,文字使用主題的藍色,並在終端機寬度的一定比例處換行
  • 工具卡片:工具呼叫、即時進度與結果共用左側邊緣的一條軌道,因此會被讀成同一張卡片
  • 狀態一眼可見:呼叫執行時軌道是藍色;發生錯誤、在對話框中被拒絕或遭到中斷時是紅色;完成後變暗
  • 引擎仍會把所有內容繪製在卡片內,因此每個工具自己的摘要與差異都不變
  • 提示列上方的資訊列:左側顯示這個工作階段編輯了什麼(✎ 2 files +7 -0)以及花費了多少($0.05);右側顯示正在執行的工具(↻ Read ×3, Grep,窄畫面時為 ↻ 4 running);沒有內容可顯示時隱藏
  • 助手回覆保持不變,因此可以和 smooth-stream 一起使用
  • 僅限終端機;桌面應用程式、VS Code 與行動裝置維持各自的外觀

安裝

claude plugin marketplace add KyongSik-Yoon/claude-mods
claude plugin install desktop-look@kyongsik-mods

接著執行 /reload-plugins 或開始新的工作階段。需要支援 mods 的 Claude Code 建置版本(已在 2.1.289、全螢幕與淺色/深色主題測試)。

選項

不需要設定。要變更一項,執行 /plugin configure desktop-look@kyongsik-mods(或開啟 /config):

| 選項 | 預設值 | | | --- | --- | --- | | 氣泡寬度 | 75% | 終端機的 60%、75% 或 90% 寬度 | | 資訊列 | 開啟 | 提示列上方的資訊列 | | 資訊列:模型 | 關閉 | 模型與 effort,供不顯示這些內容的狀態列使用 | | 資訊列:上下文 | 關閉 | 上下文填充:平穩時為藍色,從 300k token 或 70% 起變黃色,從 500k token 或 90% 起變紅色,以先到者為準 |

費用是 Claude Code 依 API 價格計算的金額;使用訂閱時,那不是實際向你收取的金額。

運作方式

  • UserMessage(只有你自己的提示,不包含任務通知或其他工作階段的訊息)會繪製成右對齊、帶圓角邊框的 Box。
  • ToolUse、ToolGroup、ToolProgress 與 ToolResult 是分開的渲染位置,因此單一邊框無法跨過它們。每個位置都會包住引擎自己的列(await next(e)),加上一條絕對定位的單欄軌道,延伸到該列高度,同時略過引擎開啟工具列時放入的空白列。
  • 軌道顏色來自行的 props:isRunning、isErrored、isInterrupted 與群組中的呼叫。
  • 資訊列是讀取 $.state 中數值的 AbovePrompt hook,由 tool.call(執行中的工具,以及每個 Edit 和 Write 結果補丁中的 +/- 列)、session.measure(費用、上下文)與 turn.step(模型)寫入。新的工作階段(/clear)會重新開始累計;重新載入會保留累計值。

開發

claude plugin validate .
claude plugin test .

安裝

請先查看作者 README,確認 marketplace 與外掛名稱;指令可能隨儲存庫結構而變動。

claude plugin marketplace add KyongSik-Yoon/claude-mods
claude plugin install desktop-look
原文 / README

desktop-look

A Claude Code mod that makes the terminal transcript look more like the desktop app.

Before and after, the info band, running and failed states

  • Prompt bubbles: your own messages sit on the right in a rounded bubble, their text in the theme's blue, wrapping at a share of the terminal width
  • Tool cards: a tool call, its live progress and its result share one rail down the left edge, so they read as one card
  • State at a glance: the rail is blue while a call runs, red when it errored, was refused at the dialog or was interrupted, and dim once done
  • The engine still draws everything inside a card, so each tool's own summary and diff are unchanged
  • Info band above the prompt: what this session edited (✎ 2 files +7 -0) and spent ($0.05) on the left, the tools running (↻ Read ×3, Grep, or ↻ 4 running when narrow) on the right; hidden when there is nothing to show
  • Assistant replies are left alone, so it works alongside smooth-stream
  • Terminal only; the desktop app, VS Code and mobile keep their own look

Install

claude plugin marketplace add KyongSik-Yoon/claude-mods
claude plugin install desktop-look@kyongsik-mods

Then run /reload-plugins or start a new session. Requires a Claude Code build with mods support (tested on 2.1.289, fullscreen and light/dark themes).

Options

No setup needed. To change one, run /plugin configure desktop-look@kyongsik-mods (or open /config):

| Option | Default | | | --- | --- | --- | | Bubble width | 75% | 60%, 75% or 90% of the terminal | | Info band | on | The band above the prompt | | Band: model | off | Model and effort, for a status line that does not show them | | Band: context | off | Context fill, for a status line that does not show it: blue while calm, yellow from 300k tokens or 70%, red from 500k tokens or 90%, whichever comes first |

The cost is what Claude Code computes at API prices; on a subscription it is not what you are billed.

How it works

  • UserMessage (your own prompts only, not task notifications or other sessions' messages) is drawn as a right-aligned Box with a round border.
  • ToolUse, ToolGroup, ToolProgress and ToolResult are separate render sites, so one border cannot span them. Each wraps the engine's own row (await next(e)) and adds an absolutely positioned one-column rail that stretches to the row's height, skipping the blank line the engine opens a tool row with.
  • The rail colour comes from the row's props: isRunning, isErrored, isInterrupted, and the calls of a group.
  • The band is an AbovePrompt hook reading values in $.state, written by tool.call (tools running, and the +/- lines of each Edit and Write result's patch), session.measure (cost, context) and turn.step (model). A new session (/clear) starts the tally over; a reload keeps it.

Develop

claude plugin validate .
claude plugin test .

更多類似作品