ai-usage-analyzer 0.5.0 → 0.6.0

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,17 @@ 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.
 
+Share card in the dashboard header draws a PNG of the selected range and
+tool filter in link-preview (1.91:1), 4:5, or 9:16 format: sessions, projects, active days, best streak, a daily tape, and a
+working-hours persona. Download it or copy it to the clipboard. Project names
+and paths are never drawn on it, and nothing is uploaded.
+
+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 +80,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.6.0",
   "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,8 @@ 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']],
+  ['/card.js', ['../web/card.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,6 @@
 import { overall, perProject, perTool, perMonth, topSessions } from '/aggregate.js';
+import { CARD_FORMATS, cardStats, cardSummary, drawCard, cardBlob } from '/card.js';
+import { dayNumber, periodBounds as boundsForPeriod, dateValue, parseDate, calendarDays } from '/dates.js';
 
 const $ = id => document.getElementById(id);
 const root = document.documentElement;
@@ -26,6 +28,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 +174,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 +326,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 +339,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 +860,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`;
 }
@@ -872,6 +925,7 @@ async function load() {
     buildToolFilter();
     $('loading').hidden = true;
     $('dashboard').hidden = false;
+    $('share').disabled = false;
     setMessage('');
     if (data.errors?.length) setMessage(`${data.errors.length} read ${data.errors.length === 1 ? 'issue needs' : 'issues need'} attention. Totals may be incomplete.`, { link: ['View read issues', '#sources'] });
     $('updated').textContent = `Read at ${new Date(data.generatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
@@ -901,12 +955,116 @@ 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();
   });
 }
+let cardFormat = CARD_FORMATS[0];
+async function paintShareCard() {
+  const canvas = $('share-canvas');
+  const stats = cardStats(selectedRecords());
+  const rangeLabel = state.period.key === 'all' ? 'All time' : periodLabel(state.period);
+  const toolLabel = state.tool === 'all' ? '' : toolName(state.tool);
+  canvas.setAttribute('aria-label', cardSummary(stats, [rangeLabel, toolLabel].filter(Boolean).join(', ')));
+  for (const button of $('share-format').children) button.setAttribute('aria-pressed', String(button.dataset.format === cardFormat.key));
+  await drawCard(canvas, stats, { format: cardFormat, rangeLabel, toolLabel, toolName });
+}
+async function openShareCard() {
+  $('share-status').textContent = '';
+  $('share-dialog').showModal();
+  await paintShareCard();
+}
+for (const format of CARD_FORMATS) {
+  const button = el('button', '', `${format.label} ${format.ratio}`);
+  button.type = 'button';
+  button.dataset.format = format.key;
+  $('share-format').append(button);
+}
+$('share-format').addEventListener('click', event => {
+  const key = event.target.closest('button')?.dataset.format;
+  if (!key) return;
+  cardFormat = CARD_FORMATS.find(format => format.key === key);
+  $('share-status').textContent = '';
+  paintShareCard();
+});
+async function shareAction(task, done) {
+  try {
+    await task(await cardBlob($('share-canvas')));
+    $('share-status').textContent = done;
+  } catch (error) {
+    $('share-status').textContent = error.name === 'AbortError' ? '' : 'Could not do that in this browser. Download the PNG instead.';
+  }
+}
+$('share').addEventListener('click', openShareCard);
+$('close-share').addEventListener('click', () => $('share-dialog').close());
+$('share-dialog').addEventListener('click', event => {
+  if (event.target === event.currentTarget) event.currentTarget.close();
+});
+$('download-card').addEventListener('click', () => shareAction(blob => {
+  const link = el('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `ai-usage-card-${cardFormat.ratio.replace(':', 'x')}.png`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+}, 'Saved.'));
+$('copy-card').addEventListener('click', () => shareAction(blob => navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]), 'Copied. Paste it into your post.'));
+$('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/card.js

@@ -0,0 +1,216 @@
+import { dayNumber } from './dates.js';
+
+export const CARD_FORMATS = [
+  { key: 'link', label: 'Link preview', ratio: '1.91:1', w: 1200, h: 630, pad: 64, stacked: false, headY: 74, headSize: 20, numSize: 190, numY: 270, nameSize: 40, subSize: 28, personaY: 330, personaSize: 34, personaSubSize: 20, mixY: 362, tapeTop: 390, tapeH: 74, figCols: 4, figY: 530, figRow: 0, figSize: 44, figLabelSize: 15, footY: 606, footSize: 15 },
+  { key: 'portrait', label: 'Portrait', ratio: '4:5', w: 1080, h: 1350, pad: 72, stacked: true, headY: 110, headSize: 24, numSize: 300, numY: 420, nameSize: 56, subSize: 30, personaY: 680, personaSize: 48, personaSubSize: 26, mixY: 770, tapeTop: 830, tapeH: 200, figCols: 2, figY: 1130, figRow: 100, figSize: 56, figLabelSize: 17, footY: 1306, footSize: 20 },
+  { key: 'story', label: 'Story', ratio: '9:16', w: 1080, h: 1920, pad: 72, stacked: true, headY: 230, headSize: 26, numSize: 360, numY: 560, nameSize: 64, subSize: 34, personaY: 860, personaSize: 56, personaSubSize: 30, mixY: 960, tapeTop: 1050, tapeH: 280, figCols: 2, figY: 1450, figRow: 118, figSize: 64, figLabelSize: 19, footY: 1664, footSize: 24 },
+];
+
+const BRAND = { cli: 'npx ai-usage-analyzer', repo: 'github.com/adetxt/ai-usage-analyzer' };
+
+const PERSONAS = [
+  ['night', 'Night owl', 'Most sessions start after dark.'],
+  ['morning', 'Early shipper', 'Most sessions start before noon.'],
+  ['afternoon', 'Daytime builder', 'Most sessions start in the afternoon.'],
+  ['evening', 'Evening grinder', 'Most sessions start after work hours.'],
+];
+
+function bucket(hour) {
+  if (hour >= 22 || hour < 5) return 'night';
+  if (hour < 12) return 'morning';
+  if (hour < 18) return 'afternoon';
+  return 'evening';
+}
+
+function persona(times) {
+  if (!times.length) return null;
+  const weekend = times.filter(ts => [0, 6].includes(new Date(ts).getDay())).length / times.length;
+  if (weekend >= 0.35) return ['Weekend warrior', 'A third of the work lands on weekends.'];
+  const counts = {};
+  for (const ts of times) {
+    const key = bucket(new Date(ts).getHours());
+    counts[key] = (counts[key] || 0) + 1;
+  }
+  const [key] = Object.entries(counts).sort((a, b) => b[1] - a[1])[0];
+  const [, name, line] = PERSONAS.find(entry => entry[0] === key);
+  return [name, line];
+}
+
+export function cardStats(records) {
+  const dated = records.filter(record => Number.isFinite(record.ts));
+  const days = new Map();
+  for (const record of dated) {
+    const day = dayNumber(record.ts);
+    days.set(day, (days.get(day) || 0) + (record.tokensTotal || 0));
+  }
+  const sorted = [...days.keys()].sort((a, b) => a - b);
+  let longest = 0;
+  let run = 0;
+  sorted.forEach((day, index) => {
+    run = index && day === sorted[index - 1] + 1 ? run + 1 : 1;
+    longest = Math.max(longest, run);
+  });
+  const busiest = [...days].reduce((best, entry) => !best || entry[1] > best[1] ? entry : best, null);
+  const tools = {};
+  for (const record of records) tools[record.tool] = (tools[record.tool] || 0) + (record.tokensTotal || 0);
+  const tokens = Object.values(tools).reduce((a, b) => a + b, 0);
+  return {
+    sessions: records.length,
+    projects: new Set(records.map(record => record.project)).size,
+    tokens,
+    activeDays: days.size,
+    longestStreak: longest,
+    busiest: busiest ? { day: busiest[0], tokens: busiest[1] } : null,
+    tape: sorted.length ? { from: sorted[0], to: sorted.at(-1), days } : null,
+    tools: Object.entries(tools).filter(entry => entry[1] > 0).sort((a, b) => b[1] - a[1]),
+    persona: persona(dated.map(record => record.ts)),
+  };
+}
+
+const compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });
+const whole = new Intl.NumberFormat('en');
+const dayFormat = new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric', timeZone: 'UTC' });
+
+export function cardSummary(stats, rangeLabel) {
+  if (!stats.sessions) return 'No sessions in this selection.';
+  const parts = [
+    `${whole.format(stats.sessions)} AI coding sessions`,
+    `${whole.format(stats.projects)} projects`,
+    `${whole.format(stats.activeDays)} active days`,
+    `longest streak ${whole.format(stats.longestStreak)} days`,
+    `${compact.format(stats.tokens)} tokens`,
+  ];
+  return `${parts.join(', ')}. ${rangeLabel}.${stats.persona ? ` ${stats.persona[0]}.` : ''}`;
+}
+
+function colors() {
+  const style = getComputedStyle(document.documentElement);
+  const read = name => style.getPropertyValue(name).trim();
+  return { paper: read('--paper'), ink: read('--ink'), ink2: read('--ink-2'), ink3: read('--ink-3'), rule: read('--rule'), accent: read('--accent') };
+}
+
+function text(ctx, value, x, y, { size, weight = 700, color, align = 'left', track = 0 }) {
+  ctx.font = `${weight} ${size}px Manrope, sans-serif`;
+  ctx.fillStyle = color;
+  ctx.textAlign = align;
+  ctx.letterSpacing = `${track}px`;
+  ctx.fillText(value, x, y);
+}
+
+function fit(ctx, value, maxWidth) {
+  if (ctx.measureText(value).width <= maxWidth) return value;
+  let out = value;
+  while (out.length > 1 && ctx.measureText(`${out}…`).width > maxWidth) out = out.slice(0, -1);
+  return `${out}…`;
+}
+
+function dots(ctx, c, w, h) {
+  const gap = Math.round(w / 52);
+  ctx.fillStyle = c.rule;
+  ctx.globalAlpha = .75;
+  for (let y = gap; y < h; y += gap) {
+    for (let x = gap; x < w; x += gap) {
+      ctx.beginPath();
+      ctx.arc(x, y, 1.6, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+  ctx.globalAlpha = 1;
+}
+
+export async function drawCard(canvas, stats, { format, rangeLabel, toolLabel, toolName }) {
+  await document.fonts.load('800 100px Manrope');
+  await document.fonts.load('600 20px Manrope');
+  const L = format;
+  const scale = 2;
+  canvas.width = L.w * scale;
+  canvas.height = L.h * scale;
+  const ctx = canvas.getContext('2d');
+  ctx.scale(scale, scale);
+  const c = colors();
+  const { pad } = L;
+  const right = L.w - pad;
+
+  ctx.fillStyle = c.paper;
+  ctx.fillRect(0, 0, L.w, L.h);
+  dots(ctx, c, L.w, L.h);
+  ctx.fillStyle = c.ink;
+  ctx.fillRect(0, 0, L.w, 10);
+
+  text(ctx, 'AI USAGE', pad, L.headY, { size: L.headSize, weight: 800, color: c.ink, track: 3 });
+  text(ctx, 'ANALYZER', pad + ctx.measureText('AI USAGE').width + 12, L.headY, { size: L.headSize, weight: 400, color: c.ink2, track: 3 });
+  const scope = [rangeLabel, toolLabel].filter(Boolean).join(' · ');
+  ctx.font = `600 ${L.headSize}px Manrope, sans-serif`;
+  text(ctx, fit(ctx, scope, L.w * .52), right, L.headY, { size: L.headSize, weight: 600, color: c.ink2, align: 'right' });
+
+  if (!stats.sessions) {
+    text(ctx, 'No sessions yet.', pad, L.h / 2, { size: L.numSize / 2.6, weight: 800, color: c.ink, track: -2 });
+    return;
+  }
+
+  const count = whole.format(stats.sessions);
+  const noun = stats.sessions === 1 ? 'session shipped' : 'sessions shipped';
+  const across = `across ${whole.format(stats.projects)} ${stats.projects === 1 ? 'project' : 'projects'}`;
+  text(ctx, count, pad - L.numSize / 48, L.numY, { size: L.numSize, weight: 800, color: c.accent, track: -L.numSize / 24 });
+  if (L.stacked) {
+    text(ctx, noun, pad, L.numY + L.nameSize * 1.5, { size: L.nameSize, weight: 800, color: c.ink, track: -1 });
+    text(ctx, across, pad, L.numY + L.nameSize * 1.5 + L.subSize * 1.5, { size: L.subSize, weight: 600, color: c.ink2 });
+  } else {
+    ctx.font = `800 ${L.numSize}px Manrope, sans-serif`;
+    ctx.letterSpacing = `${-L.numSize / 24}px`;
+    const x = pad + ctx.measureText(count).width + 18;
+    text(ctx, noun, x, L.numY, { size: L.nameSize, weight: 800, color: c.ink, track: -1 });
+    text(ctx, across, x, L.numY - 52, { size: L.subSize, weight: 600, color: c.ink2 });
+  }
+
+  if (stats.persona) {
+    text(ctx, stats.persona[0], pad, L.personaY, { size: L.personaSize, weight: 800, color: c.ink, track: -.5 });
+    text(ctx, stats.persona[1], pad, L.personaY + L.personaSize * .95, { size: L.personaSubSize, weight: 600, color: c.ink2 });
+  }
+
+  const total = stats.tools.reduce((sum, entry) => sum + entry[1], 0) || 1;
+  const shares = stats.tools.slice(0, 3).map(([name, value]) => `${toolName(name)} ${Math.round(value / total * 100)}%`);
+  const mixWidth = L.stacked ? L.w - pad * 2 : 520;
+  ctx.font = `600 ${L.personaSubSize}px Manrope, sans-serif`;
+  while (shares.length > 1 && ctx.measureText(shares.join('  ·  ')).width > mixWidth) shares.pop();
+  text(ctx, fit(ctx, shares.join('  ·  '), mixWidth), L.stacked ? pad : right, L.mixY, { size: L.personaSubSize, weight: 600, color: c.ink2, align: L.stacked ? 'left' : 'right' });
+
+  const tape = stats.tape;
+  const tapeWidth = L.w - pad * 2;
+  const span = tape.to - tape.from + 1;
+  const columns = Math.min(span, 120);
+  const slot = tapeWidth / columns;
+  const bars = new Array(columns).fill(0);
+  for (const [day, value] of tape.days) {
+    bars[Math.min(columns - 1, Math.floor((day - tape.from) / span * columns))] += value;
+  }
+  const columnPeak = Math.max(...bars, 1);
+  bars.forEach((value, index) => {
+    const height = value ? Math.max(6, value / columnPeak * L.tapeH) : 2;
+    ctx.fillStyle = value && value === columnPeak ? c.accent : value ? c.ink : c.rule;
+    ctx.fillRect(pad + index * slot + slot * .2, L.tapeTop + L.tapeH - height, Math.max(1.5, slot * .6), height);
+  });
+  ctx.fillStyle = c.ink;
+  ctx.fillRect(pad, L.tapeTop + L.tapeH + 6, tapeWidth, 2);
+
+  const figures = [
+    [whole.format(stats.activeDays), 'active days'],
+    [whole.format(stats.longestStreak), 'day streak'],
+    [compact.format(stats.tokens), 'tokens'],
+    [stats.busiest ? dayFormat.format(stats.busiest.day * 86400000) : '–', 'busiest day'],
+  ];
+  const cell = tapeWidth / L.figCols;
+  figures.forEach(([value, label], index) => {
+    const x = pad + index % L.figCols * cell;
+    const y = L.figY + Math.floor(index / L.figCols) * L.figRow;
+    text(ctx, value, x, y, { size: L.figSize, weight: 800, color: c.ink, track: -1.5 });
+    text(ctx, label.toUpperCase(), x, y + L.figLabelSize * 2, { size: L.figLabelSize, weight: 700, color: c.ink2, track: 1.5 });
+  });
+
+  text(ctx, BRAND.cli, pad, L.footY, { size: L.footSize, weight: 700, color: c.ink, track: .3 });
+  text(ctx, BRAND.repo, right, L.footY, { size: L.footSize, weight: 600, color: c.ink2, align: 'right', track: .3 });
+}
+
+export function cardBlob(canvas) {
+  return new Promise((resolve, reject) => canvas.toBlob(blob => blob ? resolve(blob) : reject(new Error('Could not render the card.')), 'image/png'));
+}

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

@@ -25,6 +25,10 @@
         <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6.5"/><path class="fill" d="M10 3.5a6.5 6.5 0 0 0 0 13z"/></svg>
         <span>Dark</span>
       </button>
+      <button id="share" class="button quiet" type="button" aria-haspopup="dialog" aria-controls="share-dialog" disabled>
+        <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 12.5V3.5M6.5 7 10 3.5 13.5 7M4 11v5h12v-5"/></svg>
+        <span>Share card</span>
+      </button>
       <button id="refresh" class="button solid" type="button">
         <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.5 8a6.7 6.7 0 1 0-.4 5M16.5 3.5V8H12"/></svg>
         <span id="refresh-label">Refresh records</span>
@@ -42,15 +46,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 +67,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 +184,60 @@
     <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="share-dialog" class="date-dialog share-dialog" aria-labelledby="share-title">
+    <div class="date-heading">
+      <h2 id="share-title">Share card</h2>
+      <button id="close-share" class="button quiet" type="button" aria-label="Close share card">Close</button>
+    </div>
+    <div class="share-body">
+      <div id="share-format" class="filter-group" role="group" aria-label="Card format"></div>
+      <canvas id="share-canvas" role="img"></canvas>
+      <p class="date-help">Built from the current date range and tool filter. Project names and paths are never drawn on the card.</p>
+    </div>
+    <div class="date-footer">
+      <p id="share-status" aria-live="polite"></p>
+      <button id="copy-card" class="button quiet" type="button">Copy image</button>
+      <button id="download-card" class="button solid" type="button">Download PNG</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,54 @@ 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; }
+.share-dialog { width: min(820px, calc(100% - 24px)); }
+.share-body { display: grid; gap: 12px; padding: 16px; }
+.share-body canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 58dvh; margin-inline: auto; border: 1px solid var(--rule); }
+@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 +224,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; }