claude-code-hud 0.3.1 → 0.3.2

package/README.md

@@ -10,20 +10,23 @@ Claude Code로 작업할 때 토큰 사용량, git 상태, 파일 구조를 IDE
 
 ```
 ┌──────────────────────────────────────────────────────────────────────────────┐
-│ ◆  HUD  [1 TOKENS] 2 PROJECT  3 GIT                    sonnet-4-6  ·  up 4m  │
+│ ◆ HUD  │  ◉ TOKENS  │  ○ PROJECT  │  ○ GIT              sonnet-4-6  ·  up 4m │
 ├──────────────────────────────────────────────────────────────────────────────┤
-│ CONTEXT WINDOW                                                               │
-│ ████████████████████░░░░░░░░░░░░░░░░░░░░░░░  46%  92K / 200K  OK             │
-├──────────────────────────────────────────────────────────────────────────────┤
-│ USAGE WINDOW  (Anthropic API)                                                │
-│ 5h ████████░░░░░░░░░░░░░░░░░░░░  28.0%  resets in 3h                         │
-│ wk ███░░░░░░░░░░░░░░░░░░░░░░░░░   9.0%  resets in 148h                       │
-├──────────────────────────────────────────────────────────────────────────────┤
-│ TOKENS  (this session)                                                       │
-│ input         ░░░░░░░░░░░░░░░░░░░░░░░░    4.8K   0%                          │
-│ output        ░░░░░░░░░░░░░░░░░░░░░░░░  188.5K   0%                          │
-│ cache-read    ████████████████████████   51.5M 100%                          │
-│ cache-write   ██░░░░░░░░░░░░░░░░░░░░░░    3.8M   7%                          │
+│ ▸ CONTEXT WINDOW                                                              │
+│   ████████████████████░░░░░░░░░░░░░░░░░░░░░░░  46%  92K / 200K  OK           │
+│                                                                               │
+│ ▸ USAGE WINDOW                                                                │
+│   5h ████████░░░░░░░░░░░░░░░░░░░░  28.0%  resets in 3h 12m                   │
+│   wk ███░░░░░░░░░░░░░░░░░░░░░░░░░   9.0%  resets in 6h 48m                   │
+│                                                                               │
+│ ▸ TOKENS  (this session)                                                      │
+│   input         ░░░░░░░░░░░░░░░░░░░░░░░░    4.8K   0%                        │
+│   output        ░░░░░░░░░░░░░░░░░░░░░░░░  188.5K   0%                        │
+│   cache-read    ████████████████████████   51.5M 100%                        │
+│   cache-write   ██░░░░░░░░░░░░░░░░░░░░░░    3.8M   7%                        │
+│                                                                               │
+│ ▸ OUTPUT TOKENS / HR                                                          │
+│   total  2.1M   │   avg  48.2K/hr   │   peak  312K/hr                        │
 └──────────────────────────────────────────────────────────────────────────────┘
 ```
 
@@ -64,31 +67,33 @@ claude-hud
 ### 기능
 
 **1 TOKENS 탭**
-- 컨텍스트 윈도우 사용량 게이지 (OK / MID / WARN)
-- Anthropic API 기반 5h / 주간 사용률 (실제 값, 추정치 아님)
+- 컨텍스트 윈도우 사용량 게이지 (OK / MID / WARN) — 사용량에 따라 헤더 색상 변경
+- Anthropic API 기반 5h / 주간 사용률 (실제 값, 추정치 아님) — `1h 23m` 형식으로 리셋까지 남은 시간 표시
 - input / output / cache-read / cache-write 토큰 분류
-- 최근 12시간 output 토큰 sparkline
+- 세션 output 통계 (total / avg / peak)
 
 **2 PROJECT 탭 — 인터랙티브 파일 브라우저**
 - 디렉토리 트리 (펼치기/접기)
+- Git 변경 파일 색상 표시 — 수정(노란색 M) / 추가(초록 A) / 삭제(빨강 D)
 - 파일 선택 시 소스 코드 뷰어 (split 패널)
 - 패키지 의존성 트리
 - API 엔드포인트 감지
 
 ```
-TREE                            │ SOURCE  src/index.ts
-▼ src/            23f           │  1  import React from 'react'
-  ▼ components/    8f           │  2  import { render } from 'ink'
-    Header.tsx   ◀ open         │  3
-  ▶ hooks/         4f           │  4  render(<App />)
-▶ scripts/         6f           │  …  [j/k] scroll  [esc] close
+▸ TREE                          │ ▸ SOURCE  src/index.ts
+  ▼ src/            23f         │    1  import React from 'react'
+    ▼ components/    8f         │    2  import { render } from 'ink'
+      Header.tsx  M             │    3
+    ▶ hooks/         4f         │    4  render(<App />)
+  ▶ scripts/         6f         │    …  [j/k] scroll  [esc] close
 ```
 
 **3 GIT 탭**
 - 현재 브랜치, ahead/behind 카운트
-- 변경 파일 목록 (MOD / ADD / DEL)
-- 파일별 diff 시각화 (+/- 바)
+- 변경 파일 목록 (MOD / ADD / DEL) + 실제 +/- 라인 수
+- 파일별 diff 시각화
 - 최근 커밋 히스토리
+- **브랜치 전환** — `b` 키로 로컬 브랜치 목록 표시, 선택해서 바로 checkout
 
 ### 키보드 단축키
 
@@ -98,10 +103,13 @@ TREE                            │ SOURCE  src/index.ts
 | `j` / `k` | 스크롤 / 트리 이동 |
 | `→` / `Enter` | 디렉토리 펼치기 / 파일 열기 |
 | `←` / `Esc` | 접기 / 소스 뷰어 닫기 |
+| `b` | 브랜치 전환 (GIT 탭) |
 | `d` | 다크 / 라이트 모드 전환 |
 | `r` | 수동 새로고침 |
 | `q` | 종료 |
 
+> 한글 키보드 모드에서도 동작합니다 — `ㅓ/ㅏ` (j/k), `ㅇ` (d), `ㄱ` (r), `ㅂ` (q), `ㅠ` (b)
+
 ### 요구사항
 
 - Node.js 18+
@@ -113,11 +121,13 @@ TREE                            │ SOURCE  src/index.ts
 
 ## English
 
-When working with Claude Code in the terminal, I kept running into the same friction: how many tokens are left? what's the git status? what does this file structure look like? — answering any of these meant switching to another app or opening more terminal tabs.
+A Terminal HUD (Heads-Up Display) for Claude Code — real-time token usage, git status, and interactive project file browser. No IDE, no extra tabs. Just a second terminal window.
 
-So I built this. Two terminals. One for Claude Code, one for the HUD. That's it.
-
-A Terminal HUD (Heads-Up Display) for Claude Code — real-time token usage, git status, and interactive project file browser in a separate terminal window or tmux pane.
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ ◆ HUD  │  ◉ TOKENS  │  ○ PROJECT  │  ○ GIT              sonnet-4-6  ·  up 4m │
+└──────────────────────────────────────────────────────────────────────────────┘
+```
 
 ### Usage
 
@@ -131,8 +141,6 @@ claude                           npx claude-code-hud
 (working with Claude Code)       (HUD live display)
 ```
 
-The HUD automatically detects your current directory and shows token, git, and project info for that project.
-
 ```bash
 # tmux split pane
 cd ~/my-project
@@ -156,13 +164,14 @@ claude-hud
 ### Features
 
 **1 TOKENS tab**
-- Context window usage gauge (OK / MID / WARN)
-- Real 5h / weekly usage from Anthropic OAuth API — not estimates
+- Context window gauge (OK / MID / WARN) — header border changes color with usage
+- Real 5h / weekly usage from Anthropic OAuth API — not estimates. Reset time shown as `1h 23m`
 - Input / output / cache-read / cache-write breakdown
-- Output tokens sparkline over the last 12 hours
+- Session output stats: total / avg / peak per hour
 
 **2 PROJECT tab — interactive file browser**
 - Navigable directory tree with expand/collapse
+- Git-changed files highlighted — modified (yellow M) / added (green A) / deleted (red D)
 - Source file viewer in a split panel
 - Package dependency tree from `package.json`
 - API endpoint detection (GET / POST / PUT / DELETE / PATCH)
@@ -170,7 +179,9 @@ claude-hud
 **3 GIT tab**
 - Branch status, ahead/behind remote
 - Changed file list (MOD / ADD / DEL) with real `+N -N` diff counts
+- Per-file diff visualization
 - Recent commit history
+- **Branch switcher** — press `b` to list local branches and checkout instantly
 
 ### Keyboard Shortcuts
 
@@ -180,16 +191,12 @@ claude-hud
 | `j` / `k` | Scroll / move tree cursor |
 | `→` / `Enter` | Expand dir / open file |
 | `←` / `Esc` | Collapse / close source viewer |
+| `b` | Branch switcher (GIT tab) |
 | `d` | Toggle dark / light mode |
 | `r` | Manual refresh |
 | `q` | Quit |
 
-### Requirements
-
-- Node.js 18+
-- Claude Code installed and authenticated
-- Claude Pro or Max plan recommended (for real 5h / weekly usage %)
-- Git (optional, for GIT tab)
+> Korean keyboard layout supported — `ㅓ/ㅏ` (j/k), `ㅇ` (d), `ㄱ` (r), `ㅂ` (q), `ㅠ` (b)
 
 ### How it works
 

package/bin/claude-hud

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+/**
+ * claude-code-hud entry point
+ * Launches the Ink TUI for Claude Code token/git monitoring
+ */
+import { spawn } from 'child_process';
+import { existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __dir = dirname(fileURLToPath(import.meta.url));
+const hudFile = join(__dir, '..', 'tui', 'hud.tsx');
+
+// Use local tsx if available, otherwise try PATH
+const localTsx = join(__dir, '..', 'node_modules', '.bin', 'tsx');
+const tsxBin = existsSync(localTsx) ? localTsx : 'tsx';
+
+const proc = spawn(tsxBin, [hudFile], {
+  stdio: 'inherit',
+  env: { ...process.env, CLAUDE_PROJECT_ROOT: process.env.CLAUDE_PROJECT_ROOT || process.cwd() },
+});
+
+proc.on('exit', (code) => process.exit(code ?? 0));
+proc.on('error', (err) => {
+  if (err.code === 'ENOENT') {
+    console.error('tsx not found. Run: npm install -g tsx');
+  } else {
+    console.error('Failed to start HUD:', err.message);
+  }
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hud",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Terminal HUD for Claude Code — real-time token usage, git status, project monitor",
   "type": "module",
   "bin": {

package/tui/hud.tsx

@@ -9,6 +9,7 @@ import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import fs from 'fs';
 import os from 'os';
+import { execSync } from 'child_process';
 
 const __dir = dirname(fileURLToPath(import.meta.url));
 const { readTokenUsage, readTokenHistory } = await import(join(__dir, '../scripts/lib/token-reader.mjs'));
@@ -184,6 +185,18 @@ function flattenTree(node: DirNode, depth: number, expanded: Record<string, bool
   return result;
 }
 
+// ── Branch helper ───────────────────────────────────────────────────────────
+function getBranches(cwd: string): string[] {
+  try {
+    const out = execSync('git branch', { cwd, encoding: 'utf8' });
+    return out.split('\n')
+      .map(b => b.replace(/^\*?\s+/, '').trim())
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
 // ── UI Components ──────────────────────────────────────────────────────────
 function Bar({ ratio, width, color, C }: { ratio: number; width: number; color: string; C: typeof DARK }) {
   const filled = Math.max(0, Math.min(width, Math.round(ratio * width)));
@@ -198,8 +211,8 @@ function Bar({ ratio, width, color, C }: { ratio: number; width: number; color:
 function Section({ title, children, C, accent }: { title: string; children: React.ReactNode; C: typeof DARK; accent?: string }) {
   return (
     <Box flexDirection="column" borderStyle="single" borderColor={C.border} paddingX={1} marginBottom={0}>
-      <Text color={accent ?? C.dim} bold>{title}</Text>
-      <Box flexDirection="column">{children}</Box>
+      <Text color={C.dimmer} bold>▸ <Text color={C.text}>{title}</Text></Text>
+      <Box flexDirection="column" marginTop={1}>{children}</Box>
     </Box>
   );
 }
@@ -247,12 +260,14 @@ function TokensTab({ usage, history, rateLimits, termWidth, C }: any) {
           const mins = Math.round((d.getTime() - Date.now()) / 60000);
           if (mins <= 0) return ' resets soon';
           if (mins < 60) return ` resets in ${mins}m`;
-          return ` resets in ${Math.round(mins / 60)}h`;
+          const h = Math.floor(mins / 60);
+          const m = mins % 60;
+          return m > 0 ? ` resets in ${h}h ${m}m` : ` resets in ${h}h`;
         };
 
         return (
-          <Section title={hasApi ? "USAGE WINDOW  (Anthropic API)" : "USAGE WINDOW  (from JSONL)"} C={C} accent={hasApi ? C.green : C.dim}>
-            <Box>
+          <Section title="USAGE WINDOW" C={C}>
+            <Box marginBottom={1}>
               <Text color={C.dim}>5h </Text>
               <Bar ratio={(pct5h ?? 0) / 100} width={WIN_BAR} color={color5h} C={C} />
               <Text color={color5h} bold>  {pct5h != null ? pct5h.toFixed(1) : '--'}%</Text>
@@ -285,7 +300,7 @@ function TokensTab({ usage, history, rateLimits, termWidth, C }: any) {
         ].map(({ label, tokens, color }) => {
           const pct = maxTok > 0 ? Math.round(tokens / maxTok * 100) : 0;
           return (
-            <Box key={label}>
+            <Box key={label} marginBottom={1}>
               <Box width={14}><Text color={C.dim}>{label}</Text></Box>
               <Box width={BAR_W}><Bar ratio={maxTok > 0 ? tokens / maxTok : 0} width={BAR_W} color={color} C={C} /></Box>
               <Box width={9}  justifyContent="flex-end"><Text color={C.text}> {fmtNum(tokens)}</Text></Box>
@@ -295,20 +310,32 @@ function TokensTab({ usage, history, rateLimits, termWidth, C }: any) {
         })}
       </Section>
 
-      {/* Sparkline */}
-      <Section title="OUTPUT TOKENS / HR" C={C}>
-        <Text color={C.brand}>{spark}</Text>
-        <Box justifyContent="space-between">
-          <Text color={C.dimmer}>12h ago</Text>
-          <Text color={C.dimmer}>now</Text>
-        </Box>
-      </Section>
+      {/* Output stats */}
+      {(() => {
+        const buckets = history.hourlyBuckets as number[];
+        const total = buckets.reduce((a: number, b: number) => a + b, 0);
+        const nonZero = buckets.filter((b: number) => b > 0);
+        const avg = nonZero.length > 0 ? Math.round(total / nonZero.length) : 0;
+        const peak = Math.max(...buckets, 0);
+        return (
+          <Section title="OUTPUT TOKENS / HR" C={C}>
+            <Box>
+              <Text color={C.dimmer}>total  </Text>
+              <Text color={C.brand} bold>{fmtNum(total)}</Text>
+              <Text color={C.dimmer}>   │   avg  </Text>
+              <Text color={C.text}>{fmtNum(avg)}/hr</Text>
+              <Text color={C.dimmer}>   │   peak  </Text>
+              <Text color={C.text}>{fmtNum(peak)}/hr</Text>
+            </Box>
+          </Section>
+        );
+      })()}
     </Box>
   );
 }
 
 // ── Tab 2: PROJECT ─────────────────────────────────────────────────────────
-function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, fileScroll, termWidth, C }: any) {
+function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, fileScroll, termWidth, git, C }: any) {
   if (!info) return (
     <Box borderStyle="single" borderColor={C.border} paddingX={1}>
       <Text color={C.dimmer}>scanning project…</Text>
@@ -345,6 +372,11 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
   const SOURCE_W = hasFile ? termWidth - TREE_W - 5 : 0;
   const VISIBLE_LINES = 22;
 
+  // Git changed file sets
+  const gitModified = new Set<string>([...(git?.modified ?? []), ...(git?.added ?? []), ...(git?.deleted ?? [])]);
+  const gitAdded    = new Set<string>(git?.added   ?? []);
+  const gitDeleted  = new Set<string>(git?.deleted ?? []);
+
   const EXT_COLOR: Record<string, string> = {
     '.ts': C.brand, '.tsx': C.brand, '.js': C.cyan, '.jsx': C.cyan,
     '.py': C.yellow, '.go': C.cyan, '.java': C.yellow, '.rs': C.red,
@@ -371,7 +403,8 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
 
         {/* ── Tree panel ── */}
         <Box flexDirection="column" borderStyle="single" borderColor={hasFile ? C.brand : C.border} paddingX={1} width={TREE_W}>
-          <Text color={C.dim} bold>TREE</Text>
+          <Text color={C.dimmer} bold>▸ <Text color={C.text}>TREE</Text></Text>
+          <Box marginTop={1} flexDirection="column">
           {flatNodes.length === 0 && <Text color={C.dimmer}>  (empty)</Text>}
           {flatNodes.map((fn, idx) => {
             const isSelected = idx === safeCursor;
@@ -391,23 +424,31 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
               );
             } else {
               const ext = fn.fileName.includes('.') ? '.' + fn.fileName.split('.').pop()! : '';
-              const fileColor = isSelected ? C.brand : (EXT_COLOR[ext] ?? C.text);
               const isOpen = selectedFile === fn.filePath;
+              const isGitAdded   = gitAdded.has(fn.filePath);
+              const isGitDeleted = gitDeleted.has(fn.filePath);
+              const isGitMod     = !isGitAdded && !isGitDeleted && gitModified.has(fn.filePath);
+              const gitColor = isGitAdded ? C.green : isGitDeleted ? C.red : isGitMod ? C.yellow : null;
+              const gitBadge = isGitAdded ? ' A' : isGitDeleted ? ' D' : isGitMod ? ' M' : '';
+              const fileColor = isSelected ? C.brand : gitColor ?? (EXT_COLOR[ext] ?? C.text);
               return (
                 <Box key={`f_${fn.filePath}_${idx}`}>
                   <Text color={C.dimmer}>{indent}</Text>
                   <Text color={isSelected ? C.brand : C.dimmer}>{isOpen ? '▶ ' : '  '}</Text>
                   <Text color={fileColor} bold={isSelected || isOpen}>{fn.fileName}</Text>
+                  {gitBadge ? <Text color={gitColor!} bold>{gitBadge}</Text> : null}
                 </Box>
               );
             }
           })}
+          </Box>
         </Box>
 
         {/* ── Source viewer panel ── */}
         {hasFile && (
           <Box flexDirection="column" borderStyle="single" borderColor={C.brand} paddingX={1} width={SOURCE_W}>
-            <Text color={C.brand} bold>SOURCE  <Text color={C.dim}>{selectedFile}</Text></Text>
+            <Text color={C.dimmer} bold>▸ <Text color={C.text}>SOURCE  <Text color={C.dim}>{selectedFile}</Text></Text></Text>
+            <Box marginTop={1} flexDirection="column">
             {(fileLines as string[]).slice(fileScroll, fileScroll + VISIBLE_LINES).map((line, i) => {
               const lineNo = fileScroll + i + 1;
               const truncated = line.length > SOURCE_W - 6 ? line.slice(0, SOURCE_W - 7) + '…' : line;
@@ -424,6 +465,7 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
             {(fileLines as string[]).length > VISIBLE_LINES && (
               <Text color={C.dimmer}>  ↕ {fileScroll + 1}–{Math.min(fileScroll + VISIBLE_LINES, fileLines.length)} / {fileLines.length} lines  [j/k] scroll  [esc] close</Text>
             )}
+            </Box>
           </Box>
         )}
       </Box>
@@ -431,7 +473,8 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
       {/* Packages (hidden when file open to save space) */}
       {!hasFile && (
         <Box flexDirection="column" borderStyle="single" borderColor={C.border} paddingX={1}>
-          <Text color={C.dim} bold>PACKAGES</Text>
+          <Text color={C.dimmer} bold>▸ <Text color={C.text}>PACKAGES</Text></Text>
+          <Box marginTop={1} flexDirection="column">
           {info.packages.slice(0, 10).map((p: any, i: number) => {
             const isRoot = p.depth === 0;
             const nextIsRoot = i + 1 < info.packages.length && info.packages[i + 1].depth === 0;
@@ -445,6 +488,7 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
               </Box>
             );
           })}
+          </Box>
         </Box>
       )}
     </Box>
@@ -452,7 +496,7 @@ function ProjectTab({ info, treeCursor, treeExpanded, selectedFile, fileLines, f
 }
 
 // ── Tab 3: GIT ─────────────────────────────────────────────────────────────
-function GitTab({ git, C, termWidth }: any) {
+function GitTab({ git, C, termWidth, branchMode, branchList, branchCursor }: any) {
   const gitFiles = [
     ...(git.modified ?? []).map((f: string) => ({ status: 'MOD', path: f })),
     ...(git.added    ?? []).map((f: string) => ({ status: 'ADD', path: f })),
@@ -463,6 +507,29 @@ function GitTab({ git, C, termWidth }: any) {
 
   return (
     <Box flexDirection="column">
+      {/* Branch switcher overlay */}
+      {branchMode && (
+        <Box flexDirection="column" borderStyle="single" borderColor={C.brand} paddingX={1} marginBottom={1}>
+          <Text color={C.dimmer} bold>▸ <Text color={C.text}>SWITCH BRANCH</Text></Text>
+          <Box flexDirection="column" marginTop={1}>
+            {branchList.map((b: string, i: number) => {
+              const isSelected = i === branchCursor;
+              const isCurrent = b === git.branch;
+              return (
+                <Box key={i}>
+                  <Text color={isSelected ? C.brand : C.dimmer}>{isSelected ? '▶ ' : '  '}</Text>
+                  <Text color={isSelected ? C.text : C.dim} bold={isSelected}>{b}</Text>
+                  {isCurrent && <Text color={C.green}>  ◎ current</Text>}
+                </Box>
+              );
+            })}
+          </Box>
+          <Box marginTop={1}>
+            <Text color={C.dimmer}>[j/k] navigate  [enter] switch  [esc] cancel</Text>
+          </Box>
+        </Box>
+      )}
+
       {/* Branch */}
       <Box borderStyle="single" borderColor={C.border} paddingX={1}>
         <Text color={C.dim} bold>GIT  </Text>
@@ -504,7 +571,7 @@ function GitTab({ git, C, termWidth }: any) {
               : f.status === 'DEL' ? barTotal : f.status === 'MOD' ? Math.round(barTotal * 0.3) : 0;
             const name = f.path.length > 22 ? '…' + f.path.slice(-21) : f.path;
             return (
-              <Box key={i}>
+              <Box key={i} marginBottom={1}>
                 <Box width={24}><Text color={C.dimmer}>{name}</Text></Box>
                 <Text color={C.green}>{'▐'.repeat(addLen)}</Text>
                 <Text color={C.red}>{'▌'.repeat(delLen)}</Text>
@@ -560,6 +627,11 @@ function App() {
   const [fileLines,    setFileLines]    = useState<string[]>([]);
   const [fileScroll,   setFileScroll]   = useState(0);
 
+  // Branch switcher state
+  const [branchMode,   setBranchMode]   = useState(false);
+  const [branchList,   setBranchList]   = useState<string[]>([]);
+  const [branchCursor, setBranchCursor] = useState(0);
+
   const refresh = useCallback(() => {
     setUsage(readTokenUsage());
     setHistory(readTokenHistory());
@@ -605,6 +677,44 @@ function App() {
   }, []);
 
   useInput((input, key) => {
+    // Branch switcher intercepts input when active
+    if (branchMode) {
+      if (input === 'j' || key.downArrow) {
+        setBranchCursor(c => Math.min(c + 1, branchList.length - 1));
+        return;
+      }
+      if (input === 'k' || key.upArrow) {
+        setBranchCursor(c => Math.max(c - 1, 0));
+        return;
+      }
+      if (key.return) {
+        const selected = branchList[branchCursor];
+        if (selected && selected !== git.branch) {
+          try {
+            execSync(`git checkout ${selected}`, { cwd });
+            refresh();
+          } catch {}
+        }
+        setBranchMode(false);
+        return;
+      }
+      if (key.escape || input === 'q' || input === 'ㅂ') {
+        setBranchMode(false);
+        return;
+      }
+      return;
+    }
+
+    // b (or Korean ㅠ) = open branch switcher in GIT tab
+    if ((input === 'b' || input === 'ㅠ') && tab === 2) {
+      const branches = getBranches(cwd);
+      setBranchList(branches);
+      const idx = branches.findIndex(b => b === git.branch);
+      setBranchCursor(idx >= 0 ? idx : 0);
+      setBranchMode(true);
+      return;
+    }
+
     if (input === 'q' || input === 'ㅂ') process.exit(0);
 
     // Escape: close file viewer first, then quit
@@ -696,13 +806,17 @@ function App() {
     <Box flexDirection="column">
 
       {/* ── Header / Tab bar ── */}
-      <Box borderStyle="single" borderColor={C.brand} paddingX={1} justifyContent="space-between">
+      <Box borderStyle="single" borderColor={usage.contextWindow > 0 && usage.totalTokens / usage.contextWindow > 0.85 ? C.red : usage.contextWindow > 0 && usage.totalTokens / usage.contextWindow > 0.65 ? C.yellow : C.brand} paddingX={1} justifyContent="space-between">
         <Box>
-          <Text color={C.brand} bold>◆  HUD  </Text>
+          <Text color={C.brand} bold>◆ HUD</Text>
           {TAB_NAMES.map((name, i) => (
-            <Text key={i} color={tab === i ? C.text : C.dimmer} bold={tab === i}>
-              {tab === i ? `[${i + 1} ${name}]` : ` ${i + 1} ${name} `}
-            </Text>
+            <React.Fragment key={i}>
+              <Text color={C.border}>  │  </Text>
+              <Text color={tab === i ? C.brand : C.dimmer} bold={tab === i}>
+                {tab === i ? '◉ ' : '○ '}
+              </Text>
+              <Text color={tab === i ? C.text : C.dimmer} bold={tab === i}>{name}</Text>
+            </React.Fragment>
           ))}
         </Box>
         <Box>
@@ -714,8 +828,8 @@ function App() {
       {/* ── Content (with scroll offset) ── */}
       <Box flexDirection="column" marginTop={-scrollY}>
         {tab === 0 && <TokensTab  usage={usage} history={history} rateLimits={rateLimits} termWidth={termWidth} C={C} />}
-        {tab === 1 && <ProjectTab info={project} treeCursor={treeCursor} treeExpanded={treeExpanded} selectedFile={selectedFile} fileLines={fileLines} fileScroll={fileScroll} termWidth={termWidth} C={C} />}
-        {tab === 2 && <GitTab     git={git} termWidth={termWidth} C={C} />}
+        {tab === 1 && <ProjectTab info={project} treeCursor={treeCursor} treeExpanded={treeExpanded} selectedFile={selectedFile} fileLines={fileLines} fileScroll={fileScroll} termWidth={termWidth} git={git} C={C} />}
+        {tab === 2 && <GitTab     git={git} termWidth={termWidth} branchMode={branchMode} branchList={branchList} branchCursor={branchCursor} C={C} />}
       </Box>
 
       {/* ── Footer ── */}
@@ -725,6 +839,7 @@ function App() {
           <Text color={C.dimmer}>[1/2/3] tabs  </Text>
           <Text color={tab === 1 ? C.brand : C.dimmer}>[j/k] {tab === 1 ? 'tree' : 'scroll'}  </Text>
           <Text color={tab === 1 ? C.brand : C.dimmer}>{tab === 1 ? (selectedFile ? '[esc/←] close  [j/k] scroll  ' : '[enter] open  [→←] expand  ') : ''}</Text>
+          {tab === 2 && !branchMode && <Text color={C.brand}>[b] branch  </Text>}
           <Text color={C.dimmer}>[r] refresh  [d] theme  [q] quit</Text>
         </Box>
         <Text color={C.dimmer}>↻ {since}</Text>