---
title: "now-playing"
url: "https://claudemods.dev/ko/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: "ko"
content_locale: "ko"
---

# now-playing

Spotify에서 재생 중인 내용을 프롬프트 위 한 줄에 표시합니다: 트랙, 진행률, 현재 불리는 가사, 그리고 ⏮ ⏸ ⏭ 버튼. /music로도 제어할 수 있습니다. macOS.

## Description

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

<h1 align="center">Claude Code 모드</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">모든 모드</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** | 컨텍스트 윈도우를 하나의 누적 막대로 표시. 카테고리별 색상, 토큰 수, 그리고 압축이 일어나는 위치 | `/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` `2` `3`, `0`은 숨김 |
| 💰 | **usage-meter** | 5시간 및 7일 플랜 사용량, 리셋 카운트다운, 세션 비용 | |
| 💳 | **openai-balance** | 당신의 OpenAI API 크레딧: 게이지가 있는 추정 잔액, 오늘 지출, 돈이 주로 어디로 갔는지, 마지막 호출. OpenAI 조직 Admin 키 필요 | `/openai-balance` |
| 📡 | **agent-radar** | 실행 중인 각 서브에이전트마다 한 줄의 실시간 표시 | `/radar` |
| 🔍 | **review-watch** | 실행 중인 각 코드 리뷰(Codex 또는 리뷰 서브에이전트)마다 한 줄의 실시간 표시. 모델, 대상, 경과 시간, Codex의 최신 출력 포함. 끝나면 토스트로 발견 사항을 나열 | |
| 🌐 | **browser-lanes** | 이 세션에 브라우저가 있는지, 그리고 누가 가지고 있는지 | `/browser` |
| 🕌 | **prayer-times** | 현재 예배와 남은 시간, 다음 예배, 그리고 zawal. 당신의 컴퓨터에서 계산. 하니피 또는 표준 Asr | `/prayers` |
| 🎬 | **replay-theater** | 마지막 턴의 편집을 하나씩 diff로 단계별로 보여줌 | `/replay` |
| 📝 | **md-preview** | Claude가 편집하는 Markdown 파일을 GitHub처럼 렌더링. 전후를 나란히 표시. Chrome과 이미지를 표시하는 터미널 필요 | `/md` |

### 🛡️ 저장소를 보호하세요

| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 💥 | **blast-radius** | `rm -r`, force push 및 마이그레이션을 보류하고, 무엇을 삭제할지 보여주며, 60초 동안 응답이 없으면 취소합니다 | |

### 💸 지출 줄이기

| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 🔀 | **switchboard** | 모델을 지정하지 않은 각 하위 에이전트에 대해 짧은 라벨만으로 [OpenAI의 Decisions API](https://developers.openai.com/api/docs/guides/decisions) 또는 [Jev](https://docs.typesafe.ai)를 사용해 모델을 선택합니다. 모든 하위 에이전트의 비용을 보여줍니다 | `/route` |

### 🔧 내 설정(포크해서 조정)

이것들은 내 도구와 규칙을 중심으로 만들어졌습니다. 포크해서 규칙을 자신의 것으로 바꾸세요.

| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 👀 | **glance** | 당신이 필요한 일을 한 줄로 표시: 다음 회의, PR, Linear 이슈, Slack DM. `gh`와 Google Calendar, Linear, Slack 커넥터가 필요합니다 | `/glance` |
| 🚦 | **merge-gate** | CI가 통과되고 Codex가 한 번 리뷰할 때까지 `gh pr merge`를 보류합니다. `gh`와 Codex CLI가 필요합니다. 리뷰는 하나의 고정 모델에서 실행됩니다. 자신의 것으로 바꾸세요 | `/gate` |
| 📏 | **rulebook-guard** | 내 글쓰기 및 git 규칙을 강제합니다: em dash를 다시 쓰고, `--amend`, 포맷되지 않은 push, 노트의 이메일과 전화번호 전에 묻습니다 | |
| 💾 | **session-saver** | 어디서 멈췄는지 저장하고, 재개할 때 보여줍니다. [unpause](https://github.com/hamzafer/unpause)가 필요합니다 | `/park [note]` |

### 🎮 재미용(옵트인)

| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 📱 | **reels** | Claude가 작업하는 동안 YouTube Shorts를 재생하고, 끝나면 일시정지합니다 | `/reels` |
| 🐍 | **snake** | Claude가 작업하는 동안 스네이크 | `/snake` |
| 🎵 | **now-playing** | Spotify에서 재생 중인 곡, 진행 표시줄, 현재 불리는 가사, ⏮ ⏸ ⏭ 버튼. macOS와 Spotify 앱이 필요합니다 | `/music` |

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

## 🛰️ 플래그십: mission-control

모든 서브에이전트, 모든 도구 호출, 그리고 그들이 건드리는 모든 파일을 채팅 옆 패널에 표시합니다. 4배속으로 표시: 두 서브에이전트가 네 개의 파일에 걸쳐 로그아웃 기능을 구축하는 모습입니다.

![mission-control 4배속: 두 서브에이전트와 로그아웃 기능이 네 개의 파일에 걸쳐 적용되는 모습](images/mission-control.gif)

다른 모드처럼 설치하고, 재시작한 뒤 `/mission`을 입력하세요 (`/mission code`는 코드 맵을 엽니다). `q`는 닫습니다.

- 🤖 `w`는 에이전트와 모든 도구 호출을 실시간으로 표시합니다
- 🗺️ `c`는 가져오기 화살표가 있는 코드 맵을 표시합니다
- 🔵 에이전트가 파일을 읽는 동안 **파란색**
- 🟠 쓰는 동안 **주황색**
- 🟢 완료되면 **초록색**, 변경된 내용을 한 줄로 표시

> 코드 뷰는 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): 자신만의 모드 추가하기

## 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