@nutthead/cc-statusline 0.1.3 → 0.1.8

package/README.md

@@ -1,33 +1,22 @@
 # Claude Code Status Line
 
-To install dependencies:
+## Install
 
 ```bash
-bun install
+bunx @nutthead/cc-statusline install
 ```
 
-To build:
+Use `--overwrite` to replace an existing installation.
 
-```bash
-bun run build:binary
-```
-
-To copy to `~/.claude`:
-
-```bash
-bun run install:binary
-```
-
-## Configure your Claude Code's statusline
+## Configure
 
-Edit your `~/.claude/settings.json` file to include:
+Add to `~/.claude/settings.json`:
 
 ```json
 {
   "statusLine": {
     "type": "command",
-    "command": "/path/to/.claude/statusline",
-    "padding": 0
+    "command": "~/.claude/statusline"
   }
 }
 ```

package/bin/cc-statusline.js

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, copyFileSync, unlinkSync } from "node:fs";
+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);
+function build() {
+  console.log("Building statusline binary...");
+  execSync("mkdir -p target && bun build --compile ./index.ts --outfile target/statusline", {
+    stdio: "inherit"
+  });
+  console.log("Build complete.");
+}
+function install(overwrite) {
+  build();
+  if (!existsSync(CLAUDE_DIR)) {
+    mkdirSync(CLAUDE_DIR, { recursive: true });
+  }
+  if (existsSync(TARGET_PATH)) {
+    if (!overwrite) {
+      console.error(`Error: ${TARGET_PATH} already exists.`);
+      console.error("Use --overwrite to replace the existing file.");
+      process.exit(1);
+    }
+    console.log(`Overwriting existing file at ${TARGET_PATH}...`);
+    unlinkSync(TARGET_PATH);
+  }
+  const sourcePath = join(process.cwd(), "target", BINARY_NAME);
+  copyFileSync(sourcePath, TARGET_PATH);
+  console.log(`Installed statusline to ${TARGET_PATH}`);
+}
+function printUsage() {
+  console.log(`Usage: cc-statusline <command> [options]
+
+Commands:
+  install             Build and install statusline to ~/.claude/
+
+Options:
+  --overwrite         Overwrite existing file if it exists
+  --help, -h          Show this help message`);
+}
+function main() {
+  const args = process.argv.slice(2);
+  const command = args.find((arg) => !arg.startsWith("-"));
+  const flags = new Set(args.filter((arg) => arg.startsWith("-")));
+  if (flags.has("--help") || flags.has("-h") || args.length === 0) {
+    printUsage();
+    process.exit(0);
+  }
+  switch (command) {
+    case "install":
+      install(flags.has("--overwrite"));
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      printUsage();
+      process.exit(1);
+  }
+}
+main();

package/index.ts

@@ -6,31 +6,37 @@ import {
   currentDirStatus,
   currentGitStatus,
   currentModelStatus,
+  currentSessionId,
 } from "./src/utils";
 
 import c from "ansi-colors";
 
 await configure(logtapeConfig);
 
+let statusLine = null;
 const input = await Bun.stdin.stream().json();
-log.debug("stdin: {input}", input);
+log.debug("input: {input}", input);
 
-const result = statusSchema.safeParse(input);
+if (input) {
+  const result = statusSchema.safeParse(input);
 
-let statusLine = null;
-if (result.success) {
-  const status = result.data;
-  const dirStatus = c.blue(currentDirStatus(status));
-  const gitStatus = c.green(await currentGitStatus());
-  const modelStatus = c.magenta(currentModelStatus(status));
-  const separator = c.bold.gray("⋮");
+  if (result.success) {
+    const status = result.data;
+    const dirStatus = c.blue(currentDirStatus(status));
+    const gitStatus = c.green(await currentGitStatus());
+    const modelStatus = c.magenta(currentModelStatus(status));
+    const sessionId = c.blue(currentSessionId(status));
+    const separator = c.bold.gray("⋮");
 
-  statusLine = `${dirStatus} ${separator} ${gitStatus} ${separator} ${modelStatus}`;
+    statusLine = `${dirStatus} ${separator} ${gitStatus}\n${modelStatus} ${separator} ${sessionId}`;
+  } else {
+    log.error("Failed to parse input: {error}", {
+      error: JSON.stringify(z.treeifyError(result.error)),
+    });
+    statusLine = `[malformed status]`;
+  }
 } else {
-  log.error("Failed to parse input: {error}", {
-    error: JSON.stringify(z.treeifyError(result.error)),
-  });
-  statusLine = `[]`;
+  statusLine = `[no status]`;
 }
 
 console.log(statusLine);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutthead/cc-statusline",
   "description": "Status Line for Claude Code",
-  "version": "0.1.3",
+  "version": "0.1.8",
   "exports": {
     ".": {
       "import": "./index.ts",
@@ -9,6 +9,9 @@
     }
   },
   "type": "module",
+  "bin": {
+    "cc-statusline": "bin/cc-statusline.js"
+  },
   "private": false,
   "license": "MIT",
   "author": {
@@ -31,6 +34,8 @@
   ],
   "scripts": {
     "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/"
   },
   "devDependencies": {

package/resources/plans/theme-plan.md

@@ -0,0 +1,310 @@
+# Theming System: Render Function Approach
+
+## Selected Approach
+
+**Render Function** with support for custom components. Theme authors export a function that receives context and returns the formatted statusline string.
+
+---
+
+## Theme API Design
+
+### Basic Theme Structure
+
+```typescript
+// ~/.config/statusline/themes/my-theme.ts
+import type { ThemeContext } from 'statusline/theme';
+
+export default async function render(ctx: ThemeContext): Promise<string> {
+  const { status, helpers, colors: c } = ctx;
+
+  const dir = c.blue(`🗂️ ${helpers.abbreviatePath(status.workspace.current_dir)}`);
+  const git = c.green(`🌿 ${await helpers.gitBranch()}`);
+  const model = c.magenta(`⏣ ${helpers.modelName()}`);
+
+  return `${dir} │ ${git}\n${model}`;
+}
+```
+
+### ThemeContext Interface
+
+```typescript
+interface ThemeContext {
+  // Raw status data from Claude Code
+  status: StatusLineInput;
+
+  // ansi-colors instance for styling
+  colors: typeof import('ansi-colors');
+
+  // Helper functions (async where needed)
+  helpers: {
+    // Path utilities
+    abbreviatePath(path: string): string;
+    homePath(): string;
+
+    // Git utilities (async)
+    gitBranch(): Promise<string>;
+    gitStatus(): Promise<GitStatusResult>;
+    isGitRepo(): Promise<boolean>;
+
+    // Model utilities
+    modelName(): string;           // "opus-4.5"
+    modelDisplayName(): string;    // "Claude Opus 4.5"
+
+    // Session utilities
+    sessionId(): string;
+
+    // Cost/metrics utilities
+    formatCost(): string;          // "$0.42"
+    formatDuration(): string;      // "2m 34s"
+
+    // Generic formatting
+    truncate(str: string, maxLen: number): string;
+  };
+}
+```
+
+---
+
+## Implementation Plan
+
+### Files to Create/Modify
+
+1. **`src/theme.ts`** (NEW) - Theme types, loader, and context builder
+2. **`src/defaultTheme.ts`** (NEW) - Built-in default theme
+3. **`index.ts`** - Add CLI argument parsing for `--theme`
+4. **`src/utils.ts`** - Export helpers for theme context
+
+### Step 1: Define Theme Types (`src/theme.ts`)
+
+```typescript
+import type { StatusLineInput } from './statusLineSchema';
+import type c from 'ansi-colors';
+
+export interface ThemeHelpers {
+  abbreviatePath(path: string): string;
+  gitBranch(): Promise<string>;
+  gitStatus(): Promise<GitStatusResult>;
+  isGitRepo(): Promise<boolean>;
+  modelName(): string;
+  modelDisplayName(): string;
+  sessionId(): string;
+  formatCost(): string;
+  formatDuration(): string;
+  truncate(str: string, maxLen: number): string;
+  homePath(): string;
+}
+
+export interface ThemeContext {
+  status: StatusLineInput;
+  colors: typeof c;
+  helpers: ThemeHelpers;
+}
+
+export type ThemeFunction = (ctx: ThemeContext) => string | Promise<string>;
+
+export interface ThemeModule {
+  default: ThemeFunction;
+}
+```
+
+### Step 2: Theme Loader (`src/theme.ts`)
+
+```typescript
+export async function loadTheme(themePath: string): Promise<ThemeFunction> {
+  // Resolve path (handle ~ expansion, relative paths)
+  const resolvedPath = resolvePath(themePath);
+
+  // Dynamic import (Bun handles .ts automatically)
+  const module = await import(resolvedPath) as ThemeModule;
+
+  if (typeof module.default !== 'function') {
+    throw new Error(`Theme must export a default function`);
+  }
+
+  return module.default;
+}
+
+export function createThemeContext(status: StatusLineInput): ThemeContext {
+  return {
+    status,
+    colors: c,
+    helpers: buildHelpers(status),
+  };
+}
+```
+
+### Step 3: Default Theme (`src/defaultTheme.ts`)
+
+```typescript
+import type { ThemeContext } from './theme';
+
+export default async function render(ctx: ThemeContext): Promise<string> {
+  const { status, helpers, colors: c } = ctx;
+
+  const dirStatus = c.blue(formatDirectory(status, helpers));
+  const gitStatus = c.green(await formatGit(helpers));
+  const modelStatus = c.magenta(formatModel(helpers));
+  const sessionId = c.blue(formatSession(helpers));
+  const separator = c.bold.gray('⋮');
+
+  return `${dirStatus} ${separator} ${gitStatus}\n${modelStatus} ${separator} ${sessionId}`;
+}
+```
+
+### Step 4: CLI Argument Parsing (`index.ts`)
+
+```typescript
+// Parse --theme argument
+const args = process.argv.slice(2);
+const themeIndex = args.indexOf('--theme');
+const themePath = themeIndex !== -1 ? args[themeIndex + 1] : null;
+
+// Load theme (default or custom)
+const renderTheme = themePath
+  ? await loadTheme(themePath)
+  : (await import('./src/defaultTheme')).default;
+
+// Create context and render
+const ctx = createThemeContext(status);
+const statusLine = await renderTheme(ctx);
+```
+
+### Step 5: Refactor Helpers (`src/utils.ts`)
+
+Export existing functions and add new helpers:
+
+```typescript
+// Existing (keep)
+export function abbreviatePath(path: string): string { ... }
+export async function currentBranchName(cwd?: string): Promise<BranchResult> { ... }
+
+// New helpers
+export function formatCost(cost: number): string {
+  return `$${cost.toFixed(2)}`;
+}
+
+export function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+
+export function truncate(str: string, maxLen: number): string {
+  if (str.length <= maxLen) return str;
+  return str.slice(0, maxLen - 1) + '…';
+}
+```
+
+---
+
+## CLI Usage
+
+```bash
+# Use default theme
+statusline
+
+# Use custom theme (absolute path)
+statusline --theme /path/to/my-theme.ts
+
+# Use custom theme (relative to home)
+statusline --theme ~/.config/statusline/themes/minimal.ts
+
+# Environment variable (fallback)
+STATUSLINE_THEME=~/.config/statusline/themes/nerd.ts statusline
+```
+
+---
+
+## Example Themes
+
+### Minimal Single-Line Theme
+
+```typescript
+// minimal.ts
+import type { ThemeContext } from 'statusline/theme';
+
+export default async function render({ status, helpers, colors: c }: ThemeContext): Promise<string> {
+  const dir = helpers.abbreviatePath(status.workspace.current_dir);
+  const branch = await helpers.gitBranch();
+  return c.dim(`${dir} (${branch})`);
+}
+```
+
+### Powerline-Style Theme
+
+```typescript
+// powerline.ts
+import type { ThemeContext } from 'statusline/theme';
+
+export default async function render({ status, helpers, colors: c }: ThemeContext): Promise<string> {
+  const dir = c.bgBlue.white(` ${helpers.abbreviatePath(status.workspace.current_dir)} `);
+  const git = c.bgGreen.black(` ${await helpers.gitBranch()} `);
+  const model = c.bgMagenta.white(` ${helpers.modelName()} `);
+
+  return `${dir}${git}${model}`;
+}
+```
+
+### Theme with Custom Component (Time)
+
+```typescript
+// with-clock.ts
+import type { ThemeContext } from 'statusline/theme';
+
+export default async function render({ status, helpers, colors: c }: ThemeContext): Promise<string> {
+  const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+
+  const dir = c.blue(`🗂️ ${helpers.abbreviatePath(status.workspace.current_dir)}`);
+  const git = c.green(`🌿 ${await helpers.gitBranch()}`);
+  const clock = c.yellow(`🕐 ${time}`);
+
+  return `${dir} │ ${git} │ ${clock}`;
+}
+```
+
+---
+
+## Error Handling
+
+1. **Theme load failure**: Fall back to default theme, log warning
+2. **Theme render error**: Catch, show error message in statusline, log details
+3. **Invalid export**: Validate `module.default` is a function
+
+```typescript
+try {
+  const renderTheme = themePath ? await loadTheme(themePath) : defaultTheme;
+  statusLine = await renderTheme(ctx);
+} catch (error) {
+  logger.error('Theme error', { error, themePath });
+  statusLine = c.red(`Theme error: ${error.message}`);
+}
+```
+
+---
+
+## Type Distribution
+
+For theme authors to get type hints, provide types via:
+
+**Option 1**: Export types from main package
+```typescript
+// Theme authors can reference
+/// <reference path="./node_modules/statusline/theme.d.ts" />
+```
+
+**Option 2**: Publish `@statusline/types` package (if this grows)
+
+**Option 3**: Include `.d.ts` alongside binary (simplest for now)
+
+---
+
+## Verification
+
+1. Run with default theme: `echo '{}' | bun run index.ts`
+2. Run with custom theme: `echo '{}' | bun run index.ts --theme ./examples/minimal.ts`
+3. Test error handling: Use invalid theme path, theme with syntax error
+4. Test async helpers: Verify git operations work in themes
+5. Run existing tests: `bun test`

package/src/cli.ts

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, copyFileSync, unlinkSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+const BINARY_NAME = "statusline";
+const CLAUDE_DIR = join(homedir(), ".claude");
+const TARGET_PATH = join(CLAUDE_DIR, BINARY_NAME);
+
+function build(): void {
+  console.log("Building statusline binary...");
+  execSync("mkdir -p target && bun build --compile ./index.ts --outfile target/statusline", {
+    stdio: "inherit",
+  });
+  console.log("Build complete.");
+}
+
+function install(overwrite: boolean): void {
+  // Build first
+  build();
+
+  // Ensure ~/.claude directory exists
+  if (!existsSync(CLAUDE_DIR)) {
+    mkdirSync(CLAUDE_DIR, { recursive: true });
+  }
+
+  // Check if target file exists
+  if (existsSync(TARGET_PATH)) {
+    if (!overwrite) {
+      console.error(`Error: ${TARGET_PATH} already exists.`);
+      console.error("Use --overwrite to replace the existing file.");
+      process.exit(1);
+    }
+    console.log(`Overwriting existing file at ${TARGET_PATH}...`);
+    unlinkSync(TARGET_PATH); // Remove first to avoid ETXTBSY if binary is running
+  }
+
+  // Copy binary to destination
+  const sourcePath = join(process.cwd(), "target", BINARY_NAME);
+  copyFileSync(sourcePath, TARGET_PATH);
+  console.log(`Installed statusline to ${TARGET_PATH}`);
+}
+
+function printUsage(): void {
+  console.log(`Usage: cc-statusline <command> [options]
+
+Commands:
+  install             Build and install statusline to ~/.claude/
+
+Options:
+  --overwrite         Overwrite existing file if it exists
+  --help, -h          Show this help message`);
+}
+
+function main(): void {
+  const args = process.argv.slice(2);
+  const command = args.find((arg) => !arg.startsWith("-"));
+  const flags = new Set(args.filter((arg) => arg.startsWith("-")));
+
+  if (flags.has("--help") || flags.has("-h") || args.length === 0) {
+    printUsage();
+    process.exit(0);
+  }
+
+  switch (command) {
+    case "install":
+      install(flags.has("--overwrite"));
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      printUsage();
+      process.exit(1);
+  }
+}
+
+main();

package/src/utils.ts

@@ -156,6 +156,10 @@ function currentDirStatus(status: Status) {
   return dirStatus;
 }
 
+function currentSessionId(status: Status) {
+  return `📝 ${status.session_id}`;
+}
+
 export {
   abbreviateModelId,
   abbreviatePath,
@@ -163,6 +167,7 @@ export {
   currentDirStatus,
   currentGitStatus,
   currentModelStatus,
+  currentSessionId,
 };
 
 export type { BranchResult };