claude-contextline 1.0.0

package/README.md

@@ -0,0 +1,71 @@
+# claude-contextline
+
+A powerline-style statusline for Claude Code showing context window usage.
+
+## Installation
+
+```bash
+npm install -g claude-contextline
+```
+
+Or use with npx:
+
+```bash
+npx claude-contextline
+```
+
+## Configuration
+
+Add to your Claude Code settings (`~/.claude/settings.json`):
+
+```json
+{
+  "statusLine": {
+    "type": "command",
+    "command": "claude-contextline"
+  }
+}
+```
+
+Or with npx:
+
+```json
+{
+  "statusLine": {
+    "type": "command",
+    "command": "npx claude-contextline"
+  }
+}
+```
+
+## Features
+
+- **Directory** - Shows current project/directory name
+- **Git** - Shows branch name with dirty indicator (●)
+- **Model** - Shows active Claude model
+- **Context** - Shows context window usage percentage
+
+## Display
+
+```
+ myproject  main ●  ✱ Opus 4.5  ◫ 21%
+```
+
+### Color States
+
+- **Normal** (<80%): Sky blue text on dark background
+- **Warning** (≥80%): White text on orange background
+- **Critical** (≥100%): White text on red background
+
+## Requirements
+
+- Node.js 18+
+- A terminal with powerline font support (for arrow glyphs)
+
+## Credits
+
+Styling based on [claude-limitline](https://github.com/tylergraydev/claude-limitline).
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,230 @@
+#!/usr/bin/env node
+
+// src/utils/claude-hook.ts
+async function readHookData(timeoutMs = 1e3) {
+  return new Promise((resolve, reject) => {
+    let data = "";
+    const timeout = setTimeout(() => {
+      process.stdin.removeAllListeners();
+      process.stdin.pause();
+      resolve({});
+    }, timeoutMs);
+    if (process.stdin.isTTY) {
+      clearTimeout(timeout);
+      resolve({});
+      return;
+    }
+    process.stdin.setEncoding("utf8");
+    process.stdin.on("data", (chunk) => {
+      data += chunk;
+    });
+    process.stdin.on("end", () => {
+      clearTimeout(timeout);
+      try {
+        const parsed = data.trim() ? JSON.parse(data) : {};
+        resolve(parsed);
+      } catch {
+        resolve({});
+      }
+    });
+    process.stdin.on("error", () => {
+      clearTimeout(timeout);
+      resolve({});
+    });
+    process.stdin.resume();
+  });
+}
+
+// src/utils/environment.ts
+import { execSync } from "child_process";
+import { basename } from "path";
+function getEnvironmentInfo(hookData) {
+  const cwd = hookData.workspace?.current_dir || hookData.cwd || process.cwd();
+  return {
+    directory: getDirectoryName(cwd),
+    gitBranch: getGitBranch(cwd),
+    gitDirty: isGitDirty(cwd),
+    model: getModelName(hookData),
+    contextPercent: getContextPercent(hookData)
+  };
+}
+function getDirectoryName(cwd) {
+  const name = basename(cwd);
+  return name || "/";
+}
+function getGitBranch(cwd) {
+  try {
+    const branch = execSync("git rev-parse --abbrev-ref HEAD", {
+      cwd,
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    if (branch === "HEAD") {
+      return execSync("git rev-parse --short HEAD", {
+        cwd,
+        encoding: "utf8",
+        stdio: ["pipe", "pipe", "pipe"]
+      }).trim();
+    }
+    return branch;
+  } catch {
+    return null;
+  }
+}
+function isGitDirty(cwd) {
+  try {
+    const status = execSync("git status --porcelain", {
+      cwd,
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    return status.trim().length > 0;
+  } catch {
+    return false;
+  }
+}
+function getModelName(hookData) {
+  const displayName = hookData.model?.display_name || "Claude";
+  return displayName.replace(/^Claude\s+/, "");
+}
+function getContextPercent(hookData) {
+  const ctx = hookData.context_window;
+  if (!ctx?.current_usage || !ctx.context_window_size) {
+    return 0;
+  }
+  const usage = ctx.current_usage;
+  const totalTokens = (usage.input_tokens || 0) + (usage.cache_creation_input_tokens || 0) + (usage.cache_read_input_tokens || 0);
+  return Math.round(totalTokens / ctx.context_window_size * 100);
+}
+
+// src/utils/constants.ts
+var SYMBOLS = {
+  arrow: "\uE0B0",
+  // Powerline right arrow
+  branch: "\uE0A0",
+  // Git branch icon
+  model: "\u2731",
+  // Heavy asterisk ✱
+  context: "\u25EB",
+  // White square with vertical bisecting line ◫
+  dirty: "\u25CF"
+  // Dirty indicator
+};
+
+// src/themes/index.ts
+var darkTheme = {
+  directory: { bg: "#8b4513", fg: "#ffffff" },
+  // Brown, white
+  git: { bg: "#404040", fg: "#ffffff" },
+  // Dark gray, white
+  model: { bg: "#2d2d2d", fg: "#ffffff" },
+  // Very dark gray, white
+  context: { bg: "#2a2a2a", fg: "#87ceeb" },
+  // Nearly black, sky blue
+  warning: { bg: "#d75f00", fg: "#ffffff" },
+  // Orange, white (80%+)
+  critical: { bg: "#af0000", fg: "#ffffff" }
+  // Red, white (100%+)
+};
+function hexToAnsi256(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  if (r === g && g === b) {
+    if (r < 8) return 16;
+    if (r > 248) return 231;
+    return Math.round((r - 8) / 247 * 24) + 232;
+  }
+  const ri = Math.round(r / 255 * 5);
+  const gi = Math.round(g / 255 * 5);
+  const bi = Math.round(b / 255 * 5);
+  return 16 + 36 * ri + 6 * gi + bi;
+}
+var ansi = {
+  fg: (hex) => `\x1B[38;5;${hexToAnsi256(hex)}m`,
+  bg: (hex) => `\x1B[48;5;${hexToAnsi256(hex)}m`,
+  reset: "\x1B[0m"
+};
+function getContextColors(percent) {
+  if (percent >= 100) {
+    return darkTheme.critical;
+  } else if (percent >= 80) {
+    return darkTheme.warning;
+  }
+  return darkTheme.context;
+}
+
+// src/renderer.ts
+var Renderer = class {
+  symbols = SYMBOLS;
+  /**
+   * Render the complete statusline
+   */
+  render(envInfo) {
+    const segments = this.buildSegments(envInfo);
+    if (segments.length === 0) {
+      return "";
+    }
+    return this.renderPowerline(segments);
+  }
+  /**
+   * Build segments based on environment info
+   */
+  buildSegments(envInfo) {
+    const segments = [];
+    segments.push({
+      text: ` ${envInfo.directory} `,
+      colors: darkTheme.directory
+    });
+    if (envInfo.gitBranch) {
+      const dirty = envInfo.gitDirty ? ` ${this.symbols.dirty}` : "";
+      segments.push({
+        text: ` ${this.symbols.branch} ${envInfo.gitBranch}${dirty} `,
+        colors: darkTheme.git
+      });
+    }
+    segments.push({
+      text: ` ${this.symbols.model} ${envInfo.model} `,
+      colors: darkTheme.model
+    });
+    const contextColors = getContextColors(envInfo.contextPercent);
+    segments.push({
+      text: ` ${this.symbols.context} ${envInfo.contextPercent}% `,
+      colors: contextColors
+    });
+    return segments;
+  }
+  /**
+   * Render segments with powerline arrows
+   */
+  renderPowerline(segments) {
+    let output = "";
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const nextColors = i < segments.length - 1 ? segments[i + 1].colors : null;
+      output += ansi.bg(seg.colors.bg) + ansi.fg(seg.colors.fg) + seg.text;
+      output += ansi.reset;
+      if (nextColors) {
+        output += ansi.fg(seg.colors.bg) + ansi.bg(nextColors.bg) + this.symbols.arrow;
+      } else {
+        output += ansi.fg(seg.colors.bg) + this.symbols.arrow;
+      }
+    }
+    output += ansi.reset;
+    return output;
+  }
+};
+
+// src/index.ts
+async function main() {
+  try {
+    const hookData = await readHookData();
+    const envInfo = getEnvironmentInfo(hookData);
+    const renderer = new Renderer();
+    const output = renderer.render(envInfo);
+    process.stdout.write(output);
+  } catch {
+    process.exit(0);
+  }
+}
+main();

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "claude-contextline",
+  "version": "1.0.0",
+  "description": "Powerline statusline for Claude Code showing context window usage",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "claude-contextline": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "statusline",
+    "powerline",
+    "context-window",
+    "cli"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^2.0.0"
+  }
+}