ClaudeMods
☰
KO
● 0 명 접속 중 · 조회 0 회
후원프로젝트 제출
GitHub 저장소 · 작성자 anthonybaldwin

context-bar

프롬프트 위 띠 영역에 컨텍스트 창을 누적 막대로 그리는 [mod](https://code.claude.com/docs/en/plugins/mods/overview)입니다. `/context`가 분류별로 나누어 보여 주는 것처럼 색상 하나를 카테고리 하나에 배정하고, 아래에 범례를 표시합니다.

anthonybaldwin@anthonybaldwin

anthonybaldwin/cc-plugins/tree/main/plugins/context-bar

번역 완료

이 mod 소개

프롬프트 위 띠 영역에 컨텍스트 창을 누적 막대로 그리는 mod입니다. /context가 분류별로 나누어 보여 주는 것처럼 색상 하나를 카테고리 하나에 배정하고, 아래에 범례를 표시합니다.

████████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
40%  System prompt 3%  System tools 7%  Messages 30%  Autocompact buffer 10%  Free space 50%

(각 구간은 해당 카테고리의 테마 색으로 그립니다. /context가 사용하는 색과 같습니다. 채워진 █은 사용 중인 공간, ▒는 압축 버퍼, ░는 빈 공간을 뜻합니다.)

실시간으로 동작합니다. Claude Code가 매 턴이 끝날 때 측정값을 푸시하면 막대가 그 값으로 다시 그려집니다. 폴링, 타이머, token 수 요청이 필요하지 않습니다(분류 결과는 로컬 summary 추정값이며 /context가 시작할 때 사용하는 값입니다).

설치

/plugin marketplace add anthonybaldwin/cc-plugins
/plugin install context-bar@cc-plugins

Claude Code v2.1.287+(mods)가 필요합니다. 터미널과 Desktop 앱의 Code 탭에 그립니다. VS Code 채팅 패널과 claude -p에서는 훅이 실행되지만 아무것도 그리지 않습니다.

사용법

| | | |---|---| | /context-bar | 막대를 전환합니다. 선택은 세션 사이에 기억되며 턴 중간에도 작동합니다. | | ctrl+x ctrl+a | 프롬프트 위 띠 영역을 접는 Claude Code 자체 기능입니다. |

이 띠 영역은 다른 mod 및 Claude Code 설문과 공유됩니다. 설문이 표시되는 동안에는 설문이 우선합니다.

왜 mod인가? 왜 statusline-dashboard의 행이 아닌가?

상태 표시줄이 받는 값은 창 전체의 합계뿐입니다. 카테고리별 분류는 mods API 호출($.session.usage({ breakdown }))이고, 프롬프트 위 띠 영역은 플러그인이 푸시될 때 업데이트되는 여러 행의 테마 색 위젯을 그릴 수 있는 유일한 위치입니다. 따라서 상태 표시줄은 컨텍스트 게이지를 유지하고, 이 mod는 옆의 상세 보기 역할을 합니다. 서로 독립적이므로 하나만 설치해도 되고 둘 다 설치해도 됩니다.

작동 방식

hooks/register.ts:

  • session.start가 /context-bar를 등록하고, $.store에서 저장된 전환 상태를 복원한 뒤 첫 측정을 수행합니다.
  • session.measure(각 메인 스레드 턴 후 발생)는 컨텍스트 단위가 움직였을 때 $.session.usage({ breakdown: 'summary' })를 다시 읽고 스냅샷을 $.state에 기록합니다. 상태를 기록하면 띠 영역이 다시 그려지고 렌더 훅이 그 상태를 구독합니다.
  • classic.SessionStart는 clear/resume/fork/compact에서 다시 측정하고 전환 상태를 복원합니다(이 작업들이 $.state를 초기화합니다).
  • ui.render는 AbovePrompt에서 최대 나머지 방식으로 반올림하여 카테고리를 bodyColumns 셀에 배치합니다. 그래서 막대는 항상 띠 영역의 너비와 정확히 같고 비어 있지 않은 카테고리는 모두 표시됩니다. 또한 /context의 그리드처럼 지연된 도구 행을 건너뛰고, 너비가 허용하는 만큼 범례 항목을 배치합니다.

테스트(claude plugin test plugins/context-bar)는 레이아웃 계산, 두 화면에서의 그리기, $.store를 통한 전환 상태 왕복, /clear 경로, 설문 우선순위를 다룹니다.

설치

먼저 작성자의 README에서 marketplace와 플러그인 이름을 확인하세요. 저장소 구조에 따라 명령어가 달라질 수 있습니다.

claude plugin marketplace add anthonybaldwin/cc-plugins
claude plugin install context-bar
원문 / README

Context Bar

A mod that draws your context window as a stacked bar in the band above the prompt — one color per category, as /context breaks it down — with a legend underneath:

████████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
40%  System prompt 3%  System tools 7%  Messages 30%  Autocompact buffer 10%  Free space 50%

(Each run is drawn in its category's theme color — the same colors /context uses — solid █ for what's in use, ▒ for the compaction buffer, ░ for free space.)

It's live: Claude Code pushes a measurement after every turn, and the bar redraws from it. No polling, no timer, no token-count requests (the breakdown is the local summary estimate, the one /context starts from).

Install

/plugin marketplace add anthonybaldwin/cc-plugins
/plugin install context-bar@cc-plugins

Requires Claude Code v2.1.287+ (mods). It draws in the terminal and in the Desktop app's Code tab; in the VS Code chat panel and claude -p the hooks run but nothing is drawn.

Use

| | | |---|---| | /context-bar | Toggle the bar. The choice is remembered across sessions. Works mid-turn. | | ctrl+x ctrl+a | Claude Code's own collapse for the band above the prompt. |

The band is shared with other mods and with Claude Code's surveys; a survey takes precedence while it's up.

Why a mod, and why not a row in statusline-dashboard

The status line receives only the window's total. The per-category breakdown is a mods-API call ($.session.usage({ breakdown })), and the band above the prompt is the one place a plugin can draw a multi-row, theme-colored widget that updates on push. So the status line keeps its context gauge, and this is the detail view beside it. The two are independent — install either or both.

How it works

hooks/register.ts:

  • session.start registers /context-bar, restores the saved toggle from $.store, and takes a first measurement.
  • session.measure (fired after each main-thread turn) re-reads $.session.usage({ breakdown: 'summary' }) whenever the context unit moved, and writes the snapshot into $.state. Writing the state redraws the band — the render hook subscribes to it.
  • classic.SessionStart for clear / resume / fork / compact measures again and restores the toggle (those reset $.state).
  • ui.render on AbovePrompt lays the categories out across bodyColumns cells with largest-remainder rounding (so the bar is always exactly the band's width and every non-empty category stays visible), skips deferred tool rows like /context's grid does, and fits as many legend entries as the width allows.

Tests (claude plugin test plugins/context-bar) cover the layout arithmetic, drawing on both surfaces, the toggle round-trip through $.store, the /clear path, and the survey precedence.

동명의 다른 작품

비슷한 프로젝트