ccstatusline 1.0.9 → 1.0.11

package/README.md

@@ -31,9 +31,12 @@ npx ccstatusline@latest
 ```
 
 This launches a TUI where you can:
-- Add/remove status line items
-- Reorder items with arrow keys
+- Configure up to 3 separate status lines
+- Add/remove/reorder status line items
 - Customize colors for each element
+- Configure flex separator behavior
+- Edit custom text items
+- Install/uninstall to Claude Code settings
 - Preview your status line in real-time
 
 Your settings are saved to `~/.config/ccstatusline/settings.json`.
@@ -48,6 +51,7 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 - **Git Branch** - Displays current git branch name
 - **Git Changes** - Shows uncommitted insertions/deletions (e.g., "+42,-10")
 - **Session Clock** - Shows elapsed time since session start (e.g., "2hr 15m")
+- **Version** - Shows Claude Code version
 - **Tokens Input** - Shows input tokens used
 - **Tokens Output** - Shows output tokens used
 - **Tokens Cached** - Shows cached tokens used
@@ -55,55 +59,51 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 - **Context Length** - Shows current context length in tokens
 - **Context Percentage** - Shows percentage of context limit used
 - **Terminal Width** - Shows detected terminal width (for debugging)
-- **Separator** - Visual divider between items (|)
+- **Custom Text** - Add your own custom text to the status line
+- **Separator** - Visual divider between items (customizable: |, -, comma, space)
 - **Flex Separator** - Expands to fill available space
 
-## Configuration File
-
-The configuration file at `~/.config/ccstatusline/settings.json` looks like:
-
-```json
-{
-  "lines": [
-    [
-      {
-        "id": "1",
-        "type": "model",
-        "color": "cyan"
-      },
-      {
-        "id": "2",
-        "type": "separator"
-      },
-      {
-        "id": "3",
-        "type": "git-branch",
-        "color": "magenta"
-      },
-      {
-        "id": "4",
-        "type": "separator"
-      },
-      {
-        "id": "5",
-        "type": "session-clock",
-        "color": "blue"
-      }
-    ]
-  ],
-  "colors": {
-    "model": "cyan",
-    "gitBranch": "magenta",
-    "separator": "dim"
-  }
-}
-```
-
-### Color Options
-
-Available colors:
-- `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `gray`
-- `brightBlack`, `brightRed`, `brightGreen`, `brightYellow`, `brightBlue`, `brightMagenta`, `brightCyan`, `brightWhite`
+### TUI Controls
+
+#### Main Menu
+- **↑↓** - Navigate menu items
+- **Enter** - Select item
+- **Ctrl+C** - Exit
+
+#### Line Editor
+- **↑↓** - Select item
+- **←→** - Change item type
+- **Enter** - Enter move mode (reorder items)
+- **a** - Add item at end
+- **i** - Insert item before selected
+- **d** - Delete selected item
+- **c** - Clear entire line
+- **r** - Toggle raw value mode (no labels)
+- **e** - Edit custom text (for custom-text items)
+- **Space** - Change separator character (for separator items)
+- **ESC** - Go back
+
+#### Color Configuration
+- **↑↓** - Select item
+- **Enter** - Cycle through colors
+- **ESC** - Go back
+
+#### Flex Options
+Configure how flex separators calculate available width:
+- **Full width always** - Uses full terminal width (may wrap with auto-compact message)
+- **Full width minus 40** - Leaves space for auto-compact message (default)
+- **Full width until compact** - Switches based on context percentage threshold
+
+### 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
+
+When terminal width is detected, status lines automatically truncate with ellipsis (...) if they exceed the available width, preventing line wrapping.
 
 ## Development
 

package/dist/ccstatusline.js

@@ -37,7 +37,9 @@ var DEFAULT_SETTINGS = {
     model: "cyan",
     gitBranch: "magenta",
     separator: "dim"
-  }
+  },
+  flexMode: "full-minus-40",
+  compactThreshold: 75
 };
 async function loadSettings() {
   try {
@@ -92,7 +94,9 @@ function migrateOldSettings(old) {
   }
   return {
     lines: [items],
-    colors: old.colors || DEFAULT_SETTINGS.colors
+    colors: old.colors || DEFAULT_SETTINGS.colors,
+    flexMode: DEFAULT_SETTINGS.flexMode,
+    compactThreshold: DEFAULT_SETTINGS.compactThreshold
   };
 }
 async function saveSettings(settings) {
@@ -151,7 +155,19 @@ async function getExistingStatusLine() {
 }
 
 // src/tui.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
+import * as fs3 from "fs";
+import * as path3 from "path";
+var __dirname = "/Users/sirmalloc/Desktop/ccstatusline/src";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function getPackageVersion() {
+  try {
+    const packageJsonPath = path3.join(__dirname, "..", "package.json");
+    const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf-8"));
+    return packageJson.version || "";
+  } catch {
+    return "";
+  }
+}
 function canDetectTerminalWidth() {
   try {
     const tty = execSync("ps -o tty= -p $(ps -o ppid= -p $$)", {
@@ -182,15 +198,27 @@ function canDetectTerminalWidth() {
     return false;
   }
 }
-var renderSingleLine = (items, terminalWidth, widthDetectionAvailable) => {
-  const width = widthDetectionAvailable ? terminalWidth : null;
+var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings) => {
+  let effectiveWidth = null;
+  if (widthDetectionAvailable && terminalWidth) {
+    const flexMode = settings?.flexMode || "full-minus-40";
+    if (flexMode === "full") {
+      effectiveWidth = terminalWidth - 2;
+    } else if (flexMode === "full-minus-40") {
+      effectiveWidth = terminalWidth - 40;
+    } else if (flexMode === "full-until-compact") {
+      effectiveWidth = terminalWidth - 2;
+    }
+  }
+  const width = terminalWidth;
+  const flexWidth = effectiveWidth;
   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"));
+        elements.push(modelColor(item.rawValue ? "Claude" : "Model: Claude"));
         break;
       case "git-branch":
         const branchColor = chalk[item.color || "magenta"] || chalk.magenta;
@@ -202,54 +230,66 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable) => {
         break;
       case "tokens-input":
         const inputColor = chalk[item.color || "yellow"] || chalk.yellow;
-        elements.push(inputColor("In: 15.2k"));
+        elements.push(inputColor(item.rawValue ? "15.2k" : "In: 15.2k"));
         break;
       case "tokens-output":
         const outputColor = chalk[item.color || "green"] || chalk.green;
-        elements.push(outputColor("Out: 3.4k"));
+        elements.push(outputColor(item.rawValue ? "3.4k" : "Out: 3.4k"));
         break;
       case "tokens-cached":
         const cachedColor = chalk[item.color || "blue"] || chalk.blue;
-        elements.push(cachedColor("Cached: 12k"));
+        elements.push(cachedColor(item.rawValue ? "12k" : "Cached: 12k"));
         break;
       case "tokens-total":
         const totalColor = chalk[item.color || "white"] || chalk.white;
-        elements.push(totalColor("Total: 30.6k"));
+        elements.push(totalColor(item.rawValue ? "30.6k" : "Total: 30.6k"));
         break;
       case "context-length":
         const ctxColor = chalk[item.color || "cyan"] || chalk.cyan;
-        elements.push(ctxColor("Ctx: 18.6k"));
+        elements.push(ctxColor(item.rawValue ? "18.6k" : "Ctx: 18.6k"));
         break;
       case "context-percentage":
         const ctxPctColor = chalk[item.color || "cyan"] || chalk.cyan;
-        elements.push(ctxPctColor("Ctx: 9.3%"));
+        elements.push(ctxPctColor(item.rawValue ? "9.3%" : "Ctx: 9.3%"));
         break;
       case "session-clock":
         const sessionColor = chalk[item.color || "blue"] || chalk.blue;
-        elements.push(sessionColor("Session: 2hr 15m"));
+        elements.push(sessionColor(item.rawValue ? "2hr 15m" : "Session: 2hr 15m"));
         break;
       case "version":
         const versionColor = chalk[item.color || "green"] || chalk.green;
-        elements.push(versionColor("Version: 1.0.72"));
+        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 detectedWidth = canDetectTerminalWidth() ? terminalWidth : "??";
-        elements.push(termColor(`Term: ${detectedWidth}`));
+        elements.push(termColor(item.rawValue ? `${detectedWidth}` : `Term: ${detectedWidth}`));
         break;
       case "separator":
         const sepChar = item.character || "|";
-        const sepContent = sepChar === "," ? chalk.dim(`${sepChar} `) : chalk.dim(` ${sepChar} `);
+        let sepContent;
+        if (sepChar === ",") {
+          sepContent = chalk.dim(`${sepChar} `);
+        } else if (sepChar === " ") {
+          sepContent = chalk.dim(" ");
+        } else {
+          sepContent = chalk.dim(` ${sepChar} `);
+        }
         elements.push(sepContent);
         break;
       case "flex-separator":
         elements.push("FLEX");
         hasFlexSeparator = true;
         break;
+      case "custom-text":
+        const customTextColor = chalk[item.color || "white"] || chalk.white;
+        const customText = item.customText || "";
+        elements.push(customTextColor(customText));
+        break;
     }
   });
   let statusLine = "";
-  if (hasFlexSeparator && width) {
+  if (hasFlexSeparator && flexWidth) {
     const parts = [[]];
     let currentPart = 0;
     for (let i = 0;i < items.length; i++) {
@@ -270,7 +310,7 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable) => {
     });
     const totalContentLength = partLengths.reduce((sum, len) => sum + len, 0);
     const flexCount = parts.length - 1;
-    const totalSpace = Math.max(0, width - totalContentLength);
+    const totalSpace = Math.max(0, flexWidth - totalContentLength);
     const spacePerFlex = flexCount > 0 ? Math.floor(totalSpace / flexCount) : 0;
     const extraSpace = flexCount > 0 ? totalSpace % flexCount : 0;
     statusLine = "";
@@ -287,15 +327,48 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable) => {
   } else {
     statusLine = elements.map((e) => e === "FLEX" ? chalk.dim(" | ") : e).join("");
   }
+  if (width && width > 0) {
+    const plainLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
+    if (plainLength > width) {
+      let truncated = "";
+      let currentLength = 0;
+      let inAnsiCode = false;
+      let ansiBuffer = "";
+      const targetLength = width - 5;
+      for (let i = 0;i < statusLine.length; i++) {
+        const char = statusLine[i];
+        if (char === "\x1B") {
+          inAnsiCode = true;
+          ansiBuffer = char;
+        } else if (inAnsiCode) {
+          ansiBuffer += char;
+          if (char === "m") {
+            truncated += ansiBuffer;
+            inAnsiCode = false;
+            ansiBuffer = "";
+          }
+        } else {
+          if (currentLength < targetLength) {
+            truncated += char;
+            currentLength++;
+          } else {
+            break;
+          }
+        }
+      }
+      statusLine = truncated + "...";
+    }
+  }
   return statusLine;
 };
-var StatusLinePreview = ({ lines, terminalWidth }) => {
+var StatusLinePreview = ({ lines, terminalWidth, settings }) => {
   const widthDetectionAvailable = canDetectTerminalWidth();
   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)) + "╯");
-  const renderedLines = lines.map((lineItems) => lineItems.length > 0 ? renderSingleLine(lineItems, boxWidth, widthDetectionAvailable) : "").filter((line) => line !== "");
+  const availableWidth = boxWidth - 2;
+  const renderedLines = lines.map((lineItems) => lineItems.length > 0 ? renderSingleLine(lineItems, availableWidth, widthDetectionAvailable, settings) : "").filter((line) => line !== "");
   return /* @__PURE__ */ jsxDEV(Box, {
     flexDirection: "column",
     children: [
@@ -309,8 +382,11 @@ var StatusLinePreview = ({ lines, terminalWidth }) => {
         children: bottomLine
       }, undefined, false, undefined, this),
       renderedLines.map((line, index) => /* @__PURE__ */ jsxDEV(Text, {
-        children: line
-      }, index, false, undefined, this))
+        children: [
+          "  ",
+          line
+        ]
+      }, index, true, undefined, this))
     ]
   }, undefined, true, undefined, this);
 };
@@ -383,6 +459,7 @@ var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges }) => {
   const items = [
     { label: "\uD83D\uDCDD Edit Lines", value: "lines" },
     { label: "\uD83C\uDFA8 Configure Colors", value: "colors" },
+    { label: "⚡ Flex Options", value: "flex" },
     { label: isClaudeInstalled ? "\uD83D\uDDD1️  Uninstall from Claude Code" : "\uD83D\uDCE6 Install to Claude Code", value: "install" }
   ];
   if (hasChanges) {
@@ -410,9 +487,29 @@ var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges }) => {
 var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [moveMode, setMoveMode] = useState(false);
+  const [editingText, setEditingText] = useState(false);
+  const [textInput, setTextInput] = useState("");
   const separatorChars = ["|", "-", ",", " "];
   useInput((input, key) => {
-    if (moveMode) {
+    if (editingText) {
+      if (key.return) {
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2) {
+          const newItems = [...items];
+          newItems[selectedIndex] = { ...currentItem2, customText: textInput };
+          onUpdate(newItems);
+        }
+        setEditingText(false);
+        setTextInput("");
+      } else if (key.escape) {
+        setEditingText(false);
+        setTextInput("");
+      } else if (key.backspace || key.delete) {
+        setTextInput(textInput.slice(0, -1));
+      } else if (input && input.length === 1) {
+        setTextInput(textInput + input);
+      }
+    } else if (moveMode) {
       if (key.upArrow && selectedIndex > 0) {
         const newItems = [...items];
         const temp = newItems[selectedIndex];
@@ -454,17 +551,18 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
           "session-clock",
           "terminal-width",
           "version",
-          "flex-separator"
+          "flex-separator",
+          "custom-text"
         ];
-        const currentItem = items[selectedIndex];
-        if (currentItem) {
-          const currentType = currentItem.type;
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2) {
+          const currentType = currentItem2.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 };
+            newItems[selectedIndex] = { ...currentItem2, type: prevType };
             onUpdate(newItems);
           }
         }
@@ -483,17 +581,18 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
           "session-clock",
           "terminal-width",
           "version",
-          "flex-separator"
+          "flex-separator",
+          "custom-text"
         ];
-        const currentItem = items[selectedIndex];
-        if (currentItem) {
-          const currentType = currentItem.type;
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2) {
+          const currentType = currentItem2.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 };
+            newItems[selectedIndex] = { ...currentItem2, type: nextType };
             onUpdate(newItems);
           }
         }
@@ -513,9 +612,8 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
           type: "separator"
         };
         const newItems = [...items];
-        newItems.splice(selectedIndex + 1, 0, newItem);
+        newItems.splice(selectedIndex, 0, newItem);
         onUpdate(newItems);
-        setSelectedIndex(selectedIndex + 1);
       } else if (input === "d" && items.length > 0) {
         const newItems = items.filter((_, i) => i !== selectedIndex);
         onUpdate(newItems);
@@ -526,15 +624,28 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
         onUpdate([]);
         setSelectedIndex(0);
       } else if (input === " " && items.length > 0) {
-        const currentItem = items[selectedIndex];
-        if (currentItem && currentItem.type === "separator") {
-          const currentChar = currentItem.character || "|";
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2 && currentItem2.type === "separator") {
+          const currentChar = currentItem2.character || "|";
           const currentCharIndex = separatorChars.indexOf(currentChar);
           const nextChar = separatorChars[(currentCharIndex + 1) % separatorChars.length];
           const newItems = [...items];
-          newItems[selectedIndex] = { ...currentItem, character: nextChar };
+          newItems[selectedIndex] = { ...currentItem2, character: nextChar };
           onUpdate(newItems);
         }
+      } else if (input === "r" && items.length > 0) {
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2 && currentItem2.type !== "separator" && currentItem2.type !== "flex-separator" && currentItem2.type !== "custom-text") {
+          const newItems = [...items];
+          newItems[selectedIndex] = { ...currentItem2, rawValue: !currentItem2.rawValue };
+          onUpdate(newItems);
+        }
+      } else if (input === "e" && items.length > 0) {
+        const currentItem2 = items[selectedIndex];
+        if (currentItem2 && currentItem2.type === "custom-text") {
+          setTextInput(currentItem2.customText || "");
+          setEditingText(true);
+        }
       } else if (key.escape) {
         onBack();
       }
@@ -573,10 +684,30 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
         return chalk.dim("Terminal Width");
       case "version":
         return chalk.green("Version");
+      case "custom-text":
+        const text = item.customText || "Empty";
+        return chalk.white(`Custom Text (${text})`);
     }
   };
   const hasFlexSeparator = items.some((item) => item.type === "flex-separator");
   const widthDetectionAvailable = canDetectTerminalWidth();
+  const currentItem = items[selectedIndex];
+  const isSeparator = currentItem?.type === "separator";
+  const isFlexSeparator = currentItem?.type === "flex-separator";
+  const isCustomText = currentItem?.type === "custom-text";
+  const canToggleRaw = currentItem && !isSeparator && !isFlexSeparator && !isCustomText;
+  let helpText = "↑↓ select, ←→ change type";
+  if (isSeparator) {
+    helpText += ", Space edit separator";
+  }
+  if (isCustomText) {
+    helpText += ", (e)dit text";
+  }
+  helpText += ", Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line";
+  if (canToggleRaw) {
+    helpText += ", (r)aw value";
+  }
+  helpText += ", ESC back";
   return /* @__PURE__ */ jsxDEV(Box, {
     flexDirection: "column",
     children: [
@@ -592,12 +723,26 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      moveMode ? /* @__PURE__ */ jsxDEV(Text, {
+      editingText ? /* @__PURE__ */ jsxDEV(Box, {
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            children: [
+              "Enter custom text: ",
+              textInput
+            ]
+          }, 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"
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
         dimColor: true,
-        children: "↑↓ select, ←→ change type, Space edit separator, Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line, ESC back"
+        children: helpText
       }, undefined, false, undefined, this),
       hasFlexSeparator && !widthDetectionAvailable && /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
@@ -626,9 +771,9 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
               index + 1,
               ". ",
               getItemDisplay(item),
-              item.type === "separator" && index === selectedIndex && !moveMode && /* @__PURE__ */ jsxDEV(Text, {
+              item.rawValue && /* @__PURE__ */ jsxDEV(Text, {
                 dimColor: true,
-                children: " (Space to edit)"
+                children: " (raw value)"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
@@ -638,7 +783,7 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
   }, 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", "session-clock", "version"].includes(item.type));
+  const colorableItems = items.filter((item) => ["model", "git-branch", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "session-clock", "version", "custom-text"].includes(item.type));
   const [selectedIndex, setSelectedIndex] = useState(0);
   useInput((input, key) => {
     if (key.escape) {
@@ -703,6 +848,8 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
         return "Session Clock";
       case "version":
         return "Version";
+      case "custom-text":
+        return `Custom Text (${item.customText || "Empty"})`;
       default:
         return item.type;
     }
@@ -798,6 +945,174 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
     ]
   }, undefined, true, undefined, this);
 };
+var FlexOptions = ({ settings, onUpdate, onBack }) => {
+  const [selectedOption, setSelectedOption] = useState(settings.flexMode || "full-minus-40");
+  const [compactThreshold, setCompactThreshold] = useState(settings.compactThreshold || 75);
+  const [editingThreshold, setEditingThreshold] = useState(false);
+  const [thresholdInput, setThresholdInput] = useState(String(settings.compactThreshold || 75));
+  const [validationError, setValidationError] = useState(null);
+  const [highlightedOption, setHighlightedOption] = useState(settings.flexMode || "full-minus-40");
+  useInput((input, key) => {
+    if (editingThreshold) {
+      if (key.return) {
+        const value = parseInt(thresholdInput, 10);
+        if (isNaN(value)) {
+          setValidationError("Please enter a valid number");
+        } else if (value < 1 || value > 99) {
+          setValidationError(`Value must be between 1 and 99 (you entered ${value})`);
+        } else {
+          setCompactThreshold(value);
+          const updatedSettings = {
+            ...settings,
+            flexMode: selectedOption,
+            compactThreshold: value
+          };
+          onUpdate(updatedSettings);
+          setEditingThreshold(false);
+          setValidationError(null);
+        }
+      } else if (key.escape) {
+        setThresholdInput(String(compactThreshold));
+        setEditingThreshold(false);
+        setValidationError(null);
+      } else if (key.backspace || key.delete) {
+        setThresholdInput(thresholdInput.slice(0, -1));
+        setValidationError(null);
+      } else if (input && /\d/.test(input)) {
+        const newValue = thresholdInput + input;
+        if (newValue.length <= 2) {
+          setThresholdInput(newValue);
+          setValidationError(null);
+        }
+      }
+    } else {
+      if (key.escape) {
+        onBack();
+      }
+    }
+  });
+  const options = [
+    {
+      value: "full",
+      label: "Full width always",
+      description: `Uses the full terminal width minus 4 characters for terminal padding. If the auto-compact message appears, it may cause the line to wrap. This is due to a limitation where we cannot accurately detect the available width.
+
+NOTE: If /ide integration is enabled, it's not recommended to use this mode as stuff like opening a file will cause text to appear on the right of the terminal that will force the status line to wrap.`
+    },
+    {
+      value: "full-minus-40",
+      label: "Full width minus 40",
+      description: "Leaves a gap to the right of the status line to accommodate the auto-compact message. This prevents wrapping but may leave unused space. This limitation exists because we cannot detect when the message will appear."
+    },
+    {
+      value: "full-until-compact",
+      label: "Full width until compact",
+      description: `Dynamically adjusts width based on context usage. When context reaches ${compactThreshold}%, it switches to leaving space for the auto-compact message. This provides a balance but requires guessing when the message appears.
+
+NOTE: If /ide integration is enabled, it's not recommended to use this mode as stuff like opening a file will cause text to appear on the right of the terminal that will force the status line to wrap.`
+    }
+  ];
+  const handleSelect = (item) => {
+    const mode = item.value;
+    setSelectedOption(mode);
+    const updatedSettings = {
+      ...settings,
+      flexMode: mode,
+      compactThreshold
+    };
+    onUpdate(updatedSettings);
+    if (mode === "full-until-compact") {
+      setEditingThreshold(true);
+    }
+  };
+  const menuItems = options.map((opt) => ({
+    label: opt.label + (opt.value === selectedOption ? " ✓" : ""),
+    value: opt.value
+  }));
+  menuItems.push({ label: "← Back", value: "back" });
+  const currentOption = options.find((o) => o.value === highlightedOption);
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        bold: true,
+        children: "Flex Separator Width Options"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        dimColor: true,
+        children: "Select how flex separators calculate available width"
+      }, undefined, false, undefined, this),
+      editingThreshold ? /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 1,
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            children: [
+              "Enter compact threshold (1-99): ",
+              thresholdInput,
+              "%"
+            ]
+          }, undefined, true, undefined, this),
+          validationError ? /* @__PURE__ */ jsxDEV(Text, {
+            color: "red",
+            children: validationError
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
+            dimColor: true,
+            children: "Press Enter to confirm, ESC to cancel"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxDEV(Box, {
+            marginTop: 1,
+            children: /* @__PURE__ */ jsxDEV(SelectInput, {
+              items: menuItems,
+              initialIndex: options.findIndex((o) => o.value === selectedOption),
+              onHighlight: (item) => {
+                if (item.value !== "back") {
+                  setHighlightedOption(item.value);
+                }
+              },
+              onSelect: (item) => {
+                if (item.value === "back") {
+                  onBack();
+                } else {
+                  handleSelect(item);
+                }
+              }
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          currentOption && /* @__PURE__ */ jsxDEV(Box, {
+            marginTop: 1,
+            marginBottom: 1,
+            borderStyle: "round",
+            borderColor: "dim",
+            paddingX: 1,
+            children: /* @__PURE__ */ jsxDEV(Box, {
+              flexDirection: "column",
+              children: [
+                /* @__PURE__ */ jsxDEV(Text, {
+                  children: [
+                    /* @__PURE__ */ jsxDEV(Text, {
+                      color: "yellow",
+                      children: currentOption.label
+                    }, undefined, false, undefined, this),
+                    highlightedOption === "full-until-compact" && ` | Current threshold: ${compactThreshold}%`
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV(Text, {
+                  dimColor: true,
+                  wrap: "wrap",
+                  children: currentOption.description
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
 var App = () => {
   const { exit } = useApp();
   const [settings, setSettings] = useState(null);
@@ -891,6 +1206,9 @@ Continue?`;
       case "colors":
         setScreen("colors");
         break;
+      case "flex":
+        setScreen("flex");
+        break;
       case "install":
         await handleInstallUninstall();
         break;
@@ -923,8 +1241,11 @@ Continue?`;
         children: /* @__PURE__ */ jsxDEV(Text, {
           bold: true,
           color: "cyan",
-          children: "\uD83C\uDFA8 CCStatusline Configuration"
-        }, undefined, false, undefined, this)
+          children: [
+            "CCStatusline Configuration ",
+            getPackageVersion() && `v${getPackageVersion()}`
+          ]
+        }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Box, {
         marginBottom: 1,
@@ -935,7 +1256,8 @@ Continue?`;
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(StatusLinePreview, {
         lines: settings.lines || [[]],
-        terminalWidth
+        terminalWidth,
+        settings
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 2,
@@ -962,10 +1284,13 @@ Continue?`;
               const newLines = settings.lines || [[]];
               let flatIndex = 0;
               for (let lineIndex = 0;lineIndex < newLines.length; lineIndex++) {
-                for (let itemIndex = 0;itemIndex < newLines[lineIndex].length; itemIndex++) {
-                  if (flatIndex < items.length) {
-                    newLines[lineIndex][itemIndex] = items[flatIndex];
-                    flatIndex++;
+                const line = newLines[lineIndex];
+                if (line) {
+                  for (let itemIndex = 0;itemIndex < line.length; itemIndex++) {
+                    if (flatIndex < items.length && items[flatIndex]) {
+                      line[itemIndex] = items[flatIndex];
+                      flatIndex++;
+                    }
                   }
                 }
               }
@@ -973,6 +1298,13 @@ Continue?`;
             },
             onBack: () => setScreen("main")
           }, undefined, false, undefined, this),
+          screen === "flex" && /* @__PURE__ */ jsxDEV(FlexOptions, {
+            settings,
+            onUpdate: (updatedSettings) => {
+              setSettings(updatedSettings);
+            },
+            onBack: () => setScreen("main")
+          }, undefined, false, undefined, this),
           screen === "confirm" && confirmDialog && /* @__PURE__ */ jsxDEV(ConfirmDialog, {
             message: confirmDialog.message,
             onConfirm: confirmDialog.action,
@@ -987,13 +1319,14 @@ Continue?`;
   }, undefined, true, undefined, this);
 };
 function runTUI() {
+  process.stdout.write("\x1B[2J\x1B[H");
   render(/* @__PURE__ */ jsxDEV(App, {}, undefined, false, undefined, this));
 }
 
 // src/ccstatusline.ts
-import * as fs3 from "fs";
+import * as fs4 from "fs";
 import { promisify as promisify3 } from "util";
-var readFile6 = fs3.promises?.readFile || promisify3(fs3.readFile);
+var readFile6 = fs4.promises?.readFile || promisify3(fs4.readFile);
 chalk2.level = 3;
 async function readStdin() {
   if (process.stdin.isTTY) {
@@ -1083,9 +1416,6 @@ function getGitChanges() {
       totalInsertions += insertMatch?.[1] ? parseInt(insertMatch[1], 10) : 0;
       totalDeletions += deleteMatch?.[1] ? parseInt(deleteMatch[1], 10) : 0;
     }
-    if (totalInsertions === 0 && totalDeletions === 0) {
-      return null;
-    }
     return { insertions: totalInsertions, deletions: totalDeletions };
   } catch {
     return null;
@@ -1093,7 +1423,7 @@ function getGitChanges() {
 }
 async function getSessionDuration(transcriptPath) {
   try {
-    if (!fs3.existsSync(transcriptPath)) {
+    if (!fs4.existsSync(transcriptPath)) {
       return null;
     }
     const content = await readFile6(transcriptPath, "utf-8");
@@ -1145,7 +1475,7 @@ async function getSessionDuration(transcriptPath) {
 }
 async function getTokenMetrics(transcriptPath) {
   try {
-    if (!fs3.existsSync(transcriptPath)) {
+    if (!fs4.existsSync(transcriptPath)) {
       return { inputTokens: 0, outputTokens: 0, cachedTokens: 0, totalTokens: 0, contextLength: 0 };
     }
     const content = await readFile6(transcriptPath, "utf-8");
@@ -1155,7 +1485,8 @@ async function getTokenMetrics(transcriptPath) {
     let outputTokens = 0;
     let cachedTokens = 0;
     let contextLength = 0;
-    let lastMessageWithUsage = null;
+    let mostRecentMainChainEntry = null;
+    let mostRecentTimestamp = null;
     for (const line of lines) {
       try {
         const data = JSON.parse(line);
@@ -1164,12 +1495,18 @@ async function getTokenMetrics(transcriptPath) {
           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;
-          lastMessageWithUsage = data;
+          if (data.isSidechain !== true && data.timestamp) {
+            const entryTime = new Date(data.timestamp);
+            if (!mostRecentTimestamp || entryTime > mostRecentTimestamp) {
+              mostRecentTimestamp = entryTime;
+              mostRecentMainChainEntry = data;
+            }
+          }
         }
       } catch {}
     }
-    if (lastMessageWithUsage?.message?.usage) {
-      const usage = lastMessageWithUsage.message.usage;
+    if (mostRecentMainChainEntry?.message?.usage) {
+      const usage = mostRecentMainChainEntry.message.usage;
       contextLength = (usage.input_tokens || 0) + (usage.cache_read_input_tokens || 0) + (usage.cache_creation_input_tokens || 0);
     }
     const totalTokens = inputTokens + outputTokens + cachedTokens;
@@ -1180,7 +1517,23 @@ async function getTokenMetrics(transcriptPath) {
 }
 function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration) {
   const detectedWidth = getTerminalWidth();
-  const terminalWidth = detectedWidth ? detectedWidth - 40 : null;
+  let terminalWidth = null;
+  if (detectedWidth) {
+    const flexMode = settings.flexMode || "full-minus-40";
+    if (flexMode === "full") {
+      terminalWidth = detectedWidth - 4;
+    } else if (flexMode === "full-minus-40") {
+      terminalWidth = detectedWidth - 40;
+    } else if (flexMode === "full-until-compact") {
+      const threshold = settings.compactThreshold || 75;
+      const contextPercentage = tokenMetrics ? Math.min(100, tokenMetrics.contextLength / 200000 * 100) : 0;
+      if (contextPercentage >= threshold) {
+        terminalWidth = detectedWidth - 40;
+      } else {
+        terminalWidth = detectedWidth - 4;
+      }
+    }
+  }
   const elements = [];
   let hasFlexSeparator = false;
   const formatTokens = (count) => {
@@ -1195,14 +1548,16 @@ function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration)
       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" });
+          const text2 = item.rawValue ? data.model.display_name : `Model: ${data.model.display_name}`;
+          elements.push({ content: color(text2), 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" });
+          const text2 = item.rawValue ? branch : `⎇ ${branch}`;
+          elements.push({ content: color(text2), type: "git-branch" });
         }
         break;
       case "git-changes":
@@ -1216,64 +1571,80 @@ function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration)
       case "tokens-input":
         if (tokenMetrics) {
           const color = chalk2[item.color || "yellow"] || chalk2.yellow;
-          elements.push({ content: color(`In: ${formatTokens(tokenMetrics.inputTokens)}`), type: "tokens-input" });
+          const text2 = item.rawValue ? formatTokens(tokenMetrics.inputTokens) : `In: ${formatTokens(tokenMetrics.inputTokens)}`;
+          elements.push({ content: color(text2), 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" });
+          const text2 = item.rawValue ? formatTokens(tokenMetrics.outputTokens) : `Out: ${formatTokens(tokenMetrics.outputTokens)}`;
+          elements.push({ content: color(text2), 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" });
+          const text2 = item.rawValue ? formatTokens(tokenMetrics.cachedTokens) : `Cached: ${formatTokens(tokenMetrics.cachedTokens)}`;
+          elements.push({ content: color(text2), 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" });
+          const text2 = item.rawValue ? formatTokens(tokenMetrics.totalTokens) : `Total: ${formatTokens(tokenMetrics.totalTokens)}`;
+          elements.push({ content: color(text2), 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" });
+          const text2 = item.rawValue ? formatTokens(tokenMetrics.contextLength) : `Ctx: ${formatTokens(tokenMetrics.contextLength)}`;
+          elements.push({ content: color(text2), 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" });
+          const text2 = item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx: ${percentage.toFixed(1)}%`;
+          elements.push({ content: color(text2), type: "context-percentage" });
         }
         break;
       case "terminal-width":
         const detectedWidth2 = terminalWidth || getTerminalWidth();
         if (detectedWidth2) {
           const color = chalk2[item.color || "dim"] || chalk2.dim;
-          elements.push({ content: color(`Term: ${detectedWidth2}`), type: "terminal-width" });
+          const text2 = item.rawValue ? `${detectedWidth2}` : `Term: ${detectedWidth2}`;
+          elements.push({ content: color(text2), type: "terminal-width" });
         }
         break;
       case "session-clock":
         if (sessionDuration) {
           const color = chalk2[item.color || "blue"] || chalk2.blue;
-          elements.push({ content: color(`Session: ${sessionDuration}`), type: "session-clock" });
+          const text2 = item.rawValue ? sessionDuration : `Session: ${sessionDuration}`;
+          elements.push({ content: color(text2), type: "session-clock" });
         }
         break;
       case "version":
         const versionString = data.version || "Unknown";
         const versionColor = chalk2[item.color || "green"] || chalk2.green;
-        elements.push({ content: versionColor(`Version: ${versionString}`), type: "version" });
+        const text = item.rawValue ? versionString : `Version: ${versionString}`;
+        elements.push({ content: versionColor(text), type: "version" });
         break;
       case "separator":
         const lastElement = elements[elements.length - 1];
         if (elements.length > 0 && lastElement && lastElement.type !== "separator") {
           const sepColor = chalk2[settings.colors.separator] || chalk2.dim;
           const sepChar = item.character || "|";
-          const sepContent = sepChar === "," ? sepColor(`${sepChar} `) : sepColor(` ${sepChar} `);
+          let sepContent;
+          if (sepChar === ",") {
+            sepContent = sepColor(`${sepChar} `);
+          } else if (sepChar === " ") {
+            sepContent = sepColor(" ");
+          } else {
+            sepContent = sepColor(` ${sepChar} `);
+          }
           elements.push({ content: sepContent, type: "separator" });
         }
         break;
@@ -1281,10 +1652,18 @@ function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration)
         elements.push({ content: "FLEX", type: "flex-separator" });
         hasFlexSeparator = true;
         break;
+      case "custom-text":
+        const customTextColor = chalk2[item.color || "white"] || chalk2.white;
+        const customText = item.customText || "";
+        elements.push({ content: customTextColor(customText), type: "custom-text" });
+        break;
     }
   }
   if (elements.length === 0)
     return "";
+  while (elements.length > 0 && elements[elements.length - 1]?.type === "separator") {
+    elements.pop();
+  }
   let statusLine = "";
   if (hasFlexSeparator && terminalWidth) {
     const parts = [[]];
@@ -1324,6 +1703,38 @@ function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration)
       statusLine = elements.map((e) => e.content).join("");
     }
   }
+  if (detectedWidth && detectedWidth > 0) {
+    const plainLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
+    if (plainLength > detectedWidth) {
+      let truncated = "";
+      let currentLength = 0;
+      let inAnsiCode = false;
+      let ansiBuffer = "";
+      const targetLength = detectedWidth - 7;
+      for (let i = 0;i < statusLine.length; i++) {
+        const char = statusLine[i];
+        if (char === "\x1B") {
+          inAnsiCode = true;
+          ansiBuffer = char;
+        } else if (inAnsiCode) {
+          ansiBuffer += char;
+          if (char === "m") {
+            truncated += ansiBuffer;
+            inAnsiCode = false;
+            ansiBuffer = "";
+          }
+        } else {
+          if (currentLength < targetLength) {
+            truncated += char;
+            currentLength++;
+          } else {
+            break;
+          }
+        }
+      }
+      statusLine = truncated + "...";
+    }
+  }
   return statusLine;
 }
 async function renderStatusLine(data) {

package/package.json

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