claude-contextline 2.0.0 → 2.1.0

package/README.md

@@ -23,8 +23,15 @@ Add to your Claude Code settings (`~/.claude/settings.json`):
 (main)            myproject
 ```
 
+Colors track your active [herdr](https://github.com/) theme, read from
+`~/.config/herdr/config.toml` (respects `$XDG_CONFIG_HOME` and
+`$HERDR_CONFIG_PATH`) on every render — including `[theme.custom]` overrides.
+All of herdr's built-in themes are supported (catppuccin, tokyo-night, dracula,
+nord, gruvbox, solarized, kanagawa, rosé-pine, vesper, …); if no config is found
+it falls back to Catppuccin Mocha.
+
 - **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
+- **Line 2**: Git branch (mauve), working directory (blue) aligned below the model
 
 ## Requirements
 

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,198 +56,243 @@ 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);
+  }
+  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 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);
+  return null;
 }
 
-// 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/theme.ts
+import { readFileSync } from "fs";
+import { homedir } from "os";
+import { join } from "path";
+var rgb = (r, g, b) => ({ kind: "rgb", r, g, b });
+var ansi = (code) => ({ kind: "ansi", code });
+var RESET_COLOR = { kind: "reset" };
+var PALETTES = {
+  catppuccin: { blue: rgb(137, 180, 250), red: rgb(243, 139, 168), mauve: rgb(203, 166, 247), overlay0: rgb(108, 112, 134) },
+  "catppuccin-latte": { blue: rgb(30, 102, 245), red: rgb(210, 15, 57), mauve: rgb(136, 57, 239), overlay0: rgb(156, 160, 176) },
+  terminal: { blue: ansi(34), red: ansi(91), mauve: ansi(37), overlay0: ansi(37) },
+  "tokyo-night": { blue: rgb(122, 162, 247), red: rgb(247, 118, 142), mauve: rgb(187, 154, 247), overlay0: rgb(86, 95, 137) },
+  "tokyo-night-day": { blue: rgb(46, 125, 233), red: rgb(245, 42, 101), mauve: rgb(120, 71, 189), overlay0: rgb(137, 144, 179) },
+  dracula: { blue: rgb(139, 233, 253), red: rgb(255, 85, 85), mauve: rgb(255, 121, 198), overlay0: rgb(98, 114, 164) },
+  nord: { blue: rgb(129, 161, 193), red: rgb(191, 97, 106), mauve: rgb(180, 142, 173), overlay0: rgb(76, 86, 106) },
+  gruvbox: { blue: rgb(131, 165, 152), red: rgb(251, 73, 52), mauve: rgb(211, 134, 155), overlay0: rgb(146, 131, 116) },
+  "gruvbox-light": { blue: rgb(7, 102, 120), red: rgb(157, 0, 6), mauve: rgb(143, 63, 113), overlay0: rgb(146, 131, 116) },
+  "one-dark": { blue: rgb(97, 175, 239), red: rgb(224, 108, 117), mauve: rgb(198, 120, 221), overlay0: rgb(92, 99, 112) },
+  "one-light": { blue: rgb(64, 120, 242), red: rgb(228, 86, 73), mauve: rgb(166, 38, 164), overlay0: rgb(160, 161, 167) },
+  solarized: { blue: rgb(38, 139, 210), red: rgb(220, 50, 47), mauve: rgb(211, 54, 130), overlay0: rgb(88, 110, 117) },
+  "solarized-light": { blue: rgb(38, 139, 210), red: rgb(220, 50, 47), mauve: rgb(211, 54, 130), overlay0: rgb(147, 161, 161) },
+  kanagawa: { blue: rgb(126, 156, 216), red: rgb(195, 64, 67), mauve: rgb(149, 127, 184), overlay0: rgb(114, 113, 105) },
+  "kanagawa-lotus": { blue: rgb(77, 105, 155), red: rgb(200, 64, 83), mauve: rgb(98, 76, 131), overlay0: rgb(160, 156, 172) },
+  "rose-pine": { blue: rgb(49, 116, 143), red: rgb(235, 111, 146), mauve: rgb(196, 167, 231), overlay0: rgb(110, 106, 134) },
+  "rose-pine-dawn": { blue: rgb(40, 105, 131), red: rgb(180, 99, 122), mauve: rgb(144, 122, 169), overlay0: rgb(152, 147, 165) },
+  vesper: { blue: rgb(176, 176, 176), red: rgb(255, 128, 128), mauve: rgb(255, 209, 168), overlay0: rgb(92, 92, 92) }
 };
-var TEXT_SYMBOLS = {
-  arrow: "",
-  branch: "",
-  model: "",
-  context: "",
-  dirty: "*"
+var ALIASES = {
+  "catppuccin-mocha": "catppuccin",
+  latte: "catppuccin-latte",
+  light: "catppuccin-latte",
+  tokyonight: "tokyo-night",
+  "tokyo-day": "tokyo-night-day",
+  "tokyonight-day": "tokyo-night-day",
+  "gruvbox-dark": "gruvbox",
+  onedark: "one-dark",
+  onelight: "one-light",
+  "solarized-dark": "solarized",
+  lotus: "kanagawa-lotus",
+  rosepine: "rose-pine",
+  "rosepine-dawn": "rose-pine-dawn",
+  dawn: "rose-pine-dawn"
 };
-
-// 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 DEFAULT_THEME = "catppuccin";
+var NAMED_ANSI = {
+  black: 30,
+  red: 31,
+  green: 32,
+  yellow: 33,
+  blue: 34,
+  magenta: 35,
+  purple: 35,
+  cyan: 36,
+  gray: 37,
+  grey: 37,
+  white: 97,
+  darkgray: 90,
+  darkgrey: 90,
+  lightred: 91,
+  lightgreen: 92,
+  lightyellow: 93,
+  lightblue: 94,
+  lightmagenta: 95,
+  lightcyan: 96
 };
-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;
+function fg(color) {
+  switch (color.kind) {
+    case "rgb":
+      return `\x1B[38;2;${color.r};${color.g};${color.b}m`;
+    case "ansi":
+      return `\x1B[${color.code}m`;
+    case "reset":
+      return `\x1B[39m`;
   }
-  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;
+function parseColor(input) {
+  const s = input.trim().toLowerCase();
+  if (s === "reset" || s === "default" || s === "none" || s === "transparent") {
+    return RESET_COLOR;
   }
-  return darkTheme.context;
+  if (s.startsWith("#")) {
+    const hex = s.slice(1);
+    if (/^[0-9a-f]{6}$/.test(hex)) {
+      return rgb(parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16));
+    }
+    if (/^[0-9a-f]{3}$/.test(hex)) {
+      return rgb(parseInt(hex[0], 16) * 17, parseInt(hex[1], 16) * 17, parseInt(hex[2], 16) * 17);
+    }
+  }
+  const rgbMatch = s.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+  if (rgbMatch) {
+    return rgb(Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3]));
+  }
+  if (s in NAMED_ANSI) {
+    return ansi(NAMED_ANSI[s]);
+  }
+  return ansi(36);
 }
-
-// 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));
+function configPaths() {
+  const override = process.env.HERDR_CONFIG_PATH;
+  if (override) return [override];
+  const base = process.env.XDG_CONFIG_HOME || join(homedir(), ".config");
+  return [join(base, "herdr", "config.toml"), join(base, "herdr-dev", "config.toml")];
 }
-var Renderer = class {
-  symbols = detectNerdFontSupport() ? SYMBOLS : TEXT_SYMBOLS;
-  noArrows;
-  constructor(options = {}) {
-    this.noArrows = options.noArrows ?? false;
-  }
-  /**
-   * Render the complete statusline
-   */
-  render(envInfo) {
-    const segments = this.buildSegments(envInfo);
-    if (segments.length === 0) {
-      return "";
+function parseThemeSection(toml) {
+  const result = { custom: {} };
+  let section = "";
+  for (const rawLine of toml.split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (!line || line.startsWith("#")) continue;
+    const sectionMatch = line.match(/^\[([^\]]+)\]$/);
+    if (sectionMatch) {
+      section = sectionMatch[1].trim();
+      continue;
     }
-    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
-      });
+    const eq = line.indexOf("=");
+    if (eq === -1) continue;
+    const key = line.slice(0, eq).trim();
+    let value = line.slice(eq + 1).trim();
+    if (value.startsWith('"') || value.startsWith("'")) {
+      const quote = value[0];
+      const end = value.indexOf(quote, 1);
+      if (end !== -1) value = value.slice(1, end);
+    } else {
+      const hash = value.indexOf("#");
+      if (hash !== -1) value = value.slice(0, hash).trim();
+    }
+    if (section === "theme" && key === "name") {
+      result.name = value;
+    } else if (section === "theme.custom") {
+      result.custom[key] = value;
     }
-    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 (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;
-      }
+  return result;
+}
+function resolvePalette(name) {
+  const normalized = (name ?? DEFAULT_THEME).toLowerCase().replace(/[ _]/g, "-");
+  const canonical = ALIASES[normalized] ?? normalized;
+  return PALETTES[canonical] ?? PALETTES[DEFAULT_THEME];
+}
+function loadHerdrTheme() {
+  let parsed = { custom: {} };
+  for (const path of configPaths()) {
+    try {
+      parsed = parseThemeSection(readFileSync(path, "utf8"));
+      break;
+    } catch {
     }
-    output += ansi.reset;
-    return output;
   }
-};
+  const palette = { ...resolvePalette(parsed.name) };
+  for (const token of ["blue", "red", "mauve", "overlay0"]) {
+    const override = parsed.custom[token];
+    if (override) palette[token] = parseColor(override);
+  }
+  return {
+    blue: fg(palette.blue),
+    red: fg(palette.red),
+    mauve: fg(palette.mauve),
+    overlay0: fg(palette.overlay0)
+  };
+}
+
+// src/renderer.ts
+var RESET = "\x1B[0m";
+var BAR_WIDTH = 10;
+var FILLED_CHAR = "\u2588";
+var EMPTY_CHAR = "\u2591";
+function render(envInfo) {
+  const { blue: BLUE, red: RED, mauve: MAUVE, overlay0: GRAY } = loadHerdrTheme();
+  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;
+  }
+  if (out.length > 0) {
+    out += "  ";
+  }
+  out += `${RED}${envInfo.model}`;
+  out += "\n";
+  if (envInfo.gitBranch) {
+    const branchText = `(${envInfo.gitBranch})`;
+    out += `${MAUVE}${branchText}`;
+    const gap = Math.max(2, modelCol - branchText.length);
+    out += " ".repeat(gap);
+  } else {
+    out += " ".repeat(modelCol);
+  }
+  out += `${BLUE}${envInfo.directory}`;
+  out += RESET;
+  return out;
+}
 
 // src/index.ts
 async function main() {
   try {
-    const noArrows = process.argv.includes("--no-arrows");
     const hookData = await readHookData();
     const envInfo = getEnvironmentInfo(hookData);
-    const renderer = new Renderer({ noArrows });
-    const output = renderer.render(envInfo);
+    const output = render(envInfo);
     process.stdout.write(output);
   } catch {
     process.exit(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-contextline",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Two-line statusline for Claude Code showing context window usage",
   "type": "module",
   "main": "dist/index.js",