glad-web 1.0.39 → 1.0.41

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/codex.js

@@ -1,4 +1,7 @@
         function codexText(text) { return escapeHtml(text || '').replace(/\n/g, '<br>'); }
+        function codexReadyForInput() {
+            return codexState.presentation === 'structured' && codexState.status === 'idle' && !codexState.aborting;
+        }
         function codexJson(value) {
             if (typeof value === 'string') return value;
             try { return JSON.stringify(value || {}, null, 2); } catch (_) { return String(value || ''); }
@@ -324,7 +327,7 @@
                 i += 1;
             }
             for (const request of codexPendingPermissions) if (!usedPermissions.has(request.id)) parts.push(renderCodexPermission(request));
-            const skillBubble = selectedCodexSkill && codexState.status === 'idle'
+            const skillBubble = selectedCodexSkill && codexReadyForInput()
                 ? `<div class="codex-skill-bubble" role="status" aria-label="Selected skill: ${escapeHtml(selectedCodexSkill.name)}"><span class="codex-skill-bubble-name">Skill · ${escapeHtml(selectedCodexSkill.name)}</span><button type="button" class="codex-skill-bubble-close" onclick="clearCodexSkillSelection()" title="Remove selected skill" aria-label="Remove selected skill">×</button></div>`
                 : '';
             const working = `<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"${codexState.status === 'running' ? '' : ' style="display:none"'}></div>`;
@@ -443,13 +446,18 @@
             const modelButton = document.getElementById('codex-model-btn');
             if (modelButton) modelButton.textContent = 'Model';
             const abort = document.getElementById('codex-abort-btn');
-            if (abort) abort.disabled = !codexState.canAbort;
+            if (abort) {
+                abort.disabled = !codexState.canAbort;
+                abort.textContent = codexState.aborting ? 'Aborting…' : 'Abort';
+            }
             const compact = document.getElementById('codex-compact-btn');
             if (compact) { compact.disabled = !codexState.canCompact; compact.textContent = codexState.compacting ? 'Compacting' : 'Compact'; }
             const skills = document.getElementById('codex-skills-btn');
-            if (skills) { skills.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle'); skills.classList.toggle('primary', Boolean(selectedCodexSkill)); }
+            if (skills) { skills.disabled = !codexReadyForInput(); skills.classList.toggle('primary', Boolean(selectedCodexSkill)); }
+            const resume = document.getElementById('codex-resume-btn');
+            if (resume) resume.disabled = !codexReadyForInput();
             const fork = document.getElementById('codex-fork-btn');
-            if (fork) fork.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle');
+            if (fork) fork.disabled = !codexReadyForInput();
             const terminal = document.getElementById('codex-terminal-switch');
             if (terminal) { terminal.textContent = codexState.presentation === 'terminal' ? 'CHAT' : 'TERM'; terminal.disabled = codexState.presentation === 'structured' && !codexState.canSwitchToTerminal; terminal.title = codexState.presentation === 'terminal' ? 'Return to Codex chat' : 'Switch to Codex terminal'; }
             renderCodexStateBar();
@@ -464,6 +472,7 @@
             const pending = Number(codexState.pendingPermissionCount || codexPendingPermissions.filter(item => item.status === 'pending').length) || 0;
             const subagents = Number(codexState.activeSubagentCount || 0) || 0;
             const parts = [];
+            if (codexState.aborting) parts.push('<span class="claude-state-pill warn">Stopping Codex…</span>');
             if (pending || codexState.status === 'waiting_approval') parts.push(`<button type="button" class="claude-state-pill warn codex-approval-jump" onclick="jumpToCodexApproval()" title="Jump to pending approval" aria-label="Jump to pending approval">${pending || 1} approval${pending === 1 ? '' : 's'}<span aria-hidden="true">↓</span></button>`);
             if (subagents) parts.push(`<span class="claude-state-pill">${subagents} subagent${subagents === 1 ? '' : 's'} running</span>`);
             el.innerHTML = parts.join('');
@@ -589,7 +598,12 @@
             applyCodexState({ permissionMode, sandboxMode });
             sendCodexSettings({ permissionMode, sandboxMode });
         }
-        function abortCodexSession() { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-abort' })); }
+        function abortCodexSession() {
+            if (!codexState.canAbort || codexState.aborting || currentSocket?.readyState !== 1) return false;
+            currentSocket.send(JSON.stringify({ type: 'codex-abort' }));
+            applyCodexState({ aborting: true, canAbort: false });
+            return true;
+        }
         function requestCodexStatus() { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-status' })); }
         function compactCodexContext() {
             if (!codexState.canCompact || currentSocket?.readyState !== 1) return false;
@@ -599,6 +613,7 @@
         }
         function respondCodexPermission(id, decision) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-permission', id, decision })); }
         async function toggleCodexResumePanel() {
+            if (!codexReadyForInput()) return;
             codexResumePanelOpen = !codexResumePanelOpen;
             codexModelPanelOpen = false;
             codexForkPanelOpen = false;
@@ -615,7 +630,7 @@
             await loadCodexThreadPanel(panel, 'resume');
         }
         async function toggleCodexForkPanel() {
-            if (!(codexState.presentation === 'structured' && codexState.status === 'idle')) return;
+            if (!codexReadyForInput()) return;
             codexForkPanelOpen = !codexForkPanelOpen;
             codexModelPanelOpen = false;
             codexResumePanelOpen = false;
@@ -889,7 +904,7 @@
         }
 
         async function toggleCodexSkillPanel() {
-            if (!(codexState.presentation === 'structured' && codexState.status === 'idle')) return;
+            if (!codexReadyForInput()) return;
             codexSkillPanelOpen = !codexSkillPanelOpen;
             codexModelPanelOpen = false;
             codexResumePanelOpen = false;

package/lib/web/composer.js

@@ -206,6 +206,7 @@
                 return;
             }
             if ((val || readyImageAttachments.length) && isCodexSession() && codexState.presentation === 'structured') {
+                if (!codexReadyForInput()) return;
                 if (currentSocket && currentSocket.readyState === 1) {
                     currentSocket.send(JSON.stringify({
                         type: 'codex-input',

package/lib/web/core.js

@@ -30,9 +30,19 @@
         let claudeResumeItemsLoaded = false;
         let claudeRenderFrame = null;
         let claudeApprovalJumpIndex = 0;
+        function createDefaultCodexState() {
+            return {
+                permissionMode: 'default', sandboxMode: 'default',
+                effectivePermissionMode: null, effectiveSandboxMode: null,
+                model: null, effort: null, status: 'idle', threadId: null,
+                presentation: 'structured', models: [], aborting: false,
+                canAbort: false, canCompact: false, compacting: false,
+                canSwitchToTerminal: false, canSwitchToStructured: false
+            };
+        }
         let codexMessages = [];
         let codexPendingPermissions = [];
-        let codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canCompact: false, compacting: false, canSwitchToTerminal: false, canSwitchToStructured: false };
+        let codexState = createDefaultCodexState();
         let codexModelPanelOpen = false;
         let codexModelCandidate = null;
         let codexResumePanelOpen = false;
@@ -226,14 +236,14 @@
                         : '';
                     html += `<div class="session-card">
                         <div class="session-info">
-                            <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button class="icon-btn" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
+                            <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button type="button" class="icon-btn session-edit-btn" title="Rename session" aria-label="Rename session" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
                             <p>${escapeHtml(s.tool)}</p>
                             <p>${new Date(s.startTime).toLocaleTimeString()}</p>
                         </div>
                         <div class="session-actions">
                             ${renderServerChanSessionAction(s)}
                             <button class="btn-join" onclick="joinSession('${s.id}', decodePathValue('${encodedName}'), '${escapeHtml(s.toolKey || '')}')">Connect</button>
-                            <button class="icon-btn btn-delete" onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+                            <button type="button" class="icon-btn btn-delete session-delete-btn" title="Delete session" aria-label="Delete session" onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
                         </div>
                         <div class="session-dir-row">
                             <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">

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/session.js

@@ -155,7 +155,7 @@
             document.getElementById('codex-prompt-panel').classList.remove('active');
             document.getElementById('codex-skill-panel').classList.remove('active');
             document.getElementById('codex-control-rail').scrollLeft = 0;
-            codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canCompact: false, compacting: false, canSwitchToTerminal: false, canSwitchToStructured: false };
+            codexState = createDefaultCodexState();
             setClaudeModeEnabled(false);
             applyCodexState(codexState);
             installCodexLazyDetailHandler();

package/lib/web/styles.css

@@ -11,8 +11,7 @@
         .header-action-btn.icon-only { width: 36px; padding: 0; }
         .header-action-btn:active { background: #0062cc; transform: scale(.97); }
         .btn-retry { background: #333; color: #fff; border: none; padding: 8px 16px; border-radius: 20px; margin-top: 10px; cursor: pointer; }
-        .session-card { background: var(--card-bg); border-radius: 12px; padding: 12px 16px 8px; margin-bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center; transition: transform 0.1s; position: relative; }
-        .session-card:active { transform: scale(0.98); }
+        .session-card { background: var(--card-bg); border-radius: 12px; padding: 12px 16px 8px; margin-bottom: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center; position: relative; }
         .completion-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; flex-shrink: 0; }
         .session-info { flex: 1; min-width: 0; }
         .session-info h3 { margin: 0 0 4px 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
@@ -29,6 +28,11 @@
         .btn-join { background: rgba(255,255,255,0.1); border: none; color: var(--primary); padding: 8px 14px; border-radius: 18px; font-weight: 600; font-size: 14px; cursor: pointer; }
         .icon-btn { color: var(--text-dim); background: none; border: none; padding: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
         .icon-btn:active { color: var(--text); }
+        .session-edit-btn, .session-delete-btn { position: relative; }
+        .session-edit-btn::before, .session-delete-btn::before { content: ""; position: absolute; }
+        .session-edit-btn::before { inset: -9px; }
+        .session-delete-btn::before { inset: -8px; }
+        .session-edit-btn svg, .session-delete-btn svg { pointer-events: none; }
         .btn-delete { color: #ff3b30; }
         #modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
         #tool-modal { background: var(--card-bg); width: 100%; max-width: 400px; border-radius: 16px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
@@ -59,6 +63,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 +486,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 +520,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; }