anthonybaldwin/cc-plugins/tree/main/plugins/context-bar
context-bar
프롬프트 위 띠 영역에 컨텍스트 창을 누적 막대로 그리는 [mod](https://code.claude.com/docs/en/plugins/mods/overview)입니다. `/context`가 분류별로 나누어 보여 주는 것처럼 색상 하나를 카테고리 하나에 배정하고, 아래에 범례를 표시합니다.
이 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.startregisters/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.SessionStartforclear/resume/fork/compactmeasures again and restores the toggle (those reset$.state).ui.renderonAbovePromptlays the categories out acrossbodyColumnscells 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.
동명의 다른 작품
- context-barrodbegbie · ★ 0
- context-barziedgithub · ★ 0
- context-barvrnrn · ★ 0
- context-barAkash001uts · ★ 0
- context-barBoom-Vitt · ★ 0
- context-barmyUdav4iik · ★ 0
