claude-usage-dashboard 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-usage-dashboard",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Dashboard that visualizes Claude Code usage from local session logs",
   "main": "server/index.js",
   "bin": {

package/public/css/style.css

@@ -245,6 +245,14 @@ body {
   z-index: 100;
 }
 
+.quota-unavailable {
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 20px;
+  text-align: center;
+}
+#quota-section .chart-container { min-height: auto; }
+
 @media (max-width: 768px) {
   .summary-cards { grid-template-columns: repeat(2, 1fr); }
   .chart-row-3 { grid-template-columns: 1fr; }

package/public/index.html

@@ -46,6 +46,14 @@
     </div>
   </section>
 
+  <section class="chart-section" id="quota-section">
+    <div class="chart-header">
+      <h2>Subscription Quota</h2>
+      <span id="quota-last-updated" class="last-updated"></span>
+    </div>
+    <div id="chart-quota" class="chart-container"></div>
+  </section>
+
   <section class="chart-section">
     <div class="chart-header">
       <h2>Token Consumption Trend</h2>

package/public/js/api.js

@@ -12,3 +12,5 @@ export async function fetchSessions(params = {}) { return (await fetch(`${BASE}/
 export async function fetchCost(params = {}) { return (await fetch(`${BASE}/cost${qs(params)}`)).json(); }
 export async function fetchCache(params = {}) { return (await fetch(`${BASE}/cache${qs(params)}`)).json(); }
 export async function fetchStatus() { return (await fetch(`${BASE}/status`)).json(); }
+export async function fetchQuota() { return (await fetch(`${BASE}/quota`)).json(); }
+export async function fetchSubscription() { return (await fetch(`${BASE}/subscription`)).json(); }

package/public/js/app.js

@@ -1,4 +1,4 @@
-import { fetchUsage, fetchModels, fetchProjects, fetchSessions, fetchCost, fetchCache, fetchStatus } from './api.js';
+import { fetchUsage, fetchModels, fetchProjects, fetchSessions, fetchCost, fetchCache, fetchStatus, fetchQuota, fetchSubscription } from './api.js';
 import { initDatePicker } from './components/date-picker.js';
 import { initPlanSelector } from './components/plan-selector.js';
 import { renderTokenTrend } from './charts/token-trend.js';
@@ -7,6 +7,7 @@ import { renderModelDistribution } from './charts/model-distribution.js';
 import { renderCacheEfficiency } from './charts/cache-efficiency.js';
 import { renderProjectDistribution } from './charts/project-distribution.js';
 import { renderSessionTable } from './charts/session-stats.js';
+import { renderQuotaGauges } from './charts/quota-gauge.js';
 
 const state = {
   dateRange: { from: null, to: null },
@@ -19,6 +20,8 @@ const state = {
   autoRefresh: true,
   autoRefreshInterval: 30,
   _refreshTimer: null,
+  quotaRefreshInterval: 120,
+  _quotaTimer: null,
 };
 
 let datePicker, planSelector;
@@ -37,10 +40,20 @@ function updateLastUpdated() {
   }
 }
 
+async function loadQuota() {
+  try {
+    const data = await fetchQuota();
+    renderQuotaGauges(document.getElementById('chart-quota'), data);
+    const el = document.getElementById('quota-last-updated');
+    if (el && data.lastFetched) el.textContent = `Updated ${new Date(data.lastFetched).toLocaleTimeString()}`;
+  } catch { /* silently degrade */ }
+}
+
 function startAutoRefresh() {
   stopAutoRefresh();
   if (state.autoRefresh) {
     state._refreshTimer = setInterval(() => loadAll(), state.autoRefreshInterval * 1000);
+    state._quotaTimer = setInterval(() => loadQuota(), state.quotaRefreshInterval * 1000);
   }
 }
 
@@ -49,6 +62,10 @@ function stopAutoRefresh() {
     clearInterval(state._refreshTimer);
     state._refreshTimer = null;
   }
+  if (state._quotaTimer) {
+    clearInterval(state._quotaTimer);
+    state._quotaTimer = null;
+  }
 }
 
 async function loadAll() {
@@ -161,7 +178,7 @@ function init() {
     loadAll();
   });
 
-  document.getElementById('btn-refresh').addEventListener('click', () => loadAll());
+  document.getElementById('btn-refresh').addEventListener('click', () => { loadAll(); loadQuota(); });
 
   const autoToggle = document.getElementById('auto-refresh-toggle');
   autoToggle.addEventListener('change', () => {
@@ -173,7 +190,22 @@ function init() {
     }
   });
 
+  // Auto-detect subscription tier
+  fetchSubscription().then(info => {
+    if (info.plan) {
+      planSelector.setDetectedPlan(info.plan);
+      state.plan = planSelector.getPlan();
+    }
+    const tierLabels = { pro: 'Pro', max5x: 'Max 5x', max20x: 'Max 20x' };
+    const label = tierLabels[info.plan];
+    if (label) {
+      const h2 = document.querySelector('#quota-section h2');
+      if (h2) h2.textContent = `Subscription Quota (${label})`;
+    }
+  }).catch(() => {});
+
   loadAll();
+  loadQuota();
   startAutoRefresh();
 }
 

package/public/js/charts/quota-gauge.js

@@ -0,0 +1,78 @@
+export function renderQuotaGauges(container, data) {
+  container.innerHTML = '';
+
+  if (!data || data.available === false) {
+    const msg = document.createElement('div');
+    msg.className = 'quota-unavailable';
+    const reason = data?.error === 'no_credentials'
+      ? 'No Claude credentials found. Run "claude" CLI to authenticate.'
+      : data?.error === 'rate_limited'
+        ? 'Quota API rate limited. Will retry on next refresh.'
+        : 'Quota data unavailable';
+    msg.textContent = reason;
+    container.appendChild(msg);
+    return;
+  }
+
+  const items = [];
+  if (data.five_hour) items.push({ label: '5-Hour Window', ...data.five_hour });
+  if (data.seven_day) items.push({ label: '7-Day Total', ...data.seven_day });
+  if (data.seven_day_opus) items.push({ label: '7-Day Opus', ...data.seven_day_opus });
+  if (data.seven_day_sonnet) items.push({ label: '7-Day Sonnet', ...data.seven_day_sonnet });
+  if (data.extra_usage?.is_enabled) {
+    items.push({
+      label: 'Extra Usage',
+      utilization: data.extra_usage.utilization || 0,
+      resets_at: null,
+      extraDetail: data.extra_usage.monthly_limit != null
+        ? `$${(data.extra_usage.used_credits || 0).toFixed(2)} / $${data.extra_usage.monthly_limit.toFixed(2)}`
+        : null,
+    });
+  }
+
+  if (items.length === 0) {
+    const msg = document.createElement('div');
+    msg.className = 'quota-unavailable';
+    msg.textContent = 'No quota data available';
+    container.appendChild(msg);
+    return;
+  }
+
+  const wrapper = document.createElement('div');
+  wrapper.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px';
+
+  for (const item of items) {
+    const pct = Math.min(100, Math.max(0, item.utilization || 0));
+    const color = pct < 50 ? '#4ade80' : pct < 80 ? '#f59e0b' : '#ef4444';
+
+    const cell = document.createElement('div');
+
+    const header = document.createElement('div');
+    header.style.cssText = 'display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:4px';
+    header.innerHTML = `<span>${item.label}</span><span style="color:${color};font-weight:600">${pct.toFixed(1)}%</span>`;
+
+    const barBg = document.createElement('div');
+    barBg.style.cssText = 'height:8px;background:#334155;border-radius:4px;overflow:hidden';
+
+    const barFill = document.createElement('div');
+    barFill.style.cssText = `width:${pct}%;height:100%;background:${color};border-radius:4px;transition:width 0.5s`;
+
+    barBg.appendChild(barFill);
+    cell.appendChild(header);
+    cell.appendChild(barBg);
+
+    // Reset time or extra detail
+    const sub = document.createElement('div');
+    sub.style.cssText = 'font-size:10px;color:#64748b;margin-top:2px';
+    if (item.extraDetail) {
+      sub.textContent = item.extraDetail;
+    } else if (item.resets_at) {
+      sub.textContent = `Resets ${new Date(item.resets_at).toLocaleTimeString()}`;
+    }
+    cell.appendChild(sub);
+
+    wrapper.appendChild(cell);
+  }
+
+  container.appendChild(wrapper);
+}

package/public/js/components/plan-selector.js

@@ -7,6 +7,7 @@ const PLANS = {
 export function initPlanSelector(container, onChange) {
   const saved = localStorage.getItem('selectedPlan') || 'max20x';
   const savedPrice = localStorage.getItem('customPrice') || '';
+  let detectedPlan = null;
 
   container.innerHTML = `
     <select id="plan-select">
@@ -33,5 +34,24 @@ export function initPlanSelector(container, onChange) {
     customInput.style.display = customInput.style.display === 'none' ? 'inline-block' : 'none';
   });
 
-  return { getPlan: () => ({ plan: select.value, customPrice: customInput.value ? parseFloat(customInput.value) : null }) };
+  function setDetectedPlan(planKey) {
+    if (!planKey || !PLANS[planKey]) return;
+    detectedPlan = planKey;
+    // Only auto-select if user hasn't manually chosen a plan
+    if (!localStorage.getItem('selectedPlan')) {
+      select.value = planKey;
+      emitChange();
+    }
+    // Update option labels to show which is detected
+    for (const opt of select.options) {
+      const p = PLANS[opt.value];
+      const suffix = opt.value === planKey ? ' ✓' : '';
+      opt.textContent = `${p.label} ($${p.price}/mo)${suffix}`;
+    }
+  }
+
+  return {
+    getPlan: () => ({ plan: select.value, customPrice: customInput.value ? parseFloat(customInput.value) : null }),
+    setDetectedPlan,
+  };
 }

package/server/credentials.js

@@ -0,0 +1,37 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+const CREDENTIALS_PATH = path.join(os.homedir(), '.claude', '.credentials.json');
+
+export function readCredentials(credentialsPath = CREDENTIALS_PATH) {
+  try {
+    const raw = fs.readFileSync(credentialsPath, 'utf-8');
+    const data = JSON.parse(raw);
+    return data.claudeAiOauth || null;
+  } catch {
+    return null;
+  }
+}
+
+export function getSubscriptionInfo(credentialsPath = CREDENTIALS_PATH) {
+  const creds = readCredentials(credentialsPath);
+  if (!creds) return null;
+
+  const { subscriptionType, rateLimitTier } = creds;
+  const combined = `${subscriptionType || ''} ${rateLimitTier || ''}`.toLowerCase();
+
+  let plan = null;
+  if (combined.includes('20x')) plan = 'max20x';
+  else if (combined.includes('5x')) plan = 'max5x';
+  else if (combined.includes('pro')) plan = 'pro';
+
+  return { subscriptionType: subscriptionType || null, rateLimitTier: rateLimitTier || null, plan };
+}
+
+export function getAccessToken(credentialsPath = CREDENTIALS_PATH) {
+  const creds = readCredentials(credentialsPath);
+  if (!creds || !creds.accessToken) return null;
+  if (creds.expiresAt && creds.expiresAt < Date.now()) return null;
+  return creds.accessToken;
+}

package/server/quota.js

@@ -0,0 +1,49 @@
+import { getAccessToken } from './credentials.js';
+
+const USAGE_URL = 'https://api.anthropic.com/api/oauth/usage';
+
+export function createQuotaFetcher(options = {}) {
+  const CACHE_TTL = options.cacheTtlMs || 120_000;
+  const getToken = options.getAccessToken || getAccessToken;
+  let cached = null;
+  let lastFetched = 0;
+  let fetchInProgress = null;
+
+  async function fetchQuota() {
+    const now = Date.now();
+    if (cached && (now - lastFetched) < CACHE_TTL) return cached;
+    if (fetchInProgress) return fetchInProgress;
+
+    fetchInProgress = (async () => {
+      try {
+        const token = getToken();
+        if (!token) return cached || { available: false, error: 'no_credentials' };
+
+        const res = await fetch(USAGE_URL, {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'anthropic-beta': 'oauth-2025-04-20',
+          },
+        });
+
+        if (!res.ok) {
+          if (res.status === 429) return cached || { available: false, error: 'rate_limited' };
+          return cached || { available: false, error: `http_${res.status}` };
+        }
+
+        const data = await res.json();
+        cached = { available: true, ...data, lastFetched: new Date().toISOString() };
+        lastFetched = Date.now();
+        return cached;
+      } catch (err) {
+        return cached || { available: false, error: err.message };
+      } finally {
+        fetchInProgress = null;
+      }
+    })();
+
+    return fetchInProgress;
+  }
+
+  return { fetchQuota };
+}

package/server/routes/api.js

@@ -2,6 +2,8 @@ import { Router } from 'express';
 import { parseLogDirectory } from '../parser.js';
 import { filterByDateRange, autoGranularity, aggregateByTime, aggregateBySession, aggregateByProject, aggregateByModel, aggregateCache } from '../aggregator.js';
 import { calculateRecordCost, PLAN_DEFAULTS } from '../pricing.js';
+import { createQuotaFetcher } from '../quota.js';
+import { getSubscriptionInfo } from '../credentials.js';
 
 export function createApiRouter(logBaseDir, options = {}) {
   const router = Router();
@@ -98,6 +100,21 @@ export function createApiRouter(logBaseDir, options = {}) {
 
   router.get('/cache', (req, res) => { res.json(aggregateCache(applyFilters(req.query))); });
 
+  const quotaFetcher = options.quotaFetcher || createQuotaFetcher();
+  router.get('/quota', async (req, res) => {
+    try {
+      const data = await quotaFetcher.fetchQuota();
+      res.json(data);
+    } catch (err) {
+      res.json({ available: false, error: err.message });
+    }
+  });
+
+  router.get('/subscription', (req, res) => {
+    const info = options.getSubscriptionInfo ? options.getSubscriptionInfo() : getSubscriptionInfo();
+    res.json(info || { plan: null, subscriptionType: null, rateLimitTier: null });
+  });
+
   router.get('/status', (req, res) => {
     res.json({
       record_count: cachedRecords.length,