claude-usage-dashboard 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-usage-dashboard",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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,