claude-spend 1.0.1 → 1.0.3

package/README.md

@@ -2,6 +2,23 @@
 
 See where your Claude Code tokens go. One command, zero setup.
 
+## Problem
+
+ I've been using Claude Code every day for 3 months. I hit the usage limit almost daily, but had zero visibility into which prompts were eating my tokens. So I built claude-spend. One command, zero setup. 
+
+## How does it look
+
+
+<img width="1910" height="966" alt="Screenshot 2026-02-18 092727" src="https://github.com/user-attachments/assets/11cc7149-d4dd-4e44-a3a0-0b48e935b7bc" />
+
+<img width="1906" height="966" alt="Screenshot 2026-02-18 093529" src="https://github.com/user-attachments/assets/537c3611-5794-41d2-864e-e368e6949812" />
+
+<img width="1908" height="969" alt="Screenshot 2026-02-18 093647" src="https://github.com/user-attachments/assets/aaaa8ce5-2025-407d-8596-ea1965748691" />
+
+<img width="1908" height="969" alt="Screenshot 2026-02-18 093647" src="https://github.com/user-attachments/assets/a9fde5e2-6e52-4bae-9b96-03655109aef6" />
+
+
+
 ## Install
 
 ```
@@ -10,12 +27,14 @@ npx claude-spend
 
 That's it. Opens a dashboard in your browser.
 
+
 ## What it does
 
 - Reads your local Claude Code session files (nothing leaves your machine)
 - Shows token usage per conversation, per day, and per model
 - Surfaces insights like which prompts cost the most and usage patterns
 
+
 ## Options
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-spend",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "See where your Claude Code tokens go. One command, zero setup.",
   "main": "src/index.js",
   "bin": {

package/src/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { createServer } = require('./server');
 

package/src/parser.js

@@ -3,6 +3,43 @@ const path = require('path');
 const os = require('os');
 const readline = require('readline');
 
+// Anthropic API pricing per token (from platform.claude.com/docs/en/about-claude/pricing)
+// Note: These are API-equivalent estimates. Claude Code subscription pricing differs.
+// Cache write = 1.25x base input (5-min TTL). Cache read = 0.1x base input.
+const MODEL_PRICING = {
+  // Opus 4.5, 4.6: $5/MTok in, $25/MTok out
+  'opus-4.5': { input: 5 / 1e6, output: 25 / 1e6, cacheWrite: 6.25 / 1e6, cacheRead: 0.50 / 1e6 },
+  'opus-4.6': { input: 5 / 1e6, output: 25 / 1e6, cacheWrite: 6.25 / 1e6, cacheRead: 0.50 / 1e6 },
+  // Opus 4.0, 4.1: $15/MTok in, $75/MTok out
+  'opus-4.0': { input: 15 / 1e6, output: 75 / 1e6, cacheWrite: 18.75 / 1e6, cacheRead: 1.50 / 1e6 },
+  'opus-4.1': { input: 15 / 1e6, output: 75 / 1e6, cacheWrite: 18.75 / 1e6, cacheRead: 1.50 / 1e6 },
+  // Sonnet 3.7, 4, 4.5, 4.6: $3/MTok in, $15/MTok out
+  sonnet: { input: 3 / 1e6, output: 15 / 1e6, cacheWrite: 3.75 / 1e6, cacheRead: 0.30 / 1e6 },
+  // Haiku 4.5: $1/MTok in, $5/MTok out
+  'haiku-4.5': { input: 1 / 1e6, output: 5 / 1e6, cacheWrite: 1.25 / 1e6, cacheRead: 0.10 / 1e6 },
+  // Haiku 3.5: $0.80/MTok in, $4/MTok out
+  'haiku-3.5': { input: 0.80 / 1e6, output: 4 / 1e6, cacheWrite: 1.00 / 1e6, cacheRead: 0.08 / 1e6 },
+};
+const DEFAULT_PRICING = MODEL_PRICING.sonnet;
+
+function getPricing(model) {
+  if (!model) return DEFAULT_PRICING;
+  const m = model.toLowerCase();
+  if (m.includes('opus')) {
+    // Opus 4.5/4.6 are cheaper than Opus 4.0/4.1
+    if (m.includes('4-6') || m.includes('4.6')) return MODEL_PRICING['opus-4.6'];
+    if (m.includes('4-5') || m.includes('4.5')) return MODEL_PRICING['opus-4.5'];
+    if (m.includes('4-1') || m.includes('4.1')) return MODEL_PRICING['opus-4.1'];
+    return MODEL_PRICING['opus-4.0']; // Opus 4.0 and Opus 3
+  }
+  if (m.includes('sonnet')) return MODEL_PRICING.sonnet;
+  if (m.includes('haiku')) {
+    if (m.includes('4-5') || m.includes('4.5')) return MODEL_PRICING['haiku-4.5'];
+    return MODEL_PRICING['haiku-3.5'];
+  }
+  return DEFAULT_PRICING;
+}
+
 function getClaudeDir() {
   return path.join(os.homedir(), '.claude');
 }
@@ -36,8 +73,11 @@ function extractSessionData(entries) {
         content.startsWith('<command-name')
       )) continue;
 
+      const textContent = typeof content === 'string'
+        ? content
+        : content.filter(b => b.type === 'text').map(b => b.text).join('\n').trim();
       pendingUserMessage = {
-        text: typeof content === 'string' ? content : JSON.stringify(content),
+        text: textContent || null,
         timestamp: entry.timestamp,
       };
     }
@@ -47,10 +87,23 @@ function extractSessionData(entries) {
       const model = entry.message.model || 'unknown';
       if (model === '<synthetic>') continue;
 
-      const inputTokens = (usage.input_tokens || 0)
-        + (usage.cache_creation_input_tokens || 0)
-        + (usage.cache_read_input_tokens || 0);
+      const pricing = getPricing(model);
+      const inputTokens = usage.input_tokens || 0;
+      const cacheCreationTokens = usage.cache_creation_input_tokens || 0;
+      const cacheReadTokens = usage.cache_read_input_tokens || 0;
       const outputTokens = usage.output_tokens || 0;
+      const totalTokens = inputTokens + cacheCreationTokens + cacheReadTokens + outputTokens;
+      const cost = (inputTokens * pricing.input)
+        + (cacheCreationTokens * pricing.cacheWrite)
+        + (cacheReadTokens * pricing.cacheRead)
+        + (outputTokens * pricing.output);
+
+      const tools = [];
+      if (Array.isArray(entry.message.content)) {
+        for (const block of entry.message.content) {
+          if (block.type === 'tool_use' && block.name) tools.push(block.name);
+        }
+      }
 
       queries.push({
         userPrompt: pendingUserMessage?.text || null,
@@ -58,8 +111,12 @@ function extractSessionData(entries) {
         assistantTimestamp: entry.timestamp,
         model,
         inputTokens,
+        cacheCreationTokens,
+        cacheReadTokens,
         outputTokens,
-        totalTokens: inputTokens + outputTokens,
+        totalTokens,
+        cost,
+        tools,
       });
     }
   }
@@ -90,7 +147,11 @@ async function parseAllSessions() {
   }
 
   const projectDirs = fs.readdirSync(projectsDir).filter(d => {
-    return fs.statSync(path.join(projectsDir, d)).isDirectory();
+    try {
+      return fs.statSync(path.join(projectsDir, d)).isDirectory();
+    } catch {
+      return false;
+    }
   });
 
   const sessions = [];
@@ -100,7 +161,12 @@ async function parseAllSessions() {
 
   for (const projectDir of projectDirs) {
     const dir = path.join(projectsDir, projectDir);
-    const files = fs.readdirSync(dir).filter(f => f.endsWith('.jsonl'));
+    let files;
+    try {
+      files = fs.readdirSync(dir).filter(f => f.endsWith('.jsonl'));
+    } catch {
+      continue; // Skip directories we can't read
+    }
 
     for (const file of files) {
       const filePath = path.join(dir, file);
@@ -117,12 +183,15 @@ async function parseAllSessions() {
       const queries = extractSessionData(entries);
       if (queries.length === 0) continue;
 
-      let inputTokens = 0, outputTokens = 0;
+      let inputTokens = 0, outputTokens = 0, cacheCreationTokens = 0, cacheReadTokens = 0, cost = 0;
       for (const q of queries) {
         inputTokens += q.inputTokens;
         outputTokens += q.outputTokens;
+        cacheCreationTokens += q.cacheCreationTokens;
+        cacheReadTokens += q.cacheReadTokens;
+        cost += q.cost;
       }
-      const totalTokens = inputTokens + outputTokens;
+      const totalTokens = inputTokens + cacheCreationTokens + cacheReadTokens + outputTokens;
 
       const firstTimestamp = entries.find(e => e.timestamp)?.timestamp;
       const date = firstTimestamp ? firstTimestamp.split('T')[0] : 'unknown';
@@ -141,14 +210,17 @@ async function parseAllSessions() {
       // Collect per-prompt data for "most expensive prompts"
       // Group consecutive queries under the same user prompt
       let currentPrompt = null;
-      let promptInput = 0, promptOutput = 0;
+      let promptInput = 0, promptOutput = 0, promptCacheCreation = 0, promptCacheRead = 0, promptCost = 0;
       const flushPrompt = () => {
-        if (currentPrompt && (promptInput + promptOutput) > 0) {
+        if (currentPrompt && (promptInput + promptOutput + promptCacheCreation + promptCacheRead) > 0) {
           allPrompts.push({
             prompt: currentPrompt.substring(0, 300),
             inputTokens: promptInput,
             outputTokens: promptOutput,
-            totalTokens: promptInput + promptOutput,
+            cacheCreationTokens: promptCacheCreation,
+            cacheReadTokens: promptCacheRead,
+            totalTokens: promptInput + promptOutput + promptCacheCreation + promptCacheRead,
+            cost: promptCost,
             date,
             sessionId,
             model: primaryModel,
@@ -161,9 +233,15 @@ async function parseAllSessions() {
           currentPrompt = q.userPrompt;
           promptInput = 0;
           promptOutput = 0;
+          promptCacheCreation = 0;
+          promptCacheRead = 0;
+          promptCost = 0;
         }
         promptInput += q.inputTokens;
         promptOutput += q.outputTokens;
+        promptCacheCreation += q.cacheCreationTokens;
+        promptCacheRead += q.cacheReadTokens;
+        promptCost += q.cost;
       }
       flushPrompt();
 
@@ -178,17 +256,23 @@ async function parseAllSessions() {
         queries,
         inputTokens,
         outputTokens,
+        cacheCreationTokens,
+        cacheReadTokens,
         totalTokens,
+        cost,
       });
 
       // Daily
       if (date !== 'unknown') {
         if (!dailyMap[date]) {
-          dailyMap[date] = { date, inputTokens: 0, outputTokens: 0, totalTokens: 0, sessions: 0, queries: 0 };
+          dailyMap[date] = { date, inputTokens: 0, outputTokens: 0, cacheCreationTokens: 0, cacheReadTokens: 0, totalTokens: 0, cost: 0, sessions: 0, queries: 0 };
         }
         dailyMap[date].inputTokens += inputTokens;
         dailyMap[date].outputTokens += outputTokens;
+        dailyMap[date].cacheCreationTokens += cacheCreationTokens;
+        dailyMap[date].cacheReadTokens += cacheReadTokens;
         dailyMap[date].totalTokens += totalTokens;
+        dailyMap[date].cost += cost;
         dailyMap[date].sessions += 1;
         dailyMap[date].queries += queries.length;
       }
@@ -197,11 +281,14 @@ async function parseAllSessions() {
       for (const q of queries) {
         if (q.model === '<synthetic>' || q.model === 'unknown') continue;
         if (!modelMap[q.model]) {
-          modelMap[q.model] = { model: q.model, inputTokens: 0, outputTokens: 0, totalTokens: 0, queryCount: 0 };
+          modelMap[q.model] = { model: q.model, inputTokens: 0, outputTokens: 0, cacheCreationTokens: 0, cacheReadTokens: 0, totalTokens: 0, cost: 0, queryCount: 0 };
         }
         modelMap[q.model].inputTokens += q.inputTokens;
         modelMap[q.model].outputTokens += q.outputTokens;
+        modelMap[q.model].cacheCreationTokens += q.cacheCreationTokens;
+        modelMap[q.model].cacheReadTokens += q.cacheReadTokens;
         modelMap[q.model].totalTokens += q.totalTokens;
+        modelMap[q.model].cost += q.cost;
         modelMap[q.model].queryCount += 1;
       }
     }
@@ -209,18 +296,113 @@ async function parseAllSessions() {
 
   sessions.sort((a, b) => b.totalTokens - a.totalTokens);
 
+  // Build per-project aggregation
+  const projectMap = {};
+  for (const session of sessions) {
+    const proj = session.project;
+    if (!projectMap[proj]) {
+      projectMap[proj] = {
+        project: proj,
+        inputTokens: 0, outputTokens: 0, totalTokens: 0,
+        sessionCount: 0, queryCount: 0,
+        modelMap: {},
+        allPrompts: [],
+      };
+    }
+    const p = projectMap[proj];
+    p.inputTokens += session.inputTokens;
+    p.outputTokens += session.outputTokens;
+    p.totalTokens += session.totalTokens;
+    p.sessionCount += 1;
+    p.queryCount += session.queryCount;
+
+    for (const q of session.queries) {
+      if (q.model === '<synthetic>' || q.model === 'unknown') continue;
+      if (!p.modelMap[q.model]) {
+        p.modelMap[q.model] = { model: q.model, inputTokens: 0, outputTokens: 0, totalTokens: 0, queryCount: 0 };
+      }
+      const m = p.modelMap[q.model];
+      m.inputTokens += q.inputTokens;
+      m.outputTokens += q.outputTokens;
+      m.totalTokens += q.totalTokens;
+      m.queryCount += 1;
+    }
+
+    // Per-project prompt grouping with tool tracking
+    let curPrompt = null, curInput = 0, curOutput = 0, curConts = 0;
+    let curModels = {}, curTools = {};
+    const flushProjectPrompt = () => {
+      if (curPrompt && (curInput + curOutput) > 0) {
+        const topModel = Object.entries(curModels).sort((a, b) => b[1] - a[1])[0]?.[0] || session.model;
+        p.allPrompts.push({
+          prompt: curPrompt.substring(0, 300),
+          inputTokens: curInput,
+          outputTokens: curOutput,
+          totalTokens: curInput + curOutput,
+          continuations: curConts,
+          model: topModel,
+          toolCounts: { ...curTools },
+          date: session.date,
+          sessionId: session.sessionId,
+        });
+      }
+    };
+    for (const q of session.queries) {
+      if (q.userPrompt && q.userPrompt !== curPrompt) {
+        flushProjectPrompt();
+        curPrompt = q.userPrompt;
+        curInput = 0; curOutput = 0; curConts = 0;
+        curModels = {}; curTools = {};
+      } else if (!q.userPrompt) {
+        curConts++;
+      }
+      curInput += q.inputTokens;
+      curOutput += q.outputTokens;
+      if (q.model && q.model !== '<synthetic>') curModels[q.model] = (curModels[q.model] || 0) + 1;
+      for (const t of q.tools || []) curTools[t] = (curTools[t] || 0) + 1;
+    }
+    flushProjectPrompt();
+  }
+
+  const projectBreakdown = Object.values(projectMap).map(p => ({
+    project: p.project,
+    inputTokens: p.inputTokens,
+    outputTokens: p.outputTokens,
+    totalTokens: p.totalTokens,
+    sessionCount: p.sessionCount,
+    queryCount: p.queryCount,
+    modelBreakdown: Object.values(p.modelMap).sort((a, b) => b.totalTokens - a.totalTokens),
+    topPrompts: (p.allPrompts || []).sort((a, b) => b.totalTokens - a.totalTokens).slice(0, 10),
+  })).sort((a, b) => b.totalTokens - a.totalTokens);
+
   const dailyUsage = Object.values(dailyMap).sort((a, b) => a.date.localeCompare(b.date));
 
   // Top 20 most expensive individual prompts
   allPrompts.sort((a, b) => b.totalTokens - a.totalTokens);
   const topPrompts = allPrompts.slice(0, 20);
 
+  const totalCacheCreationTokens = sessions.reduce((sum, s) => sum + s.cacheCreationTokens, 0);
+  const totalCacheReadTokens = sessions.reduce((sum, s) => sum + s.cacheReadTokens, 0);
+  const totalCost = sessions.reduce((sum, s) => sum + s.cost, 0);
+  const totalAllInput = sessions.reduce((sum, s) => sum + s.inputTokens + s.cacheCreationTokens + s.cacheReadTokens, 0);
+
+  // What caching saved: cache reads at full input price minus what they actually cost
+  const avgInputPrice = DEFAULT_PRICING.input;
+  const avgCacheReadPrice = DEFAULT_PRICING.cacheRead;
+  const totalSaved = totalCacheReadTokens * (avgInputPrice - avgCacheReadPrice);
+  const cacheHitRate = totalAllInput > 0 ? totalCacheReadTokens / totalAllInput : 0;
+
   const grandTotals = {
     totalSessions: sessions.length,
     totalQueries: sessions.reduce((sum, s) => sum + s.queryCount, 0),
     totalTokens: sessions.reduce((sum, s) => sum + s.totalTokens, 0),
     totalInputTokens: sessions.reduce((sum, s) => sum + s.inputTokens, 0),
     totalOutputTokens: sessions.reduce((sum, s) => sum + s.outputTokens, 0),
+    totalCacheCreationTokens,
+    totalCacheReadTokens,
+    totalCost,
+    totalSaved,
+    cacheHitRate,
     avgTokensPerQuery: 0,
     avgTokensPerSession: 0,
     dateRange: dailyUsage.length > 0
@@ -241,6 +423,7 @@ async function parseAllSessions() {
     sessions,
     dailyUsage,
     modelBreakdown: Object.values(modelMap),
+    projectBreakdown,
     topPrompts,
     totals: grandTotals,
     insights,
@@ -259,7 +442,7 @@ function generateInsights(sessions, allPrompts, totals) {
       id: 'vague-prompts',
       type: 'warning',
       title: 'Short, vague messages are costing you the most',
-      description: `${shortExpensive.length} times you sent a short message like ${examples.map(e => '"' + e + '"').join(', ')} -- and each time, Claude used over 100K tokens to respond. That adds up to ${fmt(totalWasted)} tokens total. When you say just "Yes" or "Do it", Claude doesn't know exactly what you want, so it tries harder -- reading more files, running more tools, making more attempts. Each of those steps re-sends the entire conversation, which multiplies the cost.`,
+      description: `${shortExpensive.length} times you sent a short message like ${examples.map(e => '"' + e + '"').join(', ')} -- and each time, Claude burned through over 100K tokens before it figured out what you wanted. That adds up to ${fmt(totalWasted)} tokens total. Most of that isn't Claude writing back to you -- it's Claude re-reading your entire conversation, searching files, and making multiple attempts because the instruction was too vague.`,
       action: 'Try being specific. Instead of "Yes", say "Yes, update the login page and run the tests." It gives Claude a clear target, so it finishes faster and uses fewer tokens.',
     });
   }
@@ -446,6 +629,20 @@ function generateInsights(sessions, allPrompts, totals) {
     }
   }
 
+  // 11. Cache efficiency
+  if (totals.totalCacheReadTokens > 0) {
+    const saved = totals.totalSaved;
+    const hitRate = (totals.cacheHitRate * 100).toFixed(1);
+    const withoutCaching = totals.totalCost + saved;
+    insights.push({
+      id: 'cache-savings',
+      type: 'info',
+      title: `Caching saved you an estimated $${saved.toFixed(2)}`,
+      description: `Your cache hit rate is ${hitRate}% -- meaning ${hitRate}% of all input tokens were served from cache at 10x lower cost. Without caching, your estimated API-equivalent bill would be $${withoutCaching.toFixed(2)} instead of $${totals.totalCost.toFixed(2)}. Cache reads happen when Claude re-reads parts of the conversation that haven't changed since the last turn.`,
+      action: 'Caching works best in longer conversations where context stays stable. Shorter sessions mean less cache reuse but also less context growth. The sweet spot is medium-length focused sessions on a single task.',
+    });
+  }
+
   return insights;
 }
 

package/src/public/index.html

@@ -229,12 +229,6 @@
   }
 
   /* Token explainer */
-  .token-explainer {
-    font-size: 13px; color: var(--text-tertiary); font-weight: 500;
-    text-align: center; padding: 10px 20px; margin: -16px 0 28px;
-    line-height: 1.5;
-  }
-
   /* ---- SECTION HEADINGS ---- */
   .section-header {
     display: flex; align-items: center; gap: 10px;
@@ -350,8 +344,9 @@
     display: flex; gap: 1px; height: 4px; margin-top: 8px;
     border-radius: 4px; overflow: hidden;
   }
-  .token-bar-in { background: var(--indigo); height: 100%; border-radius: 4px 0 0 4px; }
-  .token-bar-out { background: var(--teal); height: 100%; border-radius: 0 4px 4px 0; }
+  .token-bar-in { background: var(--indigo); height: 100%; }
+  .token-bar-cache { background: var(--amber); height: 100%; }
+  .token-bar-out { background: var(--teal); height: 100%; }
   .prompt-tokens { text-align: right; white-space: nowrap; padding-top: 2px; }
   .prompt-tokens .value {
     font-size: 16px; font-weight: 700; font-family: var(--mono);
@@ -359,6 +354,50 @@
   }
   .prompt-tokens .sub { font-size: 11px; color: var(--text-tertiary); font-weight: 500; margin-top: 2px; }
 
+  /* ---- PROJECTS ---- */
+  .projects-section { margin-bottom: 32px; }
+
+  /* Project accordion */
+  .proj-chevron {
+    width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
+    color: var(--text-tertiary); transition: transform 0.25s ease; flex-shrink: 0;
+  }
+  .proj-row { cursor: pointer; }
+  .proj-row:hover td { background: #FAFBFF; }
+  .proj-row.expanded .proj-chevron { transform: rotate(90deg); }
+  .proj-drawer td { padding: 0; border-bottom: 1px solid var(--border); }
+  .proj-drawer-inner { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: #FAFBFC; }
+  .proj-drawer.open .proj-drawer-inner { max-height: 600px; }
+  .proj-drawer-content { padding: 12px 16px 16px; }
+  .drawer-prompt-list { display: flex; flex-direction: column; gap: 8px; }
+  .drawer-prompt-row {
+    display: grid; grid-template-columns: 24px 1fr auto;
+    gap: 10px; padding: 10px 14px; align-items: start;
+    background: white; border: 1px solid var(--border); border-radius: 10px;
+    cursor: pointer; transition: box-shadow 0.15s;
+  }
+  .drawer-prompt-row:hover { box-shadow: var(--shadow-md); }
+  .drawer-rank {
+    width: 20px; height: 20px; border-radius: 6px;
+    background: var(--bg); display: flex; align-items: center; justify-content: center;
+    font-size: 11px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0;
+  }
+  .drawer-prompt-text {
+    font-size: 13px; font-weight: 500; line-height: 1.5;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    word-break: break-word;
+  }
+  .drawer-prompt-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; }
+  .tool-chip {
+    background: var(--bg); border: 1px solid var(--border-strong);
+    padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 600;
+    color: var(--text-secondary); white-space: nowrap;
+  }
+  .drawer-tokens { text-align: right; white-space: nowrap; }
+  .drawer-tokens .value { font-family: var(--mono); font-size: 14px; font-weight: 700; }
+  .drawer-tokens .sub { font-size: 11px; color: var(--text-tertiary); font-weight: 500; margin-top: 2px; }
+  .drawer-empty { text-align: center; padding: 20px; color: var(--text-tertiary); font-size: 13px; font-weight: 500; }
+
   /* ---- SESSIONS ---- */
   .sessions-section { margin-bottom: 40px; }
   .sessions-toolbar {
@@ -409,15 +448,43 @@
     display: inline-flex; align-items: center; gap: 5px;
     padding: 3px 10px; border-radius: 20px;
     font-size: 12px; font-weight: 600;
-  }
-  .model-opus { background: #EEF2FF; color: #4F46E5; }
-  .model-sonnet { background: #ECFDF5; color: #059669; }
-  .model-haiku { background: #FFF7ED; color: #EA580C; }
-  .model-unknown { background: #F1F5F9; color: #64748B; }
-  .model-dot { width: 6px; height: 6px; border-radius: 50%; }
-  .model-opus .model-dot { background: #6366F1; }
+    transition: box-shadow 0.15s;
+  }
+  .model-badge:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
+  /* Contrast-corrected badge colors (WCAG AA compliant) */
+  .model-opus { background: #EEF2FF; color: #3730A3; }
+  .model-sonnet { background: #ECFDF5; color: #047857; }
+  .model-haiku { background: #FFF7ED; color: #C2410C; }
+  .model-unknown { background: #F1F5F9; color: #475569; }
+  .model-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+  .model-opus .model-dot { background: #4F46E5; }
   .model-sonnet .model-dot { background: #10B981; }
   .model-haiku .model-dot { background: #F97316; }
+  /* Sub-line pills in project rows — compact variant */
+  .model-pills {
+    list-style: none; padding: 0; margin: 5px 0 0;
+    display: flex; flex-wrap: wrap; gap: 4px;
+  }
+  .model-pills li { display: flex; }
+  .model-pills .model-badge {
+    padding: 2px 8px; font-size: 11px; border-radius: 10px;
+  }
+  /* Screen-reader-only label (WCAG 2.1 compliant) */
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0;
+    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
+    white-space: nowrap; border-width: 0;
+  }
+  /* Inline ↓in ↑out token pair inside a model badge */
+  .token-detail {
+    display: inline-flex; align-items: center; gap: 2px;
+    font-size: 10px; font-weight: 600; opacity: 0.9;
+  }
+  /* Project name styled as path */
+  .proj-name {
+    font-weight: 600; font-size: 13px;
+    font-family: var(--mono); letter-spacing: -0.2px; color: var(--text);
+  }
   .date-cell { white-space: nowrap; color: var(--text-secondary); font-weight: 500; }
   .project-tag {
     font-size: 11px; color: var(--text-tertiary); display: block;
@@ -537,9 +604,6 @@
 
   <!-- Stats -->
   <div class="stats-row" id="statsRow"></div>
-  <div id="tokenExplainer" class="token-explainer animate delay-2">
-    Tokens are how AI measures text -- roughly 1 token = 1 word. Hover over any label with a <span style="display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(0,0,0,0.08);font-size:10px;font-weight:700;vertical-align:middle;">?</span> for an explanation.
-  </div>
 
   <!-- Insights -->
   <div id="insightsSection" class="insights-section" style="display:none">
@@ -555,11 +619,12 @@
   <!-- Charts -->
   <div class="charts-grid animate delay-3">
     <div class="chart-card">
-      <h3 class="has-tooltip has-tooltip-below" style="display:inline-block">Tokens per Day<div class="tooltip">How many tokens you used each day. Taller bars mean heavier usage days. The indigo portion is what Claude read, the teal is what Claude wrote.</div></h3>
+      <h3 class="has-tooltip has-tooltip-below" style="display:inline-block">Tokens per Day<div class="tooltip">How many tokens you used each day. Indigo = fresh input + cache writes (full price), amber = cache reads (10x cheaper), teal = Claude's output.</div></h3>
       <canvas id="dailyChart"></canvas>
       <div class="legend">
-        <div class="legend-item"><div class="legend-dot" style="background:var(--indigo)"></div> Read by Claude (your messages + context)</div>
-        <div class="legend-item"><div class="legend-dot" style="background:var(--teal)"></div> Written by Claude (responses)</div>
+        <div class="legend-item"><div class="legend-dot" style="background:var(--indigo)"></div> Fresh input (full price)</div>
+        <div class="legend-item"><div class="legend-dot" style="background:var(--amber)"></div> Cache reads (10x cheaper)</div>
+        <div class="legend-item"><div class="legend-dot" style="background:var(--teal)"></div> Claude's output</div>
       </div>
     </div>
     <div class="chart-card">
@@ -569,6 +634,30 @@
     </div>
   </div>
 
+  <!-- Projects -->
+  <div class="projects-section animate delay-4">
+    <div class="section-header">
+      <div class="section-icon" style="background:linear-gradient(135deg,#EDE9FE,#DDD6FE)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2.5" stroke-linecap="round"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M12 3v18"/><path d="M3 7l9 4 9-4"/></svg>
+      </div>
+      <div class="section-title">Projects</div>
+      <span id="projectsCount" style="font-size:13px;color:var(--text-tertiary);font-weight:600;margin-left:auto"></span>
+    </div>
+    <div class="sessions-card">
+      <table class="sessions-table">
+        <thead>
+          <tr>
+            <th>Project</th>
+            <th style="text-align:right">Total Tokens</th>
+            <th style="text-align:right">Sessions</th>
+            <th style="text-align:right">Queries</th>
+          </tr>
+        </thead>
+        <tbody id="projectsBody"></tbody>
+      </table>
+    </div>
+  </div>
+
   <!-- Most Expensive Prompts -->
   <div class="top-prompts animate delay-4">
     <div class="section-header">
@@ -623,6 +712,7 @@
   </div>
 
   <div class="footer">
+    <div style="margin-bottom: 8px; color: var(--text-secondary); font-size: 13px;">This tool runs 100% locally -- no analytics, no tracking. If you find it useful (or not), I'd love to hear from you at <a href="mailto:writetoaniketparihar@gmail.com">writetoaniketparihar@gmail.com</a></div>
     Made with <a href="https://claude.ai/code" target="_blank">Claude Code</a> and &#10084; by <a href="https://www.linkedin.com/in/aniketparihar/" target="_blank">Aniket</a>
   </div>
 </div>
@@ -647,13 +737,42 @@ function modelClass(m) {
   return 'model-unknown';
 }
 function modelShort(m) {
+  // New format: claude-{family}-{major}-{minor}[-date]
+  // e.g. claude-opus-4-6, claude-sonnet-4-6, claude-haiku-4-5-20251001
+  let match = m.match(/^claude-(opus|sonnet|haiku)-(\d+)-(\d+)/i);
+  if (match) {
+    const name = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+    return name + ' ' + match[2] + '.' + match[3];
+  }
+  // Old format with sub-version: claude-3-5-{family} or claude-3-7-{family}
+  match = m.match(/^claude-(\d+)-(\d+)-(opus|sonnet|haiku)/i);
+  if (match) {
+    const name = match[3].charAt(0).toUpperCase() + match[3].slice(1);
+    return name + ' ' + match[1] + '.' + match[2];
+  }
+  // Old format: claude-3-{family}
+  match = m.match(/^claude-(\d+)-(opus|sonnet|haiku)/i);
+  if (match) {
+    const name = match[2].charAt(0).toUpperCase() + match[2].slice(1);
+    return name + ' ' + match[1];
+  }
   if (m.includes('opus')) return 'Opus';
   if (m.includes('sonnet')) return 'Sonnet';
   if (m.includes('haiku')) return 'Haiku';
   return m;
 }
 function projectShort(p) {
-  return p.replace(/^C--Users-[^-]+-?/, '').replace(/^Projects-?/, '').replace(/-/g, '/') || '~';
+  // Strip Windows drive prefix (e.g. D-- or C--)
+  let s = p.replace(/^[A-Za-z]--/, '');
+  // Iteratively strip known parent directory segments
+  const known = /^(?:Users|home|user)-[^-]+-|^(?:GitHub|GitLab|git|Projects|projects|workspace|Workspace|Desktop|Documents|source|src|dev|Dev|code|Code|repos|Repos)-/;
+  let prev;
+  do { prev = s; s = s.replace(known, ''); } while (s !== prev && s.length > 0);
+  return s || p;
+}
+function projectFull(p) {
+  // Show the raw encoded name with Windows drive restored for readability
+  return p.replace(/^([A-Za-z])--/, '$1:\\');
 }
 function escapeHtml(s) {
   const d = document.createElement('div'); d.textContent = s; return d.innerHTML;
@@ -666,14 +785,44 @@ function formatDate(d) {
 }
 
 async function fetchData() {
-  const res = await fetch('/api/data');
-  DATA = await res.json();
-  render();
+  try {
+    const res = await fetch('/api/data');
+    const json = await res.json();
+    if (!res.ok || json.error) {
+      showError(json.error || `Server returned ${res.status}`);
+      return;
+    }
+    if (!json.totals || !json.sessions) {
+      showError('No session data found. Make sure you have used Claude Code at least once.');
+      return;
+    }
+    DATA = json;
+    render();
+  } catch (err) {
+    showError('Failed to load data: ' + err.message);
+  }
+}
+function showError(msg) {
+  document.getElementById('loading').style.display = 'none';
+  document.getElementById('app').style.display = 'none';
+  let el = document.getElementById('error-display');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'error-display';
+    el.style.cssText = 'max-width:600px;margin:80px auto;padding:32px;text-align:center;font-family:inherit;';
+    document.body.appendChild(el);
+  }
+  el.innerHTML = '<div style="font-size:48px;margin-bottom:16px">&#9888;&#65039;</div>' +
+    '<h2 style="margin:0 0 12px;color:#1a1a2e">Something went wrong</h2>' +
+    '<p style="color:#64748b;margin:0 0 20px;line-height:1.6">' + msg.replace(/</g, '&lt;') + '</p>' +
+    '<button onclick="location.reload()" style="padding:8px 20px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:14px">Retry</button>';
 }
 async function refreshData() {
   document.getElementById('loading').style.display = 'flex';
   document.getElementById('app').style.display = 'none';
-  await fetch('/api/refresh');
+  const errEl = document.getElementById('error-display');
+  if (errEl) errEl.remove();
+  try { await fetch('/api/refresh'); } catch {}
   await fetchData();
 }
 
@@ -684,6 +833,7 @@ function render() {
   renderInsights();
   renderDailyChart();
   renderModelChart();
+  renderProjectBreakdown();
   renderTopPrompts();
   renderSessions();
 }
@@ -694,15 +844,18 @@ function renderStats() {
   const range = t.dateRange ? `${formatDate(t.dateRange.from)} - ${formatDate(t.dateRange.to)}` : '';
   document.getElementById('dateRange').textContent = range;
 
+  const cacheTotal = (t.totalCacheCreationTokens || 0) + (t.totalCacheReadTokens || 0);
+  const avgTokensPerMsg = t.totalQueries > 0 ? Math.round(t.totalTokens / t.totalQueries) : 0;
+
   const cards = [
-    { label: 'Total Usage', value: fmt(t.totalTokens), sub: `${fmt(t.totalInputTokens)} read by Claude + ${fmt(t.totalOutputTokens)} written back`,
-      tip: 'The total number of tokens used across all your conversations. This includes everything Claude reads (your messages, conversation history, files) plus everything Claude writes back.' },
+    { label: 'Total Usage', value: fmt(t.totalTokens), sub: `${fmt(t.totalInputTokens)} input + ${fmt(cacheTotal)} cached + ${fmt(t.totalOutputTokens)} output`,
+      tip: 'The total number of tokens used across all your conversations. Input = fresh context sent at full price. Cached = context reused from previous turns at 10x lower cost. Output = what Claude wrote back.' },
     { label: 'Conversations', value: fmtFull(t.totalSessions), sub: `Each one used ~${fmt(t.avgTokensPerSession)} tokens on average`,
       tip: 'Each time you start Claude Code and begin chatting, that counts as one conversation. A new conversation starts fresh with no prior context.' },
-    { label: 'Messages Sent', value: fmtFull(t.totalQueries), sub: `Each message cost ~${fmt(t.avgTokensPerQuery)} tokens on average`,
+    { label: 'Messages Sent', value: fmtFull(t.totalQueries), sub: `Each message used ~${fmt(avgTokensPerMsg)} tokens on average`,
       tip: 'Every time you hit Enter and send something to Claude, that is one message. This includes follow-up tool calls Claude makes automatically behind the scenes.' },
-    { label: 'Claude Wrote', value: fmt(t.totalOutputTokens), sub: `Only ${((t.totalOutputTokens / Math.max(t.totalTokens, 1)) * 100).toFixed(1)}% of total -- most usage is from re-reading context`,
-      tip: 'The tokens Claude spent writing responses, code, and explanations. This is usually a tiny fraction of total usage because most tokens go toward re-reading your conversation history.' },
+    { label: 'Cache Hit Rate', value: `${((t.cacheHitRate || 0) * 100).toFixed(0)}%`, sub: `${fmt(t.totalCacheReadTokens || 0)} tokens served from cache`,
+      tip: 'The percentage of input tokens that were served from cache instead of being processed fresh. Higher is better -- cached tokens are 10x cheaper and help you stay under rate limits.' },
   ];
 
   document.getElementById('statsRow').innerHTML = cards.map((c, i) => `
@@ -740,7 +893,7 @@ function renderInsights() {
   }).join('');
 }
 
-// Daily chart
+// Daily chart -- 3 color stacked bars
 function renderDailyChart() {
   const canvas = document.getElementById('dailyChart');
   const ctx = canvas.getContext('2d');
@@ -773,9 +926,11 @@ function renderDailyChart() {
     ctx.beginPath(); ctx.moveTo(startX, y); ctx.lineTo(w, y); ctx.stroke();
   }
 
-  // Bars with gradient
+  // Gradients
   const inGrad = ctx.createLinearGradient(0, chartH + 8, 0, 0);
   inGrad.addColorStop(0, '#818CF8'); inGrad.addColorStop(1, '#6366F1');
+  const cacheGrad = ctx.createLinearGradient(0, chartH + 8, 0, 0);
+  cacheGrad.addColorStop(0, '#FBBF24'); cacheGrad.addColorStop(1, '#F59E0B');
   const outGrad = ctx.createLinearGradient(0, chartH + 8, 0, 0);
   outGrad.addColorStop(0, '#2DD4BF'); outGrad.addColorStop(1, '#14B8A6');
 
@@ -784,16 +939,25 @@ function renderDailyChart() {
     const baseY = chartH + 8;
     const r = Math.min(4, barW / 2);
 
+    // Bottom: output (teal)
     const outH = (d.outputTokens / maxTotal) * chartH;
     if (outH > 0) {
       ctx.fillStyle = outGrad;
       ctx.beginPath(); roundedRect(ctx, x, baseY - outH, barW, outH, r); ctx.fill();
     }
 
-    const inH = (d.inputTokens / maxTotal) * chartH;
-    if (inH > 0) {
+    // Middle: cache reads (amber)
+    const cacheH = ((d.cacheReadTokens || 0) / maxTotal) * chartH;
+    if (cacheH > 0) {
+      ctx.fillStyle = cacheGrad;
+      ctx.beginPath(); roundedRect(ctx, x, baseY - outH - cacheH, barW, cacheH, 0); ctx.fill();
+    }
+
+    // Top: input + cache creation (indigo)
+    const freshH = ((d.inputTokens + (d.cacheCreationTokens || 0)) / maxTotal) * chartH;
+    if (freshH > 0) {
       ctx.fillStyle = inGrad;
-      ctx.beginPath(); roundedRect(ctx, x, baseY - outH - inH, barW, inH, r); ctx.fill();
+      ctx.beginPath(); roundedRect(ctx, x, baseY - outH - cacheH - freshH, barW, freshH, r); ctx.fill();
     }
   });
 
@@ -883,6 +1047,95 @@ function renderModelChart() {
   }).join('');
 }
 
+// Project accordion
+function toggleProjectDrawer(i) {
+  const row = document.getElementById('proj-row-' + i);
+  const drawer = document.getElementById('proj-drawer-' + i);
+  const isOpen = drawer.classList.contains('open');
+  row.classList.toggle('expanded', !isOpen);
+  drawer.classList.toggle('open', !isOpen);
+}
+
+function buildDrawerContent(p) {
+  if (!p.topPrompts || p.topPrompts.length === 0) {
+    return '<div class="drawer-empty">No prompt data available</div>';
+  }
+  const items = p.topPrompts.map((pr, i) => {
+    const toolEntries = Object.entries(pr.toolCounts || {}).sort((a, b) => b[1] - a[1]);
+    const chips = toolEntries.map(([name, count]) =>
+      '<span class="tool-chip">' + count + '\u00d7\u00a0' + escapeHtml(name) + '</span>'
+    ).join('') + (pr.continuations > 0 ? '<span class="tool-chip">+' + pr.continuations + ' turns</span>' : '');
+    const badge = '<span class="model-badge ' + modelClass(pr.model) + '"><span class="model-dot"></span>' + modelShort(pr.model) + '</span>';
+    const tokVal = fmt(pr.totalTokens);
+    const tokSub = fmt(pr.inputTokens) + ' / ' + fmt(pr.outputTokens);
+    const promptText = escapeHtml(pr.prompt);
+    const sid = pr.sessionId;
+    return [
+      '<div class="drawer-prompt-row" onclick="openDrilldown(\'' + sid + '\')">',
+      '<div class="drawer-rank">' + (i + 1) + '</div>',
+      '<div>',
+      '<div class="drawer-prompt-text">' + promptText + '</div>',
+      '<div class="drawer-prompt-meta">' + badge + chips + '</div>',
+      '</div>',
+      '<div class="drawer-tokens"><div class="value">' + tokVal + '</div><div class="sub">' + tokSub + '</div></div>',
+      '</div>',
+    ].join('');
+  });
+  return '<div class="drawer-prompt-list">' + items.join('') + '</div>';
+}
+
+// Project breakdown
+function renderProjectBreakdown() {
+  const projects = DATA.projectBreakdown;
+  if (!projects || !projects.length) return;
+
+  const countEl = document.getElementById('projectsCount');
+  countEl.textContent = projects.length + ' project' + (projects.length === 1 ? '' : 's');
+
+  const maxTokens = projects[0].totalTokens;
+  const chevron = '<svg class="proj-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6l4 4-4 4"/></svg>';
+  const rows = [];
+  projects.forEach((p, i) => {
+    const barPct = (p.totalTokens / maxTokens * 100).toFixed(1);
+    const ariaLabel = p.modelBreakdown.map(m => modelShort(m.model) + ': ' + fmt(m.inputTokens) + ' input, ' + fmt(m.outputTokens) + ' output').join(', ');
+    const pillItems = p.modelBreakdown.map(m =>
+      '<li><span class="model-badge ' + modelClass(m.model) +
+      '" aria-label="' + modelShort(m.model) + ': ' + fmt(m.inputTokens) + ' input, ' + fmt(m.outputTokens) + ' output">' +
+      '<span class="model-dot" aria-hidden="true"></span>' +
+      modelShort(m.model) +
+      ' <span class="token-detail"><span aria-hidden="true">\u2193</span><span class="sr-only">in </span>' + fmt(m.inputTokens) + '</span>' +
+      ' <span class="token-detail"><span aria-hidden="true">\u2191</span><span class="sr-only">out </span>' + fmt(m.outputTokens) + '</span>' +
+      '</span></li>'
+    ).join('');
+    const summaryRow = [
+      '<tr class="proj-row" id="proj-row-' + i + '" onclick="toggleProjectDrawer(' + i + ')">',
+      '<td style="padding:10px 16px">',
+      '<div style="display:flex;align-items:center;gap:6px">',
+      chevron,
+      '<div>',
+      '<div class="proj-name" title="' + projectFull(p.project) + '">' + escapeHtml(projectShort(p.project)) + '</div>',
+      '<ul class="model-pills" aria-label="Models used: ' + ariaLabel + '">' + pillItems + '</ul>',
+      '</div></div></td>',
+      '<td class="token-num" style="font-weight:700;vertical-align:top;padding-top:12px">',
+      '<div style="display:flex;align-items:center;gap:8px;justify-content:flex-end">',
+      '<div style="flex:1;max-width:60px;height:3px;background:var(--bg);border-radius:4px;overflow:hidden">',
+      '<div style="width:' + barPct + '%;height:100%;background:var(--indigo);border-radius:4px"></div>',
+      '</div><div><div>' + fmt(p.totalTokens) + '</div><div style="font-size:11px;font-weight:500;color:var(--text-tertiary);margin-top:1px">' + fmt(p.inputTokens) + ' in\u00a0\u00b7\u00a0' + fmt(p.outputTokens) + ' out</div></div></div></td>',
+      '<td class="token-num" style="vertical-align:top;padding-top:12px">' + p.sessionCount + '</td>',
+      '<td class="token-num" style="vertical-align:top;padding-top:12px">' + p.queryCount + '</td>',
+      '</tr>',
+    ].join('');
+    const drawerRow = [
+      '<tr class="proj-drawer" id="proj-drawer-' + i + '">',
+      '<td colspan="4"><div class="proj-drawer-inner"><div class="proj-drawer-content">',
+      buildDrawerContent(p),
+      '</div></div></td></tr>',
+    ].join('');
+    rows.push(summaryRow, drawerRow);
+  });
+  document.getElementById('projectsBody').innerHTML = rows.join('');
+}
+
 // Top prompts
 function renderTopPrompts() {
   const prompts = DATA.topPrompts;
@@ -890,20 +1143,26 @@ function renderTopPrompts() {
   const maxTokens = prompts[0].totalTokens;
 
   document.getElementById('topPromptsList').innerHTML = prompts.map((p, i) => {
-    const inPct = (p.inputTokens / p.totalTokens) * 100;
+    const freshIn = p.inputTokens + (p.cacheCreationTokens || 0);
+    const cached = p.cacheReadTokens || 0;
+    const total = freshIn + cached + p.outputTokens;
+    const freshPct = total > 0 ? (freshIn / total) * 100 : 0;
+    const cachePct = total > 0 ? (cached / total) * 100 : 0;
+    const outPct = total > 0 ? (p.outputTokens / total) * 100 : 0;
     return `<div class="prompt-row" onclick="openDrilldown('${p.sessionId}')">
       <div class="prompt-rank">${i + 1}</div>
       <div>
         <div class="prompt-text">${escapeHtml(p.prompt)}</div>
         <div class="prompt-meta">${formatDate(p.date)} &middot; ${modelShort(p.model)}</div>
         <div class="token-bar-wrap" style="width:${Math.max(10, (p.totalTokens / maxTokens) * 100)}%">
-          <div class="token-bar-in" style="width:${inPct}%"></div>
-          <div class="token-bar-out" style="width:${100 - inPct}%"></div>
+          <div class="token-bar-in" style="width:${freshPct}%"></div>
+          <div class="token-bar-cache" style="width:${cachePct}%"></div>
+          <div class="token-bar-out" style="width:${outPct}%"></div>
         </div>
       </div>
       <div class="prompt-tokens">
-        <div class="value">${fmt(p.totalTokens)}</div>
-        <div class="sub">${fmt(p.inputTokens)} read &middot; ${fmt(p.outputTokens)} written</div>
+        <div style="font-family:var(--mono);font-size:14px;font-weight:700;color:var(--indigo)">${fmt(p.totalTokens)}</div>
+        <div class="sub">${fmt(p.inputTokens)} in / ${fmt(cached)} cached / ${fmt(p.outputTokens)} out</div>
       </div>
     </div>`;
   }).join('');
@@ -975,18 +1234,30 @@ function openDrilldown(sessionId) {
 
   document.getElementById('drilldownTitle').textContent = session.firstPrompt.substring(0, 140);
   document.getElementById('drilldownMeta').textContent =
-    `${formatDate(session.date)} \u00B7 ${modelShort(session.model)} \u00B7 ${session.queryCount} messages \u00B7 ${fmt(session.totalTokens)} tokens used`;
+    `${formatDate(session.date)} \u00B7 ${modelShort(session.model)} \u00B7 ${session.queryCount} messages \u00B7 ${fmt(session.totalTokens)} tokens`;
 
   const grouped = [];
   let current = null;
   for (const q of session.queries) {
     if (q.userPrompt) {
       if (current) grouped.push(current);
-      current = { prompt: q.userPrompt, inputTokens: q.inputTokens, outputTokens: q.outputTokens, totalTokens: q.totalTokens, continuations: 0 };
+      current = {
+        prompt: q.userPrompt,
+        inputTokens: q.inputTokens,
+        outputTokens: q.outputTokens,
+        cacheCreationTokens: q.cacheCreationTokens || 0,
+        cacheReadTokens: q.cacheReadTokens || 0,
+        totalTokens: q.totalTokens,
+        cost: q.cost || 0,
+        continuations: 0,
+      };
     } else if (current) {
       current.inputTokens += q.inputTokens;
       current.outputTokens += q.outputTokens;
+      current.cacheCreationTokens += (q.cacheCreationTokens || 0);
+      current.cacheReadTokens += (q.cacheReadTokens || 0);
       current.totalTokens += q.totalTokens;
+      current.cost += (q.cost || 0);
       current.continuations++;
     }
   }
@@ -994,12 +1265,13 @@ function openDrilldown(sessionId) {
 
   document.getElementById('queryList').innerHTML = grouped.map((q, i) => {
     const cont = q.continuations > 0 ? ` + ${q.continuations} tool uses` : '';
+    const cached = q.cacheReadTokens || 0;
     return `<div class="query-item">
       <div class="query-num">${i + 1}</div>
       <div class="query-prompt">${escapeHtml(q.prompt.substring(0, 500))}</div>
       <div class="query-tokens-col">
         <div class="total">${fmt(q.totalTokens)}</div>
-        <div class="detail">${fmt(q.inputTokens)} read / ${fmt(q.outputTokens)} written${cont}</div>
+        <div class="detail">${fmt(q.inputTokens)} in / ${fmt(cached)} cached / ${fmt(q.outputTokens)} out${cont}</div>
       </div>
     </div>`;
   }).join('');

package/src/server.js

@@ -1,7 +1,5 @@
 const express = require('express');
 const path = require('path');
-const { parseAllSessions } = require('./parser');
-
 function createServer() {
   const app = express();
 
@@ -11,7 +9,7 @@ function createServer() {
   app.get('/api/data', async (req, res) => {
     try {
       if (!cachedData) {
-        cachedData = await parseAllSessions();
+        cachedData = await require('./parser').parseAllSessions();
       }
       res.json(cachedData);
     } catch (err) {
@@ -21,7 +19,8 @@ function createServer() {
 
   app.get('/api/refresh', async (req, res) => {
     try {
-      cachedData = await parseAllSessions();
+      delete require.cache[require.resolve('./parser')];
+      cachedData = await require('./parser').parseAllSessions();
       res.json({ ok: true, sessions: cachedData.sessions.length });
     } catch (err) {
       res.status(500).json({ error: err.message });