ClaudeMods
☰
JA
● 0 人がオンライン ・閲覧 0 回
スポンサー作品を投稿
GitHub リポジトリ · 投稿者 KyongSik-Yoon

desktop-look

ターミナルのトランスクリプトを Claude Code のデスクトップ アプリのようにする mod。プロンプト バブル、ツール カード、情報バンドを表示します。

KyongSik-Yoon@KyongSik-Yoon

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

元の投稿の画像1
翻訳済み

この mod について

desktop-look

ターミナルのトランスクリプトをデスクトップ アプリに近づける Claude Code mod です。

前後の比較、情報バンド、実行中と失敗の状態

  • プロンプト バブル:自分のメッセージを右側の丸いバブルに置き、テーマの青で表示し、ターミナル幅の一部で折り返します
  • ツール カード:ツール呼び出し、ライブ進捗、結果が左端の1本のレールを共有するので、1枚のカードとして読めます
  • 状態を一目で確認:呼び出し中は青、エラー、ダイアログでの拒否、中断時は赤、完了後は暗くなります
  • エンジンはすべてをカード内に描画するため、各ツール固有の概要と差分は変わりません
  • プロンプト上の情報バンド:左にはこのセッションで編集した内容(✎ 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% | | 情報バンド | on | プロンプト上のバンド | | バンド:モデル | off | モデルと effort。表示しないステータス行向け | | バンド:コンテキスト | off | コンテキストの使用量。落ち着いている間は青、300k token または 70% から黄、500k token または 90% から赤。先に到達した方を使います |

費用は Claude Code が API 価格で計算したものです。サブスクリプションの請求額ではありません。

仕組み

  • UserMessage(自分のプロンプトだけ。タスク通知や他のセッションのメッセージは除く)は、右寄せで丸い境界線の Box として描画されます。
  • ToolUse、ToolGroup、ToolProgress、ToolResult は別々の描画箇所なので、1つの境界線をまたがせられません。それぞれがエンジンの行(await next(e))を包み、行の高さまで伸びる絶対位置の1列レールを加えます。エンジンがツール行の先頭に入れる空行は飛ばします。
  • レールの色は行の props、isRunning、isErrored、isInterrupted、グループの呼び出しから決まります。
  • バンドは $.state の値を読む AbovePrompt hook です。tool.call(実行中のツールと、各 Edit / Write 結果のパッチにある + / - 行)、session.measure(費用、コンテキスト)、turn.step(モデル)が値を書き込みます。新しいセッション(/clear)で集計をやり直し、reload では保持します。

開発

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 .

関連作品