Claudeデスクトップを魔改造して見やすくした｜Claude Codeの新機能「Mods」でトークン消費とサブエージェントを可視化した記録

• Claude
• AI
• システム開発
• 地方中小企業

Claudeを使っていて、「いま、自分はどれくらい使ったんだろう」と不安になったことはありませんか？

ClaudeのProやMaxのプランには、5時間ごとの枠と、1週間の枠があります。どちらも使い切ったら、次のリセットを待つか、追加の使用量（使用量クレジット）を使うことになります。しかもClaude Codeは、仕事の途中で「サブエージェント」と呼ばれる子分を、何体も同時に動かすんです。誰が何をしているのか、どれがいちばんトークンを食っているのか。画面を見ても、よく分からないんですよ。

今回私は、2026年10月1日にAnthropicが発表した新機能「Mods」を使って、Claudeデスクトップの右側に、トークンの消費ゲージとサブエージェントの動きを出す専用パネルを作ってもらいました。名前は「Token Flow」です。

しかも、私がコードを入力した跡はありませんでした。依頼から直しまでの作業の記録を見直すと、私が打ち込んでいたのは、日本語の文章と、/reload-plugins のような短いコマンドだけです。依頼から、Claudeが「本体はできあがりました」と報告してくるまで、約32分。

ただ、そのあとに4回つまずきました。確認ダイアログを閉じてしまった。図が小さすぎた。目の色が違った。リロードしても変わらなかった。この記事は、その4日間の記録です。実際に使った画面のスクリーンショットを添えて、何が起きたのか、どう直したのかを順番に見ていきます。

Modsとは？Claude Codeの画面に「自分専用の部品」を足せる新機能

まず、Modsの正体から整理します。

Modsは、2026年10月1日にAnthropicが発表した、Claude Codeの新機能です。公式の説明では、「Claude Codeの動き方を変える、小さなTypeScriptの関数」。プロンプトを書き換える、新しい画面を足す、組み込みの機能を置き換える、まったく新しい機能を足す。そういうことができるとされています（Anthropic公式発表）。

ここ、大事なポイントがあります。

Modsが動く場所は、Claudeデスクトップの「Codeタブ」

Modsが使えるのは、Claude Codeです。ターミナルで動くCLIと、デスクトップアプリの「Code」タブ。ふだんのチャット画面（会話のタブ）は、公式の一覧に入っていません。この記事で「Claudeデスクトップ」と書いているのは、デスクトップアプリのCodeタブのことです。

主な条件は2つあります。1つ目は、Claude Codeがv2.1.287以降であること。このバージョン以降は、最初からModsが有効になっています。2つ目は、WindowsでWSLを使っているデスクトップのCodeタブでは、プラグインそのものが使えないことです。なお、VS Codeの拡張のチャット画面や claude -p では、Modは動きますが、画面には何も描かれません（公式ドキュメント）。

「Claude Codeって何？」という方のために、ひとことだけ。パソコンの中のファイルを読み書きしたり、コマンドを動かしたりしながら、仕事を進めてくれるClaudeの使い方です。

なお、この記事の図は、タップ（クリック）すると大きく開きます。閉じるときは、右上の「閉じる」を押してください。スマホで読んでいる方は、拡大してご覧ください。

仕組みは「合図」と「差し込み」

図1を見てください。仕組みは、意外とシンプルなんです。

Claude Codeは、何かするたびに「イベント」という合図を出します。ツールを呼ぶ、許可を求める、サブエージェントを起動する、画面の一部を描く。Modは、その合図に差し込まれる小さな関数です。合図の前に動くことも、後に動くことも、代わりに動くこともできます。その結果が、画面のパネルやボタンとして出てきます。

「フック（hooks）とは違うの？」と思った方もいるでしょう。Claude Codeには、前から「フック」という仕組みがありました。ただ公式の説明では、フックにはイベントの書き換えも、新しい画面の描画も、機能の置き換えもできませんでした。Modsは、それができます。

つまりModsは、Claude Codeの中に自分の道具を置ける機能です。

公式のサンプルと、気をつけたいこと

公式（ClaudeDevsのX）では、サンプルが3つ紹介されています。1つ目は「Token Weather」。コンテキスト（会話の記憶）がどれくらい埋まっているかの予報と、直近12ターンの推移を表示します。2つ目は「Blast Radius」。rm -rf のような危ないコマンドを実行する前に止めて、影響の範囲を横のパネルに出します。3つ目は「Replay Theater」。1ターンでClaudeが行ったファイルの編集を、1つずつ再生します（ClaudeDevs（X））。

私が作ってもらったToken Flowは、Token Weatherに近い発想です。ただ、5時間と1週間の枠と、サブエージェントの動きまで広げています。

そして、気をつけたいことが1つ。

「魔改造」と書きましたが、これはAnthropicが公式に用意した拡張の仕組みの範囲の話です。裏技ではありません。公式発表でも、Modsは、プラグインに入れて共有し、ディレクトリに提出できるものとして紹介されています。

私が頼んで作ってもらったのは「Token Flow」｜消費ゲージとサブエージェントを見るパネル

作ってもらったModの名前は、「Token Flow」。トークンの流れ、という意味です。

頼んだのは、日本語の1文だけ

2026年10月8日の16時8分。デスクトップアプリのCodeタブで、次の1文を打ち込みました。

「トークン数の使用状況がわかるレベルゲージ（週間、5時間、そのセッションの3種類）と、サブエージェントとエージェントの動き、関係、データの流れなどがわかるインフォグラフィック的なものを表示するmodsを作成してください。」

これが依頼のすべてです。プログラミング言語の名前も、ファイルの置き場所も、書いていません。

7月に作った「ブラウザの管制室」を、アプリの中へ

実は、サブエージェントの動きを見る道具は、Modsより前に作っていました。2026年7月31日に作った「もち管制室」です。Claude Codeの作業記録を読んで、サブエージェントの動きをブラウザで見られるようにしたものでした。

ただ、見るたびに、ブラウザで別の画面を開く必要があります。10月8日の17時19分、別のセッションで、そのときの画面を見せながらこう聞きました。

「サブエージェントの可視化はこんなふうにできますか？」

続けて、こう伝えています。「デスクトップアプリ内で見られたらいいです。別になるなら、通常の SVG でいけます。」

Modsなら、アプリの中に出せます。このあと、見た目はロボットが管制室で働く雰囲気に作り直され、10月8日の17時45分に、登録した版へ統合されました。

3本のゲージの読み方｜「セッション」は2種類ある

完成したパネルの上半分には、3本のゲージが並びます。図の番号と合わせて見ていきましょう。

図2は、私のClaudeデスクトップの実際の画面です。数字は、作業中のある時点のものです。

ここで、ややこしい話をひとつ。「セッション」という言葉には、2つの意味があるんです。

ごっちゃになりやすいので、公式ヘルプの説明も確認しておきましょう。ProとMaxのプランには、5時間の枠と週間の枠があります。そして、Claudeのチャットで使った分も、Claude Codeで使った分も、同じ枠に数えられるんですよ（Claudeヘルプセンター）。週間の枠のリセットは、アカウントごとに決まった曜日と時刻です（Proプラン・Maxプランのヘルプ）。

読み方のコツは、バーの下にある「▲」の印です。これは、枠の時間がどれだけ過ぎたかを表します。画面の注意書きにも、「▲ は窓の時間の経過。点灯がこの印より左なら、リセットまで持つペースです」と出ます（図2では、右端が「…」で省略されています）。

図2の例で見てみましょう。5時間のゲージは、時間が71%過ぎたのに、使用は19%です。点灯が▲より左に収まっているので、使い切る前にリセットされるペースだと読めます。週間も、時間の経過が21%に対して、使用は14%。こちらにも余裕があります。

数字とバーの色にも意味があります。数字は、60%以上で黄色、85%以上で赤。バーは区画ごとに色が変わり、60%を超えた先が黄色、85%を超えた先が赤です。図2のセッションは66%なので、数字は黄色で、バーも右端の数マスだけ黄色になっています。5時間か週間のゲージが80%と95%を超えると、通知も出る作りです。

いちばん下の「セッション累計」には、Token Flowが記録を始めてから、このセッションで処理した量が出ます。新規入力が843k、出力が226k、キャッシュ読込が53.28M。費用の目安は$42.85です。ただし、これはAPI料金に換算した目安で、サブスクリプションの請求額とは別物です。画面にも、そう書いてあります。

数字を並べると、分かることがあります。キャッシュ読込の53.28Mは、新規入力の843kの約63倍です。長い会話では、前の内容を毎回読み直すぶんが積み上がっていくんですね。見えていなければ、気づきようのない数字です。

サブエージェントの動きを、ロボットで見る

パネルの下半分は、サブエージェントの図です。

サブエージェントとは、Claude Codeが、調査や検証などの仕事を別のClaudeに任せる仕組みです。親（メイン）が子に指示を出し、子が報告を返します。子がさらに別のエージェントを呼んだ場合も、親子の関係が段になって描かれます。

図3は、実機の画面ではありません。Token Flowの描画コードに、架空のサンプルデータを渡して描いた図です。実際のパネルと同じ描画コードで描いていますが、数字もエージェントの名前も、すべて作り物です。

見方は6つあります。まず、いちばん大事な3つから。

残りの3つは、こうです。「RUNNING」の札は、いま動いているエージェントに付きます。線の上を流れる点は、作業中のしるしです。ただし、点の数や速さは、作業の量を表しません。そして「tok」は、そのエージェントが新たに処理したトークンの数です。キャッシュの再読込は含みません。

パネルのいちばん下には、「直近の流れ」という一覧もあります。誰が誰に、何文字の指示を出し、何文字の報告が返ってきたか。それが新しい順に並ぶんです。サブエージェントを使うと、裏で何が起きているのか見えにくくなりがちですよね。この一覧が、そのすき間を埋めてくれます。

Modsに日本語で頼んだら、32分で初版ができた｜4日間の記録

では、実際の経過を見ていきましょう。

図4が、10月8日から11日までの記録です。時刻は、作業中の会話ログから拾いました。赤い丸が私の依頼と質問、黒い丸が「できた・直した」、白抜きの丸がつまずきです。

16時8分に依頼を送り、16時40分には、Claudeが「本体はできあがりました」と報告してきました。32分です。この間、私が打ち込んだ言葉は、最初の1文のほかにありません。

その間、Claudeは次のことをしていました（作業の記録から）。まず、Modsの部品の仕様書にあたる型定義を読んで、タイマー、パネル、状態管理、テスト用キットの使い方を確認していたんです。そのうえで設計の方針を決め、ゲージとサブエージェント図の描画を書き進めました。途中で検証ツールから「$ はファイル先頭で宣言した関数にしか渡せない」と指摘されたときも、その場で直しています。実際のブラウザで描いて文字が重ならないかを確かめたのも、テストを10件書いて通したのも、この間のことです。最後に、別のエージェントへ独立したコードレビューを頼んでいます。

そのレビューの結果は、17時2分に届きました。Claudeが私に報告してきたのは17時4分です。重大な欠陥は見つからず、表示の正確さに関わる「中」の指摘が2件、「軽微」な指摘が9件。これも反映されました。

つまり、私がやったことは、「頼む」「待つ」「見る」「伝える」「選ぶ」の5つです。ここから先の私の出番は、見て気づいたことを伝えることと、示された選択肢から選ぶことでした。

ちなみに、できあがったToken Flowの規模は、全部で約2,770行です。テスト422行（21件）を含みます。もちろん、私が打ち込んだ行ではありません。

つまずき①｜確認ダイアログを閉じてしまった

最初のつまずきは、確認ダイアログでした。

Modsを作ってもらうと、Claude Codeは「このセッションでホットリロードを有効にしますか？（Enable hot reloading for this session?）」という確認を出します。ホットリロードとは、Modを動かしたまま、直した内容をその場で反映する仕組みです。「有効にする」を選ぶと、ターンの終わりにModが読み込まれます（公式ドキュメント「Create a mod」）。

この確認が出るのは、Claudeが最初のファイルを保存したときです。私は、その確認を閉じてしまったんです。

確認は、それきり出ませんでした。そこで、こう打ちました。

「確認が出なかったので、別の方法を教えて」

Claudeは、確認がもう一度出ない理由を、「…同じセッションでスキルを読み直しても確認がもう一度は出ない仕組みだったためだと思います」と見立てました。続けて、別の方法を3つ示しています。

私は、1つ目を選びました。

実はこれ、公式ドキュメントの案内とも合っています。公式には、ホットリロードで作ったModは、そのセッションだけで動き、フォルダは後で片付けられる、とあります。残したいなら、フォルダをコピーして、ふつうのプラグインと同じように入れる。つまり、「常に使えるよう登録」は、正攻法でした。

登録のあと、Claudeは「登録メッセージだけで済ませず、実際の設定に入ったかを読み直して確かめます」と言って、設定を確認しました。Modの名前は token-flow。「claude-mods」という自分用のローカルなマーケットプレイスに置いて、ユーザー範囲で有効になっていることを確かめています（16時48分）。

不要になったら、止めるのは1行です。

claude plugin disable token-flow@claude-mods

つまずき②｜サブエージェントの図が小さすぎて見えない

次は、見た目の問題です。

デスクトップアプリで実際に開いたところ、サブエージェントの図が、とても小さく表示されました。10月8日の17時54分、スクリーンショットを添えて、こう伝えました。

「サブエージェントの可視化のところが小さすぎて全然見えないので、今スクショしたところ、左右の余白がたくさん空いているのを全部目一杯使って、縦方向にも大きく使ってほしいです。」

そのときのスクリーンショットを見てみましょう。

実際のデスクトップの画面です。版の印が付く前の状態で、左の会話欄は、ぼかし済みです。

上のゲージは、パネルの幅いっぱいに出ています。ところが、下のサブエージェントの図は、白い余白の真ん中に、小さな暗い箱がぽつんと入っているだけ。文字は読めません。

原因を突き止めたのは、Claudeでした。この図は、アニメーションを動かすために、「枠（iframe）」という、画面の中の小さな窓に入れて描かれています。その枠の高さが、既定の約150pxのまま固定されていました。図の全体が、その低い枠に収まるよう縮められていたのです。

直し方は4つです。枠の高さを、図の高さに合わせて渡す。パネルの幅いっぱいに描く。図そのものを、約1.2倍にする。枠の白い地が見えないように、背景色を図自体に持たせる。17時57分に、Claudeが直したと報告してきました。翌日のスクリーンショットでは、図は幅いっぱいに出ています。

注目してほしいのは、私が伝えたのは、見たままの感想と、どうしてほしいかという希望、そしてスクリーンショットだけだったことです。

つまずき③｜目の色が、どのモデルの色にもなっていない

10月9日の16時38分。今度は、色の問題です。

図3で見たとおり、ロボットの目の色は、モデルを表します。ところが、私の画面では、ロボットの目が灰色のままでした。こう伝えています。

「目の色イコールモデルになってますが、どのモデルの色にもなってないです、現実は。」

実際のデスクトップの画面です。右下の版の印は「v0.1.1」。画面の下のほう、「メイン」のロボットの目が、凡例にあるOpus・Sonnet・Haiku・Fableのどの色でもない、灰色になっています。

原因は、メインのモデル名を取るタイミングでした。Claudeの説明によると、メインのモデルは、ターンが終わったときにしか記録していませんでした。開いたばかりのセッションや、長く続いているターンの途中では、モデルが分からないまま。それで「不明」の灰色になっていたのです。

直し方は、セッションの開始時と、ターンを始めるたびに、使っているモデルを問い合わせることです。/model で切り替えても、追いかけてくれます。あわせて、凡例には、いま図に出ているモデルの色だけを並べるようにしました。claude-opus-5-5[1m] のように、名前の後ろに [1m] や日付が付いていても、「Opus 5.5」と読めるようにも直っています。16時41分、Claudeが直して、版の印をv0.1.2にしました。

数分後、こう返しています。

「このセッションでは目の色が正しく反映しています」

さらに、「他のセッションでも確認できました」とも。指摘を受けて、Claudeは、モデル名の取り方そのものを見直しました。

つまずき④｜リロードしても、古い版のまま

最後のつまずきが、いちばんやっかいでした。

16時54分、別のセッションの画面を添えて、こう伝えています。

「こちらのセッションは、リロードプラグインを実行しても変わりませんでした。」

実際のデスクトップの画面です。左は、プラグインを読み直すコマンド /reload-plugins を実行した場面。右のパネルの右下には、版の印「v0.1.1」が出ています。左の会話欄は、ぼかし済みです。

画面には「Reloaded: 17 plugins · 104 skills · 57 agents · 39 hooks · 0 plugin LSP servers」と出ました。それなのに、右のパネルは「v0.1.1」のままです。

この版の印は、図の右下に出る小さな表示です。どの版が画面に出ているかを見分けるために、別のセッションのClaudeが入れてくれたものでした。この印のおかげで、「直したはずなのに、古い版が出ている」ことが、目で分かりました。

原因は、インストールの記録でした。版を0.1.2に上げたのは16時40分。ところが、インストールの記録は、0.1.1のまま残っていました。そのあとに開いたセッションは、保管されていた古い複製（v0.1.1）を読み込んでいたのです。それより前から開いていたセッションでは、目の色の直しが反映されていました（17時12分にClaudeが報告）。

直したのは、次のコマンドです。

claude plugin update token-flow@claude-mods --scope user

インストールの記録が、フォルダの版（0.1.2）にそろったことを、Claudeは確認しています。

正直に書いておくと、「なぜ読み込み先が分かれたのか」までは、突き止められていません。Claude自身も、「読み込み先がなぜ分かれるのかまでは突き止めていません」と報告しています。分かっているのは、直した手順だけです。

ここまでで決めたルールは、2つです。

10月11日｜手で閉じたら、そのセッションだけ閉じる作りに

最後は、質問でした。10月11日の17時20分です。

「Token Flow パネルの modは明示的に起動させないといけないのでしょうか？」

コードを見ると、デスクトップ（ターミナル以外の画面）では、セッションを開始したときに、自動で開く作りです。ただし、そのときの仕様では、パネルを手で閉じると、それが全セッション共通で覚えられました。どのセッションでも、自動では開かなくなる作りだったのです。

Claudeは、この扱いを変えるかどうか、選択肢を示してくれました。

私は、1つ目を選びました。これがv0.1.3です（17時38分）。

「×で閉じる」動きは、テスト用の仕組みでは「本人が閉じる」操作を再現できないため、実機でしか確かめられない、とClaudeは報告しています。

ここまでの4つのつまずきを、原因と直し方の順にまとめます。

Modsを試すときのコツ｜非エンジニアが4回つまずいて分かったこと

ここまでの記録から、Modsを試すときのコツを、3つにまとめます。

頼み方：見たいものを名指しする

私の依頼は、ゲージを「週間、5時間、そのセッションの3種類」と名指しして、図で見たいものを「サブエージェントとエージェントの動き、関係、データの流れ」と並べたものでした。この1文で、32分後に初版ができたんです。何を、どこに、どう見たいのか。そこを言葉にすることが、頼む側のいちばんの仕事になります。

直し方：感想とスクリーンショットで伝える

「…小さすぎて全然見えない…」「…どのモデルの色にもなってないです…」。私が伝えたのは、そういう見たままの感想と、どうしてほしいかという希望です。それに、スクリーンショットを添えました。原因を探すのは、Claudeの仕事です。

残し方：登録、コピー、版の3つを押さえる

ホットリロードで作ったModは、そのセッションだけのものです。使い続けるなら、プラグインとして登録します。登録したら、直す場所は1つに決める。そして、直したら版を上げて、plugin update まで行う。画面に版の印を出しておくと、どの版が動いているかを、目で見分けられます。

安全の面では、2つ、決めておきたいことがあります。

Token Flowは、サブエージェントやツールの動きを「見る」だけで、結果を変えない作りです。別のエージェントによるコードレビューでも、セッションを止めたり書き換えたりする経路は見つからなかったと報告されています。

作ってみて分かったこと｜「見える」と、使い方を決めやすくなる

ここまでの記録で、事実として分かったことを整理します。

5時間と週間の枠は、時間の経過と並べて見ると、余裕があるかどうかが分かります。図2では、時間が71%過ぎて、使用は19%でした。長い会話では、キャッシュ読込が積み上がり、新規入力の約63倍になっていました。サブエージェントは、モデルも、世代も、状態も、処理した量も、1つの画面で見えます。

ここからは、私の見解です。

数字が見えると、使い方を決めやすくなります。「5時間の枠が余っているから、重い調査をいまのうちに頼んでおこう」「週間の枠が減ってきたから、軽い作業は小さいモデルに任せよう」。そういう判断は、見えていなければ、しにくいものです。見えないままだと、不安のせいで使いたいときに使えなかったり、気づかないうちに使い切ってしまったりしがちです。

もうひとつ、私の場合に言えることがあります。非エンジニアの私でも、日本語で頼めば、自分の道具を作ってもらえました。ただし、それには「何を見たいのか」を言葉にする力が要ります。今回の1文が通じたのは、見たいものを具体的に並べたからだと、私は考えています。

会社で使うなら、公式が用意している管理の仕組みも知っておきたいところです。公式発表によると、TeamとEnterpriseのプラン、および管理された環境では、「sec-default」という組み込みのModが最初に読み込まれ、ユーザーが入れたModが、拒否ルールを上書きするといった危ない動きをしないよう制限します。管理者は、プラグインのマーケットプレイスを許可したり、ブロックしたりもできます。

Token Flowは、私のパソコンで使うために作ったものです。社内で配るなら、何を読み書きするのかを確認して、管理者の許可を得てから、という順番になります。

株式会社カンマンでは、Claudeをはじめとする生成AIの研修と、導入の相談を受けています。「自社の仕事で、何を見える化したいのか」から、一緒に考えることもできるんですよ。気になる方は、カンマンのサービスとセミナーをご覧ください。

よくある質問

Modsは、ふだんのClaudeのチャット画面でも使えますか？

公式が挙げている使える場所は、Claude CodeのCLIと、デスクトップアプリのCodeタブです。ふだんの会話のタブは、その一覧に入っていません。

プログラミングができなくても作れますか？

私の場合は、日本語の依頼と感想、それに /reload-plugins のような短いコマンドだけで、動くところまで進みました。ただし、Claude Codeを使える環境が前提です。v2.1.287以降のClaude Codeで、デスクトップのCodeタブか、CLIを使います。

追加料金はかかりますか？

公式発表には、Mods自体の追加料金についての記載は見当たりません。ただ、Claudeに作ってもらう作業も、ふだんのClaude Codeの利用と同じ扱いです。サブスクリプションなら、5時間の枠や週間の枠を使います。また、公式ドキュメントには、Modが、あなたのプランやAPIキーでモデルを呼び出せると書かれています。呼び出した分は、使用量として数えられるわけです。

他の人に配れますか？

できます。公式発表では、プラグインに入れて共有し、Claudeのディレクトリに提出できるとされています。プラグインに必要な設定ファイルを添えて、ローカルのフォルダをGitHubに上げ、/plugin install で入れてもらう方法もあるんですよ。

Windowsでも使えますか？

公式ドキュメントでは、WindowsでWSLを使っているデスクトップのCodeタブは、プラグインが使えないと書かれています。

まとめ

結論から言います。Modsを使えば、Claudeデスクトップの右側に、自分専用のパネルを置けます。私は、日本語の1文で、トークンの消費ゲージとサブエージェントの動きを出すパネルを作ってもらいました。

つまずいたのは4回。確認ダイアログ、図の大きさ、目の色、古い版。どれも、私がしたのは、見たままと、してほしいことを伝えて、示された選択肢から選ぶことでした。原因を探して直したのは、Claudeです。ただし、Claude Code本体と同じ権限で動く機能です。入れるのは、信頼できるものだけにしてください。

まずは、Claude Codeのバージョンを確認して、見たいものを日本語で1文、頼んでみてください。「何を、どこに、どう見たいか」を具体的に書くのが、いちばんのコツです。自社の仕事に合う使い方を一緒に考えたい方は、お問い合わせからご連絡ください。

参考・出典

• Anthropic「Customize Claude Code with mods」（2026年10月1日）
• Claude Code Docs「Mods overview」
• Claude Code Docs「Create a mod」
• Claudeヘルプセンター「Use Claude Code with your Pro or Max plan」
• Claudeヘルプセンター「What is the Pro plan?」
• Claudeヘルプセンター「What is the Max plan?」（週間の枠のリセット）
• ClaudeDevs（X）2026年10月1日の投稿
• 作業の会話ログ（2026年10月8〜11日）と、Token Flowのソースコード（計2,770行）

上記のリンクは、2026年10月12日に確認しました。