ccstatusline-usage 2.0.46 → 2.1.1

package/README.md

@@ -33,12 +33,20 @@ This fork adds API-based usage widgets beyond the upstream:
 - **Reset Timer** - Time until 5-hour session window resets
 - **Context Window Display** - Visual bar showing context usage
 - **Two-line Layout** - Session info on line 1, context on line 2
+- **Narrow Terminal Detection** - Auto-compact rendering on terminals < 80 cols via tmux pane width detection
 
 ### Enhanced Status Line Preview
 
+**Desktop (full width):**
 ```
 Session: [████░░░░░░░░░░░] 27.0% | Weekly: [████████████░░░] 86.0% | 1:56 hr | Extra: $41.24/$47.00 | Model: Opus 4.6 | Session ID: 714aa815-8a...
-  Context: [███████░░░░░░░░] 103k/200k (51%)
+Context: [███████░░░░░░░░] 103k/200k (51%)
+```
+
+**Narrow terminal (< 80 cols, e.g. mobile SSH via tmux):**
+```
+S: [██░░] 51.0% | W: [████] 92.0% | 0:00 hr
+C: [██░░] 100k/200k
 ```
 
 These widgets are enabled by default. Just install and run!
@@ -65,6 +73,19 @@ These widgets are enabled by default. Just install and run!
 
 ## 🆕 Recent Updates
 
+### [v2.1.1](https://github.com/pcvelz/ccstatusline-usage/releases/tag/v2.1.1) - Automatic mobile/narrow terminal detection
+
+- **Automatic compact rendering** on terminals < 80 columns via tmux pane width detection:
+  ```
+  S: [██░░] 51.0% | W: [████] 92.0% | 0:00 hr
+  C: [██░░] 100k/200k
+  ```
+- Widgets hidden on narrow terminals: Model, Session Clock, Session ID
+- Progress bars shrink from 15 to 4 characters, labels abbreviated (Session → S, Weekly → W, Context → C)
+- Orphaned separators automatically removed when adjacent widgets are hidden
+- FlexMode `-40` override on narrow terminals (no auto-compact sidebar)
+- Works with any tmux-based remote access setup (SSH clients, mobile terminals, etc.)
+
 ### [v2.0.46](https://github.com/pcvelz/ccstatusline-usage/releases/tag/v2.0.46) - Upstream sync
 
 - Merged 101 upstream commits: line reorder move mode, Claude Session ID widget, `CLAUDE_CONFIG_DIR` support, Windows fixes, Block Timer fixes, model string/object handling fix, and more
@@ -163,6 +184,7 @@ These widgets are enabled by default. Just install and run!
 - **⚙️ Global Options** - Apply consistent formatting across all widgets (padding, separators, bold, background)
 - **🚀 Cross-platform** - Works seamlessly with both Bun and Node.js
 - **🔧 Flexible Configuration** - Supports custom Claude Code config directory via `CLAUDE_CONFIG_DIR` environment variable
+- **📱 Narrow Terminal Detection** - Auto-compact rendering on terminals < 80 columns via tmux pane width detection
 - **📏 Smart Width Detection** - Automatically adapts to terminal width with flex separators
 - **⚡ Zero Config** - Sensible defaults that work out of the box
 

package/dist/ccstatusline.js

@@ -51450,7 +51450,8 @@ import { execSync as execSync3 } from "child_process";
 import * as fs5 from "fs";
 import * as path4 from "path";
 var __dirname = "/Users/peter/Documents/Code/ccstatusline-usage/src/utils";
-var PACKAGE_VERSION = "2.0.46";
+var MOBILE_THRESHOLD = 80;
+var PACKAGE_VERSION = "2.1.1";
 function getPackageVersion() {
   if (/^\d+\.\d+\.\d+/.test(PACKAGE_VERSION)) {
     return PACKAGE_VERSION;
@@ -51530,6 +51531,60 @@ function canDetectTerminalWidth() {
     return false;
   }
 }
+function parseTmuxClients() {
+  try {
+    const output = execSync3("tmux list-clients -F '#{client_width} #{client_height} #{client_tty}'", { encoding: "utf8", stdio: ["pipe", "pipe", "ignore"], timeout: 2000 }).trim();
+    if (!output)
+      return [];
+    const clients = [];
+    for (const line of output.split(`
+`)) {
+      const parts = line.trim().split(" ");
+      if (parts.length >= 3) {
+        const width = parseInt(parts[0] ?? "", 10);
+        const height = parseInt(parts[1] ?? "", 10);
+        const tty2 = parts.slice(2).join(" ");
+        if (!isNaN(width) && !isNaN(height) && tty2) {
+          clients.push({ width, height, tty: tty2 });
+        }
+      }
+    }
+    return clients;
+  } catch {
+    return [];
+  }
+}
+function getTmuxPaneWidth() {
+  try {
+    const output = execSync3("tmux display-message -p '#{pane_width}'", { encoding: "utf8", stdio: ["pipe", "pipe", "ignore"], timeout: 2000 }).trim();
+    const parsed = parseInt(output, 10);
+    if (!isNaN(parsed) && parsed > 0)
+      return parsed;
+  } catch {}
+  return null;
+}
+function detectTerminalEnvironment() {
+  const inTmux = Boolean(process.env.TMUX);
+  let terminalWidth = getTerminalWidth();
+  let smallestClientWidth = null;
+  let tmuxClients = [];
+  if (inTmux) {
+    const paneWidth = getTmuxPaneWidth();
+    if (paneWidth !== null)
+      terminalWidth = paneWidth;
+    tmuxClients = parseTmuxClients();
+    if (tmuxClients.length > 0)
+      smallestClientWidth = Math.min(...tmuxClients.map((c) => c.width));
+  }
+  const isMobile = terminalWidth !== null && terminalWidth < MOBILE_THRESHOLD;
+  return {
+    inTmux,
+    tmuxClients,
+    terminalWidth,
+    isMobile,
+    smallestClientWidth
+  };
+}
 
 // node_modules/ink-select-input/build/Indicator.js
 var import_react27 = __toESM(require_react(), 1);
@@ -52297,6 +52352,8 @@ class ModelWidget {
     if (context.isPreview) {
       return item.rawValue ? "Claude" : "Model: Claude";
     }
+    if (context.terminalEnv?.isMobile)
+      return null;
     const model = context.data?.model;
     const modelDisplayName = typeof model === "string" ? model : model?.display_name ?? model?.id;
     if (modelDisplayName) {
@@ -52644,6 +52701,8 @@ function renderPowerlineStatusLine(widgets, settings, context, lineIndex = 0, gl
       } else if (flexMode === "full-until-compact") {
         terminalWidth = detectedWidth - 6;
       }
+    } else if (context.terminalEnv?.isMobile) {
+      terminalWidth = detectedWidth - 6;
     } else {
       if (flexMode === "full") {
         terminalWidth = detectedWidth - 6;
@@ -53018,6 +53077,8 @@ function renderStatusLine(widgets, settings, context, preRenderedWidgets, preCal
       } else if (flexMode === "full-until-compact") {
         terminalWidth = detectedWidth - 6;
       }
+    } else if (context.terminalEnv?.isMobile) {
+      terminalWidth = detectedWidth - 6;
     } else {
       if (flexMode === "full") {
         terminalWidth = detectedWidth - 6;
@@ -53053,6 +53114,18 @@ function renderStatusLine(widgets, settings, context, preRenderedWidgets, preCal
       }
       if (!hasContentBefore)
         continue;
+      let hasContentAfter = false;
+      for (let j = i + 1;j < widgets.length; j++) {
+        const nextWidget = widgets[j];
+        if (nextWidget && nextWidget.type !== "separator" && nextWidget.type !== "flex-separator") {
+          if (preRenderedWidgets[j]?.content) {
+            hasContentAfter = true;
+            break;
+          }
+        }
+      }
+      if (!hasContentAfter)
+        continue;
       const sepChar = widget.character ?? (settings.defaultSeparator ?? "|");
       const formattedSep = formatSeparator(sepChar);
       let separatorColor = widget.color ?? "gray";
@@ -53563,6 +53636,8 @@ class SessionClockWidget {
     if (context.isPreview) {
       return item.rawValue ? "2hr 15m" : "Session: 2hr 15m";
     }
+    if (context.terminalEnv?.isMobile)
+      return null;
     const duration3 = context.sessionDuration ?? "0m";
     return item.rawValue ? duration3 : `Session: ${duration3}`;
   }
@@ -54388,13 +54463,13 @@ class ClaudeSessionIdWidget {
   render(item, context, settings) {
     if (context.isPreview) {
       return item.rawValue ? "preview-session-id" : "Session ID: preview-session-id";
-    } else {
-      const sessionId = context.data?.session_id;
-      if (!sessionId) {
-        return null;
-      }
-      return item.rawValue ? sessionId : `Session ID: ${sessionId}`;
     }
+    if (context.terminalEnv?.isMobile)
+      return null;
+    const sessionId = context.data?.session_id;
+    if (!sessionId)
+      return null;
+    return item.rawValue ? sessionId : `Session ID: ${sessionId}`;
   }
   supportsRawValue() {
     return true;
@@ -54593,11 +54668,17 @@ function getErrorMessage(error43) {
       return "[Parse Error]";
   }
 }
-function makeProgressBar(percent, width = 15) {
+var MOBILE_BAR_WIDTH = 4;
+var DEFAULT_BAR_WIDTH = 15;
+function makeProgressBar(percent, width = DEFAULT_BAR_WIDTH) {
   const filled = Math.round(percent / 100 * width);
   const empty = width - filled;
   return "[" + "█".repeat(filled) + "░".repeat(empty) + "]";
 }
+function formatUsageBar(label, shortLabel, percent, mobile) {
+  const bar = makeProgressBar(percent, mobile ? MOBILE_BAR_WIDTH : DEFAULT_BAR_WIDTH);
+  return `${mobile ? shortLabel : label}: ${bar} ${percent.toFixed(1)}%`;
+}
 
 class SessionUsageWidget {
   getDefaultColor() {
@@ -54620,8 +54701,7 @@ class SessionUsageWidget {
       return getErrorMessage(data.error);
     if (data.sessionUsage === undefined)
       return null;
-    const percent = data.sessionUsage;
-    return `Session: ${makeProgressBar(percent)} ${percent.toFixed(1)}%`;
+    return formatUsageBar("Session", "S", data.sessionUsage, Boolean(context.terminalEnv?.isMobile));
   }
   supportsRawValue() {
     return false;
@@ -54652,8 +54732,7 @@ class WeeklyUsageWidget {
       return getErrorMessage(data.error);
     if (data.weeklyUsage === undefined)
       return null;
-    const percent = data.weeklyUsage;
-    return `Weekly: ${makeProgressBar(percent)} ${percent.toFixed(1)}%`;
+    return formatUsageBar("Weekly", "W", data.weeklyUsage, Boolean(context.terminalEnv?.isMobile));
   }
   supportsRawValue() {
     return false;
@@ -54754,7 +54833,11 @@ class ContextBarWidget {
     const percent = total > 0 ? used / total * 100 : 0;
     const usedK = Math.round(used / 1000);
     const totalK = Math.round(total / 1000);
-    return `Context: ${makeProgressBar(percent)} ${usedK}k/${totalK}k (${Math.round(percent)}%)`;
+    const mobile = Boolean(context.terminalEnv?.isMobile);
+    const bar = makeProgressBar(percent, mobile ? MOBILE_BAR_WIDTH : DEFAULT_BAR_WIDTH);
+    const label = mobile ? "C" : "Context";
+    const suffix = mobile ? "" : ` (${Math.round(percent)}%)`;
+    return `${label}: ${bar} ${usedK}k/${totalK}k${suffix}`;
   }
   supportsRawValue() {
     return false;
@@ -59729,12 +59812,15 @@ async function renderMultipleLines(data) {
   if (hasBlockTimer) {
     blockMetrics = getBlockMetrics();
   }
+  const terminalEnv = detectTerminalEnvironment();
   const context = {
     data,
     tokenMetrics,
     sessionDuration,
     blockMetrics,
-    isPreview: false
+    terminalWidth: terminalEnv.terminalWidth,
+    isPreview: false,
+    terminalEnv
   };
   const preRenderedLines = preRenderAllWidgets(lines, settings, context);
   const preCalculatedMaxWidths = calculateMaxWidthsFromPreRendered(preRenderedLines, settings);

package/package.json

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