claude-limitline 1.1.0 → 1.3.0

package/README.md

@@ -42,19 +42,11 @@ npm install -g claude-limitline
 
 ### From Source
 
-```bash
-git clone https://github.com/tylergraydev/claude-limitline.git
-cd claude-limitline
-npm install
-npm run build
-npm link
-```
+See [Development](#development) section, then run `npm link` to make it available globally.
 
 ## Quick Start
 
-The easiest way to use claude-limitline is to add it directly to your Claude Code settings.
-
-**Add to your Claude Code settings file** (`~/.claude/settings.json`):
+Add to your Claude Code settings file (`~/.claude/settings.json`):
 
 ```json
 {
@@ -67,57 +59,19 @@ The easiest way to use claude-limitline is to add it directly to your Claude Cod
 
 That's it! The status line will now show your usage limits in Claude Code.
 
-### Full Settings Example
-
-Here's a complete example with other common settings:
-
-```json
-{
-  "permissions": {
-    "defaultMode": "default"
-  },
-  "statusLine": {
-    "type": "command",
-    "command": "npx claude-limitline"
-  }
-}
-```
-
-### Global Install (faster startup)
-
-```bash
-npm install -g claude-limitline
-```
-
-Then update your settings:
-
-```json
-{
-  "statusLine": {
-    "type": "command",
-    "command": "claude-limitline"
-  }
-}
-```
-
-### Test It
-
-Run standalone to verify it's working:
-
-```bash
-# Simulate Claude Code hook data
-echo '{"model":{"id":"claude-opus-4-5-20251101"}}' | npx claude-limitline
-```
+> **Tip:** For faster startup, use `"command": "claude-limitline"` after installing globally.
 
 ## Configuration
 
-Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitline.json`) or current working directory:
+Create a `claude-limitline.json` file in your Claude config directory (`~/.claude/claude-limitline.json`) or `.claude-limitline.json` in your current working directory:
 
 ```json
 {
   "display": {
     "style": "powerline",
-    "useNerdFonts": true
+    "useNerdFonts": true,
+    "compactMode": "auto",
+    "compactWidth": 80
   },
   "directory": {
     "enabled": true
@@ -138,13 +92,16 @@ Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitl
     "enabled": true,
     "displayStyle": "text",
     "barWidth": 10,
-    "showWeekProgress": true
+    "showWeekProgress": true,
+    "viewMode": "smart"
   },
   "budget": {
     "pollInterval": 15,
     "warningThreshold": 80
   },
-  "theme": "dark"
+  "theme": "dark",
+  "segmentOrder": ["directory", "git", "model", "block", "weekly"],
+  "showTrend": true
 }
 ```
 
@@ -153,6 +110,8 @@ Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitl
 | Option | Description | Default |
 |--------|-------------|---------|
 | `display.useNerdFonts` | Use Nerd Font symbols for powerline | `true` |
+| `display.compactMode` | `"auto"`, `"always"`, or `"never"` | `"auto"` |
+| `display.compactWidth` | Terminal width threshold for compact mode | `80` |
 | `directory.enabled` | Show repository/directory name | `true` |
 | `git.enabled` | Show git branch with dirty indicator | `true` |
 | `model.enabled` | Show Claude model name | `true` |
@@ -164,9 +123,24 @@ Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitl
 | `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"` |
 | `budget.pollInterval` | Minutes between API calls | `15` |
 | `budget.warningThreshold` | Percentage to trigger warning color | `80` |
 | `theme` | Color theme name | `"dark"` |
+| `segmentOrder` | Array to customize segment order | `["directory", "git", "model", "block", "weekly"]` |
+| `showTrend` | Show ↑↓ arrows for usage changes | `true` |
+
+### Weekly View Modes
+
+The weekly segment supports three view modes for displaying usage limits:
+
+| 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%)` |
+
+**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.
 
 ### Available Themes
 
@@ -206,34 +180,38 @@ claude-limitline retrieves data from two sources:
 
 ## Development
 
-### Setup
-
 ```bash
 git clone https://github.com/tylergraydev/claude-limitline.git
 cd claude-limitline
 npm install
+npm run build    # Build once
+npm run dev      # Watch mode
 ```
 
-### Build
-
-```bash
-npm run build
-```
+## Testing
 
-### Development Mode (watch)
+The project uses [Vitest](https://vitest.dev/) for testing with 166 tests covering config loading, themes, segments, utilities, and rendering.
 
 ```bash
-npm run dev
+npm test              # Run tests once
+npm run test:watch    # Watch mode
+npm run test:coverage # Coverage report
 ```
 
-### Run Locally
-
-```bash
-node dist/index.js
-
-# With simulated hook data
-echo '{"model":{"id":"claude-opus-4-5-20251101"}}' | node dist/index.js
-```
+### Test Structure
+
+| File | Tests | Coverage |
+|------|-------|----------|
+| `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/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 |
 
 ## Debug Mode
 

package/dist/index.js

@@ -18,7 +18,9 @@ function debug(...args) {
 var DEFAULT_CONFIG = {
   display: {
     style: "powerline",
-    useNerdFonts: true
+    useNerdFonts: true,
+    compactMode: "auto",
+    compactWidth: 80
   },
   directory: {
     enabled: true
@@ -39,13 +41,16 @@ var DEFAULT_CONFIG = {
     enabled: true,
     displayStyle: "text",
     barWidth: 10,
-    showWeekProgress: true
+    showWeekProgress: true,
+    viewMode: "simple"
   },
   budget: {
     pollInterval: 15,
     warningThreshold: 80
   },
-  theme: "dark"
+  theme: "dark",
+  segmentOrder: ["directory", "git", "model", "block", "weekly"],
+  showTrend: true
 };
 
 // src/config/loader.ts
@@ -65,8 +70,7 @@ function deepMerge(target, source) {
 function loadConfig() {
   const configPaths = [
     path.join(process.cwd(), ".claude-limitline.json"),
-    path.join(os.homedir(), ".claude-limitline.json"),
-    path.join(os.homedir(), ".config", "claude-limitline", "config.json")
+    path.join(os.homedir(), ".claude", "claude-limitline.json")
   ];
   for (const configPath of configPaths) {
     try {
@@ -256,6 +260,8 @@ async function fetchUsageFromAPI(token) {
     return {
       fiveHour: parseUsageBlock(data.five_hour),
       sevenDay: parseUsageBlock(data.seven_day),
+      sevenDayOpus: parseUsageBlock(data.seven_day_opus ?? void 0),
+      sevenDaySonnet: parseUsageBlock(data.seven_day_sonnet ?? void 0),
       raw: data
     };
   } catch (error) {
@@ -264,8 +270,32 @@ async function fetchUsageFromAPI(token) {
   }
 }
 var cachedUsage = null;
+var previousUsage = null;
 var cacheTimestamp = 0;
 var cachedToken = null;
+function getUsageTrend() {
+  const result = {
+    fiveHourTrend: null,
+    sevenDayTrend: null,
+    sevenDayOpusTrend: null,
+    sevenDaySonnetTrend: null
+  };
+  if (!cachedUsage || !previousUsage) {
+    return result;
+  }
+  const compareTrend = (current, previous) => {
+    if (!current || !previous) return null;
+    const diff = current.percentUsed - previous.percentUsed;
+    if (diff > 0.5) return "up";
+    if (diff < -0.5) return "down";
+    return "same";
+  };
+  result.fiveHourTrend = compareTrend(cachedUsage.fiveHour, previousUsage.fiveHour);
+  result.sevenDayTrend = compareTrend(cachedUsage.sevenDay, previousUsage.sevenDay);
+  result.sevenDayOpusTrend = compareTrend(cachedUsage.sevenDayOpus, previousUsage.sevenDayOpus);
+  result.sevenDaySonnetTrend = compareTrend(cachedUsage.sevenDaySonnet, previousUsage.sevenDaySonnet);
+  return result;
+}
 async function getRealtimeUsage(pollIntervalMinutes = 15) {
   const now = Date.now();
   const cacheAgeMs = now - cacheTimestamp;
@@ -283,6 +313,7 @@ async function getRealtimeUsage(pollIntervalMinutes = 15) {
   }
   const usage = await fetchUsageFromAPI(cachedToken);
   if (usage) {
+    previousUsage = cachedUsage;
     cachedUsage = usage;
     cacheTimestamp = now;
     debug("Refreshed realtime usage cache");
@@ -389,7 +420,11 @@ var WeeklyProvider = class {
       percentUsed: null,
       resetAt: null,
       isRealtime: false,
-      weekProgressPercent
+      weekProgressPercent,
+      opusPercentUsed: null,
+      sonnetPercentUsed: null,
+      opusResetAt: null,
+      sonnetResetAt: null
     };
   }
   async getRealtimeWeeklyInfo(pollInterval) {
@@ -400,15 +435,27 @@ var WeeklyProvider = class {
         return null;
       }
       const sevenDay = usage.sevenDay;
+      const sevenDayOpus = usage.sevenDayOpus;
+      const sevenDaySonnet = usage.sevenDaySonnet;
       const weekProgressPercent = this.calculateWeekProgressFromResetTime(sevenDay.resetAt);
       debug(
         `Weekly segment (realtime): ${sevenDay.percentUsed}% used, resets at ${sevenDay.resetAt.toISOString()}`
       );
+      if (sevenDayOpus) {
+        debug(`Weekly Opus: ${sevenDayOpus.percentUsed}% used`);
+      }
+      if (sevenDaySonnet) {
+        debug(`Weekly Sonnet: ${sevenDaySonnet.percentUsed}% used`);
+      }
       return {
         percentUsed: sevenDay.percentUsed,
         resetAt: sevenDay.resetAt,
         isRealtime: true,
-        weekProgressPercent
+        weekProgressPercent,
+        opusPercentUsed: sevenDayOpus?.percentUsed ?? null,
+        sonnetPercentUsed: sevenDaySonnet?.percentUsed ?? null,
+        opusResetAt: sevenDayOpus?.resetAt ?? null,
+        sonnetResetAt: sevenDaySonnet?.resetAt ?? null
       };
     } catch (error) {
       debug("Error getting realtime weekly info:", error);
@@ -423,10 +470,18 @@ var SYMBOLS = {
   left: "\uE0B2",
   branch: "\uE0A0",
   separator: "\uE0B1",
-  block_cost: "\uF252",
-  // Hourglass
-  weekly_cost: "\uF073",
-  // Calendar
+  model: "\u2731",
+  // Heavy asterisk ✱
+  block_cost: "\u25EB",
+  // White square with vertical bisecting line ◫
+  weekly_cost: "\u25CB",
+  // Circle ○
+  opus_cost: "\u25C8",
+  // Diamond with dot ◈
+  sonnet_cost: "\u25C7",
+  // White diamond ◇
+  bottleneck: "\u25B2",
+  // Black up-pointing triangle ▲
   progress_full: "\u2588",
   // Full block
   progress_empty: "\u2591"
@@ -437,8 +492,12 @@ var TEXT_SYMBOLS = {
   left: "<",
   branch: "",
   separator: "|",
+  model: "*",
   block_cost: "BLK",
   weekly_cost: "WK",
+  opus_cost: "Op",
+  sonnet_cost: "So",
+  bottleneck: "*",
   progress_full: "#",
   progress_empty: "-"
 };
@@ -472,6 +531,10 @@ var darkTheme = {
   model: { bg: "#2d2d2d", fg: "#ffffff" },
   block: { bg: "#2a2a2a", fg: "#87ceeb" },
   weekly: { bg: "#1a1a1a", fg: "#98fb98" },
+  opus: { bg: "#1a1a1a", fg: "#c792ea" },
+  // Purple for Opus
+  sonnet: { bg: "#1a1a1a", fg: "#89ddff" },
+  // Light blue for Sonnet
   warning: { bg: "#d75f00", fg: "#ffffff" },
   critical: { bg: "#af0000", fg: "#ffffff" }
 };
@@ -481,6 +544,10 @@ var lightTheme = {
   model: { bg: "#87ceeb", fg: "#000000" },
   block: { bg: "#6366f1", fg: "#ffffff" },
   weekly: { bg: "#10b981", fg: "#ffffff" },
+  opus: { bg: "#8b5cf6", fg: "#ffffff" },
+  // Purple for Opus
+  sonnet: { bg: "#0ea5e9", fg: "#ffffff" },
+  // Sky blue for Sonnet
   warning: { bg: "#f59e0b", fg: "#000000" },
   critical: { bg: "#ef4444", fg: "#ffffff" }
 };
@@ -490,6 +557,10 @@ var nordTheme = {
   model: { bg: "#4c566a", fg: "#81a1c1" },
   block: { bg: "#3b4252", fg: "#81a1c1" },
   weekly: { bg: "#2e3440", fg: "#8fbcbb" },
+  opus: { bg: "#2e3440", fg: "#b48ead" },
+  // Nord purple for Opus
+  sonnet: { bg: "#2e3440", fg: "#88c0d0" },
+  // Nord frost for Sonnet
   warning: { bg: "#d08770", fg: "#2e3440" },
   critical: { bg: "#bf616a", fg: "#eceff4" }
 };
@@ -499,6 +570,10 @@ var gruvboxTheme = {
   model: { bg: "#665c54", fg: "#83a598" },
   block: { bg: "#3c3836", fg: "#83a598" },
   weekly: { bg: "#282828", fg: "#fabd2f" },
+  opus: { bg: "#282828", fg: "#d3869b" },
+  // Gruvbox purple for Opus
+  sonnet: { bg: "#282828", fg: "#8ec07c" },
+  // Gruvbox aqua for Sonnet
   warning: { bg: "#d79921", fg: "#282828" },
   critical: { bg: "#cc241d", fg: "#ebdbb2" }
 };
@@ -508,6 +583,10 @@ var tokyoNightTheme = {
   model: { bg: "#191b29", fg: "#fca7ea" },
   block: { bg: "#2d3748", fg: "#7aa2f7" },
   weekly: { bg: "#1a202c", fg: "#4fd6be" },
+  opus: { bg: "#1a202c", fg: "#bb9af7" },
+  // Tokyo purple for Opus
+  sonnet: { bg: "#1a202c", fg: "#7dcfff" },
+  // Tokyo cyan for Sonnet
   warning: { bg: "#e0af68", fg: "#1a1b26" },
   critical: { bg: "#f7768e", fg: "#1a1b26" }
 };
@@ -517,6 +596,10 @@ var rosePineTheme = {
   model: { bg: "#191724", fg: "#ebbcba" },
   block: { bg: "#2a273f", fg: "#eb6f92" },
   weekly: { bg: "#232136", fg: "#9ccfd8" },
+  opus: { bg: "#232136", fg: "#c4a7e7" },
+  // Rose Pine iris for Opus
+  sonnet: { bg: "#232136", fg: "#31748f" },
+  // Rose Pine pine for Sonnet
   warning: { bg: "#f6c177", fg: "#191724" },
   critical: { bg: "#eb6f92", fg: "#191724" }
 };
@@ -532,6 +615,11 @@ function getTheme(name) {
   return themes[name] || themes.dark;
 }
 
+// src/utils/terminal.ts
+function getTerminalWidth() {
+  return process.stdout.columns || 80;
+}
+
 // src/renderer.ts
 var Renderer = class {
   config;
@@ -547,28 +635,49 @@ var Renderer = class {
     this.symbols = {
       block: symbolSet.block_cost,
       weekly: symbolSet.weekly_cost,
+      opus: symbolSet.opus_cost,
+      sonnet: symbolSet.sonnet_cost,
+      bottleneck: symbolSet.bottleneck,
       rightArrow: symbolSet.right,
       separator: symbolSet.separator,
       branch: symbolSet.branch,
-      model: "\uF0E7",
-      // Lightning bolt for model
+      model: symbolSet.model,
       progressFull: symbolSet.progress_full,
-      progressEmpty: symbolSet.progress_empty
+      progressEmpty: symbolSet.progress_empty,
+      trendUp: "\u2191",
+      trendDown: "\u2193"
     };
   }
+  isCompactMode() {
+    const mode = this.config.display?.compactMode ?? "auto";
+    if (mode === "always") return true;
+    if (mode === "never") return false;
+    const threshold = this.config.display?.compactWidth ?? 80;
+    const termWidth = getTerminalWidth();
+    return termWidth < threshold;
+  }
   formatProgressBar(percent, width) {
     const filled = Math.round(percent / 100 * width);
     const empty = width - filled;
     return this.symbols.progressFull.repeat(filled) + this.symbols.progressEmpty.repeat(empty);
   }
-  formatTimeRemaining(minutes) {
+  formatTimeRemaining(minutes, compact) {
     if (minutes >= 60) {
       const hours = Math.floor(minutes / 60);
       const mins = minutes % 60;
+      if (compact) {
+        return mins > 0 ? `${hours}h${mins}m` : `${hours}h`;
+      }
       return mins > 0 ? `${hours}h${mins}m` : `${hours}h`;
     }
     return `${minutes}m`;
   }
+  getTrendSymbol(trend) {
+    if (!this.config.showTrend) return "";
+    if (trend === "up") return this.symbols.trendUp;
+    if (trend === "down") return this.symbols.trendDown;
+    return "";
+  }
   getColorsForPercent(percent, baseColors) {
     const threshold = this.config.budget?.warningThreshold ?? 80;
     if (percent >= 100) {
@@ -598,63 +707,69 @@ var Renderer = class {
   renderFallback(segments) {
     return segments.map((seg) => ansi.bg(seg.colors.bg) + ansi.fg(seg.colors.fg) + seg.text + RESET_CODE).join(` ${this.symbols.separator} `);
   }
-  renderDirectory(envInfo) {
-    if (!this.config.directory?.enabled || !envInfo.directory) {
+  renderDirectory(ctx) {
+    if (!this.config.directory?.enabled || !ctx.envInfo.directory) {
       return null;
     }
+    const name = ctx.compact && ctx.envInfo.directory.length > 12 ? ctx.envInfo.directory.slice(0, 10) + "\u2026" : ctx.envInfo.directory;
     return {
-      text: ` ${envInfo.directory} `,
+      text: ` ${name} `,
       colors: this.theme.directory
     };
   }
-  renderGit(envInfo) {
-    if (!this.config.git?.enabled || !envInfo.gitBranch) {
+  renderGit(ctx) {
+    if (!this.config.git?.enabled || !ctx.envInfo.gitBranch) {
       return null;
     }
-    const dirtyIndicator = envInfo.gitDirty ? " \u25CF" : "";
+    const dirtyIndicator = ctx.envInfo.gitDirty ? " \u25CF" : "";
     const icon = this.usePowerline ? this.symbols.branch : "";
     const prefix = icon ? `${icon} ` : "";
+    let branch = ctx.envInfo.gitBranch;
+    if (ctx.compact && branch.length > 10) {
+      branch = branch.slice(0, 8) + "\u2026";
+    }
     return {
-      text: ` ${prefix}${envInfo.gitBranch}${dirtyIndicator} `,
+      text: ` ${prefix}${branch}${dirtyIndicator} `,
       colors: this.theme.git
     };
   }
-  renderModel(envInfo) {
-    if (!this.config.model?.enabled || !envInfo.model) {
+  renderModel(ctx) {
+    if (!this.config.model?.enabled || !ctx.envInfo.model) {
       return null;
     }
     const icon = this.usePowerline ? this.symbols.model : "";
     const prefix = icon ? `${icon} ` : "";
     return {
-      text: ` ${prefix}${envInfo.model} `,
+      text: ` ${prefix}${ctx.envInfo.model} `,
       colors: this.theme.model
     };
   }
-  renderBlock(blockInfo) {
-    if (!blockInfo || !this.config.block?.enabled) {
+  renderBlock(ctx) {
+    if (!ctx.blockInfo || !this.config.block?.enabled) {
       return null;
     }
     const icon = this.usePowerline ? this.symbols.block : "BLK";
-    if (blockInfo.percentUsed === null) {
+    if (ctx.blockInfo.percentUsed === null) {
       return {
         text: ` ${icon} -- `,
         colors: this.theme.block
       };
     }
-    const percent = blockInfo.percentUsed;
+    const percent = ctx.blockInfo.percentUsed;
     const colors = this.getColorsForPercent(percent, this.theme.block);
     const displayStyle = this.config.block.displayStyle || "text";
     const barWidth = this.config.block.barWidth || 10;
     const showTime = this.config.block.showTimeRemaining ?? true;
+    const trend = this.getTrendSymbol(ctx.trendInfo?.fiveHourTrend ?? null);
     let text;
-    if (displayStyle === "bar") {
+    if (displayStyle === "bar" && !ctx.compact) {
       const bar = this.formatProgressBar(percent, barWidth);
-      text = `${bar} ${Math.round(percent)}%`;
+      text = `${bar} ${Math.round(percent)}%${trend}`;
     } else {
-      text = `${Math.round(percent)}%`;
+      text = `${Math.round(percent)}%${trend}`;
     }
-    if (showTime && blockInfo.timeRemaining !== null) {
-      const timeStr = this.formatTimeRemaining(blockInfo.timeRemaining);
+    if (showTime && ctx.blockInfo.timeRemaining !== null && !ctx.compact) {
+      const timeStr = this.formatTimeRemaining(ctx.blockInfo.timeRemaining, ctx.compact);
       text += ` (${timeStr})`;
     }
     return {
@@ -662,48 +777,176 @@ var Renderer = class {
       colors
     };
   }
-  renderWeekly(weeklyInfo) {
-    if (!weeklyInfo || !this.config.weekly?.enabled) {
-      return null;
-    }
+  renderWeeklySimple(ctx) {
+    const info = ctx.weeklyInfo;
     const icon = this.usePowerline ? this.symbols.weekly : "WK";
-    if (weeklyInfo.percentUsed === null) {
+    if (info.percentUsed === null) {
       return {
         text: ` ${icon} -- `,
         colors: this.theme.weekly
       };
     }
-    const percent = weeklyInfo.percentUsed;
-    const displayStyle = this.config.weekly.displayStyle || "text";
-    const barWidth = this.config.weekly.barWidth || 10;
-    const showWeekProgress = this.config.weekly.showWeekProgress ?? true;
+    const percent = info.percentUsed;
+    const displayStyle = this.config.weekly?.displayStyle || "text";
+    const barWidth = this.config.weekly?.barWidth || 10;
+    const showWeekProgress = this.config.weekly?.showWeekProgress ?? true;
+    const trend = this.getTrendSymbol(ctx.trendInfo?.sevenDayTrend ?? null);
     let text;
-    if (displayStyle === "bar") {
+    if (displayStyle === "bar" && !ctx.compact) {
       const bar = this.formatProgressBar(percent, barWidth);
-      text = `${bar} ${Math.round(percent)}%`;
+      text = `${bar} ${Math.round(percent)}%${trend}`;
     } else {
-      text = `${Math.round(percent)}%`;
+      text = `${Math.round(percent)}%${trend}`;
     }
-    if (showWeekProgress) {
-      text += ` (wk ${weeklyInfo.weekProgressPercent}%)`;
+    if (showWeekProgress && !ctx.compact) {
+      text += ` (wk ${info.weekProgressPercent}%)`;
     }
     return {
       text: ` ${icon} ${text} `,
       colors: this.theme.weekly
     };
   }
-  render(blockInfo, weeklyInfo, envInfo) {
+  renderWeeklyDetailed(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) {
+      return {
+        text: ` ${overallIcon} -- `,
+        colors: this.theme.weekly
+      };
+    }
+    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) {
+      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;
+    if (showWeekProgress && !ctx.compact) {
+      text += ` (wk ${info.weekProgressPercent}%)`;
+    }
+    const colors = this.getColorsForPercent(bottleneck.percent, bottleneck.colors);
+    return {
+      text: ` ${text} `,
+      colors
+    };
+  }
+  renderWeekly(ctx) {
+    if (!ctx.weeklyInfo || !this.config.weekly?.enabled) {
+      return null;
+    }
+    const viewMode = this.config.weekly?.viewMode ?? "simple";
+    switch (viewMode) {
+      case "detailed":
+        return this.renderWeeklyDetailed(ctx);
+      case "smart":
+        return this.renderWeeklySmart(ctx);
+      case "simple":
+      default:
+        return this.renderWeeklySimple(ctx);
+    }
+  }
+  getSegment(name, ctx) {
+    switch (name) {
+      case "directory":
+        return this.renderDirectory(ctx);
+      case "git":
+        return this.renderGit(ctx);
+      case "model":
+        return this.renderModel(ctx);
+      case "block":
+        return this.renderBlock(ctx);
+      case "weekly":
+        return this.renderWeekly(ctx);
+      default:
+        return null;
+    }
+  }
+  render(blockInfo, weeklyInfo, envInfo, trendInfo = null) {
+    const compact = this.isCompactMode();
+    const ctx = {
+      blockInfo,
+      weeklyInfo,
+      envInfo,
+      trendInfo,
+      compact
+    };
     const segments = [];
-    const dirSegment = this.renderDirectory(envInfo);
-    if (dirSegment) segments.push(dirSegment);
-    const gitSegment = this.renderGit(envInfo);
-    if (gitSegment) segments.push(gitSegment);
-    const modelSegment = this.renderModel(envInfo);
-    if (modelSegment) segments.push(modelSegment);
-    const blockSegment = this.renderBlock(blockInfo);
-    if (blockSegment) segments.push(blockSegment);
-    const weeklySegment = this.renderWeekly(weeklyInfo);
-    if (weeklySegment) segments.push(weeklySegment);
+    const order = this.config.segmentOrder ?? ["directory", "git", "model", "block", "weekly"];
+    for (const name of order) {
+      const segment = this.getSegment(name, ctx);
+      if (segment) {
+        segments.push(segment);
+      }
+    }
     if (segments.length === 0) {
       return "";
     }
@@ -869,8 +1112,10 @@ async function main() {
     ]);
     debug("Block info:", JSON.stringify(blockInfo));
     debug("Weekly info:", JSON.stringify(weeklyInfo));
+    const trendInfo = config.showTrend ? getUsageTrend() : null;
+    debug("Trend info:", JSON.stringify(trendInfo));
     const renderer = new Renderer(config);
-    const output = renderer.render(blockInfo, weeklyInfo, envInfo);
+    const output = renderer.render(blockInfo, weeklyInfo, envInfo, trendInfo);
     if (output) {
       process.stdout.write(output);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-limitline",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "A statusline for Claude Code showing real-time usage limits and weekly tracking",
   "main": "dist/index.js",
   "bin": {
@@ -13,7 +13,9 @@
     "start": "node dist/index.js",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -37,8 +39,10 @@
   "homepage": "https://github.com/tylergraydev/claude-limitline#readme",
   "devDependencies": {
     "@types/node": "^20.10.0",
+    "@vitest/coverage-v8": "^4.0.16",
     "tsup": "^8.0.0",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.0",
+    "vitest": "^4.0.16"
   },
   "engines": {
     "node": ">=18.0.0"