ccstatusline 1.0.13 → 1.0.14

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 every 5 seconds)
 - **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,7 @@ 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)
 - **Space** - Change separator character (for separator items)
 - **ESC** - Go back
 
@@ -94,23 +90,45 @@ 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 automatically every 5 seconds
+- Displays command output inline in your status line
+- 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
+
+> ⚠️ **Note:** Commands should complete quickly (<1s) to avoid delays. Long-running commands will be killed after timeout.
+
+### ✂️ 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 +151,7 @@ bun run src/ccstatusline.ts
 bun run build
 ```
 
-### Project Structure
+### 📁 Project Structure
 
 ```
 ccstatusline/
@@ -147,7 +165,7 @@ ccstatusline/
 ├── tsconfig.json
 └── README.md
 ```
-## Contributing
+## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
@@ -157,14 +175,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

@@ -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;
@@ -783,14 +783,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 +835,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");
@@ -977,6 +1017,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();
@@ -1051,7 +1125,7 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
     }
   };
   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 +1175,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);

package/package.json

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