ccstatusline 1.0.14 → 1.0.15

package/README.md

@@ -55,7 +55,7 @@ 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)
+- **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
 
@@ -76,6 +76,9 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 - **c** - Clear entire line
 - **r** - Toggle raw value mode (no labels)
 - **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
 
@@ -107,16 +110,34 @@ Add static text to your status line. Perfect for:
 
 #### Custom Command Widget
 Execute shell commands and display their output dynamically:
-- Refreshes automatically every 5 seconds
+- 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 (<1s) to avoid delays. Long-running commands will be killed after timeout.
+> ⚠️ **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
 

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 {
@@ -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") {
@@ -881,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) {
@@ -957,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"
@@ -1118,8 +1164,11 @@ 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;
     }
@@ -1930,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.14",
+  "version": "1.0.15",
   "description": "A customizable status line formatter for Claude Code CLI",
   "module": "src/ccstatusline.ts",
   "type": "module",