claude-limitline 1.1.0 → 1.2.0

package/README.md

@@ -111,13 +111,15 @@ echo '{"model":{"id":"claude-opus-4-5-20251101"}}' | npx claude-limitline
 
 ## 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
@@ -144,7 +146,9 @@ Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitl
     "pollInterval": 15,
     "warningThreshold": 80
   },
-  "theme": "dark"
+  "theme": "dark",
+  "segmentOrder": ["directory", "git", "model", "block", "weekly"],
+  "showTrend": true
 }
 ```
 
@@ -153,6 +157,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` |
@@ -167,6 +173,8 @@ Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitl
 | `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` |
 
 ### Available Themes
 

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
@@ -45,7 +47,9 @@ var DEFAULT_CONFIG = {
     pollInterval: 15,
     warningThreshold: 80
   },
-  theme: "dark"
+  theme: "dark",
+  segmentOrder: ["directory", "git", "model", "block", "weekly"],
+  showTrend: true
 };
 
 // src/config/loader.ts
@@ -65,8 +69,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 {
@@ -264,8 +267,31 @@ async function fetchUsageFromAPI(token) {
   }
 }
 var cachedUsage = null;
+var previousUsage = null;
 var cacheTimestamp = 0;
 var cachedToken = null;
+function getUsageTrend() {
+  const result = {
+    fiveHourTrend: null,
+    sevenDayTrend: null
+  };
+  if (!cachedUsage || !previousUsage) {
+    return result;
+  }
+  if (cachedUsage.fiveHour && previousUsage.fiveHour) {
+    const diff = cachedUsage.fiveHour.percentUsed - previousUsage.fiveHour.percentUsed;
+    if (diff > 0.5) result.fiveHourTrend = "up";
+    else if (diff < -0.5) result.fiveHourTrend = "down";
+    else result.fiveHourTrend = "same";
+  }
+  if (cachedUsage.sevenDay && previousUsage.sevenDay) {
+    const diff = cachedUsage.sevenDay.percentUsed - previousUsage.sevenDay.percentUsed;
+    if (diff > 0.5) result.sevenDayTrend = "up";
+    else if (diff < -0.5) result.sevenDayTrend = "down";
+    else result.sevenDayTrend = "same";
+  }
+  return result;
+}
 async function getRealtimeUsage(pollIntervalMinutes = 15) {
   const now = Date.now();
   const cacheAgeMs = now - cacheTimestamp;
@@ -283,6 +309,7 @@ async function getRealtimeUsage(pollIntervalMinutes = 15) {
   }
   const usage = await fetchUsageFromAPI(cachedToken);
   if (usage) {
+    previousUsage = cachedUsage;
     cachedUsage = usage;
     cacheTimestamp = now;
     debug("Refreshed realtime usage cache");
@@ -423,10 +450,12 @@ 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 ○
   progress_full: "\u2588",
   // Full block
   progress_empty: "\u2591"
@@ -437,6 +466,7 @@ var TEXT_SYMBOLS = {
   left: "<",
   branch: "",
   separator: "|",
+  model: "*",
   block_cost: "BLK",
   weekly_cost: "WK",
   progress_full: "#",
@@ -532,6 +562,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;
@@ -550,25 +585,43 @@ var Renderer = class {
       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 +651,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 +721,70 @@ var Renderer = class {
       colors
     };
   }
-  renderWeekly(weeklyInfo) {
-    if (!weeklyInfo || !this.config.weekly?.enabled) {
+  renderWeekly(ctx) {
+    if (!ctx.weeklyInfo || !this.config.weekly?.enabled) {
       return null;
     }
     const icon = this.usePowerline ? this.symbols.weekly : "WK";
-    if (weeklyInfo.percentUsed === null) {
+    if (ctx.weeklyInfo.percentUsed === null) {
       return {
         text: ` ${icon} -- `,
         colors: this.theme.weekly
       };
     }
-    const percent = weeklyInfo.percentUsed;
+    const percent = ctx.weeklyInfo.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 ${ctx.weeklyInfo.weekProgressPercent}%)`;
     }
     return {
       text: ` ${icon} ${text} `,
       colors: this.theme.weekly
     };
   }
-  render(blockInfo, weeklyInfo, envInfo) {
+  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 +950,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.2.0",
   "description": "A statusline for Claude Code showing real-time usage limits and weekly tracking",
   "main": "dist/index.js",
   "bin": {