ctxline-claude 0.0.7 → 1.1.0

package/README.md

@@ -103,11 +103,15 @@ Remove-Item "$env:USERPROFILE\.claude\cache\usage-cache.json" -ErrorAction Silen
 | **Context** | Visual bar of context-window usage |
 | **Current** | Live 5-hour session limit + reset countdown (subscription users) |
 | **Weekly** | Weekly usage allowance + time until the weekly reset (subscription users) |
+| **Cost** | Running session cost in USD (e.g. `$0.42`) |
 | **Task** | The in-progress todo, when there is one |
 
 > [!NOTE]
 > Usage bars change color automatically as you approach your limits.
 
+> [!NOTE]
+> **Responsive.** On a narrow terminal the line wraps to two — directory, model, and context on the first line; usage, cost, and task on the second. Wide terminals stay on a single line. (Auto-sizing needs Claude Code v2.1.153+.)
+
 ## How it works
 
 - **Source** — context comes from Claude Code's session data. Usage bars are read straight from the `rate_limits` field Claude Code pipes in (no network), falling back to `https://api.anthropic.com/api/oauth/usage` (the same `/usage` data — 5-hour and weekly limits) when that field isn't present yet. API-key users skip usage entirely.
@@ -125,6 +129,13 @@ Yes — the same 5-hour and weekly limits. It reads them from the session data C
 
 </details>
 
+<details>
+<summary>Is the session cost my actual bill?</summary>
+
+It's the cost Claude Code computes for the session (tokens × per-model API pricing), read straight from the session data. For subscription (Pro/Max) users it's the *equivalent* pay-as-you-go API cost — useful as a gauge of session weight, but not what you're billed (you pay the flat subscription). It's an estimate, accurate to the extent your Claude Code pricing tables are current.
+
+</details>
+
 <details>
 <summary>Does it work with API keys?</summary>
 
@@ -135,7 +146,7 @@ Yes. The statusline automatically detects subscription vs API-key usage.
 <details>
 <summary>Can it break Claude Code?</summary>
 
-No. All failures are handled silently and the statusline always renders.
+No. [Statuslines are a built-in Claude Code feature](https://code.claude.com/docs/en/statusline) — this provides the command Claude Code runs. All failures are handled silently and the statusline always renders.
 
 </details>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ctxline-claude",
-  "version": "0.0.7",
+  "version": "1.1.0",
   "description": "A customizable statusline for Claude Code that tracks context usage and session limits",
   "bin": {
     "ctxline-claude": "bin/install.js"
@@ -28,7 +28,7 @@
   ],
   "author": "Mithun Wijayasiri",
   "license": "MIT",
-  "homepage": "https://github.com/MithunWijayasiri/ctxline-claude#readme",
+  "homepage": "https://ctxline.js.org",
   "bugs": {
     "url": "https://github.com/MithunWijayasiri/ctxline-claude/issues"
   },

package/statusline.js

@@ -19,6 +19,14 @@ const BAR_WIDTH = 6;
 // Tail-truncation keeps the start (ticket IDs like "TAMA5-32796" live there) visible.
 const MAX_BRANCH_LEN = 24;
 
+// Separator between segments on a rendered line.
+const SEGMENT_SEP = ' │ ';
+
+// Cells reserved at the terminal edge when deciding to wrap to a second line.
+// 0 = use the full COLUMNS; bump it if Claude Code reserves columns and the line
+// truncates a char or two before wrapping.
+const WIDTH_MARGIN = 0;
+
 // Cache configuration
 const CACHE_DIR = path.join(os.homedir(), '.claude', 'cache');
 const USAGE_CACHE_FILE = path.join(CACHE_DIR, 'usage-cache.json');
@@ -359,6 +367,15 @@ function getUsageWithCache(callback) {
   });
 }
 
+// Session cost from stdin `cost.total_cost_usd` (USD float, computed client-side by
+// Claude Code as tokens × per-model API pricing). Pure stdin — no network/cache.
+// Returns "$0.00" rendered dim, or '' when absent/non-finite so the segment is omitted.
+function getCostSegment(data) {
+  const usd = data?.cost?.total_cost_usd;
+  if (!Number.isFinite(usd)) return '';
+  return `${colors.dim}$${usd.toFixed(2)}${colors.reset}`;
+}
+
 function getCurrentTask(sessionId) {
   if (!sessionId) return '';
 
@@ -383,6 +400,25 @@ function getCurrentTask(sessionId) {
   return '';
 }
 
+// Visible (printable) width of a segment string: strip ANSI color codes, count code points.
+function visibleWidth(str) {
+  return [...str.replace(/\x1b\[[0-9;]*m/g, '')].length;
+}
+
+// Responsive layout: one line when it fits the terminal, else line1 (identity + context)
+// on top and line2 (usage/cost/task) below. Splits only when COLUMNS is known (Claude Code
+// v2.1.153+) and the single line overflows — unknown width or an empty line2 stays single,
+// so there is no regression on older clients or wide terminals.
+function layout(line1Parts, line2Parts) {
+  const single = [...line1Parts, ...line2Parts].join(SEGMENT_SEP);
+  if (line2Parts.length === 0) return single;
+  const cols = parseInt(process.env.COLUMNS, 10);
+  if (Number.isFinite(cols) && cols > 0 && visibleWidth(single) > cols - WIDTH_MARGIN) {
+    return line1Parts.join(SEGMENT_SEP) + '\n' + line2Parts.join(SEGMENT_SEP);
+  }
+  return single;
+}
+
 // Main
 function outputStatus(data, usage) {
   try {
@@ -395,17 +431,22 @@ function outputStatus(data, usage) {
     const remaining = data?.context_window?.remaining_percentage;
 
     const contextBar = getContextBar(remaining);
+    const cost = getCostSegment(data);
     const task = getCurrentTask(sessionId);
-    const parts = [];
-    parts.push(branch ? `${dirname} ${colors.dim}⎇ ${branch}${colors.reset}` : dirname);
-    parts.push(effort ? `${model}${getEffortColor(effort)} · ${effort}${colors.reset}` : model);
-    parts.push(contextBar);
 
-    if (usage?.current) parts.push(usage.current);
-    if (usage?.weekly) parts.push(usage.weekly);
+    // line1 = identity + context (always); line2 = usage/cost/task (wrap target).
+    const line1 = [];
+    line1.push(branch ? `${dirname} ${colors.dim}⎇ ${branch}${colors.reset}` : dirname);
+    line1.push(effort ? `${model}${getEffortColor(effort)} · ${effort}${colors.reset}` : model);
+    line1.push(contextBar);
+
+    const line2 = [];
+    if (usage?.current) line2.push(usage.current);
+    if (usage?.weekly) line2.push(usage.weekly);
+    if (cost) line2.push(cost);
+    if (task) line2.push(`${colors.dim}${task}${colors.reset}`);
 
-    if (task) parts.push(`${colors.dim}${task}${colors.reset}`);
-    process.stdout.write(parts.join(' \u2502 '));
+    process.stdout.write(layout(line1, line2));
   } catch (e) {
     process.stdout.write('Status unavailable');
   }