claude-limitline 1.3.0 → 1.5.0

package/README.md

@@ -123,7 +123,7 @@ Create a `claude-limitline.json` file in your Claude config directory (`~/.claud
 | `weekly.displayStyle` | `"bar"` or `"text"` | `"text"` |
 | `weekly.barWidth` | Width of progress bar in characters | `10` |
 | `weekly.showWeekProgress` | Show week progress percentage | `true` |
-| `weekly.viewMode` | `"simple"`, `"detailed"`, or `"smart"` | `"simple"` |
+| `weekly.viewMode` | `"simple"` or `"smart"` | `"simple"` |
 | `budget.pollInterval` | Minutes between API calls | `15` |
 | `budget.warningThreshold` | Percentage to trigger warning color | `80` |
 | `theme` | Color theme name | `"dark"` |
@@ -132,15 +132,16 @@ Create a `claude-limitline.json` file in your Claude config directory (`~/.claud
 
 ### Weekly View Modes
 
-The weekly segment supports three view modes for displaying usage limits:
+The weekly segment supports two view modes for displaying usage limits:
+
+![Mode Preview](imgs/mode-preview.png)
 
 | Mode | Description | Example |
 |------|-------------|---------|
 | `simple` | Shows overall weekly usage only (default) | `○ 47% (wk 85%)` |
-| `detailed` | Shows overall, Opus, and Sonnet usage side by side | `○47% ◈15% ◇7%` |
-| `smart` | Shows the most restrictive (bottleneck) limit with indicator | `○47%▲ (wk 85%)` |
+| `smart` | Model-aware: shows Sonnet + Overall when using Sonnet | `◇7% \| ○47% (wk 85%)` |
 
-**Note:** Model-specific limits (Opus/Sonnet) are only available on certain subscription tiers. When a model-specific limit is not available, it will be hidden from the display.
+**Note:** Model-specific limits (Opus/Sonnet) are only available on certain subscription tiers. Smart mode shows only overall usage when using Opus/Haiku, and shows both Sonnet and overall when using Sonnet.
 
 ### Available Themes
 
@@ -190,7 +191,7 @@ npm run dev      # Watch mode
 
 ## Testing
 
-The project uses [Vitest](https://vitest.dev/) for testing with 166 tests covering config loading, themes, segments, utilities, and rendering.
+The project uses [Vitest](https://vitest.dev/) for testing with 164 tests covering config loading, themes, segments, utilities, and rendering.
 
 ```bash
 npm test              # Run tests once
@@ -205,13 +206,13 @@ npm run test:coverage # Coverage report
 | `src/config/loader.test.ts` | 7 | Config loading, merging, fallbacks |
 | `src/themes/index.test.ts` | 37 | Theme retrieval, color validation |
 | `src/segments/block.test.ts` | 8 | Block segment, time calculations |
-| `src/segments/weekly.test.ts` | 10 | Weekly segment, week progress |
-| `src/utils/oauth.test.ts` | 10 | API responses, caching |
+| `src/segments/weekly.test.ts` | 13 | Weekly segment, week progress |
+| `src/utils/oauth.test.ts` | 13 | API responses, caching, trends |
 | `src/utils/claude-hook.test.ts` | 21 | Model name formatting |
 | `src/utils/environment.test.ts` | 20 | Git branch, directory detection |
 | `src/utils/terminal.test.ts` | 13 | Terminal width, ANSI handling |
 | `src/utils/logger.test.ts` | 8 | Debug/error logging |
-| `src/renderer.test.ts` | 21 | Segment rendering, ordering |
+| `src/renderer.test.ts` | 24 | Segment rendering, ordering, view modes |
 
 ## Debug Mode
 

package/dist/index.js

@@ -44,6 +44,9 @@ var DEFAULT_CONFIG = {
     showWeekProgress: true,
     viewMode: "simple"
   },
+  context: {
+    enabled: true
+  },
   budget: {
     pollInterval: 15,
     warningThreshold: 80
@@ -535,6 +538,8 @@ var darkTheme = {
   // Purple for Opus
   sonnet: { bg: "#1a1a1a", fg: "#89ddff" },
   // Light blue for Sonnet
+  context: { bg: "#2a2a2a", fg: "#87ceeb" },
+  // Sky blue for context
   warning: { bg: "#d75f00", fg: "#ffffff" },
   critical: { bg: "#af0000", fg: "#ffffff" }
 };
@@ -548,6 +553,8 @@ var lightTheme = {
   // Purple for Opus
   sonnet: { bg: "#0ea5e9", fg: "#ffffff" },
   // Sky blue for Sonnet
+  context: { bg: "#6366f1", fg: "#ffffff" },
+  // Indigo for context
   warning: { bg: "#f59e0b", fg: "#000000" },
   critical: { bg: "#ef4444", fg: "#ffffff" }
 };
@@ -561,6 +568,8 @@ var nordTheme = {
   // Nord purple for Opus
   sonnet: { bg: "#2e3440", fg: "#88c0d0" },
   // Nord frost for Sonnet
+  context: { bg: "#3b4252", fg: "#81a1c1" },
+  // Nord frost for context
   warning: { bg: "#d08770", fg: "#2e3440" },
   critical: { bg: "#bf616a", fg: "#eceff4" }
 };
@@ -574,6 +583,8 @@ var gruvboxTheme = {
   // Gruvbox purple for Opus
   sonnet: { bg: "#282828", fg: "#8ec07c" },
   // Gruvbox aqua for Sonnet
+  context: { bg: "#3c3836", fg: "#83a598" },
+  // Gruvbox blue for context
   warning: { bg: "#d79921", fg: "#282828" },
   critical: { bg: "#cc241d", fg: "#ebdbb2" }
 };
@@ -587,6 +598,8 @@ var tokyoNightTheme = {
   // Tokyo purple for Opus
   sonnet: { bg: "#1a202c", fg: "#7dcfff" },
   // Tokyo cyan for Sonnet
+  context: { bg: "#2d3748", fg: "#7aa2f7" },
+  // Tokyo blue for context
   warning: { bg: "#e0af68", fg: "#1a1b26" },
   critical: { bg: "#f7768e", fg: "#1a1b26" }
 };
@@ -600,6 +613,8 @@ var rosePineTheme = {
   // Rose Pine iris for Opus
   sonnet: { bg: "#232136", fg: "#31748f" },
   // Rose Pine pine for Sonnet
+  context: { bg: "#2a273f", fg: "#9ccfd8" },
+  // Rose Pine foam for context
   warning: { bg: "#f6c177", fg: "#191724" },
   critical: { bg: "#eb6f92", fg: "#191724" }
 };
@@ -639,9 +654,12 @@ var Renderer = class {
       sonnet: symbolSet.sonnet_cost,
       bottleneck: symbolSet.bottleneck,
       rightArrow: symbolSet.right,
+      leftArrow: symbolSet.left,
       separator: symbolSet.separator,
       branch: symbolSet.branch,
       model: symbolSet.model,
+      context: "\u25D0",
+      // Half-filled circle for context
       progressFull: symbolSet.progress_full,
       progressEmpty: symbolSet.progress_empty,
       trendUp: "\u2191",
@@ -704,6 +722,18 @@ var Renderer = class {
     output += RESET_CODE;
     return output;
   }
+  renderRightPowerline(segments) {
+    if (segments.length === 0) return "";
+    let output = "";
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      output += RESET_CODE;
+      output += ansi.fg(seg.colors.bg) + this.symbols.leftArrow;
+      output += ansi.bg(seg.colors.bg) + ansi.fg(seg.colors.fg) + seg.text;
+    }
+    output += RESET_CODE;
+    return output;
+  }
   renderFallback(segments) {
     return segments.map((seg) => ansi.bg(seg.colors.bg) + ansi.fg(seg.colors.fg) + seg.text + RESET_CODE).join(` ${this.symbols.separator} `);
   }
@@ -806,94 +836,39 @@ var Renderer = class {
       colors: this.theme.weekly
     };
   }
-  renderWeeklyDetailed(ctx) {
+  renderWeeklySmart(ctx) {
     const info = ctx.weeklyInfo;
     const overallIcon = this.usePowerline ? this.symbols.weekly : "All";
-    const opusIcon = this.usePowerline ? this.symbols.opus : "Op";
     const sonnetIcon = this.usePowerline ? this.symbols.sonnet : "So";
-    const parts = [];
-    if (info.percentUsed !== null) {
-      const trend = this.getTrendSymbol(ctx.trendInfo?.sevenDayTrend ?? null);
-      parts.push(`${overallIcon}${Math.round(info.percentUsed)}%${trend}`);
-    }
-    if (info.opusPercentUsed !== null) {
-      const trend = this.getTrendSymbol(ctx.trendInfo?.sevenDayOpusTrend ?? null);
-      parts.push(`${opusIcon}${Math.round(info.opusPercentUsed)}%${trend}`);
-    }
-    if (info.sonnetPercentUsed !== null) {
-      const trend = this.getTrendSymbol(ctx.trendInfo?.sevenDaySonnetTrend ?? null);
-      parts.push(`${sonnetIcon}${Math.round(info.sonnetPercentUsed)}%${trend}`);
-    }
-    if (parts.length === 0) {
+    const showWeekProgress = this.config.weekly?.showWeekProgress ?? true;
+    const currentModel = ctx.envInfo.model?.toLowerCase() ?? "";
+    const isSonnet = currentModel.includes("sonnet");
+    if (isSonnet && info.sonnetPercentUsed !== null && info.percentUsed !== null) {
+      const sonnetTrend = this.getTrendSymbol(ctx.trendInfo?.sevenDaySonnetTrend ?? null);
+      const overallTrend = this.getTrendSymbol(ctx.trendInfo?.sevenDayTrend ?? null);
+      let text2 = `${sonnetIcon}${Math.round(info.sonnetPercentUsed)}%${sonnetTrend} | ${overallIcon}${Math.round(info.percentUsed)}%${overallTrend}`;
+      if (showWeekProgress && !ctx.compact) {
+        text2 += ` (wk ${info.weekProgressPercent}%)`;
+      }
+      const maxPercent = Math.max(info.sonnetPercentUsed, info.percentUsed);
+      const colors2 = this.getColorsForPercent(maxPercent, this.theme.weekly);
       return {
-        text: ` ${overallIcon} -- `,
-        colors: this.theme.weekly
+        text: ` ${text2} `,
+        colors: colors2
       };
     }
-    const separator = ctx.compact ? " " : " ";
-    const text = parts.join(separator);
-    const maxPercent = Math.max(
-      info.percentUsed ?? 0,
-      info.opusPercentUsed ?? 0,
-      info.sonnetPercentUsed ?? 0
-    );
-    const colors = this.getColorsForPercent(maxPercent, this.theme.weekly);
-    return {
-      text: ` ${text} `,
-      colors
-    };
-  }
-  renderWeeklySmart(ctx) {
-    const info = ctx.weeklyInfo;
-    const overallIcon = this.usePowerline ? this.symbols.weekly : "All";
-    const opusIcon = this.usePowerline ? this.symbols.opus : "Op";
-    const sonnetIcon = this.usePowerline ? this.symbols.sonnet : "So";
-    const limits = [];
-    if (info.percentUsed !== null) {
-      limits.push({
-        name: "all",
-        icon: overallIcon,
-        percent: info.percentUsed,
-        trend: ctx.trendInfo?.sevenDayTrend ?? null,
-        colors: this.theme.weekly
-      });
-    }
-    if (info.opusPercentUsed !== null) {
-      limits.push({
-        name: "opus",
-        icon: opusIcon,
-        percent: info.opusPercentUsed,
-        trend: ctx.trendInfo?.sevenDayOpusTrend ?? null,
-        colors: this.theme.opus
-      });
-    }
-    if (info.sonnetPercentUsed !== null) {
-      limits.push({
-        name: "sonnet",
-        icon: sonnetIcon,
-        percent: info.sonnetPercentUsed,
-        trend: ctx.trendInfo?.sevenDaySonnetTrend ?? null,
-        colors: this.theme.sonnet
-      });
-    }
-    if (limits.length === 0) {
+    if (info.percentUsed === null) {
       return {
         text: ` ${overallIcon} -- `,
         colors: this.theme.weekly
       };
     }
-    const bottleneck = limits.reduce((a, b) => a.percent >= b.percent ? a : b);
-    const trend = this.getTrendSymbol(bottleneck.trend);
-    const bottleneckIndicator = limits.length > 1 ? this.symbols.bottleneck : "";
-    let text = `${bottleneck.icon}${Math.round(bottleneck.percent)}%${trend}`;
-    if (bottleneckIndicator && !ctx.compact) {
-      text += bottleneckIndicator;
-    }
-    const showWeekProgress = this.config.weekly?.showWeekProgress ?? true;
+    const trend = this.getTrendSymbol(ctx.trendInfo?.sevenDayTrend ?? null);
+    let text = `${overallIcon}${Math.round(info.percentUsed)}%${trend}`;
     if (showWeekProgress && !ctx.compact) {
       text += ` (wk ${info.weekProgressPercent}%)`;
     }
-    const colors = this.getColorsForPercent(bottleneck.percent, bottleneck.colors);
+    const colors = this.getColorsForPercent(info.percentUsed, this.theme.weekly);
     return {
       text: ` ${text} `,
       colors
@@ -905,8 +880,6 @@ var Renderer = class {
     }
     const viewMode = this.config.weekly?.viewMode ?? "simple";
     switch (viewMode) {
-      case "detailed":
-        return this.renderWeeklyDetailed(ctx);
       case "smart":
         return this.renderWeeklySmart(ctx);
       case "simple":
@@ -914,6 +887,18 @@ var Renderer = class {
         return this.renderWeeklySimple(ctx);
     }
   }
+  renderContext(ctx) {
+    if (!this.config.context?.enabled) {
+      return null;
+    }
+    const percent = ctx.envInfo.contextPercent;
+    const icon = this.usePowerline ? this.symbols.context : "CTX";
+    const colors = this.getColorsForPercent(percent, this.theme.context);
+    return {
+      text: ` ${icon} ${percent}% `,
+      colors
+    };
+  }
   getSegment(name, ctx) {
     switch (name) {
       case "directory":
@@ -926,6 +911,8 @@ var Renderer = class {
         return this.renderBlock(ctx);
       case "weekly":
         return this.renderWeekly(ctx);
+      case "context":
+        return this.renderContext(ctx);
       default:
         return null;
     }
@@ -939,22 +926,35 @@ var Renderer = class {
       trendInfo,
       compact
     };
-    const segments = [];
+    const leftSegments = [];
     const order = this.config.segmentOrder ?? ["directory", "git", "model", "block", "weekly"];
     for (const name of order) {
+      if (name === "context") continue;
       const segment = this.getSegment(name, ctx);
       if (segment) {
-        segments.push(segment);
+        leftSegments.push(segment);
       }
     }
-    if (segments.length === 0) {
-      return "";
+    const rightSegments = [];
+    const contextSegment = this.renderContext(ctx);
+    if (contextSegment) {
+      rightSegments.push(contextSegment);
     }
+    let output = "";
     if (this.usePowerline) {
-      return this.renderPowerline(segments);
+      if (leftSegments.length > 0) {
+        output += this.renderPowerline(leftSegments);
+      }
+      if (rightSegments.length > 0) {
+        output += this.renderRightPowerline(rightSegments);
+      }
     } else {
-      return this.renderFallback(segments);
+      const allSegments = [...leftSegments, ...rightSegments];
+      if (allSegments.length > 0) {
+        output = this.renderFallback(allSegments);
+      }
     }
+    return output;
   }
 };
 
@@ -1080,12 +1080,22 @@ function getClaudeModel(hookData) {
   }
   return null;
 }
+function getContextPercent(hookData) {
+  const ctx = hookData?.context_window;
+  if (!ctx?.current_usage || !ctx.context_window_size) {
+    return 0;
+  }
+  const usage = ctx.current_usage;
+  const totalTokens = (usage.input_tokens || 0) + (usage.cache_creation_input_tokens || 0) + (usage.cache_read_input_tokens || 0);
+  return Math.round(totalTokens / ctx.context_window_size * 100);
+}
 function getEnvironmentInfo(hookData) {
   return {
     directory: getDirectoryName(hookData),
     gitBranch: getGitBranch(),
     gitDirty: hasGitChanges(),
-    model: getClaudeModel(hookData)
+    model: getClaudeModel(hookData),
+    contextPercent: getContextPercent(hookData)
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-limitline",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "A statusline for Claude Code showing real-time usage limits and weekly tracking",
   "main": "dist/index.js",
   "bin": {