cc-dev-template 0.1.72 → 0.1.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-dev-template",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "description": "Structured AI-assisted development framework for Claude Code",
   "bin": {
     "cc-dev-template": "./bin/install.js"

package/src/scripts/statusline.js

@@ -21,6 +21,7 @@ const { homedir } = require('os');
 // Usage API cache
 const USAGE_CACHE_PATH = join(homedir(), '.claude', '.usage-cache.json');
 const USAGE_CACHE_TTL = 45000; // 45 seconds
+const USAGE_HISTORY_MAX = 20; // ~15 min of readings at 45s intervals
 
 // Background refresh mode: fetch usage data and write cache, then exit
 if (process.argv.includes('--refresh')) {
@@ -72,6 +73,50 @@ function getContextGreyscale(percentage) {
   return '\x1b[38;5;240m'; // Dark grey - safe
 }
 
+/**
+ * Compute burn rate (percent per minute) from usage history
+ * Returns null if insufficient data
+ */
+function getUsageBurnRate(history, key) {
+  if (!history || history.length < 2) return null;
+
+  const oldest = history[0];
+  const newest = history[history.length - 1];
+  const minutesElapsed = (newest.t - oldest.t) / 60000;
+
+  // Need at least 2 minutes of data for a stable reading
+  if (minutesElapsed < 2) return null;
+
+  const deltaUtilization = newest[key] - oldest[key];
+  return deltaUtilization / minutesElapsed;
+}
+
+/**
+ * Get color for usage bar based on current level and burn rate trend
+ * Returns red/yellow for danger, or greyscale for safe
+ */
+function getUsageColor(utilization, burnRate, windowType) {
+  const RED = '\x1b[38;5;196m';
+  const YELLOW = '\x1b[38;5;220m';
+
+  // Thresholds differ by window type
+  const redMinutes = windowType === '5h' ? 30 : 240;      // 30min / 4hr
+  const yellowMinutes = windowType === '5h' ? 90 : 720;    // 90min / 12hr
+
+  // Hard thresholds on current utilization
+  if (utilization >= 90) return RED;
+  if (utilization >= 75) return YELLOW;
+
+  // Trend-based: project time to hit 100%
+  if (burnRate && burnRate > 0) {
+    const minutesToLimit = (100 - utilization) / burnRate;
+    if (minutesToLimit <= redMinutes) return RED;
+    if (minutesToLimit <= yellowMinutes) return YELLOW;
+  }
+
+  return getContextGreyscale(utilization);
+}
+
 /**
  * Count files in a directory recursively
  */
@@ -279,9 +324,29 @@ function refreshUsageCache() {
     if (result.status === 0 && result.stdout) {
       const data = JSON.parse(result.stdout.trim());
       if (data.five_hour && data.seven_day) {
+        // Load existing history and append new reading
+        let history = [];
+        try {
+          const existing = JSON.parse(readFileSync(USAGE_CACHE_PATH, 'utf-8'));
+          if (Array.isArray(existing.history)) history = existing.history;
+        } catch {}
+
+        const now = Date.now();
+        history.push({
+          t: now,
+          five_hour: data.five_hour.utilization,
+          seven_day: data.seven_day.utilization,
+        });
+
+        // Keep only the last N readings
+        if (history.length > USAGE_HISTORY_MAX) {
+          history = history.slice(-USAGE_HISTORY_MAX);
+        }
+
         writeFileSync(USAGE_CACHE_PATH, JSON.stringify({
-          timestamp: Date.now(),
+          timestamp: now,
           data,
+          history,
         }));
       }
     }
@@ -295,12 +360,14 @@ function refreshUsageCache() {
  */
 function getUsageData() {
   let cacheData = null;
+  let cacheHistory = null;
   let cacheAge = Infinity;
 
   try {
     const raw = readFileSync(USAGE_CACHE_PATH, 'utf-8');
     const cache = JSON.parse(raw);
     cacheData = cache.data;
+    cacheHistory = cache.history || null;
     cacheAge = Date.now() - cache.timestamp;
   } catch {}
 
@@ -315,7 +382,7 @@ function getUsageData() {
     } catch {}
   }
 
-  return cacheData;
+  return { data: cacheData, history: cacheHistory };
 }
 
 /**
@@ -474,14 +541,19 @@ function main() {
 
     // Usage limits line (5-hour session + 7-day weekly)
     const usageLines = [];
-    const usageData = getUsageData();
-    if (usageData && usageData.five_hour && usageData.seven_day) {
-      const pct5h = Math.round(usageData.five_hour.utilization);
-      const pct7d = Math.round(usageData.seven_day.utilization);
+    const { data: usageApiData, history: usageHistory } = getUsageData();
+    if (usageApiData && usageApiData.five_hour && usageApiData.seven_day) {
+      const pct5h = Math.round(usageApiData.five_hour.utilization);
+      const pct7d = Math.round(usageApiData.seven_day.utilization);
       const bar5h = generateBar(pct5h, 12);
       const bar7d = generateBar(pct7d, 12);
-      const color5h = getContextGreyscale(pct5h);
-      const color7d = getContextGreyscale(pct7d);
+
+      // Compute burn rates from history for trend-based coloring
+      const rate5h = getUsageBurnRate(usageHistory, 'five_hour');
+      const rate7d = getUsageBurnRate(usageHistory, 'seven_day');
+      const color5h = getUsageColor(pct5h, rate5h, '5h');
+      const color7d = getUsageColor(pct7d, rate7d, '7d');
+
       const str5h = pct5h.toString().padStart(3, ' ');
       const str7d = pct7d.toString().padStart(3, ' ');
       const usageDisplay = `5HR: ${color5h}[${bar5h}]${str5h}%${DIM_GREY}  7D: ${color7d}[${bar7d}]${str7d}%${DIM_GREY}`;