ai-usage-analyzer 0.5.0 → 0.5.1

package/README.md

@@ -1,7 +1,7 @@
 # ai-usage-analyzer
 
 A local web dashboard for AI coding agent token consumption. Auto-detects
-**Claude Code**, **Codex**, **OpenCode**, **MimoCode**, **GitHub Copilot**,
+**Claude Code**, **Codex**, **OpenCode**,
 **Antigravity**, and **Gemini CLI** data directories.
 
 The default command starts a local server and opens the dashboard in your browser.
@@ -39,15 +39,13 @@ ai-usage-analyzer --json --quota    # include a live quota snapshot
 | Claude Code    | `~/.claude/projects`                | yes (estimated cost) |
 | Codex          | `~/.codex/sessions/` and `archived_sessions/` | yes (estimated cost) |
 | OpenCode       | `~/.local/share/opencode/opencode.db` | yes (+cost) |
-| MimoCode       | `~/.local/share/mimocode/mimocode.db` | yes (+cost) |
-| GitHub Copilot | `~/.copilot/session-state/`        | presence only |
 | Antigravity    | `~/Library/Application Support/Antigravity` | presence only |
 | Gemini CLI     | `~/.gemini/antigravity/conversations` | presence only |
 
 ## Path overrides
 
 Override any tool's base path with an env var (`CLAUDE_HOME`, `CODEX_HOME`,
-`OPENCODE_HOME`, `MIMOCODE_HOME`, `COPILOT_HOME`, `ANTIGRAVITY_HOME`,
+`OPENCODE_HOME`, `ANTIGRAVITY_HOME`,
 `GEMINI_HOME`), or pass all at once via JSON:
 
 ```bash
@@ -60,6 +58,12 @@ For tools that record token data, the analyzer shows input, output, cache
 read, cache write, and reasoning tokens. Cache hits are cheap; reasoning is
 the extended-thinking/chain-of-thought cost.
 
+Average daily tokens divides total tokens by calendar days, including days
+without usage. The dashboard uses the selected date range in your local time.
+All time uses the first through last recorded day. Terminal, Markdown, and JSON
+reports use the first through last recorded day in UTC; JSON exposes the value
+as `summary.avgDailyTokens`.
+
 ## Quotas
 
 Reports stay offline unless `--quota` is supplied. This requests Claude and Codex
@@ -71,8 +75,8 @@ change. Codex credentials may be refreshed and written back to `auth.json`.
 Claude and Codex costs use bundled API rates per model and are estimates,
 not subscription charges or invoices. `~` marks an estimate, `*` marks a
 partial total, and `n/a` means unavailable. Unknown models are listed rather
-than assigned a fallback price. OpenCode and MimoCode costs are read from
-their local databases. Pricing uses standard public API rates and the
+than assigned a fallback price. OpenCode costs are read from
+its local database. Pricing uses standard public API rates and the
 five-minute Claude cache-write rate; regional, batch, and other modifiers may
 differ. Rates are versioned with the app and can become outdated.
 

package/bin/ai-usage.js

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 // AI Usage Analyzer - TUI for local AI coding agent token consumption
-// Auto-detects: Claude Code, Codex, OpenCode, MimoCode, Copilot, Antigravity, Gemini
 
 import { overall } from "../src/aggregate.js";
 import { detectAll } from "../src/detectors.js";
@@ -66,16 +65,14 @@ Examples:
   ai-usage --static --top 20     # show top 20 sessions
 
 Environment overrides (per-tool data path):
-  CLAUDE_HOME, CODEX_HOME, OPENCODE_HOME, MIMOCODE_HOME,
-  COPILOT_HOME, ANTIGRAVITY_HOME, GEMINI_HOME,
+  CLAUDE_HOME, CODEX_HOME, OPENCODE_HOME,
+  ANTIGRAVITY_HOME, GEMINI_HOME,
   AI_USAGE_PATHS_JSON='{"codex":"/custom/path",...}'
 
 Supported tools:
   • Claude Code    — ~/.claude/projects  (tokens from per-message usage)
   • Codex          — ~/.codex/sessions      (tokens from token_count events)
   • OpenCode       — ~/.local/share/opencode/opencode.db  (tokens + cost)
-  • MimoCode       — ~/.local/share/mimocode/mimocode.db  (tokens + cost)
-  • GitHub Copilot — ~/.copilot/session-state  (presence only)
   • Antigravity    — ~/Library/Application Support/Antigravity  (presence only)
   • Gemini CLI     — ~/.gemini/antigravity/conversations  (presence only)
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-usage-analyzer",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Local web dashboard for AI coding agent token usage.",
   "type": "module",
   "packageManager": "pnpm@10.33.0",
@@ -28,8 +28,6 @@
     "claude-code",
     "codex",
     "opencode",
-    "mimocode",
-    "copilot",
     "antigravity",
     "gemini",
     "cli",

package/src/aggregate.js

@@ -128,8 +128,23 @@ export function perToolPerMonth(records) {
   return out.sort((a, b) => b.tokensTotal - a.tokensTotal);
 }
 
-export function overall(records) {
-  return summarize(records);
+export function overall(records, dayCount) {
+  const totals = summarize(records);
+  if (dayCount === undefined) {
+    let first = Infinity;
+    let last = -Infinity;
+    for (const record of records) {
+      if (!Number.isFinite(record.ts) || !Number.isFinite(new Date(record.ts).getTime())) continue;
+      const day = Math.floor(record.ts / 86400000);
+      first = Math.min(first, day);
+      last = Math.max(last, day);
+    }
+    dayCount = last - first + 1;
+  }
+  return {
+    ...totals,
+    avgDailyTokens: Number.isFinite(dayCount) && dayCount > 0 ? totals.tokensTotal / dayCount : 0,
+  };
 }
 
 export function topSessions(records, n = 5) {

package/src/loaders.js

@@ -2,7 +2,6 @@
 //
 // Unified record shape:
 //   {
-//     tool:        'opencode' | 'codex' | 'mimocode' | string,
 //     sessionId:   string,
 //     project:     string,          // working directory or '(unknown)'
 //     title:       string,
@@ -83,7 +82,6 @@ function compactHome(p) {
 }
 
 // ---------------------------------------------------------------------------
-// SQLite loader (OpenCode + MimoCode share schema)
 // ---------------------------------------------------------------------------
 
 function loadOpencodeStyleSqlite(dbPath, toolKey) {
@@ -94,7 +92,6 @@ function loadOpencodeStyleSqlite(dbPath, toolKey) {
     return { records: [], error: `cannot open ${dbPath}: ${e.message}` };
   }
 
-  // Introspect session table for token columns (MimoCode schema is a subset)
   const cols = db.prepare(`PRAGMA table_info(session)`).all();
   const colSet = new Set(cols.map((c) => c.name));
   const hasTokens =
@@ -464,7 +461,7 @@ export async function loadAll(detections) {
   const tasks = detections
     .filter((d) => d.status === "present")
     .map((d) => {
-      if (d.key === "opencode" || d.key === "mimocode") {
+      if (d.key === "opencode") {
         return Promise.resolve({
           d,
           r: loadOpencodeStyleSqlite(d.path, d.key),

package/src/markdown.js

@@ -132,6 +132,7 @@ export function renderMarkdown({
     out.push(`**Range**: ${dateRange[0] ?? "—"} → ${dateRange[1] ?? "—"}  `);
     out.push(`**Sessions**: ${fmtInt(records.length)}  `);
     out.push(`**Total tokens**: ${fmtCompact(tot.tokensTotal)}  `);
+    out.push(`**Average daily tokens**: ${fmtCompact(tot.avgDailyTokens)}  `);
     out.push(`**Cost**: ${fmtCost(tot.cost, tot.costStatus)}  `);
     if (tot.unknownModels.length) out.push(`**Unpriced models**: ${tot.unknownModels.map(mdEscape).join(", ")}  `);
   } else {

package/src/render.js

@@ -353,6 +353,7 @@ export function renderOverview(records, detections) {
 
   const body =
     pt.toString() +
+    "\n\n" + `Average daily tokens: ${fmtCompact(t.avgDailyTokens)}` +
     "\n\n" +
     chalk.bold.underline("Token Breakdown") +
     "\n" +
@@ -907,9 +908,9 @@ export function renderNotes(detections, errors) {
   lines.push("");
   lines.push(chalk.bold.underline("Env overrides"));
   lines.push(
-    "  $CLAUDE_HOME    $CODEX_HOME    $OPENCODE_HOME    $MIMOCODE_HOME",
+    "  $CLAUDE_HOME    $CODEX_HOME    $OPENCODE_HOME",
   );
-  lines.push("  $COPILOT_HOME   $ANTIGRAVITY_HOME    $GEMINI_HOME");
+  lines.push("  $ANTIGRAVITY_HOME    $GEMINI_HOME");
   lines.push(
     "  $AI_USAGE_PATHS_JSON = " + chalk.italic('\'{"codex":"/custom/path"}\''),
   );

package/src/server.js

@@ -7,6 +7,7 @@ import { loadAll } from './loaders.js';
 const assets = new Map([
   ['/', ['../web/index.html', 'text/html; charset=utf-8']],
   ['/app.js', ['../web/app.js', 'text/javascript; charset=utf-8']],
+  ['/dates.js', ['../web/dates.js', 'text/javascript; charset=utf-8']],
   ['/aggregate.js', ['./aggregate.js', 'text/javascript; charset=utf-8']],
   ['/style.css', ['../web/style.css', 'text/css; charset=utf-8']],
   ['/favicon.svg', ['../web/favicon.svg', 'image/svg+xml']],

package/src/tools.js

@@ -141,50 +141,6 @@ export const TOOLS = [
     description: '~/.local/share/opencode/opencode.db  (tokens + cost)',
   },
 
-  // -----------------------------------------------------------------------
-  // MimoCode (same schema as OpenCode)
-  // -----------------------------------------------------------------------
-  {
-    key: 'mimocode',
-    name: 'MimoCode',
-    label: 'mimocode',
-    color: '#f1fa8c',     // yellow
-    barChar: '░',
-    kind: 'sqlite',
-    envVar: 'MIMOCODE_HOME',
-    candidatePaths: () => [
-      env.MIMOCODE_HOME
-        ? join(env.MIMOCODE_HOME, 'mimocode.db')
-        : join(HOME, '.local', 'share', 'mimocode', 'mimocode.db'),
-    ],
-    count: countSqliteRows,
-    hasTokens: true,
-    description: '~/.local/share/mimocode/mimocode.db  (tokens + cost)',
-  },
-
-  // -----------------------------------------------------------------------
-  // GitHub Copilot CLI (presence only)
-  // -----------------------------------------------------------------------
-  {
-    key: 'copilot',
-    name: 'GitHub Copilot',
-    label: 'copilot',
-    color: '#3b82f6',     // deep blue
-    barChar: '·',
-    kind: 'jsonl-events',
-    envVar: 'COPILOT_HOME',
-    candidatePaths: () => {
-      const base = env.COPILOT_HOME || join(HOME, '.copilot');
-      return [
-        join(base, 'session-state'),
-        base,
-      ];
-    },
-    count: countJsonlRecursive,
-    hasTokens: false,
-    description: '~/.copilot/session-state/*/events.jsonl  (no token data)',
-  },
-
   // -----------------------------------------------------------------------
   // Antigravity (VS Code variant) - mostly cache; no token data
   // -----------------------------------------------------------------------

package/web/app.js

@@ -1,4 +1,5 @@
 import { overall, perProject, perTool, perMonth, topSessions } from '/aggregate.js';
+import { dayNumber, periodBounds as boundsForPeriod, dateValue, parseDate, calendarDays } from '/dates.js';
 
 const $ = id => document.getElementById(id);
 const root = document.documentElement;
@@ -26,6 +27,9 @@ const brandIcons = new Set(['claude', 'codex', 'opencode']);
 const state = { data: null, page: 0, project: null, period: { key: 'all' }, tool: 'all', sort: 'tokens', allProjects: false, totalTarget: 0, previousTotal: 0, tapeKey: '', tapeFresh: false, tape: null };
 const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
 let animation;
+let dateDraft;
+let calendarMonth;
+let pickingEnd = false;
 
 function readTheme() {
   try {
@@ -169,24 +173,73 @@ function dated(ts, formatter = dayDate) {
   return Number.isFinite(ts) && !Number.isNaN(new Date(ts).getTime()) ? formatter.format(ts) : 'Unknown date';
 }
 
-function dayNumber(ts) {
-  const date = new Date(ts);
-  return Math.floor(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86400000);
-}
-
 function dayLabel(day, formatter = utcDayLong) {
   return formatter.format(day * 86400000);
 }
 
 function periodBounds() {
-  const { key, from, to } = state.period;
+  return boundsForPeriod(state.period);
+}
+
+function periodLabel(period) {
+  if (period.key !== 'custom') return periodLabels[period.key];
+  return period.from === period.to ? dayLabel(period.from, utcDayShort) : `${dayLabel(period.from)} to ${dayLabel(period.to)}`;
+}
+
+function renderDatePicker(focusDay) {
+  const bounds = boundsForPeriod(dateDraft);
+  const [from, to] = bounds || [];
+  const valid = !bounds || (from != null && to != null && from <= to);
+  const month = new Date(calendarMonth * 86400000);
   const today = dayNumber(Date.now());
-  if (key === 'all') return null;
-  if (key === 'custom') return [from, to];
-  if (key === 'today') return [today, today];
-  if (key === 'week') return [today - (new Date().getDay() + 6) % 7, today];
-  if (key === 'year') return [dayNumber(new Date(new Date().getFullYear(), 0, 1).getTime()), today];
-  return [today - Number(key) + 1, today];
+  $('calendar-month').textContent = new Intl.DateTimeFormat('en', { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(month);
+  for (const button of document.querySelectorAll('[data-period]')) button.setAttribute('aria-pressed', String(dateDraft.key === button.dataset.period));
+  const days = calendarDays(calendarMonth);
+  const tabDay = focusDay ?? (days.includes(from) ? from : days.includes(today) ? today : calendarMonth);
+  const container = clear('calendar-days');
+  for (const day of days) {
+    const date = new Date(day * 86400000);
+    const button = el('button', 'calendar-day', date.getUTCDate());
+    button.type = 'button';
+    button.dataset.day = day;
+    button.tabIndex = day === tabDay ? 0 : -1;
+    button.setAttribute('aria-label', dayLabel(day));
+    button.setAttribute('aria-pressed', String(valid && from != null && day >= from && day <= to));
+    if (day === today) button.setAttribute('aria-current', 'date');
+    button.classList.toggle('outside-month', date.getUTCMonth() !== month.getUTCMonth());
+    button.classList.toggle('range-start', day === from);
+    button.classList.toggle('range-end', day === to);
+    container.append(button);
+  }
+  $('date-from').value = dateValue(from);
+  $('date-to').value = dateValue(to);
+  $('date-from').max = dateValue(to);
+  $('date-to').min = dateValue(from);
+  $('apply-date').disabled = !valid;
+  $('date-help').textContent = from != null && to != null && from > to
+    ? 'End date must be on or after the start date.'
+    : pickingEnd ? 'Now select an end date.' : 'Select a start date, then an end date. Dates use your local time.';
+  $('date-preview').textContent = valid ? periodLabel(dateDraft) : 'Choose a complete date range';
+  if (focusDay != null) container.querySelector(`[data-day="${focusDay}"]`)?.focus();
+}
+
+function openDatePicker() {
+  dateDraft = { ...state.period };
+  const day = periodBounds()?.[0] ?? dayNumber(Date.now());
+  const month = new Date(day * 86400000);
+  month.setUTCDate(1);
+  calendarMonth = month.getTime() / 86400000;
+  pickingEnd = false;
+  renderDatePicker();
+  $('date-dialog').showModal();
+  $('date-filter').setAttribute('aria-expanded', 'true');
+}
+
+function moveCalendarMonth(step) {
+  const date = new Date(calendarMonth * 86400000);
+  date.setUTCMonth(date.getUTCMonth() + step);
+  calendarMonth = date.getTime() / 86400000;
+  renderDatePicker();
 }
 
 function periodRecords() {
@@ -272,7 +325,11 @@ function insightText(totals) {
 }
 
 function renderSummary(records) {
-  const totals = overall(records);
+  const times = records.filter(validTs).map(record => record.ts);
+  const range = times.reduce((result, ts) => [Math.min(result[0], ts), Math.max(result[1], ts)], [Infinity, -Infinity]);
+  const bounds = periodBounds();
+  const dayCount = bounds ? bounds[1] - bounds[0] + 1 : times.length ? dayNumber(range[1]) - dayNumber(range[0]) + 1 : 0;
+  const totals = overall(records, dayCount);
   state.previousTotal = state.totalTarget;
   state.totalTarget = totals.tokensTotal;
   setTotal(totals.tokensTotal);
@@ -281,13 +338,12 @@ function renderSummary(records) {
   $('session-count').textContent = number.format(totals.n);
   $('project-count').textContent = number.format(new Set(records.map(record => record.project)).size);
   $('average').textContent = totals.n ? compact.format(totals.avg) : 'None';
+  $('daily-average').textContent = compact.format(totals.avgDailyTokens);
   $('cost').textContent = costLabel(totals);
   $('cost-detail').textContent = costDescription(totals.costStatus);
   const days = dailyTotals(records);
   const busiest = [...days].reduce((best, entry) => !best || entry[1] > best[1] ? entry : best, null);
   $('busiest-day').textContent = busiest ? `${dayLabel(busiest[0], utcDayShort)} · ${compact.format(busiest[1])}` : 'None';
-  const times = records.filter(validTs).map(record => record.ts);
-  const range = times.reduce((result, ts) => [Math.min(result[0], ts), Math.max(result[1], ts)], [Infinity, -Infinity]);
   $('range-label').textContent = times.length ? `${dated(range[0])} to ${dated(range[1])}` : '';
   renderComposition(totals);
 }
@@ -803,11 +859,7 @@ function buildToolFilter() {
 }
 
 function renderFilters(records) {
-  for (const button of document.querySelectorAll('[data-period]')) {
-    const key = button.dataset.period;
-    button.setAttribute('aria-pressed', String(state.period.key === key));
-    if (key === 'custom') button.hidden = state.period.key !== 'custom';
-  }
+  $('date-filter-label').textContent = periodLabel(state.period);
   for (const button of $('tool-filter').children) button.setAttribute('aria-pressed', String(button.dataset.tool === state.tool));
   $('scope').textContent = `${number.format(records.length)} ${records.length === 1 ? 'session' : 'sessions'} in view`;
 }
@@ -901,12 +953,67 @@ document.querySelector('.skip-link').addEventListener('click', event => {
 });
 for (const button of document.querySelectorAll('[data-period]')) {
   button.addEventListener('click', () => {
-    if (button.dataset.period === 'custom') return;
-    state.period = { key: button.dataset.period };
-    state.page = 0;
-    render();
+    const key = button.dataset.period;
+    const [from, to] = boundsForPeriod(dateDraft) || [dayNumber(Date.now()), dayNumber(Date.now())];
+    dateDraft = key === 'custom' ? { key, from, to } : { key };
+    pickingEnd = false;
+    if (key !== 'all') {
+      const month = new Date(boundsForPeriod(dateDraft)[0] * 86400000);
+      month.setUTCDate(1);
+      calendarMonth = month.getTime() / 86400000;
+    }
+    renderDatePicker();
   });
 }
+$('date-filter').addEventListener('click', openDatePicker);
+for (const id of ['close-date', 'cancel-date']) $(id).addEventListener('click', () => $('date-dialog').close());
+$('date-dialog').addEventListener('close', () => $('date-filter').setAttribute('aria-expanded', 'false'));
+$('date-dialog').addEventListener('click', event => {
+  if (event.target !== event.currentTarget) return;
+  const rect = event.currentTarget.getBoundingClientRect();
+  if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) event.currentTarget.close();
+});
+$('calendar-previous').addEventListener('click', () => moveCalendarMonth(-1));
+$('calendar-next').addEventListener('click', () => moveCalendarMonth(1));
+$('calendar-days').addEventListener('click', event => {
+  const button = event.target.closest('[data-day]');
+  if (!button) return;
+  const day = Number(button.dataset.day);
+  dateDraft = pickingEnd
+    ? { key: 'custom', from: Math.min(dateDraft.from, day), to: Math.max(dateDraft.from, day) }
+    : { key: 'custom', from: day, to: null };
+  pickingEnd = !pickingEnd;
+  renderDatePicker(day);
+});
+$('calendar-days').addEventListener('keydown', event => {
+  const button = event.target.closest('[data-day]');
+  const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[event.key];
+  if (!button || step == null) return;
+  event.preventDefault();
+  const day = Number(button.dataset.day) + step;
+  const month = new Date(day * 86400000);
+  month.setUTCDate(1);
+  calendarMonth = month.getTime() / 86400000;
+  renderDatePicker(day);
+});
+for (const id of ['date-from', 'date-to']) $(id).addEventListener('change', () => {
+  dateDraft = { key: 'custom', from: parseDate($('date-from').value), to: parseDate($('date-to').value) };
+  pickingEnd = false;
+  const day = dateDraft[id === 'date-from' ? 'from' : 'to'];
+  if (day != null) {
+    const month = new Date(day * 86400000);
+    month.setUTCDate(1);
+    calendarMonth = month.getTime() / 86400000;
+  }
+  renderDatePicker();
+});
+$('apply-date').addEventListener('click', () => {
+  if ($('apply-date').disabled) return;
+  state.period = { ...dateDraft };
+  state.page = 0;
+  render();
+  $('date-dialog').close();
+});
 $('tool-filter').addEventListener('click', event => {
   const button = event.target.closest('button');
   if (!button) return;

package/web/dates.js

@@ -0,0 +1,35 @@
+export function dayNumber(ts) {
+  const date = new Date(ts);
+  return Math.floor(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 86400000);
+}
+
+export function periodBounds(period, now = Date.now()) {
+  const { key, from, to } = period;
+  const today = dayNumber(now);
+  const date = new Date(now);
+  if (key === 'all') return null;
+  if (key === 'custom') return [from, to];
+  if (key === 'today') return [today, today];
+  if (key === 'week') return [today - (date.getDay() + 6) % 7, today];
+  if (key === 'year') return [dayNumber(new Date(date.getFullYear(), 0, 1).getTime()), today];
+  return [today - Number(key) + 1, today];
+}
+
+export function dateValue(day) {
+  return day == null ? '' : new Date(day * 86400000).toISOString().slice(0, 10);
+}
+
+export function parseDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+  const ts = Date.parse(`${value}T00:00:00Z`);
+  if (!Number.isFinite(ts)) return null;
+  const day = ts / 86400000;
+  return dateValue(day) === value ? day : null;
+}
+
+export function calendarDays(month) {
+  const date = new Date(month * 86400000);
+  date.setUTCDate(1);
+  const first = date.getTime() / 86400000 - (date.getUTCDay() + 6) % 7;
+  return Array.from({ length: 42 }, (_, index) => first + index);
+}

package/web/index.html

@@ -42,15 +42,11 @@
 
     <div id="dashboard" hidden>
       <div id="filters" class="filters">
-        <div class="filter-group" role="group" aria-label="Period">
-          <button type="button" data-period="today" aria-pressed="false">Today</button>
-          <button type="button" data-period="week" aria-pressed="false">This week</button>
-          <button type="button" data-period="30" aria-pressed="false">30 days</button>
-          <button type="button" data-period="90" aria-pressed="false">90 days</button>
-          <button type="button" data-period="year" aria-pressed="false">This year</button>
-          <button type="button" data-period="all" aria-pressed="true">All time</button>
-          <button type="button" data-period="custom" aria-pressed="false" hidden>Custom range</button>
-        </div>
+        <button id="date-filter" class="button quiet date-trigger" type="button" aria-haspopup="dialog" aria-controls="date-dialog" aria-expanded="false">
+          <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="4.5" width="14" height="12" rx="1"/><path d="M6.5 3v3M13.5 3v3M3 8.5h14"/></svg>
+          <span id="date-filter-label">All time</span>
+          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m6 8 4 4 4-4"/></svg>
+        </button>
         <div id="tool-filter" class="filter-group tool-filter" role="group" aria-label="Tool"></div>
         <p id="scope" class="scope"></p>
       </div>
@@ -67,6 +63,7 @@
             <div><dt>Sessions</dt><dd id="session-count"></dd></div>
             <div><dt>Projects</dt><dd id="project-count"></dd></div>
             <div><dt>Average session</dt><dd id="average"></dd></div>
+            <div title="Total tokens divided by calendar days in the selected range, including days without usage. All time uses the first through last recorded day."><dt>Average daily tokens</dt><dd id="daily-average"></dd></div>
             <div><dt>Busiest day</dt><dd id="busiest-day"></dd></div>
             <div class="slip-cost"><dt>API cost</dt><dd id="cost"></dd><p id="cost-detail"></p></div>
           </dl>
@@ -183,6 +180,43 @@
     <p id="updated"></p>
   </footer>
 
+  <dialog id="date-dialog" class="date-dialog" aria-labelledby="date-title" aria-describedby="date-help">
+    <div class="date-heading">
+      <h2 id="date-title">Date range</h2>
+      <button id="close-date" class="button quiet" type="button" aria-label="Close date picker">Close</button>
+    </div>
+    <div class="date-body">
+      <div class="date-presets" role="group" aria-label="Date presets">
+        <button type="button" data-period="today" aria-pressed="false">Today</button>
+        <button type="button" data-period="week" aria-pressed="false">This week</button>
+        <button type="button" data-period="30" aria-pressed="false">Last 30 days</button>
+        <button type="button" data-period="90" aria-pressed="false">Last 90 days</button>
+        <button type="button" data-period="year" aria-pressed="false">This year</button>
+        <button type="button" data-period="all" aria-pressed="true">All time</button>
+        <button type="button" data-period="custom" aria-pressed="false">Custom range</button>
+      </div>
+      <div class="date-calendar">
+        <div class="calendar-heading">
+          <button id="calendar-previous" class="button quiet" type="button" aria-label="Previous month">‹</button>
+          <h3 id="calendar-month" aria-live="polite"></h3>
+          <button id="calendar-next" class="button quiet" type="button" aria-label="Next month">›</button>
+        </div>
+        <div class="calendar-weekdays" aria-hidden="true"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
+        <div id="calendar-days" class="calendar-days" role="group" aria-labelledby="calendar-month"></div>
+        <p id="date-help" class="date-help" aria-live="polite">Select a start date, then an end date.</p>
+        <div class="date-fields">
+          <label>Start date<input id="date-from" type="date" required></label>
+          <label>End date<input id="date-to" type="date" required></label>
+        </div>
+      </div>
+    </div>
+    <div class="date-footer">
+      <p id="date-preview" aria-live="polite"></p>
+      <button id="cancel-date" class="button quiet" type="button">Cancel</button>
+      <button id="apply-date" class="button solid" type="button">Apply</button>
+    </div>
+  </dialog>
+
   <dialog id="session-dialog" class="drawer" aria-labelledby="session-title">
     <div class="drawer-body">
       <div class="drawer-top">

package/web/style.css

@@ -107,6 +107,51 @@ h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
 .tool-filter button { display: inline-flex; align-items: center; gap: 8px; }
 .scope { margin-left: auto; color: var(--ink-2); font-weight: 600; }
 
+.date-trigger { justify-content: space-between; max-width: 100%; text-align: left; }
+.date-trigger svg { flex: none; }
+.date-trigger[aria-expanded='true'] { background: var(--paper-2); }
+.date-dialog { width: min(660px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--raised); color: var(--ink); overflow-y: auto; }
+.date-dialog::backdrop { background: var(--scrim); }
+.date-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--rule); }
+.date-heading h2 { font-size: 22px; }
+.date-body { display: grid; }
+.date-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 12px; border-bottom: 1px solid var(--rule); }
+.date-presets button { min-height: 44px; padding: 6px 8px; border: 0; border-radius: 3px; background: transparent; font-size: 13px; font-weight: 600; }
+.date-presets button:hover { background: var(--paper-2); }
+.date-presets button[aria-pressed='true'] { background: var(--ink); color: var(--paper); font-weight: 800; }
+.date-calendar { min-width: 0; padding: 12px; }
+.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
+.calendar-heading .button { width: 44px; padding: 0; border-color: transparent; font-size: 26px; }
+.calendar-heading h3 { font-size: 17px; }
+.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
+.calendar-weekdays { margin-bottom: 6px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
+.calendar-day { min-height: 44px; padding: 0; border: 1px solid transparent; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; }
+.calendar-day.outside-month { color: var(--ink-2); font-weight: 400; }
+.calendar-day[aria-current='date'] { text-decoration: underline; text-underline-offset: 5px; }
+.calendar-day[aria-pressed='true'] { background: var(--paper-2); }
+.calendar-day.range-start, .calendar-day.range-end { background: var(--accent-ink); color: var(--paper); font-weight: 800; }
+.calendar-day.range-start { border-radius: 3px 0 0 3px; }
+.calendar-day.range-end { border-radius: 0 3px 3px 0; }
+.calendar-day:hover { border-color: var(--ink); }
+.calendar-day:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
+.date-help { min-height: 38px; margin-top: 12px; color: var(--ink-2); font-size: 12px; }
+.date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.date-fields label { display: grid; gap: 4px; color: var(--ink-2); font-size: 12px; font-weight: 700; }
+.date-fields input { width: 100%; min-width: 0; min-height: 44px; padding: 6px; border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); font-size: 13px; }
+.date-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px; border-top: 1px solid var(--rule); }
+.date-footer p { flex-basis: 100%; margin-right: auto; color: var(--ink-2); font-size: 13px; font-weight: 600; }
+@media (max-width: 359px) {
+  .date-dialog { width: calc(100% - 4px); }
+  .date-calendar { padding-inline: 2px; }
+}
+@media (min-width: 620px) {
+  .date-body { grid-template-columns: 170px minmax(0, 1fr); }
+  .date-presets { grid-template-columns: 1fr; align-content: start; border-bottom: 0; border-right: 1px solid var(--rule); }
+  .date-presets button { padding-inline: 12px; text-align: left; font-size: 14px; }
+  .date-calendar { padding: 20px; }
+  .date-footer p { flex: 1; }
+}
+
 .ic { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
 .ic-claude { --icon: url('/icons/claude.svg'); }
 .ic-codex { --icon: url('/icons/openai.svg'); }
@@ -176,7 +221,7 @@ h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
 .tape { position: relative; }
 .tape-plot { position: relative; display: flex; align-items: flex-end; gap: 1px; height: clamp(150px, 22vw, 240px); border-bottom: 2px solid var(--ink); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
 .tape-plot:focus-visible { outline-offset: 8px; }
-.tick { flex: 1 1 0; min-width: 1px; height: var(--h); background: var(--ink); transform-origin: bottom; }
+.tick { flex: 1 1 0; min-width: 0; height: var(--h); background: var(--ink); transform-origin: bottom; }
 .tick.zero { height: 2px; background: var(--ink-3); }
 .tick.peak { background: var(--accent); }
 .veil { position: absolute; top: 0; bottom: 0; background: var(--veil); pointer-events: none; }