@say8425/cc-statusline 1.3.0 → 2.0.0

package/README.md

@@ -1,5 +1,7 @@
 # cc-statusline
 
+English | [한국어](docs/README.ko.md) | [日本語](docs/README.ja.md) | [中文](docs/README.zh.md) | [Español](docs/README.es.md)
+
 Custom statusline for Claude Code.
 
 [![Claude Code](https://img.shields.io/badge/Claude_Code-D97757?style=flat&logo=claude&logoColor=white)](https://code.claude.com/docs/en/statusline)
@@ -7,29 +9,95 @@ Custom statusline for Claude Code.
 [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org)
 [![Bun](https://img.shields.io/badge/Bun-black?style=flat&logo=bun)](https://bun.sh)
 
-## Preview
+## Installation
+
+Add the following to `~/.claude/settings.json`:
+
+```json
+{
+  "statusLine": {
+    "type": "command",
+    "command": "bunx @say8425/cc-statusline",
+    "padding": 0
+  }
+}
+```
+
+## Screenshots
+
+### Git diff only
+
+![scenario1_diff_only](docs/scenario1_diff_only.png)
+
+### PR only
+
+![scenario2_pr_only](docs/scenario2_pr_only.png)
+
+### Git diff + PR
 
-![preview-1](docs/preview-1.png)
+![scenario3_diff_pr](docs/scenario3_diff_pr.png)
 
-![preview-2](docs/preview-2.png)
+### Usage Metrics
+
+![Screenshot of status line with usage metrics](docs/usage_metrics.png)
 
 ## Features
 
 - **Session Time**: Current session elapsed time
-- **Context %**: Current context window usage (updates immediately)
-- **Session Tokens**: Cumulative token usage
+- **Cost**: Session cost in USD
+- **Context**: Token usage with percentage (color-coded)
+- **Git Diff**: File count, insertions, deletions
 - **PR URL**: Clickable OSC 8 hyperlink
 - **TrueColor**: Dynamic colors based on thresholds
+- **Limit Reset Time**: Reset time display (HH:MM)
+- **Block Usage**: 5-hour utilization percentage (from server API)
+- **Weekly Reset Timer**: Weekly limit reset time (MM/DD HH:MM)
+- **Weekly Usage**: 7-day utilization percentage (from server API)
 
-## Installation
+## Emoji Guide
 
-Add the following to `~/.claude/settings.json`:
+| Emoji | Description              |
+| ----- | ------------------------ |
+| 📁    | Project folder name      |
+| 🌿    | Current Git branch       |
+| ⏱️    | Session elapsed time     |
+| 💰    | Session cost in USD      |
+| 🧠    | Context window usage     |
+| ⏳    | Limit reset time         |
+| 📊    | 5-hour utilization %     |
+| ⏰    | Weekly limit reset time  |
+| 📅    | 7-day utilization %      |
+| ✏️    | Uncommitted changes      |
+| 📎    | Pull request link        |
+
+## Usage Metrics
+
+Shows usage information from the Anthropic Usage API.
+
+> [!WARNING]
+> The `--show-usage` feature uses an unofficial, reverse-engineered Anthropic API endpoint to retrieve usage data. This is not an officially supported API, and may break or change at any time without notice. **Use at your own risk.** The author assumes no responsibility for any consequences, including but not limited to account restrictions or service disruptions, that may arise from the use of this feature.
+
+> [!NOTE]
+> This feature is **macOS only** as it reads the OAuth token from macOS Keychain (`Claude Code-credentials`).
+
+### How It Works
+
+Calls the Anthropic Usage API (`/api/oauth/usage`) using the OAuth access token from macOS Keychain to retrieve:
+
+1. **5-hour utilization** - Server-calculated usage percentage for the current billing block
+2. **7-day utilization** - Server-calculated weekly usage percentage
+3. **Reset timer** - Exact reset time from the server (`five_hour.resets_at`)
+4. **Weekly reset timer** - Weekly limit reset time (`seven_day.resets_at`), shown as `MM/DD HH:MM` (e.g., `02/15 17:00`)
+
+### Enable
+
+Usage metrics are **hidden by default**. To enable, use the `--show-usage` flag:
 
 ```json
 {
   "statusLine": {
     "type": "command",
-    "command": "bunx @say8425/cc-statusline",
+    "command": "bunx @say8425/cc-statusline --show-usage",
     "padding": 0
   }
 }
@@ -40,11 +108,31 @@ Add the following to `~/.claude/settings.json`:
 - [Bun](https://bun.sh) - JavaScript runtime
 - [gh](https://cli.github.com) - GitHub CLI (optional, for PR URL)
 
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Run tests
+bun test
+
+# Run tests with coverage
+bun test --coverage
+
+# Type check
+bun run typecheck
+
+# Lint
+bun run lint
+```
+
 ## Color Thresholds
 
-| Metric    | Normal (white) | Warning (yellow) | Critical (red) |
-| --------- | -------------- | ---------------- | -------------- |
-| Context % | < 50%          | 50-80%           | > 80%          |
+| Metric        | Normal (white) | Warning (yellow) | Critical (red) |
+| ------------- | -------------- | ---------------- | -------------- |
+| Context %     | < 50%          | 50-80%           | > 80%          |
+| Block Usage % | < 50%          | 50-80%           | > 80%          |
 
 ## License
 

package/package.json

@@ -1,29 +1,33 @@
 {
-  "name": "@say8425/cc-statusline",
-  "version": "1.3.0",
-  "type": "module",
-  "description": "Custom statusline for Claude Code",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/say8425/cc-statusline.git"
-  },
-  "bin": {
-    "cc-statusline": "src/index.ts"
-  },
-  "files": [
-    "src/index.ts"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "scripts": {
-    "start": "bun src/index.ts",
-    "lint": "biome check src/",
-    "typecheck": "tsc --noEmit"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.3.9",
-    "@types/bun": "latest",
-    "typescript": "^5.9.3"
-  }
+	"name": "@say8425/cc-statusline",
+	"version": "2.0.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/say8425/cc-statusline.git"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.3.9",
+		"@types/bun": "latest",
+		"typescript": "^5.9.3"
+	},
+	"bin": {
+		"cc-statusline": "src/index.ts"
+	},
+	"description": "Custom statusline for Claude Code",
+	"files": [
+		"src/index.ts",
+		"src/lib.ts"
+	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org"
+	},
+	"scripts": {
+		"build": "bun build.ts",
+		"start": "bun src/index.ts",
+		"test": "bun test",
+		"test:coverage": "bun test --coverage",
+		"lint": "biome check src/",
+		"typecheck": "tsc --noEmit"
+	},
+	"type": "module"
 }

package/src/index.ts

@@ -1,216 +1,48 @@
 #!/usr/bin/env bun
 
-import { $ } from "bun";
-
-// 공식 Claude Code JSON input 타입 정의
-interface ClaudeStatusInput {
-	cost: {
-		total_duration_ms: number;
-		total_cost_usd: number;
-	};
-	context_window: {
-		context_window_size: number;
-		current_usage: {
-			input_tokens: number;
-			output_tokens: number;
-			cache_creation_input_tokens: number;
-			cache_read_input_tokens: number;
-		};
-	};
-	workspace: {
-		current_dir: string;
-		project_dir: string;
-	};
-}
-
-// 캐시 구조
-const cache = {
-	branch: { value: "", timestamp: 0 },
-	gitChanges: { files: 0, insertions: 0, deletions: 0, timestamp: 0 },
-	prUrl: { value: null as string | null, timestamp: 0 },
-};
-
-// 캐시 TTL (ms)
-const CACHE_TTL = {
-	branch: 5000, // 5초
-	gitChanges: 3000, // 3초
-	prUrl: 30000, // 30초
-};
-
-// TrueColor 색상 정의
-const C = {
-	RESET: "\x1b[0m",
-	CYAN: "\x1b[38;2;0;255;255m",
-	MAGENTA: "\x1b[38;2;255;100;200m",
-	GREEN: "\x1b[38;2;100;255;100m",
-	YELLOW: "\x1b[38;2;255;220;100m",
-	RED: "\x1b[38;2;255;100;100m",
-	BLUE: "\x1b[38;2;100;150;255m",
-	WHITE: "\x1b[38;2;200;200;200m",
-	UNDERLINE: "\x1b[4m",
-};
-
-// Context 사용률에 따른 색상
-function getContextColor(pct: number): string {
-	if (pct < 50) return C.WHITE;
-	if (pct < 80) return C.YELLOW;
-	return C.RED;
-}
-
-// 숫자 포맷팅 (천 단위 콤마)
-function formatNumber(n: number): string {
-	return n.toLocaleString("en-US");
-}
-
-// 시간 포맷팅 (HH:MM)
-function formatTime(hours: number, mins: number): string {
-	return `${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}`;
-}
-
-// stdin에서 JSON 읽기
-async function readStdin(): Promise<string> {
-	const chunks: Uint8Array[] = [];
-	for await (const chunk of Bun.stdin.stream()) {
-		chunks.push(chunk);
-	}
-	return Buffer.concat(chunks).toString("utf-8");
-}
-
-// Git 브랜치 가져오기 (캐싱)
-async function getBranchCached(): Promise<string> {
-	if (Date.now() - cache.branch.timestamp < CACHE_TTL.branch) {
-		return cache.branch.value;
-	}
-	try {
-		const result = await $`git branch --show-current 2>/dev/null`.text();
-		cache.branch = { value: result.trim(), timestamp: Date.now() };
-		return cache.branch.value;
-	} catch {
-		return cache.branch.value;
-	}
-}
-
-// Git 변경사항 가져오기 (캐싱)
-async function getGitChangesCached(): Promise<{
-	files: number;
-	insertions: number;
-	deletions: number;
-}> {
-	if (Date.now() - cache.gitChanges.timestamp < CACHE_TTL.gitChanges) {
-		return cache.gitChanges;
-	}
-	try {
-		const [diff, staged] = await Promise.all([
-			$`git diff --shortstat 2>/dev/null`.text(),
-			$`git diff --cached --shortstat 2>/dev/null`.text(),
-		]);
-		const combined = `${diff}\n${staged}`;
-
-		// 파일 수, insertions, deletions 추출
-		const [files, insertions, deletions] = [
-			/(\d+) file/g,
-			/(\d+) insertion/g,
-			/(\d+) deletion/g,
-		].map((regex) =>
-			(combined.match(regex) || []).reduce(
-				(sum, m) => sum + Number.parseInt(m, 10),
-				0,
-			),
-		);
-		cache.gitChanges = { files, insertions, deletions, timestamp: Date.now() };
-		return cache.gitChanges;
-	} catch {
-		return cache.gitChanges;
-	}
-}
-
-// PR URL 가져오기 (캐싱)
-async function getPrUrlCached(): Promise<string | null> {
-	if (Date.now() - cache.prUrl.timestamp < CACHE_TTL.prUrl) {
-		return cache.prUrl.value;
-	}
-	try {
-		const result = await $`gh pr view --json url -q .url 2>/dev/null`.text();
-		cache.prUrl = { value: result.trim() || null, timestamp: Date.now() };
-		return cache.prUrl.value;
-	} catch {
-		return cache.prUrl.value;
-	}
-}
+import { parseCliArgs } from "./cli.ts";
+import {
+	getBranchCached,
+	getGitChangesCached,
+	getPrUrlCached,
+} from "./git/index.ts";
+import { renderStatusLine } from "./render.ts";
+import { readStdin } from "./stdin.ts";
+import type { ClaudeStatusInput } from "./types.ts";
+import { getUsageCached } from "./usage/index.ts";
 
 // 메인 함수
-async function main() {
-	// 1. stdin에서 Claude Code JSON 읽기
-	const claudeJson: ClaudeStatusInput = JSON.parse(await readStdin());
+export async function main(cliArgs?: string[]): Promise<void> {
+	// CLI 인자 파싱
+	const args = cliArgs ?? process.argv.slice(2);
+	const { showUsage } = parseCliArgs(args);
 
-	// 2. 폴더 이름 추출 (프로젝트 루트 디렉토리)
-	const folder = claudeJson.workspace?.project_dir?.split("/").pop() || "";
+	// 1. stdin에서 Claude Code JSON 읽기 (empty stdin 처리)
+	const claudeJson: ClaudeStatusInput = JSON.parse((await readStdin()) || "{}");
 
-	// 3. 세션 시간 계산
-	const sessionMs = claudeJson.cost?.total_duration_ms || 0;
-	const sessionSec = Math.floor(sessionMs / 1000);
-	const sessionHrs = Math.floor(sessionSec / 3600);
-	const sessionMins = Math.floor((sessionSec % 3600) / 60);
-
-	// 4. 비용
-	const costUsd = claudeJson.cost?.total_cost_usd || 0;
-
-	// 5. Context 토큰 계산
-	const usage = claudeJson.context_window?.current_usage;
-	const contextSize = claudeJson.context_window?.context_window_size || 200000;
-
-	const totalTokens = usage
-		? usage.input_tokens +
-			usage.output_tokens +
-			usage.cache_creation_input_tokens +
-			usage.cache_read_input_tokens
-		: 0;
-
-	const contextPct = Math.round((totalTokens / contextSize) * 100);
-	const ctxColor = getContextColor(contextPct);
-
-	// 6. Git 정보 (캐싱, 병렬 실행)
-	const [branch, gitChanges, prUrl] = await Promise.all([
+	// 2. Git 정보 + 사용량 (캐싱, 병렬 실행)
+	const [branch, gitChanges, prUrl, blockUsage] = await Promise.all([
 		getBranchCached(),
 		getGitChangesCached(),
 		getPrUrlCached(),
+		showUsage ? getUsageCached() : Promise.resolve(null),
 	]);
 
-	// 7. 출력
-	// 1번째 줄: 폴더 | 브랜치
-	let line1 = `${C.WHITE}📁 ${folder}${C.RESET}`;
-	if (branch) {
-		line1 += ` | ${C.WHITE}🌿 ${branch}${C.RESET}`;
-	}
-	console.log(line1);
-
-	// 2번째 줄: 세션 시간 | 비용 | 컨텍스트
-	console.log(
-		`${C.WHITE}⏱️ ${formatTime(sessionHrs, sessionMins)}${C.RESET} | ` +
-			`${C.WHITE}💰 $${costUsd.toFixed(2)}${C.RESET} | ` +
-			`${ctxColor}🧠 ${formatNumber(totalTokens)} (${contextPct}%)${C.RESET}`,
-	);
+	// 3. 렌더링 및 출력
+	const lines = renderStatusLine({
+		claudeJson,
+		branch,
+		gitChanges,
+		prUrl,
+		blockUsage,
+		showUsage,
+	});
 
-	// 3번째 줄: git changes | PR URL
-	const hasGitChanges =
-		gitChanges.files > 0 ||
-		gitChanges.insertions > 0 ||
-		gitChanges.deletions > 0;
-	if (hasGitChanges || prUrl) {
-		let line3 = "";
-		if (hasGitChanges) {
-			line3 += `✏️ ${C.WHITE}${gitChanges.files} files${C.RESET} ${C.GREEN}+${gitChanges.insertions}${C.RESET} ${C.RED}-${gitChanges.deletions}${C.RESET}`;
-		}
-		if (prUrl) {
-			const prLabel = prUrl
-				.replace("https://github.com/", "")
-				.replace("/pull/", "#");
-			if (line3) line3 += " | ";
-			// OSC 8 하이퍼링크
-			line3 += `📎 ${C.WHITE}${C.UNDERLINE}\x1b]8;;${prUrl}\x07${prLabel}\x1b]8;;\x07${C.RESET}`;
-		}
-		console.log(line3);
+	for (const line of lines) {
+		console.log(line);
 	}
 }
 
-main().catch(console.error);
+if (import.meta.main) {
+	main().catch(console.error);
+}