Context Bar: 무엇이 채우는지 보여 주는 Claude Code 컨텍스트 창 막대

Context Bar는 Hamza Zafar(hamzafer)가 만든 커뮤니티 모드로, 그의 claude-code-mods 컬렉션에 속해 있습니다. 이 Claude Code 컨텍스트 창 막대는 한 가지 질문에 답합니다. 내 컨텍스트 창을 무엇이 채우고 있을까? Claude Code 프롬프트 위에 테두리가 있는 작은 띠를 그리고, 그 안에 터미널 너비만큼의 누적 막대 하나를 표시합니다. 막대는 /context가 쓰는 것과 같은 카테고리, 즉 시스템 프롬프트, 도구, MCP 도구, 메모리 파일, 스킬, 메시지로 나뉘고, 그 뒤에 빈 공간과 자동 압축 버퍼가 이어집니다.

머리글 줄은 48k of 200k · compacts at 167k처럼 표시되며 색이 있는 퍼센트 배지가 붙습니다. 배지는 초록색이고, 압축 지점의 70%에서 노란색, 90%에서 빨간색으로 바뀝니다(자동 압축이 꺼져 있으면 전체 창을 기준으로 잽니다). 막대 아래의 범례는 각 카테고리의 토큰 수와 창에서 차지하는 비율을 나열하며, 터미널 너비에 맞춰 필요한 만큼의 줄에 채워 넣습니다. 필요할 때만 불러오는 도구 스키마는 /context가 격자에서 빼는 것처럼 여기서도 제외됩니다.

Context Bar는 저희의 컨텍스트 미터와 비슷하지만 보여 주는 것이 다릅니다. 컨텍스트 미터는 상태 표시줄의 한 줄 문자열로 전체 컨텍스트 비율, 5시간 및 7일 플랜 창, 세션 비용, 그리고 80%에서 한 번 뜨는 경고를 보여 줍니다. Context Bar는 플랜 사용량이나 비용을 보여 주지 않는 대신 컨텍스트를 카테고리별로 나누어, MCP 도구나 메모리 파일, 혹은 대화 자체가 공간을 차지하고 있는지 알 수 있게 해 줍니다. 작성자의 README에 따르면 Claude Code 2.1.287 이상이 필요합니다.

녹화 영상에서는 작은 데모 프로젝트에서 모드를 불러온 채 Claude Code를 시작하고, Claude에게 README.md를 읽고 프로젝트를 한 문장으로 설명해 달라고 요청합니다. 턴이 끝나면 프롬프트 위 띠에 카테고리별로 나뉜 컨텍스트 창(시스템 프롬프트, 시스템 도구, 스킬, 메시지, 빈 공간), 54k of 200k 같은 합계, 자동 압축이 시작되는 지점, 사용 비율이 표시됩니다.

설치 블록의 방법 중 아무것이나 사용하십시오. 모두 작성자 자신의 마켓플레이스에서 바로 설치합니다. 막대는 다음 세션 시작 때 나타나며, /context-bar로 숨기거나 보일 수 있습니다.

모드는 최신 측정값을 호스트가 보관하는 $.state 아톰에 저장하므로 핫 리로드 후에도 유지되며, AbovePrompt 렌더 사이트에 다시 그립니다. hooks/register.tsx의 갱신 함수는 다음과 같습니다.

// Asks the engine for /context's breakdown, estimated locally (no token-count calls).
async function refresh($: EngineInterface) {
  if (await read($, isHidden)) return
  const usage = await $.session.usage({ breakdown: 'summary' })
  const b = usage.context.breakdown
  if (!b || !(b.rawMaxTokens > 0)) return // no window to measure against
  await update($, reading, () => toReading(b))
}

refresh는 session.start에서, agentId가 없을 때의 turn.complete에서(서브에이전트 턴은 건너뜀), 그리고 session.compact에서 실행됩니다. /compact는 턴이 끝나지 않아도 창을 비우기 때문입니다. toReading은 지연 로딩 카테고리와 빈 카테고리를 버리고, 사용 중인 행을 빈 공간과 버퍼보다 앞에 정렬한 뒤 색을 배정합니다. 순수 헬퍼 함수 cells와 legend는 측정값을 막대 구간과 범례 줄로 바꿉니다. 사용 중인 모든 카테고리는 최소 한 칸을 받고, 반올림으로 남는 칸은 먼저 빈 공간으로 갑니다. 안쪽 너비가 20열 미만이면 막대를 그리지 않습니다. 설문이 프롬프트 위 공간을 쓰고 있으면 띠는 자리를 비켜 줍니다.

/config에는 옵션이 없습니다. 유일한 스위치는 /context-bar 명령이며, 숨김/표시 상태는 $.store에 저장됩니다. 모양을 바꾸려면 register.tsx 맨 위의 상수를 수정하십시오. PALETTE는 카테고리 색, MESSAGES는 메시지 색, GLYPH는 막대 문자, MIN_WIDTH는 막대를 그리는 최소 너비입니다.

저희는 실행하기 전에 플러그인이 실행할 수 있는 모든 파일을 읽었습니다. hooks/hooks.json, hooks/register.tsx, 타입 선언, 테스트입니다. package.json, 설치 스크립트, 번들된 코드는 없습니다.

UI 변경은 프롬프트 위의 띠에 해당합니다. 명령 추가는 /context-bar에 해당합니다. 모드는 $.session.usage로 컨텍스트 수치를 읽고, $.store에 참/거짓 값 하나를 저장하며, 측정값은 $.state에 보관합니다. 셸 명령을 실행하거나, 파일을 읽고 쓰거나, 네트워크를 사용하거나, 환경 변수를 읽거나, 모델을 호출하지 않습니다. claude plugin validate는 오류나 경고를 보고하지 않았고, 작성자의 테스트 6개가 Claude Code 2.1.291에서 모두 통과했습니다.

macOS에서 Claude Code 2.1.291로 확인했습니다(validate와 테스트). 막대가 나타나지 않으면 다음을 확인하십시오.

• claude --version이 2.1.287 이상인지 확인하십시오.
• 이전에 숨기지 않았는지 확인하십시오. /context-bar를 한 번 실행하고 "Context bar on"이 나오는지 보십시오.
• 터미널이 충분히 넓은지 확인하십시오. 띠에는 최소 24열이 필요합니다.
• 입력창 위에 설문이 열려 있을 수 있습니다. 설문이 닫히면 띠가 돌아옵니다.
• 분석 정보는 Claude Code가 창 크기를 알게 된 뒤에만 제공됩니다. 맨 처음에 띠가 없다면 프롬프트를 하나 보내십시오.