claude-contextline 1.3.2 → 2.0.1

package/README.md

@@ -1,9 +1,7 @@
 # claude-contextline
 
-A powerline-style statusline for Claude Code showing context window usage.
-
-<img width="677" height="38" alt="image" src="https://github.com/user-attachments/assets/070d99fe-290d-4897-88b0-04247bf27866" />
-
+A two-line statusline for Claude Code showing context window usage, model, git
+branch, and working directory.
 
 ## Usage
 
@@ -18,49 +16,20 @@ Add to your Claude Code settings (`~/.claude/settings.json`):
 }
 ```
 
-## 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%
+[█████░░░░░] 42%  Opus 4.6
+(main)            myproject
 ```
 
-### Color States
-
-- **Normal** (<80%): Sky blue text on dark background
-- **Warning** (≥80%): White text on orange background
-- **Critical** (≥100%): White text on red background
-
-## Options
-
-- `--theme <name>` - Use a named color theme (e.g. `--theme fulcrum` for purple-accented Fulcrum branding)
-- `--no-arrows` - Disable powerline arrow separators
-
-```json
-{
-  "statusLine": {
-    "type": "command",
-    "command": "npx claude-contextline --theme fulcrum"
-  }
-}
-```
+- **Line 1**: Context window battery bar (blue) with usage percentage, model name (red)
+- **Line 2**: Git branch (red), working directory (blue) aligned below the model
 
 ## 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.js

@@ -43,9 +43,8 @@ function getEnvironmentInfo(hookData) {
   return {
     directory: getDirectoryName(cwd),
     gitBranch: getGitBranch(cwd),
-    gitDirty: isGitDirty(cwd),
     model: getModelName(hookData),
-    contextPercent: getContextPercent(hookData)
+    usedPercentage: getUsedPercentage(hookData)
   };
 }
 function getDirectoryName(cwd) {
@@ -57,220 +56,84 @@ function getGitBranch(cwd) {
     const branch = execSync("git rev-parse --abbrev-ref HEAD", {
       cwd,
       encoding: "utf8",
-      stdio: ["pipe", "pipe", "pipe"]
+      stdio: ["pipe", "pipe", "pipe"],
+      env: { ...process.env, GIT_OPTIONAL_LOCKS: "0" }
     }).trim();
     if (branch === "HEAD") {
-      return execSync("git rev-parse --short HEAD", {
-        cwd,
-        encoding: "utf8",
-        stdio: ["pipe", "pipe", "pipe"]
-      }).trim();
+      return null;
     }
     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) {
+function getUsedPercentage(hookData) {
   const ctx = hookData.context_window;
-  if (!ctx?.current_usage || !ctx.context_window_size) {
-    return 0;
+  if (!ctx) return null;
+  if (ctx.used_percentage != null) {
+    return Math.floor(ctx.used_percentage);
   }
-  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
-};
-var TEXT_SYMBOLS = {
-  arrow: "",
-  branch: "",
-  model: "",
-  context: "",
-  dirty: "*"
-};
-
-// 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%+)
-};
-var fulcrumTheme = {
-  directory: { bg: "#f90013", fg: "#ffffff" },
-  // Destructive red, white
-  git: { bg: "#121212", fg: "#0064f4" },
-  // Secondary, accent blue
-  model: { bg: "#090909", fg: "#f84331" },
-  // Card, warning red-orange
-  context: { bg: "#161616", fg: "#0064f4" },
-  // Muted, accent blue
-  warning: { bg: "#f84331", fg: "#ffffff" },
-  // Warning red-orange, white (80%+)
-  critical: { bg: "#0064f4", fg: "#ffffff" }
-  // Accent blue, white (100%+)
-};
-function getTheme(name) {
-  if (name === "fulcrum") return fulcrumTheme;
-  return darkTheme;
-}
-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;
+  if (ctx.current_usage && ctx.context_window_size) {
+    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.floor(totalTokens / ctx.context_window_size * 100);
   }
-  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, theme) {
-  if (percent >= 100) {
-    return theme.critical;
-  } else if (percent >= 80) {
-    return theme.warning;
-  }
-  return theme.context;
+  return null;
 }
 
 // src/renderer.ts
-function detectNerdFontSupport() {
-  if (process.env.NERD_FONTS === "1") return true;
-  if (process.env.NERD_FONTS === "0") return false;
-  const termProgram = process.env.TERM_PROGRAM?.toLowerCase() ?? "";
-  const nerdFontTerminals = [
-    "warp",
-    "iterm",
-    "hyper",
-    "kitty",
-    "alacritty",
-    "ghostty"
-  ];
-  return nerdFontTerminals.some((t) => termProgram.includes(t));
-}
-var Renderer = class {
-  symbols = detectNerdFontSupport() ? SYMBOLS : TEXT_SYMBOLS;
-  noArrows;
-  theme;
-  constructor(options = {}) {
-    this.noArrows = options.noArrows ?? false;
-    this.theme = getTheme(options.themeName);
+var ESC = "\x1B";
+var RESET = `${ESC}[0m`;
+var BLUE = `${ESC}[38;5;69m`;
+var RED = `${ESC}[38;5;196m`;
+var GRAY = `${ESC}[38;5;243m`;
+var BAR_WIDTH = 10;
+var FILLED_CHAR = "\u2588";
+var EMPTY_CHAR = "\u2591";
+function render(envInfo) {
+  let out = "";
+  let modelCol = 0;
+  if (envInfo.usedPercentage != null) {
+    const pct = Math.max(0, envInfo.usedPercentage);
+    const pctStr = String(pct);
+    const nFilled = Math.min(
+      Math.floor(pct * BAR_WIDTH / 100),
+      BAR_WIDTH
+    );
+    const nEmpty = BAR_WIDTH - nFilled;
+    const filled = FILLED_CHAR.repeat(nFilled);
+    const empty = EMPTY_CHAR.repeat(nEmpty);
+    out += `${BLUE}[${filled}${GRAY}${empty}${BLUE}] ${pctStr}%`;
+    modelCol = 16 + pctStr.length;
   }
-  /**
-   * Render the complete statusline
-   */
-  render(envInfo) {
-    const segments = this.buildSegments(envInfo);
-    if (segments.length === 0) {
-      return "";
-    }
-    return this.renderPowerline(segments);
+  if (out.length > 0) {
+    out += "  ";
   }
-  /**
-   * Build segments based on environment info
-   */
-  buildSegments(envInfo) {
-    const segments = [];
-    segments.push({
-      text: ` ${envInfo.directory} `,
-      colors: this.theme.directory
-    });
-    if (envInfo.gitBranch) {
-      const dirty = envInfo.gitDirty ? ` ${this.symbols.dirty}` : "";
-      segments.push({
-        text: ` ${this.symbols.branch} ${envInfo.gitBranch}${dirty} `,
-        colors: this.theme.git
-      });
-    }
-    segments.push({
-      text: ` ${this.symbols.model} ${envInfo.model} `,
-      colors: this.theme.model
-    });
-    const contextColors = getContextColors(envInfo.contextPercent, this.theme);
-    segments.push({
-      text: ` ${this.symbols.context} ${envInfo.contextPercent}% `,
-      colors: contextColors
-    });
-    return segments;
+  out += `${RED}${envInfo.model}`;
+  out += "\n";
+  if (envInfo.gitBranch) {
+    const branchText = `(${envInfo.gitBranch})`;
+    out += `${RED}${branchText}`;
+    const gap = Math.max(2, modelCol - branchText.length);
+    out += " ".repeat(gap);
+  } else {
+    out += " ".repeat(modelCol);
   }
-  /**
-   * 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 (this.noArrows) {
-      } else 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;
-  }
-};
+  out += `${BLUE}${envInfo.directory}`;
+  out += RESET;
+  return out;
+}
 
 // src/index.ts
 async function main() {
   try {
-    const noArrows = process.argv.includes("--no-arrows");
-    const themeIndex = process.argv.indexOf("--theme");
-    const themeName = themeIndex !== -1 ? process.argv[themeIndex + 1] : void 0;
     const hookData = await readHookData();
     const envInfo = getEnvironmentInfo(hookData);
-    const renderer = new Renderer({ noArrows, themeName });
-    const output = renderer.render(envInfo);
+    const output = render(envInfo);
     process.stdout.write(output);
   } catch {
     process.exit(0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "claude-contextline",
-  "version": "1.3.2",
-  "description": "Powerline statusline for Claude Code showing context window usage",
+  "version": "2.0.1",
+  "description": "Two-line statusline for Claude Code showing context window usage",
   "type": "module",
   "main": "dist/index.js",
   "bin": {
@@ -25,7 +25,6 @@
     "claude",
     "claude-code",
     "statusline",
-    "powerline",
     "context-window",
     "cli"
   ],