claude-usage-dashboard 1.2.2 → 1.3.0

package/README.md

@@ -1,66 +1,67 @@
-# Claude Usage Dashboard
-
-[![npm version](https://img.shields.io/npm/v/claude-usage-dashboard)](https://www.npmjs.com/package/claude-usage-dashboard)
-
-A self-hosted dashboard that visualizes your [Claude Code](https://claude.ai/code) usage by parsing local JSONL session logs from `~/.claude/projects/`.
-
-![Dashboard Screenshot](docs/screenshots/dashboard.png)
-
-## Features
-
-- **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
-
-Run directly without installing:
-
-```bash
-npx claude-usage-dashboard
-```
-
-Open http://localhost:3000 in your browser.
-
-### From Source
-
-```bash
-git clone https://github.com/ludengz/claudeUsageDashboard.git
-cd claudeUsageDashboard
-npm install
-npm start
-```
-
-### Custom Port
-
-```bash
-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 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
-
-- **Backend:** Node.js, Express 5
-- **Frontend:** Vanilla JS (ES modules), D3.js v7
-- **Tests:** Mocha + Chai
-
-## Running Tests
-
-```bash
-npm test
-```
-
-## License
-
-ISC
+# Claude Usage Dashboard
+
+[![npm version](https://img.shields.io/npm/v/claude-usage-dashboard)](https://www.npmjs.com/package/claude-usage-dashboard)
+
+A self-hosted dashboard that visualizes your [Claude Code](https://claude.ai/code) usage by parsing local JSONL session logs from `~/.claude/projects/`.
+
+![Dashboard Screenshot](docs/screenshots/dashboard.png)
+
+## Features
+
+- **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. 7-day reset shows full date+time; all timestamps include timezone
+- **Token consumption trend** — Stacked bar chart with hourly, daily, weekly, or monthly granularity. Toggle between tokens and dollar view. Includes period summary with avg/min/max stats, active hours heatmap, and smart date range limits per 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
+- **Persistent settings** — Date range, granularity, auto-refresh, and y-axis mode are remembered across sessions via localStorage
+
+## Quick Start
+
+Run directly without installing:
+
+```bash
+npx claude-usage-dashboard
+```
+
+Open http://localhost:3000 in your browser.
+
+### From Source
+
+```bash
+git clone https://github.com/ludengz/claudeUsageDashboard.git
+cd claudeUsageDashboard
+npm install
+npm start
+```
+
+### Custom Port
+
+```bash
+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 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
+
+- **Backend:** Node.js, Express 5
+- **Frontend:** Vanilla JS (ES modules), D3.js v7
+- **Tests:** Mocha + Chai
+
+## Running Tests
+
+```bash
+npm test
+```
+
+## License
+
+ISC

package/package.json

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

package/public/css/style.css

@@ -106,6 +106,11 @@ body {
 .granularity-toggle button.active {
   background: var(--blue);
   color: white;
+  box-shadow: 0 0 0 1px rgba(59,130,246,0.5);
+}
+.granularity-toggle button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
 }
 
 .table-controls { display: flex; gap: 8px; }

package/public/index.html

@@ -57,9 +57,13 @@
   <section class="chart-section">
     <div class="chart-header">
       <h2>Token Consumption Trend</h2>
+      <div class="granularity-toggle" id="yaxis-toggle">
+        <button data-yaxis="tokens">Tokens</button>
+        <button data-yaxis="dollars">$</button>
+      </div>
       <div class="granularity-toggle" id="granularity-toggle">
         <button data-granularity="hourly">Hourly</button>
-        <button data-granularity="daily" class="active">Daily</button>
+        <button data-granularity="daily">Daily</button>
         <button data-granularity="weekly">Weekly</button>
         <button data-granularity="monthly">Monthly</button>
       </div>

package/public/js/app.js

@@ -13,11 +13,12 @@ const state = {
   dateRange: { from: null, to: null },
   plan: { plan: 'max20x', customPrice: null },
   granularity: localStorage.getItem('selectedGranularity') || 'hourly',
+  trendYAxis: localStorage.getItem('trendYAxis') || 'tokens',
   sessionSort: 'date',
   sessionOrder: 'desc',
   sessionPage: 1,
   sessionProject: '',
-  autoRefresh: true,
+  autoRefresh: localStorage.getItem('autoRefresh') !== 'false',
   autoRefreshInterval: 30,
   _refreshTimer: null,
   quotaRefreshInterval: 120,
@@ -36,16 +37,22 @@ function updateLastUpdated() {
   const el = document.getElementById('last-updated');
   if (el) {
     const now = new Date();
-    el.textContent = `Updated ${now.toLocaleTimeString()}`;
+    el.textContent = `Updated ${now.toLocaleTimeString()} ${getTimezoneAbbr()}`;
   }
 }
 
+function getTimezoneAbbr() {
+  const parts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' }).formatToParts(new Date());
+  const tz = parts.find(p => p.type === 'timeZoneName');
+  return tz ? tz.value : '';
+}
+
 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()}`;
+    if (el && data.lastFetched) el.textContent = `Updated ${new Date(data.lastFetched).toLocaleTimeString()} ${getTimezoneAbbr()}`;
   } catch { /* silently degrade */ }
 }
 
@@ -109,12 +116,12 @@ async function loadAll() {
 
   // Set active granularity button
   const activeGran = usage.granularity;
-  document.querySelectorAll('.granularity-toggle button').forEach(btn => {
+  document.querySelectorAll('#granularity-toggle button').forEach(btn => {
     btn.classList.toggle('active', btn.dataset.granularity === activeGran);
   });
 
   // Charts
-  renderTokenTrend(document.getElementById('chart-token-trend'), usage);
+  renderTokenTrend(document.getElementById('chart-token-trend'), usage, { yAxis: state.trendYAxis });
   renderCostComparison(document.getElementById('chart-cost-comparison'), cost);
   renderModelDistribution(document.getElementById('chart-model-distribution'), models);
   renderCacheEfficiency(document.getElementById('chart-cache-efficiency'), cache);
@@ -139,13 +146,47 @@ async function loadAll() {
   updateLastUpdated();
 }
 
+// Max bucket limits per granularity to avoid crashing the browser
+const GRANULARITY_MAX_DAYS = { hourly: 14, daily: 90, weekly: 365, monthly: 1825 };
+
+function updateGranularityButtons() {
+  const { from, to } = state.dateRange;
+  const days = (from && to) ? (new Date(to) - new Date(from)) / (1000 * 60 * 60 * 24) : 30;
+  document.querySelectorAll('#granularity-toggle button').forEach(btn => {
+    const gran = btn.dataset.granularity;
+    const maxDays = GRANULARITY_MAX_DAYS[gran] || 9999;
+    const tooLarge = days > maxDays;
+    btn.disabled = tooLarge;
+    btn.title = tooLarge ? `Range too large for ${gran} view (max ${maxDays} days)` : '';
+  });
+  // If currently selected granularity is now disabled, switch to the finest available
+  const currentBtn = document.querySelector(`#granularity-toggle button[data-granularity="${state.granularity}"]`);
+  if (currentBtn && currentBtn.disabled) {
+    const order = ['hourly', 'daily', 'weekly', 'monthly'];
+    const available = order.find(g => {
+      const b = document.querySelector(`#granularity-toggle button[data-granularity="${g}"]`);
+      return b && !b.disabled;
+    });
+    if (available) {
+      state.granularity = available;
+      localStorage.setItem('selectedGranularity', state.granularity);
+    }
+  }
+  // Update active class
+  document.querySelectorAll('#granularity-toggle button').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.granularity === state.granularity);
+  });
+}
+
 function init() {
   datePicker = initDatePicker(document.getElementById('date-picker'), (range) => {
     state.dateRange = range;
     state.sessionPage = 1;
+    updateGranularityButtons();
     loadAll();
   });
   state.dateRange = datePicker.getRange();
+  updateGranularityButtons();
 
   planSelector = initPlanSelector(document.getElementById('plan-selector'), (plan) => {
     state.plan = plan;
@@ -153,13 +194,29 @@ function init() {
   });
 
   document.getElementById('granularity-toggle').addEventListener('click', (e) => {
-    if (e.target.tagName === 'BUTTON') {
+    if (e.target.tagName === 'BUTTON' && !e.target.disabled) {
       state.granularity = e.target.dataset.granularity;
       localStorage.setItem('selectedGranularity', state.granularity);
       loadAll();
     }
   });
 
+  // Y-axis toggle (tokens / dollars)
+  const yaxisToggle = document.getElementById('yaxis-toggle');
+  yaxisToggle.querySelectorAll('button').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.yaxis === state.trendYAxis);
+  });
+  yaxisToggle.addEventListener('click', (e) => {
+    if (e.target.tagName === 'BUTTON') {
+      state.trendYAxis = e.target.dataset.yaxis;
+      localStorage.setItem('trendYAxis', state.trendYAxis);
+      yaxisToggle.querySelectorAll('button').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.yaxis === state.trendYAxis);
+      });
+      loadAll();
+    }
+  });
+
   const filterInput = document.getElementById('session-filter');
   let filterTimeout;
   filterInput.addEventListener('input', () => {
@@ -181,8 +238,10 @@ function init() {
   document.getElementById('btn-refresh').addEventListener('click', () => { loadAll(); loadQuota(); });
 
   const autoToggle = document.getElementById('auto-refresh-toggle');
+  autoToggle.checked = state.autoRefresh;
   autoToggle.addEventListener('change', () => {
     state.autoRefresh = autoToggle.checked;
+    localStorage.setItem('autoRefresh', state.autoRefresh);
     if (state.autoRefresh) {
       startAutoRefresh();
     } else {

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

@@ -67,7 +67,17 @@ export function renderQuotaGauges(container, data) {
     if (item.extraDetail) {
       sub.textContent = item.extraDetail;
     } else if (item.resets_at) {
-      sub.textContent = `Resets ${new Date(item.resets_at).toLocaleTimeString()}`;
+      const resetDate = new Date(item.resets_at);
+      const now = new Date();
+      const isToday = resetDate.getFullYear() === now.getFullYear()
+        && resetDate.getMonth() === now.getMonth()
+        && resetDate.getDate() === now.getDate();
+      const tzParts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' }).formatToParts(resetDate);
+      const tz = tzParts.find(p => p.type === 'timeZoneName')?.value || '';
+      const resetStr = isToday
+        ? resetDate.toLocaleTimeString()
+        : resetDate.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', second: '2-digit' });
+      sub.textContent = `Resets ${resetStr} ${tz}`;
     }
     cell.appendChild(sub);
 

package/public/js/charts/token-trend.js

@@ -1,6 +1,7 @@
 // d3 is loaded as a global via <script> tag in index.html
 
-export function renderTokenTrend(container, data) {
+export function renderTokenTrend(container, data, opts = {}) {
+  const showDollars = opts.yAxis === 'dollars';
   const el = d3.select(container);
   el.selectAll('*').remove();
 
@@ -9,7 +10,7 @@ export function renderTokenTrend(container, data) {
     return;
   }
 
-  const margin = { top: 20, right: 30, bottom: 40, left: 60 };
+  const margin = { top: 20, right: 30, bottom: 60, left: 60 };
   const width = container.clientWidth - margin.left - margin.right;
   const height = 250 - margin.top - margin.bottom;
 
@@ -19,7 +20,37 @@ export function renderTokenTrend(container, data) {
     .append('g')
     .attr('transform', `translate(${margin.left},${margin.top})`);
 
-  const buckets = data.buckets;
+  const emptyBucket = (time) => ({ time, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0, estimated_cost_usd: 0 });
+
+  // Fill in missing time slots so blank periods are visible
+  const bucketMap = new Map(data.buckets.map(b => [b.time, b]));
+  let allKeys;
+  if (data.granularity === 'hourly') {
+    allKeys = [];
+    const first = data.buckets[0].time; // e.g. "2026-03-15T08:00"
+    const last = data.buckets[data.buckets.length - 1].time;
+    const pad = n => String(n).padStart(2, '0');
+    const cur = new Date(first.replace('T', ' ').replace(/:00$/, ':00:00'));
+    const end = new Date(last.replace('T', ' ').replace(/:00$/, ':00:00'));
+    while (cur <= end) {
+      const key = `${cur.getFullYear()}-${pad(cur.getMonth() + 1)}-${pad(cur.getDate())}T${pad(cur.getHours())}:00`;
+      allKeys.push(key);
+      cur.setHours(cur.getHours() + 1);
+    }
+  } else if (data.granularity === 'daily') {
+    allKeys = [];
+    const pad = n => String(n).padStart(2, '0');
+    const cur = new Date(data.buckets[0].time + 'T00:00:00');
+    const end = new Date(data.buckets[data.buckets.length - 1].time + 'T00:00:00');
+    while (cur <= end) {
+      allKeys.push(`${cur.getFullYear()}-${pad(cur.getMonth() + 1)}-${pad(cur.getDate())}`);
+      cur.setDate(cur.getDate() + 1);
+    }
+  } else {
+    allKeys = data.buckets.map(b => b.time);
+  }
+  const buckets = allKeys.map(k => bucketMap.get(k) || emptyBucket(k));
+
   const x = d3.scaleBand()
     .domain(buckets.map(d => d.time))
     .range([0, width])
@@ -27,71 +58,106 @@ export function renderTokenTrend(container, data) {
 
   // Helper to get total height for each bucket
   const totalOf = d => d.input_tokens + d.output_tokens + (d.cache_read_tokens || 0) + (d.cache_creation_tokens || 0);
+  const costOf = d => d.estimated_cost_usd || 0;
+  const valueOf = showDollars ? costOf : totalOf;
 
-  const maxVal = d3.max(buckets, totalOf);
+  const maxVal = d3.max(buckets, valueOf) || 1;
   const y = d3.scaleLinear().domain([0, maxVal * 1.1]).range([height, 0]);
 
+  const maxTicks = data.granularity === 'hourly' ? 12 : 10;
+  const tickVals = x.domain().filter((_, i) => i % Math.ceil(buckets.length / maxTicks) === 0);
+  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  const formatTick = (t) => {
+    // Hourly: "2026-03-15T08:00" → "Mar 15 8AM"
+    const h = t.match(/^\d{4}-(\d{2})-(\d{2})T(\d{2}):00$/);
+    if (h) {
+      const hr = parseInt(h[3], 10);
+      const ampm = hr === 0 ? '12AM' : hr < 12 ? `${hr}AM` : hr === 12 ? '12PM' : `${hr - 12}PM`;
+      return `${months[parseInt(h[1], 10) - 1]} ${parseInt(h[2], 10)} ${ampm}`;
+    }
+    // Daily: "2026-03-08" → "Mar 8"
+    const m = t.match(/^\d{4}-(\d{2})-(\d{2})$/);
+    if (m) {
+      return `${months[parseInt(m[1], 10) - 1]} ${parseInt(m[2], 10)}`;
+    }
+    return t;
+  };
   const xAxis = svg.append('g')
     .attr('transform', `translate(0,${height})`)
-    .call(d3.axisBottom(x).tickValues(x.domain().filter((_, i) => i % Math.ceil(buckets.length / 10) === 0)));
+    .call(d3.axisBottom(x).tickValues(tickVals).tickFormat(formatTick));
   xAxis.selectAll('text').style('fill', '#64748b').style('font-size', '10px')
     .attr('transform', 'rotate(-45)').attr('text-anchor', 'end');
   xAxis.selectAll('line, path').style('stroke', '#334155');
 
-  const yAxis = svg.append('g').call(d3.axisLeft(y).ticks(5).tickFormat(d3.format('.2s')));
+  const yAxisFmt = showDollars ? (v => `$${v < 1 ? v.toFixed(2) : d3.format('.2s')(v)}`) : d3.format('.2s');
+  const yAxis = svg.append('g').call(d3.axisLeft(y).ticks(5).tickFormat(yAxisFmt));
   yAxis.selectAll('text').style('fill', '#64748b').style('font-size', '10px');
   yAxis.selectAll('line, path').style('stroke', '#334155');
 
-  // Stack order (bottom to top): cache_read, cache_creation, input, output
-  // Cache read (bottom)
-  svg.selectAll('.bar-cache-read')
-    .data(buckets)
-    .enter().append('rect')
-    .attr('x', d => x(d.time))
-    .attr('y', d => y(d.cache_read_tokens || 0))
-    .attr('width', x.bandwidth())
-    .attr('height', d => height - y(d.cache_read_tokens || 0))
-    .attr('fill', '#4ade80')
-    .attr('opacity', 0.6);
-
-  // Cache creation (on top of cache read)
-  const cacheBase = d => (d.cache_read_tokens || 0);
-  svg.selectAll('.bar-cache-creation')
-    .data(buckets)
-    .enter().append('rect')
-    .attr('x', d => x(d.time))
-    .attr('y', d => y(cacheBase(d) + (d.cache_creation_tokens || 0)))
-    .attr('width', x.bandwidth())
-    .attr('height', d => y(cacheBase(d)) - y(cacheBase(d) + (d.cache_creation_tokens || 0)))
-    .attr('fill', '#f59e0b')
-    .attr('opacity', 0.6);
-
-  // Input (on top of cache)
-  const inputBase = d => cacheBase(d) + (d.cache_creation_tokens || 0);
-  svg.selectAll('.bar-input')
-    .data(buckets)
-    .enter().append('rect')
-    .attr('x', d => x(d.time))
-    .attr('y', d => y(inputBase(d) + d.input_tokens))
-    .attr('width', x.bandwidth())
-    .attr('height', d => y(inputBase(d)) - y(inputBase(d) + d.input_tokens))
-    .attr('fill', '#3b82f6')
-    .attr('opacity', 0.7);
-
-  // Output (top)
-  const outputBase = d => inputBase(d) + d.input_tokens;
-  svg.selectAll('.bar-output')
-    .data(buckets)
-    .enter().append('rect')
-    .attr('x', d => x(d.time))
-    .attr('y', d => y(outputBase(d) + d.output_tokens))
-    .attr('width', x.bandwidth())
-    .attr('height', d => y(outputBase(d)) - y(outputBase(d) + d.output_tokens))
-    .attr('fill', '#f97316')
-    .attr('opacity', 0.7);
-
-  // Tooltip
-  const tooltip = d3.select('body').append('div').attr('class', 'd3-tooltip').style('display', 'none');
+  if (showDollars) {
+    // Single bar per bucket showing cost
+    svg.selectAll('.bar-cost')
+      .data(buckets)
+      .enter().append('rect')
+      .attr('x', d => x(d.time))
+      .attr('y', d => y(costOf(d)))
+      .attr('width', x.bandwidth())
+      .attr('height', d => height - y(costOf(d)))
+      .attr('fill', '#fbbf24')
+      .attr('opacity', 0.7);
+  } else {
+    // Stack order (bottom to top): cache_read, cache_creation, input, output
+    // Cache read (bottom)
+    svg.selectAll('.bar-cache-read')
+      .data(buckets)
+      .enter().append('rect')
+      .attr('x', d => x(d.time))
+      .attr('y', d => y(d.cache_read_tokens || 0))
+      .attr('width', x.bandwidth())
+      .attr('height', d => height - y(d.cache_read_tokens || 0))
+      .attr('fill', '#4ade80')
+      .attr('opacity', 0.6);
+
+    // Cache creation (on top of cache read)
+    const cacheBase = d => (d.cache_read_tokens || 0);
+    svg.selectAll('.bar-cache-creation')
+      .data(buckets)
+      .enter().append('rect')
+      .attr('x', d => x(d.time))
+      .attr('y', d => y(cacheBase(d) + (d.cache_creation_tokens || 0)))
+      .attr('width', x.bandwidth())
+      .attr('height', d => y(cacheBase(d)) - y(cacheBase(d) + (d.cache_creation_tokens || 0)))
+      .attr('fill', '#f59e0b')
+      .attr('opacity', 0.6);
+
+    // Input (on top of cache)
+    const inputBase = d => cacheBase(d) + (d.cache_creation_tokens || 0);
+    svg.selectAll('.bar-input')
+      .data(buckets)
+      .enter().append('rect')
+      .attr('x', d => x(d.time))
+      .attr('y', d => y(inputBase(d) + d.input_tokens))
+      .attr('width', x.bandwidth())
+      .attr('height', d => y(inputBase(d)) - y(inputBase(d) + d.input_tokens))
+      .attr('fill', '#3b82f6')
+      .attr('opacity', 0.7);
+
+    // Output (top)
+    const outputBase = d => inputBase(d) + d.input_tokens;
+    svg.selectAll('.bar-output')
+      .data(buckets)
+      .enter().append('rect')
+      .attr('x', d => x(d.time))
+      .attr('y', d => y(outputBase(d) + d.output_tokens))
+      .attr('width', x.bandwidth())
+      .attr('height', d => y(outputBase(d)) - y(outputBase(d) + d.output_tokens))
+      .attr('fill', '#f97316')
+      .attr('opacity', 0.7);
+  }
+
+  // Tooltip — remove any stale ones first
+  d3.selectAll('.d3-tooltip-token-trend').remove();
+  const tooltip = d3.select('body').append('div').attr('class', 'd3-tooltip d3-tooltip-token-trend').style('display', 'none');
 
   svg.selectAll('rect')
     .on('mouseover', (event, d) => {
@@ -105,9 +171,187 @@ export function renderTokenTrend(container, data) {
     })
     .on('mouseout', () => tooltip.style('display', 'none'));
 
-  const legend = el.append('div').style('display', 'flex').style('gap', '16px').style('margin-top', '8px');
-  legend.append('span').style('font-size', '11px').style('color', '#4ade80').html('● Cache Read');
-  legend.append('span').style('font-size', '11px').style('color', '#f59e0b').html('● Cache Write');
-  legend.append('span').style('font-size', '11px').style('color', '#60a5fa').html('● Input');
-  legend.append('span').style('font-size', '11px').style('color', '#f97316').html('● Output');
+  // Aggregated totals for the selected period
+  const fmt = d3.format(',');
+  const fmtShort = (n) => {
+    if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
+    if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+    if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
+    return n.toString();
+  };
+  // Use server-computed totals (from raw records) for accuracy;
+  // fall back to summing buckets if data.total is unavailable
+  const t = data.total || {};
+  const totals = {
+    cacheRead: t.cache_read_tokens ?? buckets.reduce((s, d) => s + (d.cache_read_tokens || 0), 0),
+    cacheWrite: t.cache_creation_tokens ?? buckets.reduce((s, d) => s + (d.cache_creation_tokens || 0), 0),
+    input: t.input_tokens ?? buckets.reduce((s, d) => s + d.input_tokens, 0),
+    output: t.output_tokens ?? buckets.reduce((s, d) => s + d.output_tokens, 0),
+    cost: t.estimated_api_cost_usd ?? buckets.reduce((s, d) => s + (d.estimated_cost_usd || 0), 0),
+  };
+  totals.all = totals.cacheRead + totals.cacheWrite + totals.input + totals.output;
+
+  const summary = el.append('div')
+    .style('margin-top', '10px')
+    .style('padding', '10px 14px')
+    .style('background', '#1e293b')
+    .style('border-radius', '6px')
+    .style('font-size', '12px');
+
+  // Top row: total tokens + cost inline
+  const topRow = summary.append('div')
+    .style('margin-bottom', '8px');
+  topRow.append('span')
+    .style('color', '#e2e8f0')
+    .style('font-size', '13px')
+    .html(`Period Total: <strong title="${fmt(totals.all)} tokens">${fmtShort(totals.all)}</strong> tokens`)
+    .append('span')
+    .style('color', '#fbbf24')
+    .style('font-weight', '600')
+    .style('margin-left', '12px')
+    .html(`$${totals.cost.toFixed(2)}`);
+
+  // Segment breakdown with legend dots
+  const segments = [
+    { label: 'Cache Read', value: totals.cacheRead, color: '#4ade80' },
+    { label: 'Cache Write', value: totals.cacheWrite, color: '#f59e0b' },
+    { label: 'Input', value: totals.input, color: '#60a5fa' },
+    { label: 'Output', value: totals.output, color: '#f97316' },
+  ];
+  const segRow = summary.append('div')
+    .style('display', 'flex')
+    .style('flex-wrap', 'wrap')
+    .style('gap', '6px 20px')
+    .style('margin-bottom', '8px');
+  for (const s of segments) {
+    segRow.append('span')
+      .style('color', s.color)
+      .style('font-size', '11px')
+      .html(`● ${s.label}: <strong title="${fmt(s.value)} tokens">${fmtShort(s.value)}</strong>`);
+  }
+
+  // Avg / Min / Max stats per bucket
+  const bucketVals = buckets.map(valueOf);
+  const nonZero = bucketVals.filter(v => v > 0);
+  const avg = nonZero.length > 0 ? nonZero.reduce((a, b) => a + b, 0) / nonZero.length : 0;
+  const min = nonZero.length > 0 ? Math.min(...nonZero) : 0;
+  const max = nonZero.length > 0 ? Math.max(...nonZero) : 0;
+
+  const fmtStat = showDollars
+    ? (v => `$${v.toFixed(2)}`)
+    : (v => fmtShort(Math.round(v)));
+  const fmtStatTitle = showDollars
+    ? (v => `$${v.toFixed(4)}`)
+    : (v => `${fmt(Math.round(v))} tokens`);
+
+  const granLabel = { hourly: 'hour', daily: 'day', weekly: 'week', monthly: 'month' }[data.granularity] || 'bucket';
+  const statsRow = summary.append('div')
+    .style('display', 'flex')
+    .style('flex-wrap', 'wrap')
+    .style('gap', '6px 20px')
+    .style('font-size', '11px')
+    .style('color', '#94a3b8');
+
+  statsRow.append('span').html(`Avg/${granLabel}: <strong title="${fmtStatTitle(avg)}" style="color:#e2e8f0">${fmtStat(avg)}</strong>`);
+  statsRow.append('span').html(`Min: <strong title="${fmtStatTitle(min)}" style="color:#e2e8f0">${fmtStat(min)}</strong>`);
+  statsRow.append('span').html(`Max: <strong title="${fmtStatTitle(max)}" style="color:#e2e8f0">${fmtStat(max)}</strong>`);
+  statsRow.append('span').html(`Active ${granLabel}s: <strong style="color:#e2e8f0">${nonZero.length}</strong> / ${buckets.length}`);
+
+  if (data.granularity === 'hourly') {
+    const days = new Set(buckets.map(b => b.time.slice(0, 10)));
+    const avgHours = (nonZero.length / days.size).toFixed(1);
+    statsRow.append('span').html(`Avg hours/day: <strong style="color:#e2e8f0">${avgHours}</strong>`);
+  } else if (data.granularity === 'daily') {
+    const weeks = Math.max(1, buckets.length / 7);
+    const avgDays = (nonZero.length / weeks).toFixed(1);
+    statsRow.append('span').html(`Avg days/week: <strong style="color:#e2e8f0">${avgDays}</strong>`);
+  }
+
+  // Most active hours heatmap — aggregate by hour-of-day across the entire range
+  const hourAgg = new Array(24).fill(0);
+  const hourCount = new Array(24).fill(0);
+  for (const b of buckets) {
+    // Extract hour from hourly buckets (e.g. "2026-03-15T08:00") or from daily/other granularities skip
+    const hm = b.time.match(/T(\d{2}):00$/);
+    if (hm) {
+      const hr = parseInt(hm[1], 10);
+      hourAgg[hr] += valueOf(b);
+      if (valueOf(b) > 0) hourCount[hr]++;
+    }
+  }
+  const hasHourlyData = hourAgg.some(v => v > 0);
+  if (hasHourlyData) {
+    const peakHour = hourAgg.indexOf(Math.max(...hourAgg));
+    const maxHourVal = Math.max(...hourAgg);
+
+    // Find contiguous active ranges
+    const activeHours = hourAgg.map((v, i) => ({ hour: i, val: v })).filter(h => h.val > 0);
+    const ranges = [];
+    if (activeHours.length > 0) {
+      let start = activeHours[0].hour;
+      let prev = start;
+      for (let i = 1; i < activeHours.length; i++) {
+        if (activeHours[i].hour === prev + 1) {
+          prev = activeHours[i].hour;
+        } else {
+          ranges.push([start, prev]);
+          start = activeHours[i].hour;
+          prev = start;
+        }
+      }
+      ranges.push([start, prev]);
+    }
+
+    const fmtHr = h => {
+      if (h === 0) return '12AM';
+      if (h < 12) return `${h}AM`;
+      if (h === 12) return '12PM';
+      return `${h - 12}PM`;
+    };
+
+    const activeRangeStr = ranges.map(([s, e]) => s === e ? fmtHr(s) : `${fmtHr(s)}-${fmtHr((e + 1) % 24)}`).join(', ');
+
+    const hoursRow = summary.append('div')
+      .style('margin-top', '8px')
+      .style('font-size', '11px')
+      .style('color', '#94a3b8');
+
+    hoursRow.append('div')
+      .style('margin-bottom', '4px')
+      .html(`Peak hour: <strong style="color:#e2e8f0">${fmtHr(peakHour)}</strong> &nbsp; Active: <strong style="color:#e2e8f0">${activeRangeStr}</strong>`);
+
+    // Mini hour heatmap bar
+    const heatmap = hoursRow.append('div')
+      .style('display', 'flex')
+      .style('gap', '1px')
+      .style('align-items', 'end')
+      .style('height', '20px');
+
+    for (let h = 0; h < 24; h++) {
+      const pct = maxHourVal > 0 ? hourAgg[h] / maxHourVal : 0;
+      const color = pct === 0 ? '#1e293b'
+        : pct < 0.33 ? '#334155'
+        : pct < 0.66 ? '#3b82f6'
+        : '#60a5fa';
+      heatmap.append('div')
+        .attr('title', `${fmtHr(h)}: ${showDollars ? '$' + hourAgg[h].toFixed(2) : fmtShort(Math.round(hourAgg[h]))}`)
+        .style('flex', '1')
+        .style('height', `${Math.max(2, pct * 100)}%`)
+        .style('background', color)
+        .style('border-radius', '1px');
+    }
+
+    // Hour labels under heatmap
+    const labels = hoursRow.append('div')
+      .style('display', 'flex')
+      .style('gap', '1px');
+    for (let h = 0; h < 24; h++) {
+      labels.append('div')
+        .style('flex', '1')
+        .style('text-align', 'center')
+        .style('font-size', '8px')
+        .style('color', '#64748b')
+        .text(h % 3 === 0 ? fmtHr(h) : '');
+    }
+  }
 }

package/public/js/components/date-picker.js

@@ -4,18 +4,32 @@ export function initDatePicker(container, onChange) {
   thirtyDaysAgo.setDate(today.getDate() - 30);
   const fmt = d => d.toISOString().slice(0, 10);
 
+  const savedFrom = localStorage.getItem('datePickerFrom') || fmt(thirtyDaysAgo);
+  const savedTo = localStorage.getItem('datePickerTo') || fmt(today);
+
   container.innerHTML = `
     <span>📅</span>
-    <input type="date" id="date-from" value="${fmt(thirtyDaysAgo)}">
+    <input type="date" id="date-from" value="${savedFrom}">
     <span>–</span>
-    <input type="date" id="date-to" value="${fmt(today)}">
+    <input type="date" id="date-to" value="${savedTo}">
   `;
 
   const fromInput = container.querySelector('#date-from');
   const toInput = container.querySelector('#date-to');
-  const emitChange = () => onChange({ from: fromInput.value, to: toInput.value });
+  const emitChange = () => {
+    localStorage.setItem('datePickerFrom', fromInput.value);
+    localStorage.setItem('datePickerTo', toInput.value);
+    onChange({ from: fromInput.value, to: toInput.value });
+  };
   fromInput.addEventListener('change', emitChange);
   toInput.addEventListener('change', emitChange);
 
-  return { getRange: () => ({ from: fromInput.value, to: toInput.value }) };
+  return {
+    getRange: () => ({ from: fromInput.value, to: toInput.value }),
+    setRange: (from, to) => {
+      fromInput.value = from;
+      toInput.value = to;
+      emitChange();
+    },
+  };
 }

package/server/parser.js

@@ -2,21 +2,38 @@ import fs from 'fs';
 import path from 'path';
 
 export function deriveProjectName(dirName) {
-  const clean = dirName.startsWith('-') ? dirName.slice(1) : dirName;
-
-  const workspaceIdx = clean.indexOf('-Workspace-');
-  if (workspaceIdx !== -1) {
-    return clean.slice(workspaceIdx + '-Workspace-'.length);
+  // Strip drive prefix like "C--" at the start
+  const clean = dirName.replace(/^[A-Za-z]--/, '');
+
+  // Known parent directory markers (case-insensitive search)
+  // Match the last occurrence of common parent dirs to get the project folder name
+  const lower = clean.toLowerCase();
+  const markers = ['-workspace-', '-projects-', '-repos-', '-src-', '-home-', '-desktop-', '-documents-', '-downloads-'];
+  let bestIdx = -1;
+  let bestLen = 0;
+  for (const m of markers) {
+    const idx = lower.lastIndexOf(m);
+    if (idx > bestIdx) {
+      bestIdx = idx;
+      bestLen = m.length;
+    }
+  }
+  if (bestIdx !== -1) {
+    const result = clean.slice(bestIdx + bestLen);
+    // Handle worktree subdirs: "project--claude-worktrees-branch-name" → "project"
+    const wtIdx = result.indexOf('--claude-worktrees');
+    return wtIdx !== -1 ? result.slice(0, wtIdx) : result;
   }
 
-  const homeIdx = clean.indexOf('-Home-');
-  if (homeIdx !== -1) {
-    const rest = clean.slice(homeIdx + '-Home-'.length);
-    return rest;
+  // Fallback: strip Users-username prefix, return the rest
+  const userMatch = clean.match(/^Users-[^-]+-(.+)$/);
+  if (userMatch) {
+    const rest = userMatch[1];
+    const wtIdx = rest.indexOf('--claude-worktrees');
+    return wtIdx !== -1 ? rest.slice(0, wtIdx) : rest;
   }
 
-  const parts = clean.split('-');
-  return parts[parts.length - 1];
+  return clean;
 }
 
 export function parseLogFile(filePath) {