ccstatusline 1.0.13 → 1.0.15

package/README.md

@@ -1,36 +1,31 @@
 # ccstatusline
 
-A customizable status line formatter for Claude Code CLI that displays model info, git branch, token usage, and other metrics in your terminal.
+> 🎨 A highly customizable status line formatter for Claude Code CLI that displays model info, git branch, token usage, and other metrics in your terminal.
 
-## Features
+![Demo](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/demo.gif)
 
-- 📊 **Real-time metrics** - Display model name, git branch, token usage, session duration, and more
-- 🎨 **Fully customizable** - Choose what to display and customize colors
-- 📐 **Multi-line support** - Configure up to 3 status lines
-- 🖥️ **Interactive TUI** - Built-in configuration interface using React/Ink
-- 🚀 **Cross-platform** - Works with both Bun and Node.js
-- 📏 **Auto-width detection** - Automatically adapts to terminal width with flex separators
+## ✨ Features
 
-## Quick Start
+- **📊 Real-time Metrics** - Display model name, git branch, token usage, session duration, and more
+- **🎨 Fully Customizable** - Choose what to display and customize colors for each element
+- **📐 Multi-line Support** - Configure up to 3 independent status lines
+- **🖥️ Interactive TUI** - Built-in configuration interface using React/Ink
+- **🚀 Cross-platform** - Works seamlessly with both Bun and Node.js
+- **📏 Smart Width Detection** - Automatically adapts to terminal width with flex separators
+- **⚡ Zero Config** - Sensible defaults that work out of the box
 
-No installation needed! Use directly with npx:
+## 🚀 Quick Start
+
+### No installation needed! Use directly with npx:
 
 ```bash
 # Run the configuration TUI
 npx ccstatusline@latest
 ```
 
-## Setup
-
 ### Configure ccstatusline
 
-Run the interactive configuration tool:
-
-```bash
-npx ccstatusline@latest
-```
-
-This launches a TUI where you can:
+The interactive configuration tool provides a terminal UI where you can:
 - Configure up to 3 separate status lines
 - Add/remove/reorder status line items
 - Customize colors for each element
@@ -39,13 +34,13 @@ This launches a TUI where you can:
 - Install/uninstall to Claude Code settings
 - Preview your status line in real-time
 
-Your settings are saved to `~/.config/ccstatusline/settings.json`.
+> 💡 **Tip:** Your settings are automatically saved to `~/.config/ccstatusline/settings.json`
 
-## Usage
+## 📖 Usage
 
 Once configured, ccstatusline automatically formats your Claude Code status line. The status line appears at the bottom of your terminal during Claude Code sessions.
 
-### Available Status Items
+### 📊 Available Status Items
 
 - **Model Name** - Shows the current Claude model (e.g., "Claude 3.5 Sonnet")
 - **Git Branch** - Displays current git branch name
@@ -60,10 +55,11 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 - **Context Percentage** - Shows percentage of context limit used
 - **Terminal Width** - Shows detected terminal width (for debugging)
 - **Custom Text** - Add your own custom text to the status line
+- **Custom Command** - Execute shell commands and display their output (refreshes whenever the statusline is updated by Claude Code)
 - **Separator** - Visual divider between items (customizable: |, -, comma, space)
 - **Flex Separator** - Expands to fill available space
 
-### TUI Controls
+### ⌨️ TUI Controls
 
 #### Main Menu
 - **↑↓** - Navigate menu items
@@ -79,7 +75,10 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 - **d** - Delete selected item
 - **c** - Clear entire line
 - **r** - Toggle raw value mode (no labels)
-- **e** - Edit custom text (for custom-text items)
+- **e** - Edit value (for custom-text and custom-command items)
+- **w** - Set max width (for custom-command items)
+- **t** - Set timeout in milliseconds (for custom-command items)
+- **p** - Toggle preserve colors (for custom-command items)
 - **Space** - Change separator character (for separator items)
 - **ESC** - Go back
 
@@ -94,23 +93,63 @@ Configure how flex separators calculate available width:
 - **Full width minus 40** - Leaves space for auto-compact message (default)
 - **Full width until compact** - Switches based on context percentage threshold
 
-### Raw Value Mode
+### 🔤 Raw Value Mode
 
 Some items support "raw value" mode which displays just the value without a label:
 - Normal: `Model: Claude 3.5 Sonnet` → Raw: `Claude 3.5 Sonnet`
 - Normal: `Session: 2hr 15m` → Raw: `2hr 15m`
 - Normal: `Ctx: 18.6k` → Raw: `18.6k`
 
-### Status Line Truncation
+### 🔧 Custom Widgets
+
+#### Custom Text Widget
+Add static text to your status line. Perfect for:
+- Project identifiers
+- Environment indicators (dev/prod)
+- Personal labels or reminders
+
+#### Custom Command Widget
+Execute shell commands and display their output dynamically:
+- Refreshes whenever the statusline is updated by Claude Code
+- Receives the full Claude Code JSON data via stdin (model info, session ID, transcript path, etc.)
+- Displays command output inline in your status line
+- Configurable timeout (default: 1000ms)
+- Examples:
+  - `pwd | xargs basename` - Show current directory name
+  - `node -v` - Display Node.js version
+  - `git rev-parse --short HEAD` - Show current commit hash
+  - `date +%H:%M` - Display current time
+  - `curl -s wttr.in?format="%t"` - Show current temperature
+  - `npx -y ccusage statusline` - Display Claude usage metrics (set timeout: 5000ms)
+
+> ⚠️ **Note:** Commands should complete quickly to avoid delays. Long-running commands will be killed after the configured timeout. If you're not seeing output from your custom command, try increasing the timeout value (press 't' in the editor).
+
+> 💡 **Tip:** Custom commands can be other Claude Code compatible status line formatters! They receive the same JSON via stdin that ccstatusline receives from Claude Code, allowing you to chain or combine multiple status line tools.
+
+### 🔗 Integration Example: ccusage
+
+[ccusage](https://github.com/samuelint/ccusage) is a tool that tracks and displays Claude Code usage metrics. You can integrate it directly into your status line:
+
+1. Add a Custom Command widget
+2. Set command: `npx -y ccusage statusline`
+3. Set timeout: `5000` (5 seconds for initial download)
+4. Enable "preserve colors" to keep ccusage's color formatting
+
+![ccusage integration](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/ccusage.png)
+
+The command receives Claude Code's JSON data via stdin, allowing ccusage to access session information, model details, and transcript data for accurate usage tracking.
+
+### ✂️ Smart Truncation
 
 When terminal width is detected, status lines automatically truncate with ellipsis (...) if they exceed the available width, preventing line wrapping.
 
-## Development
+## 🛠️ Development
 
 ### Prerequisites
 
-- [Bun](https://bun.sh)
+- [Bun](https://bun.sh) (v1.0+)
 - Git
+- Node.js 18+ (optional, for npm publishing)
 
 ### Setup
 
@@ -133,7 +172,7 @@ bun run src/ccstatusline.ts
 bun run build
 ```
 
-### Project Structure
+### 📁 Project Structure
 
 ```
 ccstatusline/
@@ -147,7 +186,7 @@ ccstatusline/
 ├── tsconfig.json
 └── README.md
 ```
-## Contributing
+## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
@@ -157,14 +196,29 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
-## License
+## 📄 License
+
+[MIT](LICENSE) © Matthew Breedlove
+
+## 👤 Author
+
+**Matthew Breedlove**
 
-MIT
+- GitHub: [@sirmalloc](https://github.com/sirmalloc)
 
-## Author
+## 🙏 Acknowledgments
 
-Matthew Breedlove
+- Built for use with [Claude Code CLI](https://claude.ai/code) by Anthropic
+- Powered by [Ink](https://github.com/vadimdemedes/ink) for the terminal UI
+- Made with ❤️ for the Claude Code community
 
-## Acknowledgments
+---
 
-Built for use with [Claude Code CLI](https://claude.ai/code) by Anthropic.
+<p align="center">
+  <a href="https://www.npmjs.com/package/ccstatusline">
+    <img src="https://img.shields.io/npm/v/ccstatusline.svg" alt="npm version">
+  </a>
+  <a href="https://github.com/sirmalloc/ccstatusline/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
+  </a>
+</p>

package/dist/ccstatusline.js

@@ -182,7 +182,7 @@ async function getExistingStatusLine() {
 // src/tui.tsx
 import * as fs3 from "fs";
 import * as path3 from "path";
-var __dirname = "/Users/sirmalloc/Desktop/ccstatusline/src";
+var __dirname = "/Users/sirmalloc/Projects/Personal/ccstatusline/src";
 import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
 function getPackageVersion() {
   try {
@@ -254,31 +254,31 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings)
         elements.push(changesColor("(+42,-10)"));
         break;
       case "tokens-input":
-        const inputColor = chalk[item.color || "yellow"] || chalk.yellow;
+        const inputColor = chalk[item.color || "blue"] || chalk.blue;
         elements.push(inputColor(item.rawValue ? "15.2k" : "In: 15.2k"));
         break;
       case "tokens-output":
-        const outputColor = chalk[item.color || "green"] || chalk.green;
+        const outputColor = chalk[item.color || "white"] || chalk.white;
         elements.push(outputColor(item.rawValue ? "3.4k" : "Out: 3.4k"));
         break;
       case "tokens-cached":
-        const cachedColor = chalk[item.color || "blue"] || chalk.blue;
+        const cachedColor = chalk[item.color || "cyan"] || chalk.cyan;
         elements.push(cachedColor(item.rawValue ? "12k" : "Cached: 12k"));
         break;
       case "tokens-total":
-        const totalColor = chalk[item.color || "white"] || chalk.white;
+        const totalColor = chalk[item.color || "cyan"] || chalk.cyan;
         elements.push(totalColor(item.rawValue ? "30.6k" : "Total: 30.6k"));
         break;
       case "context-length":
-        const ctxColor = chalk[item.color || "cyan"] || chalk.cyan;
+        const ctxColor = chalk[item.color || "dim"] || chalk.dim;
         elements.push(ctxColor(item.rawValue ? "18.6k" : "Ctx: 18.6k"));
         break;
       case "context-percentage":
-        const ctxPctColor = chalk[item.color || "cyan"] || chalk.cyan;
+        const ctxPctColor = chalk[item.color || "blue"] || chalk.blue;
         elements.push(ctxPctColor(item.rawValue ? "9.3%" : "Ctx: 9.3%"));
         break;
       case "session-clock":
-        const sessionColor = chalk[item.color || "blue"] || chalk.blue;
+        const sessionColor = chalk[item.color || "yellow"] || chalk.yellow;
         elements.push(sessionColor(item.rawValue ? "2hr 15m" : "Session: 2hr 15m"));
         break;
       case "version":
@@ -286,7 +286,7 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings)
         elements.push(versionColor(item.rawValue ? "1.0.72" : "Version: 1.0.72"));
         break;
       case "terminal-width":
-        const termColor = chalk[item.color || "dim"] || chalk.dim;
+        const termColor = chalk[item.color || "gray"] || chalk.gray;
         const detectedWidth = canDetectTerminalWidth() ? terminalWidth : "??";
         elements.push(termColor(item.rawValue ? `${detectedWidth}` : `Term: ${detectedWidth}`));
         break;
@@ -529,6 +529,8 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
   const [commandCursorPos, setCommandCursorPos] = useState(0);
   const [editingMaxWidth, setEditingMaxWidth] = useState(false);
   const [maxWidthInput, setMaxWidthInput] = useState("");
+  const [editingTimeout, setEditingTimeout] = useState(false);
+  const [timeoutInput, setTimeoutInput] = useState("");
   const separatorChars = ["|", "-", ",", " "];
   useInput((input, key) => {
     if (editingText) {
@@ -619,6 +621,30 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
       } else if (input && /\d/.test(input)) {
         setMaxWidthInput(maxWidthInput + input);
       }
+    } else if (editingTimeout) {
+      if (key.return) {
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2) {
+          const timeout = parseInt(timeoutInput, 10);
+          const newItems = [...items];
+          if (!isNaN(timeout) && timeout > 0) {
+            newItems[selectedIndex] = { ...currentItem2, timeout };
+          } else {
+            const { timeout: _, ...rest } = currentItem2;
+            newItems[selectedIndex] = rest;
+          }
+          onUpdate(newItems);
+        }
+        setEditingTimeout(false);
+        setTimeoutInput("");
+      } else if (key.escape) {
+        setEditingTimeout(false);
+        setTimeoutInput("");
+      } else if (key.backspace || key.delete) {
+        setTimeoutInput(timeoutInput.slice(0, -1));
+      } else if (input && /\d/.test(input)) {
+        setTimeoutInput(timeoutInput + input);
+      }
     } else if (moveMode) {
       if (key.upArrow && selectedIndex > 0) {
         const newItems = [...items];
@@ -771,6 +797,12 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
           setMaxWidthInput(currentItem2.maxWidth ? currentItem2.maxWidth.toString() : "");
           setEditingMaxWidth(true);
         }
+      } else if (input === "t" && items.length > 0) {
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2 && currentItem2.type === "custom-command") {
+          setTimeoutInput(currentItem2.timeout ? currentItem2.timeout.toString() : "1000");
+          setEditingTimeout(true);
+        }
       } else if (input === "p" && items.length > 0) {
         const currentItem2 = items[selectedIndex];
         if (currentItem2 && currentItem2.type === "custom-command") {
@@ -783,14 +815,50 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
       }
     }
   });
+  const getDefaultColor = (type) => {
+    switch (type) {
+      case "model":
+        return "cyan";
+      case "git-branch":
+        return "magenta";
+      case "git-changes":
+        return "yellow";
+      case "session-clock":
+        return "yellow";
+      case "version":
+        return "green";
+      case "tokens-input":
+        return "blue";
+      case "tokens-output":
+        return "white";
+      case "tokens-cached":
+        return "cyan";
+      case "tokens-total":
+        return "cyan";
+      case "context-length":
+        return "dim";
+      case "context-percentage":
+        return "blue";
+      case "terminal-width":
+        return "gray";
+      case "custom-text":
+        return "white";
+      case "custom-command":
+        return "white";
+      default:
+        return "white";
+    }
+  };
   const getItemDisplay = (item) => {
+    const colorName = item.color || getDefaultColor(item.type);
+    const colorFunc = chalk[colorName] || chalk.white;
     switch (item.type) {
       case "model":
-        return chalk.cyan("Model");
+        return colorFunc("Model");
       case "git-branch":
-        return chalk.magenta("Git Branch");
+        return colorFunc("Git Branch");
       case "git-changes":
-        return chalk.yellow("Git Changes");
+        return colorFunc("Git Changes");
       case "separator": {
         const char = item.character || "|";
         const charDisplay = char === " " ? "(space)" : char;
@@ -799,30 +867,34 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
       case "flex-separator":
         return chalk.yellow("Flex Separator");
       case "tokens-input":
-        return chalk.yellow("Tokens Input");
+        return colorFunc("Tokens Input");
       case "tokens-output":
-        return chalk.green("Tokens Output");
+        return colorFunc("Tokens Output");
       case "tokens-cached":
-        return chalk.blue("Tokens Cached");
+        return colorFunc("Tokens Cached");
       case "tokens-total":
-        return chalk.white("Tokens Total");
+        return colorFunc("Tokens Total");
       case "context-length":
-        return chalk.cyan("Context Length");
+        return colorFunc("Context Length");
       case "context-percentage":
-        return chalk.cyan("Context %");
+        return colorFunc("Context %");
       case "session-clock":
-        return chalk.blue("Session Clock");
+        return colorFunc("Session Clock");
       case "terminal-width":
-        return chalk.dim("Terminal Width");
+        return colorFunc("Terminal Width");
       case "version":
-        return chalk.green("Version");
+        return colorFunc("Version");
       case "custom-text":
         const text = item.customText || "Empty";
-        return chalk.white(`Custom Text (${text})`);
+        return colorFunc(`Custom Text (${text})`);
       case "custom-command":
         const cmd = item.commandPath || "No command";
         const truncatedCmd = cmd.length > 30 ? `${cmd.substring(0, 27)}...` : cmd;
-        return chalk.yellow(`Custom Command (${truncatedCmd})`);
+        if (!item.preserveColors) {
+          return colorFunc(`Custom Command (${truncatedCmd})`);
+        } else {
+          return chalk.white(`Custom Command (${truncatedCmd}) [preserving colors]`);
+        }
     }
   };
   const hasFlexSeparator = items.some((item) => item.type === "flex-separator");
@@ -841,7 +913,7 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
     helpText += ", (e)dit text";
   }
   if (isCustomCommand) {
-    helpText += ", (e)dit cmd, (w)idth, (p)reserve colors";
+    helpText += ", (e)dit cmd, (w)idth, (t)imeout, (p)reserve colors";
   }
   helpText += ", Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line";
   if (canToggleRaw) {
@@ -917,6 +989,20 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
             children: "Press Enter to save, ESC to cancel"
           }, undefined, false, undefined, this)
         ]
+      }, undefined, true, undefined, this) : editingTimeout ? /* @__PURE__ */ jsxDEV(Box, {
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            children: [
+              "Enter timeout in milliseconds (default 1000): ",
+              timeoutInput
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            dimColor: true,
+            children: "Press Enter to save, ESC to cancel"
+          }, undefined, false, undefined, this)
+        ]
       }, undefined, true, undefined, this) : moveMode ? /* @__PURE__ */ jsxDEV(Text, {
         dimColor: true,
         children: "↑↓ to move item, ESC or Enter to exit move mode"
@@ -977,6 +1063,40 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
 var ColorMenu = ({ items, onUpdate, onBack }) => {
   const colorableItems = items.filter((item) => ["model", "git-branch", "git-changes", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "session-clock", "terminal-width", "version", "custom-text", "custom-command"].includes(item.type) && !(item.type === "custom-command" && item.preserveColors));
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const getDefaultColor = (type) => {
+    switch (type) {
+      case "model":
+        return "cyan";
+      case "git-branch":
+        return "magenta";
+      case "git-changes":
+        return "yellow";
+      case "session-clock":
+        return "yellow";
+      case "version":
+        return "green";
+      case "tokens-input":
+        return "blue";
+      case "tokens-output":
+        return "white";
+      case "tokens-cached":
+        return "cyan";
+      case "tokens-total":
+        return "cyan";
+      case "context-length":
+        return "dim";
+      case "context-percentage":
+        return "blue";
+      case "terminal-width":
+        return "gray";
+      case "custom-text":
+        return "white";
+      case "custom-command":
+        return "white";
+      default:
+        return "white";
+    }
+  };
   useInput((input, key) => {
     if (key.escape) {
       onBack();
@@ -1044,14 +1164,17 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
         return "Version";
       case "custom-text":
         return `Custom Text (${item.customText || "Empty"})`;
-      case "custom-command":
-        return `Custom Command (${item.commandPath ? item.commandPath.substring(0, 20) + (item.commandPath.length > 20 ? "..." : "") : "No command"})`;
+      case "custom-command": {
+        const cmd = item.commandPath ? item.commandPath.substring(0, 20) + (item.commandPath.length > 20 ? "..." : "") : "No command";
+        const timeout = item.timeout ? ` ${item.timeout}ms` : "";
+        return `Custom Command (${cmd}${timeout})`;
+      }
       default:
         return item.type;
     }
   };
   const menuItems = colorableItems.map((item, index) => {
-    const color = item.color || "white";
+    const color = item.color || getDefaultColor(item.type);
     const colorFunc = chalk[color] || chalk.white;
     return {
       label: colorFunc(`${getItemLabel(item)} #${index + 1}`),
@@ -1101,7 +1224,7 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
     "whiteBright"
   ];
   const selectedItem = selectedIndex < colorableItems.length ? colorableItems[selectedIndex] : null;
-  const currentColor = selectedItem ? selectedItem.color || "white" : "white";
+  const currentColor = selectedItem ? selectedItem.color || getDefaultColor(selectedItem.type) : "white";
   const colorIndex = colors.indexOf(currentColor);
   const colorNumber = colorIndex === -1 ? 8 : colorIndex + 1;
   const colorDisplay = chalk[currentColor] ? chalk[currentColor](currentColor) : chalk.white(currentColor);
@@ -1856,10 +1979,12 @@ function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration)
       case "custom-command":
         if (item.commandPath) {
           try {
+            const timeout = item.timeout || 1000;
             const output = execSync2(item.commandPath, {
               encoding: "utf8",
+              input: JSON.stringify(data),
               stdio: ["pipe", "pipe", "ignore"],
-              timeout: 1000
+              timeout
             }).trim();
             if (output) {
               let finalOutput = output;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstatusline",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A customizable status line formatter for Claude Code CLI",
   "module": "src/ccstatusline.ts",
   "type": "module",