claude-limitline 1.0.1 → 1.2.0

package/README.md

@@ -1,26 +1,36 @@
 # claude-limitline
 
-A statusline for Claude Code showing real-time usage limits and weekly tracking.
+A powerline-style statusline for Claude Code showing real-time usage limits, git info, and model details.
 
 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
 ![Node](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen.svg)
 ![TypeScript](https://img.shields.io/badge/typescript-5.3-blue.svg)
 
+![Theme Preview](imgs/themes-preview.png)
+
 ## Features
 
+- **Powerline Style** - Beautiful segmented display with smooth transitions
 - **5-Hour Block Limit** - Shows current usage percentage with time remaining until reset
 - **7-Day Rolling Limit** - Tracks weekly usage with progress indicator
-- **Real-time Tracking** - Uses Anthropic's OAuth usage API for accurate usage data
-- **Progress Bar Display** - Visual progress bars for quick status checks
+- **Repository Name** - Displays current project/directory name
+- **Git Branch** - Shows current branch with dirty indicator (●)
+- **Claude Model** - Displays the active model (Opus 4.5, Sonnet 4, etc.)
+- **Multiple Themes** - Dark, light, nord, gruvbox, tokyo-night, and rose-pine
+- **Real-time Tracking** - Uses Anthropic's OAuth usage API for accurate data
 - **Cross-Platform** - Works on Windows, macOS, and Linux
-- **Zero Runtime Dependencies** - Lightweight and fast
-- **Multiple Themes** - Dark, light, nord, and gruvbox themes included
+
+## Example Output
+
+```
+ claude-limitline  main ●   Opus 4.5   12% (3h20m)   45% (wk 85%)
+```
 
 ## Prerequisites
 
 - **Node.js** 18.0.0 or higher
 - **Claude Code** CLI installed and authenticated (for OAuth token)
-- **Nerd Font** (optional, for powerline symbols)
+- **Nerd Font** (recommended, for powerline symbols)
 
 ## Installation
 
@@ -40,16 +50,6 @@ npm run build
 npm link
 ```
 
-### Using Docker
-
-```bash
-# Build the image
-docker build -t claude-limitline .
-
-# Run (mount your .claude directory for OAuth token access)
-docker run --rm -v ~/.claude:/root/.claude claude-limitline
-```
-
 ## Quick Start
 
 The easiest way to use claude-limitline is to add it directly to your Claude Code settings.
@@ -83,9 +83,7 @@ Here's a complete example with other common settings:
 }
 ```
 
-### Alternative: Global Install
-
-If you prefer a global installation (slightly faster startup):
+### Global Install (faster startup)
 
 ```bash
 npm install -g claude-limitline
@@ -107,33 +105,40 @@ Then update your settings:
 Run standalone to verify it's working:
 
 ```bash
-npx claude-limitline
-```
-
-You should see output like:
-```
-⏳ ████████░░ 45% (2h 30m left) | 📅 ██████░░░░ 62% (wk 43%)
+# Simulate Claude Code hook data
+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": "minimal",
-    "useNerdFonts": true
+    "style": "powerline",
+    "useNerdFonts": true,
+    "compactMode": "auto",
+    "compactWidth": 80
+  },
+  "directory": {
+    "enabled": true
+  },
+  "git": {
+    "enabled": true
+  },
+  "model": {
+    "enabled": true
   },
   "block": {
     "enabled": true,
-    "displayStyle": "bar",
+    "displayStyle": "text",
     "barWidth": 10,
     "showTimeRemaining": true
   },
   "weekly": {
     "enabled": true,
-    "displayStyle": "bar",
+    "displayStyle": "text",
     "barWidth": 10,
     "showWeekProgress": true
   },
@@ -141,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
 }
 ```
 
@@ -149,29 +156,55 @@ Create a `.claude-limitline.json` file in your home directory (`~/.claude-limitl
 
 | Option | Description | Default |
 |--------|-------------|---------|
-| `display.useNerdFonts` | Use Nerd Font symbols (⏳📅) vs ASCII | `true` |
+| `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` |
 | `block.enabled` | Show 5-hour block usage | `true` |
-| `block.displayStyle` | `"bar"` or `"text"` | `"bar"` |
+| `block.displayStyle` | `"bar"` or `"text"` | `"text"` |
 | `block.barWidth` | Width of progress bar in characters | `10` |
 | `block.showTimeRemaining` | Show time until block resets | `true` |
 | `weekly.enabled` | Show 7-day rolling usage | `true` |
-| `weekly.displayStyle` | `"bar"` or `"text"` | `"bar"` |
+| `weekly.displayStyle` | `"bar"` or `"text"` | `"text"` |
 | `weekly.barWidth` | Width of progress bar in characters | `10` |
 | `weekly.showWeekProgress` | Show week progress percentage | `true` |
 | `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
 
-- `dark` - Default dark theme
-- `light` - Light background theme
+- `dark` - Default dark theme with warm browns and cool cyans
+- `light` - Light background theme with vibrant colors
 - `nord` - Nord color palette
 - `gruvbox` - Gruvbox color palette
+- `tokyo-night` - Tokyo Night color palette
+- `rose-pine` - Rosé Pine color palette
+
+## Segments
+
+The statusline displays the following segments (all configurable):
+
+| Segment | Description | Color (dark theme) |
+|---------|-------------|-------------------|
+| **Directory** | Current repo/project name | Brown/Orange |
+| **Git** | Branch name + dirty indicator (●) | Dark Gray |
+| **Model** | Claude model (Opus 4.5, Sonnet 4, etc.) | Dark Gray |
+| **Block** | 5-hour usage % + time remaining | Cyan (warning: Orange, critical: Red) |
+| **Weekly** | 7-day usage % + week progress | Green |
 
 ## How It Works
 
-claude-limitline retrieves your Claude usage data from Anthropic's OAuth usage API. It reads your OAuth token from:
+claude-limitline retrieves data from two sources:
+
+1. **Hook Data (stdin)** - Claude Code passes JSON with model info, workspace, and session data
+2. **Usage API** - Fetches usage limits from Anthropic's OAuth usage endpoint
+
+### OAuth Token Location
 
 | Platform | Location |
 |----------|----------|
@@ -179,15 +212,6 @@ claude-limitline retrieves your Claude usage data from Anthropic's OAuth usage A
 | **macOS** | Keychain or `~/.claude/.credentials.json` |
 | **Linux** | secret-tool (GNOME Keyring) or `~/.claude/.credentials.json` |
 
-The usage data is cached locally to respect API rate limits. The cache duration is configurable via `budget.pollInterval` (default: 15 minutes).
-
-### API Response
-
-The tool queries Anthropic's usage endpoint which returns:
-
-- **5-hour block**: Usage percentage and reset time for the rolling 5-hour window
-- **7-day rolling**: Usage percentage and reset time for the rolling 7-day window
-
 ## Development
 
 ### Setup
@@ -210,16 +234,13 @@ npm run build
 npm run dev
 ```
 
-### Type Checking
-
-```bash
-npm run typecheck
-```
-
 ### Run Locally
 
 ```bash
 node dist/index.js
+
+# With simulated hook data
+echo '{"model":{"id":"claude-opus-4-5-20251101"}}' | node dist/index.js
 ```
 
 ## Debug Mode
@@ -241,25 +262,22 @@ Debug output is written to stderr so it won't interfere with the status line out
 
 ## Troubleshooting
 
-### "No data" or empty output
-
-1. **Check OAuth token**: Make sure you're logged into Claude Code (`claude --login`)
-2. **Check credentials file**: Verify `~/.claude/.credentials.json` exists and contains `claudeAiOauth.accessToken`
-3. **Enable debug mode**: Run with `CLAUDE_LIMITLINE_DEBUG=true` to see detailed logs
-
-### Token not found
-
-The OAuth token is stored by Claude Code when you authenticate. Try:
+### Model not showing
 
+The model is passed via stdin from Claude Code. If running standalone, pipe in hook data:
 ```bash
-# Re-authenticate with Claude Code
-claude --login
+echo '{"model":{"id":"claude-opus-4-5-20251101"}}' | claude-limitline
 ```
 
-### API returns errors
+### "No data" or empty output
+
+1. **Check OAuth token**: Make sure you're logged into Claude Code (`claude --login`)
+2. **Check credentials file**: Verify `~/.claude/.credentials.json` exists
+3. **Enable debug mode**: Run with `CLAUDE_LIMITLINE_DEBUG=true`
+
+### Git branch not showing
 
-- Ensure your Claude subscription is active
-- Check if you've exceeded API rate limits (try increasing `pollInterval`)
+Make sure you're in a git repository. The git segment only appears when a `.git` directory is found.
 
 ## Contributing
 

package/dist/index.js

@@ -17,18 +17,29 @@ function debug(...args) {
 // src/config/types.ts
 var DEFAULT_CONFIG = {
   display: {
-    style: "minimal",
-    useNerdFonts: true
+    style: "powerline",
+    useNerdFonts: true,
+    compactMode: "auto",
+    compactWidth: 80
+  },
+  directory: {
+    enabled: true
+  },
+  git: {
+    enabled: true
+  },
+  model: {
+    enabled: true
   },
   block: {
     enabled: true,
-    displayStyle: "bar",
+    displayStyle: "text",
     barWidth: 10,
     showTimeRemaining: true
   },
   weekly: {
     enabled: true,
-    displayStyle: "bar",
+    displayStyle: "text",
     barWidth: 10,
     showWeekProgress: true
   },
@@ -36,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
@@ -56,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 {
@@ -255,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;
@@ -274,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");
@@ -414,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"
@@ -428,6 +466,7 @@ var TEXT_SYMBOLS = {
   left: "<",
   branch: "",
   separator: "|",
+  model: "*",
   block_cost: "BLK",
   weekly_cost: "WK",
   progress_full: "#",
@@ -436,178 +475,467 @@ var TEXT_SYMBOLS = {
 var RESET_CODE = "\x1B[0m";
 
 // src/themes/index.ts
-var color = (n) => `\x1B[38;5;${n}m`;
-var bgColor = (n) => `\x1B[48;5;${n}m`;
-var themes = {
-  dark: {
-    blockBg: bgColor(236),
-    blockFg: color(252),
-    weeklyBg: bgColor(236),
-    weeklyFg: color(252),
-    warningBg: bgColor(172),
-    warningFg: color(232),
-    criticalBg: bgColor(160),
-    criticalFg: color(255),
-    progressFull: color(76),
-    progressEmpty: color(240),
-    separatorFg: color(244)
-  },
-  light: {
-    blockBg: bgColor(254),
-    blockFg: color(236),
-    weeklyBg: bgColor(254),
-    weeklyFg: color(236),
-    warningBg: bgColor(214),
-    warningFg: color(232),
-    criticalBg: bgColor(196),
-    criticalFg: color(255),
-    progressFull: color(34),
-    progressEmpty: color(250),
-    separatorFg: color(244)
-  },
-  nord: {
-    blockBg: bgColor(236),
-    blockFg: color(110),
-    weeklyBg: bgColor(236),
-    weeklyFg: color(110),
-    warningBg: bgColor(179),
-    warningFg: color(232),
-    criticalBg: bgColor(131),
-    criticalFg: color(255),
-    progressFull: color(108),
-    progressEmpty: color(239),
-    separatorFg: color(60)
-  },
-  gruvbox: {
-    blockBg: bgColor(237),
-    blockFg: color(223),
-    weeklyBg: bgColor(237),
-    weeklyFg: color(223),
-    warningBg: bgColor(214),
-    warningFg: color(235),
-    criticalBg: bgColor(167),
-    criticalFg: color(235),
-    progressFull: color(142),
-    progressEmpty: color(239),
-    separatorFg: color(246)
+function hexToAnsi256(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  if (r === g && g === b) {
+    if (r < 8) return 16;
+    if (r > 248) return 231;
+    return Math.round((r - 8) / 247 * 24) + 232;
   }
+  const ri = Math.round(r / 255 * 5);
+  const gi = Math.round(g / 255 * 5);
+  const bi = Math.round(b / 255 * 5);
+  return 16 + 36 * ri + 6 * gi + bi;
+}
+var ansi = {
+  fg: (hex) => `\x1B[38;5;${hexToAnsi256(hex)}m`,
+  bg: (hex) => `\x1B[48;5;${hexToAnsi256(hex)}m`,
+  fgRaw: (n) => `\x1B[38;5;${n}m`,
+  bgRaw: (n) => `\x1B[48;5;${n}m`,
+  reset: "\x1B[0m"
+};
+var darkTheme = {
+  directory: { bg: "#8b4513", fg: "#ffffff" },
+  git: { bg: "#404040", fg: "#ffffff" },
+  model: { bg: "#2d2d2d", fg: "#ffffff" },
+  block: { bg: "#2a2a2a", fg: "#87ceeb" },
+  weekly: { bg: "#1a1a1a", fg: "#98fb98" },
+  warning: { bg: "#d75f00", fg: "#ffffff" },
+  critical: { bg: "#af0000", fg: "#ffffff" }
+};
+var lightTheme = {
+  directory: { bg: "#ff6b47", fg: "#ffffff" },
+  git: { bg: "#4fb3d9", fg: "#ffffff" },
+  model: { bg: "#87ceeb", fg: "#000000" },
+  block: { bg: "#6366f1", fg: "#ffffff" },
+  weekly: { bg: "#10b981", fg: "#ffffff" },
+  warning: { bg: "#f59e0b", fg: "#000000" },
+  critical: { bg: "#ef4444", fg: "#ffffff" }
+};
+var nordTheme = {
+  directory: { bg: "#434c5e", fg: "#d8dee9" },
+  git: { bg: "#3b4252", fg: "#a3be8c" },
+  model: { bg: "#4c566a", fg: "#81a1c1" },
+  block: { bg: "#3b4252", fg: "#81a1c1" },
+  weekly: { bg: "#2e3440", fg: "#8fbcbb" },
+  warning: { bg: "#d08770", fg: "#2e3440" },
+  critical: { bg: "#bf616a", fg: "#eceff4" }
+};
+var gruvboxTheme = {
+  directory: { bg: "#504945", fg: "#ebdbb2" },
+  git: { bg: "#3c3836", fg: "#b8bb26" },
+  model: { bg: "#665c54", fg: "#83a598" },
+  block: { bg: "#3c3836", fg: "#83a598" },
+  weekly: { bg: "#282828", fg: "#fabd2f" },
+  warning: { bg: "#d79921", fg: "#282828" },
+  critical: { bg: "#cc241d", fg: "#ebdbb2" }
+};
+var tokyoNightTheme = {
+  directory: { bg: "#2f334d", fg: "#82aaff" },
+  git: { bg: "#1e2030", fg: "#c3e88d" },
+  model: { bg: "#191b29", fg: "#fca7ea" },
+  block: { bg: "#2d3748", fg: "#7aa2f7" },
+  weekly: { bg: "#1a202c", fg: "#4fd6be" },
+  warning: { bg: "#e0af68", fg: "#1a1b26" },
+  critical: { bg: "#f7768e", fg: "#1a1b26" }
+};
+var rosePineTheme = {
+  directory: { bg: "#26233a", fg: "#c4a7e7" },
+  git: { bg: "#1f1d2e", fg: "#9ccfd8" },
+  model: { bg: "#191724", fg: "#ebbcba" },
+  block: { bg: "#2a273f", fg: "#eb6f92" },
+  weekly: { bg: "#232136", fg: "#9ccfd8" },
+  warning: { bg: "#f6c177", fg: "#191724" },
+  critical: { bg: "#eb6f92", fg: "#191724" }
+};
+var themes = {
+  dark: darkTheme,
+  light: lightTheme,
+  nord: nordTheme,
+  gruvbox: gruvboxTheme,
+  "tokyo-night": tokyoNightTheme,
+  "rose-pine": rosePineTheme
 };
 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;
   theme;
   symbols;
+  usePowerline;
   constructor(config) {
     this.config = config;
     this.theme = getTheme(config.theme || "dark");
     const useNerd = config.display?.useNerdFonts ?? true;
     const symbolSet = useNerd ? SYMBOLS : TEXT_SYMBOLS;
+    this.usePowerline = useNerd;
     this.symbols = {
       block: symbolSet.block_cost,
       weekly: symbolSet.weekly_cost,
+      rightArrow: symbolSet.right,
       separator: symbolSet.separator,
+      branch: symbolSet.branch,
+      model: symbolSet.model,
       progressFull: symbolSet.progress_full,
-      progressEmpty: symbolSet.progress_empty
+      progressEmpty: symbolSet.progress_empty,
+      trendUp: "\u2191",
+      trendDown: "\u2193"
     };
   }
-  formatProgressBar(percent, width, colors) {
+  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;
-    const filledBar = colors.progressFull + this.symbols.progressFull.repeat(filled);
-    const emptyBar = colors.progressEmpty + this.symbols.progressEmpty.repeat(empty);
-    return filledBar + emptyBar + RESET_CODE;
+    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;
-      return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+      if (compact) {
+        return mins > 0 ? `${hours}h${mins}m` : `${hours}h`;
+      }
+      return mins > 0 ? `${hours}h${mins}m` : `${hours}h`;
     }
     return `${minutes}m`;
   }
-  getColorForPercent(percent, colors) {
+  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) {
-      return { bg: colors.criticalBg, fg: colors.criticalFg };
+      return this.theme.critical;
     } else if (percent >= threshold) {
-      return { bg: colors.warningBg, fg: colors.warningFg };
+      return this.theme.warning;
     }
-    return { bg: colors.blockBg, fg: colors.blockFg };
+    return baseColors;
   }
-  renderBlock(blockInfo) {
-    if (!blockInfo || !this.config.block?.enabled) {
-      return "";
+  renderPowerline(segments) {
+    if (segments.length === 0) return "";
+    let output = "";
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const nextColors = i < segments.length - 1 ? segments[i + 1].colors : null;
+      output += ansi.bg(seg.colors.bg) + ansi.fg(seg.colors.fg) + seg.text;
+      output += RESET_CODE;
+      if (nextColors) {
+        output += ansi.fg(seg.colors.bg) + ansi.bg(nextColors.bg) + this.symbols.rightArrow;
+      } else {
+        output += ansi.fg(seg.colors.bg) + this.symbols.rightArrow;
+      }
+    }
+    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} `);
+  }
+  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: ` ${name} `,
+      colors: this.theme.directory
+    };
+  }
+  renderGit(ctx) {
+    if (!this.config.git?.enabled || !ctx.envInfo.gitBranch) {
+      return null;
+    }
+    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}${branch}${dirtyIndicator} `,
+      colors: this.theme.git
+    };
+  }
+  renderModel(ctx) {
+    if (!this.config.model?.enabled || !ctx.envInfo.model) {
+      return null;
     }
-    if (blockInfo.percentUsed === null) {
-      return `${this.symbols.block} --`;
+    const icon = this.usePowerline ? this.symbols.model : "";
+    const prefix = icon ? `${icon} ` : "";
+    return {
+      text: ` ${prefix}${ctx.envInfo.model} `,
+      colors: this.theme.model
+    };
+  }
+  renderBlock(ctx) {
+    if (!ctx.blockInfo || !this.config.block?.enabled) {
+      return null;
+    }
+    const icon = this.usePowerline ? this.symbols.block : "BLK";
+    if (ctx.blockInfo.percentUsed === null) {
+      return {
+        text: ` ${icon} -- `,
+        colors: this.theme.block
+      };
     }
-    const percent = blockInfo.percentUsed;
-    const displayStyle = this.config.block.displayStyle || "bar";
+    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;
-    let display;
-    if (displayStyle === "bar") {
-      const bar = this.formatProgressBar(percent, barWidth, this.theme);
-      display = `${bar} ${Math.round(percent)}%`;
+    const trend = this.getTrendSymbol(ctx.trendInfo?.fiveHourTrend ?? null);
+    let text;
+    if (displayStyle === "bar" && !ctx.compact) {
+      const bar = this.formatProgressBar(percent, barWidth);
+      text = `${bar} ${Math.round(percent)}%${trend}`;
     } else {
-      display = `${Math.round(percent)}%`;
+      text = `${Math.round(percent)}%${trend}`;
     }
-    if (showTime && blockInfo.timeRemaining !== null) {
-      const timeStr = this.formatTimeRemaining(blockInfo.timeRemaining);
-      display += ` (${timeStr} left)`;
+    if (showTime && ctx.blockInfo.timeRemaining !== null && !ctx.compact) {
+      const timeStr = this.formatTimeRemaining(ctx.blockInfo.timeRemaining, ctx.compact);
+      text += ` (${timeStr})`;
     }
-    return `${this.symbols.block} ${display}`;
+    return {
+      text: ` ${icon} ${text} `,
+      colors
+    };
   }
-  renderWeekly(weeklyInfo) {
-    if (!weeklyInfo || !this.config.weekly?.enabled) {
-      return "";
+  renderWeekly(ctx) {
+    if (!ctx.weeklyInfo || !this.config.weekly?.enabled) {
+      return null;
     }
-    if (weeklyInfo.percentUsed === null) {
-      return `${this.symbols.weekly} --`;
+    const icon = this.usePowerline ? this.symbols.weekly : "WK";
+    if (ctx.weeklyInfo.percentUsed === null) {
+      return {
+        text: ` ${icon} -- `,
+        colors: this.theme.weekly
+      };
     }
-    const percent = weeklyInfo.percentUsed;
-    const displayStyle = this.config.weekly.displayStyle || "bar";
+    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;
-    let display;
-    if (displayStyle === "bar") {
-      const bar = this.formatProgressBar(percent, barWidth, this.theme);
-      display = `${bar} ${Math.round(percent)}%`;
+    const trend = this.getTrendSymbol(ctx.trendInfo?.sevenDayTrend ?? null);
+    let text;
+    if (displayStyle === "bar" && !ctx.compact) {
+      const bar = this.formatProgressBar(percent, barWidth);
+      text = `${bar} ${Math.round(percent)}%${trend}`;
     } else {
-      display = `${Math.round(percent)}%`;
+      text = `${Math.round(percent)}%${trend}`;
     }
-    if (showWeekProgress) {
-      display += ` (wk ${weeklyInfo.weekProgressPercent}%)`;
+    if (showWeekProgress && !ctx.compact) {
+      text += ` (wk ${ctx.weeklyInfo.weekProgressPercent}%)`;
     }
-    return `${this.symbols.weekly} ${display}`;
+    return {
+      text: ` ${icon} ${text} `,
+      colors: this.theme.weekly
+    };
   }
-  render(blockInfo, weeklyInfo) {
-    const parts = [];
-    const blockSegment = this.renderBlock(blockInfo);
-    if (blockSegment) {
-      parts.push(blockSegment);
+  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;
     }
-    const weeklySegment = this.renderWeekly(weeklyInfo);
-    if (weeklySegment) {
-      parts.push(weeklySegment);
+  }
+  render(blockInfo, weeklyInfo, envInfo, trendInfo = null) {
+    const compact = this.isCompactMode();
+    const ctx = {
+      blockInfo,
+      weeklyInfo,
+      envInfo,
+      trendInfo,
+      compact
+    };
+    const segments = [];
+    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 (parts.length === 0) {
+    if (segments.length === 0) {
       return "";
     }
-    const separator = ` ${this.theme.separatorFg}${this.symbols.separator}${RESET_CODE} `;
-    return parts.join(separator);
+    if (this.usePowerline) {
+      return this.renderPowerline(segments);
+    } else {
+      return this.renderFallback(segments);
+    }
   }
 };
 
+// src/utils/environment.ts
+import { execSync } from "child_process";
+import { basename } from "path";
+
+// src/utils/claude-hook.ts
+async function readHookData() {
+  if (process.stdin.isTTY) {
+    debug("stdin is TTY, no hook data");
+    return null;
+  }
+  try {
+    const chunks = [];
+    const result = await Promise.race([
+      new Promise((resolve, reject) => {
+        process.stdin.on("data", (chunk) => chunks.push(chunk));
+        process.stdin.on("end", () => resolve(Buffer.concat(chunks).toString("utf-8")));
+        process.stdin.on("error", reject);
+      }),
+      new Promise((resolve) => setTimeout(() => resolve(null), 100))
+    ]);
+    if (!result || result.trim() === "") {
+      debug("No stdin data received");
+      return null;
+    }
+    const hookData = JSON.parse(result);
+    debug("Hook data received:", JSON.stringify(hookData));
+    return hookData;
+  } catch (error) {
+    debug("Error reading hook data:", error);
+    return null;
+  }
+}
+function formatModelName(modelId, displayName) {
+  if (displayName && displayName.length <= 20) {
+    const clean = displayName.replace(/^Claude\s*/i, "").trim();
+    if (clean) return clean;
+  }
+  const mappings = {
+    "claude-opus-4-5-20251101": "Opus 4.5",
+    "claude-opus-4-20250514": "Opus 4",
+    "claude-sonnet-4-20250514": "Sonnet 4",
+    "claude-3-5-sonnet-20241022": "Sonnet 3.5",
+    "claude-3-5-sonnet-latest": "Sonnet 3.5",
+    "claude-3-5-sonnet": "Sonnet 3.5",
+    "claude-3-opus-20240229": "Opus 3",
+    "claude-3-opus": "Opus 3",
+    "claude-3-sonnet-20240229": "Sonnet 3",
+    "claude-3-haiku-20240307": "Haiku 3",
+    "claude-3-haiku": "Haiku 3"
+  };
+  if (mappings[modelId]) {
+    return mappings[modelId];
+  }
+  const lower = modelId.toLowerCase();
+  if (lower.includes("opus")) {
+    if (lower.includes("4-5") || lower.includes("4.5")) return "Opus 4.5";
+    if (lower.includes("4")) return "Opus 4";
+    if (lower.includes("3")) return "Opus 3";
+    return "Opus";
+  }
+  if (lower.includes("sonnet")) {
+    if (lower.includes("4")) return "Sonnet 4";
+    if (lower.includes("3-5") || lower.includes("3.5")) return "Sonnet 3.5";
+    if (lower.includes("3")) return "Sonnet 3";
+    return "Sonnet";
+  }
+  if (lower.includes("haiku")) {
+    if (lower.includes("3")) return "Haiku 3";
+    return "Haiku";
+  }
+  return modelId.length > 15 ? modelId.slice(0, 15) : modelId;
+}
+
+// src/utils/environment.ts
+function getDirectoryName(hookData) {
+  try {
+    if (hookData?.workspace?.project_dir) {
+      return basename(hookData.workspace.project_dir);
+    }
+    if (hookData?.cwd) {
+      return basename(hookData.cwd);
+    }
+    return basename(process.cwd());
+  } catch (error) {
+    debug("Error getting directory name:", error);
+    return null;
+  }
+}
+function getGitBranch() {
+  try {
+    const branch = execSync("git rev-parse --abbrev-ref HEAD", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    return branch || null;
+  } catch (error) {
+    debug("Error getting git branch:", error);
+    return null;
+  }
+}
+function hasGitChanges() {
+  try {
+    const status = execSync("git status --porcelain", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    return status.length > 0;
+  } catch (error) {
+    debug("Error checking git status:", error);
+    return false;
+  }
+}
+function getClaudeModel(hookData) {
+  if (hookData?.model?.id) {
+    return formatModelName(hookData.model.id, hookData.model.display_name);
+  }
+  const model = process.env.CLAUDE_MODEL || process.env.CLAUDE_CODE_MODEL || process.env.ANTHROPIC_MODEL;
+  if (model) {
+    return formatModelName(model);
+  }
+  return null;
+}
+function getEnvironmentInfo(hookData) {
+  return {
+    directory: getDirectoryName(hookData),
+    gitBranch: getGitBranch(),
+    gitDirty: hasGitChanges(),
+    model: getClaudeModel(hookData)
+  };
+}
+
 // src/index.ts
 async function main() {
   try {
     const config = loadConfig();
     debug("Config loaded:", JSON.stringify(config));
+    const hookData = await readHookData();
+    debug("Hook data:", JSON.stringify(hookData));
+    const envInfo = getEnvironmentInfo(hookData);
+    debug("Environment info:", JSON.stringify(envInfo));
     const blockProvider = new BlockProvider();
     const weeklyProvider = new WeeklyProvider();
     const pollInterval = config.budget?.pollInterval ?? 15;
@@ -622,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);
+    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.0.1",
+  "version": "1.2.0",
   "description": "A statusline for Claude Code showing real-time usage limits and weekly tracking",
   "main": "dist/index.js",
   "bin": {