llm-usage-dashboard 0.1.0

package/src/main/main.js

@@ -0,0 +1,216 @@
+'use strict';
+const { app, BrowserWindow, Tray, Menu, ipcMain, nativeImage, shell } = require('electron');
+const path = require('path');
+const fs = require('fs');
+
+const { collectCodex } = require('./collectors/codex');
+const { collectClaude } = require('./collectors/claude');
+const { buildModel } = require('./aggregate');
+const P = require('./paths');
+
+let win = null;
+let tray = null;
+let latestModel = null;
+let refreshing = false;
+let pending = false;
+
+// auto-refresh cadence (user-requested): pull a fresh snapshot every 5 minutes.
+// File-watch still gives near-instant updates between ticks; each refresh re-arms
+// this timer so the 5-min clock counts from the last update of any kind.
+const AUTO_REFRESH_MS = 5 * 60 * 1000;
+let autoTimer = null;
+let nextAutoAt = 0;
+function armAuto() {
+  clearTimeout(autoTimer);
+  nextAutoAt = Date.now() + AUTO_REFRESH_MS;
+  autoTimer = setTimeout(() => refresh('auto-5min'), AUTO_REFRESH_MS);
+}
+
+const ASSET = (f) => path.join(__dirname, '..', '..', 'assets', f);
+
+// ---- autostart (persist desired state ourselves; OS getter is unreliable in
+//      dev / with custom args, so our config file is the source of truth) -----
+const AUTOSTART_NAME = 'AI Usage Dashboard';
+function configPath() { return path.join(app.getPath('userData'), 'config.json'); }
+function readConfig() {
+  try { return JSON.parse(fs.readFileSync(configPath(), 'utf8')); } catch { return {}; }
+}
+function writeConfig(patch) {
+  const cfg = { ...readConfig(), ...patch };
+  try {
+    fs.mkdirSync(path.dirname(configPath()), { recursive: true });
+    fs.writeFileSync(configPath(), JSON.stringify(cfg, null, 2));
+  } catch (e) { console.error('[config] write failed:', e); }
+  return cfg;
+}
+function loginArgs() {
+  // In dev (unpackaged) we must tell electron.exe which app to run.
+  return app.isPackaged
+    ? ['--hidden']
+    : [path.resolve(process.argv[1] || '.'), '--hidden'];
+}
+function applyAutostart(on) {
+  app.setLoginItemSettings({
+    openAtLogin: !!on,
+    path: process.execPath,
+    args: loginArgs(),
+    name: AUTOSTART_NAME,
+  });
+  writeConfig({ autostart: !!on });
+  return !!on;
+}
+function isAutostart() {
+  const cfg = readConfig();
+  if (typeof cfg.autostart === 'boolean') return cfg.autostart;
+  const s = app.getLoginItemSettings({ path: process.execPath, args: loginArgs() });
+  return !!(s.openAtLogin || s.executableWillLaunchAtLogin);
+}
+
+// ---- data refresh -----------------------------------------------------------
+async function refresh(reason = 'manual') {
+  if (refreshing) { pending = true; return latestModel; }
+  refreshing = true;
+  try {
+    const [codex, claude] = await Promise.all([collectCodex(), collectClaude()]);
+    latestModel = buildModel({ codex, claude });
+    latestModel.reason = reason;
+    armAuto();
+    latestModel.nextAutoRefreshAt = nextAutoAt;
+    latestModel.autoRefreshMs = AUTO_REFRESH_MS;
+    broadcast();
+    updateTray();
+  } catch (e) {
+    console.error('[refresh] failed:', e);
+  } finally {
+    refreshing = false;
+    if (pending) { pending = false; setTimeout(() => refresh('coalesced'), 50); }
+  }
+  return latestModel;
+}
+
+function broadcast() {
+  if (win && !win.isDestroyed() && latestModel) {
+    win.webContents.send('usage:update', latestModel);
+  }
+}
+
+function fmtPct(n) { return (n == null) ? '—' : Math.round(n) + '%'; }
+
+function updateTray() {
+  if (!tray || !latestModel) return;
+  const c = latestModel.providers.codex;
+  const cl = latestModel.providers.claude;
+  const p = c.rate && c.rate.primary ? c.rate.primary.used_percent : null;
+  const s = c.rate && c.rate.secondary ? c.rate.secondary.used_percent : null;
+  const monthCost = '$' + latestModel.totals.monthCost.toFixed(2);
+  tray.setToolTip(
+    `AI Usage Dashboard\n` +
+    `Codex 5h: ${fmtPct(p)}  week: ${fmtPct(s)}\n` +
+    `Claude (max) today: ${(cl.today.total / 1e6).toFixed(1)}M tok\n` +
+    `This month est: ${monthCost}`
+  );
+}
+
+// ---- file watching ----------------------------------------------------------
+let debounceTimer = null;
+function scheduleRefresh(reason) {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => refresh(reason), 1500);
+}
+
+function watchDir(dir, label) {
+  if (!P.exists(dir)) return;
+  try {
+    fs.watch(dir, { recursive: true }, () => scheduleRefresh('watch:' + label));
+  } catch (e) {
+    console.warn('[watch] could not watch', dir, e.message);
+  }
+}
+
+// ---- window + tray ----------------------------------------------------------
+function createWindow() {
+  if (win && !win.isDestroyed()) { win.show(); win.focus(); return; }
+  win = new BrowserWindow({
+    width: 1180,
+    height: 820,
+    minWidth: 900,
+    minHeight: 600,
+    title: 'AI Usage Dashboard',
+    icon: ASSET('icon.png'),
+    backgroundColor: '#0f1117',
+    show: false,
+    webPreferences: {
+      preload: path.join(__dirname, '..', 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+  win.removeMenu();
+  win.loadFile(path.join(__dirname, '..', 'renderer', 'index.html'));
+  win.once('ready-to-show', () => win.show());
+  win.on('close', (e) => {
+    // hide to tray instead of quitting
+    if (!app.isQuitting) { e.preventDefault(); win.hide(); }
+  });
+}
+
+function createTray() {
+  let img = nativeImage.createFromPath(ASSET('tray.png'));
+  if (img.isEmpty()) img = nativeImage.createFromPath(ASSET('icon.png'));
+  tray = new Tray(img);
+  const menu = Menu.buildFromTemplate([
+    { label: 'Open Dashboard', click: () => createWindow() },
+    { label: 'Refresh now', click: () => refresh('tray') },
+    { type: 'separator' },
+    {
+      label: 'Start with Windows',
+      type: 'checkbox',
+      checked: isAutostart(),
+      click: (item) => {
+        applyAutostart(item.checked);
+        if (win && !win.isDestroyed()) win.webContents.send('autostart:changed', item.checked);
+      },
+    },
+    { label: 'Open data folders', submenu: [
+      { label: 'Codex (~/.codex/sessions)', click: () => shell.openPath(P.CODEX_SESSIONS) },
+      { label: 'Claude (~/.claude/projects)', click: () => shell.openPath(P.CLAUDE_PROJECTS) },
+    ] },
+    { type: 'separator' },
+    { label: 'Quit', click: () => { app.isQuitting = true; app.quit(); } },
+  ]);
+  tray.setToolTip('AI Usage Dashboard');
+  tray.setContextMenu(menu);
+  tray.on('click', () => createWindow());
+  tray.on('double-click', () => createWindow());
+}
+
+// ---- IPC --------------------------------------------------------------------
+ipcMain.handle('usage:get', async () => latestModel || (await refresh('ipc-get')));
+ipcMain.handle('usage:refresh', async () => refresh('ipc-refresh'));
+ipcMain.handle('app:autostart-get', () => isAutostart());
+ipcMain.handle('app:autostart-set', (_e, on) => applyAutostart(on));
+
+// ---- lifecycle --------------------------------------------------------------
+const gotLock = app.requestSingleInstanceLock();
+if (!gotLock) {
+  app.quit();
+} else {
+  app.on('second-instance', () => createWindow());
+
+  app.whenReady().then(async () => {
+    createTray();
+    await refresh('startup');
+    // only open the window if not launched hidden (autostart)
+    const startedHidden = process.argv.includes('--hidden');
+    if (!startedHidden) createWindow();
+
+    watchDir(P.CODEX_SESSIONS, 'codex');
+    watchDir(P.CLAUDE_PROJECTS, 'claude');
+    // 5-min auto-refresh is armed inside refresh(); the startup refresh() above
+    // already armed it. File-watch covers instant updates between ticks.
+
+    app.on('activate', () => createWindow());
+  });
+
+  app.on('window-all-closed', () => { /* keep running in tray */ });
+}

package/src/main/paths.js

@@ -0,0 +1,50 @@
+'use strict';
+// Resolves the on-disk data sources for Codex and Claude Code.
+const os = require('os');
+const path = require('path');
+const fs = require('fs');
+
+const HOME = os.homedir();
+
+const CODEX_DIR = process.env.CODEX_HOME || path.join(HOME, '.codex');
+const CLAUDE_DIR = process.env.CLAUDE_CONFIG_DIR || path.join(HOME, '.claude');
+
+const CODEX_SESSIONS = path.join(CODEX_DIR, 'sessions');
+const CLAUDE_PROJECTS = path.join(CLAUDE_DIR, 'projects');
+
+const CODEX_AUTH = path.join(CODEX_DIR, 'auth.json');
+const CLAUDE_CREDS = path.join(CLAUDE_DIR, '.credentials.json');
+
+// Normalize a cwd into a stable, comparable project key.
+// Handles Windows extended-length prefix (\\?\) and trailing slashes.
+function normalizeCwd(cwd) {
+  if (!cwd || typeof cwd !== 'string') return 'unknown';
+  let p = cwd.replace(/^\\\\\?\\/, ''); // strip \\?\ prefix
+  p = p.replace(/[\\/]+$/, ''); // strip trailing slash
+  return p;
+}
+
+// Friendly short name for a project path (last path segment).
+function projectLabel(cwd) {
+  const p = normalizeCwd(cwd);
+  if (p === 'unknown') return 'unknown';
+  const parts = p.split(/[\\/]/).filter(Boolean);
+  return parts[parts.length - 1] || p;
+}
+
+function exists(p) {
+  try { fs.accessSync(p); return true; } catch { return false; }
+}
+
+module.exports = {
+  HOME,
+  CODEX_DIR,
+  CLAUDE_DIR,
+  CODEX_SESSIONS,
+  CLAUDE_PROJECTS,
+  CODEX_AUTH,
+  CLAUDE_CREDS,
+  normalizeCwd,
+  projectLabel,
+  exists,
+};

package/src/main/pricing.js

@@ -0,0 +1,72 @@
+'use strict';
+// Model pricing (USD per 1 token). Subscription users are not billed per token,
+// so these are *reference estimates* only. Values are per 1,000,000 tokens,
+// converted to per-token at load. Editable via assets/pricing.json (optional
+// override placed next to the app data dir).
+const fs = require('fs');
+const path = require('path');
+
+// USD per 1M tokens. Keys are matched by substring against the model id.
+const DEFAULT_PRICES_PER_M = {
+  // --- Anthropic Claude ---
+  'claude-opus':    { input: 15,   output: 75,  cacheWrite: 18.75, cacheRead: 1.5 },
+  'claude-sonnet':  { input: 3,    output: 15,  cacheWrite: 3.75,  cacheRead: 0.3 },
+  'claude-haiku':   { input: 1,    output: 5,   cacheWrite: 1.25,  cacheRead: 0.1 },
+  // --- OpenAI / Codex (gpt-5 family, reference) ---
+  'gpt-5':          { input: 1.25, output: 10,  cacheWrite: 1.25,  cacheRead: 0.125 },
+  'codex':          { input: 1.25, output: 10,  cacheWrite: 1.25,  cacheRead: 0.125 },
+  'o4':             { input: 1.1,  output: 4.4, cacheWrite: 1.1,   cacheRead: 0.275 },
+  'gpt-4':          { input: 2.5,  output: 10,  cacheWrite: 2.5,   cacheRead: 1.25 },
+};
+
+function loadOverrides(overridePath) {
+  if (overridePath && fs.existsSync(overridePath)) {
+    try {
+      return JSON.parse(fs.readFileSync(overridePath, 'utf8'));
+    } catch (e) {
+      console.warn('[pricing] failed to read override:', e.message);
+    }
+  }
+  return {};
+}
+
+function buildTable(overridePath) {
+  const merged = { ...DEFAULT_PRICES_PER_M, ...loadOverrides(overridePath) };
+  const perToken = {};
+  for (const [k, v] of Object.entries(merged)) {
+    perToken[k] = {
+      input: (v.input || 0) / 1e6,
+      output: (v.output || 0) / 1e6,
+      cacheWrite: (v.cacheWrite ?? v.input ?? 0) / 1e6,
+      cacheRead: (v.cacheRead ?? 0) / 1e6,
+    };
+  }
+  return perToken;
+}
+
+let TABLE = buildTable(path.join(__dirname, '..', '..', 'assets', 'pricing.json'));
+
+function priceFor(model) {
+  if (!model) return null;
+  const m = String(model).toLowerCase();
+  // longest matching key wins (more specific)
+  let best = null, bestLen = -1;
+  for (const key of Object.keys(TABLE)) {
+    if (m.includes(key) && key.length > bestLen) { best = TABLE[key]; bestLen = key.length; }
+  }
+  return best;
+}
+
+// tokens = { input, output, cacheWrite, cacheRead }
+function costOf(model, tokens) {
+  const p = priceFor(model);
+  if (!p) return 0;
+  return (
+    (tokens.input || 0) * p.input +
+    (tokens.output || 0) * p.output +
+    (tokens.cacheWrite || 0) * p.cacheWrite +
+    (tokens.cacheRead || 0) * p.cacheRead
+  );
+}
+
+module.exports = { costOf, priceFor, reload: (p) => { TABLE = buildTable(p); } };

package/src/main/probe.js

@@ -0,0 +1,44 @@
+'use strict';
+// Standalone sanity check (no Electron). Run: npm run probe
+// Verifies the collectors + aggregation against real local data.
+const { collectCodex } = require('./collectors/codex');
+const { collectClaude } = require('./collectors/claude');
+const { buildModel } = require('./aggregate');
+
+function fmt(n) { return Number(n).toLocaleString('en-US'); }
+function usd(n) { return '$' + Number(n).toFixed(2); }
+function when(ms) { return ms ? new Date(ms).toLocaleString() : '—'; }
+
+(async () => {
+  const t0 = Date.now();
+  const [codex, claude] = await Promise.all([collectCodex(), collectClaude()]);
+  const model = buildModel({ codex, claude });
+  const c = model.providers.codex;
+  const cl = model.providers.claude;
+
+  console.log('=== Codex (files: %d, plan: %s) ===', c.fileCount, c.planType || '?');
+  if (c.rate) {
+    const p = c.rate.primary, s = c.rate.secondary;
+    if (p) console.log('  5h  : %s%% used, resets %s', p.used_percent, when(p.resets_at * 1000));
+    if (s) console.log('  week: %s%% used, resets %s', s.used_percent, when(s.resets_at * 1000));
+  }
+  console.log('  5h tokens: %s | month tokens: %s | month cost: %s',
+    fmt(c.window5h.total), fmt(c.monthly.total), usd(c.monthly.cost));
+
+  console.log('=== Claude Code (files: %d, sub: %s) ===', cl.fileCount,
+    cl.subscription ? cl.subscription.subscriptionType : '?');
+  console.log('  5h block tokens: %s (resets %s)', fmt(cl.window5h.total), when(cl.block5hResetMs));
+  console.log('  week tokens: %s | month tokens: %s | month cost: %s',
+    fmt(cl.weekly.total), fmt(cl.monthly.total), usd(cl.monthly.cost));
+
+  console.log('=== Top projects (by all-time tokens) ===');
+  for (const p of model.projects.slice(0, 10)) {
+    console.log('  %s  tokens=%s  monthCost=%s  providers=%s',
+      p.label.padEnd(18), fmt(p.all.total), usd(p.month.cost),
+      Object.keys(p.byProvider).join('+'));
+  }
+  console.log('=== Totals: month cost %s | month tokens %s ===',
+    usd(model.totals.monthCost), fmt(model.totals.monthTokens));
+  console.log('(probe done in %dms, events: codex=%d claude=%d)',
+    Date.now() - t0, codex.events.length, claude.events.length);
+})().catch((e) => { console.error(e); process.exit(1); });

package/src/preload.js

@@ -0,0 +1,19 @@
+'use strict';
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('api', {
+  get: () => ipcRenderer.invoke('usage:get'),
+  refresh: () => ipcRenderer.invoke('usage:refresh'),
+  onUpdate: (cb) => {
+    const handler = (_e, model) => cb(model);
+    ipcRenderer.on('usage:update', handler);
+    return () => ipcRenderer.removeListener('usage:update', handler);
+  },
+  getAutostart: () => ipcRenderer.invoke('app:autostart-get'),
+  setAutostart: (on) => ipcRenderer.invoke('app:autostart-set', on),
+  onAutostartChanged: (cb) => {
+    const handler = (_e, on) => cb(on);
+    ipcRenderer.on('autostart:changed', handler);
+    return () => ipcRenderer.removeListener('autostart:changed', handler);
+  },
+});

package/src/renderer/app.js

@@ -0,0 +1,186 @@
+'use strict';
+
+// ---------- formatting helpers ----------
+function fmtTokens(n) {
+  n = n || 0;
+  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  return String(Math.round(n));
+}
+function usd(n) { return '$' + (n || 0).toFixed(2); }
+
+function durUntil(ms) {
+  if (!ms) return '';
+  const d = ms - Date.now();
+  if (d <= 0) return '已重置';
+  const m = Math.floor(d / 60000);
+  const h = Math.floor(m / 60);
+  const days = Math.floor(h / 24);
+  if (days >= 1) return `${days}天${h % 24}小時後重置`;
+  if (h >= 1) return `${h}小時${m % 60}分後重置`;
+  return `${m}分後重置`;
+}
+function relTime(ms) {
+  if (!ms) return '—';
+  const s = Math.floor((Date.now() - ms) / 1000);
+  if (s < 60) return `${s} 秒前更新`;
+  if (s < 3600) return `${Math.floor(s / 60)} 分前更新`;
+  return new Date(ms).toLocaleString();
+}
+function lastActive(ms) {
+  if (!ms) return '—';
+  const s = Math.floor((Date.now() - ms) / 1000);
+  if (s < 60) return '剛剛';
+  if (s < 3600) return `${Math.floor(s / 60)} 分前`;
+  if (s < 86400) return `${Math.floor(s / 3600)} 小時前`;
+  return new Date(ms).toLocaleDateString();
+}
+
+// ---------- limit row ----------
+function limitRow({ name, pct, resetMs, color, value }) {
+  const hot = pct != null && pct >= 85 ? ' hot' : '';
+  const right = pct != null ? `${Math.round(pct)}%` : (value || '');
+  const reset = resetMs ? `<span class="l-reset" data-reset="${resetMs}">${durUntil(resetMs)}</span>` : '<span class="l-reset"></span>';
+  const bar = pct != null
+    ? `<div class="bar ${color}${hot}"><span style="width:${Math.min(100, pct)}%"></span></div>`
+    : `<div class="bar ${color}"><span style="width:100%;opacity:.18"></span></div>`;
+  return `<div class="limit">
+    <div class="limit-top"><span class="l-name">${name}</span>${reset}<span class="l-pct">${right}</span></div>
+    ${bar}
+  </div>`;
+}
+
+// ---------- render ----------
+let model = null;
+
+function render(m) {
+  model = m;
+  const codex = m.providers.codex;
+  const claude = m.providers.claude;
+
+  // totals
+  document.getElementById('t-cost').textContent = usd(m.totals.monthCost);
+  document.getElementById('t-tokens').textContent = fmtTokens(m.totals.monthTokens);
+  document.getElementById('t-all').textContent = usd(m.totals.allCost);
+  document.getElementById('updated').textContent = relTime(m.generatedAt);
+  document.getElementById('nextauto').textContent = nextAutoText();
+
+  // ---- Codex card ----
+  document.getElementById('codex-plan').textContent = codex.planType || 'codex';
+  const cl = [];
+  if (codex.rate && codex.rate.primary) {
+    cl.push(limitRow({ name: '5 小時額度', pct: codex.rate.primary.used_percent, resetMs: codex.rate.primary.resets_at * 1000, color: 'codex' }));
+  }
+  if (codex.rate && codex.rate.secondary) {
+    cl.push(limitRow({ name: '每週額度', pct: codex.rate.secondary.used_percent, resetMs: codex.rate.secondary.resets_at * 1000, color: 'codex' }));
+  }
+  if (!cl.length) cl.push('<div class="note">尚無 Codex 額度資料(找不到 token_count 事件)。</div>');
+  document.getElementById('codex-limits').innerHTML = cl.join('');
+  document.getElementById('codex-today').textContent = fmtTokens(codex.today.total);
+  document.getElementById('codex-month').textContent = fmtTokens(codex.monthly.total);
+  document.getElementById('codex-cost').textContent = usd(codex.monthly.cost);
+  document.getElementById('codex-note').textContent = '額度 % 與重置時間為 Codex 官方記錄(精確)。花費為依模型單價估算之參考值。';
+
+  // ---- Claude card ----
+  const sub = claude.subscription;
+  document.getElementById('claude-plan').textContent = sub ? sub.subscriptionType : 'claude';
+  const cll = [];
+  cll.push(limitRow({ name: '5 小時區塊用量', pct: null, resetMs: claude.block5hResetMs, color: 'claude', value: fmtTokens(claude.window5h.total) + ' tok' }));
+  cll.push(limitRow({ name: '近 7 天用量', pct: null, resetMs: null, color: 'claude', value: fmtTokens(claude.weekly.total) + ' tok' }));
+  document.getElementById('claude-limits').innerHTML = cll.join('');
+  document.getElementById('claude-today').textContent = fmtTokens(claude.today.total);
+  document.getElementById('claude-month').textContent = fmtTokens(claude.monthly.total);
+  document.getElementById('claude-cost').textContent = usd(claude.monthly.cost);
+
+  // ---- chart (14 days, stacked) ----
+  renderChart(codex.daily, claude.daily);
+
+  // ---- projects ----
+  renderProjects(m.projects);
+}
+
+function renderChart(codexDaily, claudeDaily) {
+  const el = document.getElementById('chart');
+  const n = Math.max(codexDaily.length, claudeDaily.length);
+  let max = 1;
+  for (let i = 0; i < n; i++) {
+    const t = (codexDaily[i]?.total || 0) + (claudeDaily[i]?.total || 0);
+    if (t > max) max = t;
+  }
+  let html = '';
+  for (let i = 0; i < n; i++) {
+    const c = codexDaily[i]?.total || 0;
+    const a = claudeDaily[i]?.total || 0;
+    const label = codexDaily[i]?.label || claudeDaily[i]?.label || '';
+    const ch = Math.round((c / max) * 140);
+    const ah = Math.round((a / max) * 140);
+    const tip = `${label}\nCodex ${fmtTokens(c)} / Claude ${fmtTokens(a)}`;
+    html += `<div class="col" title="${tip}">
+      <div class="stack">
+        <div class="seg-codex" style="height:${ch}px"></div>
+        <div class="seg-claude" style="height:${ah}px"></div>
+      </div>
+      <div class="x">${label.slice(3)}</div>
+    </div>`;
+  }
+  el.innerHTML = html;
+}
+
+function renderProjects(projects) {
+  const body = document.getElementById('proj-body');
+  document.getElementById('proj-count').textContent = `${projects.length} 個專案`;
+  if (!projects.length) { body.innerHTML = '<tr><td colspan="6" class="note">尚無資料</td></tr>'; return; }
+  body.innerHTML = projects.map((p) => {
+    const tags = Object.keys(p.byProvider).map((k) => `<span class="src-tag src-${k}">${k}</span>`).join('');
+    return `<tr>
+      <td title="${p.project}">${p.label}</td>
+      <td>${tags}</td>
+      <td class="num">${fmtTokens(p.all.total)}</td>
+      <td class="num">${fmtTokens(p.month.total)}</td>
+      <td class="num">${usd(p.month.cost)}</td>
+      <td>${lastActive(p.lastTs)}</td>
+    </tr>`;
+  }).join('');
+}
+
+// ---------- tickers ----------
+function nextAutoText() {
+  if (!model || !model.nextAutoRefreshAt) return '';
+  const d = model.nextAutoRefreshAt - Date.now();
+  if (d <= 0) return '· 自動更新中…';
+  const m = Math.floor(d / 60000), s = Math.floor((d % 60000) / 1000);
+  return `· 每 5 分自動更新(下次 ${m}:${String(s).padStart(2, '0')})`;
+}
+
+setInterval(() => {
+  document.querySelectorAll('.l-reset[data-reset]').forEach((el) => {
+    el.textContent = durUntil(Number(el.dataset.reset));
+  });
+  if (model) {
+    document.getElementById('updated').textContent = relTime(model.generatedAt);
+    document.getElementById('nextauto').textContent = nextAutoText();
+  }
+}, 1000);
+
+// ---------- wire up ----------
+const btn = document.getElementById('refresh');
+btn.addEventListener('click', async () => {
+  btn.disabled = true; btn.textContent = '更新中…';
+  try { const m = await window.api.refresh(); if (m) render(m); }
+  finally { btn.disabled = false; btn.textContent = '重新整理'; }
+});
+
+const auto = document.getElementById('autostart');
+auto.addEventListener('change', async () => { auto.checked = await window.api.setAutostart(auto.checked); });
+window.api.onAutostartChanged((on) => { auto.checked = on; });
+
+window.api.onUpdate((m) => render(m));
+
+(async () => {
+  try {
+    auto.checked = await window.api.getAutostart();
+    const m = await window.api.get();
+    if (m) render(m);
+  } catch (e) { console.error(e); }
+})();

package/src/renderer/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';" />
+  <title>AI Usage Dashboard</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand">
+      <span class="logo"></span>
+      <h1>AI Usage Dashboard</h1>
+    </div>
+    <div class="actions">
+      <label class="toggle"><input type="checkbox" id="autostart" /> <span>開機自動啟動</span></label>
+      <span id="updated" class="updated">—</span>
+      <span id="nextauto" class="updated"></span>
+      <button id="refresh" class="btn">重新整理</button>
+    </div>
+  </header>
+
+  <main>
+    <section class="totals" id="totals">
+      <div class="total-card"><div class="t-label">本月預估花費</div><div class="t-value" id="t-cost">$0.00</div></div>
+      <div class="total-card"><div class="t-label">本月總 Tokens</div><div class="t-value" id="t-tokens">0</div></div>
+      <div class="total-card"><div class="t-label">累計花費(估)</div><div class="t-value" id="t-all">$0.00</div></div>
+    </section>
+
+    <section class="providers">
+      <article class="card" id="card-codex">
+        <div class="card-head">
+          <h2>Codex <span class="sub">(OpenAI)</span></h2>
+          <span class="badge badge-codex" id="codex-plan">plan</span>
+        </div>
+        <div class="limits" id="codex-limits"></div>
+        <div class="stat-row">
+          <div class="stat"><span class="s-label">今日</span><span class="s-val" id="codex-today">0</span></div>
+          <div class="stat"><span class="s-label">本月 tokens</span><span class="s-val" id="codex-month">0</span></div>
+          <div class="stat"><span class="s-label">本月花費</span><span class="s-val" id="codex-cost">$0</span></div>
+        </div>
+        <div class="note" id="codex-note"></div>
+      </article>
+
+      <article class="card" id="card-claude">
+        <div class="card-head">
+          <h2>Claude Code <span class="sub">(Anthropic)</span></h2>
+          <span class="badge badge-claude" id="claude-plan">plan</span>
+        </div>
+        <div class="limits" id="claude-limits"></div>
+        <div class="stat-row">
+          <div class="stat"><span class="s-label">今日</span><span class="s-val" id="claude-today">0</span></div>
+          <div class="stat"><span class="s-label">本月 tokens</span><span class="s-val" id="claude-month">0</span></div>
+          <div class="stat"><span class="s-label">本月花費</span><span class="s-val" id="claude-cost">$0</span></div>
+        </div>
+        <div class="note" id="claude-note">Claude 本地不儲存官方額度,以下為依用量重建之估算視窗。</div>
+      </article>
+    </section>
+
+    <section class="card chart-card">
+      <div class="card-head"><h2>近 14 天每日用量</h2><span class="legend"><i class="dot dot-codex"></i>Codex <i class="dot dot-claude"></i>Claude</span></div>
+      <div id="chart" class="chart"></div>
+    </section>
+
+    <section class="card">
+      <div class="card-head"><h2>各專案用量</h2><span class="hint" id="proj-count"></span></div>
+      <table class="projects">
+        <thead>
+          <tr><th>專案</th><th>來源</th><th class="num">累計 Tokens</th><th class="num">本月 Tokens</th><th class="num">本月花費(估)</th><th>最後活動</th></tr>
+        </thead>
+        <tbody id="proj-body"></tbody>
+      </table>
+    </section>
+  </main>
+
+  <script src="app.js"></script>
+</body>
+</html>