ccstatusline 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,164 @@
+# ccstatusline
+
+A customizable status line formatter for Claude Code CLI that displays model info, git branch, token usage, and other metrics in your terminal.
+
+## Features
+
+- 📊 **Real-time metrics** - Display model name, git branch, token usage, and more
+- 🎨 **Fully customizable** - Choose what to display and customize colors
+- 🖥️ **Interactive TUI** - Built-in configuration interface using React/Ink
+- 🚀 **Cross-platform** - Works with both Bun and Node.js
+- 📏 **80-character format** - Perfectly sized for Claude Code CLI integration
+
+## Quick Start
+
+No installation needed! Use directly with npx:
+
+```bash
+# Run the configuration TUI
+npx ccstatusline
+```
+
+## Setup
+
+### Configure ccstatusline
+
+Run the interactive configuration tool:
+
+```bash
+npx ccstatusline
+```
+
+This launches a TUI where you can:
+- Add/remove status line items
+- Reorder items with arrow keys
+- Customize colors for each element
+- Preview your status line in real-time
+
+Your settings are saved to `~/.config/ccstatusline/settings.json`.
+
+## 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
+
+- **Model Name** - Shows the current Claude model (e.g., "Claude 3.5 Sonnet")
+- **Git Branch** - Displays current git branch name
+- **Token Usage** - Shows input/output/total tokens used
+- **Time** - Current time in HH:MM:SS format
+- **Custom Text** - Add your own static text
+- **Separator** - Visual divider between items
+- **Flex Separator** - Expands to fill available space
+
+## Configuration File
+
+The configuration file at `~/.config/ccstatusline/settings.json` looks like:
+
+```json
+{
+  "items": [
+    {
+      "type": "model",
+      "color": "cyan"
+    },
+    {
+      "type": "separator",
+      "text": " │ ",
+      "color": "gray"
+    },
+    {
+      "type": "git_branch",
+      "color": "green"
+    },
+    {
+      "type": "separator",
+      "text": " │ ",
+      "color": "gray"
+    },
+    {
+      "type": "tokens",
+      "color": "yellow"
+    },
+    {
+      "type": "flex_separator",
+      "text": "─",
+      "color": "gray"
+    },
+    {
+      "type": "time",
+      "color": "blue"
+    }
+  ]
+}
+```
+
+### Color Options
+
+Available colors:
+- `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `gray`
+- `brightBlack`, `brightRed`, `brightGreen`, `brightYellow`, `brightBlue`, `brightMagenta`, `brightCyan`, `brightWhite`
+
+## Development
+
+### Prerequisites
+
+- [Bun](https://bun.sh)
+- Git
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/ccstatusline.git
+cd ccstatusline
+
+# Install dependencies
+bun install
+```
+
+### Development Commands
+
+```bash
+# Run in TUI mode (configuration)
+bun run src/ccstatusline.ts
+
+# Build for distribution
+bun run build
+```
+
+### Project Structure
+
+```
+ccstatusline/
+├── src/
+│   ├── ccstatusline.ts     # Main entry point
+│   ├── tui.tsx             # React/Ink configuration UI
+│   ├── config.ts           # Settings management
+│   └── claude-settings.ts  # Claude Code settings integration
+├── dist/                   # Built files (generated)
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT
+
+## Author
+
+Matthew Breedlove
+
+## Acknowledgments
+
+Built for use with [Claude Code CLI](https://claude.ai/code) by Anthropic.

package/dist/ccstatusline.js

@@ -103,13 +103,13 @@ async function saveClaudeSettings(settings) {
 }
 async function isInstalled() {
   const settings = await loadClaudeSettings();
-  return settings.statusLine?.command === "npx ccstatusline";
+  return settings.statusLine?.command === "npx -y ccstatusline";
 }
 async function installStatusLine() {
   const settings = await loadClaudeSettings();
   settings.statusLine = {
     type: "command",
-    command: "npx ccstatusline",
+    command: "npx -y ccstatusline",
     padding: 1
   };
   await saveClaudeSettings(settings);
@@ -180,12 +180,13 @@ var StatusLinePreview = ({ items, terminalWidth }) => {
     const parts = [[]];
     let currentPart = 0;
     for (let i = 0;i < items.length; i++) {
-      if (items[i].type === "flex-separator") {
+      const item = items[i];
+      if (item && item.type === "flex-separator") {
         currentPart++;
         parts[currentPart] = [];
       } else {
         const element = elements[i];
-        if (element !== "FLEX") {
+        if (element !== "FLEX" && parts[currentPart]) {
           parts[currentPart].push(element);
         }
       }
@@ -201,7 +202,10 @@ var StatusLinePreview = ({ items, terminalWidth }) => {
     const extraSpace = flexCount > 0 ? totalSpace % flexCount : 0;
     statusLine = "";
     for (let i = 0;i < parts.length; i++) {
-      statusLine += parts[i].join("");
+      const part = parts[i];
+      if (part) {
+        statusLine += part.join("");
+      }
       if (i < parts.length - 1) {
         const spaces = spacePerFlex + (i < extraSpace ? 1 : 0);
         statusLine += " ".repeat(spaces);
@@ -288,12 +292,20 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
     if (moveMode) {
       if (key.upArrow && selectedIndex > 0) {
         const newItems = [...items];
-        [newItems[selectedIndex], newItems[selectedIndex - 1]] = [newItems[selectedIndex - 1], newItems[selectedIndex]];
+        const temp = newItems[selectedIndex];
+        const prev = newItems[selectedIndex - 1];
+        if (temp && prev) {
+          [newItems[selectedIndex], newItems[selectedIndex - 1]] = [prev, temp];
+        }
         onUpdate(newItems);
         setSelectedIndex(selectedIndex - 1);
       } else if (key.downArrow && selectedIndex < items.length - 1) {
         const newItems = [...items];
-        [newItems[selectedIndex], newItems[selectedIndex + 1]] = [newItems[selectedIndex + 1], newItems[selectedIndex]];
+        const temp = newItems[selectedIndex];
+        const next = newItems[selectedIndex + 1];
+        if (temp && next) {
+          [newItems[selectedIndex], newItems[selectedIndex + 1]] = [next, temp];
+        }
         onUpdate(newItems);
         setSelectedIndex(selectedIndex + 1);
       } else if (key.escape || key.return) {
@@ -317,12 +329,18 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
           "context-length",
           "context-percentage"
         ];
-        const currentType = items[selectedIndex].type;
-        const currentIndex = types.indexOf(currentType);
-        const prevIndex = currentIndex === 0 ? types.length - 1 : currentIndex - 1;
-        const newItems = [...items];
-        newItems[selectedIndex] = { ...newItems[selectedIndex], type: types[prevIndex] };
-        onUpdate(newItems);
+        const currentItem = items[selectedIndex];
+        if (currentItem) {
+          const currentType = currentItem.type;
+          const currentIndex = types.indexOf(currentType);
+          const prevIndex = currentIndex === 0 ? types.length - 1 : currentIndex - 1;
+          const newItems = [...items];
+          const prevType = types[prevIndex];
+          if (prevType) {
+            newItems[selectedIndex] = { ...currentItem, type: prevType };
+            onUpdate(newItems);
+          }
+        }
       } else if (key.rightArrow && items.length > 0) {
         const types = [
           "model",
@@ -336,12 +354,18 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
           "context-length",
           "context-percentage"
         ];
-        const currentType = items[selectedIndex].type;
-        const currentIndex = types.indexOf(currentType);
-        const nextIndex = (currentIndex + 1) % types.length;
-        const newItems = [...items];
-        newItems[selectedIndex] = { ...newItems[selectedIndex], type: types[nextIndex] };
-        onUpdate(newItems);
+        const currentItem = items[selectedIndex];
+        if (currentItem) {
+          const currentType = currentItem.type;
+          const currentIndex = types.indexOf(currentType);
+          const nextIndex = (currentIndex + 1) % types.length;
+          const newItems = [...items];
+          const nextType = types[nextIndex];
+          if (nextType) {
+            newItems[selectedIndex] = { ...currentItem, type: nextType };
+            onUpdate(newItems);
+          }
+        }
       } else if (key.return && items.length > 0) {
         setMoveMode(true);
       } else if (input === "a") {
@@ -408,17 +432,17 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
         ]
       }, undefined, true, undefined, this),
       moveMode ? /* @__PURE__ */ jsxDEV(Text, {
-        dim: true,
+        dimColor: true,
         children: "↑↓ to move item, ESC or Enter to exit move mode"
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
-        dim: true,
+        dimColor: true,
         children: "↑↓ select, ←→ change type, Enter to move, (a)dd, (i)nsert, (d)elete, ESC back"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
         flexDirection: "column",
         children: items.length === 0 ? /* @__PURE__ */ jsxDEV(Text, {
-          dim: true,
+          dimColor: true,
           children: "No items. Press 'a' to add one."
         }, undefined, false, undefined, this) : items.map((item, index) => /* @__PURE__ */ jsxDEV(Box, {
           children: /* @__PURE__ */ jsxDEV(Text, {
@@ -451,20 +475,29 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
           bold: true,
           children: "Configure Colors"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV(Text, {
-          dim: true,
+        /* @__PURE__ */ jsxDEV(Box, {
           marginTop: 1,
-          children: "No colorable items in the status line."
+          children: /* @__PURE__ */ jsxDEV(Text, {
+            dimColor: true,
+            children: "No colorable items in the status line."
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV(Text, {
-          dim: true,
+          dimColor: true,
           children: "Add a Model or Git Branch item first."
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV(Text, {
+        /* @__PURE__ */ jsxDEV(Box, {
           marginTop: 1,
-          children: "Press any key to go back..."
+          children: /* @__PURE__ */ jsxDEV(Text, {
+            children: "Press any key to go back..."
+          }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        useInput(() => onBack())
+        (() => {
+          useInput(() => {
+            onBack();
+          });
+          return null;
+        })()
       ]
     }, undefined, true, undefined, this);
   }
@@ -553,20 +586,22 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
         children: "Configure Colors"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Text, {
-        dim: true,
+        dimColor: true,
         children: "↑↓ to select item, Enter to cycle color, ESC to go back"
       }, undefined, false, undefined, this),
-      selectedItem && /* @__PURE__ */ jsxDEV(Text, {
+      selectedItem && /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
-        children: [
-          "Current color (",
-          colorNumber,
-          "/",
-          colors.length,
-          "): ",
-          colorDisplay
-        ]
-      }, undefined, true, undefined, this),
+        children: /* @__PURE__ */ jsxDEV(Text, {
+          children: [
+            "Current color (",
+            colorNumber,
+            "/",
+            colors.length,
+            "): ",
+            colorDisplay
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
         children: /* @__PURE__ */ jsxDEV(SelectInput, {
@@ -633,12 +668,12 @@ var App = () => {
     } else {
       const existing = await getExistingStatusLine();
       let message;
-      if (existing && existing !== "npx ccstatusline") {
+      if (existing && existing !== "npx -y ccstatusline") {
         message = `This will modify ~/.claude/settings.json
 
 A status line is already configured: "${existing}"
-Replace it with ccstatusline?`;
-      } else if (existing === "npx ccstatusline") {
+Replace it with npx -y ccstatusline?`;
+      } else if (existing === "npx -y ccstatusline") {
         message = `ccstatusline is already installed in ~/.claude/settings.json
 Reinstall it?`;
       } else {
@@ -697,7 +732,7 @@ Continue?`;
       /* @__PURE__ */ jsxDEV(Box, {
         marginBottom: 1,
         children: /* @__PURE__ */ jsxDEV(Text, {
-          dim: true,
+          dimColor: true,
           children: "Preview:"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
@@ -877,7 +912,8 @@ async function renderStatusLine(data) {
         }
         break;
       case "separator":
-        if (elements.length > 0 && elements[elements.length - 1].type !== "separator") {
+        const lastElement = elements[elements.length - 1];
+        if (elements.length > 0 && lastElement && lastElement.type !== "separator") {
           const sepColor = chalk2[settings.colors.separator] || chalk2.dim;
           elements.push({ content: sepColor(" | "), type: "separator" });
         }
@@ -913,7 +949,10 @@ async function renderStatusLine(data) {
     const extraSpace = flexCount > 0 ? totalSpace % flexCount : 0;
     statusLine = "";
     for (let i = 0;i < parts.length; i++) {
-      statusLine += parts[i].join("");
+      const part = parts[i];
+      if (part) {
+        statusLine += part.join("");
+      }
       if (i < parts.length - 1) {
         const spaces = spacePerFlex + (i < extraSpace ? 1 : 0);
         statusLine += " ".repeat(spaces);
@@ -952,7 +991,7 @@ async function main() {
       process.exit(1);
     }
   } else {
-    await runTUI();
+    runTUI();
   }
 }
 main();

package/package.json

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