claude-usage-dashboard 1.2.0 → 1.2.2

package/README.md

@@ -10,11 +10,13 @@ A self-hosted dashboard that visualizes your [Claude Code](https://claude.ai/cod
 
 - **Token tracking** — Total tokens with breakdown by input, output, cache read, and cache write
 - **Cost estimation** — API cost equivalent at standard pricing, compared against your subscription plan (Pro / Max 5x / Max 20x)
+- **Subscription quota** — Real-time utilization gauges (5-hour, 7-day, per-model) pulled from the Anthropic API with auto-detection of your plan tier
 - **Token consumption trend** — Stacked bar chart with hourly, daily, weekly, or monthly granularity
 - **Model distribution** — Donut chart showing usage across Claude models
 - **Cache efficiency** — Visual breakdown of cache read, cache creation, and uncached requests
 - **Project distribution** — Horizontal bar chart comparing token usage across projects
 - **Session details** — Sortable, paginated table of every session with cost and duration
+- **Auto-refresh** — Dashboard polls every 30s for new usage data; quota refreshes every 2 minutes
 
 ## Quick Start
 
@@ -43,7 +45,9 @@ PORT=8080 npx claude-usage-dashboard
 
 ## How It Works
 
-The dashboard reads Claude Code session logs from `~/.claude/projects/` — if you use Claude Code, these already exist on your machine. Logs are parsed once at startup; restart the server to pick up new session data.
+The dashboard reads Claude Code session logs from `~/.claude/projects/` — if you use Claude Code, these already exist on your machine. Logs are automatically re-read every 5 seconds, and new usage appears without restarting the server.
+
+Subscription quota data is fetched from the Anthropic API using your local OAuth credentials (`~/.claude/.credentials.json`). Your plan tier (Pro / Max 5x / Max 20x) is auto-detected from the same file.
 
 ## Tech Stack
 

package/package.json

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

package/public/js/api.js

@@ -13,3 +13,4 @@ export async function fetchCost(params = {}) { return (await fetch(`${BASE}/cost
 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, fetchQuota } 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';
@@ -190,6 +190,20 @@ 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/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

@@ -14,6 +14,21 @@ export function readCredentials(credentialsPath = CREDENTIALS_PATH) {
   }
 }
 
+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;

package/server/routes/api.js

@@ -3,6 +3,7 @@ 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();
@@ -109,6 +110,11 @@ export function createApiRouter(logBaseDir, options = {}) {
     }
   });
 
+  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,