@nutthead/cc-statusline 0.2.2 → 0.3.0

package/README.md

@@ -1,17 +1,24 @@
 # statusline
 
-Custom status line for Claude Code.
+Themeable status line provider for Claude Code.
 
 ## Preview
 
 The default theme renders a two-row status line:
 
 ```
-🗂️ ~/C/b/statusline ⋮ 🌿 master
-⏣ opus-4-6 ⋮ 📝 fc9bbbee-...
+🤖 opus-4-5           📃 93aba123-d123-4a6b-b1b5-2f3e7d111317           🗂️ ~/a/…/statusline
+🌿 main                                                                               0.38%
 ```
 
-Row 1 shows the abbreviated working directory and git branch. Row 2 shows the model and session ID.
+- **Row 1** (left to right):
+  - 🤖 Model ID (abbreviated)
+  - 📃 Session ID
+  - 🗂️ Project directory (compressed and telescoped)
+
+- **Row 2** (left to right):
+  - 🌿 Git branch name (or 🪾 commit hash if detached, 💾 if not a repo, 💥 on error)
+  - Context window usage percentage
 
 ## Install
 
@@ -64,19 +71,32 @@ Then point to it in `~/.claude/settings.json`:
 
 The JSON object passed to your theme function contains these fields:
 
-| Field                            | Example                  |
-| -------------------------------- | ------------------------ |
-| `session_id`                     | `"f9abcdef-1a2b-..."`    |
-| `version`                        | `"2.1.39"`               |
-| `model.id`                       | `"claude-opus-4-6"`      |
-| `model.display_name`             | `"Claude Opus 4.6"`      |
-| `workspace.current_dir`          | `"/home/user/project"`   |
-| `workspace.project_dir`          | `"/home/user/project"`   |
-| `context_window.used_percentage` | `42.5`                   |
-| `context_window.vim.mode`        | `"INSERT"` or `"NORMAL"` |
-| `context_window.agent.name`      | `"claude-code"`          |
-
-See [`src/statusLineSchema.ts`](src/statusLineSchema.ts) for the full schema.
+| Field                                                      | Example                           |
+| ---------------------------------------------------------- | --------------------------------- |
+| `session_id`                                               | `"f9abcdef-1a2b-..."`             |
+| `transcript_path`                                          | `"/home/user/.claude/transcript"` |
+| `cwd`                                                      | `"/home/user/project"`            |
+| `model.id`                                                 | `"claude-opus-4-6"`               |
+| `model.display_name`                                       | `"Claude Opus 4.6"`               |
+| `workspace.current_dir`                                    | `"/home/user/project"`            |
+| `workspace.project_dir`                                    | `"/home/user/project"`            |
+| `version`                                                  | `"2.1.39"`                        |
+| `output_style.name`                                        | `"Explanatory"`                   |
+| `context_window.total_input_tokens`                        | `12345`                           |
+| `context_window.total_output_tokens`                       | `6789`                            |
+| `context_window.context_window_size`                       | `200000`                          |
+| `context_window.current_usage`                             | `{ ... }` or `null`               |
+| `context_window.current_usage.input_tokens`                | `1024`                            |
+| `context_window.current_usage.output_tokens`               | `512`                             |
+| `context_window.current_usage.cache_creation_input_tokens` | `256`                             |
+| `context_window.current_usage.cache_read_input_tokens`     | `128`                             |
+| `context_window.used_percentage`                           | `42.5` or `null`                  |
+| `context_window.remaining_percentage`                      | `57.5` or `null`                  |
+| `context_window.vim.mode`                                  | `"INSERT"` or `"NORMAL"`          |
+| `context_window.agent.name`                                | `"claude-code"`                   |
+| `context_window.agent.type`                                | `"main"`                          |
+
+See [`src/schema/statusLine.ts`](src/schema/statusLine.ts) for the full schema.
 
 ## Troubleshooting
 

package/bin/cc-statusline.js

@@ -9417,7 +9417,7 @@ var CLAUDE_DIR = join(homedir(), ".claude");
 var TARGET_PATH = join(CLAUDE_DIR, BINARY_NAME);
 var cli = meow(`
   Usage
-    $ cc-statusline <command>
+    $ bunx cc-statusline <command>
 
   Commands
     install    Build and install statusline to ~/.claude/
@@ -9426,8 +9426,8 @@ var cli = meow(`
     --overwrite  Overwrite existing file if it exists
 
   Examples
-    $ cc-statusline install
-    $ cc-statusline install --overwrite
+    $ bunx @nutthead/cc-statusline install
+    $ bunx @nutthead/cc-statusline install --overwrite
 `, {
   importMeta: import.meta,
   flags: {

package/biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.15/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package/index.ts

@@ -29,7 +29,8 @@ const cli = meow(
   },
 );
 
-const resolvedTheme = (cli.flags.theme && await loadTheme(cli.flags.theme)) || defaultTheme;
+const resolvedTheme =
+  (cli.flags.theme && (await loadTheme(cli.flags.theme))) || defaultTheme;
 
 const input = await Bun.stdin.stream().json();
 log.debug("input: {input}", input);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutthead/cc-statusline",
   "description": "Status Line for Claude Code",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "bin": {
     "cc-statusline": "bin/cc-statusline.js"
@@ -30,9 +30,12 @@
     "build:binary": "mkdir -p target && bun build --compile ./index.ts --outfile target/statusline",
     "build:cli": "bun build ./src/cli.ts --outfile ./bin/cc-statusline.js --target node",
     "prepublishOnly": "bun run build:cli",
-    "install:binary": "cp target/statusline ~/.claude/"
+    "install:binary": "cp target/statusline ~/.claude/",
+    "biome:format": "bunx biome format --write",
+    "biome:lint": "bunx biome lint --fix"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.15",
     "@types/bun": "latest"
   },
   "peerDependencies": {
@@ -43,7 +46,9 @@
     "@logtape/logtape": "^1.3.6",
     "ansi-colors": "^4.1.3",
     "meow": "^14.0.0",
+    "neverthrow": "^8.2.0",
     "simple-git": "^3.30.0",
+    "terminal-size": "^4.0.1",
     "ts-pattern": "^5.9.0",
     "type-fest": "^5.3.1",
     "zod": "^4.3.5"

package/src/cli.ts

@@ -10,10 +10,29 @@ const BINARY_NAME = "statusline";
 const CLAUDE_DIR = join(homedir(), ".claude");
 const TARGET_PATH = join(CLAUDE_DIR, BINARY_NAME);
 
+interface FileSystem {
+  exists(path: string): Promise<boolean>;
+  mkdir(path: string, options?: { recursive?: boolean }): Promise<void>;
+  copy(src: string, dest: string): Promise<void>;
+  remove(path: string): Promise<void>;
+}
+
+interface InstallOptions {
+  overwrite: boolean;
+  claudeDir: string;
+  targetPath: string;
+  sourcePath: string;
+}
+
+interface InstallDeps {
+  fs: FileSystem;
+  build: () => Promise<void>;
+}
+
 const cli = meow(
   `
   Usage
-    $ cc-statusline <command>
+    $ bunx cc-statusline <command>
 
   Commands
     install    Build and install statusline to ~/.claude/
@@ -22,8 +41,8 @@ const cli = meow(
     --overwrite  Overwrite existing file if it exists
 
   Examples
-    $ cc-statusline install
-    $ cc-statusline install --overwrite
+    $ bunx @nutthead/cc-statusline install
+    $ bunx @nutthead/cc-statusline install --overwrite
 `,
   {
     importMeta: import.meta,
@@ -36,25 +55,6 @@ const cli = meow(
   },
 );
 
-interface FileSystem {
-  exists(path: string): Promise<boolean>;
-  mkdir(path: string, options?: { recursive?: boolean }): Promise<void>;
-  copy(src: string, dest: string): Promise<void>;
-  remove(path: string): Promise<void>;
-}
-
-interface InstallOptions {
-  overwrite: boolean;
-  claudeDir: string;
-  targetPath: string;
-  sourcePath: string;
-}
-
-interface InstallDeps {
-  fs: FileSystem;
-  build: () => Promise<void>;
-}
-
 async function fileExists(path: string): Promise<boolean> {
   try {
     await access(path);

package/src/{statusLineSchema.ts → schema/statusLine.ts}

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

package/src/themes/defaultTheme.ts

@@ -1,46 +1,86 @@
-import { z } from "zod";
+import { ZodError } from "zod";
 import { log } from "../logging";
-import { statusSchema } from "../statusLineSchema";
-import {
-  currentDirStatus,
-  currentGitStatus,
-  currentModelStatus,
-  currentSessionId,
-} from "../utils";
+import { statusSchema, type Status } from "../schema/statusLine";
+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";
 
-import c from "ansi-colors";
+const HORIZONTAL_PADDING = 4;
 
-async function defaultTheme(input?: string): Promise<string> {
-  let statusLine = null;
+async function renderLine1(status: Status) : Promise<string> {
+  const modelId = abbreviateModelId(status.model.id);
+  const modelStatus = `🤖 ${modelId}`;
+
+  const sessionStatus = `📃 ${status.session_id}`;
+
+  const projectDir = telescope(compress(status.workspace.project_dir));
+  const projectStatus = `🗂️ ${projectDir}`;
+
+  const statusWidth = terminalSize().columns - HORIZONTAL_PADDING;
+  const modelWidth = getDisplayWidth(modelStatus);
+  const sessionWidth = getDisplayWidth(sessionStatus);
+  const projectWidth = getDisplayWidth(projectStatus);
+
+  const remainingSpace = statusWidth - modelWidth - sessionWidth - projectWidth;
+  const leftGap = Math.floor(remainingSpace / 2);
+  const rightGap = Math.ceil(remainingSpace / 2);
+
+  return modelStatus + " ".repeat(leftGap) + sessionStatus + " ".repeat(rightGap) + projectStatus;
+}
+
+async function renderLine2(status: Status) : Promise<string> {
+  const branch = await currentBranchName();
+  const branchStatus = match(branch)
+    .with({status: "none"}, () => {
+      return `💾`;
+    })
+    .with({status: "branch"}, ({name}) => {
+      return `🌿 ${name}`;
+    })
+    .with({status: "detached"}, ({commit}) => {
+      return `🪾 ${commit}`;
+    })
+    .with({status: "error"}, () => {
+      return `💥`;
+    })
+    .exhaustive();
 
+  const usedPercentage = status.context_window.used_percentage ?? 0;
+  const usageStatus = usedPercentage === 0 ? '' : `${usedPercentage}%`
+
+  const statusWidth = terminalSize().columns - HORIZONTAL_PADDING;
+  const branchWidth = getDisplayWidth(branchStatus);
+  const usageWidth = getDisplayWidth(usageStatus);
+
+  const gap = statusWidth - branchWidth - usageWidth;
+
+  return branchStatus + " ".repeat(gap - 1) + usageStatus;
+}
+
+async function renderTheme(status: Status): Promise<string> {
+  const line1 = await renderLine1(status);
+  const line2 = await renderLine2(status);
+  return [line1, line2].filter(Boolean).join("\n");
+}
+
+async function defaultTheme(input?: string): Promise<string> {
   if (input) {
-    const result = statusSchema.safeParse(input);
-
-    if (result.success) {
-      const status = result.data;
-      const currentDir = c.blue(currentDirStatus(status));
-      const git = c.green(await currentGitStatus());
-      const model = c.magenta(currentModelStatus(status));
-      const sessionId = c.blue(currentSessionId(status));
-      const separator = c.bold.gray(" ⋮ ");
-
-      statusLine = [
-        [currentDir, git],
-        [model, sessionId],
-      ]
-        .map((row) => row.join(separator))
-        .join("\n");
-    } else {
-      log.error("Failed to parse input: {error}", {
-        error: JSON.stringify(z.treeifyError(result.error)),
-      });
-      statusLine = `[malformed status]`;
+    try {
+      const status = statusSchema.parse(input);
+      return renderTheme(status);
+    } catch (e) {
+      if (e instanceof ZodError) {
+        log.error("Failed to parse input: {error}", {
+          error: JSON.stringify(e.issues),
+        });
+      }
     }
-  } else {
-    statusLine = `[no status]`;
   }
 
-  return statusLine;
+  return "";
 }
 
 export { defaultTheme };

package/src/{utils.ts → utils/git.ts}

@@ -1,45 +1,5 @@
-import { homedir } from "node:os";
 import { simpleGit, type SimpleGit } from "simple-git";
 import { match } from "ts-pattern";
-import type { Status } from "./statusLineSchema";
-
-/**
- * Abbreviates a path by reducing all segments except the last to their first character.
- * If the path starts with the home directory, it's replaced with ~.
- * @example abbreviatePath("/home/user/projects/myapp") // "~/p/myapp"
- * @example abbreviatePath("/foo/bar/baz/etc/last") // "/f/b/b/e/last"
- */
-function abbreviatePath(path: string): string {
-  const home = homedir();
-
-  // Replace homedir with ~ if path starts with it
-  let normalizedPath = path;
-  let prefix = "";
-  if (path.startsWith(home)) {
-    normalizedPath = path.slice(home.length);
-    prefix = "~";
-  }
-
-  const segments = normalizedPath.split("/");
-  if (segments.length <= 1) return prefix + normalizedPath;
-
-  const abbreviated = segments.map((segment, index) => {
-    // Keep last segment full, abbreviate others to first char (if non-empty)
-    if (index === segments.length - 1) return segment;
-    return segment.length > 0 ? segment[0] : segment;
-  });
-
-  return prefix + abbreviated.join("/");
-}
-
-/**
- * Removes the "claude-" prefix from a model name if present.
- * @example abbreviateModelId("claude-opus-4.5") // "opus-4.5"
- * @example abbreviateModelId("opus-4.5") // "opus-4.5"
- */
-function abbreviateModelId(model: string): string {
-  return model.startsWith("claude-") ? model.slice(7) : model;
-}
 
 /**
  * Result type for currentBranchName function.
@@ -48,7 +8,7 @@ function abbreviateModelId(model: string): string {
  * - `error`: Failed to get branch info (not a git repo, etc.)
  */
 type BranchResult =
-  | { status: "not-git" }
+  | { status: "none" }
   | { status: "branch"; name: string }
   | { status: "detached"; commit: string }
   | { status: "error"; message: string };
@@ -66,7 +26,7 @@ async function currentBranchName(cwd?: string): Promise<BranchResult> {
     // Check if we're in a git repository first
     const isRepo = await git.checkIsRepo();
     if (!isRepo) {
-      return { status: "not-git" };
+      return { status: "none" };
     }
 
     const branchSummary = await git.branch();
@@ -118,56 +78,12 @@ async function currentGitStatus() {
   const gitStatus = match(gitBranch)
     .with({ status: "branch" }, ({ name }) => `🌿 ${name}`)
     .with({ status: "detached" }, ({ commit }) => `🪾 ${commit}`)
-    .with({ status: "not-git" }, () => "💾")
+    .with({ status: "none" }, () => "💾")
     .with({ status: "error" }, () => "💥")
     .exhaustive();
 
   return gitStatus;
 }
 
-/**
- * Returns a formatted model status string with the Claude icon.
- * Strips the "claude-" prefix from the model ID for brevity.
- *
- * @param status - The Status object containing model information
- * @returns A formatted string like "⏣ opus-4.5" or "⏣ sonnet-4"
- */
-function currentModelStatus(status: Status) {
-  return `⏣ ${abbreviateModelId(status.model.id)}`;
-}
-
-/**
- * Returns a formatted directory status string showing workspace location.
- * Both paths are abbreviated (e.g., "/home/user/projects" → "~/p").
- *
- * @param status - The Status object containing workspace information
- * @returns Either the abbreviated project directory alone (when current dir matches),
- *          or "projectDir/currentDir" format when projectDir/currentDir don't match
- * @example currentDirStatus({...}) // "🗂️ ~/p/myapp" or "🗂️ ~/p/myapp 📂 ~/s/components"
- */
-function currentDirStatus(status: Status) {
-  const projectDir = abbreviatePath(status.workspace.project_dir);
-  const currentDir = abbreviatePath(status.workspace.current_dir);
-  const dirStatus =
-    projectDir === currentDir
-      ? `🗂️ ${projectDir}`
-      : `🗂️ ${projectDir} 📂 ${currentDir}`;
-
-  return dirStatus;
-}
-
-function currentSessionId(status: Status) {
-  return `📝 ${status.session_id}`;
-}
-
-export {
-  abbreviateModelId,
-  abbreviatePath,
-  currentBranchName,
-  currentDirStatus,
-  currentGitStatus,
-  currentModelStatus,
-  currentSessionId,
-};
-
+export { currentBranchName, currentGitStatus };
 export type { BranchResult };

package/src/utils/model.ts

@@ -0,0 +1,23 @@
+/**
+ * Abbreviates a model ID by stripping the "claude-" prefix and truncating
+ * to `tail` characters (using `…` prefix when truncated).
+ *
+ * @param model - The model ID string
+ * @param options.tail - Maximum character length of the result (default: 12).
+ *
+ * @example abbreviateModelId("claude-opus-4.5")           // "opus-4.5"
+ * @example abbreviateModelId("some-very-long-model-name") // "…-model-name"
+ */
+function abbreviateModelId(model: string, options?: { tail?: number }): string {
+  const tail = options?.tail ?? 12;
+
+  // Step 1: Strip "claude-" prefix
+  const name = model.replace(/^claude-/, "");
+
+  // Step 2: Truncate if needed, keeping the last (tail - 1) chars
+  if (name.length <= tail) return name;
+  if (tail <= 1) return "…";
+  return `…${name.slice(-(tail - 1))}`;
+}
+
+export { abbreviateModelId };

package/src/utils/path.ts

@@ -0,0 +1,95 @@
+import { homedir } from "node:os";
+
+const HORIZONTAL_ELLIPSIS = "\u2026";
+
+/**
+ * Compresses a path by converting all segments except the last to a single character.
+ *
+ * @param path - The path to compress
+ * @returns The compressed path
+ *
+ * @example compress("/home/username/foo/bar/baz") // "/h/u/f/b/baz"
+ * @example compress("/foo/bar/baz")               // "/f/b/baz"
+ * @example compress("~/projects/myapp")           // "~/p/myapp"
+ * @example compress("a/b/c/d")                    // "a/b/c/d"
+ */
+function compress(path: string): string {
+  const segments = path.split("/");
+
+  if (segments.length <= 1) {
+    return path;
+  }
+
+  const compressed = segments.map((segment, index) => {
+    // Keep last segment full, compress others to first char
+    if (index === segments.length - 1) return segment;
+
+    // For empty segments (absolute path root), keep empty
+    if (segment === "") return segment;
+
+    return segment[0];
+  });
+
+  return compressed.join("/");
+}
+
+/**
+ * Converts a path starting with the home directory to use `~`.
+ *
+ * @param path - The path to convert
+ * @returns The path with home directory replaced by `~`, or the original path if it doesn't start with home
+ *
+ * @example tildify("/home/user/projects/myapp") // "~/projects/myapp"
+ * @example tildify("/home/user")                // "~"
+ * @example tildify("/etc/nginx")                // "/etc/nginx"
+ */
+function tildify(path: string): string {
+  const home = homedir();
+
+  if (path === home) {
+    return "~";
+  }
+
+  if (path.startsWith(`${home}/`)) {
+    return `~${path.slice(home.length)}`;
+  }
+
+  return path;
+}
+
+/**
+ * Telescopes a path by keeping only the first and last segments,
+ * with a horizontal ellipsis in between.
+ *
+ * First tildifies the path, then applies the telescoping transformation.
+ * If the path has 2 or fewer segments, it is returned unchanged.
+ *
+ * @param path - The path to telescope
+ * @returns The telescoped path
+ *
+ * @example telescope("/home/user/projects/myapp") // "~/…/myapp"
+ * @example telescope("/a/b/c/d")                  // "/a/…/d"
+ * @example telescope("~/a/b/c")                   // "~/…/c"
+ * @example telescope("a/b/c")                     // "a/…/c"
+ * @example telescope("~/foo")                     // "~/foo"
+ */
+function telescope(path: string): string {
+  const tildified = tildify(path);
+  const segments = tildified.split("/");
+
+  if (segments.length <= 2) {
+    return tildified;
+  }
+
+  const first = segments[0];
+  const last = segments[segments.length - 1];
+
+  // Handle absolute paths: first segment is empty string
+  if (first === "" && segments.length > 1) {
+    return `/${segments[1]}/${HORIZONTAL_ELLIPSIS}/${last}`;
+  }
+
+  return `${first}/${HORIZONTAL_ELLIPSIS}/${last}`;
+}
+
+export { compress, tildify, telescope, HORIZONTAL_ELLIPSIS };

package/src/utils/term.ts

@@ -0,0 +1,20 @@
+/**
+ * Calculates the display width of a string, accounting for emojis
+ * which occupy 2 character columns in terminal displays.
+ *
+ * @param str - The string to measure
+ * @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)
+  return charCount + emojiCount;
+}
+
+export { getDisplayWidth };