ccstatusline 2.0.7 → 2.0.9

package/README.md

@@ -42,6 +42,12 @@
 
 ## 🆕 Recent Updates
 
+### v2.0.8 - Powerline Auto-Alignment
+
+![Powerline Auto-Alignment](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/autoAlign.png)
+
+- **🎯 Widget Alignment** - Auto-align widgets across multiple status lines in Powerline mode for a clean, columnar layout (toggle with 'a' in Powerline Setup)
+
 ### v2.0.7 - Current Working Directory & Session Cost
 
 ![Current Working Directory and Session Cost](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/cwdAndSessionCost.png)
@@ -88,7 +94,7 @@
 - **⚡ Powerline Support** - Beautiful Powerline-style rendering with arrow separators, caps, and custom fonts
 - **📐 Multi-line Support** - Configure up to 3 independent status lines
 - **🖥️ Interactive TUI** - Built-in configuration interface using React/Ink
-- **⚙️ Global Options** - Apply consistent formatting across all items (padding, separators, bold, background)
+- **⚙️ Global Options** - Apply consistent formatting across all widgets (padding, separators, bold, background)
 - **🚀 Cross-platform** - Works seamlessly with both Bun and Node.js
 - **📏 Smart Width Detection** - Automatically adapts to terminal width with flex separators
 - **⚡ Zero Config** - Sensible defaults that work out of the box
@@ -111,10 +117,10 @@ bunx ccstatusline@latest
 
 The interactive configuration tool provides a terminal UI where you can:
 - Configure up to 3 separate status lines
-- Add/remove/reorder status line items
-- Customize colors for each element
+- Add/remove/reorder status line widgets
+- Customize colors for each widget
 - Configure flex separator behavior
-- Edit custom text items
+- Edit custom text widgets
 - Install/uninstall to Claude Code settings
 - Preview your status line in real-time
 
@@ -126,13 +132,15 @@ The interactive configuration tool provides a terminal UI where you can:
 
 Once configured, ccstatusline automatically formats your Claude Code status line. The status line appears at the bottom of your terminal during Claude Code sessions.
 
-### 📊 Available Status Items
+### 📊 Available Widgets
 
 - **Model Name** - Shows the current Claude model (e.g., "Claude 3.5 Sonnet")
 - **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")
+- **Session Cost** - Shows total session cost in USD (e.g., "$1.23")
 - **Block Timer** - Shows time elapsed in current 5-hour block or progress bar
+- **Current Working Directory** - Shows current working directory with configurable path segments
 - **Version** - Shows Claude Code version
 - **Output Style** - Shows the currently set output style in Claude Code
 - **Tokens Input** - Shows input tokens used
@@ -145,7 +153,7 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 - **Terminal Width** - Shows detected terminal width (for debugging)
 - **Custom Text** - Add your own custom text to the status line
 - **Custom Command** - Execute shell commands and display their output (refreshes whenever the statusline is updated by Claude Code)
-- **Separator** - Visual divider between items (customizable: |, -, comma, space)
+- **Separator** - Visual divider between widgets (customizable: |, -, comma, space)
 - **Flex Separator** - Expands to fill available space
 
 ---
@@ -160,13 +168,13 @@ These settings affect where long lines are truncated, and where right-alignment
 
 ### ⚙️ Global Options
 
-Configure global formatting preferences that apply to all status items:
+Configure global formatting preferences that apply to all widgets:
 
 ![Global Options](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/global.png)
 
 #### Default Padding & Separators
-- **Default Padding** - Add consistent padding to the left and right of each item
-- **Default Separator** - Automatically insert a separator between all items
+- **Default Padding** - Add consistent padding to the left and right of each widget
+- **Default Separator** - Automatically insert a separator between all widgets
   - Press **(p)** to edit padding
   - Press **(s)** to edit separator
 
@@ -175,18 +183,18 @@ Configure global formatting preferences that apply to all status items:
 
 - **Inherit Colors** - Default separators inherit foreground and background colors from the preceding widget
   - Press **(i)** to toggle
-- **Global Bold** - Apply bold formatting to all text regardless of individual item settings
+- **Global Bold** - Apply bold formatting to all text regardless of individual widget settings
   - Press **(o)** to toggle
-- **Override Foreground Color** - Force all items to use the same text color
+- **Override Foreground Color** - Force all widgets to use the same text color
   - Press **(f)** to cycle through colors
   - Press **(g)** to clear override
-- **Override Background Color** - Force all items to use the same background color
+- **Override Background Color** - Force all widgets to use the same background color
   - Press **(b)** to cycle through colors
   - Press **(c)** to clear override
 
 </details>
 
-> 💡 **Note:** These settings are applied during rendering and don't add items to your widget list. They provide a consistent look across your entire status line without modifying individual item configurations.
+> 💡 **Note:** These settings are applied during rendering and don't add widgets to your widget list. They provide a consistent look across your entire status line without modifying individual widget configurations.
 
 > ⚠️ **VSCode Users:** 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.
 
@@ -206,11 +214,11 @@ The Block Timer widget helps you track your progress through Claude Code's 5-hou
 - Floors block start time to the hour for consistent tracking
 - Shows "Block: 3hr 45m" in normal mode or just "3hr 45m" in raw value mode
 - Progress bars show completion percentage (e.g., "[████████████████████████░░░░░░░░] 73.9%")
-- Toggle between modes with the **(p)** key in the items editor
+- Toggle between modes with the **(p)** key in the widgets editor
 
 ### 🔤 Raw Value Mode
 
-Some items support "raw value" mode which displays just the value without a label:
+Some widgets 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: `Block: 3hr 45m` → Raw: `3hr 45m`

package/dist/ccstatusline.js

@@ -50535,7 +50535,8 @@ var PowerlineConfigSchema = exports_external.object({
   separatorInvertBackground: exports_external.array(exports_external.boolean()).default([false]),
   startCaps: exports_external.array(exports_external.string()).default([]),
   endCaps: exports_external.array(exports_external.string()).default([]),
-  theme: exports_external.string().optional()
+  theme: exports_external.string().optional(),
+  autoAlign: exports_external.boolean().default(false)
 });
 
 // src/types/Widget.ts
@@ -50598,7 +50599,8 @@ var SettingsSchema = exports_external.object({
     separatorInvertBackground: [false],
     startCaps: [],
     endCaps: [],
-    theme: undefined
+    theme: undefined,
+    autoAlign: false
   }),
   updatemessage: exports_external.object({
     message: exports_external.string().nullable().optional(),
@@ -51035,7 +51037,7 @@ import { execSync as execSync3 } from "child_process";
 import * as fs5 from "fs";
 import * as path4 from "path";
 var __dirname = "/Users/sirmalloc/Projects/Personal/ccstatusline/src/utils";
-var PACKAGE_VERSION = "2.0.7";
+var PACKAGE_VERSION = "2.0.9";
 function getPackageVersion() {
   if (/^\d+\.\d+\.\d+/.test(PACKAGE_VERSION)) {
     return PACKAGE_VERSION;
@@ -52036,7 +52038,7 @@ function formatTokens(count) {
     return `${(count / 1000).toFixed(1)}k`;
   return count.toString();
 }
-function renderPowerlineStatusLine(widgets, settings, context, lineIndex = 0, globalSeparatorOffset = 0) {
+function renderPowerlineStatusLine(widgets, settings, context, lineIndex = 0, globalSeparatorOffset = 0, preRenderedWidgets, preCalculatedMaxWidths) {
   const powerlineConfig = settings.powerline;
   const config2 = powerlineConfig ?? {};
   const separators = config2.separators ?? [""];
@@ -52099,12 +52101,13 @@ function renderPowerlineStatusLine(widgets, settings, context, lineIndex = 0, gl
     if (widget.type === "separator" || widget.type === "flex-separator") {
       continue;
     }
-    try {
-      const widgetImpl = getWidget(widget.type);
-      widgetText = widgetImpl.render(widget, context, settings) ?? "";
-      defaultColor = widgetImpl.getDefaultColor();
-    } catch {
-      continue;
+    const preRendered = preRenderedWidgets[i];
+    if (preRendered?.content) {
+      widgetText = preRendered.content;
+      try {
+        const widgetImpl = getWidget(widget.type);
+        defaultColor = widgetImpl.getDefaultColor();
+      } catch {}
     }
     if (widgetText) {
       const padding = settings.defaultPadding ?? "";
@@ -52143,6 +52146,20 @@ function renderPowerlineStatusLine(widgets, settings, context, lineIndex = 0, gl
   }
   if (widgetElements.length === 0)
     return "";
+  const autoAlign = config2.autoAlign;
+  if (autoAlign) {
+    for (let i = 0;i < widgetElements.length; i++) {
+      const element = widgetElements[i];
+      const maxWidth = preCalculatedMaxWidths[i];
+      if (element && maxWidth !== undefined) {
+        const currentLength = element.content.replace(ANSI_REGEX, "").length;
+        const paddingNeeded = maxWidth - currentLength;
+        if (paddingNeeded > 0) {
+          element.content += " ".repeat(paddingNeeded);
+        }
+      }
+    }
+  }
   let result = "";
   if (startCap && widgetElements.length > 0) {
     const firstWidget = widgetElements[0];
@@ -52303,18 +52320,74 @@ function formatSeparator(sep) {
   }
   return sep;
 }
-function renderStatusLineWithInfo(widgets, settings, context) {
-  const line = renderStatusLine(widgets, settings, context);
+function preRenderAllWidgets(allLinesWidgets, settings, context) {
+  const preRenderedLines = [];
+  for (const lineWidgets of allLinesWidgets) {
+    const preRenderedLine = [];
+    for (const widget of lineWidgets) {
+      if (widget.type === "separator" || widget.type === "flex-separator") {
+        preRenderedLine.push({
+          content: "",
+          plainLength: 0,
+          widget
+        });
+        continue;
+      }
+      let widgetText = "";
+      try {
+        const widgetImpl = getWidget(widget.type);
+        widgetText = widgetImpl.render(widget, context, settings) ?? "";
+      } catch {
+        preRenderedLine.push({
+          content: "",
+          plainLength: 0,
+          widget
+        });
+        continue;
+      }
+      const plainLength = widgetText.replace(ANSI_REGEX, "").length;
+      preRenderedLine.push({
+        content: widgetText,
+        plainLength,
+        widget
+      });
+    }
+    preRenderedLines.push(preRenderedLine);
+  }
+  return preRenderedLines;
+}
+function calculateMaxWidthsFromPreRendered(preRenderedLines, settings) {
+  const maxWidths = [];
+  const defaultPadding = settings.defaultPadding ?? "";
+  const paddingLength = defaultPadding.length;
+  for (const preRenderedLine of preRenderedLines) {
+    const filteredWidgets = preRenderedLine.filter((w) => w.widget.type !== "separator" && w.widget.type !== "flex-separator" && w.content);
+    for (let pos = 0;pos < filteredWidgets.length; pos++) {
+      const widget = filteredWidgets[pos];
+      if (!widget)
+        continue;
+      const totalWidth = widget.plainLength + paddingLength * 2;
+      const currentMax = maxWidths[pos];
+      if (currentMax === undefined) {
+        maxWidths[pos] = totalWidth;
+      } else {
+        maxWidths[pos] = Math.max(currentMax, totalWidth);
+      }
+    }
+  }
+  return maxWidths;
+}
+function renderStatusLineWithInfo(widgets, settings, context, preRenderedWidgets, preCalculatedMaxWidths) {
+  const line = renderStatusLine(widgets, settings, context, preRenderedWidgets, preCalculatedMaxWidths);
   const wasTruncated = line.includes("...");
   return { line, wasTruncated };
 }
-function renderStatusLine(widgets, settings, context) {
+function renderStatusLine(widgets, settings, context, preRenderedWidgets, preCalculatedMaxWidths) {
   const colorLevel = getColorLevelString(settings.colorLevel);
   const powerlineSettings = settings.powerline;
   const isPowerlineMode = Boolean(powerlineSettings?.enabled);
-  if (isPowerlineMode) {
-    return renderPowerlineStatusLine(widgets, settings, context, context.lineIndex ?? 0, context.globalSeparatorIndex ?? 0);
-  }
+  if (isPowerlineMode)
+    return renderPowerlineStatusLine(widgets, settings, context, context.lineIndex ?? 0, context.globalSeparatorIndex ?? 0, preRenderedWidgets, preCalculatedMaxWidths);
   const applyColorsWithOverride = (text, foregroundColor, backgroundColor, bold) => {
     let fgColor = foregroundColor;
     if (settings.overrideForegroundColor && settings.overrideForegroundColor !== "none") {
@@ -52393,10 +52466,17 @@ function renderStatusLine(widgets, settings, context) {
       continue;
     }
     try {
-      const widgetImpl = getWidget(widget.type);
-      const widgetText = widgetImpl.render(widget, context, settings);
+      let widgetText;
+      let defaultColor = "white";
+      const preRendered = preRenderedWidgets[i];
+      if (preRendered?.content) {
+        widgetText = preRendered.content;
+        try {
+          const widgetImpl = getWidget(widget.type);
+          defaultColor = widgetImpl.getDefaultColor();
+        } catch {}
+      }
       if (widgetText) {
-        const defaultColor = widgetImpl.getDefaultColor();
         if (widget.type === "custom-command" && widget.preserveColors) {
           let finalOutput = widgetText;
           if (widget.maxWidth && widget.maxWidth > 0) {
@@ -53815,12 +53895,12 @@ var ColorMenu = ({ widgets, lineIndex, settings, onUpdate, onBack }) => {
           marginTop: 1,
           children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
             dimColor: true,
-            children: "No colorable items in the status line."
+            children: "No colorable widgets in the status line."
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Text, {
           dimColor: true,
-          children: "Add a Model or Git Branch item first."
+          children: "Add a widget first to continue."
         }, undefined, false, undefined, this),
         /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(Box_default, {
           marginTop: 1,
@@ -54244,7 +54324,7 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
         dimColor: true,
-        children: "Configure automatic padding and separators between items"
+        children: "Configure automatic padding and separators between widgets"
       }, undefined, false, undefined, this),
       isPowerlineEnabled && /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
         marginTop: 1,
@@ -54262,7 +54342,7 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
           /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
             children: [
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
-                children: "Enter default padding (applied to left and right of each item): "
+                children: "Enter default padding (applied to left and right of each widget): "
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
                 color: "cyan",
@@ -54281,7 +54361,7 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
           /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Box_default, {
             children: [
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
-                children: "Enter default separator (placed between items): "
+                children: "Enter default separator (placed between widgets): "
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
                 color: "cyan",
@@ -54492,7 +54572,7 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
                 dimColor: true,
                 wrap: "wrap",
-                children: "Note: These settings are applied during rendering and don't add items to your widget list."
+                children: "Note: These settings are applied during rendering and don't add widgets to your widget list."
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
                 dimColor: true,
@@ -54507,7 +54587,7 @@ var GlobalOverridesMenu = ({ settings, onUpdate, onBack }) => {
               /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Text, {
                 dimColor: true,
                 wrap: "wrap",
-                children: "• Override colors: All items will use these colors instead of their configured colors"
+                children: "• Override colors: All widgets will use these colors instead of their configured colors"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
@@ -54934,7 +55014,7 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
         marginBottom: 1,
         children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
           dimColor: true,
-          children: "↑↓ to move item, ESC or Enter to exit move mode"
+          children: "↑↓ to move widget, ESC or Enter to exit move mode"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Box_default, {
         flexDirection: "column",
@@ -54967,7 +55047,7 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
         flexDirection: "column",
         children: widgets.length === 0 ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Text, {
           dimColor: true,
-          children: "No items. Press 'a' to add one."
+          children: "No widgets. Press 'a' to add one."
         }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(jsx_dev_runtime8.Fragment, {
           children: [
             widgets.map((widget, index) => {
@@ -55018,7 +55098,7 @@ var ItemsEditor = ({ widgets, onUpdate, onBack, lineNumber, settings }) => {
                 dimColor: true,
                 children: (() => {
                   if (currentWidget.type === "separator") {
-                    return "A separator character between status line items";
+                    return "A separator character between status line widgets";
                   } else if (currentWidget.type === "flex-separator") {
                     return "Expands to fill available terminal width";
                   } else {
@@ -55138,7 +55218,7 @@ var LineSelector = ({ lines, onSelect, onBack, initialSelection = 0, title, bloc
               children: [
                 selectedIndex === 0 ? "▶  " : "   ",
                 "☰ Line 1",
-                lines[0] && lines[0].length > 0 ? ` (${lines[0].length} items)` : " (empty)"
+                lines[0] && lines[0].length > 0 ? ` (${lines[0].length} widgets)` : " (empty)"
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
@@ -55148,7 +55228,7 @@ var LineSelector = ({ lines, onSelect, onBack, initialSelection = 0, title, bloc
               children: [
                 selectedIndex === 1 ? "▶  " : "   ",
                 "☰ Line 2",
-                lines[1] && lines[1].length > 0 ? ` (${lines[1].length} items)` : " (empty)"
+                lines[1] && lines[1].length > 0 ? ` (${lines[1].length} widgets)` : " (empty)"
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
@@ -55158,7 +55238,7 @@ var LineSelector = ({ lines, onSelect, onBack, initialSelection = 0, title, bloc
               children: [
                 selectedIndex === 2 ? "▶  " : "   ",
                 "☰ Line 3",
-                lines[2] && lines[2].length > 0 ? ` (${lines[2].length} items)` : " (empty)"
+                lines[2] && lines[2].length > 0 ? ` (${lines[2].length} widgets)` : " (empty)"
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
@@ -55908,6 +55988,9 @@ var PowerlineSetup = ({
         }
       } else if (input === "i" || input === "I") {
         setConfirmingFontInstall(true);
+      } else if ((input === "a" || input === "A") && powerlineConfig.enabled) {
+        const newConfig = { ...powerlineConfig, autoAlign: !powerlineConfig.autoAlign };
+        onUpdate({ ...settings, powerline: newConfig });
       }
     }
   });
@@ -56175,7 +56258,7 @@ var PowerlineSetup = ({
             flexDirection: "column",
             children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
               children: [
-                "   Font Status: ",
+                "    Font Status: ",
                 powerlineFontStatus.installed ? /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
                   children: [
                     /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
@@ -56205,7 +56288,7 @@ var PowerlineSetup = ({
           /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
             children: [
               /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
-                children: "Powerline Mode: "
+                children: " Powerline Mode: "
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
                 color: powerlineConfig.enabled ? "green" : "red",
@@ -56217,14 +56300,33 @@ var PowerlineSetup = ({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          powerlineConfig.enabled && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
-            flexDirection: "column",
-            marginTop: 1,
-            children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
-              dimColor: true,
-              children: "When enabled, global overrides are disabled and powerline separators are used"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
+          powerlineConfig.enabled && /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                    children: "  Align Widgets: "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                    color: powerlineConfig.autoAlign ? "green" : "red",
+                    children: powerlineConfig.autoAlign ? "✓ Enabled  " : "✗ Disabled "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                    dimColor: true,
+                    children: " - Press (a) to toggle"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
+                flexDirection: "column",
+                marginTop: 1,
+                children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Text, {
+                  dimColor: true,
+                  children: "When enabled, global overrides are disabled and powerline separators are used"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(Box_default, {
             marginTop: 1,
             flexDirection: "column",
@@ -56291,27 +56393,30 @@ var PowerlineSetup = ({
 // src/tui/components/StatusLinePreview.tsx
 var import_react42 = __toESM(require_react(), 1);
 var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
-var renderSingleLine = (widgets, terminalWidth, widthDetectionAvailable, settings, lineIndex, globalSeparatorIndex) => {
+var renderSingleLine = (widgets, terminalWidth, widthDetectionAvailable, settings, lineIndex, globalSeparatorIndex, preRenderedWidgets, preCalculatedMaxWidths) => {
   const context = {
     terminalWidth,
     isPreview: true,
     lineIndex,
     globalSeparatorIndex
   };
-  return renderStatusLineWithInfo(widgets, settings, context);
+  return renderStatusLineWithInfo(widgets, settings, context, preRenderedWidgets, preCalculatedMaxWidths);
 };
 var StatusLinePreview = ({ lines, terminalWidth, settings, onTruncationChange }) => {
   const widthDetectionAvailable = import_react42.default.useMemo(() => canDetectTerminalWidth(), []);
   const { renderedLines, anyTruncated } = import_react42.default.useMemo(() => {
     if (!settings)
       return { renderedLines: [], anyTruncated: false };
+    const preRenderedLines = preRenderAllWidgets(lines, settings, { terminalWidth, isPreview: true });
+    const preCalculatedMaxWidths = calculateMaxWidthsFromPreRendered(preRenderedLines, settings);
     let globalSeparatorIndex = 0;
     const result = [];
     let truncated = false;
     for (let i = 0;i < lines.length; i++) {
       const lineItems = lines[i];
       if (lineItems && lineItems.length > 0) {
-        const renderResult = renderSingleLine(lineItems, terminalWidth, widthDetectionAvailable, settings, i, globalSeparatorIndex);
+        const preRenderedWidgets = preRenderedLines[i] ?? [];
+        const renderResult = renderSingleLine(lineItems, terminalWidth, widthDetectionAvailable, settings, i, globalSeparatorIndex, preRenderedWidgets, preCalculatedMaxWidths);
         result.push(renderResult.line);
         if (renderResult.wasTruncated) {
           truncated = true;
@@ -58253,12 +58358,15 @@ async function renderMultipleLines(data) {
     blockMetrics,
     isPreview: false
   };
+  const preRenderedLines = preRenderAllWidgets(lines, settings, context);
+  const preCalculatedMaxWidths = calculateMaxWidthsFromPreRendered(preRenderedLines, settings);
   let globalSeparatorIndex = 0;
   for (let i = 0;i < lines.length; i++) {
     const lineItems = lines[i];
     if (lineItems && lineItems.length > 0) {
       const lineContext = { ...context, lineIndex: i, globalSeparatorIndex };
-      const line = renderStatusLine(lineItems, settings, lineContext);
+      const preRenderedWidgets = preRenderedLines[i] ?? [];
+      const line = renderStatusLine(lineItems, settings, lineContext, preRenderedWidgets, preCalculatedMaxWidths);
       const strippedLine = line.replace(/\x1b\[[0-9;]*m/g, "").trim();
       if (strippedLine.length > 0) {
         const nonMergedWidgets = lineItems.filter((_, idx) => idx === lineItems.length - 1 || !lineItems[idx]?.merge);

package/package.json

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