@daliovic/cc-statusline 1.0.0 → 1.1.0

package/README.md

@@ -18,14 +18,14 @@ A minimal, informative statusline for [Claude Code](https://claude.ai/claude-cod
 ### npm (recommended)
 
 ```bash
-npm install -g @daliovic/claude-statusline
+npm install -g @daliovic/cc-statusline
 ```
 
 ### From source
 
 ```bash
-git clone https://github.com/YOUR_USERNAME/claude-statusline.git
-cd claude-statusline
+git clone https://github.com/daliovic/cc-statusline.git
+cd cc-statusline
 npm install
 npm run build
 ```
@@ -38,7 +38,7 @@ Add to `~/.claude/settings.json`:
 {
   "statusLine": {
     "type": "command",
-    "command": "claude-statusline",
+    "command": "cc-statusline",
     "padding": 0
   }
 }
@@ -49,17 +49,32 @@ Or if installed from source:
 {
   "statusLine": {
     "type": "command",
-    "command": "node /path/to/claude-statusline/dist/statusline.js",
+    "command": "node /path/to/cc-statusline/dist/statusline.js",
     "padding": 0
   }
 }
 ```
 
+## Customization
+
+Run the interactive configuration wizard:
+
+```bash
+cc-statusline --config
+```
+
+This lets you customize:
+- **Visibility** - Show/hide model, context, 5hr limit, 7day limit, delta arrows
+- **Colors** - ANSI 256 color codes for each element
+- **Thresholds** - Context warning percentage, cache TTL
+
+Config is saved to `~/.claude/cc-statusline.json`.
+
 ### Environment Variables
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `STATUSLINE_CACHE_TTL_MS` | `300000` | API cache duration (5 min) |
+| `STATUSLINE_CACHE_TTL_MS` | config value | API cache duration (overrides config) |
 
 ## How It Works
 

package/dist/config.js

@@ -0,0 +1,50 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from "node:fs";
+import { homedir } from "node:os";
+import { join, dirname } from "node:path";
+export const CONFIG_PATH = join(homedir(), ".claude", "cc-statusline.json");
+export const DEFAULT_CONFIG = {
+    show: {
+        model: true,
+        context: true,
+        usage5hr: true,
+        usage7day: true,
+        delta: true,
+    },
+    thresholds: {
+        contextWarning: 75,
+        cacheTtlMs: 300000,
+    },
+    colors: {
+        model: 36, // cyan
+        context: 248, // gray
+        contextWarning: 208, // orange
+        usage: 248, // gray
+        deltaUnder: 32, // green
+        deltaOver: 31, // red
+    },
+};
+export function loadConfig() {
+    try {
+        if (!existsSync(CONFIG_PATH)) {
+            return { ...DEFAULT_CONFIG };
+        }
+        const content = readFileSync(CONFIG_PATH, "utf-8");
+        const loaded = JSON.parse(content);
+        // Deep merge with defaults to handle missing fields
+        return {
+            show: { ...DEFAULT_CONFIG.show, ...loaded.show },
+            thresholds: { ...DEFAULT_CONFIG.thresholds, ...loaded.thresholds },
+            colors: { ...DEFAULT_CONFIG.colors, ...loaded.colors },
+        };
+    }
+    catch {
+        return { ...DEFAULT_CONFIG };
+    }
+}
+export function saveConfig(config) {
+    const dir = dirname(CONFIG_PATH);
+    if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+    }
+    writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+}

package/dist/statusline.js

@@ -2,21 +2,32 @@
 import { readFileSync, writeFileSync, existsSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
+import { loadConfig } from "./config.js";
+// Handle --config flag
+if (process.argv.includes("--config")) {
+    import("./wizard.js").then(({ runWizard }) => runWizard()).catch(() => process.exit(1));
+}
+else {
+    main().catch(() => process.exit(1));
+}
+// Load user config
+const userConfig = loadConfig();
 // === Configuration ===
 const CONFIG = {
-    cacheTtlMs: parseInt(process.env.STATUSLINE_CACHE_TTL_MS || "300000"), // 5 minutes default
+    cacheTtlMs: parseInt(process.env.STATUSLINE_CACHE_TTL_MS || String(userConfig.thresholds.cacheTtlMs)),
     cacheFile: join(homedir(), ".claude", "statusline-cache.json"),
     credentialsFile: join(homedir(), ".claude", ".credentials.json"),
 };
-// === ANSI Colors ===
+// === ANSI Colors (from config) ===
 const color = {
     reset: "\x1b[0m",
-    orange: "\x1b[38;5;208m",
     dim: "\x1b[2m",
-    gray: "\x1b[38;5;248m",
-    cyan: "\x1b[36m",
-    green: "\x1b[32m",
-    red: "\x1b[31m",
+    model: `\x1b[38;5;${userConfig.colors.model}m`,
+    context: `\x1b[38;5;${userConfig.colors.context}m`,
+    contextWarning: `\x1b[38;5;${userConfig.colors.contextWarning}m`,
+    usage: `\x1b[38;5;${userConfig.colors.usage}m`,
+    deltaUnder: `\x1b[38;5;${userConfig.colors.deltaUnder}m`,
+    deltaOver: `\x1b[38;5;${userConfig.colors.deltaOver}m`,
 };
 // === Helpers ===
 function formatTokens(tokens) {
@@ -28,7 +39,7 @@ function formatTokens(tokens) {
 function formatContext(ctx) {
     if (ctx === undefined)
         return "";
-    const c = ctx.percent >= 75 ? color.orange : color.gray;
+    const c = ctx.percent >= userConfig.thresholds.contextWarning ? color.contextWarning : color.context;
     return `${c}\u{1F4CA} ${Math.round(ctx.percent)}%${color.dim} ${formatTokens(ctx.tokens)}${color.reset}`;
 }
 function formatTimeHoursMinutes(isoDate) {
@@ -78,10 +89,10 @@ function formatDeltaTime(delta, windowHours) {
         timeStr = `${days}d${String(hours).padStart(2, "0")}`;
     }
     if (delta < 0) {
-        return ` ${color.dim}${color.green}\u{25BC}${timeStr}${color.reset}`;
+        return ` ${color.dim}${color.deltaUnder}\u{25BC}${timeStr}${color.reset}`;
     }
     else {
-        return ` ${color.dim}${color.red}\u{25B2}${timeStr}${color.reset}`;
+        return ` ${color.dim}${color.deltaOver}\u{25B2}${timeStr}${color.reset}`;
     }
 }
 // Context window sizes by model
@@ -202,33 +213,34 @@ async function main() {
     // Build segments
     const segments = [];
     // Model
-    segments.push(`${color.cyan}\u{1F916} ${modelDisplay}${color.reset}`);
+    if (userConfig.show.model) {
+        segments.push(`${color.model}\u{1F916} ${modelDisplay}${color.reset}`);
+    }
     // Context %
-    if (contextInfo !== undefined) {
+    if (userConfig.show.context && contextInfo !== undefined) {
         segments.push(formatContext(contextInfo));
     }
     // Combined usage limits: ⏱ 18% 180 / 45% 48
-    if (usage?.five_hour || usage?.seven_day) {
+    if ((userConfig.show.usage5hr || userConfig.show.usage7day) && (usage?.five_hour || usage?.seven_day)) {
         const fiveHr = usage.five_hour;
         const sevenDay = usage.seven_day;
         const parts = [];
-        if (fiveHr?.utilization !== undefined && fiveHr.resets_at) {
+        if (userConfig.show.usage5hr && fiveHr?.utilization !== undefined && fiveHr.resets_at) {
             const time = formatTimeHoursMinutes(fiveHr.resets_at);
             const delta = calcDelta(fiveHr.utilization, fiveHr.resets_at, 5);
-            const deltaStr = formatDeltaTime(delta, 5);
-            parts.push(`${color.gray}${Math.round(fiveHr.utilization)}%${color.dim} ${time}${deltaStr}${color.reset}`);
+            const deltaStr = userConfig.show.delta ? formatDeltaTime(delta, 5) : "";
+            parts.push(`${color.usage}${Math.round(fiveHr.utilization)}%${color.dim} ${time}${deltaStr}${color.reset}`);
         }
-        if (sevenDay?.utilization !== undefined && sevenDay.resets_at) {
+        if (userConfig.show.usage7day && sevenDay?.utilization !== undefined && sevenDay.resets_at) {
             const time = formatTimeDaysHours(sevenDay.resets_at);
             const delta = calcDelta(sevenDay.utilization, sevenDay.resets_at, 168);
-            const deltaStr = formatDeltaTime(delta, 168);
-            parts.push(`${color.gray}${Math.round(sevenDay.utilization)}%${color.dim} ${time}${deltaStr}${color.reset}`);
+            const deltaStr = userConfig.show.delta ? formatDeltaTime(delta, 168) : "";
+            parts.push(`${color.usage}${Math.round(sevenDay.utilization)}%${color.dim} ${time}${deltaStr}${color.reset}`);
         }
         if (parts.length > 0) {
-            segments.push(`${color.cyan}\u{23F1}${color.reset} ${parts.join(`${color.dim}/${color.reset}`)}`);
+            segments.push(`${color.model}\u{23F1}${color.reset} ${parts.join(`${color.dim}/${color.reset}`)}`);
         }
     }
     // Output
     console.log(segments.join(` ${color.dim}\u{2502}${color.reset} `));
 }
-main().catch(() => process.exit(1));

package/dist/wizard.js

@@ -0,0 +1,163 @@
+import { select, checkbox, input, confirm } from "@inquirer/prompts";
+import { DEFAULT_CONFIG, loadConfig, saveConfig, CONFIG_PATH } from "./config.js";
+// ANSI color helper
+function colorize(code, text) {
+    return `\x1b[38;5;${code}m${text}\x1b[0m`;
+}
+function showPreview(config) {
+    const c = config.colors;
+    const parts = [];
+    if (config.show.model) {
+        parts.push(colorize(c.model, "\u{1F916} Opus"));
+    }
+    if (config.show.context) {
+        parts.push(`${colorize(c.context, "\u{1F4CA} 45%")} / ${colorize(c.contextWarning, "78%")}`);
+    }
+    if (config.show.usage5hr || config.show.usage7day) {
+        const usageParts = [];
+        if (config.show.usage5hr)
+            usageParts.push(colorize(c.usage, "26% 2h09"));
+        if (config.show.usage7day)
+            usageParts.push(colorize(c.usage, "46% 2d15"));
+        if (config.show.delta) {
+            parts.push(`\u{23F1} ${usageParts.join("/")} ${colorize(c.deltaUnder, "\u{25BC}1h")} ${colorize(c.deltaOver, "\u{25B2}4h")}`);
+        }
+        else {
+            parts.push(`\u{23F1} ${usageParts.join("/")}`);
+        }
+    }
+    console.log("\n  Preview: " + parts.join(" \x1b[2m\u{2502}\x1b[0m ") + "\n");
+}
+async function visibilityMenu(config) {
+    const choices = [
+        { name: "Model indicator", value: "model", checked: config.show.model },
+        { name: "Context usage", value: "context", checked: config.show.context },
+        { name: "5-hour usage limit", value: "usage5hr", checked: config.show.usage5hr },
+        { name: "7-day usage limit", value: "usage7day", checked: config.show.usage7day },
+        { name: "Budget delta arrows", value: "delta", checked: config.show.delta },
+    ];
+    const selected = await checkbox({
+        message: "Toggle items to show (space to toggle, enter to confirm)",
+        choices,
+    });
+    config.show.model = selected.includes("model");
+    config.show.context = selected.includes("context");
+    config.show.usage5hr = selected.includes("usage5hr");
+    config.show.usage7day = selected.includes("usage7day");
+    config.show.delta = selected.includes("delta");
+}
+async function colorsMenu(config) {
+    const colorOptions = [
+        { name: `Model (current: ${colorize(config.colors.model, String(config.colors.model))})`, value: "model" },
+        { name: `Context (current: ${colorize(config.colors.context, String(config.colors.context))})`, value: "context" },
+        { name: `Context warning (current: ${colorize(config.colors.contextWarning, String(config.colors.contextWarning))})`, value: "contextWarning" },
+        { name: `Usage (current: ${colorize(config.colors.usage, String(config.colors.usage))})`, value: "usage" },
+        { name: `Delta under budget (current: ${colorize(config.colors.deltaUnder, String(config.colors.deltaUnder))})`, value: "deltaUnder" },
+        { name: `Delta over budget (current: ${colorize(config.colors.deltaOver, String(config.colors.deltaOver))})`, value: "deltaOver" },
+        { name: "Back", value: "back" },
+    ];
+    while (true) {
+        const choice = await select({
+            message: "Select color to change (ANSI 256 codes: 0-255)",
+            choices: colorOptions,
+        });
+        if (choice === "back")
+            break;
+        const current = config.colors[choice];
+        const newValue = await input({
+            message: `Enter ANSI color code (0-255, current: ${colorize(current, String(current))})`,
+            default: String(current),
+            validate: (val) => {
+                const num = parseInt(val, 10);
+                if (isNaN(num) || num < 0 || num > 255)
+                    return "Enter a number 0-255";
+                return true;
+            },
+        });
+        config.colors[choice] = parseInt(newValue, 10);
+        // Update the menu option to show new color
+        const idx = colorOptions.findIndex(o => o.value === choice);
+        if (idx >= 0) {
+            const label = choice.replace(/([A-Z])/g, " $1").toLowerCase();
+            colorOptions[idx].name = `${label.charAt(0).toUpperCase() + label.slice(1)} (current: ${colorize(config.colors[choice], newValue)})`;
+        }
+    }
+}
+async function thresholdsMenu(config) {
+    const contextWarning = await input({
+        message: "Context warning threshold % (turns orange)",
+        default: String(config.thresholds.contextWarning),
+        validate: (val) => {
+            const num = parseInt(val, 10);
+            if (isNaN(num) || num < 1 || num > 100)
+                return "Enter 1-100";
+            return true;
+        },
+    });
+    config.thresholds.contextWarning = parseInt(contextWarning, 10);
+    const cacheTtl = await input({
+        message: "API cache TTL (milliseconds)",
+        default: String(config.thresholds.cacheTtlMs),
+        validate: (val) => {
+            const num = parseInt(val, 10);
+            if (isNaN(num) || num < 0)
+                return "Enter a positive number";
+            return true;
+        },
+    });
+    config.thresholds.cacheTtlMs = parseInt(cacheTtl, 10);
+}
+export async function runWizard() {
+    console.log("\n\x1b[1mcc-statusline Configuration\x1b[0m\n");
+    const config = loadConfig();
+    showPreview(config);
+    while (true) {
+        const choice = await select({
+            message: "What would you like to configure?",
+            choices: [
+                { name: "Visibility (show/hide items)", value: "visibility" },
+                { name: "Colors", value: "colors" },
+                { name: "Thresholds", value: "thresholds" },
+                { name: "Reset to defaults", value: "reset" },
+                { name: "Save & Exit", value: "save" },
+                { name: "Exit without saving", value: "exit" },
+            ],
+        });
+        switch (choice) {
+            case "visibility":
+                await visibilityMenu(config);
+                showPreview(config);
+                break;
+            case "colors":
+                await colorsMenu(config);
+                showPreview(config);
+                break;
+            case "thresholds":
+                await thresholdsMenu(config);
+                break;
+            case "reset":
+                const confirmReset = await confirm({
+                    message: "Reset all settings to defaults?",
+                    default: false,
+                });
+                if (confirmReset) {
+                    Object.assign(config, JSON.parse(JSON.stringify(DEFAULT_CONFIG)));
+                    console.log("  Reset to defaults.\n");
+                    showPreview(config);
+                }
+                break;
+            case "save":
+                saveConfig(config);
+                console.log(`\n  Saved to ${CONFIG_PATH}\n`);
+                return;
+            case "exit":
+                const confirmExit = await confirm({
+                    message: "Exit without saving changes?",
+                    default: false,
+                });
+                if (confirmExit)
+                    return;
+                break;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daliovic/cc-statusline",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Minimal Claude Code statusline with usage limits and budget tracking",
   "type": "module",
   "main": "dist/statusline.js",
@@ -34,6 +34,9 @@
     "url": "https://github.com/daliovic/cc-statusline/issues"
   },
   "homepage": "https://github.com/daliovic/cc-statusline#readme",
+  "dependencies": {
+    "@inquirer/prompts": "^7.0.0"
+  },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "typescript": "^5.0.0"