ccstatusline 1.0.6 → 1.0.8

package/README.md

@@ -4,11 +4,12 @@ A customizable status line formatter for Claude Code CLI that displays model inf
 
 ## Features
 
-- 📊 **Real-time metrics** - Display model name, git branch, token usage, and more
+- 📊 **Real-time metrics** - Display model name, git branch, token usage, session duration, and more
 - 🎨 **Fully customizable** - Choose what to display and customize colors
+- 📐 **Multi-line support** - Configure up to 3 status lines
 - 🖥️ **Interactive TUI** - Built-in configuration interface using React/Ink
 - 🚀 **Cross-platform** - Works with both Bun and Node.js
-- 📏 **80-character format** - Perfectly sized for Claude Code CLI integration
+- 📏 **Auto-width detection** - Automatically adapts to terminal width with flex separators
 
 ## Quick Start
 
@@ -45,12 +46,15 @@ Once configured, ccstatusline automatically formats your Claude Code status line
 
 - **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")
 - **Tokens Input** - Shows input tokens used
 - **Tokens Output** - Shows output tokens used
 - **Tokens Cached** - Shows cached tokens used
 - **Tokens Total** - Shows total tokens used
 - **Context Length** - Shows current context length in tokens
 - **Context Percentage** - Shows percentage of context limit used
+- **Terminal Width** - Shows detected terminal width (for debugging)
 - **Separator** - Visual divider between items (|)
 - **Flex Separator** - Expands to fill available space
 
@@ -60,36 +64,38 @@ The configuration file at `~/.config/ccstatusline/settings.json` looks like:
 
 ```json
 {
-  "items": [
-    {
-      "type": "model",
-      "color": "cyan"
-    },
-    {
-      "type": "separator",
-      "color": "gray"
-    },
-    {
-      "type": "git-branch",
-      "color": "green"
-    },
-    {
-      "type": "separator",
-      "color": "gray"
-    },
-    {
-      "type": "tokens-total",
-      "color": "yellow"
-    },
-    {
-      "type": "flex-separator",
-      "color": "gray"
-    },
-    {
-      "type": "context-percentage",
-      "color": "blue"
-    }
-  ]
+  "lines": [
+    [
+      {
+        "id": "1",
+        "type": "model",
+        "color": "cyan"
+      },
+      {
+        "id": "2",
+        "type": "separator"
+      },
+      {
+        "id": "3",
+        "type": "git-branch",
+        "color": "magenta"
+      },
+      {
+        "id": "4",
+        "type": "separator"
+      },
+      {
+        "id": "5",
+        "type": "session-clock",
+        "color": "blue"
+      }
+    ]
+  ],
+  "colors": {
+    "model": "cyan",
+    "gitBranch": "magenta",
+    "separator": "dim"
+  }
 }
 ```
 

package/dist/ccstatusline.js

@@ -2,13 +2,14 @@
 
 // src/ccstatusline.ts
 import chalk2 from "chalk";
-import { execSync } from "child_process";
+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";
 
 // src/config.ts
 import * as fs from "fs";
@@ -21,12 +22,16 @@ var mkdir2 = fs.promises?.mkdir || promisify(fs.mkdir);
 var CONFIG_DIR = path.join(os.homedir(), ".config", "ccstatusline");
 var SETTINGS_PATH = path.join(CONFIG_DIR, "settings.json");
 var DEFAULT_SETTINGS = {
-  items: [
-    { id: "1", type: "model", color: "cyan" },
-    { id: "2", type: "separator" },
-    { id: "3", type: "git-branch", color: "magenta" },
-    { id: "4", type: "separator" },
-    { id: "5", type: "git-changes", color: "yellow" }
+  lines: [
+    [
+      { id: "1", type: "model", color: "cyan" },
+      { id: "2", type: "separator" },
+      { id: "3", type: "terminal-width", color: "dim" },
+      { id: "4", type: "separator" },
+      { id: "5", type: "git-branch", color: "magenta" },
+      { id: "6", type: "separator" },
+      { id: "7", type: "git-changes", color: "yellow" }
+    ]
   ],
   colors: {
     model: "cyan",
@@ -40,12 +45,29 @@ async function loadSettings() {
       return DEFAULT_SETTINGS;
     }
     const content = await readFile2(SETTINGS_PATH, "utf-8");
-    const loaded = JSON.parse(content);
+    let loaded;
+    try {
+      loaded = JSON.parse(content);
+    } catch (parseError) {
+      console.error("Failed to parse settings.json, using defaults");
+      return DEFAULT_SETTINGS;
+    }
     if (loaded.elements || loaded.layout) {
       return migrateOldSettings(loaded);
     }
+    if (loaded.items && !loaded.lines) {
+      loaded.lines = [loaded.items];
+      delete loaded.items;
+    }
+    if (loaded.lines) {
+      if (!Array.isArray(loaded.lines)) {
+        loaded.lines = [[]];
+      }
+      loaded.lines = loaded.lines.slice(0, 3);
+    }
     return { ...DEFAULT_SETTINGS, ...loaded };
-  } catch {
+  } catch (error) {
+    console.error("Error loading settings:", error);
     return DEFAULT_SETTINGS;
   }
 }
@@ -69,7 +91,7 @@ function migrateOldSettings(old) {
     });
   }
   return {
-    items,
+    lines: [items],
     colors: old.colors || DEFAULT_SETTINGS.colors
   };
 }
@@ -105,14 +127,14 @@ async function saveClaudeSettings(settings) {
 }
 async function isInstalled() {
   const settings = await loadClaudeSettings();
-  return settings.statusLine?.command === "npx -y ccstatusline@latest";
+  return settings.statusLine?.command === "npx -y ccstatusline@latest" && (settings.statusLine.padding === 0 || settings.statusLine.padding === undefined);
 }
 async function installStatusLine() {
   const settings = await loadClaudeSettings();
   settings.statusLine = {
     type: "command",
     command: "npx -y ccstatusline@latest",
-    padding: 1
+    padding: 0
   };
   await saveClaudeSettings(settings);
 }
@@ -130,8 +152,38 @@ async function getExistingStatusLine() {
 
 // src/tui.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
-var StatusLinePreview = ({ items, terminalWidth }) => {
-  const width = 80;
+function canDetectTerminalWidth() {
+  try {
+    const tty = execSync("ps -o tty= -p $(ps -o ppid= -p $$)", {
+      encoding: "utf8",
+      stdio: ["pipe", "pipe", "ignore"],
+      shell: "/bin/sh"
+    }).trim();
+    if (tty && tty !== "??" && tty !== "?") {
+      const width = execSync(`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 = execSync("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) => {
+  const width = widthDetectionAvailable ? terminalWidth : null;
   const elements = [];
   let hasFlexSeparator = false;
   items.forEach((item) => {
@@ -172,8 +224,18 @@ var StatusLinePreview = ({ items, terminalWidth }) => {
         const ctxPctColor = chalk[item.color || "cyan"] || chalk.cyan;
         elements.push(ctxPctColor("Ctx: 9.3%"));
         break;
+      case "session-clock":
+        const sessionColor = chalk[item.color || "blue"] || chalk.blue;
+        elements.push(sessionColor("Session: 2hr 15m"));
+        break;
+      case "terminal-width":
+        const termColor = chalk[item.color || "dim"] || chalk.dim;
+        const detectedWidth = canDetectTerminalWidth() ? terminalWidth : "??";
+        elements.push(termColor(`Term: ${detectedWidth}`));
+        break;
       case "separator":
-        elements.push(chalk.dim(" | "));
+        const sepChar = item.character || "|";
+        elements.push(chalk.dim(` ${sepChar} `));
         break;
       case "flex-separator":
         elements.push("FLEX");
@@ -182,7 +244,7 @@ var StatusLinePreview = ({ items, terminalWidth }) => {
     }
   });
   let statusLine = "";
-  if (hasFlexSeparator) {
+  if (hasFlexSeparator && width) {
     const parts = [[]];
     let currentPart = 0;
     for (let i = 0;i < items.length; i++) {
@@ -218,12 +280,17 @@ var StatusLinePreview = ({ items, terminalWidth }) => {
       }
     }
   } else {
-    statusLine = elements.filter((e) => e !== "FLEX").join("");
+    statusLine = elements.map((e) => e === "FLEX" ? chalk.dim(" | ") : e).join("");
   }
+  return statusLine;
+};
+var StatusLinePreview = ({ lines, terminalWidth }) => {
+  const widthDetectionAvailable = canDetectTerminalWidth();
   const boxWidth = Math.min(terminalWidth - 4, process.stdout.columns - 4 || 76);
   const topLine = chalk.dim("╭" + "─".repeat(Math.max(0, boxWidth - 2)) + "╮");
   const middleLine = chalk.dim("│") + " > " + " ".repeat(Math.max(0, boxWidth - 5)) + chalk.dim("│");
   const bottomLine = chalk.dim("╰" + "─".repeat(Math.max(0, boxWidth - 2)) + "╯");
+  const renderedLines = lines.map((lineItems) => lineItems.length > 0 ? renderSingleLine(lineItems, boxWidth, widthDetectionAvailable) : "").filter((line) => line !== "");
   return /* @__PURE__ */ jsxDEV(Box, {
     flexDirection: "column",
     children: [
@@ -236,9 +303,9 @@ var StatusLinePreview = ({ items, terminalWidth }) => {
       /* @__PURE__ */ jsxDEV(Text, {
         children: bottomLine
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV(Text, {
-        children: statusLine
-      }, undefined, false, undefined, this)
+      renderedLines.map((line, index) => /* @__PURE__ */ jsxDEV(Text, {
+        children: line
+      }, index, false, undefined, this))
     ]
   }, undefined, true, undefined, this);
 };
@@ -263,9 +330,53 @@ var ConfirmDialog = ({ message, onConfirm, onCancel }) => {
     ]
   }, undefined, true, undefined, this);
 };
+var LineSelector = ({ lines, onSelect, onBack }) => {
+  const items = [
+    { label: `\uD83D\uDCDD Line 1${lines[0] && lines[0].length > 0 ? ` (${lines[0].length} items)` : " (empty)"}`, value: 0 },
+    { label: `\uD83D\uDCDD Line 2${lines[1] && lines[1].length > 0 ? ` (${lines[1].length} items)` : " (empty)"}`, value: 1 },
+    { label: `\uD83D\uDCDD Line 3${lines[2] && lines[2].length > 0 ? ` (${lines[2].length} items)` : " (empty)"}`, value: 2 },
+    { label: "← Back", value: -1 }
+  ];
+  const handleSelect = (item) => {
+    if (item.value === -1) {
+      onBack();
+    } else {
+      onSelect(item.value);
+    }
+  };
+  useInput((input, key) => {
+    if (key.escape) {
+      onBack();
+    }
+  });
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV(Text, {
+        bold: true,
+        children: "Select Line to Edit"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        dimColor: true,
+        children: "Choose which status line to configure (up to 3 lines supported)"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Text, {
+        dimColor: true,
+        children: "Press ESC to go back"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 1,
+        children: /* @__PURE__ */ jsxDEV(SelectInput, {
+          items,
+          onSelect: handleSelect
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
 var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges }) => {
   const items = [
-    { label: "\uD83D\uDCDD Edit Status Line Items", value: "items" },
+    { label: "\uD83D\uDCDD Edit Lines", value: "lines" },
     { label: "\uD83C\uDFA8 Configure Colors", value: "colors" },
     { label: isClaudeInstalled ? "\uD83D\uDDD1️  Uninstall from Claude Code" : "\uD83D\uDCE6 Install to Claude Code", value: "install" }
   ];
@@ -291,9 +402,10 @@ var MainMenu = ({ onSelect, isClaudeInstalled, hasChanges }) => {
     ]
   }, undefined, true, undefined, this);
 };
-var ItemsEditor = ({ items, onUpdate, onBack }) => {
+var ItemsEditor = ({ items, onUpdate, onBack, lineNumber }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [moveMode, setMoveMode] = useState(false);
+  const separatorChars = ["|", "-", " "];
   useInput((input, key) => {
     if (moveMode) {
       if (key.upArrow && selectedIndex > 0) {
@@ -328,13 +440,15 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
           "git-branch",
           "git-changes",
           "separator",
-          "flex-separator",
           "tokens-input",
           "tokens-output",
           "tokens-cached",
           "tokens-total",
           "context-length",
-          "context-percentage"
+          "context-percentage",
+          "session-clock",
+          "terminal-width",
+          "flex-separator"
         ];
         const currentItem = items[selectedIndex];
         if (currentItem) {
@@ -354,13 +468,15 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
           "git-branch",
           "git-changes",
           "separator",
-          "flex-separator",
           "tokens-input",
           "tokens-output",
           "tokens-cached",
           "tokens-total",
           "context-length",
-          "context-percentage"
+          "context-percentage",
+          "session-clock",
+          "terminal-width",
+          "flex-separator"
         ];
         const currentItem = items[selectedIndex];
         if (currentItem) {
@@ -381,7 +497,9 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
           id: Date.now().toString(),
           type: "separator"
         };
-        onUpdate([...items, newItem]);
+        const newItems = [...items, newItem];
+        onUpdate(newItems);
+        setSelectedIndex(newItems.length - 1);
       } else if (input === "i") {
         const newItem = {
           id: Date.now().toString(),
@@ -397,6 +515,19 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
         if (selectedIndex >= newItems.length && selectedIndex > 0) {
           setSelectedIndex(selectedIndex - 1);
         }
+      } else if (input === "c") {
+        onUpdate([]);
+        setSelectedIndex(0);
+      } else if (input === " " && items.length > 0) {
+        const currentItem = items[selectedIndex];
+        if (currentItem && currentItem.type === "separator") {
+          const currentChar = currentItem.character || "|";
+          const currentCharIndex = separatorChars.indexOf(currentChar);
+          const nextChar = separatorChars[(currentCharIndex + 1) % separatorChars.length];
+          const newItems = [...items];
+          newItems[selectedIndex] = { ...currentItem, character: nextChar };
+          onUpdate(newItems);
+        }
       } else if (key.escape) {
         onBack();
       }
@@ -410,10 +541,13 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
         return chalk.magenta("Git Branch");
       case "git-changes":
         return chalk.yellow("Git Changes");
-      case "separator":
-        return chalk.dim("Separator |");
+      case "separator": {
+        const char = item.character || "|";
+        const charDisplay = char === " " ? "(space)" : char;
+        return chalk.dim(`Separator ${charDisplay}`);
+      }
       case "flex-separator":
-        return chalk.yellow("Flex Separator ─────");
+        return chalk.yellow("Flex Separator");
       case "tokens-input":
         return chalk.yellow("Tokens Input");
       case "tokens-output":
@@ -426,15 +560,23 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
         return chalk.cyan("Context Length");
       case "context-percentage":
         return chalk.cyan("Context %");
+      case "session-clock":
+        return chalk.blue("Session Clock");
+      case "terminal-width":
+        return chalk.dim("Terminal Width");
     }
   };
+  const hasFlexSeparator = items.some((item) => item.type === "flex-separator");
+  const widthDetectionAvailable = canDetectTerminalWidth();
   return /* @__PURE__ */ jsxDEV(Box, {
     flexDirection: "column",
     children: [
       /* @__PURE__ */ jsxDEV(Text, {
         bold: true,
         children: [
-          "Edit Status Line Items ",
+          "Edit Line ",
+          lineNumber,
+          " ",
           moveMode && /* @__PURE__ */ jsxDEV(Text, {
             color: "yellow",
             children: "[MOVE MODE]"
@@ -446,8 +588,21 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
         children: "↑↓ to move item, ESC or Enter to exit move mode"
       }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
         dimColor: true,
-        children: "↑↓ select, ←→ change type, Enter to move, (a)dd, (i)nsert, (d)elete, ESC back"
+        children: "↑↓ select, ←→ change type, Space edit separator, Enter to move, (a)dd, (i)nsert, (d)elete, (c)lear line, ESC back"
       }, undefined, false, undefined, this),
+      hasFlexSeparator && !widthDetectionAvailable && /* @__PURE__ */ jsxDEV(Box, {
+        marginTop: 1,
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            color: "yellow",
+            children: "⚠ Note: Terminal width detection is currently unavailable in your environment."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            dimColor: true,
+            children: "  Flex separators will act as normal separators until width detection is available."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV(Box, {
         marginTop: 1,
         flexDirection: "column",
@@ -461,7 +616,11 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
               index === selectedIndex ? moveMode ? "◆ " : "▶ " : "  ",
               index + 1,
               ". ",
-              getItemDisplay(item)
+              getItemDisplay(item),
+              item.type === "separator" && index === selectedIndex && !moveMode && /* @__PURE__ */ jsxDEV(Text, {
+                dimColor: true,
+                children: " (Space to edit)"
+              }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this)
         }, item.id, false, undefined, this))
@@ -470,7 +629,7 @@ var ItemsEditor = ({ items, onUpdate, onBack }) => {
   }, undefined, true, undefined, this);
 };
 var ColorMenu = ({ items, onUpdate, onBack }) => {
-  const colorableItems = items.filter((item) => ["model", "git-branch", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage"].includes(item.type));
+  const colorableItems = items.filter((item) => ["model", "git-branch", "tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage", "session-clock"].includes(item.type));
   const [selectedIndex, setSelectedIndex] = useState(0);
   useInput((input, key) => {
     if (key.escape) {
@@ -531,6 +690,8 @@ var ColorMenu = ({ items, onUpdate, onBack }) => {
         return "Context Length";
       case "context-percentage":
         return "Context Percentage";
+      case "session-clock":
+        return "Session Clock";
       default:
         return item.type;
     }
@@ -632,11 +793,18 @@ var App = () => {
   const [originalSettings, setOriginalSettings] = useState(null);
   const [hasChanges, setHasChanges] = useState(false);
   const [screen, setScreen] = useState("main");
+  const [selectedLine, setSelectedLine] = useState(0);
   const [confirmDialog, setConfirmDialog] = useState(null);
   const [isClaudeInstalled, setIsClaudeInstalled] = useState(false);
   const [terminalWidth, setTerminalWidth] = useState(process.stdout.columns || 80);
   useEffect(() => {
     loadSettings().then((loadedSettings) => {
+      if (!loadedSettings.lines) {
+        loadedSettings.lines = [[]];
+      }
+      while (loadedSettings.lines.length < 3) {
+        loadedSettings.lines.push([]);
+      }
       setSettings(loadedSettings);
       setOriginalSettings(JSON.parse(JSON.stringify(loadedSettings)));
     });
@@ -687,7 +855,7 @@ A status line is already configured: "${existing}"
 Replace it with npx -y ccstatusline@latest?`;
       } else if (existing === "npx -y ccstatusline@latest") {
         message = `ccstatusline is already installed in ~/.claude/settings.json
-Reinstall it?`;
+Update it with the latest options?`;
       } else {
         message = `This will modify ~/.claude/settings.json to add ccstatusline.
 Continue?`;
@@ -706,8 +874,8 @@ Continue?`;
   };
   const handleMainMenuSelect = async (value) => {
     switch (value) {
-      case "items":
-        setScreen("items");
+      case "lines":
+        setScreen("lines");
         break;
       case "colors":
         setScreen("colors");
@@ -726,8 +894,14 @@ Continue?`;
         break;
     }
   };
-  const updateItems = (items) => {
-    setSettings({ ...settings, items });
+  const updateLine = (lineIndex, items) => {
+    const newLines = [...settings.lines || []];
+    newLines[lineIndex] = items;
+    setSettings({ ...settings, lines: newLines });
+  };
+  const handleLineSelect = (lineIndex) => {
+    setSelectedLine(lineIndex);
+    setScreen("items");
   };
   return /* @__PURE__ */ jsxDEV(Box, {
     flexDirection: "column",
@@ -749,7 +923,7 @@ Continue?`;
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(StatusLinePreview, {
-        items: settings.items,
+        lines: settings.lines || [[]],
         terminalWidth
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV(Box, {
@@ -760,14 +934,32 @@ Continue?`;
             isClaudeInstalled,
             hasChanges
           }, undefined, false, undefined, this),
-          screen === "items" && /* @__PURE__ */ jsxDEV(ItemsEditor, {
-            items: settings.items,
-            onUpdate: updateItems,
+          screen === "lines" && /* @__PURE__ */ jsxDEV(LineSelector, {
+            lines: settings.lines || [[]],
+            onSelect: handleLineSelect,
             onBack: () => setScreen("main")
           }, undefined, false, undefined, this),
+          screen === "items" && settings.lines && /* @__PURE__ */ jsxDEV(ItemsEditor, {
+            items: settings.lines[selectedLine] || [],
+            onUpdate: (items) => updateLine(selectedLine, items),
+            onBack: () => setScreen("lines"),
+            lineNumber: selectedLine + 1
+          }, undefined, false, undefined, this),
           screen === "colors" && /* @__PURE__ */ jsxDEV(ColorMenu, {
-            items: settings.items,
-            onUpdate: updateItems,
+            items: settings.lines?.flat() || [],
+            onUpdate: (items) => {
+              const newLines = settings.lines || [[]];
+              let flatIndex = 0;
+              for (let lineIndex = 0;lineIndex < newLines.length; lineIndex++) {
+                for (let itemIndex = 0;itemIndex < newLines[lineIndex].length; itemIndex++) {
+                  if (flatIndex < items.length) {
+                    newLines[lineIndex][itemIndex] = items[flatIndex];
+                    flatIndex++;
+                  }
+                }
+              }
+              setSettings({ ...settings, lines: newLines });
+            },
             onBack: () => setScreen("main")
           }, undefined, false, undefined, this),
           screen === "confirm" && confirmDialog && /* @__PURE__ */ jsxDEV(ConfirmDialog, {
@@ -814,9 +1006,40 @@ async function readStdin() {
     return null;
   }
 }
+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 = execSync("git branch --show-current 2>/dev/null", {
+    const branch = execSync2("git branch --show-current 2>/dev/null", {
       encoding: "utf8",
       stdio: ["pipe", "pipe", "ignore"]
     }).trim();
@@ -829,11 +1052,11 @@ function getGitChanges() {
   try {
     let totalInsertions = 0;
     let totalDeletions = 0;
-    const unstagedStat = execSync("git diff --shortstat 2>/dev/null", {
+    const unstagedStat = execSync2("git diff --shortstat 2>/dev/null", {
       encoding: "utf8",
       stdio: ["pipe", "pipe", "ignore"]
     }).trim();
-    const stagedStat = execSync("git diff --cached --shortstat 2>/dev/null", {
+    const stagedStat = execSync2("git diff --cached --shortstat 2>/dev/null", {
       encoding: "utf8",
       stdio: ["pipe", "pipe", "ignore"]
     }).trim();
@@ -857,6 +1080,58 @@ function getGitChanges() {
     return null;
   }
 }
+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;
+  }
+}
 async function getTokenMetrics(transcriptPath) {
   try {
     if (!fs3.existsSync(transcriptPath)) {
@@ -892,16 +1167,11 @@ async function getTokenMetrics(transcriptPath) {
     return { inputTokens: 0, outputTokens: 0, cachedTokens: 0, totalTokens: 0, contextLength: 0 };
   }
 }
-async function renderStatusLine(data) {
-  const settings = await loadSettings();
-  const terminalWidth = 80;
+function renderSingleLine2(items, settings, data, tokenMetrics, sessionDuration) {
+  const detectedWidth = getTerminalWidth();
+  const terminalWidth = detectedWidth ? detectedWidth - 40 : null;
   const elements = [];
   let hasFlexSeparator = false;
-  const hasTokenItems = settings.items.some((item) => ["tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage"].includes(item.type));
-  let tokenMetrics = null;
-  if (hasTokenItems && data.transcript_path) {
-    tokenMetrics = await getTokenMetrics(data.transcript_path);
-  }
   const formatTokens = (count) => {
     if (count >= 1e6)
       return `${(count / 1e6).toFixed(1)}M`;
@@ -909,7 +1179,7 @@ async function renderStatusLine(data) {
       return `${(count / 1000).toFixed(1)}k`;
     return count.toString();
   };
-  for (const item of settings.items) {
+  for (const item of items) {
     switch (item.type) {
       case "model":
         if (data.model) {
@@ -969,11 +1239,25 @@ async function renderStatusLine(data) {
           elements.push({ content: color(`Ctx: ${percentage.toFixed(1)}%`), type: "context-percentage" });
         }
         break;
+      case "terminal-width":
+        const detectedWidth2 = terminalWidth || getTerminalWidth();
+        if (detectedWidth2) {
+          const color = chalk2[item.color || "dim"] || chalk2.dim;
+          elements.push({ content: color(`Term: ${detectedWidth2}`), type: "terminal-width" });
+        }
+        break;
+      case "session-clock":
+        if (sessionDuration) {
+          const color = chalk2[item.color || "blue"] || chalk2.blue;
+          elements.push({ content: color(`Session: ${sessionDuration}`), type: "session-clock" });
+        }
+        break;
       case "separator":
         const lastElement = elements[elements.length - 1];
         if (elements.length > 0 && lastElement && lastElement.type !== "separator") {
           const sepColor = chalk2[settings.colors.separator] || chalk2.dim;
-          elements.push({ content: sepColor(" | "), type: "separator" });
+          const sepChar = item.character || "|";
+          elements.push({ content: sepColor(` ${sepChar} `), type: "separator" });
         }
         break;
       case "flex-separator":
@@ -983,9 +1267,9 @@ async function renderStatusLine(data) {
     }
   }
   if (elements.length === 0)
-    return;
+    return "";
   let statusLine = "";
-  if (hasFlexSeparator) {
+  if (hasFlexSeparator && terminalWidth) {
     const parts = [[]];
     let currentPart = 0;
     for (const elem of elements) {
@@ -1017,20 +1301,39 @@ async function renderStatusLine(data) {
       }
     }
   } else {
-    statusLine = elements.map((e) => e.content).join("");
-    const contentLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
-    const remainingSpace = terminalWidth - contentLength;
-    if (remainingSpace > 0) {
-      statusLine = statusLine + " ".repeat(remainingSpace);
+    if (hasFlexSeparator && !terminalWidth) {
+      statusLine = elements.map((e) => e.type === "flex-separator" ? chalk2.dim(" | ") : e.content).join("");
+    } else {
+      statusLine = elements.map((e) => e.content).join("");
     }
   }
-  const plainLength = statusLine.replace(/\x1b\[[0-9;]*m/g, "").length;
-  if (plainLength > 80) {
-    const visibleText = statusLine.replace(/\x1b\[[0-9;]*m/g, "");
-    const truncated = visibleText.substring(0, 77) + "...";
-    console.log(truncated);
+  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 {
-    console.log(statusLine);
+    lines = [[]];
+  }
+  const hasTokenItems = lines.some((line) => line.some((item) => ["tokens-input", "tokens-output", "tokens-cached", "tokens-total", "context-length", "context-percentage"].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 (const lineItems of lines) {
+    if (lineItems.length > 0) {
+      const line = renderSingleLine2(lineItems, settings, data, tokenMetrics, sessionDuration);
+      console.log(line);
+    }
   }
 }
 async function main() {

package/package.json

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