ccstatusline 1.0.0

package/dist/ccstatusline.js

@@ -0,0 +1,958 @@
+#!/usr/bin/env node
+
+// src/ccstatusline.ts
+import chalk2 from "chalk";
+import { execSync } from "child_process";
+
+// src/tui.tsx
+import { useState, useEffect } from "react";
+import { render, Box, Text, useInput, useApp } from "ink";
+import SelectInput from "ink-select-input";
+import chalk from "chalk";
+
+// src/config.ts
+import * as fs from "fs";
+import * as path from "path";
+import * as os from "os";
+import { promisify } from "util";
+var readFile2 = fs.promises?.readFile || promisify(fs.readFile);
+var writeFile2 = fs.promises?.writeFile || promisify(fs.writeFile);
+var mkdir2 = fs.promises?.mkdir || promisify(fs.mkdir);
+var CONFIG_DIR = path.join(os.homedir(), ".config", "ccstatusline");
+var SETTINGS_PATH = path.join(CONFIG_DIR, "settings.json");
+var DEFAULT_SETTINGS = {
+  items: [
+    { id: "1", type: "model", color: "cyan" },
+    { id: "2", type: "separator" },
+    { id: "3", type: "git-branch", color: "magenta" }
+  ],
+  colors: {
+    model: "cyan",
+    gitBranch: "magenta",
+    separator: "dim"
+  }
+};
+async function loadSettings() {
+  try {
+    if (!fs.existsSync(SETTINGS_PATH)) {
+      return DEFAULT_SETTINGS;
+    }
+    const content = await readFile2(SETTINGS_PATH, "utf-8");
+    const loaded = JSON.parse(content);
+    if (loaded.elements || loaded.layout) {
+      return migrateOldSettings(loaded);
+    }
+    return { ...DEFAULT_SETTINGS, ...loaded };
+  } catch {
+    return DEFAULT_SETTINGS;
+  }
+}
+function migrateOldSettings(old) {
+  const items = [];
+  let id = 1;
+  if (old.elements?.model) {
+    items.push({ id: String(id++), type: "model", color: old.colors?.model });
+  }
+  if (items.length > 0 && old.elements?.gitBranch) {
+    items.push({ id: String(id++), type: "separator" });
+  }
+  if (old.elements?.gitBranch) {
+    items.push({ id: String(id++), type: "git-branch", color: old.colors?.gitBranch });
+  }
+  if (old.layout?.expandingSeparators) {
+    items.forEach((item) => {
+      if (item.type === "separator") {
+        item.type = "flex-separator";
+      }
+    });
+  }
+  return {
+    items,
+    colors: old.colors || DEFAULT_SETTINGS.colors
+  };
+}
+async function saveSettings(settings) {
+  await mkdir2(CONFIG_DIR, { recursive: true });
+  await writeFile2(SETTINGS_PATH, JSON.stringify(settings, null, 2), "utf-8");
+}
+
+// src/claude-settings.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+import * as os2 from "os";
+import { promisify as promisify2 } from "util";
+var readFile4 = fs2.promises?.readFile || promisify2(fs2.readFile);
+var writeFile4 = fs2.promises?.writeFile || promisify2(fs2.writeFile);
+var mkdir4 = fs2.promises?.mkdir || promisify2(fs2.mkdir);
+var CLAUDE_SETTINGS_PATH = path2.join(os2.homedir(), ".claude", "settings.json");
+async function loadClaudeSettings() {
+  try {
+    if (!fs2.existsSync(CLAUDE_SETTINGS_PATH)) {
+      return {};
+    }
+    const content = await readFile4(CLAUDE_SETTINGS_PATH, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return {};
+  }
+}
+async function saveClaudeSettings(settings) {
+  const dir = path2.dirname(CLAUDE_SETTINGS_PATH);
+  await mkdir4(dir, { recursive: true });
+  await writeFile4(CLAUDE_SETTINGS_PATH, JSON.stringify(settings, null, 2), "utf-8");
+}
+async function isInstalled() {
+  const settings = await loadClaudeSettings();
+  return settings.statusLine?.command === "npx ccstatusline";
+}
+async function installStatusLine() {
+  const settings = await loadClaudeSettings();
+  settings.statusLine = {
+    type: "command",
+    command: "npx ccstatusline",
+    padding: 1
+  };
+  await saveClaudeSettings(settings);
+}
+async function uninstallStatusLine() {
+  const settings = await loadClaudeSettings();
+  if (settings.statusLine) {
+    delete settings.statusLine;
+    await saveClaudeSettings(settings);
+  }
+}
+async function getExistingStatusLine() {
+  const settings = await loadClaudeSettings();
+  return settings.statusLine?.command || null;
+}
+
+// src/tui.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var StatusLinePreview = ({ items, terminalWidth }) => {
+  const width = 80;
+  const elements = [];
+  let hasFlexSeparator = false;
+  items.forEach((item) => {
+    switch (item.type) {
+      case "model":
+        const modelColor = chalk[item.color || "cyan"] || chalk.cyan;
+        elements.push(modelColor("Model: Claude"));
+        break;
+      case "git-branch":
+        const branchColor = chalk[item.color || "magenta"] || chalk.magenta;
+        elements.push(branchColor("⎇ main"));
+        break;
+      case "tokens-input":
+        const inputColor = chalk[item.color || "yellow"] || chalk.yellow;
+        elements.push(inputColor("In: 15.2k"));
+        break;
+      case "tokens-output":
+        const outputColor = chalk[item.color || "green"] || chalk.green;
+        elements.push(outputColor("Out: 3.4k"));
+        break;
+      case "tokens-cached":
+        const cachedColor = chalk[item.color || "blue"] || chalk.blue;
+        elements.push(cachedColor("Cached: 12k"));
+        break;
+      case "tokens-total":
+        const totalColor = chalk[item.color || "white"] || chalk.white;
+        elements.push(totalColor("Total: 30.6k"));
+        break;
+      case "context-length":
+        const ctxColor = chalk[item.color || "cyan"] || chalk.cyan;
+        elements.push(ctxColor("Ctx: 18.6k"));
+        break;
+      case "context-percentage":
+        const ctxPctColor = chalk[item.color || "cyan"] || chalk.cyan;
+        elements.push(ctxPctColor("Ctx: 9.3%"));
+        break;
+      case "separator":
+        elements.push(chalk.dim(" | "));
+        break;
+      case "flex-separator":
+        elements.push("FLEX");
+        hasFlexSeparator = true;
+        break;
+    }
+  });
+  let statusLine = "";
+  if (hasFlexSeparator) {
+    const parts = [[]];
+    let currentPart = 0;
+    for (let i = 0;i < items.length; i++) {
+      if (items[i].type === "flex-separator") {
+        currentPart++;
+        parts[currentPart] = [];
+      } else {
+        const element = elements[i];
+        if (element !== "FLEX") {
+          parts[currentPart].push(element);
+        }
+      }
+    }
+    const partLengths = parts.map((part) => {
+      const joined = part.join("");
+      return joined.replace(/\x1b\[[0-9;]*m/g, "").length;
+    });
+    const totalContentLength = partLengths.reduce((sum, len) => sum + len, 0);
+    const flexCount = parts.length - 1;
+    const totalSpace = Math.max(0, width - totalContentLength);
+    const spacePerFlex = flexCount > 0 ? Math.floor(totalSpace / flexCount) : 0;
+    const extraSpace = flexCount > 0 ? totalSpace % flexCount : 0;
+    statusLine = "";
+    for (let i = 0;i < parts.length; i++) {
+      statusLine += parts[i].join("");
+      if (i < parts.length - 1) {
+        const spaces = spacePerFlex + (i < extraSpace ? 1 : 0);
+        statusLine += " ".repeat(spaces);
+      }
+    }
+  } else {
+    statusLine = elements.filter((e) => e !== "FLEX").join("");
+  }
+  const boxWidth = Math.min(terminalWidth - 4, process.stdout.columns - 4 || 76);
+  const topLine = chalk.dim("╭" + "─".repeat(Math.max(0, boxWidth - 2)) + "╮");
+  const middleLine = chalk.dim("│") + " > " + " ".repeat(Math.max(0, boxWidth - 5)) + chalk.dim("│");
+  const bottomLine = chalk.dim("╰" + "─".repeat(Math.max(0, boxWidth - 2)) + "╯");
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        children: topLine
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        children: middleLine
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        children: bottomLine
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        children: statusLine
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ConfirmDialog = ({ message, onConfirm, onCancel }) => {
+  const items = [
+    { label: "✅ Yes", value: "yes" },
+    { label: "❌ No", value: "no" }
+  ];
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        children: message
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 1,
+        children: /* @__PURE__ */ jsxDEV(SelectInput, {
+          items,
+          onSelect: (item) => item.value === "yes" ? onConfirm() : onCancel()
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges }) => {
+  const items = [
+    { label: "\uD83D\uDCDD Edit Status Line Items", value: "items" },
+    { label: "\uD83C\uDFA8 Configure Colors", value: "colors" },
+    { label: isClaudeInstalled ? "\uD83D\uDDD1️  Uninstall from Claude Code" : "\uD83D\uDCE6 Install to Claude Code", value: "install" }
+  ];
+  if (hasChanges) {
+    items.push({ label: "\uD83D\uDCBE Save & Exit", value: "save" }, { label: "❌ Exit without saving", value: "exit" });
+  } else {
+    items.push({ label: "\uD83D\uDEAA Exit", value: "exit" });
+  }
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        bold: true,
+        children: "Main Menu"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 1,
+        children: /* @__PURE__ */ jsxDEV(SelectInput, {
+          items,
+          onSelect: (item) => onSelect(item.value)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ItemsEditor = ({ items, onUpdate, onBack }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [moveMode, setMoveMode] = useState(false);
+  useInput((input, key) => {
+    if (moveMode) {
+      if (key.upArrow && selectedIndex > 0) {
+        const newItems = [...items];
+        [newItems[selectedIndex], newItems[selectedIndex - 1]] = [newItems[selectedIndex - 1], newItems[selectedIndex]];
+        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]];
+        onUpdate(newItems);
+        setSelectedIndex(selectedIndex + 1);
+      } else if (key.escape || key.return) {
+        setMoveMode(false);
+      }
+    } else {
+      if (key.upArrow) {
+        setSelectedIndex(Math.max(0, selectedIndex - 1));
+      } else if (key.downArrow) {
+        setSelectedIndex(Math.min(items.length - 1, selectedIndex + 1));
+      } else if (key.leftArrow && items.length > 0) {
+        const types = [
+          "model",
+          "git-branch",
+          "separator",
+          "flex-separator",
+          "tokens-input",
+          "tokens-output",
+          "tokens-cached",
+          "tokens-total",
+          "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);
+      } else if (key.rightArrow && items.length > 0) {
+        const types = [
+          "model",
+          "git-branch",
+          "separator",
+          "flex-separator",
+          "tokens-input",
+          "tokens-output",
+          "tokens-cached",
+          "tokens-total",
+          "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);
+      } else if (key.return && items.length > 0) {
+        setMoveMode(true);
+      } else if (input === "a") {
+        const newItem = {
+          id: Date.now().toString(),
+          type: "separator"
+        };
+        onUpdate([...items, newItem]);
+      } else if (input === "i") {
+        const newItem = {
+          id: Date.now().toString(),
+          type: "separator"
+        };
+        const newItems = [...items];
+        newItems.splice(selectedIndex + 1, 0, newItem);
+        onUpdate(newItems);
+        setSelectedIndex(selectedIndex + 1);
+      } else if (input === "d" && items.length > 0) {
+        const newItems = items.filter((_, i) => i !== selectedIndex);
+        onUpdate(newItems);
+        if (selectedIndex >= newItems.length && selectedIndex > 0) {
+          setSelectedIndex(selectedIndex - 1);
+        }
+      } else if (key.escape) {
+        onBack();
+      }
+    }
+  });
+  const getItemDisplay = (item) => {
+    switch (item.type) {
+      case "model":
+        return chalk.cyan("Model");
+      case "git-branch":
+        return chalk.magenta("Git Branch");
+      case "separator":
+        return chalk.dim("Separator |");
+      case "flex-separator":
+        return chalk.yellow("Flex Separator ─────");
+      case "tokens-input":
+        return chalk.yellow("Tokens Input");
+      case "tokens-output":
+        return chalk.green("Tokens Output");
+      case "tokens-cached":
+        return chalk.blue("Tokens Cached");
+      case "tokens-total":
+        return chalk.white("Tokens Total");
+      case "context-length":
+        return chalk.cyan("Context Length");
+      case "context-percentage":
+        return chalk.cyan("Context %");
+    }
+  };
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        bold: true,
+        children: [
+          "Edit Status Line Items ",
+          moveMode && /* @__PURE__ */ jsxDEV(Text, {
+            color: "yellow",
+            children: "[MOVE MODE]"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      moveMode ? /* @__PURE__ */ jsxDEV(Text, {
+        dim: true,
+        children: "↑↓ to move item, ESC or Enter to exit move mode"
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
+        dim: 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,
+          children: "No items. Press 'a' to add one."
+        }, undefined, false, undefined, this) : items.map((item, index) => /* @__PURE__ */ jsxDEV(Box, {
+          children: /* @__PURE__ */ jsxDEV(Text, {
+            color: index === selectedIndex ? moveMode ? "yellow" : "green" : undefined,
+            children: [
+              index === selectedIndex ? moveMode ? "◆ " : "▶ " : "  ",
+              index + 1,
+              ". ",
+              getItemDisplay(item)
+            ]
+          }, undefined, true, undefined, this)
+        }, item.id, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var ColorMenu = ({ items, onUpdate, onBack }) => {
+  const colorableItems = items.filter((item) => ["model", "git-branch", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage"].includes(item.type));
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+    }
+  });
+  if (colorableItems.length === 0) {
+    return /* @__PURE__ */ jsxDEV(Box, {
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ jsxDEV(Text, {
+          bold: true,
+          children: "Configure Colors"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Text, {
+          dim: true,
+          marginTop: 1,
+          children: "No colorable items in the status line."
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Text, {
+          dim: true,
+          children: "Add a Model or Git Branch item first."
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Text, {
+          marginTop: 1,
+          children: "Press any key to go back..."
+        }, undefined, false, undefined, this),
+        useInput(() => onBack())
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const getItemLabel = (item) => {
+    switch (item.type) {
+      case "model":
+        return "Model";
+      case "git-branch":
+        return "Git Branch";
+      case "tokens-input":
+        return "Tokens Input";
+      case "tokens-output":
+        return "Tokens Output";
+      case "tokens-cached":
+        return "Tokens Cached";
+      case "tokens-total":
+        return "Tokens Total";
+      case "context-length":
+        return "Context Length";
+      case "context-percentage":
+        return "Context Percentage";
+      default:
+        return item.type;
+    }
+  };
+  const menuItems = colorableItems.map((item, index) => {
+    const color = item.color || "white";
+    const colorFunc = chalk[color] || chalk.white;
+    return {
+      label: colorFunc(`${getItemLabel(item)} #${index + 1}`),
+      value: item.id
+    };
+  });
+  menuItems.push({ label: "← Back", value: "back" });
+  const handleSelect = (selected) => {
+    if (selected.value === "back") {
+      onBack();
+    } else {
+      const newItems = items.map((item) => {
+        if (item.id === selected.value) {
+          const currentColorIndex = colors.indexOf(item.color || "white");
+          const nextColor = colors[(currentColorIndex + 1) % colors.length];
+          return { ...item, color: nextColor };
+        }
+        return item;
+      });
+      onUpdate(newItems);
+    }
+  };
+  const handleHighlight = (item) => {
+    if (item.value !== "back") {
+      const itemIndex = colorableItems.findIndex((i) => i.id === item.value);
+      if (itemIndex !== -1) {
+        setSelectedIndex(itemIndex);
+      }
+    }
+  };
+  const colors = [
+    "black",
+    "red",
+    "green",
+    "yellow",
+    "blue",
+    "magenta",
+    "cyan",
+    "white",
+    "gray",
+    "redBright",
+    "greenBright",
+    "yellowBright",
+    "blueBright",
+    "magentaBright",
+    "cyanBright",
+    "whiteBright"
+  ];
+  const selectedItem = selectedIndex < colorableItems.length ? colorableItems[selectedIndex] : null;
+  const currentColor = selectedItem ? selectedItem.color || "white" : "white";
+  const colorIndex = colors.indexOf(currentColor);
+  const colorNumber = colorIndex === -1 ? 8 : colorIndex + 1;
+  const colorDisplay = chalk[currentColor] ? chalk[currentColor](currentColor) : chalk.white(currentColor);
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        bold: true,
+        children: "Configure Colors"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        dim: true,
+        children: "↑↓ to select item, Enter to cycle color, ESC to go back"
+      }, undefined, false, undefined, this),
+      selectedItem && /* @__PURE__ */ jsxDEV(Text, {
+        marginTop: 1,
+        children: [
+          "Current color (",
+          colorNumber,
+          "/",
+          colors.length,
+          "): ",
+          colorDisplay
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 1,
+        children: /* @__PURE__ */ jsxDEV(SelectInput, {
+          items: menuItems,
+          onSelect: handleSelect,
+          onHighlight: handleHighlight,
+          initialIndex: selectedIndex
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var App = () => {
+  const { exit } = useApp();
+  const [settings, setSettings] = useState(null);
+  const [originalSettings, setOriginalSettings] = useState(null);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [screen, setScreen] = useState("main");
+  const [confirmDialog, setConfirmDialog] = useState(null);
+  const [isClaudeInstalled, setIsClaudeInstalled] = useState(false);
+  const [terminalWidth, setTerminalWidth] = useState(process.stdout.columns || 80);
+  useEffect(() => {
+    loadSettings().then((loadedSettings) => {
+      setSettings(loadedSettings);
+      setOriginalSettings(JSON.parse(JSON.stringify(loadedSettings)));
+    });
+    isInstalled().then(setIsClaudeInstalled);
+    const handleResize = () => {
+      setTerminalWidth(process.stdout.columns || 80);
+    };
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, []);
+  useEffect(() => {
+    if (settings && originalSettings) {
+      const hasAnyChanges = JSON.stringify(settings) !== JSON.stringify(originalSettings);
+      setHasChanges(hasAnyChanges);
+    }
+  }, [settings, originalSettings]);
+  useInput((input, key) => {
+    if (key.ctrl && input === "c") {
+      exit();
+    }
+  });
+  if (!settings) {
+    return /* @__PURE__ */ jsxDEV(Text, {
+      children: "Loading settings..."
+    }, undefined, false, undefined, this);
+  }
+  const handleInstallUninstall = async () => {
+    if (isClaudeInstalled) {
+      setConfirmDialog({
+        message: "This will remove ccstatusline from ~/.claude/settings.json. Continue?",
+        action: async () => {
+          await uninstallStatusLine();
+          setIsClaudeInstalled(false);
+          setScreen("main");
+          setConfirmDialog(null);
+        }
+      });
+      setScreen("confirm");
+    } else {
+      const existing = await getExistingStatusLine();
+      let message;
+      if (existing && existing !== "npx ccstatusline") {
+        message = `This will modify ~/.claude/settings.json
+
+A status line is already configured: "${existing}"
+Replace it with ccstatusline?`;
+      } else if (existing === "npx ccstatusline") {
+        message = `ccstatusline is already installed in ~/.claude/settings.json
+Reinstall it?`;
+      } else {
+        message = `This will modify ~/.claude/settings.json to add ccstatusline.
+Continue?`;
+      }
+      setConfirmDialog({
+        message,
+        action: async () => {
+          await installStatusLine();
+          setIsClaudeInstalled(true);
+          setScreen("main");
+          setConfirmDialog(null);
+        }
+      });
+      setScreen("confirm");
+    }
+  };
+  const handleMainMenuSelect = async (value) => {
+    switch (value) {
+      case "items":
+        setScreen("items");
+        break;
+      case "colors":
+        setScreen("colors");
+        break;
+      case "install":
+        await handleInstallUninstall();
+        break;
+      case "save":
+        await saveSettings(settings);
+        setOriginalSettings(JSON.parse(JSON.stringify(settings)));
+        setHasChanges(false);
+        exit();
+        break;
+      case "exit":
+        exit();
+        break;
+    }
+  };
+  const updateItems = (items) => {
+    setSettings({ ...settings, items });
+  };
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    padding: 1,
+    children: [
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsxDEV(Text, {
+          bold: true,
+          color: "cyan",
+          children: "\uD83C\uDFA8 CCStatusline Configuration"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsxDEV(Text, {
+          dim: true,
+          children: "Preview:"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(StatusLinePreview, {
+        items: settings.items,
+        terminalWidth
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 2,
+        children: [
+          screen === "main" && /* @__PURE__ */ jsxDEV(MainMenu, {
+            onSelect: handleMainMenuSelect,
+            isClaudeInstalled,
+            hasChanges
+          }, undefined, false, undefined, this),
+          screen === "items" && /* @__PURE__ */ jsxDEV(ItemsEditor, {
+            items: settings.items,
+            onUpdate: updateItems,
+            onBack: () => setScreen("main")
+          }, undefined, false, undefined, this),
+          screen === "colors" && /* @__PURE__ */ jsxDEV(ColorMenu, {
+            items: settings.items,
+            onUpdate: updateItems,
+            onBack: () => setScreen("main")
+          }, undefined, false, undefined, this),
+          screen === "confirm" && confirmDialog && /* @__PURE__ */ jsxDEV(ConfirmDialog, {
+            message: confirmDialog.message,
+            onConfirm: confirmDialog.action,
+            onCancel: () => {
+              setScreen("main");
+              setConfirmDialog(null);
+            }
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+function runTUI() {
+  render(/* @__PURE__ */ jsxDEV(App, {}, undefined, false, undefined, this));
+}
+
+// src/ccstatusline.ts
+import * as fs3 from "fs";
+import { promisify as promisify3 } from "util";
+var readFile6 = fs3.promises?.readFile || promisify3(fs3.readFile);
+chalk2.level = 3;
+async function readStdin() {
+  if (process.stdin.isTTY) {
+    return null;
+  }
+  const chunks = [];
+  try {
+    if (typeof Bun !== "undefined" && Bun.stdin) {
+      const decoder = new TextDecoder;
+      for await (const chunk of Bun.stdin.stream()) {
+        chunks.push(decoder.decode(chunk));
+      }
+    } else {
+      process.stdin.setEncoding("utf8");
+      for await (const chunk of process.stdin) {
+        chunks.push(chunk);
+      }
+    }
+    return chunks.join("");
+  } catch {
+    return null;
+  }
+}
+function getGitBranch() {
+  try {
+    const branch = execSync("git branch --show-current 2>/dev/null", {
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "ignore"]
+    }).trim();
+    return branch || null;
+  } catch {
+    return null;
+  }
+}
+async function getTokenMetrics(transcriptPath) {
+  try {
+    if (!fs3.existsSync(transcriptPath)) {
+      return { inputTokens: 0, outputTokens: 0, cachedTokens: 0, totalTokens: 0, contextLength: 0 };
+    }
+    const content = await readFile6(transcriptPath, "utf-8");
+    const lines = content.trim().split(`
+`);
+    let inputTokens = 0;
+    let outputTokens = 0;
+    let cachedTokens = 0;
+    for (const line of lines) {
+      try {
+        const data = JSON.parse(line);
+        if (data.message?.usage) {
+          inputTokens += data.message.usage.input_tokens || 0;
+          outputTokens += data.message.usage.output_tokens || 0;
+          cachedTokens += data.message.usage.cache_read_input_tokens || 0;
+          cachedTokens += data.message.usage.cache_creation_input_tokens || 0;
+        }
+      } catch {}
+    }
+    const totalTokens = inputTokens + outputTokens + cachedTokens;
+    const contextLength = inputTokens + outputTokens;
+    return { inputTokens, outputTokens, cachedTokens, totalTokens, contextLength };
+  } catch {
+    return { inputTokens: 0, outputTokens: 0, cachedTokens: 0, totalTokens: 0, contextLength: 0 };
+  }
+}
+async function renderStatusLine(data) {
+  const settings = await loadSettings();
+  const terminalWidth = 80;
+  const elements = [];
+  let hasFlexSeparator = false;
+  const hasTokenItems = settings.items.some((item) => ["tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage"].includes(item.type));
+  let tokenMetrics = null;
+  if (hasTokenItems && data.transcript_path) {
+    tokenMetrics = await getTokenMetrics(data.transcript_path);
+  }
+  const formatTokens = (count) => {
+    if (count >= 1e6)
+      return `${(count / 1e6).toFixed(1)}M`;
+    if (count >= 1000)
+      return `${(count / 1000).toFixed(1)}k`;
+    return count.toString();
+  };
+  for (const item of settings.items) {
+    switch (item.type) {
+      case "model":
+        if (data.model) {
+          const color = chalk2[item.color || settings.colors.model] || chalk2.cyan;
+          elements.push({ content: color(`Model: ${data.model.display_name}`), type: "model" });
+        }
+        break;
+      case "git-branch":
+        const branch = getGitBranch();
+        if (branch) {
+          const color = chalk2[item.color || settings.colors.gitBranch] || chalk2.magenta;
+          elements.push({ content: color(`⎇ ${branch}`), type: "git-branch" });
+        }
+        break;
+      case "tokens-input":
+        if (tokenMetrics) {
+          const color = chalk2[item.color || "yellow"] || chalk2.yellow;
+          elements.push({ content: color(`In: ${formatTokens(tokenMetrics.inputTokens)}`), type: "tokens-input" });
+        }
+        break;
+      case "tokens-output":
+        if (tokenMetrics) {
+          const color = chalk2[item.color || "green"] || chalk2.green;
+          elements.push({ content: color(`Out: ${formatTokens(tokenMetrics.outputTokens)}`), type: "tokens-output" });
+        }
+        break;
+      case "tokens-cached":
+        if (tokenMetrics) {
+          const color = chalk2[item.color || "blue"] || chalk2.blue;
+          elements.push({ content: color(`Cached: ${formatTokens(tokenMetrics.cachedTokens)}`), type: "tokens-cached" });
+        }
+        break;
+      case "tokens-total":
+        if (tokenMetrics) {
+          const color = chalk2[item.color || "white"] || chalk2.white;
+          elements.push({ content: color(`Total: ${formatTokens(tokenMetrics.totalTokens)}`), type: "tokens-total" });
+        }
+        break;
+      case "context-length":
+        if (tokenMetrics) {
+          const color = chalk2[item.color || "cyan"] || chalk2.cyan;
+          elements.push({ content: color(`Ctx: ${formatTokens(tokenMetrics.contextLength)}`), type: "context-length" });
+        }
+        break;
+      case "context-percentage":
+        if (tokenMetrics) {
+          const percentage = Math.min(100, tokenMetrics.contextLength / 200000 * 100);
+          const color = chalk2[item.color || "cyan"] || chalk2.cyan;
+          elements.push({ content: color(`Ctx: ${percentage.toFixed(1)}%`), type: "context-percentage" });
+        }
+        break;
+      case "separator":
+        if (elements.length > 0 && elements[elements.length - 1].type !== "separator") {
+          const sepColor = chalk2[settings.colors.separator] || chalk2.dim;
+          elements.push({ content: sepColor(" | "), type: "separator" });
+        }
+        break;
+      case "flex-separator":
+        elements.push({ content: "FLEX", type: "flex-separator" });
+        hasFlexSeparator = true;
+        break;
+    }
+  }
+  if (elements.length === 0)
+    return;
+  let statusLine = "";
+  if (hasFlexSeparator) {
+    const parts = [[]];
+    let currentPart = 0;
+    for (const elem of elements) {
+      if (elem.type === "flex-separator") {
+        currentPart++;
+        parts[currentPart] = [];
+      } else {
+        parts[currentPart].push(elem.content);
+      }
+    }
+    const partLengths = parts.map((part) => {
+      const joined = part.join("");
+      return joined.replace(/\x1b\[[0-9;]*m/g, "").length;
+    });
+    const totalContentLength = partLengths.reduce((sum, len) => sum + len, 0);
+    const flexCount = parts.length - 1;
+    const totalSpace = Math.max(0, terminalWidth - totalContentLength);
+    const spacePerFlex = flexCount > 0 ? Math.floor(totalSpace / flexCount) : 0;
+    const extraSpace = flexCount > 0 ? totalSpace % flexCount : 0;
+    statusLine = "";
+    for (let i = 0;i < parts.length; i++) {
+      statusLine += parts[i].join("");
+      if (i < parts.length - 1) {
+        const spaces = spacePerFlex + (i < extraSpace ? 1 : 0);
+        statusLine += " ".repeat(spaces);
+      }
+    }
+  } else {
+    statusLine = elements.map((e) => e.content).join("");
+    const contentLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
+    const remainingSpace = terminalWidth - contentLength;
+    if (remainingSpace > 0) {
+      statusLine = statusLine + " ".repeat(remainingSpace);
+    }
+  }
+  const plainLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
+  if (plainLength > 80) {
+    const visibleText = statusLine.replace(/\x1b\[[0-9;]*m/g, "");
+    const truncated = visibleText.substring(0, 77) + "...";
+    console.log(truncated);
+  } else {
+    console.log(statusLine);
+  }
+}
+async function main() {
+  if (!process.stdin.isTTY) {
+    const input = await readStdin();
+    if (input && input.trim() !== "") {
+      try {
+        const data = JSON.parse(input);
+        await renderStatusLine(data);
+      } catch (error) {
+        console.error("Error parsing JSON:", error);
+        process.exit(1);
+      }
+    } else {
+      console.error("No input received");
+      process.exit(1);
+    }
+  } else {
+    await runTUI();
+  }
+}
+main();

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "ccstatusline",
+  "version": "1.0.0",
+  "description": "A customizable status line formatter for Claude Code CLI",
+  "module": "src/ccstatusline.ts",
+  "type": "module",
+  "bin": {
+    "ccstatusline": "dist/ccstatusline.js"
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "start": "bun run src/ccstatusline.ts",
+    "build": "bun build src/ccstatusline.ts --target=node --outfile=dist/ccstatusline.js --packages=external --target-version=14",
+    "prepublishOnly": "bun run build"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@types/react": "^19.1.9",
+    "chalk": "^5.5.0",
+    "ink": "^6.1.0",
+    "ink-select-input": "^6.2.0",
+    "ink-text-input": "^6.0.0",
+    "react": "^19.1.1"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "cli",
+    "status-line",
+    "terminal"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sirmalloc/ccstatusline.git"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}