@nutthead/cc-statusline 0.3.0 → 0.4.0

package/README.md

@@ -2,23 +2,23 @@
 
 Themeable status line provider for Claude Code.
 
+Requires [Bun](https://bun.com).
+
 ## Preview
 
-The default theme renders a two-row status line:
+### Default Theme
 
-```
-🤖 opus-4-5           📃 93aba123-d123-4a6b-b1b5-2f3e7d111317           🗂️ ~/a/…/statusline
-🌿 main                                                                               0.38%
-```
+Two-row layout with model, session, project directory, git status, and context usage:
+
+![Default theme preview](assets/default-preview.png)
+
+### Powerline Theme
+
+Single-row powerline-style segments with muted dark backgrounds and arrow separators:
 
-- **Row 1** (left to right):
-  - 🤖 Model ID (abbreviated)
-  - 📃 Session ID
-  - 🗂️ Project directory (compressed and telescoped)
+![Powerline theme preview](assets/powerline-preview.png)
 
-- **Row 2** (left to right):
-  - 🌿 Git branch name (or 🪾 commit hash if detached, 💾 if not a repo, 💥 on error)
-  - Context window usage percentage
+Wraps to multiple lines when segments exceed terminal width. Select with `--theme powerline`.
 
 ## Install
 
@@ -39,20 +39,21 @@ Then add to `~/.claude/settings.json`:
 
 Use `--overwrite` to replace an existing installation.
 
+## Themes
+
+Built-in themes: `default` (two-row), `powerline` (single-row with powerline arrows).
+
+Use `--theme powerline` to select a built-in theme.
+
 ## Custom Themes
 
-Create a JS file that default-exports a theme function (e.g. `~/.config/cc-statusline/theme.js`):
+Create a JS file that default-exports an async theme function (e.g. `~/.config/cc-statusline/theme.js`):
 
 ```js
-export default function theme(input) {
+export default async function theme(input) {
   if (!input) return "";
-
   const status = JSON.parse(input);
-  const dir = status.workspace.current_dir;
-  const model = status.model.display_name;
-  const ctx = status.context_window.used_percentage ?? 0;
-
-  return `${model} | ${dir} | ctx: ${Math.round(ctx)}%`;
+  return `${status.model.display_name} | ${status.workspace.current_dir}`;
 }
 ```
 
@@ -62,7 +63,7 @@ Then point to it in `~/.claude/settings.json`:
 {
   "statusLine": {
     "type": "command",
-    "command": "~/.claude/statusline --theme ~/.config/cc-statusline/theme.js"
+    "command": "~/.claude/statusline --theme-file ~/.config/cc-statusline/theme.js"
   }
 }
 ```

package/bin/cc-statusline.js

@@ -2,6 +2,12 @@
 import { createRequire } from "node:module";
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
+// src/cli.ts
+import { spawnSync } from "node:child_process";
+import { access, copyFile, mkdir, unlink } from "node:fs/promises";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
 // node_modules/meow/build/index.js
 import process4 from "node:process";
 
@@ -9408,10 +9414,6 @@ var meow = (helpText, options = {}) => {
 };
 
 // src/cli.ts
-import { spawnSync } from "node:child_process";
-import { access, mkdir, copyFile, unlink } from "node:fs/promises";
-import { homedir } from "node:os";
-import { join } from "node:path";
 var BINARY_NAME = "statusline";
 var CLAUDE_DIR = join(homedir(), ".claude");
 var TARGET_PATH = join(CLAUDE_DIR, BINARY_NAME);

package/index.ts

@@ -1,37 +1,66 @@
-import meow from "meow";
 import { configure } from "@logtape/logtape";
+import chalk from "chalk";
+import meow from "meow";
 import { log, logtapeConfig } from "./src/logging";
-import { defaultTheme } from "./src/themes/defaultTheme";
 import { loadTheme } from "./src/theme/loadTheme";
+import { defaultTheme } from "./src/themes/defaultTheme";
+import { powerlineTheme } from "./src/themes/powerlineTheme";
+
+// Force truecolor output — chalk auto-detection fails when invoked via piped stdin
+chalk.level = 3;
 
 await configure(logtapeConfig);
 
+const BUILTIN_THEMES: Record<string, (input?: string) => Promise<string>> = {
+  default: defaultTheme,
+  powerline: powerlineTheme,
+};
+
 const cli = meow(
   `
   Usage
     $ cc-statusline
 
   Options
-   --theme, -t  Use a custom theme
+    --theme, -t             Use a built-in theme (powerline)
+    --theme-file, -f        Use a custom theme file
 
   Examples
     $ cc-statusline --theme ~/.config/cc-statusline/basic.js
 `,
   {
-    importMeta: import.meta, // This is required
+    importMeta: import.meta,
     flags: {
       theme: {
         type: "string",
         shortFlag: "t",
         isRequired: false,
       },
+      themeFile: {
+        type: "string",
+        shortFlag: "f",
+        isRequired: false,
+      },
     },
   },
 );
 
-const resolvedTheme =
-  (cli.flags.theme && (await loadTheme(cli.flags.theme))) || defaultTheme;
+if (cli.flags.theme && cli.flags.themeFile) {
+  console.error("Error: --theme and --theme-file are mutually exclusive");
+  process.exit(1);
+}
+
+let resolvedTheme: (input?: string) => Promise<string>;
+if (cli.flags.theme) {
+  const selectedTheme = cli.flags.theme;
+  resolvedTheme = BUILTIN_THEMES[selectedTheme] ?? defaultTheme;
+} else if (cli.flags.themeFile) {
+  const selectedTheme = cli.flags.themeFile;
+  resolvedTheme = (await loadTheme(selectedTheme)) || defaultTheme;
+} else {
+  resolvedTheme = defaultTheme;
+}
 
-const input = await Bun.stdin.stream().json();
-log.debug("input: {input}", input);
+const input = await Bun.stdin.stream().text();
+log.debug("input: {input}", { input });
 console.log(await resolvedTheme(input));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutthead/cc-statusline",
   "description": "Status Line for Claude Code",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "bin": {
     "cc-statusline": "bin/cc-statusline.js"
@@ -44,7 +44,7 @@
   "dependencies": {
     "@logtape/file": "^1.3.6",
     "@logtape/logtape": "^1.3.6",
-    "ansi-colors": "^4.1.3",
+    "chalk": "^5.6.2",
     "meow": "^14.0.0",
     "neverthrow": "^8.2.0",
     "simple-git": "^3.30.0",

package/src/cli.ts

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-import meow from "meow";
 import { spawnSync } from "node:child_process";
-import { access, mkdir, copyFile, unlink } from "node:fs/promises";
+import { access, copyFile, mkdir, unlink } from "node:fs/promises";
 import { homedir } from "node:os";
 import { join } from "node:path";
+import meow from "meow";
 
 const BINARY_NAME = "statusline";
 const CLAUDE_DIR = join(homedir(), ".claude");

package/src/logging.ts

@@ -1,6 +1,6 @@
-import { getFileSink } from "@logtape/file";
-import { getLogger, type Config } from "@logtape/logtape";
 import { homedir } from "node:os";
+import { getFileSink } from "@logtape/file";
+import { type Config, getLogger } from "@logtape/logtape";
 
 const logtapeConfig: Config<"file", string> = {
   sinks: {

package/src/schema/statusLine.ts

@@ -30,13 +30,17 @@ const statusSchema = z.object({
       .nullable(),
     used_percentage: z.number().nullable(),
     remaining_percentage: z.number().nullable(),
-    vim: z.object({
-      mode: z.enum(["INSERT", "NORMAL"]),
-    }).optional(),
-    agent: z.object({
-      name: z.string(),
-      type: z.string(),
-    }).optional(),
+    vim: z
+      .object({
+        mode: z.enum(["INSERT", "NORMAL"]),
+      })
+      .optional(),
+    agent: z
+      .object({
+        name: z.string(),
+        type: z.string(),
+      })
+      .optional(),
   }),
 });
 

package/src/theme/loadTheme.ts

@@ -1,5 +1,5 @@
-import { join, resolve } from "node:path";
 import { homedir } from "node:os";
+import { join, resolve } from "node:path";
 
 type ThemeFunction = (input?: string) => Promise<string>;
 

package/src/themes/defaultTheme.ts

@@ -1,18 +1,33 @@
+import chalk from "chalk";
+import terminalSize from "terminal-size";
+import { match } from "ts-pattern";
 import { ZodError } from "zod";
 import { log } from "../logging";
-import { statusSchema, type Status } from "../schema/statusLine";
+import { type Status, statusSchema } from "../schema/statusLine";
+import { currentBranchName } from "../utils/git";
 import { abbreviateModelId } from "../utils/model";
 import { compress, telescope } from "../utils/path";
 import { getDisplayWidth } from "../utils/term";
-import terminalSize from 'terminal-size';
-import { currentBranchName } from "../utils/git";
-import { match } from "ts-pattern";
 
 const HORIZONTAL_PADDING = 4;
 
-async function renderLine1(status: Status) : Promise<string> {
+function colorizeUsageStatus(usedPercentage: number) {
+  if (usedPercentage === 0) {
+    return "";
+  } else if (usedPercentage <= 50) {
+    return chalk.green(`${usedPercentage}%`);
+  } else if (usedPercentage <= 75) {
+    return chalk.blue(`${usedPercentage}%`);
+  } else if (usedPercentage <= 87.5) {
+    return chalk.yellow(`${usedPercentage}%`);
+  } else {
+    return chalk.red(`${usedPercentage}%`);
+  }
+}
+
+async function renderLine1(status: Status): Promise<string> {
   const modelId = abbreviateModelId(status.model.id);
-  const modelStatus = `🤖 ${modelId}`;
+  const modelStatus = `🤖 ${modelId} (${status.version})`;
 
   const sessionStatus = `📃 ${status.session_id}`;
 
@@ -28,28 +43,34 @@ async function renderLine1(status: Status) : Promise<string> {
   const leftGap = Math.floor(remainingSpace / 2);
   const rightGap = Math.ceil(remainingSpace / 2);
 
-  return modelStatus + " ".repeat(leftGap) + sessionStatus + " ".repeat(rightGap) + projectStatus;
+  return (
+    modelStatus +
+    " ".repeat(leftGap) +
+    sessionStatus +
+    " ".repeat(rightGap) +
+    projectStatus
+  );
 }
 
-async function renderLine2(status: Status) : Promise<string> {
+async function renderLine2(status: Status): Promise<string> {
   const branch = await currentBranchName();
   const branchStatus = match(branch)
-    .with({status: "none"}, () => {
+    .with({ status: "none" }, () => {
       return `💾`;
     })
-    .with({status: "branch"}, ({name}) => {
+    .with({ status: "branch" }, ({ name }) => {
       return `🌿 ${name}`;
     })
-    .with({status: "detached"}, ({commit}) => {
+    .with({ status: "detached" }, ({ commit }) => {
       return `🪾 ${commit}`;
     })
-    .with({status: "error"}, () => {
+    .with({ status: "error" }, () => {
       return `💥`;
     })
     .exhaustive();
 
   const usedPercentage = status.context_window.used_percentage ?? 0;
-  const usageStatus = usedPercentage === 0 ? '' : `${usedPercentage}%`
+  const usageStatus = usedPercentage === 0 ? "" : `${usedPercentage}%`;
 
   const statusWidth = terminalSize().columns - HORIZONTAL_PADDING;
   const branchWidth = getDisplayWidth(branchStatus);
@@ -57,7 +78,9 @@ async function renderLine2(status: Status) : Promise<string> {
 
   const gap = statusWidth - branchWidth - usageWidth;
 
-  return branchStatus + " ".repeat(gap - 1) + usageStatus;
+  return (
+    branchStatus + " ".repeat(gap - 1) + colorizeUsageStatus(usedPercentage)
+  );
 }
 
 async function renderTheme(status: Status): Promise<string> {
@@ -69,14 +92,20 @@ async function renderTheme(status: Status): Promise<string> {
 async function defaultTheme(input?: string): Promise<string> {
   if (input) {
     try {
-      const status = statusSchema.parse(input);
+      const parsed = JSON.parse(input);
+      const status = statusSchema.parse(parsed);
       return renderTheme(status);
     } catch (e) {
-      if (e instanceof ZodError) {
-        log.error("Failed to parse input: {error}", {
-          error: JSON.stringify(e.issues),
-        });
-      }
+      const error =
+        e instanceof ZodError
+          ? JSON.stringify(e.issues)
+          : e instanceof Error
+            ? e.message
+            : JSON.stringify(e);
+
+      log.error("Failed to parse input: {error}", {
+        error: error,
+      });
     }
   }
 

package/src/themes/powerlineTheme.ts

@@ -0,0 +1,150 @@
+import chalk from "chalk";
+import terminalSize from "terminal-size";
+import { match } from "ts-pattern";
+import { ZodError } from "zod";
+import { log } from "../logging";
+import { type Status, statusSchema } from "../schema/statusLine";
+import { currentBranchName } from "../utils/git";
+import { abbreviateModelId } from "../utils/model";
+import { compress, telescope } from "../utils/path";
+import { getDisplayWidth } from "../utils/term";
+
+// Right-pointing solid triangle (filled separator)
+const RPST = "\uE0B0";
+
+type Rgb = [number, number, number];
+
+interface Segment {
+  text: string;
+  bg: Rgb;
+}
+
+// Muted dark background colors for each segment type
+const BG_MODEL: Rgb = [30, 40, 80];
+const BG_SESSION: Rgb = [60, 30, 70];
+const BG_PROJECT: Rgb = [25, 65, 75];
+const BG_GIT: Rgb = [30, 65, 40];
+const BG_USAGE: Rgb = [85, 70, 20];
+
+/** Apply white foreground and RGB background color to text. */
+function styleContent(text: string, bg: Rgb): string {
+  return chalk.bgRgb(...bg)(chalk.white(text));
+}
+
+/** Render a separator arrow transitioning from one bg color to another (or to default). */
+function styleSep(from: Rgb, to?: Rgb): string {
+  const arrow = chalk.rgb(...from)(RPST);
+  return to ? chalk.bgRgb(...to)(arrow) : arrow;
+}
+
+/** Render an array of segments into a single powerline bar. */
+function renderBar(parts: Segment[]): string {
+  let result = "";
+  let prevBg: Rgb | undefined;
+  for (const seg of parts) {
+    if (prevBg) {
+      result += styleSep(prevBg, seg.bg);
+    }
+    result += styleContent(` ${seg.text} `, seg.bg);
+    prevBg = seg.bg;
+  }
+  if (prevBg) {
+    result += styleSep(prevBg);
+  }
+  return result;
+}
+
+/** Lay out segments across lines, wrapping when a segment would exceed maxWidth. */
+function layoutSegments(segments: Segment[], maxWidth: number): string {
+  const lines: string[] = [];
+  let currentParts: Segment[] = [];
+  let projectedWidth = 0;
+
+  for (const seg of segments) {
+    const contentWidth = getDisplayWidth(` ${seg.text} `);
+
+    if (projectedWidth === 0) {
+      // First segment on this line
+      projectedWidth = contentWidth + 1;
+      currentParts.push(seg);
+    } else if (projectedWidth + contentWidth + 1 <= maxWidth) {
+      // Fits on current line
+      projectedWidth += contentWidth + 1;
+      currentParts.push(seg);
+    } else {
+      // Doesn't fit — close current line and start a new one
+      lines.push(renderBar(currentParts));
+      currentParts = [seg];
+      projectedWidth = contentWidth + 1;
+    }
+  }
+
+  if (currentParts.length > 0) {
+    lines.push(renderBar(currentParts));
+  }
+
+  return lines.join("\n");
+}
+
+async function renderLine1(status: Status): Promise<string> {
+  const modelId = abbreviateModelId(status.model.id);
+  const modelText = `🤖 ${modelId} (${status.version})`;
+
+  const sessionText = `📃 ${status.session_id}`;
+
+  const projectDir = compress(telescope(status.workspace.project_dir));
+  const projectText = `🗂️ ${projectDir}`;
+
+  const branch = await currentBranchName();
+  const branchText = match(branch)
+    .with({ status: "none" }, () => `💾`)
+    .with({ status: "branch" }, ({ name }) => `🌿 ${name}`)
+    .with({ status: "detached" }, ({ commit }) => `🪾 ${commit}`)
+    .with({ status: "error" }, () => `💥`)
+    .exhaustive();
+
+  const usedPercentage = status.context_window.used_percentage ?? 0;
+
+  const segments: Segment[] = [
+    { text: modelText, bg: BG_MODEL },
+    { text: sessionText, bg: BG_SESSION },
+    { text: projectText, bg: BG_PROJECT },
+    { text: branchText, bg: BG_GIT },
+  ];
+
+  if (usedPercentage > 0) {
+    segments.push({ text: `${usedPercentage}%`, bg: BG_USAGE });
+  }
+
+  const maxWidth = terminalSize().columns;
+  return layoutSegments(segments, maxWidth);
+}
+
+async function renderTheme(status: Status): Promise<string> {
+  return renderLine1(status);
+}
+
+async function powerlineTheme(input?: string): Promise<string> {
+  if (input) {
+    try {
+      const parsed = JSON.parse(input);
+      const status = statusSchema.parse(parsed);
+      return renderTheme(status);
+    } catch (e) {
+      const error =
+        e instanceof ZodError
+          ? JSON.stringify(e.issues)
+          : e instanceof Error
+            ? e.message
+            : JSON.stringify(e);
+
+      log.error("Failed to parse input: {error}", {
+        error: error,
+      });
+    }
+  }
+
+  return "";
+}
+
+export { powerlineTheme };

package/src/utils/git.ts

@@ -1,4 +1,4 @@
-import { simpleGit, type SimpleGit } from "simple-git";
+import { type SimpleGit, simpleGit } from "simple-git";
 import { match } from "ts-pattern";
 
 /**

package/src/utils/term.ts

@@ -1,3 +1,5 @@
+const EMOJI_REGEX = /\p{Extended_Pictographic}/gu;
+
 /**
  * Calculates the display width of a string, accounting for emojis
  * which occupy 2 character columns in terminal displays.
@@ -6,14 +8,13 @@
  * @returns The display width in columns
  */
 function getDisplayWidth(str: string): number {
-  // Remove ANSI codes for width calculation
-  const cleanStr = str.replace(/\u001b\[[0-9;]*m/g, "");
-  // Count regular characters
-  const charCount = Array.from(cleanStr).length;
-  // Count emojis (each emoji counts as 2 characters)
-  const emojiRegex = /\p{Extended_Pictographic}/gu;
-  const emojiCount = (cleanStr.match(emojiRegex) || []).length;
-  // Total width = characters + extra count for emojis (since each emoji is 2 wide)
+  // 1. Count regular characters
+  const charCount = Array.from(str).length;
+
+  // 2. Count emojis (each emoji counts as 2 characters)
+  const emojiCount = (str.match(EMOJI_REGEX) || []).length;
+
+  // 3. Total width = characters + extra count for emojis (since each emoji is 2 wide)
   return charCount + emojiCount;
 }