---
title: "now-playing"
url: "https://claudemods.dev/ja/builds/now-playing-7dfef7"
source: "https://github.com/hamzafer/claude-code-mods/tree/main/mods/now-playing"
source_type: "github"
repo: "https://github.com/hamzafer/claude-code-mods/tree/main/mods/now-playing"
author: "hamzafer"
author_handle: "hamzafer"
stars: 164
category: "その他"
categories: ["other"]
tags: []
permission_level: 3
scan_complete: true
install: "claude plugin marketplace add hamzafer/claude-code-mods\nclaude plugin install now-playing"
added: "2026-10-09T05:21:51.930Z"
updated: "2026-10-08T13:27:14Z"
locale: "ja"
content_locale: "ja"
---

# now-playing

Spotify が再生している内容を、プロンプトの上に 1 行で表示：トラック、進捗、歌われている歌詞、そして ⏮ ⏸ ⏭ ボタン付き。/music でも操作できます。macOS。

## Description

<p align="center"><img src="images/claude-wave.gif" alt="" width="40"></p>

<h1 align="center">Claude Code mod</h1>

<p align="center"><b>Claude Code に何をしているかを表示させます。</b><br>Claude Code 用のプラグイン。関数フックを基盤にしています：プロンプトの上のライブ行、ガード、ペイン、ゲーム。欲しいものだけをインストールしてください。</p>

<p align="center">
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT"></a>
  <a href="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml"><img src="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI"></a>
</p>

<p align="center">
  <a href="#-install">インストール</a> · <a href="#-the-mods">すべての mod</a> · <a href="docs/mods.md">ドキュメント</a> · <a href="https://claude.dev/blog/getting-started-with-claude-code-mods/">mod とは？</a>
</p>

<table>
  <tr>
    <td align="center" width="33%"><a href="docs/mods.md#-context-bar"><img src="images/context-bar.png" alt="context-bar：Claude Code のコンテキストウィンドウ使用量を積み上げ棒グラフで表示、カテゴリごとに色分け" width="260"></a><br>📊 <b>context-bar</b><br>コンテキストを何が埋めているか</td>
    <td align="center" width="33%"><a href="docs/mods.md#-review-watch"><img src="images/review-watch.png" alt="review-watch：Claude Code で実行中の Codex とサブエージェントのコードレビューの行をライブ表示" width="260"></a><br>🔍 <b>review-watch</b><br>実行中のコードレビューをライブで</td>
    <td align="center" width="33%"><a href="docs/mods.md#-md-preview"><img src="images/md-preview.png" alt="md-preview：Claude Code が編集する Markdown を、diff の隣に GitHub のようにレンダリング" width="260"></a><br>📝 <b>md-preview</b><br>GitHub のようにレンダリングされた Markdown</td>
  </tr>
  <tr>
    <td align="center" width="33%"><a href="docs/mods.md#-blast-radius"><img src="images/gallery/blast-radius.png" alt="blast-radius：Claude Code のフックが rm -rf を止め、削除されるファイルを一覧表示" width="260"></a><br>💥 <b>blast-radius</b><br><code>rm -rf</code> が何を削除するかを見る</td>
    <td align="center" width="33%"><a href="docs/mods.md#-now-playing"><img src="images/now-playing.png" alt="now-playing：Claude Code 内の Spotify トラック、プログレスバー、同期歌詞" width="260"></a><br>🎵 <b>now-playing</b><br>Spotify とその歌詞をライブで</td>
    <td align="center" width="33%"><a href="docs/mods.md#-reels-and-snake"><img src="images/reels-demo.gif" alt="reels：Claude Code が作業している間にペインで YouTube Shorts を再生" width="260"></a><br>📱 <b>reels</b><br>Claude が作業中に Shorts</td>
  </tr>
  <tr>

    <td align="center" width="33%"><a href="docs/mods.md#-where-am-i"><img src="images/gallery/where-am-i.png" alt="where-am-i：セッション目標、現在のステップ、あなたを待つもの、Claude Code プロンプトの上" width="260"></a><br>📍 <b>where-am-i</b><br>目標、現在、あなたを待つもの</td>
    <td align="center" width="33%"><a href="docs/mods.md#-lines-above-the-prompt"><img src="images/gallery/lines.png" alt="token-weather、usage-meter、その他の Claude Code ステータス行がプロンプトの上に積み重なる" width="260"></a><br>🌦️ <b>token-weather と仲間たち</b><br>プロンプトの上の行</td>
    <td align="center" width="33%"><a href="#mission-control"><img src="images/gallery/mission-control.png" alt="mission-control：Claude Code サブエージェント、ツール呼び出し、そしてそれらが触れるファイル、ライブ" width="260"></a><br>🛰️ <b>mission-control</b><br>エージェントとそれらが触れるコード</td>
  </tr>
</table>

## 🚀 インストール

マーケットプレイスを一度追加すれば、あとは名前で任意の mod をインストールできます：

```sh
claude plugin marketplace add hamzafer/claude-code-mods
claude plugin install context-bar@claude-code-mods
```

または汎用セットを一括でインストール：

```sh
for m in context-bar token-weather usage-meter where-am-i next-steps agent-radar review-watch replay-theater md-preview blast-radius mission-control; do
  claude plugin install "$m@claude-code-mods"
done
```

インストール後は Claude Code を再起動してください。インストールせずに試したい場合は：

```sh
git clone https://github.com/hamzafer/claude-code-mods && cd claude-code-mods
claude --plugin-dir mods/context-bar
```

> **必要** Claude Code 2.1.287+。一部の mod はさらに多くを必要とします（Chrome、`gh`、コネクタ）。どれが必要かは表に記載しています。

## 🧩 mod 一覧

### 👀 何が起きているかを見る

| | Mod | 何をするか | コマンド |
| --- | --- | --- | --- |
| 🛰️ | **mission-control** | agents、ツール呼び出し、それらが触れるコードのライブマップ | `/mission` |
| 📊 | **context-bar** | コンテキストウィンドウを1本の積み上げバーで表示。カテゴリごとに色分けし、トークン数と圧縮が起きる位置も表示 | `/context-bar` |
| 🌦️ | **token-weather** | コンテキストの埋まり具合を Clear から Compact soon まで表示。プロンプトキャッシュのカウントダウン付き | |
| ⏱️ | **cache-clock** | ステータスラインの下に表示されるプロンプトキャッシュの行。Claude Code 自身の数値を使用：残り時間、ヒット率とミス、キャッシュが冷えたときに次のメッセージが再キャッシュするトークン。Node と Claude Code 2.1.251+ が必要 | `/cache-clock setup` |
| 📍 | **where-am-i** | 目標、現在行っていること、あなたの対応待ち、次のステップ | `/where` |
| ➡️ | **next-steps** | 各ターン後に 2 つか 3 つの次にありそうなプロンプト。キー1つで下書き | `1` `2` `3`、`0` で非表示 |
| 💰 | **usage-meter** | 5時間および7日間プランの使用量、リセットまでのカウントダウン、セッションのコスト | |
| 💳 | **openai-balance** | あなたの OpenAI API クレジット：ゲージ付きの推定残高、本日の支出、主にどこへ使われたか、最後の呼び出し。OpenAI 組織の Admin キーが必要 | `/openai-balance` |
| 📡 | **agent-radar** | 実行中のサブエージェントごとに1行のライブ表示 | `/radar` |
| 🔍 | **review-watch** | 実行中のコードレビュー（Codex またはレビュー用サブエージェント）ごとに1行のライブ表示。モデル、対象、経過時間、Codex の最新出力付き。終了時にトーストで所見を一覧表示 | |
| 🌐 | **browser-lanes** | このセッションにブラウザがあるかどうか、そして誰が保持しているか | `/browser` |
| 🕌 | **prayer-times** | 現在の礼拝と残り時間、次の礼拝、そして zawal。あなたのコンピュータ上で計算。ハナフィーまたは標準の Asr | `/prayers` |
| 🎬 | **replay-theater** | 前のターンの編集を1つずつ diff で順に表示 | `/replay` |
| 📝 | **md-preview** | Claude が編集する Markdown ファイルを GitHub のようにレンダリング。前後を並べて表示。Chrome と画像を表示できるターミナルが必要 | `/md` |

### 🛡️ リポジトリを守る

| | Mod | できること | コマンド |
| --- | --- | --- | --- |
| 💥 | **blast-radius** | `rm -r`、force push、マイグレーションを保留し、何を削除するかを表示し、60 秒応答がなければキャンセルします | |

### 💸 支出を減らす

| | Mod | できること | コマンド |
| --- | --- | --- | --- |
| 🔀 | **switchboard** | モデルを指定していない各サブエージェントについて、その短いラベルだけに基づき、[OpenAI の Decisions API](https://developers.openai.com/api/docs/guides/decisions) または [Jev](https://docs.typesafe.ai) でモデルを選びます。各サブエージェントのコストを表示します | `/route` |

### 🔧 私のセットアップ（フォークして調整）

これらは私自身のツールとルールに合わせて作られています。フォークして、ルールを自分のものに変えてください。

| | Mod | できること | コマンド |
| --- | --- | --- | --- |
| 👀 | **glance** | あなたを必要としているものを 1 行で表示：次の会議、PR、Linear の issue、Slack DM。`gh` と Google Calendar、Linear、Slack のコネクタが必要です | `/glance` |
| 🚦 | **merge-gate** | CI がグリーンになり、Codex が一度レビューするまで `gh pr merge` を保留します。`gh` と Codex CLI が必要です。レビューは 1 つの固定モデルで実行されます。自分のものに変更してください | `/gate` |
| 📏 | **rulebook-guard** | 私のライティングと git のルールを強制します。em dash を書き換え、`--amend`、未フォーマットの push、ノート内のメールアドレスと電話番号の前に確認します | |
| 💾 | **session-saver** | 前回どこで中断したかを保存し、再開時に表示します。[unpause](https://github.com/hamzafer/unpause) が必要です | `/park [note]` |

### 🎮 お楽しみ（オプトイン）

| | Mod | できること | コマンド |
| --- | --- | --- | --- |
| 📱 | **reels** | Claude が作業している間は YouTube Shorts を再生し、完了すると一時停止します | `/reels` |
| 🐍 | **snake** | Claude が作業している間はスネーク | `/snake` |
| 🎵 | **now-playing** | Spotify で再生中の曲、進行バー、歌われている歌詞、⏮ ⏸ ⏭ ボタン。macOS と Spotify アプリが必要です | `/music` |

<a id="mission-control"></a>

## 🛰️ フラッグシップ：mission-control

すべてのサブエージェント、すべてのツール呼び出し、そしてそれらが触れるすべてのファイルを、チャットの隣のペインに表示します。4倍速で表示：2つのサブエージェントが4つのファイルにまたがるログアウト機能を構築しています。

![mission-control 4倍速：2つのサブエージェントとログアウト機能が4つのファイルにまたがって着地する様子](images/mission-control.gif)

他のMODと同じようにインストールし、再起動して、`/mission` と入力します（コードマップを開くには `/mission code`）。`q` で閉じます。

- 🤖 `w` はエージェントとすべてのツール呼び出しをライブで表示します
- 🗺️ `c` はインポート矢印付きのコードマップを表示します
- 🔵 エージェントがファイルを読み取っている間は **青**
- 🟠 書き込んでいる間は **オレンジ**
- 🟢 完了時は **緑**、変更内容を1行で表示

> コードビューには macOS、Google Chrome、そして画像を表示できるターミナル（Ghostty、kitty、iTerm2）も必要です。Who ビューはどこでも動作します。

## 📚 詳細

- 📖 [**docs/mods.md**](docs/mods.md)：それらの動作、セットアップの注意点、そして独自のものの構築方法
- 🎥 [**docs/demo.md**](docs/demo.md)：動画とスクリーンショット
- ⭐ 以前のプロジェクト：[**cursor-commands**](https://github.com/hamzafer/cursor-commands) [![stars](https://img.shields.io/github/stars/hamzafer/cursor-commands?style=social)](https://github.com/hamzafer/cursor-commands)、Cursor スラッシュコマンドで 600+ スター
- 🤝 [**CONTRIBUTING.md**](CONTRIBUTING.md)：独自の MOD を追加する

## Install

```
claude plugin marketplace add hamzafer/claude-code-mods
claude plugin install now-playing
```

## Original README

<p align="center"><img src="images/claude-wave.gif" alt="" width="40"></p>

<h1 align="center">Claude Code mods</h1>

<p align="center"><b>Make Claude Code show what it's doing.</b><br>Plugins for Claude Code, built on function hooks: live lines above the prompt, guards, panes and games. Install only the ones you want.</p>

<p align="center">
  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT"></a>
  <a href="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml"><img src="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI"></a>
</p>

<p align="center">
  <a href="#-install">Install</a> · <a href="#-the-mods">All mods</a> · <a href="docs/mods.md">Docs</a> · <a href="https://claude.dev/blog/getting-started-with-claude-code-mods/">What are mods?</a>
</p>

<table>
  <tr>
    <td align="center" width="33%"><a href="docs/mods.md#-context-bar"><img src="images/context-bar.png" alt="context-bar: Claude Code context window usage as a stacked bar, a color per category" width="260"></a><br>📊 <b>context-bar</b><br>what fills your context</td>
    <td align="center" width="33%"><a href="docs/mods.md#-review-watch"><img src="images/review-watch.png" alt="review-watch: live lines for running Codex and subagent code reviews in Claude Code" width="260"></a><br>🔍 <b>review-watch</b><br>running code reviews, live</td>
    <td align="center" width="33%"><a href="docs/mods.md#-md-preview"><img src="images/md-preview.png" alt="md-preview: Markdown that Claude Code edits, rendered like GitHub next to the diff" width="260"></a><br>📝 <b>md-preview</b><br>Markdown rendered like GitHub</td>
  </tr>
  <tr>
    <td align="center" width="33%"><a href="docs/mods.md#-blast-radius"><img src="images/gallery/blast-radius.png" alt="blast-radius: a Claude Code hook holds rm -rf and lists the files it would delete" width="260"></a><br>💥 <b>blast-radius</b><br>see what <code>rm -rf</code> would delete</td>
    <td align="center" width="33%"><a href="docs/mods.md#-now-playing"><img src="images/now-playing.png" alt="now-playing: Spotify track, progress bar and synced lyrics inside Claude Code" width="260"></a><br>🎵 <b>now-playing</b><br>Spotify and its lyrics, live</td>
    <td align="center" width="33%"><a href="docs/mods.md#-reels-and-snake"><img src="images/reels-demo.gif" alt="reels: YouTube Shorts in a Claude Code pane while it works" width="260"></a><br>📱 <b>reels</b><br>Shorts while Claude works</td>
  </tr>
  <tr>
    <td align="center" width="33%"><a href="docs/mods.md#-where-am-i"><img src="images/gallery/where-am-i.png" alt="where-am-i: the session goal, current step and what waits on you, above the Claude Code prompt" width="260"></a><br>📍 <b>where-am-i</b><br>goal, now, waiting on you</td>
    <td align="center" width="33%"><a href="docs/mods.md#-lines-above-the-prompt"><img src="images/gallery/lines.png" alt="token-weather, usage-meter and other Claude Code status lines stacked above the prompt" width="260"></a><br>🌦️ <b>token-weather and friends</b><br>lines above the prompt</td>
    <td align="center" width="33%"><a href="#mission-control"><img src="images/gallery/mission-control.png" alt="mission-control: Claude Code subagents, tool calls and the files they touch, live" width="260"></a><br>🛰️ <b>mission-control</b><br>agents and the code they touch</td>
  </tr>
</table>

## 🚀 Install

Add the marketplace once, then install any mod by name:

```sh
claude plugin marketplace add hamzafer/claude-code-mods
claude plugin install context-bar@claude-code-mods
```

Or install the general-purpose set in one go:

```sh
for m in context-bar token-weather usage-meter where-am-i next-steps agent-radar review-watch replay-theater md-preview blast-radius mission-control; do
  claude plugin install "$m@claude-code-mods"
done
```

Restart Claude Code after installing. To try one without installing:

```sh
git clone https://github.com/hamzafer/claude-code-mods && cd claude-code-mods
claude --plugin-dir mods/context-bar
```

> **Needs** Claude Code 2.1.287+. A few mods need more (Chrome, `gh`, a connector); the tables say which.

## 🧩 The mods

### 👀 See what's happening

| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 🛰️ | **mission-control** | Live map of agents, tool calls and the code they touch | `/mission` |
| 📊 | **context-bar** | Your context window as one stacked bar, a color per category, with token counts and where it compacts | `/context-bar` |
| 🌦️ | **token-weather** | Context fill from Clear to Compact soon, plus a prompt-cache countdown | |
| ⏱️ | **cache-clock** | A prompt-cache line under your status line, from Claude Code's own figures: time left, hit rate and misses, and the tokens your next message re-caches once it goes cold. Needs Node and Claude Code 2.1.251+ | `/cache-clock setup` |
| 📍 | **where-am-i** | Goal, doing now, waiting on you, next step | `/where` |
| ➡️ | **next-steps** | 2 or 3 likely next prompts after each turn, one key to draft one | `1` `2` `3`, `0` hides |
| 💰 | **usage-meter** | 5-hour and 7-day plan usage, the reset countdown and the session's cost | |
| 💳 | **openai-balance** | Your OpenAI API credit: an estimated balance with a gauge, today's spend, where the money mostly went, and the last call. Needs an OpenAI organization Admin key | `/openai-balance` |
| 📡 | **agent-radar** | One live line per running subagent | `/radar` |
| 🔍 | **review-watch** | One live line per running code review (Codex or a review subagent) with the model, target, elapsed time and Codex's latest output. A toast lists the findings when it ends | |
| 🌐 | **browser-lanes** | Whether this session has a browser, and who holds it | `/browser` |
| 🕌 | **prayer-times** | The current prayer and how long is left, the next one, and zawal. Computed on your computer, Hanafi or standard Asr | `/prayers` |
| 🎬 | **replay-theater** | Steps through the last turn's edits, one diff at a time | `/replay` |
| 📝 | **md-preview** | Renders the Markdown files Claude edits like GitHub does, with before and after side by side. Needs Chrome and a terminal that shows images | `/md` |

### 🛡️ Guard your repo

| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 💥 | **blast-radius** | Holds `rm -r`, force pushes and migrations, shows what they'd delete, cancels after 60 s with no answer | |

### 💸 Spend less

| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 🔀 | **switchboard** | Picks the model for each subagent that doesn't name one, with [OpenAI's Decisions API](https://developers.openai.com/api/docs/guides/decisions) or [Jev](https://docs.typesafe.ai), from its short label only. Shows what every subagent cost | `/route` |

### 🔧 My setup (fork and adapt)

These are built around my own tools and rules. Fork them and change the rules to yours.

| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 👀 | **glance** | One line with what needs you: next meeting, PRs, Linear issues, Slack DMs. Needs `gh` and the Google Calendar, Linear and Slack connectors | `/glance` |
| 🚦 | **merge-gate** | Holds `gh pr merge` until CI is green and Codex reviewed once. Needs `gh` and the Codex CLI. Reviews run on one fixed model; change it to yours | `/gate` |
| 📏 | **rulebook-guard** | Enforces my writing and git rules: rewrites em dashes, asks before `--amend`, unformatted pushes, emails and phone numbers in notes | |
| 💾 | **session-saver** | Saves where you left off, shows it on resume. Needs [unpause](https://github.com/hamzafer/unpause) | `/park [note]` |

### 🎮 For fun (opt-in)

| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 📱 | **reels** | YouTube Shorts while Claude works, pauses when it's done | `/reels` |
| 🐍 | **snake** | Snake while Claude works | `/snake` |
| 🎵 | **now-playing** | What Spotify is playing, with a progress bar, the lyric being sung, and ⏮ ⏸ ⏭ buttons. Needs macOS and the Spotify app | `/music` |

<a id="mission-control"></a>

## 🛰️ Flagship: mission-control

Every subagent, every tool call and every file they touch, in a pane next to the chat. Shown at 4x: two subagents building a logout feature across four files.

![mission-control at 4x: two subagents and a logout feature landing across four files](images/mission-control.gif)

Install it like any mod, restart, and type `/mission` (or `/mission code` to open the code map). `q` closes it.

- 🤖 `w` shows the agents and every tool call, live
- 🗺️ `c` shows the code map, with import arrows
- 🔵 **Blue** while the agent reads a file
- 🟠 **Orange** while it writes
- 🟢 **Green** when done, with one line on what changed

> The Code view also needs macOS, Google Chrome and a terminal that shows images (Ghostty, kitty, iTerm2). The Who view works everywhere.

## 📚 More

- 📖 [**docs/mods.md**](docs/mods.md): how they behave, setup notes and build your own
- 🎥 [**docs/demo.md**](docs/demo.md): videos and screenshots
- ⭐ Earlier project: [**cursor-commands**](https://github.com/hamzafer/cursor-commands) [![stars](https://img.shields.io/github/stars/hamzafer/cursor-commands?style=social)](https://github.com/hamzafer/cursor-commands), 600+ stars for Cursor slash commands
- 🤝 [**CONTRIBUTING.md**](CONTRIBUTING.md): add your own mod