ccstatusline 1.1.2 → 1.1.3

package/dist/ccstatusline.js

@@ -1,17 +1,13 @@
 #!/usr/bin/env node
 
-// src/ccstatusline.ts
-import chalk2 from "chalk";
-import { execSync as execSync2 } 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";
-import { execSync } from "child_process";
+import chalk2 from "chalk";
+import { execSync as execSync2 } from "child_process";
 
-// src/config.ts
+// src/utils/config.ts
 import * as fs from "fs";
 import * as path from "path";
 import * as os from "os";
@@ -123,7 +119,7 @@ async function saveSettings(settings) {
   await writeFile2(SETTINGS_PATH, JSON.stringify(settings, null, 2), "utf-8");
 }
 
-// src/claude-settings.ts
+// src/utils/claude-settings.ts
 import * as fs2 from "fs";
 import * as path2 from "path";
 import * as os2 from "os";
@@ -174,20 +170,36 @@ async function getExistingStatusLine() {
 }
 
 // src/tui.tsx
-import * as fs3 from "fs";
+import * as fs4 from "fs";
 import * as path3 from "path";
-var __dirname = "/Users/sirmalloc/Projects/Personal/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 "";
+
+// src/utils/renderer.ts
+import chalk from "chalk";
+import { execSync } from "child_process";
+import * as fs3 from "fs";
+import { promisify as promisify3 } from "util";
+var readFile6 = fs3.promises?.readFile || promisify3(fs3.readFile);
+chalk.level = 3;
+function applyColors(text, foregroundColor, backgroundColor, bold) {
+  let result = text;
+  if (foregroundColor && foregroundColor !== "dim") {
+    const fgFunc = chalk[foregroundColor];
+    if (fgFunc) {
+      result = fgFunc(result);
+    }
+  }
+  if (backgroundColor && backgroundColor !== "none") {
+    const bgFunc = chalk[backgroundColor];
+    if (bgFunc) {
+      result = bgFunc(result);
+    }
+  }
+  if (bold) {
+    result = chalk.bold(result);
   }
+  return result;
 }
-function getDefaultColor(type) {
+function getItemDefaultColor(type) {
   switch (type) {
     case "model":
       return "cyan";
@@ -225,7 +237,14 @@ function getDefaultColor(type) {
       return "white";
   }
 }
-function canDetectTerminalWidth() {
+function formatTokens(count) {
+  if (count >= 1e6)
+    return `${(count / 1e6).toFixed(1)}M`;
+  if (count >= 1000)
+    return `${(count / 1000).toFixed(1)}k`;
+  return count.toString();
+}
+function getTerminalWidth() {
   try {
     const tty = execSync("ps -o tty= -p $(ps -o ppid= -p $$)", {
       encoding: "utf8",
@@ -240,7 +259,7 @@ function canDetectTerminalWidth() {
       }).trim();
       const parsed = parseInt(width, 10);
       if (!isNaN(parsed) && parsed > 0) {
-        return true;
+        return parsed;
       }
     }
   } catch {}
@@ -250,194 +269,453 @@ function canDetectTerminalWidth() {
       stdio: ["pipe", "pipe", "ignore"]
     }).trim();
     const parsed = parseInt(width, 10);
-    return !isNaN(parsed) && parsed > 0;
+    if (!isNaN(parsed) && parsed > 0) {
+      return parsed;
+    }
+  } 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 false;
+    return null;
   }
 }
-var applyColors = (text, foregroundColor, backgroundColor, bold) => {
-  let result = text;
-  if (foregroundColor && foregroundColor !== "dim") {
-    const fgFunc = chalk[foregroundColor];
-    if (fgFunc) {
-      result = fgFunc(result);
+function getGitChanges() {
+  try {
+    let totalInsertions = 0;
+    let totalDeletions = 0;
+    const unstagedStat = execSync("git diff --shortstat 2>/dev/null", {
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "ignore"]
+    }).trim();
+    const stagedStat = execSync("git diff --cached --shortstat 2>/dev/null", {
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "ignore"]
+    }).trim();
+    if (unstagedStat) {
+      const insertMatch = unstagedStat.match(/(\d+) insertion/);
+      const deleteMatch = unstagedStat.match(/(\d+) deletion/);
+      totalInsertions += insertMatch?.[1] ? parseInt(insertMatch[1], 10) : 0;
+      totalDeletions += deleteMatch?.[1] ? parseInt(deleteMatch[1], 10) : 0;
     }
+    if (stagedStat) {
+      const insertMatch = stagedStat.match(/(\d+) insertion/);
+      const deleteMatch = stagedStat.match(/(\d+) deletion/);
+      totalInsertions += insertMatch?.[1] ? parseInt(insertMatch[1], 10) : 0;
+      totalDeletions += deleteMatch?.[1] ? parseInt(deleteMatch[1], 10) : 0;
+    }
+    return { insertions: totalInsertions, deletions: totalDeletions };
+  } catch {
+    return null;
   }
-  if (backgroundColor && backgroundColor !== "none") {
-    const bgFunc = chalk[backgroundColor];
-    if (bgFunc) {
-      result = bgFunc(result);
+}
+async function getSessionDuration(transcriptPath) {
+  try {
+    if (!fs3.existsSync(transcriptPath)) {
+      return null;
+    }
+    const content = await readFile6(transcriptPath, "utf-8");
+    const lines = content.trim().split(`
+`).filter((line) => line.trim());
+    if (lines.length === 0) {
+      return null;
+    }
+    let firstTimestamp = null;
+    let lastTimestamp = null;
+    for (const line of lines) {
+      try {
+        const data = JSON.parse(line);
+        if (data.timestamp) {
+          firstTimestamp = new Date(data.timestamp);
+          break;
+        }
+      } catch {}
+    }
+    for (let i = lines.length - 1;i >= 0; i--) {
+      try {
+        const data = JSON.parse(lines[i]);
+        if (data.timestamp) {
+          lastTimestamp = new Date(data.timestamp);
+          break;
+        }
+      } catch {}
+    }
+    if (!firstTimestamp || !lastTimestamp) {
+      return null;
+    }
+    const durationMs = lastTimestamp.getTime() - firstTimestamp.getTime();
+    const totalMinutes = Math.floor(durationMs / (1000 * 60));
+    if (totalMinutes < 1) {
+      return "<1m";
+    }
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    if (hours === 0) {
+      return `${minutes}m`;
+    } else if (minutes === 0) {
+      return `${hours}hr`;
+    } else {
+      return `${hours}hr ${minutes}m`;
     }
+  } catch {
+    return null;
   }
-  if (bold) {
-    result = chalk.bold(result);
+}
+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;
+    let contextLength = 0;
+    let mostRecentMainChainEntry = null;
+    let mostRecentTimestamp = null;
+    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;
+          if (data.isSidechain !== true && data.timestamp) {
+            const entryTime = new Date(data.timestamp);
+            if (!mostRecentTimestamp || entryTime > mostRecentTimestamp) {
+              mostRecentTimestamp = entryTime;
+              mostRecentMainChainEntry = data;
+            }
+          }
+        }
+      } catch {}
+    }
+    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;
+    return { inputTokens, outputTokens, cachedTokens, totalTokens, contextLength };
+  } catch {
+    return { inputTokens: 0, outputTokens: 0, cachedTokens: 0, totalTokens: 0, contextLength: 0 };
   }
-  return result;
-};
-var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings) => {
-  const applyItemColors = (text, item, defaultColor) => {
-    let fgColor = item.color || defaultColor;
-    if (settings?.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
+}
+function renderStatusLine(items, settings, context) {
+  const applyColorsWithOverride = (text, foregroundColor, backgroundColor, bold) => {
+    let fgColor = foregroundColor;
+    if (settings.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
       fgColor = settings.overrideForegroundColor;
     }
-    let bgColor = item.backgroundColor;
-    if (settings?.overrideBackgroundColor && settings.overrideBackgroundColor !== "none") {
+    let bgColor = backgroundColor;
+    if (settings.overrideBackgroundColor && settings.overrideBackgroundColor !== "none") {
       bgColor = settings.overrideBackgroundColor;
     }
-    const shouldBold = settings?.globalBold || item.bold;
+    const shouldBold = settings.globalBold || bold;
     return applyColors(text, fgColor, bgColor, shouldBold);
   };
-  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 detectedWidth = context.terminalWidth || getTerminalWidth();
+  let terminalWidth = null;
+  if (detectedWidth) {
+    const flexMode = settings.flexMode || "full-minus-40";
+    if (context.isPreview) {
+      if (flexMode === "full") {
+        terminalWidth = detectedWidth - 6;
+      } else if (flexMode === "full-minus-40") {
+        terminalWidth = detectedWidth - 43;
+      } else if (flexMode === "full-until-compact") {
+        terminalWidth = detectedWidth - 6;
+      }
+    } else {
+      if (flexMode === "full") {
+        terminalWidth = detectedWidth - 4;
+      } else if (flexMode === "full-minus-40") {
+        terminalWidth = detectedWidth - 41;
+      } else if (flexMode === "full-until-compact") {
+        const threshold = settings.compactThreshold || 60;
+        const contextPercentage = context.tokenMetrics ? Math.min(100, context.tokenMetrics.contextLength / 200000 * 100) : 0;
+        if (contextPercentage >= threshold) {
+          terminalWidth = detectedWidth - 40;
+        } else {
+          terminalWidth = detectedWidth - 4;
+        }
+      }
     }
   }
-  const width = terminalWidth;
-  const flexWidth = effectiveWidth;
-  const rawElements = [];
+  const elements = [];
   let hasFlexSeparator = false;
-  items.forEach((item, index) => {
+  for (const item of items) {
     switch (item.type) {
       case "model":
-        const modelText = item.rawValue ? "Claude" : "Model: Claude";
-        rawElements.push({ content: applyItemColors(modelText, item, "cyan"), type: "model", item });
+        if (context.isPreview) {
+          const modelText = item.rawValue ? "Claude" : "Model: Claude";
+          elements.push({ content: applyColorsWithOverride(modelText, item.color || "cyan", item.backgroundColor, item.bold), type: "model", item });
+        } else if (context.data?.model) {
+          const text = item.rawValue ? context.data.model.display_name : `Model: ${context.data.model.display_name}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "cyan", item.backgroundColor, item.bold), type: "model", item });
+        }
         break;
       case "git-branch":
-        const branchText = "⎇ main";
-        rawElements.push({ content: applyItemColors(branchText, item, "magenta"), type: "git-branch", item });
+        if (context.isPreview) {
+          const branchText = item.rawValue ? "main" : "⎇ main";
+          elements.push({ content: applyColorsWithOverride(branchText, item.color || "magenta", item.backgroundColor, item.bold), type: "git-branch", item });
+        } else {
+          const branch = context.gitBranch || getGitBranch();
+          if (branch) {
+            const text = item.rawValue ? branch : `⎇ ${branch}`;
+            elements.push({ content: applyColorsWithOverride(text, item.color || "magenta", item.backgroundColor, item.bold), type: "git-branch", item });
+          }
+        }
         break;
       case "git-changes":
-        const changesText = "(+42,-10)";
-        rawElements.push({ content: applyItemColors(changesText, item, "yellow"), type: "git-changes", item });
+        if (context.isPreview) {
+          const changesText = "(+42,-10)";
+          elements.push({ content: applyColorsWithOverride(changesText, item.color || "yellow", item.backgroundColor, item.bold), type: "git-changes", item });
+        } else {
+          const changes = context.gitChanges || getGitChanges();
+          if (changes !== null) {
+            const changeStr = `(+${changes.insertions},-${changes.deletions})`;
+            elements.push({ content: applyColorsWithOverride(changeStr, item.color || "yellow", item.backgroundColor, item.bold), type: "git-changes", item });
+          }
+        }
         break;
       case "tokens-input":
-        const inputText = item.rawValue ? "15.2k" : "In: 15.2k";
-        rawElements.push({ content: applyItemColors(inputText, item, "blue"), type: "tokens-input", item });
+        if (context.isPreview) {
+          const inputText = item.rawValue ? "15.2k" : "In: 15.2k";
+          elements.push({ content: applyColorsWithOverride(inputText, item.color || "blue", item.backgroundColor, item.bold), type: "tokens-input", item });
+        } else if (context.tokenMetrics) {
+          const text = item.rawValue ? formatTokens(context.tokenMetrics.inputTokens) : `In: ${formatTokens(context.tokenMetrics.inputTokens)}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "blue", item.backgroundColor, item.bold), type: "tokens-input", item });
+        }
         break;
       case "tokens-output":
-        const outputText = item.rawValue ? "3.4k" : "Out: 3.4k";
-        rawElements.push({ content: applyItemColors(outputText, item, "white"), type: "tokens-output", item });
+        if (context.isPreview) {
+          const outputText = item.rawValue ? "3.4k" : "Out: 3.4k";
+          elements.push({ content: applyColorsWithOverride(outputText, item.color || "white", item.backgroundColor, item.bold), type: "tokens-output", item });
+        } else if (context.tokenMetrics) {
+          const text = item.rawValue ? formatTokens(context.tokenMetrics.outputTokens) : `Out: ${formatTokens(context.tokenMetrics.outputTokens)}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "white", item.backgroundColor, item.bold), type: "tokens-output", item });
+        }
         break;
       case "tokens-cached":
-        const cachedText = item.rawValue ? "12k" : "Cached: 12k";
-        rawElements.push({ content: applyItemColors(cachedText, item, "cyan"), type: "tokens-cached", item });
+        if (context.isPreview) {
+          const cachedText = item.rawValue ? "12k" : "Cached: 12k";
+          elements.push({ content: applyColorsWithOverride(cachedText, item.color || "cyan", item.backgroundColor, item.bold), type: "tokens-cached", item });
+        } else if (context.tokenMetrics) {
+          const text = item.rawValue ? formatTokens(context.tokenMetrics.cachedTokens) : `Cached: ${formatTokens(context.tokenMetrics.cachedTokens)}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "cyan", item.backgroundColor, item.bold), type: "tokens-cached", item });
+        }
         break;
       case "tokens-total":
-        const totalText = item.rawValue ? "30.6k" : "Total: 30.6k";
-        rawElements.push({ content: applyItemColors(totalText, item, "cyan"), type: "tokens-total", item });
+        if (context.isPreview) {
+          const totalText = item.rawValue ? "30.6k" : "Total: 30.6k";
+          elements.push({ content: applyColorsWithOverride(totalText, item.color || "cyan", item.backgroundColor, item.bold), type: "tokens-total", item });
+        } else if (context.tokenMetrics) {
+          const text = item.rawValue ? formatTokens(context.tokenMetrics.totalTokens) : `Total: ${formatTokens(context.tokenMetrics.totalTokens)}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "cyan", item.backgroundColor, item.bold), type: "tokens-total", item });
+        }
         break;
       case "context-length":
-        const ctxText = item.rawValue ? "18.6k" : "Ctx: 18.6k";
-        rawElements.push({ content: applyItemColors(ctxText, item, "gray"), type: "context-length", item });
+        if (context.isPreview) {
+          const ctxText = item.rawValue ? "18.6k" : "Ctx: 18.6k";
+          elements.push({ content: applyColorsWithOverride(ctxText, item.color || "gray", item.backgroundColor, item.bold), type: "context-length", item });
+        } else if (context.tokenMetrics) {
+          const text = item.rawValue ? formatTokens(context.tokenMetrics.contextLength) : `Ctx: ${formatTokens(context.tokenMetrics.contextLength)}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "gray", item.backgroundColor, item.bold), type: "context-length", item });
+        }
         break;
       case "context-percentage":
-        const ctxPctText = item.rawValue ? "9.3%" : "Ctx: 9.3%";
-        rawElements.push({ content: applyItemColors(ctxPctText, item, "blue"), type: "context-percentage", item });
+        if (context.isPreview) {
+          const ctxPctText = item.rawValue ? "9.3%" : "Ctx: 9.3%";
+          elements.push({ content: applyColorsWithOverride(ctxPctText, item.color || "blue", item.backgroundColor, item.bold), type: "context-percentage", item });
+        } else if (context.tokenMetrics) {
+          const percentage = Math.min(100, context.tokenMetrics.contextLength / 200000 * 100);
+          const text = item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx: ${percentage.toFixed(1)}%`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "blue", item.backgroundColor, item.bold), type: "context-percentage", item });
+        }
         break;
       case "context-percentage-usable":
-        const ctxUsableText = item.rawValue ? "11.6%" : "Ctx(u): 11.6%";
-        rawElements.push({ content: applyItemColors(ctxUsableText, item, "green"), type: "context-percentage-usable", item });
+        if (context.isPreview) {
+          const ctxUsableText = item.rawValue ? "11.6%" : "Ctx(u): 11.6%";
+          elements.push({ content: applyColorsWithOverride(ctxUsableText, item.color || "green", item.backgroundColor, item.bold), type: "context-percentage-usable", item });
+        } else if (context.tokenMetrics) {
+          const percentage = Math.min(100, context.tokenMetrics.contextLength / 160000 * 100);
+          const text = item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx(u): ${percentage.toFixed(1)}%`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "green", item.backgroundColor, item.bold), type: "context-percentage-usable", item });
+        }
+        break;
+      case "terminal-width":
+        const width = terminalWidth || getTerminalWidth();
+        if (context.isPreview) {
+          const detectedWidth2 = width || "??";
+          const termText = item.rawValue ? `${detectedWidth2}` : `Term: ${detectedWidth2}`;
+          elements.push({ content: applyColorsWithOverride(termText, item.color || "gray", item.backgroundColor, item.bold), type: "terminal-width", item });
+        } else if (width) {
+          const text = item.rawValue ? `${width}` : `Term: ${width}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "gray", item.backgroundColor, item.bold), type: "terminal-width", item });
+        }
         break;
       case "session-clock":
-        const sessionText = item.rawValue ? "2hr 15m" : "Session: 2hr 15m";
-        rawElements.push({ content: applyItemColors(sessionText, item, "yellow"), type: "session-clock", item });
+        if (context.isPreview) {
+          const sessionText = item.rawValue ? "2hr 15m" : "Session: 2hr 15m";
+          elements.push({ content: applyColorsWithOverride(sessionText, item.color || "yellow", item.backgroundColor, item.bold), type: "session-clock", item });
+        } else if (context.sessionDuration) {
+          const text = item.rawValue ? context.sessionDuration : `Session: ${context.sessionDuration}`;
+          elements.push({ content: applyColorsWithOverride(text, item.color || "yellow", item.backgroundColor, item.bold), type: "session-clock", item });
+        }
         break;
       case "version":
-        const versionText = item.rawValue ? "1.0.72" : "Version: 1.0.72";
-        rawElements.push({ content: applyItemColors(versionText, item, "green"), type: "version", item });
-        break;
-      case "terminal-width":
-        const detectedWidth = canDetectTerminalWidth() ? terminalWidth : "??";
-        const termText = item.rawValue ? `${detectedWidth}` : `Term: ${detectedWidth}`;
-        rawElements.push({ content: applyItemColors(termText, item, "gray"), type: "terminal-width", item });
+        if (context.isPreview) {
+          const versionText = item.rawValue ? "1.0.72" : "Version: 1.0.72";
+          elements.push({ content: applyColorsWithOverride(versionText, item.color || "green", item.backgroundColor, item.bold), type: "version", item });
+        } else if (context.data?.version) {
+          const versionString = context.data.version || "Unknown";
+          const versionText = item.rawValue ? versionString : `Version: ${versionString}`;
+          elements.push({ content: applyColorsWithOverride(versionText, item.color || "green", item.backgroundColor, item.bold), type: "version", item });
+        }
         break;
       case "separator":
         const sepChar = item.character || "|";
-        let sepContent;
+        let sepText;
         if (sepChar === ",") {
-          sepContent = `${sepChar} `;
+          sepText = `${sepChar} `;
         } else if (sepChar === " ") {
-          sepContent = " ";
+          sepText = " ";
         } else {
-          sepContent = ` ${sepChar} `;
+          sepText = ` ${sepChar} `;
         }
-        rawElements.push({ content: applyItemColors(sepContent, item, "gray"), type: "separator", item });
+        const sepContent = applyColorsWithOverride(sepText, item.color || "gray", item.backgroundColor, item.bold);
+        elements.push({ content: sepContent, type: "separator", item });
         break;
       case "flex-separator":
-        rawElements.push({ content: "FLEX", type: "flex-separator", item });
+        elements.push({ content: "FLEX", type: "flex-separator", item });
         hasFlexSeparator = true;
         break;
       case "custom-text":
         const customText = item.customText || "";
-        rawElements.push({ content: applyItemColors(customText, item, "white"), type: "custom-text", item });
+        elements.push({ content: applyColorsWithOverride(customText, item.color || "white", item.backgroundColor, item.bold), type: "custom-text", item });
         break;
       case "custom-command":
-        const cmdText = item.commandPath ? `[cmd: ${item.commandPath.substring(0, 20)}${item.commandPath.length > 20 ? "..." : ""}]` : "[No command]";
-        if (!item.preserveColors) {
-          rawElements.push({ content: applyItemColors(cmdText, item, "white"), type: "custom-command", item });
-        } else {
-          rawElements.push({ content: cmdText, type: "custom-command", item });
-        }
-        break;
-    }
-  });
-  const elements = [];
-  const padding = settings?.defaultPadding || "";
-  const defaultSep = settings?.defaultSeparator || "";
-  rawElements.forEach((elem, index) => {
-    if (defaultSep && index > 0) {
-      if (settings?.inheritSeparatorColors && index > 0) {
-        const prevElem = rawElements[index - 1];
-        if (prevElem && prevElem.item) {
-          const fgColor = settings?.overrideForegroundColor && settings.overrideForegroundColor !== "none" ? settings.overrideForegroundColor : prevElem.item.color || getDefaultColor(prevElem.item.type);
-          const bgColor = settings?.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" ? settings.overrideBackgroundColor : prevElem.item.backgroundColor;
-          const shouldBold = settings?.globalBold || prevElem.item.bold;
-          const coloredSep = applyColors(defaultSep, fgColor, bgColor, shouldBold);
-          elements.push(coloredSep);
-        } else {
-          elements.push(defaultSep);
-        }
-      } else if (settings?.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" || settings?.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
-        const fgColor = settings?.overrideForegroundColor && settings.overrideForegroundColor !== "none" ? settings.overrideForegroundColor : undefined;
-        const coloredSep = applyColors(defaultSep, fgColor, settings.overrideBackgroundColor, settings?.globalBold);
-        elements.push(coloredSep);
-      } else {
-        elements.push(defaultSep);
-      }
-    }
-    if (elem.type === "separator" || elem.type === "flex-separator") {
-      elements.push(elem.content);
-    } else {
-      const fgColor = settings?.overrideForegroundColor && settings.overrideForegroundColor !== "none" ? settings.overrideForegroundColor : undefined;
-      const bgColor = settings?.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" ? settings.overrideBackgroundColor : elem.item?.backgroundColor;
-      if (padding && (bgColor || fgColor)) {
-        const paddedContent = applyColors(padding, fgColor, bgColor, settings?.globalBold) + elem.content + applyColors(padding, fgColor, bgColor, settings?.globalBold);
-        elements.push(paddedContent);
+        if (context.isPreview) {
+          const cmdText = item.commandPath ? `[cmd: ${item.commandPath.substring(0, 20)}${item.commandPath.length > 20 ? "..." : ""}]` : "[No command]";
+          if (!item.preserveColors) {
+            elements.push({ content: applyColorsWithOverride(cmdText, item.color || "white", item.backgroundColor, item.bold), type: "custom-command", item });
+          } else {
+            elements.push({ content: cmdText, type: "custom-command", item });
+          }
+        } else if (item.commandPath && context.data) {
+          try {
+            const timeout = item.timeout || 1000;
+            const output = execSync(item.commandPath, {
+              encoding: "utf8",
+              input: JSON.stringify(context.data),
+              stdio: ["pipe", "pipe", "ignore"],
+              timeout
+            }).trim();
+            if (output) {
+              let finalOutput = output;
+              if (item.maxWidth && item.maxWidth > 0) {
+                const plainLength = output.replace(/\x1b\[[0-9;]*m/g, "").length;
+                if (plainLength > item.maxWidth) {
+                  let truncated = "";
+                  let currentLength = 0;
+                  let inAnsiCode = false;
+                  let ansiBuffer = "";
+                  for (let i = 0;i < output.length; i++) {
+                    const char = output[i];
+                    if (char === "\x1B") {
+                      inAnsiCode = true;
+                      ansiBuffer = char;
+                    } else if (inAnsiCode) {
+                      ansiBuffer += char;
+                      if (char === "m") {
+                        truncated += ansiBuffer;
+                        inAnsiCode = false;
+                        ansiBuffer = "";
+                      }
+                    } else {
+                      if (currentLength < item.maxWidth) {
+                        truncated += char;
+                        currentLength++;
+                      } else {
+                        break;
+                      }
+                    }
+                  }
+                  finalOutput = truncated;
+                }
+              }
+              if (!item.preserveColors) {
+                const stripped = finalOutput.replace(/\x1b\[[0-9;]*m/g, "");
+                elements.push({ content: applyColorsWithOverride(stripped, item.color || "white", item.backgroundColor, item.bold), type: "custom-command", item });
+              } else {
+                elements.push({ content: finalOutput, type: "custom-command", item });
+              }
+            }
+          } catch {}
+        }
+        break;
+    }
+  }
+  if (elements.length === 0)
+    return "";
+  while (elements.length > 0 && elements[elements.length - 1]?.type === "separator") {
+    elements.pop();
+  }
+  const finalElements = [];
+  const padding = settings.defaultPadding || "";
+  const defaultSep = settings.defaultSeparator || "";
+  elements.forEach((elem, index) => {
+    const prevElem = index > 0 ? elements[index - 1] : null;
+    const shouldAddSeparator = defaultSep && index > 0 && elem.type !== "flex-separator" && prevElem?.type !== "flex-separator";
+    if (shouldAddSeparator) {
+      if (settings.inheritSeparatorColors && index > 0) {
+        const prevElem2 = elements[index - 1];
+        if (prevElem2 && prevElem2.item) {
+          const itemColor = prevElem2.item.color || getItemDefaultColor(prevElem2.item.type);
+          const coloredSep = applyColorsWithOverride(defaultSep, itemColor, prevElem2.item.backgroundColor, prevElem2.item.bold);
+          finalElements.push(coloredSep);
+        } else {
+          finalElements.push(defaultSep);
+        }
+      } else if (settings.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" || settings.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
+        const coloredSep = applyColorsWithOverride(defaultSep, undefined, undefined);
+        finalElements.push(coloredSep);
+      } else {
+        finalElements.push(defaultSep);
+      }
+    }
+    if (elem.type === "separator" || elem.type === "flex-separator") {
+      finalElements.push(elem.content);
+    } else {
+      const hasColorOverride = settings.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" || settings.overrideForegroundColor && settings.overrideForegroundColor !== "none";
+      if (padding && (elem.item?.backgroundColor || hasColorOverride)) {
+        const paddedContent = applyColorsWithOverride(padding, undefined, elem.item?.backgroundColor) + elem.content + applyColorsWithOverride(padding, undefined, elem.item?.backgroundColor);
+        finalElements.push(paddedContent);
       } else {
-        elements.push(padding + elem.content + padding);
+        finalElements.push(padding + elem.content + padding);
       }
     }
   });
   let statusLine = "";
-  if (hasFlexSeparator && flexWidth) {
+  if (hasFlexSeparator && terminalWidth) {
     const parts = [[]];
     let currentPart = 0;
-    for (let i = 0;i < items.length; i++) {
-      const item = items[i];
-      if (item && item.type === "flex-separator") {
+    for (let i = 0;i < finalElements.length; i++) {
+      const elem = finalElements[i];
+      if (elem === "FLEX") {
         currentPart++;
         parts[currentPart] = [];
       } else {
-        const element = elements[i];
-        if (element !== "FLEX" && parts[currentPart]) {
-          parts[currentPart].push(element);
-        }
+        parts[currentPart]?.push(elem);
       }
     }
     const partLengths = parts.map((part) => {
@@ -446,7 +724,7 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings)
     });
     const totalContentLength = partLengths.reduce((sum, len) => sum + len, 0);
     const flexCount = parts.length - 1;
-    const totalSpace = Math.max(0, flexWidth - totalContentLength);
+    const totalSpace = Math.max(0, terminalWidth - totalContentLength);
     const spacePerFlex = flexCount > 0 ? Math.floor(totalSpace / flexCount) : 0;
     const extraSpace = flexCount > 0 ? totalSpace % flexCount : 0;
     statusLine = "";
@@ -461,16 +739,21 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings)
       }
     }
   } else {
-    statusLine = elements.map((e) => e === "FLEX" ? chalk.gray(" | ") : e).join("");
+    if (hasFlexSeparator && !terminalWidth) {
+      statusLine = finalElements.map((e) => e === "FLEX" ? chalk.gray(" | ") : e).join("");
+    } else {
+      statusLine = finalElements.join("");
+    }
   }
-  if (width && width > 0) {
+  const maxWidth = terminalWidth || detectedWidth;
+  if (maxWidth && maxWidth > 0) {
     const plainLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
-    if (plainLength > width) {
+    if (plainLength > maxWidth) {
       let truncated = "";
       let currentLength = 0;
       let inAnsiCode = false;
       let ansiBuffer = "";
-      const targetLength = width - 5;
+      const targetLength = context.isPreview ? maxWidth - 3 : maxWidth - 3;
       for (let i = 0;i < statusLine.length; i++) {
         const char = statusLine[i];
         if (char === "\x1B") {
@@ -496,26 +779,72 @@ var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings)
     }
   }
   return statusLine;
+}
+
+// src/tui.tsx
+var __dirname = "/Users/sirmalloc/Projects/Personal/ccstatusline/src";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+function getPackageVersion() {
+  try {
+    const packageJsonPath = path3.join(__dirname, "..", "package.json");
+    const packageJson = JSON.parse(fs4.readFileSync(packageJsonPath, "utf-8"));
+    return packageJson.version || "";
+  } catch {
+    return "";
+  }
+}
+var getDefaultColor = getItemDefaultColor;
+function canDetectTerminalWidth() {
+  try {
+    const tty = execSync2("ps -o tty= -p $(ps -o ppid= -p $$)", {
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "ignore"],
+      shell: "/bin/sh"
+    }).trim();
+    if (tty && tty !== "??" && tty !== "?") {
+      const width = execSync2(`stty size < /dev/${tty} | awk '{print $2}'`, {
+        encoding: "utf8",
+        stdio: ["pipe", "pipe", "ignore"],
+        shell: "/bin/sh"
+      }).trim();
+      const parsed = parseInt(width, 10);
+      if (!isNaN(parsed) && parsed > 0) {
+        return true;
+      }
+    }
+  } catch {}
+  try {
+    const width = execSync2("tput cols 2>/dev/null", {
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "ignore"]
+    }).trim();
+    const parsed = parseInt(width, 10);
+    return !isNaN(parsed) && parsed > 0;
+  } catch {
+    return false;
+  }
+}
+var renderSingleLine = (items, terminalWidth, widthDetectionAvailable, settings) => {
+  const context = {
+    terminalWidth,
+    isPreview: true
+  };
+  return renderStatusLine(items, settings || {}, context);
 };
 var StatusLinePreview = ({ lines, terminalWidth, settings }) => {
   const widthDetectionAvailable = canDetectTerminalWidth();
-  const boxWidth = Math.min(terminalWidth - 4, process.stdout.columns - 4 || 76);
-  const topLine = chalk.gray("╭" + "─".repeat(Math.max(0, boxWidth - 2)) + "╮");
-  const middleLine = chalk.gray("│") + " > " + " ".repeat(Math.max(0, boxWidth - 5)) + chalk.gray("│");
-  const bottomLine = chalk.gray("╰" + "─".repeat(Math.max(0, boxWidth - 2)) + "╯");
-  const availableWidth = boxWidth - 2;
-  const renderedLines = lines.map((lineItems) => lineItems.length > 0 ? renderSingleLine(lineItems, availableWidth, widthDetectionAvailable, settings) : "").filter((line) => line !== "");
+  const renderedLines = lines.map((lineItems) => lineItems.length > 0 ? renderSingleLine(lineItems, terminalWidth, widthDetectionAvailable, settings) : "").filter((line) => line !== "");
   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
+      /* @__PURE__ */ jsxDEV(Box, {
+        borderStyle: "round",
+        borderColor: "gray",
+        width: "100%",
+        paddingLeft: 1,
+        children: /* @__PURE__ */ jsxDEV(Text, {
+          children: ">"
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       renderedLines.map((line, index) => /* @__PURE__ */ jsxDEV(Text, {
         children: [
@@ -596,7 +925,7 @@ var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges, initialSelection = 0
   const items = [
     { label: "\uD83D\uDCDD Edit Lines", value: "lines" },
     { label: "\uD83C\uDFA8 Configure Colors", value: "colors" },
-    { label: "⚡ Flex Options", value: "flex" },
+    { label: "\uD83D\uDCCF Terminal Width Options", value: "terminalWidth" },
     { label: "\uD83D\uDD27 Global Options", value: "globalOptions" },
     { label: isClaudeInstalled ? "\uD83D\uDDD1️  Uninstall from Claude Code" : "\uD83D\uDCE6 Install to Claude Code", value: "install" }
   ];
@@ -661,11 +990,15 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
         setTextCursorPos(0);
       } else if (key.ctrl && key.rightArrow) {
         setTextCursorPos(textInput.length);
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         if (textCursorPos > 0) {
           setTextInput(textInput.slice(0, textCursorPos - 1) + textInput.slice(textCursorPos));
           setTextCursorPos(textCursorPos - 1);
         }
+      } else if (key.delete) {
+        if (textCursorPos < textInput.length) {
+          setTextInput(textInput.slice(0, textCursorPos) + textInput.slice(textCursorPos + 1));
+        }
       } else if (input && input.length === 1) {
         setTextInput(textInput.slice(0, textCursorPos) + input + textInput.slice(textCursorPos));
         setTextCursorPos(textCursorPos + 1);
@@ -693,11 +1026,15 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
         setCommandCursorPos(0);
       } else if (key.ctrl && key.rightArrow) {
         setCommandCursorPos(commandInput.length);
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         if (commandCursorPos > 0) {
           setCommandInput(commandInput.slice(0, commandCursorPos - 1) + commandInput.slice(commandCursorPos));
           setCommandCursorPos(commandCursorPos - 1);
         }
+      } else if (key.delete) {
+        if (commandCursorPos < commandInput.length) {
+          setCommandInput(commandInput.slice(0, commandCursorPos) + commandInput.slice(commandCursorPos + 1));
+        }
       } else if (input) {
         setCommandInput(commandInput.slice(0, commandCursorPos) + input + commandInput.slice(commandCursorPos));
         setCommandCursorPos(commandCursorPos + input.length);
@@ -721,9 +1058,9 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
       } else if (key.escape) {
         setEditingMaxWidth(false);
         setMaxWidthInput("");
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         setMaxWidthInput(maxWidthInput.slice(0, -1));
-      } else if (input && /\d/.test(input)) {
+      } else if (key.delete) {} else if (input && /\d/.test(input)) {
         setMaxWidthInput(maxWidthInput + input);
       }
     } else if (editingTimeout) {
@@ -745,9 +1082,9 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
       } else if (key.escape) {
         setEditingTimeout(false);
         setTimeoutInput("");
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         setTimeoutInput(timeoutInput.slice(0, -1));
-      } else if (input && /\d/.test(input)) {
+      } else if (key.delete) {} else if (input && /\d/.test(input)) {
         setTimeoutInput(timeoutInput + input);
       }
     } else if (moveMode) {
@@ -926,7 +1263,7 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
   });
   const getItemDisplay = (item) => {
     const colorName = item.color || getDefaultColor(item.type);
-    const colorFunc = chalk[colorName] || chalk.white;
+    const colorFunc = chalk2[colorName] || chalk2.white;
     switch (item.type) {
       case "model":
         return colorFunc("Model");
@@ -940,7 +1277,7 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
         return applyColors(`Separator ${charDisplay}`, item.color || "gray", item.backgroundColor, item.bold);
       }
       case "flex-separator":
-        return chalk.yellow("Flex Separator");
+        return chalk2.yellow("Flex Separator");
       case "tokens-input":
         return colorFunc("Tokens Input");
       case "tokens-output":
@@ -970,7 +1307,7 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
         if (!item.preserveColors) {
           return colorFunc(`Custom Command (${truncatedCmd})`);
         } else {
-          return chalk.white(`Custom Command (${truncatedCmd}) [preserving colors]`);
+          return chalk2.white(`Custom Command (${truncatedCmd}) [preserving colors]`);
         }
     }
   };
@@ -1138,7 +1475,13 @@ var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
   }, undefined, true, undefined, this);
 };
 var ColorMenu = ({ items, onUpdate, onBack }) => {
-  const colorableItems = items.filter((item) => ["model", "git-branch", "git-changes", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "context-percentage-usable", "session-clock", "terminal-width", "version", "custom-text", "custom-command"].includes(item.type) && !(item.type === "custom-command" && item.preserveColors));
+  const [showSeparators, setShowSeparators] = useState(false);
+  const colorableItems = items.filter((item) => {
+    if (item.type === "separator") {
+      return showSeparators;
+    }
+    return ["model", "git-branch", "git-changes", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "context-percentage-usable", "session-clock", "terminal-width", "version", "custom-text", "custom-command"].includes(item.type) && !(item.type === "custom-command" && item.preserveColors);
+  });
   const [highlightedItemId, setHighlightedItemId] = useState(colorableItems[0]?.id || null);
   const [editingBackground, setEditingBackground] = useState(false);
   const hasNoItems = colorableItems.length === 0;
@@ -1153,6 +1496,17 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
       } else {
         onBack();
       }
+    } else if (input === "s" || input === "S") {
+      setShowSeparators(!showSeparators);
+      const newColorableItems = items.filter((item) => {
+        if (item.type === "separator") {
+          return !showSeparators;
+        }
+        return ["model", "git-branch", "git-changes", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "context-percentage-usable", "session-clock", "terminal-width", "version", "custom-text", "custom-command"].includes(item.type) && !(item.type === "custom-command" && item.preserveColors);
+      });
+      if (newColorableItems.length > 0) {
+        setHighlightedItemId(newColorableItems[0].id);
+      }
     } else if (input === "f" || input === "F") {
       if (colorableItems.length > 0) {
         setEditingBackground(!editingBackground);
@@ -1242,6 +1596,8 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
         return "Terminal Width";
       case "version":
         return "Version";
+      case "separator":
+        return `Separator (${item.character || "|"})`;
       case "custom-text":
         return `Custom Text (${item.customText || "Empty"})`;
       case "custom-command": {
@@ -1345,14 +1701,14 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
   let colorDisplay;
   if (editingBackground) {
     if (currentColor === "none") {
-      colorDisplay = chalk.gray("(no background)");
+      colorDisplay = chalk2.gray("(no background)");
     } else {
       const bgColorName = currentColor.replace(/^bg/, "").toLowerCase();
-      const bgFunc = chalk[currentColor];
-      colorDisplay = bgFunc ? bgFunc(` ${bgColorName} `) : chalk.white(currentColor);
+      const bgFunc = chalk2[currentColor];
+      colorDisplay = bgFunc ? bgFunc(` ${bgColorName} `) : chalk2.white(currentColor);
     }
   } else {
-    colorDisplay = chalk[currentColor] ? chalk[currentColor](currentColor) : chalk.white(currentColor);
+    colorDisplay = chalk2[currentColor] ? chalk2[currentColor](currentColor) : chalk2.white(currentColor);
   }
   return /* @__PURE__ */ jsxDEV(Box, {
     flexDirection: "column",
@@ -1361,7 +1717,7 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
         bold: true,
         children: [
           "Configure Colors ",
-          editingBackground && chalk.yellow("[Background Mode]")
+          editingBackground && chalk2.yellow("[Background Mode]")
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV(Text, {
@@ -1372,6 +1728,13 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
           ", (f) to toggle bg/fg, (b)old, (r)eset, ESC to go back"
         ]
       }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        dimColor: true,
+        children: [
+          "(s)how separators: ",
+          showSeparators ? chalk2.green("ON") : chalk2.gray("OFF")
+        ]
+      }, undefined, true, undefined, this),
       selectedItem && /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
         children: /* @__PURE__ */ jsxDEV(Text, {
@@ -1384,7 +1747,7 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
             colorList.length,
             "): ",
             colorDisplay,
-            selectedItem.bold && chalk.bold(" [BOLD]")
+            selectedItem.bold && chalk2.bold(" [BOLD]")
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this),
@@ -1408,24 +1771,14 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
           /* @__PURE__ */ jsxDEV(Text, {
             dimColor: true,
             wrap: "wrap",
-            children: 'If colors appear incorrect in the VSCode integrated terminal, the "Terminal › Integrated: Minimum Contrast Ratio"'
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(Text, {
-            dimColor: true,
-            wrap: "wrap",
-            children: "(`terminal.integrated.minimumContrastRatio`) setting is forcing a minimum contrast between foreground and background colors."
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(Text, {
-            dimColor: true,
-            wrap: "wrap",
-            children: "You can adjust this setting to 1 to disable the contrast enforcement, or use a standalone terminal for accurate colors."
+            children: 'If colors appear incorrect in the VSCode integrated terminal, the "Terminal › Integrated: Minimum Contrast Ratio" (`terminal.integrated.minimumContrastRatio`) setting is forcing a minimum contrast between foreground and background colors. You can adjust this setting to 1 to disable the contrast enforcement, or use a standalone terminal for accurate colors.'
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 };
-var FlexOptions = ({ settings, onUpdate, onBack }) => {
+var TerminalWidthOptions = ({ settings, onUpdate, onBack }) => {
   const [selectedOption, setSelectedOption] = useState(settings.flexMode || "full-minus-40");
   const [compactThreshold, setCompactThreshold] = useState(settings.compactThreshold || 60);
   const [editingThreshold, setEditingThreshold] = useState(false);
@@ -1455,10 +1808,10 @@ var FlexOptions = ({ settings, onUpdate, onBack }) => {
         setThresholdInput(String(compactThreshold));
         setEditingThreshold(false);
         setValidationError(null);
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         setThresholdInput(thresholdInput.slice(0, -1));
         setValidationError(null);
-      } else if (input && /\d/.test(input)) {
+      } else if (key.delete) {} else if (input && /\d/.test(input)) {
         const newValue = thresholdInput + input;
         if (newValue.length <= 2) {
           setThresholdInput(newValue);
@@ -1481,7 +1834,7 @@ NOTE: If /ide integration is enabled, it's not recommended to use this mode as s
     },
     {
       value: "full-minus-40",
-      label: "Full width minus 40",
+      label: "Full width minus 40 (default)",
       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."
     },
     {
@@ -1516,11 +1869,16 @@ NOTE: If /ide integration is enabled, it's not recommended to use this mode as s
     children: [
       /* @__PURE__ */ jsxDEV(Text, {
         bold: true,
-        children: "Flex Separator Width Options"
+        children: "Terminal Width Options"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        color: "white",
+        children: "These settings affect where long lines are truncated, and where right-alignment occurs when using flex separators"
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Text, {
         dimColor: true,
-        children: "Select how flex separators calculate available width"
+        wrap: "wrap",
+        children: "These settings are necessary because claude code does not currently provide an available width variable for the statusline and features like IDE integration, auto-compaction notices, and rate limit messages can all cause the statusline to wrap if we do not truncate it"
       }, undefined, false, undefined, this),
       editingThreshold ? /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
@@ -1652,9 +2010,9 @@ var GlobalOptionsMenu = ({ settings, onUpdate, onBack }) => {
       } else if (key.escape) {
         setPaddingInput(settings.defaultPadding || "");
         setEditingPadding(false);
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         setPaddingInput(paddingInput.slice(0, -1));
-      } else if (input) {
+      } else if (key.delete) {} else if (input) {
         setPaddingInput(paddingInput + input);
       }
     } else if (editingSeparator) {
@@ -1668,9 +2026,9 @@ var GlobalOptionsMenu = ({ settings, onUpdate, onBack }) => {
       } else if (key.escape) {
         setSeparatorInput(settings.defaultSeparator || "");
         setEditingSeparator(false);
-      } else if (key.backspace || key.delete) {
+      } else if (key.backspace) {
         setSeparatorInput(separatorInput.slice(0, -1));
-      } else if (input) {
+      } else if (key.delete) {} else if (input) {
         setSeparatorInput(separatorInput + input);
       }
     } else {
@@ -1855,7 +2213,7 @@ var GlobalOptionsMenu = ({ settings, onUpdate, onBack }) => {
                   }, undefined, false, undefined, this);
                 } else {
                   const bgColorName = bgColor.replace(/^bg/, "").toLowerCase();
-                  const bgFunc = chalk[bgColor];
+                  const bgFunc = chalk2[bgColor];
                   const display = bgFunc ? bgFunc(` ${bgColorName} `) : bgColorName;
                   return /* @__PURE__ */ jsxDEV(Text, {
                     children: display
@@ -1881,7 +2239,7 @@ var GlobalOptionsMenu = ({ settings, onUpdate, onBack }) => {
                     children: "(none)"
                   }, undefined, false, undefined, this);
                 } else {
-                  const fgFunc = chalk[fgColor];
+                  const fgFunc = chalk2[fgColor];
                   const display = fgFunc ? fgFunc(fgColor) : fgColor;
                   return /* @__PURE__ */ jsxDEV(Text, {
                     children: display
@@ -1936,17 +2294,7 @@ var GlobalOptionsMenu = ({ settings, onUpdate, onBack }) => {
                   /* @__PURE__ */ jsxDEV(Text, {
                     dimColor: true,
                     wrap: "wrap",
-                    children: 'If colors appear incorrect in the VSCode integrated terminal, the "Terminal › Integrated: Minimum Contrast Ratio"'
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Text, {
-                    dimColor: true,
-                    wrap: "wrap",
-                    children: "(`terminal.integrated.minimumContrastRatio`) setting is forcing a minimum contrast between foreground and background colors."
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Text, {
-                    dimColor: true,
-                    wrap: "wrap",
-                    children: "You can adjust this setting to 1 to disable the contrast enforcement, or use a standalone terminal for accurate colors."
+                    children: 'If colors appear incorrect in the VSCode integrated terminal, the "Terminal › Integrated: Minimum Contrast Ratio" (`terminal.integrated.minimumContrastRatio`) setting is forcing a minimum contrast between foreground and background colors. You can adjust this setting to 1 to disable the contrast enforcement, or use a standalone terminal for accurate colors.'
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this)
@@ -2051,8 +2399,8 @@ Continue?`;
       case "colors":
         setScreen("colors");
         break;
-      case "flex":
-        setScreen("flex");
+      case "terminalWidth":
+        setScreen("terminalWidth");
         break;
       case "globalOptions":
         setScreen("globalOptions");
@@ -2116,7 +2464,7 @@ Continue?`;
                 const menuMap = {
                   lines: 0,
                   colors: 1,
-                  flex: 2,
+                  terminalWidth: 2,
                   globalOptions: 3,
                   install: 4
                 };
@@ -2173,7 +2521,7 @@ Continue?`;
               setScreen("main");
             }
           }, undefined, false, undefined, this),
-          screen === "flex" && /* @__PURE__ */ jsxDEV(FlexOptions, {
+          screen === "terminalWidth" && /* @__PURE__ */ jsxDEV(TerminalWidthOptions, {
             settings,
             onUpdate: (updatedSettings) => {
               setSettings(updatedSettings);
@@ -2212,29 +2560,6 @@ function runTUI() {
 }
 
 // src/ccstatusline.ts
-import * as fs4 from "fs";
-import { promisify as promisify3 } from "util";
-var readFile6 = fs4.promises?.readFile || promisify3(fs4.readFile);
-chalk2.level = 3;
-function applyColors2(text, foregroundColor, backgroundColor, bold) {
-  let result = text;
-  if (foregroundColor && foregroundColor !== "dim") {
-    const fgFunc = chalk2[foregroundColor];
-    if (fgFunc) {
-      result = fgFunc(result);
-    }
-  }
-  if (backgroundColor && backgroundColor !== "none") {
-    const bgFunc = chalk2[backgroundColor];
-    if (bgFunc) {
-      result = bgFunc(result);
-    }
-  }
-  if (bold) {
-    result = chalk2.bold(result);
-  }
-  return result;
-}
 async function readStdin() {
   if (process.stdin.isTTY) {
     return null;
@@ -2257,548 +2582,28 @@ async function readStdin() {
     return null;
   }
 }
-function getItemDefaultColor(type) {
-  switch (type) {
-    case "model":
-      return "cyan";
-    case "git-branch":
-      return "magenta";
-    case "git-changes":
-      return "yellow";
-    case "session-clock":
-      return "yellow";
-    case "version":
-      return "green";
-    case "tokens-input":
-      return "blue";
-    case "tokens-output":
-      return "white";
-    case "tokens-cached":
-      return "cyan";
-    case "tokens-total":
-      return "cyan";
-    case "context-length":
-      return "gray";
-    case "context-percentage":
-      return "blue";
-    case "context-percentage-usable":
-      return "green";
-    case "terminal-width":
-      return "gray";
-    case "custom-text":
-      return "white";
-    case "custom-command":
-      return "white";
-    case "separator":
-      return "gray";
-    default:
-      return "white";
-  }
-}
-function getTerminalWidth() {
-  try {
-    const tty = execSync2("ps -o tty= -p $(ps -o ppid= -p $$)", {
-      encoding: "utf8",
-      stdio: ["pipe", "pipe", "ignore"],
-      shell: "/bin/sh"
-    }).trim();
-    if (tty && tty !== "??" && tty !== "?") {
-      const width = execSync2(`stty size < /dev/${tty} | awk '{print $2}'`, {
-        encoding: "utf8",
-        stdio: ["pipe", "pipe", "ignore"],
-        shell: "/bin/sh"
-      }).trim();
-      const parsed = parseInt(width, 10);
-      if (!isNaN(parsed) && parsed > 0) {
-        return parsed;
-      }
-    }
-  } catch {}
-  try {
-    const width = execSync2("tput cols 2>/dev/null", {
-      encoding: "utf8",
-      stdio: ["pipe", "pipe", "ignore"]
-    }).trim();
-    const parsed = parseInt(width, 10);
-    if (!isNaN(parsed) && parsed > 0) {
-      return parsed;
-    }
-  } catch {}
-  return null;
-}
-function getGitBranch() {
-  try {
-    const branch = execSync2("git branch --show-current 2>/dev/null", {
-      encoding: "utf8",
-      stdio: ["pipe", "pipe", "ignore"]
-    }).trim();
-    return branch || null;
-  } catch {
-    return null;
-  }
-}
-function getGitChanges() {
-  try {
-    let totalInsertions = 0;
-    let totalDeletions = 0;
-    const unstagedStat = execSync2("git diff --shortstat 2>/dev/null", {
-      encoding: "utf8",
-      stdio: ["pipe", "pipe", "ignore"]
-    }).trim();
-    const stagedStat = execSync2("git diff --cached --shortstat 2>/dev/null", {
-      encoding: "utf8",
-      stdio: ["pipe", "pipe", "ignore"]
-    }).trim();
-    if (unstagedStat) {
-      const insertMatch = unstagedStat.match(/(\d+) insertion/);
-      const deleteMatch = unstagedStat.match(/(\d+) deletion/);
-      totalInsertions += insertMatch?.[1] ? parseInt(insertMatch[1], 10) : 0;
-      totalDeletions += deleteMatch?.[1] ? parseInt(deleteMatch[1], 10) : 0;
-    }
-    if (stagedStat) {
-      const insertMatch = stagedStat.match(/(\d+) insertion/);
-      const deleteMatch = stagedStat.match(/(\d+) deletion/);
-      totalInsertions += insertMatch?.[1] ? parseInt(insertMatch[1], 10) : 0;
-      totalDeletions += deleteMatch?.[1] ? parseInt(deleteMatch[1], 10) : 0;
-    }
-    return { insertions: totalInsertions, deletions: totalDeletions };
-  } catch {
-    return null;
-  }
-}
-async function getSessionDuration(transcriptPath) {
-  try {
-    if (!fs4.existsSync(transcriptPath)) {
-      return null;
-    }
-    const content = await readFile6(transcriptPath, "utf-8");
-    const lines = content.trim().split(`
-`).filter((line) => line.trim());
-    if (lines.length === 0) {
-      return null;
-    }
-    let firstTimestamp = null;
-    let lastTimestamp = null;
-    for (const line of lines) {
-      try {
-        const data = JSON.parse(line);
-        if (data.timestamp) {
-          firstTimestamp = new Date(data.timestamp);
-          break;
-        }
-      } catch {}
-    }
-    for (let i = lines.length - 1;i >= 0; i--) {
-      try {
-        const data = JSON.parse(lines[i]);
-        if (data.timestamp) {
-          lastTimestamp = new Date(data.timestamp);
-          break;
-        }
-      } catch {}
-    }
-    if (!firstTimestamp || !lastTimestamp) {
-      return null;
-    }
-    const durationMs = lastTimestamp.getTime() - firstTimestamp.getTime();
-    const totalMinutes = Math.floor(durationMs / (1000 * 60));
-    if (totalMinutes < 1) {
-      return "<1m";
-    }
-    const hours = Math.floor(totalMinutes / 60);
-    const minutes = totalMinutes % 60;
-    if (hours === 0) {
-      return `${minutes}m`;
-    } else if (minutes === 0) {
-      return `${hours}hr`;
-    } else {
-      return `${hours}hr ${minutes}m`;
-    }
-  } catch {
-    return null;
-  }
-}
-async function getTokenMetrics(transcriptPath) {
-  try {
-    if (!fs4.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;
-    let contextLength = 0;
-    let mostRecentMainChainEntry = null;
-    let mostRecentTimestamp = null;
-    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;
-          if (data.isSidechain !== true && data.timestamp) {
-            const entryTime = new Date(data.timestamp);
-            if (!mostRecentTimestamp || entryTime > mostRecentTimestamp) {
-              mostRecentTimestamp = entryTime;
-              mostRecentMainChainEntry = data;
-            }
-          }
-        }
-      } catch {}
-    }
-    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;
-    return { inputTokens, outputTokens, cachedTokens, totalTokens, contextLength };
-  } catch {
-    return { inputTokens: 0, outputTokens: 0, cachedTokens: 0, totalTokens: 0, contextLength: 0 };
-  }
-}
-function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration) {
-  const applyColorsWithOverride = (text, foregroundColor, backgroundColor, bold) => {
-    let fgColor = foregroundColor;
-    if (settings.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
-      fgColor = settings.overrideForegroundColor;
-    }
-    let bgColor = backgroundColor;
-    if (settings.overrideBackgroundColor && settings.overrideBackgroundColor !== "none") {
-      bgColor = settings.overrideBackgroundColor;
-    }
-    const shouldBold = settings.globalBold || bold;
-    return applyColors2(text, fgColor, bgColor, shouldBold);
-  };
-  const detectedWidth = getTerminalWidth();
-  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 || 60;
-      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) => {
-    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 items) {
-    switch (item.type) {
-      case "model":
-        if (data.model) {
-          const text = item.rawValue ? data.model.display_name : `Model: ${data.model.display_name}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "cyan", item.backgroundColor, item.bold), type: "model", item });
-        }
-        break;
-      case "git-branch":
-        const branch = getGitBranch();
-        if (branch) {
-          const text = item.rawValue ? branch : `⎇ ${branch}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "magenta", item.backgroundColor, item.bold), type: "git-branch", item });
-        }
-        break;
-      case "git-changes":
-        const changes = getGitChanges();
-        if (changes !== null) {
-          const changeStr = `(+${changes.insertions},-${changes.deletions})`;
-          elements.push({ content: applyColorsWithOverride(changeStr, item.color || "yellow", item.backgroundColor, item.bold), type: "git-changes", item });
-        }
-        break;
-      case "tokens-input":
-        if (tokenMetrics) {
-          const text = item.rawValue ? formatTokens(tokenMetrics.inputTokens) : `In: ${formatTokens(tokenMetrics.inputTokens)}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "blue", item.backgroundColor, item.bold), type: "tokens-input", item });
-        }
-        break;
-      case "tokens-output":
-        if (tokenMetrics) {
-          const text = item.rawValue ? formatTokens(tokenMetrics.outputTokens) : `Out: ${formatTokens(tokenMetrics.outputTokens)}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "white", item.backgroundColor, item.bold), type: "tokens-output", item });
-        }
-        break;
-      case "tokens-cached":
-        if (tokenMetrics) {
-          const text = item.rawValue ? formatTokens(tokenMetrics.cachedTokens) : `Cached: ${formatTokens(tokenMetrics.cachedTokens)}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "cyan", item.backgroundColor, item.bold), type: "tokens-cached", item });
-        }
-        break;
-      case "tokens-total":
-        if (tokenMetrics) {
-          const text = item.rawValue ? formatTokens(tokenMetrics.totalTokens) : `Total: ${formatTokens(tokenMetrics.totalTokens)}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "cyan", item.backgroundColor, item.bold), type: "tokens-total", item });
-        }
-        break;
-      case "context-length":
-        if (tokenMetrics) {
-          const text = item.rawValue ? formatTokens(tokenMetrics.contextLength) : `Ctx: ${formatTokens(tokenMetrics.contextLength)}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "gray", item.backgroundColor, item.bold), type: "context-length", item });
-        }
-        break;
-      case "context-percentage":
-        if (tokenMetrics) {
-          const percentage = Math.min(100, tokenMetrics.contextLength / 200000 * 100);
-          const text = item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx: ${percentage.toFixed(1)}%`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "blue", item.backgroundColor, item.bold), type: "context-percentage", item });
-        }
-        break;
-      case "context-percentage-usable":
-        if (tokenMetrics) {
-          const percentage = Math.min(100, tokenMetrics.contextLength / 160000 * 100);
-          const text = item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx(u): ${percentage.toFixed(1)}%`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "green", item.backgroundColor, item.bold), type: "context-percentage-usable", item });
-        }
-        break;
-      case "terminal-width":
-        const width = terminalWidth || getTerminalWidth();
-        if (width) {
-          const text = item.rawValue ? `${width}` : `Term: ${width}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "gray", item.backgroundColor, item.bold), type: "terminal-width", item });
-        }
-        break;
-      case "session-clock":
-        if (sessionDuration) {
-          const text = item.rawValue ? sessionDuration : `Session: ${sessionDuration}`;
-          elements.push({ content: applyColorsWithOverride(text, item.color || "yellow", item.backgroundColor, item.bold), type: "session-clock", item });
-        }
-        break;
-      case "version":
-        const versionString = data.version || "Unknown";
-        const versionText = item.rawValue ? versionString : `Version: ${versionString}`;
-        elements.push({ content: applyColorsWithOverride(versionText, item.color || "green", item.backgroundColor, item.bold), type: "version", item });
-        break;
-      case "separator":
-        const lastElement = elements[elements.length - 1];
-        if (elements.length > 0 && lastElement && lastElement.type !== "separator") {
-          const sepChar = item.character || "|";
-          let sepText;
-          if (sepChar === ",") {
-            sepText = `${sepChar} `;
-          } else if (sepChar === " ") {
-            sepText = " ";
-          } else {
-            sepText = ` ${sepChar} `;
-          }
-          const sepContent = applyColorsWithOverride(sepText, item.color || "gray", item.backgroundColor, item.bold);
-          elements.push({ content: sepContent, type: "separator", item });
-        }
-        break;
-      case "flex-separator":
-        elements.push({ content: "FLEX", type: "flex-separator", item });
-        hasFlexSeparator = true;
-        break;
-      case "custom-text":
-        const customText = item.customText || "";
-        elements.push({ content: applyColorsWithOverride(customText, item.color || "white", item.backgroundColor, item.bold), type: "custom-text", item });
-        break;
-      case "custom-command":
-        if (item.commandPath) {
-          try {
-            const timeout = item.timeout || 1000;
-            const output = execSync2(item.commandPath, {
-              encoding: "utf8",
-              input: JSON.stringify(data),
-              stdio: ["pipe", "pipe", "ignore"],
-              timeout
-            }).trim();
-            if (output) {
-              let finalOutput = output;
-              if (item.maxWidth && item.maxWidth > 0) {
-                const plainLength = output.replace(/\x1b\[[0-9;]*m/g, "").length;
-                if (plainLength > item.maxWidth) {
-                  let truncated = "";
-                  let currentLength = 0;
-                  let inAnsiCode = false;
-                  let ansiBuffer = "";
-                  for (let i = 0;i < output.length; i++) {
-                    const char = output[i];
-                    if (char === "\x1B") {
-                      inAnsiCode = true;
-                      ansiBuffer = char;
-                    } else if (inAnsiCode) {
-                      ansiBuffer += char;
-                      if (char === "m") {
-                        truncated += ansiBuffer;
-                        inAnsiCode = false;
-                        ansiBuffer = "";
-                      }
-                    } else {
-                      if (currentLength < item.maxWidth) {
-                        truncated += char;
-                        currentLength++;
-                      } else {
-                        break;
-                      }
-                    }
-                  }
-                  finalOutput = truncated;
-                }
-              }
-              if (!item.preserveColors) {
-                const stripped = finalOutput.replace(/\x1b\[[0-9;]*m/g, "");
-                elements.push({ content: applyColorsWithOverride(stripped, item.color || "white", item.backgroundColor, item.bold), type: "custom-command", item });
-              } else {
-                elements.push({ content: finalOutput, type: "custom-command", item });
-              }
-            }
-          } catch {}
-        }
-        break;
-    }
-  }
-  if (elements.length === 0)
-    return "";
-  while (elements.length > 0 && elements[elements.length - 1]?.type === "separator") {
-    elements.pop();
-  }
-  const finalElements = [];
-  const padding = settings.defaultPadding || "";
-  const defaultSep = settings.defaultSeparator || "";
-  elements.forEach((elem, index) => {
-    if (defaultSep && index > 0) {
-      if (settings.inheritSeparatorColors && index > 0) {
-        const prevElem = elements[index - 1];
-        if (prevElem && prevElem.item) {
-          const itemColor = prevElem.item.color || getItemDefaultColor(prevElem.item.type);
-          const coloredSep = applyColorsWithOverride(defaultSep, itemColor, prevElem.item.backgroundColor, prevElem.item.bold);
-          finalElements.push(coloredSep);
-        } else {
-          finalElements.push(defaultSep);
-        }
-      } else if (settings.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" || settings.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
-        const coloredSep = applyColorsWithOverride(defaultSep, undefined, undefined);
-        finalElements.push(coloredSep);
-      } else {
-        finalElements.push(defaultSep);
-      }
-    }
-    if (elem.type === "separator" || elem.type === "flex-separator") {
-      finalElements.push(elem.content);
-    } else {
-      const hasColorOverride = settings.overrideBackgroundColor && settings.overrideBackgroundColor !== "none" || settings.overrideForegroundColor && settings.overrideForegroundColor !== "none";
-      if (padding && (elem.item?.backgroundColor || hasColorOverride)) {
-        const paddedContent = applyColorsWithOverride(padding, undefined, elem.item?.backgroundColor) + elem.content + applyColorsWithOverride(padding, undefined, elem.item?.backgroundColor);
-        finalElements.push(paddedContent);
-      } else {
-        finalElements.push(padding + elem.content + padding);
-      }
-    }
-  });
-  let statusLine = "";
-  if (hasFlexSeparator && terminalWidth) {
-    const parts = [[]];
-    let currentPart = 0;
-    for (let i = 0;i < finalElements.length; i++) {
-      const elem = finalElements[i];
-      if (elem === "FLEX" || elements[i] && elements[i]?.type === "flex-separator") {
-        currentPart++;
-        parts[currentPart] = [];
-      } else {
-        parts[currentPart]?.push(elem);
-      }
-    }
-    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++) {
-      const part = parts[i];
-      if (part) {
-        statusLine += part.join("");
-      }
-      if (i < parts.length - 1) {
-        const spaces = spacePerFlex + (i < extraSpace ? 1 : 0);
-        statusLine += " ".repeat(spaces);
-      }
-    }
-  } else {
-    if (hasFlexSeparator && !terminalWidth) {
-      statusLine = finalElements.map((e) => e === "FLEX" ? chalk2.gray(" | ") : e).join("");
-    } else {
-      statusLine = finalElements.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) {
-  const settings = await loadSettings();
-  let lines = [];
-  if (settings.lines) {
-    lines = settings.lines;
-  } else if (settings.items) {
-    lines = [settings.items];
-  } else {
-    lines = [[]];
-  }
-  const hasTokenItems = lines.some((line) => line.some((item) => ["tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "context-percentage-usable"].includes(item.type)));
-  const hasSessionClock = lines.some((line) => line.some((item) => item.type === "session-clock"));
-  let tokenMetrics = null;
-  if (hasTokenItems && data.transcript_path) {
-    tokenMetrics = await getTokenMetrics(data.transcript_path);
+async function renderMultipleLines(data) {
+  const settings = await loadSettings();
+  let lines = settings.lines || (settings.items ? [settings.items] : [[]]);
+  const hasTokenItems = lines.some((line) => line.some((item) => ["tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "context-percentage-usable"].includes(item.type)));
+  const hasSessionClock = lines.some((line) => line.some((item) => item.type === "session-clock"));
+  let tokenMetrics = null;
+  if (hasTokenItems && data.transcript_path) {
+    tokenMetrics = await getTokenMetrics(data.transcript_path);
   }
   let sessionDuration = null;
   if (hasSessionClock && data.transcript_path) {
     sessionDuration = await getSessionDuration(data.transcript_path);
   }
-  for (let i = 0;i < lines.length; i++) {
-    const lineItems = lines[i];
+  const context = {
+    data,
+    tokenMetrics,
+    sessionDuration,
+    isPreview: false
+  };
+  for (const lineItems of lines) {
     if (lineItems && lineItems.length > 0) {
-      const line = renderSingleLine2(lineItems, settings, data, tokenMetrics, sessionDuration);
+      const line = renderStatusLine(lineItems, settings, context);
       const outputLine = line.replace(/ /g, " ");
       console.log(outputLine);
     }
@@ -2810,7 +2615,7 @@ async function main() {
     if (input && input.trim() !== "") {
       try {
         const data = JSON.parse(input);
-        await renderStatusLine(data);
+        await renderMultipleLines(data);
       } catch (error) {
         console.error("Error parsing JSON:", error);
         process.exit(1);