glad-web 1.0.38 → 1.0.40

package/README.md

@@ -34,6 +34,7 @@ Glad was created to enable **vibe coding** on mobile devices. By bringing variou
 
 Our design philosophy is **Easy to use, Stable, and Restrained**. Glad focuses strictly on the essentials:
 - **Session management:** Run multiple sessions from a single dashboard with per-session working directories.
+- **Local usage dashboard:** Select a week or month, compare per-model and daily token totals, and inspect model-stacked token and cost charts through the bundled read-only `ccusage` engine. Costs use `ccusage` estimates and are shown only for GPT models used by Codex.
 - **High-fidelity terminal interaction:** A mobile-friendly terminal experience with touch shortcuts.
 - **Extreme performance history viewing:** Fast and responsive text history.
 - **Simple but effective change checking:** Integrated Git changes preview.

package/README.zh-CN.md

@@ -34,6 +34,7 @@ Glad 的初衷是开发一款完全运行在本地的、足够简单的，且登
 
 我们的设计哲学是：**易用、稳定、克制**。只提供最核心且体验优秀的功能：
 - **Session 管理**：在一个面板中管理多个会话，每个会话可单独指定工作目录。
+- **本地用量看板**：通过内置的只读 `ccusage` 引擎选择某周或某月，查看按模型汇总及每日 token，并用按模型堆叠的柱状图比较 token 和费用；费用完全采用 `ccusage` 估算，且只对 Codex 使用的 GPT 模型显示。
 - **高还原度的 terminal 交互**：专为手机优化的终端体验与快捷按键。
 - **极致性能的历史查看**：快速流畅的终端历史记录浏览。
 - **简单但足够好用的改动检查**：内置 Git 改动预览功能。

package/lib/commands/web.js

@@ -47,6 +47,8 @@ const registerScheduleRoutes = require('../server/routes/schedules');
 const registerWorkspaceRoutes = require('../server/routes/workspace');
 const registerProviderRoutes = require('../server/routes/providers');
 const registerNotificationRoutes = require('../server/routes/notifications');
+const registerUsageRoutes = require('../server/routes/usage');
+const { UsageService } = require('../usage/usage-service');
 const { ServerChanSettingsStore } = require('../notifications/serverchan-settings-store');
 const ServerChanClient = require('../notifications/serverchan-client');
 const NotificationService = require('../notifications/notification-service');
@@ -101,6 +103,7 @@ async function webCommand(options) {
     channel: new ServerChanClient(),
     logger
   });
+  const usageService = new UsageService({ logger });
   sessionManager.on('output', ({ sessionId, data }) => {
     broadcastToSession(sessionId, { type: 'output', data });
   });
@@ -143,6 +146,7 @@ async function webCommand(options) {
     settingsStore: serverChanSettings,
     notificationService
   });
+  registerUsageRoutes(app, { usageService, sendJson: sendCompressedJson });
 
   // API: List all active sessions
   app.get('/api/sessions', (req, res) => {
@@ -481,7 +485,8 @@ async function webCommand(options) {
     'composer.js',
     'timed-inputs.js',
     'terminal-scroll.js',
-    'git.js'
+    'git.js',
+    'usage.js'
   ];
   for (const assetName of webAssets) {
     const escapedName = assetName.replace('.', '\\.');

package/lib/server/routes/usage.js

@@ -0,0 +1,23 @@
+module.exports = function registerUsageRoutes(app, { usageService, sendJson = (_req, res, payload) => res.json(payload) }) {
+  app.get('/api/usage/sources', async (req, res) => {
+    try {
+      res.json(await usageService.listSources(req.query.refresh === '1'));
+    } catch (error) {
+      res.status(error.statusCode || 500).json({ error: error.message || 'Failed to load usage sources' });
+    }
+  });
+
+  app.get('/api/usage/report', async (req, res) => {
+    try {
+      const report = await usageService.getDashboard(
+        req.query.source,
+        req.query.scope || 'weekly',
+        req.query.period,
+        req.query.refresh === '1'
+      );
+      sendJson(req, res, report);
+    } catch (error) {
+      res.status(error.statusCode || 500).json({ error: error.message || 'Failed to load usage report' });
+    }
+  });
+};

package/lib/usage/ccusage-runner.js

@@ -0,0 +1,105 @@
+const { spawn } = require('child_process');
+
+const MAX_OUTPUT_BYTES = 64 * 1024 * 1024;
+const DEFAULT_TIMEOUT_MS = 45000;
+
+const NATIVE_PACKAGES = {
+  'darwin-arm64': '@ccusage/ccusage-darwin-arm64',
+  'darwin-x64': '@ccusage/ccusage-darwin-x64',
+  'linux-arm64': '@ccusage/ccusage-linux-arm64',
+  'linux-x64': '@ccusage/ccusage-linux-x64',
+  'win32-arm64': '@ccusage/ccusage-win32-arm64',
+  'win32-x64': '@ccusage/ccusage-win32-x64'
+};
+
+function resolveCcusageBinary(platform = process.platform, arch = process.arch) {
+  const packageName = NATIVE_PACKAGES[`${platform}-${arch}`];
+  if (!packageName) {
+    throw new Error(`ccusage is not available for ${platform}-${arch}`);
+  }
+  const binaryName = platform === 'win32' ? 'ccusage.exe' : 'ccusage';
+  try {
+    return require.resolve(`${packageName}/bin/${binaryName}`);
+  } catch (_error) {
+    throw new Error(`ccusage native package is missing for ${platform}-${arch}`);
+  }
+}
+
+function reportArgs(timezone) {
+  return [
+    'daily',
+    '--sections', 'daily,weekly,monthly',
+    '--by-agent',
+    '--json',
+    '--offline',
+    '--timezone', timezone
+  ];
+}
+
+class CcusageRunner {
+  constructor(options = {}) {
+    this.binaryPath = options.binaryPath || resolveCcusageBinary();
+    this.timeoutMs = options.timeoutMs || DEFAULT_TIMEOUT_MS;
+    this.spawnProcess = options.spawnProcess || spawn;
+  }
+
+  loadAllPeriods(timezone) {
+    return this.runJson(reportArgs(timezone));
+  }
+
+  runJson(args) {
+    return new Promise((resolve, reject) => {
+      const child = this.spawnProcess(this.binaryPath, args, {
+        env: { ...process.env, NO_COLOR: '1' },
+        shell: false,
+        windowsHide: true
+      });
+      const stdout = [];
+      const stderr = [];
+      let outputBytes = 0;
+      let stderrBytes = 0;
+      let settled = false;
+
+      const finish = callback => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timer);
+        callback();
+      };
+      const timer = setTimeout(() => {
+        child.kill();
+        finish(() => reject(new Error('ccusage timed out while reading local usage data')));
+      }, this.timeoutMs);
+
+      child.stdout.on('data', chunk => {
+        outputBytes += chunk.length;
+        if (outputBytes > MAX_OUTPUT_BYTES) {
+          child.kill();
+          finish(() => reject(new Error('ccusage report exceeded the safe output limit')));
+          return;
+        }
+        stdout.push(chunk);
+      });
+      child.stderr.on('data', chunk => {
+        if (stderrBytes >= 64 * 1024) return;
+        stderr.push(chunk);
+        stderrBytes += chunk.length;
+      });
+      child.on('error', error => finish(() => reject(new Error(`Unable to start ccusage: ${error.message}`))));
+      child.on('close', code => finish(() => {
+        const errorText = Buffer.concat(stderr).toString('utf8').trim();
+        if (code !== 0) {
+          reject(new Error(errorText || `ccusage exited with code ${code}`));
+          return;
+        }
+        try {
+          resolve(JSON.parse(Buffer.concat(stdout).toString('utf8')));
+        } catch (_error) {
+          reject(new Error('ccusage returned invalid JSON'));
+        }
+      }));
+    });
+  }
+}
+
+module.exports = { CcusageRunner, reportArgs, resolveCcusageBinary };

package/lib/usage/source-catalog.js

@@ -0,0 +1,26 @@
+const SOURCES = [
+  { id: 'codex', label: 'Codex', badge: 'CX' },
+  { id: 'claude', label: 'Claude', badge: 'CL' },
+  { id: 'gemini', label: 'Gemini', badge: 'GE' },
+  { id: 'opencode', label: 'OpenCode', badge: 'OC' },
+  { id: 'copilot', label: 'Copilot', badge: 'CP' },
+  { id: 'amp', label: 'Amp', badge: 'AM' },
+  { id: 'droid', label: 'Droid', badge: 'DR' },
+  { id: 'codebuff', label: 'Codebuff', badge: 'CB' },
+  { id: 'hermes', label: 'Hermes', badge: 'HE' },
+  { id: 'pi', label: 'Pi', badge: 'PI' },
+  { id: 'goose', label: 'Goose', badge: 'GO' },
+  { id: 'kilo', label: 'Kilo', badge: 'KI' },
+  { id: 'kimi', label: 'Kimi', badge: 'KM' },
+  { id: 'qwen', label: 'Qwen', badge: 'QW' },
+  { id: 'openclaw', label: 'OpenClaw', badge: 'OA' },
+  { id: 'grok', label: 'Grok', badge: 'GR' }
+];
+
+const SOURCE_BY_ID = new Map(SOURCES.map(source => [source.id, source]));
+
+function getUsageSource(id) {
+  return SOURCE_BY_ID.get(String(id || '').toLowerCase()) || null;
+}
+
+module.exports = { SOURCES, getUsageSource };

package/lib/usage/usage-service.js

@@ -0,0 +1,226 @@
+const { CcusageRunner } = require('./ccusage-runner');
+const { SOURCES, getUsageSource } = require('./source-catalog');
+
+const SCOPES = new Set(['weekly', 'monthly']);
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+function defaultTimezone() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+  } catch (_error) {
+    return 'UTC';
+  }
+}
+
+function ccusageVersion() {
+  try {
+    return require('ccusage/package.json').version;
+  } catch (_error) {
+    return 'unknown';
+  }
+}
+
+function positiveNumber(value) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : 0;
+}
+
+function isGptModel(modelName) {
+  return /^gpt(?:-|$)/i.test(String(modelName || ''));
+}
+
+function modelCost(sourceId, modelName, cost) {
+  if (sourceId !== 'codex' || !isGptModel(modelName)) return null;
+  const value = positiveNumber(cost);
+  return value > 0 ? value : null;
+}
+
+function normalizeModel(sourceId, breakdown) {
+  const uncachedInputTokens = positiveNumber(breakdown.inputTokens)
+    + positiveNumber(breakdown.cacheCreationTokens);
+  const cachedInputTokens = positiveNumber(breakdown.cacheReadTokens);
+  const outputTokens = positiveNumber(breakdown.outputTokens);
+  return {
+    modelName: String(breakdown.modelName || 'Unknown'),
+    uncachedInputTokens,
+    cachedInputTokens,
+    outputTokens,
+    totalTokens: uncachedInputTokens + cachedInputTokens + outputTokens,
+    estimatedCostUSD: modelCost(sourceId, breakdown.modelName, breakdown.cost)
+  };
+}
+
+function sumModels(models) {
+  return models.reduce((totals, model) => {
+    totals.uncachedInputTokens += model.uncachedInputTokens;
+    totals.cachedInputTokens += model.cachedInputTokens;
+    totals.outputTokens += model.outputTokens;
+    totals.totalTokens += model.totalTokens;
+    if (model.estimatedCostUSD !== null) {
+      totals.estimatedCostUSD = (totals.estimatedCostUSD || 0) + model.estimatedCostUSD;
+    }
+    return totals;
+  }, {
+    uncachedInputTokens: 0,
+    cachedInputTokens: 0,
+    outputTokens: 0,
+    totalTokens: 0,
+    estimatedCostUSD: null
+  });
+}
+
+function fallbackModel(sourceId, agentRow) {
+  const names = Array.isArray(agentRow.modelsUsed) ? agentRow.modelsUsed : [];
+  const modelName = names.length === 1 ? names[0] : names.length > 1 ? 'Multiple models' : 'Unknown';
+  return normalizeModel(sourceId, {
+    modelName,
+    inputTokens: agentRow.inputTokens,
+    cacheCreationTokens: agentRow.cacheCreationTokens,
+    cacheReadTokens: agentRow.cacheReadTokens,
+    outputTokens: agentRow.outputTokens,
+    cost: names.length === 1 ? agentRow.totalCost : null
+  });
+}
+
+function normalizeAgentRow(sourceId, period, agentRow) {
+  const breakdowns = Array.isArray(agentRow.modelBreakdowns) ? agentRow.modelBreakdowns : [];
+  const models = breakdowns.length
+    ? breakdowns.map(item => normalizeModel(sourceId, item))
+    : [fallbackModel(sourceId, agentRow)];
+  models.sort((a, b) => b.totalTokens - a.totalTokens || a.modelName.localeCompare(b.modelName));
+  return { period, models, totals: sumModels(models) };
+}
+
+function findAgentRow(row, sourceId) {
+  return Array.isArray(row && row.agents)
+    ? row.agents.find(agent => agent && agent.agent === sourceId) || null
+    : null;
+}
+
+function availablePeriods(raw, scope, sourceId) {
+  return (raw[scope] || [])
+    .filter(row => findAgentRow(row, sourceId))
+    .map(row => String(row.period || ''))
+    .filter(Boolean)
+    .sort()
+    .reverse();
+}
+
+function dateInsideScope(date, scope, selectedPeriod) {
+  if (scope === 'monthly') return date.startsWith(`${selectedPeriod}-`);
+  const start = new Date(`${selectedPeriod}T00:00:00Z`);
+  const candidate = new Date(`${date}T00:00:00Z`);
+  if (Number.isNaN(start.getTime()) || Number.isNaN(candidate.getTime())) return false;
+  const end = new Date(start);
+  end.setUTCDate(end.getUTCDate() + 7);
+  return candidate >= start && candidate < end;
+}
+
+function buildDashboard(raw, sourceId, scope, requestedPeriod) {
+  const periods = availablePeriods(raw, scope, sourceId);
+  const selectedPeriod = periods.includes(requestedPeriod) ? requestedPeriod : periods[0] || null;
+  if (!selectedPeriod) {
+    return { availablePeriods: [], selectedPeriod: null, summary: { models: [], totals: sumModels([]) }, days: [] };
+  }
+
+  const scopeRow = (raw[scope] || []).find(row => row.period === selectedPeriod);
+  const summaryAgent = findAgentRow(scopeRow, sourceId);
+  const summary = summaryAgent
+    ? normalizeAgentRow(sourceId, selectedPeriod, summaryAgent)
+    : { models: [], totals: sumModels([]) };
+  const days = (raw.daily || [])
+    .filter(row => dateInsideScope(String(row.period || ''), scope, selectedPeriod))
+    .flatMap(row => {
+      const agent = findAgentRow(row, sourceId);
+      return agent ? [normalizeAgentRow(sourceId, String(row.period), agent)] : [];
+    });
+  return { availablePeriods: periods, selectedPeriod, summary, days };
+}
+
+class UsageService {
+  constructor(options = {}) {
+    this.runner = options.runner || null;
+    this.timezone = options.timezone || defaultTimezone();
+    this.cacheTtlMs = options.cacheTtlMs ?? CACHE_TTL_MS;
+    this.logger = options.logger || { debug() {} };
+    this.cached = null;
+    this.loading = null;
+  }
+
+  async getSnapshot(refresh = false) {
+    const fresh = this.cached && Date.now() - this.cached.loadedAt < this.cacheTtlMs;
+    if (!refresh && fresh) return this.cached;
+    if (!refresh && this.cached) {
+      this.loadSnapshot().catch(error => this.logger.debug(`Background usage refresh failed: ${error.message}`));
+      return this.cached;
+    }
+    return this.loadSnapshot();
+  }
+
+  async loadSnapshot() {
+    if (this.loading) return this.loading;
+    if (!this.runner) this.runner = new CcusageRunner();
+    this.loading = this.runner.loadAllPeriods(this.timezone)
+      .then(raw => {
+        this.cached = { raw, loadedAt: Date.now(), generatedAt: new Date().toISOString() };
+        return this.cached;
+      })
+      .finally(() => { this.loading = null; });
+    return this.loading;
+  }
+
+  async listSources(refresh = false) {
+    const snapshot = await this.getSnapshot(refresh);
+    const present = new Set();
+    for (const scope of ['daily', 'weekly', 'monthly']) {
+      for (const row of snapshot.raw[scope] || []) {
+        for (const agent of row.agents || []) present.add(agent.agent);
+      }
+    }
+    return {
+      sources: SOURCES.filter(source => present.has(source.id)),
+      generatedAt: snapshot.generatedAt,
+      timezone: this.timezone,
+      engine: { name: 'ccusage', version: ccusageVersion(), pricingMode: 'embedded' }
+    };
+  }
+
+  async getDashboard(sourceId, scope, selectedPeriod, refresh = false) {
+    const source = getUsageSource(sourceId);
+    if (!source) {
+      const error = new Error('Unsupported usage source');
+      error.statusCode = 400;
+      throw error;
+    }
+    if (!SCOPES.has(scope)) {
+      const error = new Error('Scope must be weekly or monthly');
+      error.statusCode = 400;
+      throw error;
+    }
+    const snapshot = await this.getSnapshot(refresh);
+    return {
+      source,
+      scope,
+      ...buildDashboard(snapshot.raw, source.id, scope, selectedPeriod),
+      generatedAt: snapshot.generatedAt,
+      timezone: this.timezone,
+      engine: { name: 'ccusage', version: ccusageVersion(), pricingMode: 'embedded' },
+      cost: source.id === 'codex' ? {
+        basis: 'ccusage estimate for Codex GPT models',
+        note: 'Estimated from ccusage model pricing; it is not an actual provider bill.'
+      } : null
+    };
+  }
+}
+
+module.exports = {
+  UsageService,
+  availablePeriods,
+  buildDashboard,
+  dateInsideScope,
+  isGptModel,
+  modelCost,
+  normalizeAgentRow,
+  normalizeModel,
+  sumModels
+};

package/lib/web/claude.js

@@ -486,15 +486,29 @@
         }
 
         function inlineMarkdown(text) {
+            const protectedSegments = [];
+            const protect = value => `\uE000${protectedSegments.push(value) - 1}\uE001`;
+            const restore = value => value.replace(/\uE000(\d+)\uE001/g, (_match, index) => protectedSegments[Number(index)] || '');
+            const formatText = value => {
+                const codeSegments = [];
+                const protectCode = code => `\uE002${codeSegments.push(code) - 1}\uE003`;
+                const restoreCode = formatted => formatted.replace(/\uE002(\d+)\uE003/g, (_match, index) => codeSegments[Number(index)] || '');
+                let formatted = value.replace(/`([^`]+)`/g, (_match, code) => protectCode(`<code>${code}</code>`));
+                formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+                formatted = formatted.replace(/(^|[^\p{L}\p{N}_])__([^_\n]+)__(?![\p{L}\p{N}_])/gu, '$1<strong>$2</strong>');
+                formatted = formatted.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+                formatted = formatted.replace(/(^|[^\p{L}\p{N}_])_([^_\n]+)_(?![\p{L}\p{N}_])/gu, '$1<em>$2</em>');
+                return restoreCode(formatted);
+            };
+
             let html = escapeHtml(text || '');
-            html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-            html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-            html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
-            html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
-            html = html.replace(/_([^_\n]+)_/g, '<em>$1</em>');
-            html = html.replace(/!\[([^\]]*)\]\((https?:\/\/[^)\s]+)\)/g, '<img src="$2" alt="$1">');
-            html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-            return html;
+            html = html.replace(/`([^`]+)`|!\[([^\]]*)\]\((https?:\/\/[^)\s]+)\)|\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g,
+                (_match, code, alt, imageUrl, label, linkUrl) => {
+                    if (code !== undefined) return protect(`<code>${code}</code>`);
+                    if (imageUrl !== undefined) return protect(`<img src="${imageUrl}" alt="${alt}">`);
+                    return protect(`<a href="${linkUrl}" target="_blank" rel="noopener noreferrer">${formatText(label)}</a>`);
+                });
+            return restore(formatText(html));
         }
 
         function parseMarkdownFenceOpener(line) {

package/lib/web/index.html

@@ -21,7 +21,18 @@
                 <h1><img class="header-logo" src="logo.svg" alt="">Glad</h1>
                 <div class="header-actions">
                     <button class="header-action-btn" onclick="showToolModal()" title="New AI session"><span>+</span><span>Session</span></button>
-                    <button class="header-action-btn" onclick="showScheduleModal()" title="New scheduled task"><span>+</span><span>Task</span></button>
+                    <button id="usage-dashboard-button" class="header-action-btn icon-only" type="button"
+                        onclick="showUsageSourceModal()" title="Usage dashboard" aria-label="Usage dashboard">
+                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M4 19V10"></path><path d="M10 19V5"></path><path d="M16 19v-7"></path><path d="M22 19V2"></path>
+                        </svg>
+                    </button>
+                    <button id="schedule-create-button" class="header-action-btn icon-only" type="button"
+                        onclick="showScheduleModal()" title="New scheduled task" aria-label="New scheduled task">
+                        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                            <circle cx="12" cy="13" r="8"></circle><path d="M12 9v4l2.5 1.5"></path><path d="M9 2h6"></path><path d="M12 2v3"></path>
+                        </svg>
+                    </button>
                     <button id="app-settings-button" class="header-action-btn icon-only" type="button"
                         onclick="openSettings()" title="Settings" aria-label="Settings">
                         <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
@@ -44,6 +55,67 @@
         </div>
     </div>
 
+    <!-- Usage Dashboard View -->
+    <div id="usage-view" class="view">
+        <div class="usage-nav">
+            <button class="usage-nav-button" type="button" onclick="showLobby()" aria-label="Back to lobby">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                Lobby
+            </button>
+            <div class="usage-nav-title">
+                <strong id="usage-source-title">Usage</strong>
+                <span id="usage-updated-at"></span>
+            </div>
+            <div class="usage-nav-actions">
+                <button class="icon-btn usage-nav-icon" type="button" onclick="showUsageSourceModal()" title="Change CLI" aria-label="Change CLI">
+                    <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg>
+                </button>
+                <button id="usage-refresh-button" class="icon-btn usage-nav-icon" type="button" onclick="refreshUsageDashboard()" title="Refresh usage" aria-label="Refresh usage">
+                    <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"></path><polyline points="21 3 21 9 15 9"></polyline></svg>
+                </button>
+            </div>
+        </div>
+        <main class="usage-content">
+            <div class="usage-filter-bar">
+                <div class="usage-period-toggle" role="tablist" aria-label="Usage scope">
+                    <button id="usage-scope-weekly" class="active" type="button" onclick="setUsageScope('weekly')">Week</button>
+                    <button id="usage-scope-monthly" type="button" onclick="setUsageScope('monthly')">Month</button>
+                </div>
+                <label class="usage-period-picker">
+                    <span>Period</span>
+                    <select id="usage-period-select" onchange="selectUsagePeriod(this.value)" aria-label="Select period"></select>
+                </label>
+            </div>
+            <div id="usage-loading" class="usage-state">Loading usage data...</div>
+            <div id="usage-dashboard" hidden>
+                <section id="usage-summary" class="usage-summary usage-summary-totals" aria-label="All-model totals"></section>
+                <section class="usage-panel">
+                    <div class="usage-panel-heading"><div><h2>Model summary</h2><p>All models in the selected period.</p></div></div>
+                    <div id="usage-model-summary" class="usage-table-wrap"></div>
+                </section>
+                <section class="usage-panel">
+                    <div class="usage-panel-heading">
+                        <div><h2>Tokens by day</h2><p>Daily totals stacked by model.</p></div>
+                        <div id="usage-token-legend" class="usage-legend" aria-label="Token chart model legend"></div>
+                    </div>
+                    <div id="usage-token-chart" class="usage-chart"></div>
+                </section>
+                <section id="usage-cost-panel" class="usage-panel">
+                    <div class="usage-panel-heading">
+                        <div><h2>Cost by day</h2><p>ccusage estimates stacked by GPT model.</p></div>
+                        <div id="usage-cost-legend" class="usage-legend" aria-label="Cost chart model legend"></div>
+                    </div>
+                    <div id="usage-cost-chart" class="usage-chart"></div>
+                </section>
+                <section class="usage-panel">
+                    <div class="usage-panel-heading"><div><h2>Daily details</h2><p>Exact daily totals reported by ccusage.</p></div></div>
+                    <div id="usage-daily-table" class="usage-table-wrap"></div>
+                </section>
+                <div id="usage-engine-note" class="usage-pricing-note"></div>
+            </div>
+        </main>
+    </div>
+
     <!-- Terminal View -->
     <div id="terminal-view" class="view">
         <div id="top-ui">
@@ -259,6 +331,20 @@
         </div>
     </div>
 
+    <!-- Usage Source Modal -->
+    <div id="usage-source-overlay" onclick="closeUsageSourceModal(event)">
+        <div id="usage-source-modal" role="dialog" aria-modal="true" aria-labelledby="usage-source-modal-title" onclick="event.stopPropagation()">
+            <div class="usage-source-header">
+                <div>
+                    <h2 id="usage-source-modal-title">Usage Dashboard</h2>
+                    <p>Select a CLI with local usage history.</p>
+                </div>
+                <button class="icon-btn" type="button" onclick="closeUsageSourceModal()" aria-label="Close">×</button>
+            </div>
+            <div id="usage-sources-list"><p class="usage-modal-state">Reading local usage data...</p></div>
+        </div>
+    </div>
+
     <!-- App Settings Modal -->
     <div id="settings-modal-overlay" onclick="closeSettings(event)">
         <div id="settings-modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title" onclick="event.stopPropagation()">
@@ -367,5 +453,6 @@
     <script src="timed-inputs.js"></script>
     <script src="terminal-scroll.js"></script>
     <script src="git.js"></script>
+    <script src="usage.js"></script>
 </body>
 </html>

package/lib/web/styles.css

@@ -59,6 +59,74 @@
         .tool-item { padding: 12px; border-bottom: 1px solid #333; cursor: pointer; display: flex; align-items: center; border-radius: 8px; margin-top: 4px; }
         .tool-item:hover { background: rgba(255,255,255,0.05); }
         .tool-icon { width: 32px; height: 32px; background: #333; border-radius: 8px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
+        #usage-source-overlay { position: fixed; inset: 0; z-index: 10030; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: rgba(0,0,0,0.82); }
+        #usage-source-modal { width: 100%; max-width: 420px; max-height: min(680px, 90dvh); overflow-y: auto; padding: 20px; box-sizing: border-box; border-radius: 16px; background: var(--card-bg); box-shadow: 0 20px 40px rgba(0,0,0,0.45); }
+        .usage-source-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
+        .usage-source-header h2 { margin: 0; font-size: 20px; }
+        .usage-source-header p { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; }
+        .usage-source-header .icon-btn { font-size: 25px; line-height: 1; }
+        .usage-source-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 5px; box-sizing: border-box; border: 0; border-radius: 10px; background: transparent; color: #fff; text-align: left; cursor: pointer; }
+        .usage-source-item:hover, .usage-source-item:active { background: rgba(255,255,255,0.07); }
+        .usage-source-badge { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0,122,255,0.18); color: #78b7ff; font-size: 12px; font-weight: 850; letter-spacing: .03em; }
+        .usage-source-copy { min-width: 0; flex: 1; }
+        .usage-source-copy strong { display: block; font-size: 15px; }
+        .usage-source-copy span { display: block; margin-top: 3px; color: var(--text-dim); font-size: 11px; }
+        .usage-source-arrow { color: var(--text-dim); font-size: 20px; }
+        .usage-modal-state { padding: 26px 8px; color: var(--text-dim); text-align: center; font-size: 13px; line-height: 1.5; }
+
+        #usage-view { background: #09090a; }
+        .usage-nav { min-height: 54px; flex: 0 0 auto; display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) minmax(90px, 1fr); align-items: center; gap: 8px; padding: env(safe-area-inset-top) 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(18,18,18,0.96); box-sizing: content-box; }
+        .usage-nav-button { display: inline-flex; align-items: center; justify-self: start; gap: 4px; padding: 8px 0; border: 0; background: none; color: var(--primary); font-size: 15px; font-weight: 600; cursor: pointer; }
+        .usage-nav-title { min-width: 0; text-align: center; }
+        .usage-nav-title strong { display: block; overflow: hidden; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
+        .usage-nav-title span { display: block; min-height: 13px; margin-top: 2px; overflow: hidden; color: var(--text-dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+        .usage-nav-actions { display: flex; justify-self: end; gap: 8px; }
+        .usage-nav-icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--primary); }
+        .usage-nav-icon.loading svg { animation: usage-spin .8s linear infinite; }
+        @keyframes usage-spin { to { transform: rotate(360deg); } }
+        .usage-content { flex: 1; overflow-y: auto; padding: 18px max(16px, calc((100vw - 1120px) / 2)) calc(28px + env(safe-area-inset-bottom)); box-sizing: border-box; }
+        .usage-filter-bar { width: min(100%, 680px); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); align-items: end; gap: 12px; margin: 0 auto 18px; }
+        .usage-period-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: var(--card-bg); }
+        .usage-period-toggle button { min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 750; cursor: pointer; }
+        .usage-period-toggle button.active { background: var(--primary); color: #fff; }
+        .usage-period-picker span { display: block; margin: 0 0 5px 2px; color: var(--text-dim); font-size: 10px; font-weight: 750; text-transform: uppercase; }
+        .usage-period-picker select { width: 100%; min-height: 42px; padding: 8px 34px 8px 11px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; background: var(--card-bg); color: #fff; font-size: 13px; font-weight: 650; outline: none; }
+        .usage-state { padding: 70px 16px; color: var(--text-dim); text-align: center; font-size: 14px; line-height: 1.6; }
+        .usage-state.error { color: #ff6b61; }
+        .usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
+        .usage-summary.usage-summary-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+        .usage-summary.usage-summary-totals .usage-summary-card:only-child { grid-column: 1 / -1; }
+        .usage-summary-card { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; background: var(--card-bg); }
+        .usage-summary-card .label { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 12px; font-weight: 650; }
+        .usage-summary-card .dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
+        .usage-summary-card .value { display: block; margin-top: 9px; overflow: hidden; color: #fff; font-size: clamp(20px, 3vw, 29px); font-weight: 760; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
+        .usage-summary-card .exact { display: block; margin-top: 5px; overflow: hidden; color: #66666b; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
+        .usage-panel { margin-top: 12px; padding: 17px; border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; background: var(--card-bg); }
+        .usage-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+        .usage-panel-heading h2 { margin: 0; font-size: 16px; }
+        .usage-panel-heading p { margin: 5px 0 0; color: var(--text-dim); font-size: 11px; }
+        .usage-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: var(--text-dim); font-size: 10px; }
+        .usage-legend span { display: inline-flex; align-items: center; gap: 4px; }
+        .usage-legend i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
+        .usage-summary-card .dot.tokens { background: #0a84ff; }
+        .usage-summary-card .dot.cost { background: #ff9f0a; }
+        .usage-chart { display: flex; flex-direction: column; gap: 9px; }
+        .usage-chart-row { display: grid; grid-template-columns: 82px minmax(80px, 1fr) 82px; align-items: center; gap: 10px; min-height: 18px; }
+        .usage-chart-label { overflow: hidden; color: #b5b5ba; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
+        .usage-chart-track { height: 10px; display: flex; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.06); }
+        .usage-chart-track span { display: block; height: 100%; min-width: 0; }
+        .usage-chart-total { color: #77777c; font-size: 10px; text-align: right; white-space: nowrap; }
+        .usage-table-wrap { overflow-x: auto; }
+        .usage-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+        .usage-table th { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-dim); font-size: 10px; font-weight: 750; text-align: right; white-space: nowrap; }
+        .usage-table th:first-child, .usage-table td:first-child { padding-left: 0; text-align: left; }
+        .usage-table th:last-child, .usage-table td:last-child { padding-right: 0; }
+        .usage-table td { padding: 11px 10px; border-bottom: 1px solid rgba(255,255,255,0.055); color: #d8d8dc; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+        .usage-table tr:last-child td { border-bottom: 0; }
+        .usage-table tfoot td { border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 0; color: #fff; font-weight: 750; }
+        .usage-models { max-width: 220px; overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; }
+        .usage-pricing-note { margin: 14px 3px 0; color: #6f6f74; font-size: 10px; line-height: 1.5; text-align: center; }
+        .usage-empty { padding: 30px 10px; color: var(--text-dim); text-align: center; font-size: 13px; }
         #terminal-view { background: #000; overflow-anchor: none; position: relative; }
         #top-ui { flex-shrink: 0; background: #121212; border-bottom: 1px solid #222; z-index: 2000; padding-top: env(safe-area-inset-top); position: relative; }
         #nav-bar { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid #222; }
@@ -414,6 +482,15 @@
         .step-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.04); }
         .step-grid { display: grid; grid-template-columns: minmax(110px, 150px) 1fr auto; gap: 8px; align-items: center; }
         @media (max-width: 640px) {
+            .usage-content { padding: 14px 10px calc(24px + env(safe-area-inset-bottom)); }
+            .usage-filter-bar { grid-template-columns: 1fr; gap: 9px; }
+            .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+            .usage-summary-card { padding: 13px; }
+            .usage-panel { padding: 13px; }
+            .usage-panel-heading { flex-direction: column; gap: 10px; }
+            .usage-legend { justify-content: flex-start; }
+            .usage-chart-row { grid-template-columns: 70px minmax(70px, 1fr); gap: 8px; }
+            .usage-chart-total { display: none; }
             .schedule-row { flex-direction: column; }
             .schedule-actions { justify-content: flex-start; }
             .step-grid { grid-template-columns: 1fr; }
@@ -439,6 +516,10 @@
             #codex-chat-container { padding: 10px 10px calc(22px + env(safe-area-inset-bottom)); }
             .codex-message-block.user { max-width: 94%; }
             .claude-permission-actions { justify-content: flex-start; }
+            .usage-nav { grid-template-columns: 78px minmax(0, 1fr) 78px; padding-left: 10px; padding-right: 10px; }
+            .usage-nav-actions { gap: 5px; }
+            .usage-nav-icon { width: 32px; height: 32px; }
+            .usage-summary-card .value { font-size: 21px; }
         }
         @media (max-width: 430px) {
             #nav-bar > div:last-child .icon-btn:not(#codex-terminal-switch) { width: 34px; font-size: 0 !important; gap: 0 !important; }

package/lib/web/usage.js

@@ -0,0 +1,323 @@
+        const usageState = {
+            source: null,
+            scope: 'weekly',
+            selectedPeriod: null,
+            sources: [],
+            requestSequence: 0
+        };
+
+        const usageModelColors = [
+            '#0a84ff', '#30d158', '#bf5af2', '#ff9f0a', '#ff453a', '#64d2ff',
+            '#ffd60a', '#5e5ce6', '#ff375f', '#66d4cf', '#ac8e68', '#8e8e93'
+        ];
+
+        function formatExactTokens(value) {
+            return new Intl.NumberFormat().format(Number(value) || 0);
+        }
+
+        function formatCompactNumber(value) {
+            const number = Number(value) || 0;
+            if (number < 1000) return formatExactTokens(number);
+            return new Intl.NumberFormat(undefined, {
+                notation: 'compact',
+                maximumFractionDigits: number >= 1000000 ? 2 : 1
+            }).format(number);
+        }
+
+        function formatEstimatedCost(value, compact = false) {
+            if (value === null || value === undefined) return '—';
+            const amount = Number(value) || 0;
+            return new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: 'USD',
+                notation: compact && amount >= 1000 ? 'compact' : 'standard',
+                minimumFractionDigits: compact ? 2 : (amount < 1 ? 3 : 2),
+                maximumFractionDigits: compact ? 2 : (amount < 1 ? 4 : 2)
+            }).format(amount);
+        }
+
+        function closeUsageSourceModal(event) {
+            if (event && event.target.id !== 'usage-source-overlay') return;
+            document.getElementById('usage-source-overlay').style.display = 'none';
+        }
+
+        async function showUsageSourceModal(options = {}) {
+            const overlay = document.getElementById('usage-source-overlay');
+            overlay.style.display = 'flex';
+            const hasCachedSources = usageState.sources.length > 0;
+            if (hasCachedSources && !options.refresh) {
+                renderUsageSources();
+            } else {
+                document.getElementById('usage-sources-list').innerHTML = '<p class="usage-modal-state">Reading local usage data...</p>';
+            }
+            const list = document.getElementById('usage-sources-list');
+            try {
+                const suffix = options.refresh ? '?refresh=1' : '';
+                const response = await fetchWithTimeout(`/api/usage/sources${suffix}`, {}, 60000);
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
+                usageState.sources = Array.isArray(data.sources) ? data.sources : [];
+                renderUsageSources();
+            } catch (error) {
+                if (hasCachedSources) return;
+                list.innerHTML = `<div class="usage-modal-state">Unable to read usage data.<br>${escapeHtml(error.message)}<br><button class="btn-retry" type="button" onclick="showUsageSourceModal({ refresh: true })">Retry</button></div>`;
+            }
+        }
+
+        function renderUsageSources() {
+            const list = document.getElementById('usage-sources-list');
+            if (!usageState.sources.length) {
+                list.innerHTML = '<p class="usage-modal-state">No supported local CLI usage history was found.</p>';
+                return;
+            }
+            list.innerHTML = usageState.sources.map(source => `
+                <button class="usage-source-item" type="button" onclick="openUsageDashboard('${escapeHtml(source.id)}')">
+                    <span class="usage-source-badge">${escapeHtml(source.badge)}</span>
+                    <span class="usage-source-copy"><strong>${escapeHtml(source.label)}</strong><span>Local token history</span></span>
+                    <span class="usage-source-arrow">›</span>
+                </button>`).join('');
+        }
+
+        async function openUsageDashboard(sourceId) {
+            const source = usageState.sources.find(item => item.id === sourceId);
+            usageState.source = source || { id: sourceId, label: sourceId };
+            usageState.selectedPeriod = null;
+            closeUsageSourceModal();
+            document.querySelectorAll('.view').forEach(view => view.classList.remove('active'));
+            document.getElementById('usage-view').classList.add('active');
+            document.getElementById('usage-source-title').textContent = `${usageState.source.label} Usage`;
+            await loadUsageDashboard();
+        }
+
+        async function setUsageScope(scope) {
+            if (!['weekly', 'monthly'].includes(scope) || usageState.scope === scope) return;
+            usageState.scope = scope;
+            usageState.selectedPeriod = null;
+            updateUsageScopeButtons();
+            if (usageState.source) await loadUsageDashboard();
+        }
+
+        function updateUsageScopeButtons() {
+            for (const scope of ['weekly', 'monthly']) {
+                document.getElementById(`usage-scope-${scope}`).classList.toggle('active', usageState.scope === scope);
+            }
+        }
+
+        async function selectUsagePeriod(period) {
+            if (!period || usageState.selectedPeriod === period) return;
+            usageState.selectedPeriod = period;
+            await loadUsageDashboard();
+        }
+
+        async function refreshUsageDashboard() {
+            if (!usageState.source) return;
+            await loadUsageDashboard(true);
+        }
+
+        function setUsageLoading(loading, message = 'Loading usage data...') {
+            const state = document.getElementById('usage-loading');
+            const dashboard = document.getElementById('usage-dashboard');
+            const refresh = document.getElementById('usage-refresh-button');
+            state.classList.remove('error');
+            state.textContent = message;
+            state.hidden = !loading;
+            dashboard.hidden = loading;
+            refresh.classList.toggle('loading', loading);
+            refresh.disabled = loading;
+        }
+
+        async function loadUsageDashboard(refresh = false) {
+            const requestSequence = ++usageState.requestSequence;
+            setUsageLoading(true);
+            try {
+                const query = new URLSearchParams({ source: usageState.source.id, scope: usageState.scope });
+                if (usageState.selectedPeriod) query.set('period', usageState.selectedPeriod);
+                if (refresh) query.set('refresh', '1');
+                const response = await fetchWithTimeout(`/api/usage/report?${query}`, {}, 60000);
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
+                if (requestSequence !== usageState.requestSequence) return;
+                renderUsageDashboard(data);
+            } catch (error) {
+                if (requestSequence !== usageState.requestSequence) return;
+                const state = document.getElementById('usage-loading');
+                state.classList.add('error');
+                state.innerHTML = `Unable to load usage: ${escapeHtml(error.message)}<br><button class="btn-retry" type="button" onclick="loadUsageDashboard(true)">Retry</button>`;
+                state.hidden = false;
+                document.getElementById('usage-dashboard').hidden = true;
+            } finally {
+                if (requestSequence !== usageState.requestSequence) return;
+                const refreshButton = document.getElementById('usage-refresh-button');
+                refreshButton.classList.remove('loading');
+                refreshButton.disabled = false;
+            }
+        }
+
+        function renderPeriodPicker(report) {
+            usageState.selectedPeriod = report.selectedPeriod;
+            const select = document.getElementById('usage-period-select');
+            select.innerHTML = (report.availablePeriods || []).map(period =>
+                `<option value="${escapeHtml(period)}"${period === report.selectedPeriod ? ' selected' : ''}>${escapeHtml(period)}</option>`
+            ).join('');
+            select.disabled = !report.availablePeriods || report.availablePeriods.length === 0;
+        }
+
+        function totalSummaryCard(label, value, cost = false) {
+            const display = cost ? formatEstimatedCost(value, true) : formatCompactNumber(value);
+            const exact = cost ? formatEstimatedCost(value) : `${formatExactTokens(value)} tokens`;
+            return `<article class="usage-summary-card" title="${escapeHtml(exact)}">
+                <span class="label"><i class="dot ${cost ? 'cost' : 'tokens'}"></i>${escapeHtml(label)}</span>
+                <strong class="value">${escapeHtml(display)}</strong>
+                <span class="exact">${escapeHtml(exact)}</span>
+            </article>`;
+        }
+
+        function renderAllModelTotals(report) {
+            const totals = report.summary && report.summary.totals ? report.summary.totals : {};
+            const cards = [totalSummaryCard('All-model tokens', totals.totalTokens)];
+            if (totals.estimatedCostUSD !== null && totals.estimatedCostUSD !== undefined) {
+                cards.push(totalSummaryCard('All GPT cost', totals.estimatedCostUSD, true));
+            }
+            document.getElementById('usage-summary').innerHTML = cards.join('');
+        }
+
+        function renderModelSummary(report) {
+            const models = report.summary && Array.isArray(report.summary.models) ? report.summary.models : [];
+            const totals = report.summary && report.summary.totals ? report.summary.totals : {};
+            const hasCost = totals.estimatedCostUSD !== null && totals.estimatedCostUSD !== undefined;
+            const container = document.getElementById('usage-model-summary');
+            if (!models.length) {
+                container.innerHTML = '<div class="usage-empty">No usage in this period.</div>';
+                return;
+            }
+            container.innerHTML = `<table class="usage-table">
+                <thead><tr><th>Model</th><th>Uncached input</th><th>Cached input</th><th>Output</th><th>Total tokens</th>${hasCost ? '<th>Cost</th>' : ''}</tr></thead>
+                <tbody>${models.map(model => `<tr>
+                    <td class="usage-models" title="${escapeHtml(model.modelName)}">${escapeHtml(model.modelName)}</td>
+                    <td>${escapeHtml(formatExactTokens(model.uncachedInputTokens))}</td>
+                    <td>${escapeHtml(formatExactTokens(model.cachedInputTokens))}</td>
+                    <td>${escapeHtml(formatExactTokens(model.outputTokens))}</td>
+                    <td>${escapeHtml(formatExactTokens(model.totalTokens))}</td>
+                    ${hasCost ? `<td>${escapeHtml(formatEstimatedCost(model.estimatedCostUSD))}</td>` : ''}
+                </tr>`).join('')}</tbody>
+                <tfoot><tr><td>All models</td><td>${escapeHtml(formatExactTokens(totals.uncachedInputTokens))}</td><td>${escapeHtml(formatExactTokens(totals.cachedInputTokens))}</td><td>${escapeHtml(formatExactTokens(totals.outputTokens))}</td><td>${escapeHtml(formatExactTokens(totals.totalTokens))}</td>${hasCost ? `<td>${escapeHtml(formatEstimatedCost(totals.estimatedCostUSD))}</td>` : ''}</tr></tfoot>
+            </table>`;
+        }
+
+        function collectChartModels(days, metric) {
+            const names = [];
+            const seen = new Set();
+            for (const day of days) {
+                for (const model of day.models || []) {
+                    const value = model[metric];
+                    if ((value === null || value === undefined || Number(value) <= 0) || seen.has(model.modelName)) continue;
+                    seen.add(model.modelName);
+                    names.push(model.modelName);
+                }
+            }
+            return names.sort((a, b) => a.localeCompare(b));
+        }
+
+        function modelColorMap(modelNames) {
+            return new Map(modelNames.map((name, index) => [
+                name,
+                usageModelColors[index] || `hsl(${(index * 47) % 360} 75% 58%)`
+            ]));
+        }
+
+        function renderModelLegend(elementId, modelNames, colors) {
+            document.getElementById(elementId).innerHTML = modelNames.map(name =>
+                `<span title="${escapeHtml(name)}"><i style="background:${colors.get(name)}"></i>${escapeHtml(name)}</span>`
+            ).join('');
+        }
+
+        function renderStackedModelChart(report, options) {
+            const days = report.days || [];
+            const modelNames = collectChartModels(days, options.metric);
+            const colors = modelColorMap(modelNames);
+            const container = document.getElementById(options.containerId);
+            renderModelLegend(options.legendId, modelNames, colors);
+            if (!days.length || !modelNames.length) {
+                container.innerHTML = `<div class="usage-empty">${escapeHtml(options.emptyText)}</div>`;
+                return false;
+            }
+            const dayTotals = days.map(day => (day.models || []).reduce((sum, model) => {
+                const value = model[options.metric];
+                return sum + (value === null || value === undefined ? 0 : Number(value) || 0);
+            }, 0));
+            const maximum = Math.max(...dayTotals, 1);
+            container.innerHTML = days.map((day, dayIndex) => {
+                const segments = modelNames.map(name => {
+                    const model = (day.models || []).find(item => item.modelName === name);
+                    const value = model && model[options.metric] !== null ? Number(model[options.metric]) || 0 : 0;
+                    if (value <= 0) return '';
+                    const title = `${name}: ${options.formatExact(value)}`;
+                    return `<span title="${escapeHtml(title)}" style="width:${value / maximum * 100}%;background:${colors.get(name)}"></span>`;
+                }).join('');
+                return `<div class="usage-chart-row">
+                    <span class="usage-chart-label">${escapeHtml(day.period)}</span>
+                    <div class="usage-chart-track">${segments}</div>
+                    <span class="usage-chart-total">${escapeHtml(options.formatCompact(dayTotals[dayIndex]))}</span>
+                </div>`;
+            }).join('');
+            return true;
+        }
+
+        function renderDailyTable(report) {
+            const days = (report.days || []).slice().reverse();
+            const hasCost = days.some(day => day.totals && day.totals.estimatedCostUSD !== null);
+            const container = document.getElementById('usage-daily-table');
+            if (!days.length) {
+                container.innerHTML = '<div class="usage-empty">No daily usage in this period.</div>';
+                return;
+            }
+            container.innerHTML = `<table class="usage-table">
+                <thead><tr><th>Date</th><th>Total tokens</th>${hasCost ? '<th>Cost</th>' : ''}<th>Models</th></tr></thead>
+                <tbody>${days.map(day => `<tr>
+                    <td>${escapeHtml(day.period)}</td>
+                    <td>${escapeHtml(formatExactTokens(day.totals.totalTokens))}</td>
+                    ${hasCost ? `<td>${escapeHtml(formatEstimatedCost(day.totals.estimatedCostUSD))}</td>` : ''}
+                    <td class="usage-models" title="${escapeHtml(day.models.map(model => model.modelName).join(', '))}">${escapeHtml(day.models.map(model => model.modelName).join(', ') || '—')}</td>
+                </tr>`).join('')}</tbody>
+            </table>`;
+        }
+
+        function renderEngineNote(report) {
+            const engine = report.engine || { name: 'ccusage', version: 'unknown' };
+            const pricingMode = engine.pricingMode === 'embedded' ? 'embedded pricing' : 'pricing';
+            const parts = [`Statistics and ${pricingMode} calculated by ${engine.name} ${engine.version}`];
+            if (report.cost) parts.push(report.cost.note);
+            else parts.push('Cost is only shown for GPT models used by Codex.');
+            document.getElementById('usage-engine-note').textContent = parts.join(' · ');
+        }
+
+        function renderUsageDashboard(report) {
+            setUsageLoading(false);
+            updateUsageScopeButtons();
+            renderPeriodPicker(report);
+            const updated = report.generatedAt ? new Date(report.generatedAt) : null;
+            document.getElementById('usage-updated-at').textContent = updated && !Number.isNaN(updated.getTime())
+                ? `Updated ${updated.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+                : '';
+            renderAllModelTotals(report);
+            renderModelSummary(report);
+            renderStackedModelChart(report, {
+                containerId: 'usage-token-chart',
+                legendId: 'usage-token-legend',
+                metric: 'totalTokens',
+                emptyText: 'No token data in this period.',
+                formatExact: value => `${formatExactTokens(value)} tokens`,
+                formatCompact: formatCompactNumber
+            });
+            const hasCostChart = renderStackedModelChart(report, {
+                containerId: 'usage-cost-chart',
+                legendId: 'usage-cost-legend',
+                metric: 'estimatedCostUSD',
+                emptyText: 'No Codex GPT cost estimate in this period.',
+                formatExact: formatEstimatedCost,
+                formatCompact: value => formatEstimatedCost(value, true)
+            });
+            document.getElementById('usage-cost-panel').hidden = !hasCostChart;
+            renderDailyTable(report);
+            renderEngineNote(report);
+        }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "bin": {
     "glad": "bin/cli.js"
@@ -52,6 +52,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/headless": "^6.0.0",
     "@xterm/xterm": "^5.5.0",
+    "ccusage": "20.0.20",
     "chalk": "^4.1.2",
     "commander": "^11.0.0",
     "conf": "^10.2.0",