great-cto 3.52.1 → 3.54.0

package/board/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "great-cto",
   "description": "You already have the agent. This is everything around it. great_cto runs Claude Code as a pipeline of 72 specialist agents \u2014 an independent model checks each stage before the next builds on it, spending caps refuse rather than warn, and three decisions stay yours: what gets built, how, and whether it ships.",
-  "version": "3.52.1",
+  "version": "3.54.0",
   "author": {
     "name": "Alexander Velikiy",
     "url": "https://hashnode.com/@Greatcto"

package/board/packages/board/lib/routes.mjs

@@ -13,6 +13,7 @@ import { sseClients, notifHistory } from './state.mjs';
 import { autoRegisterProject, listProjects, resolveProjectCwd, resolveProjectInfo, getChangeTier, readProjectsRegistry, getRegistryDegradation } from './projects.mjs';
 import { readVerdictsWithHealth } from './verdicts.mjs';
 import { agentUsage, usageSnapshot } from '../../../scripts/lib/agent-usage.mjs';
+import { usageIndexSnapshot, summarizeUsage, readCodexTitles } from '../../../scripts/lib/session-usage.mjs';
 import { reviewerStatus } from '../../../scripts/lib/required-reviewers.mjs';
 import { readSessionStatus } from '../../../scripts/lib/session-status.mjs';
 import { readScores, summarizeScores } from '../../../scripts/lib/scores.mjs';
@@ -1492,6 +1493,31 @@ async function dispatch(req, res, url, cwd) {
     return true;
   }
 
+  // What Claude Code and Codex consumed on this machine — tokens, models, the
+  // heaviest conversations, tools, skills, agents, cache, Codex's plan window —
+  // read from the hosts' own session logs (scripts/lib/session-usage.mjs).
+  // Machine-wide like /api/agent-usage: the logs are one history. Served on the
+  // board's own host only; nothing here is sent anywhere.
+  if (pathname === '/api/usage') {
+    const rawDays = parseInt(url.searchParams.get('days') || '30', 10);
+    const days = Number.isFinite(rawDays) && rawDays > 0 ? Math.min(rawDays, 365) : 30;
+    const snap = boardSessionUsage().get();
+    let body;
+    if (snap.state !== 'ready') {
+      body = { state: snap.state, why: snap.why };
+    } else {
+      const sum = summarizeUsage(snap.index, { days, codexTitles: readCodexTitles() });
+      const ours = new Set(boardAgentNames());
+      for (const host of Object.keys(sum.lists)) {
+        sum.lists[host].agents = sum.lists[host].agents.map((a) => ({ ...a, ours: ours.has(a.name) }));
+      }
+      body = { ...sum, seen: snap.seen, files: snap.files };
+    }
+    res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
+    res.end(JSON.stringify(body));
+    return true;
+  }
+
   // Domain reviewers this project's PROJECT.md requires (archetype, packs,
   // compliance), each with whether a verdict exists — the list gate:ship refuses on.
   // Sessions in this project that wait for a person — written by the
@@ -2141,14 +2167,24 @@ async function dispatch(req, res, url, cwd) {
 
 
 let _usageSnap = null;
+function boardAgentNames() {
+  const agentsDir = path.join(path.dirname(new URL(import.meta.url).pathname), '..', '..', '..', 'agents');
+  try { return fs.readdirSync(agentsDir).filter((f) => f.endsWith('.md')).map((f) => f.slice(0, -3)); } catch { return []; }
+}
+
 function boardUsage() {
   if (!_usageSnap) {
-    const agentsDir = path.join(path.dirname(new URL(import.meta.url).pathname), '..', '..', '..', 'agents');
-    let agents = [];
-    try { agents = fs.readdirSync(agentsDir).filter((f) => f.endsWith('.md')).map((f) => f.slice(0, -3)); } catch { /* none: every count is unavailable-by-omission */ }
+    // No agents dir: every count is unavailable-by-omission.
+    const agents = boardAgentNames();
     _usageSnap = usageSnapshot({ compute: () => agentUsage({ agents }) });
   }
   return _usageSnap;
 }
 
+let _sessionUsageSnap = null;
+function boardSessionUsage() {
+  if (!_sessionUsageSnap) _sessionUsageSnap = usageIndexSnapshot();
+  return _sessionUsageSnap;
+}
+
 export { dispatch, secondOpinionForTree };

package/board/packages/board/lib/view-counter.mjs

@@ -21,12 +21,14 @@
 import fs from 'fs';
 import path from 'path';
 
-// The only view names the redesigned IA renders (BRD-R8): Decisions, Ledger,
-// Fleet, Harness, Settings, plus the demoted-to-deep-link `kanban`. Anything
-// else is rejected outright, before any filesystem write — an unknown view
-// name written to this file would silently corrupt the K2/K3 counts it
-// exists to protect.
-const VALID_VIEWS = ['decisions', 'ledger', 'fleet', 'harness', 'settings', 'kanban'];
+// The view names the board routes to (index.html `ROUTES`): Work, History,
+// Decisions, Ledger, Fleet, Harness, Usage, Settings, plus the demoted-to-deep-link
+// `kanban`. Anything else is rejected outright, before any filesystem write — an
+// unknown view name written to this file would silently corrupt the K2/K3 counts
+// it exists to protect. Work and History were routed and missing from this list,
+// so opening either answered 400 into the console; the test now pins the two
+// lists to each other.
+const VALID_VIEWS = ['work', 'history', 'decisions', 'ledger', 'fleet', 'harness', 'usage', 'settings', 'kanban'];
 
 function logFilePath(root) {
   return path.join(root, '.great_cto', 'view-counter.log');

package/board/packages/board/public/index.html

@@ -2244,6 +2244,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   font-size: var(--fs-body);
 }
 .judge-status[hidden] { display: none; }
+/* The "retry" link appears only when the live key check got no answer — a
+   degraded state, so no screenshot ever carried it, and it rendered in the
+   browser's default blue until the on-system check met it on 2026-10-06. */
+.judge-status a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.judge-status a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 
 /* What the judge CONCLUDED, under whether it is connected.
    The scores existed for weeks and no page read them: /api/scores had zero
@@ -2369,6 +2374,74 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 /* ── Metrics page ─────────────────────────────────────────────────────────── */
 .metrics-page { padding: 24px 32px; }
+
+/* Usage (great_cto-egkw) — two hosts side by side, every block in two columns
+   that fold into one at phone width. */
+.usage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.usage-chips {
+  display: inline-flex; gap: 4px; padding: 3px;
+  background: var(--bg-muted); border: 1px solid var(--border);
+}
+.usage-chip {
+  background: transparent; border: none; color: var(--text2);
+  padding: 5px 12px; min-height: 32px; cursor: pointer;
+  font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.05em;
+}
+.usage-chip:hover { color: var(--text); }
+.usage-chip.active { background: var(--accent); color: var(--on-accent); }
+.usage-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; margin-bottom: 20px; }
+.usage-card { background: var(--bg-card); border: 1px solid var(--border); padding: 16px 18px; min-width: 0; }
+.usage-card h3 { font-size: var(--fs-title-s); font-weight: 600; margin: 0 0 10px; color: var(--text); display: flex; justify-content: space-between; gap: 8px; }
+.usage-card h3 .muted { font-weight: 400; font-size: var(--fs-caption); }
+.usage-big { font-family: var(--display); font-size: var(--fs-num-m); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
+.usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
+.usage-stat { min-width: 0; }
+.usage-stat b { display: block; font-family: var(--mono); font-size: var(--fs-title-s); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
+.usage-stat span { font-size: var(--fs-caption); color: var(--text3); }
+.usage-limit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
+.usage-limit-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small); color: var(--text2); }
+.usage-limit-head b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
+.usage-meter { height: 8px; background: var(--bg-muted); border: 1px solid var(--border); margin: 6px 0; }
+.usage-meter > span { display: block; height: 100%; background: var(--accent); }
+.usage-meter.warn > span { background: var(--status-progress); }
+.usage-meter.full > span { background: var(--status-blocked); }
+.usage-sub { font-size: var(--fs-caption); color: var(--text3); line-height: 1.5; }
+.usage-note { font-size: var(--fs-small); color: var(--text2); line-height: 1.55; }
+.usage-chart svg { display: block; width: 100%; height: 120px; }
+.usage-axis { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: var(--fs-caption); color: var(--text3); margin-top: 4px; }
+.usage-axis span { white-space: nowrap; }
+.usage-axis span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.usage-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-caption); color: var(--text2); margin-top: 8px; }
+.usage-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
+.usage-table-wrap { overflow-x: auto; }
+.usage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
+.usage-table th { text-align: left; font-weight: 500; color: var(--text3); font-size: var(--fs-caption); padding: 4px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
+.usage-table td { padding: 6px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
+.usage-table td.num, .usage-table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.usage-title { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.usage-tag { display: inline-block; font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.04em; padding: 1px 5px; margin-left: 6px; border: 1px solid var(--border-strong); color: var(--text2); }
+.usage-share { display: inline-block; width: 48px; height: 6px; background: var(--bg-muted); margin-right: 6px; vertical-align: 1px; }
+.usage-share > span { display: block; height: 100%; background: var(--accent); }
+.usage-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
+.usage-sec-head .mp-section-label { margin: 0; }
+.usage-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-bottom: 20px; }
+.usage-list { list-style: none; margin: 0; padding: 0; }
+.usage-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: var(--fs-small); padding: 4px 0; position: relative; }
+.usage-list li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.usage-list li .n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text2); }
+.usage-list li .bar { grid-column: 1 / -1; height: 3px; background: var(--bg-muted); }
+.usage-list li .bar > span { display: block; height: 100%; background: var(--accent); opacity: 0.7; }
+.usage-line svg { display: block; width: 100%; height: 110px; overflow: visible; }
+.usage-line .ln { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
+.usage-line .ceil { stroke: var(--status-progress); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
+.usage-line .grid { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.usage-kinds { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); color: var(--text2); margin: 10px 0 4px; }
+.usage-kinds b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; margin-right: 4px; }
+.usage-quote { font-size: var(--fs-small); color: var(--text2); border-left: 2px solid var(--border-strong); padding: 2px 0 2px 10px; margin: 10px 0 0; overflow-wrap: anywhere; }
+.usage-pace { font-size: var(--fs-small); color: var(--text); margin: 4px 0 8px; }
+.usage-pace.bad { color: var(--status-blocked-ink); }
+@media (max-width: 767px) { .usage-title { max-width: 160px; } .usage-chip { min-height: 44px; } }
 .mp-section-label {
   font-family: var(--mono); font-size: var(--fs-caption);
   letter-spacing: 0.1em; text-transform: uppercase;
@@ -3355,6 +3428,10 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         <span>Harness</span>
         <span class="count" id="nav-harness-count"></span>
       </div>
+      <div class="nav-item" data-tab="usage" role="tab" tabindex="0" aria-label="Usage" title="Usage" onkeydown="navTabKeydown(event, this)" onclick="switchTab('usage', this)">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 20V10 M10 20V4 M16 20v-7 M22 20H2"/></svg>
+        <span>Usage</span>
+      </div>
     </nav>
     </details>
     <div class="nav-divider"></div>
@@ -3603,6 +3680,23 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
       </div>
     </div>
 
+    <!-- Usage (great_cto-egkw). What Claude Code and Codex consumed on this
+         machine, read from the hosts' own session logs by
+         scripts/lib/session-usage.mjs. Machine-wide, not per project. -->
+    <div class="panel" id="panel-usage" role="tabpanel">
+      <div class="metrics-page">
+        <div class="usage-head">
+          <h1 class="page-title">Usage <span class="muted" style="font-weight:400;font-size:var(--fs-small)">what Claude Code and Codex consumed on this machine</span></h1>
+          <div class="usage-chips" role="group" aria-label="Period">
+            <button type="button" class="usage-chip" data-days="7" onclick="loadUsage(7)">7D</button>
+            <button type="button" class="usage-chip active" data-days="30" onclick="loadUsage(30)">30D</button>
+            <button type="button" class="usage-chip" data-days="90" onclick="loadUsage(90)">90D</button>
+          </div>
+        </div>
+        <div id="usage-body" class="usage-note" role="status">Reading the session logs of Claude Code and Codex on this machine.</div>
+      </div>
+    </div>
+
     <div class="panel" id="panel-kanban">
       <h1 class="page-title">Tasks</h1>
       <div id="filter-bar" class="filter-bar"></div>
@@ -5877,6 +5971,303 @@ function renderAgentActivity(snap) {
 // The Harnesses card. Four states for the second opinion, and the fourth is
 // the reason the card exists: `unavailable` — declared codex, no codex here —
 // must never look like `none` or like a switch someone turned off.
+// ── Usage (great_cto-egkw) ─────────────────────────────────────────────────
+// Both hosts, side by side, from /api/usage. Three honesty rules carried from
+// the reader: an unpriced model is n/a, never $0; Claude Code's plan use is not
+// written anywhere, so it is not drawn — only the refusals are; and a host with
+// no logs on this machine says so instead of showing zeros.
+let usageDays = 30;
+let usageHost = 'claude';
+let usageData = null;
+let _usageTimer = null;
+const USAGE_HOSTS = { claude: 'Claude Code', codex: 'Codex' };
+const USAGE_LOGS = { claude: '~/.claude/projects', codex: '~/.codex/sessions' };
+const USAGE_FN = { chat: 'Conversations', subagent: 'Subagents', automation: 'Automations', headless: 'Headless runs' };
+const USAGE_FN_COLOR = { chat: 'var(--accent)', subagent: 'var(--status-progress)', automation: 'var(--status-gate)', headless: 'var(--text3)' };
+
+function fmtTok(n) {
+  n = Number(n) || 0;
+  if (n >= 1e9) return `${(n / 1e9).toFixed(2)}B`;
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(Math.round(n));
+}
+function fmtUsdEq(n) {
+  if (n == null) return null;
+  return n >= 100 ? `$${Math.round(n).toLocaleString('en-US')}` : `$${n.toFixed(2)}`;
+}
+const fmtPct = (x) => (x == null ? null : `${Math.round(x * 100)}%`);
+
+async function loadUsage(days) {
+  if (days) usageDays = days;
+  document.querySelectorAll('.usage-chip[data-days]').forEach((c) => c.classList.toggle('active', Number(c.dataset.days) === usageDays));
+  clearTimeout(_usageTimer);
+  const d = await api(`/api/usage?days=${usageDays}`);
+  const body = document.getElementById('usage-body');
+  if (!body) return;
+  if (!d || d.error) {
+    body.className = 'usage-note';
+    body.textContent = `Usage could not be read: ${(d && d.error) || 'the board is not reachable — is the server still running?'}`;
+    return;
+  }
+  if (d.state === 'computing') {
+    body.className = 'usage-note';
+    body.textContent = `Counting — ${d.why}`;
+    _usageTimer = setTimeout(() => { if (currentTab === 'usage') loadUsage(); }, 2000);
+    return;
+  }
+  if (d.state !== 'counted') {
+    body.className = 'usage-note';
+    body.textContent = `Usage is not available: ${d.why || d.state}`;
+    return;
+  }
+  usageData = d;
+  renderUsage(d);
+}
+
+function setUsageHost(host) {
+  usageHost = host;
+  if (usageData) renderUsage(usageData);
+}
+
+function usageLimitWindow(minutes) {
+  if (minutes === 10080) return 'Weekly limit';
+  if (minutes === 300) return '5-hour limit';
+  if (minutes === 43200) return 'Monthly limit';
+  return minutes ? `${minutes}-minute limit` : 'Limit';
+}
+
+function usageHostCard(d, host) {
+  const name = USAGE_HOSTS[host];
+  if (!d.seen || !d.seen[host]) {
+    return `<section class="usage-card" data-host="${host}"><h3>${name}</h3><p class="usage-note">No ${name} session logs on this machine (${USAGE_LOGS[host]}) — nothing to count, which is not the same as nothing used.</p></section>`;
+  }
+  const h = d.hosts[host];
+  const unpricedHere = (d.models || []).filter((m) => m.host === host && m.usd == null).map((m) => m.model);
+  const usd = h.usd == null
+    ? absent('uncomputable', `no price is set for ${unpricedHere.join(', ') || 'these models'} — add one to ~/.great_cto/model-prices.json`)
+    : esc(fmtUsdEq(h.usd)) + (h.unpricedResponses ? ` <span class="usage-tag" title="${esc(`${h.unpricedResponses} responses from unpriced models are not in this figure`)}">partial</span>` : '');
+  const stat = (v, label) => `<div class="usage-stat"><b>${v}</b><span>${label}</span></div>`;
+  let limit;
+  if (host === 'codex') {
+    const L = d.limits && d.limits.codex;
+    const win = (w) => {
+      if (!w) return '';
+      const used = Math.max(0, Math.min(100, Number(w.used) || 0));
+      const cls = used >= 90 ? 'full' : used >= 70 ? 'warn' : '';
+      const resets = w.resets ? fmtDT(new Date(w.resets * 1000).toISOString()) : '—';
+      return `<div class="usage-limit-head"><span>${usageLimitWindow(w.minutes)}</span><b>${used}% used</b></div>
+        <div class="usage-meter ${cls}" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${used}" aria-label="${esc(usageLimitWindow(w.minutes))}"><span style="width:${used}%"></span></div>
+        <div class="usage-sub">resets ${esc(resets)}</div>`;
+    };
+    limit = L && (L.primary || L.secondary)
+      ? `<div class="usage-limit">${win(L.primary)}${win(L.secondary)}<div class="usage-sub">plan ${esc(L.plan || '—')} · as Codex last reported it, ${esc(relTime(L.at))} ago</div></div>`
+      : `<div class="usage-limit"><div class="usage-limit-head"><span>Plan limit</span>${absent('unloaded', 'no Codex session has reported its rate-limit window yet')}</div></div>`;
+  } else {
+    const hits = h.limitHits || { plan: 0, server: 0 };
+    limit = `<div class="usage-limit"><div class="usage-limit-head"><span>Plan limit</span>${absent('uncomputable', 'Claude Code does not write how much of the plan is used — only when a request is refused')}</div>
+      <div class="usage-sub">${hits.plan} refused at the plan limit · ${hits.server} server-side throttles (not your limit) in ${d.window.days} days</div></div>`;
+  }
+  return `<section class="usage-card" data-host="${host}">
+    <h3><span>${name}</span><span class="muted">${esc(d.window.from)} → ${esc(d.window.to)}</span></h3>
+    <div class="usage-big" title="${esc(`${(h.tokens || 0).toLocaleString('en-US')} tokens, cache reads included`)}">${fmtTok(h.tokens)} <span class="muted" style="font-size:var(--fs-small)">tokens</span></div>
+    <div class="usage-stats">
+      ${stat(usd, 'at API list price')}
+      ${stat(esc((h.sessions || 0).toLocaleString('en-US')), 'conversations')}
+      ${stat(esc((h.responses || 0).toLocaleString('en-US')), 'model responses')}
+      ${stat(h.hitRate == null ? absent('none', 'no input in this window') : esc(fmtPct(h.hitRate)), 'input from cache')}
+      ${stat(esc(fmtTok(h.output)), 'output tokens')}
+    </div>
+    ${limit}
+  </section>`;
+}
+
+function usageDayChart(d, host) {
+  const name = USAGE_HOSTS[host];
+  const head = `<h3><span>${name} by day</span><span class="muted">tokens</span></h3>`;
+  if (!d.seen || !d.seen[host]) return `<section class="usage-card usage-chart">${head}<p class="usage-note">No logs to draw.</p></section>`;
+  const days = d.daily || [];
+  const max = Math.max(0, ...days.map((x) => x[host].tokens));
+  if (!max) return `<section class="usage-card usage-chart">${head}<p class="usage-note">Nothing in this window.</p></section>`;
+  const fns = Object.keys(USAGE_FN).filter((f) => days.some((x) => x[host].byFn[f]));
+  const W = 10;
+  let bars = '';
+  days.forEach((x, i) => {
+    let y = 100;
+    const parts = fns.map((f) => `${USAGE_FN[f]} ${fmtTok(x[host].byFn[f] || 0)}`).join(' · ');
+    const tip = `${x.date}: ${fmtTok(x[host].tokens)} tokens${x[host].usd ? ` · ${fmtUsdEq(x[host].usd)}` : ''}${parts ? ` (${parts})` : ''}`;
+    bars += `<g><title>${esc(tip)}</title>`;
+    for (const f of fns) {
+      const v = x[host].byFn[f] || 0;
+      if (!v) continue;
+      const hgt = (v / max) * 96;
+      y -= hgt;
+      bars += `<rect x="${i * W + 1}" y="${y.toFixed(2)}" width="${W - 2}" height="${hgt.toFixed(2)}" fill="${USAGE_FN_COLOR[f]}"></rect>`;
+    }
+    bars += `<rect x="${i * W}" y="0" width="${W}" height="100" fill="transparent"></rect></g>`;
+  });
+  const legend = fns.map((f) => `<span><i style="background:${USAGE_FN_COLOR[f]}"></i>${USAGE_FN[f]} ${fmtTok(d.hosts[host].byFn[f] || 0)}</span>`).join('');
+  return `<section class="usage-card usage-chart">${head}
+    <svg viewBox="0 0 ${days.length * W} 100" preserveAspectRatio="none" role="img" aria-label="${esc(`${name} tokens per day, peak ${fmtTok(max)}`)}">${bars}</svg>
+    <div class="usage-axis"><span>${esc(days[0].date)}</span><span>peak ${fmtTok(max)}</span><span>${esc(days[days.length - 1].date)}</span></div>
+    <div class="usage-legend">${legend}</div>
+  </section>`;
+}
+
+function usageTopTable(d, host) {
+  const name = USAGE_HOSTS[host];
+  const rows = (d.top && d.top[host]) || [];
+  const head = `<h3><span>${name}: heaviest conversations</span><span class="muted">share of ${name} tokens</span></h3>`;
+  if (!rows.length) return `<section class="usage-card">${head}<p class="usage-note">${d.seen && d.seen[host] ? 'Nothing in this window.' : 'No logs on this machine.'}</p></section>`;
+  const money = host === 'claude';
+  const body = rows.map((r) => {
+    const tag = r.fn && r.fn !== 'chat' ? `<span class="usage-tag">${esc(USAGE_FN[r.fn] || r.fn)}</span>` : '';
+    const sub = r.subagentTokens ? `<div class="usage-sub">${fmtPct(r.subagentTokens / r.tokens)} in subagents</div>` : '';
+    const share = Math.max(1, Math.round(r.share * 100));
+    return `<tr>
+      <td><div class="usage-title" title="${esc(r.title)}">${esc(r.title)}</div>${sub}</td>
+      <td>${esc(r.project || '—')}${tag}</td>
+      <td class="num"><span class="usage-share" aria-hidden="true"><span style="width:${share}%"></span></span>${fmtPct(r.share)}</td>
+      <td class="num">${fmtTok(r.tokens)}</td>
+      ${money ? `<td class="num">${r.usd == null ? absent('uncomputable', 'a model in this conversation has no price') : esc(fmtUsdEq(r.usd))}</td>` : ''}
+    </tr>`;
+  }).join('');
+  return `<section class="usage-card">${head}<div class="usage-table-wrap"><table class="usage-table">
+    <thead><tr><th>Conversation</th><th>Project</th><th class="num">Share</th><th class="num">Tokens</th>${money ? '<th class="num">$ list</th>' : ''}</tr></thead>
+    <tbody>${body}</tbody></table></div></section>`;
+}
+
+function usageModels(d) {
+  const rows = d.models || [];
+  if (!rows.length) return '<p class="usage-note">No model responses in this window.</p>';
+  const body = rows.map((m) => {
+    const fast = m.model.endsWith('@fast');
+    const label = fast ? `${m.model.slice(0, -5)} (fast)` : m.model;
+    return `<tr><td>${esc(USAGE_HOSTS[m.host])}</td><td>${esc(label)}</td><td class="num">${m.responses.toLocaleString('en-US')}</td><td class="num">${fmtTok(m.tokens)}</td><td class="num">${fmtTok(m.output)}</td>
+      <td class="num">${m.usd == null ? absent('uncomputable', `no price is set for ${m.model} — add one to ~/.great_cto/model-prices.json`) : esc(fmtUsdEq(m.usd))}</td></tr>`;
+  }).join('');
+  return `<section class="usage-card" style="margin-bottom:20px"><div class="usage-table-wrap"><table class="usage-table">
+    <thead><tr><th>Host</th><th>Model</th><th class="num">Responses</th><th class="num">Tokens</th><th class="num">Output</th><th class="num">$ list</th></tr></thead>
+    <tbody>${body}</tbody></table></div></section>`;
+}
+
+function usageList(title, rows, empty) {
+  if (!rows || !rows.length) return `<section class="usage-card"><h3><span>${title}</span></h3><p class="usage-note">${empty}</p></section>`;
+  const max = Math.max(...rows.map((r) => r.n));
+  const items = rows.map((r) => `<li><span class="nm" title="${esc(r.name)}">${esc(r.name)}${r.ours ? '<span class="usage-tag">great_cto</span>' : ''}</span><span class="n">${r.n.toLocaleString('en-US')}</span><span class="bar" aria-hidden="true"><span style="width:${Math.max(2, Math.round((r.n / max) * 100))}%"></span></span></li>`).join('');
+  return `<section class="usage-card"><h3><span>${title}</span></h3><ul class="usage-list">${items}</ul></section>`;
+}
+
+// ── Limits (great_cto-egkw stage 2) ────────────────────────────────────────
+const USAGE_LIMIT_KIND = { session: '5-hour session', weekly: 'weekly', spend: 'monthly spend', model: 'per-model', credits: 'usage credits', other: 'other' };
+const USAGE_LIMIT_COLOR = { session: 'var(--status-blocked)', weekly: 'var(--status-progress)', spend: 'var(--status-gate)', model: 'var(--text2)', credits: 'var(--text2)', other: 'var(--text3)' };
+const fmtWhen = (ms) => (ms ? fmtDT(new Date(ms).toISOString()) : '—');
+function fmtHours(ms) {
+  const h = ms / 3600000;
+  return h >= 48 ? `${Math.round(h / 24)} days` : `${Math.max(1, Math.round(h))} h`;
+}
+
+/** A line over the period: points [ms, value]; marks [{t, color, title}] drawn as ticks. */
+function usageLineSvg({ from, to, points, max, marks = [], ceiling = null, label }) {
+  const W = 1000; const H = 100;
+  const x = (t) => (((t - from) / Math.max(1, to - from)) * W).toFixed(1);
+  const y = (v) => (H - (Math.min(v, max) / max) * (H - 4)).toFixed(1);
+  const path = points.map((p, i) => `${i ? 'L' : 'M'}${x(p[0])},${y(p[1])}`).join('');
+  const ticks = marks.map((m) => `<g><title>${esc(m.title)}</title><line x1="${x(m.t)}" x2="${x(m.t)}" y1="0" y2="${H}" stroke="${m.color}" stroke-width="2" vector-effect="non-scaling-stroke" opacity="0.8"></line></g>`).join('');
+  const ceil = ceiling != null ? `<line class="ceil" x1="0" x2="${W}" y1="${y(ceiling)}" y2="${y(ceiling)}"></line>` : '';
+  return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="${esc(label)}">
+    <line class="grid" x1="0" x2="${W}" y1="${H}" y2="${H}"></line>${ceil}${ticks}<path class="ln" d="${path}"></path></svg>`;
+}
+
+function usageClaudeLimits(d) {
+  const head = `<h3><span>Claude Code limits</span><span class="muted">from refusals — no plan percentage is recorded</span></h3>`;
+  if (!d.seen || !d.seen.claude) return `<section class="usage-card" data-limits="claude">${head}<p class="usage-note">No Claude Code logs on this machine.</p></section>`;
+  const L = d.limits && d.limits.claude;
+  if (!L) return `<section class="usage-card" data-limits="claude">${head}<p class="usage-note">Not computed.</p></section>`;
+  const hits = (d.hosts.claude && d.hosts.claude.limitHits) || {};
+  const stat = (v, label) => `<div class="usage-stat"><b>${v}</b><span>${label}</span></div>`;
+  const ceilLine = (c, span) => c
+    ? `Refused at about <b>${esc(fmtUsdEq(c.median))}</b> in ${span} <span class="muted">(median of ${c.n} refused hour${c.n === 1 ? '' : 's'}, ${esc(fmtUsdEq(c.min))}–${esc(fmtUsdEq(c.max))})</span>`
+    : null;
+  const ceilings = [ceilLine(L.ceilings.session, '5 hours'), ceilLine(L.ceilings.weekly, '7 days')].filter(Boolean);
+  const kinds = Object.keys(USAGE_LIMIT_KIND).filter((k) => hits[k]).map((k) => `<span><b>${hits[k]}</b>${USAGE_LIMIT_KIND[k]}</span>`).join('');
+  const s = L.series || { usd5h: [] };
+  const to = s.from + (s.usd5h.length - 1) * s.stepMs;
+  const pts = s.usd5h.map((v, i) => [s.from + i * s.stepMs, v]);
+  const max = Math.max(1, ...s.usd5h, L.ceilings.session ? L.ceilings.session.max : 0);
+  const marks = (L.hits || []).filter((h) => h.kind !== 'server').map((h) => ({ t: h.t, color: USAGE_LIMIT_COLOR[h.kind] || 'var(--text3)', title: `${fmtWhen(h.t)} — refused by the ${USAGE_LIMIT_KIND[h.kind] || h.kind} limit ×${h.n}` }));
+  const chart = pts.length > 1 ? `<div class="usage-line">${usageLineSvg({ from: s.from, to, points: pts, max, marks, ceiling: L.ceilings.session ? L.ceilings.session.median : null, label: 'Claude Code spend in the trailing 5 hours, with refusals marked' })}</div>
+    <div class="usage-axis"><span>${esc(d.window.from)}</span><span>$ in the trailing 5 hours · peak ${esc(fmtUsdEq(max))}</span><span>${esc(d.window.to)}</span></div>` : '';
+  const last = L.lastHit ? `<p class="usage-quote" title="${esc(fmtDate(L.lastHit.at))}">${esc(L.lastHit.text)} <span class="muted">— ${esc(relTime(L.lastHit.at))} ago</span></p>` : '';
+  return `<section class="usage-card" data-limits="claude">${head}
+    <div class="usage-stats">${stat(esc(fmtUsdEq(L.fiveHour.usd)), 'last 5 hours, $ list')}${stat(esc(fmtUsdEq(L.sevenDay.usd)), 'last 7 days, $ list')}${stat(esc(String(hits.plan || 0)), `refusals in ${d.window.days} days`)}</div>
+    ${kinds ? `<div class="usage-kinds">${kinds}</div>` : `<p class="usage-note">No request was refused by a limit in this period.</p>`}
+    ${ceilings.length ? `<p class="usage-note">${ceilings.join('<br>')}. <span class="muted">An estimate from what had been spent when Claude Code refused — not a published limit.</span></p>` : ''}
+    ${chart}
+    ${hits.server ? `<p class="usage-sub">${hits.server} server-side throttles (not your limit) are not marked.</p>` : ''}
+    ${last}
+  </section>`;
+}
+
+function usageCodexLane(name, lane, d) {
+  const title = usageLimitWindow(lane.minutes);
+  const P = lane.projection;
+  const lastRead = lane.series.length ? lane.series[lane.series.length - 1][0] : null;
+  let pace = `<p class="usage-pace muted">No open window${lastRead ? ` — the last reading of it is from ${esc(fmtWhen(lastRead))}; the plan may no longer have it` : ''}.</p>`;
+  if (P && P.state === 'full') pace = `<p class="usage-pace bad">Full — resets ${esc(fmtWhen(P.resets))}.</p>`;
+  else if (P && P.state === 'will-fill') pace = `<p class="usage-pace bad">${P.used}% used. At this pace it is full by ${esc(fmtWhen(P.fullBy))} — ${esc(fmtHours(P.resets - P.fullBy))} before the reset.</p>`;
+  else if (P && P.state === 'fits') pace = `<p class="usage-pace">${P.used}% used. At this pace about ${Math.round(P.atReset)}% by the reset, ${esc(fmtWhen(P.resets))}.</p>`;
+  const from = Date.parse(`${d.window.from}T00:00:00`);
+  const to = Date.now();
+  const pts = [];
+  for (const [t, v] of lane.series) { if (pts.length) pts.push([t, pts[pts.length - 1][1]]); pts.push([t, v]); }
+  const marks = lane.windows.filter((w) => w.fullAt && w.fullAt >= from).map((w) => ({ t: w.fullAt, color: 'var(--status-blocked)', title: `filled ${fmtWhen(w.fullAt)}, ${fmtHours(w.resets - w.fullAt)} before its reset` }));
+  const chart = pts.length > 1 ? `<div class="usage-line">${usageLineSvg({ from, to, points: pts, max: 100, marks, label: `Codex ${title} percent used over the period` })}</div>
+    <div class="usage-axis"><span>${esc(d.window.from)}</span><span>% used · red = filled</span><span>${esc(d.window.to)}</span></div>` : '';
+  const touched = lane.windows.filter((w) => w.peak > 0);
+  const early = lane.windows.filter((w) => w.fullAt).map((w) => w.resets - w.fullAt);
+  const summary = touched.length
+    ? `${lane.filled} of ${touched.length} used windows filled${early.length ? `, on median ${esc(fmtHours(early.sort((a, b) => a - b)[Math.floor(early.length / 2)]))} before the reset` : ''}.`
+    : 'No window was used in this period.';
+  return `<div class="usage-limit" data-lane="${esc(name)}"><div class="usage-limit-head"><span>${esc(title)}</span></div>${pace}${chart}<p class="usage-sub">${summary}</p></div>`;
+}
+
+function usageCodexLimits(d) {
+  const head = `<h3><span>Codex limits</span><span class="muted">as Codex reported them</span></h3>`;
+  if (!d.seen || !d.seen.codex) return `<section class="usage-card" data-limits="codex">${head}<p class="usage-note">No Codex logs on this machine.</p></section>`;
+  const D = d.limits && d.limits.codex && d.limits.codex.detail;
+  if (!D) return `<section class="usage-card" data-limits="codex">${head}<p class="usage-note">No Codex session reported its plan window in this period.</p></section>`;
+  const order = ['fiveHour', 'weekly', ...Object.keys(D).filter((k) => k !== 'fiveHour' && k !== 'weekly')];
+  const lanes = order.filter((k) => D[k]).map((k) => usageCodexLane(k, D[k], d)).join('');
+  return `<section class="usage-card" data-limits="codex">${head}${lanes}<p class="usage-sub">A window Codex reset early shows as its own window.</p></section>`;
+}
+
+function renderUsage(d) {
+  const body = document.getElementById('usage-body');
+  if (!body) return;
+  body.className = '';
+  const l = (d.lists && d.lists[usageHost]) || {};
+  const hostBtn = (h) => `<button type="button" class="usage-chip${usageHost === h ? ' active' : ''}" aria-pressed="${usageHost === h}" onclick="setUsageHost('${h}')">${USAGE_HOSTS[h]}</button>`;
+  body.innerHTML = `
+    <div class="usage-grid">${usageHostCard(d, 'claude')}${usageHostCard(d, 'codex')}</div>
+    <h2 class="mp-section-label">Limits</h2>
+    <div class="usage-grid">${usageClaudeLimits(d)}${usageCodexLimits(d)}</div>
+    <h2 class="mp-section-label">By day, by kind of work</h2>
+    <div class="usage-grid">${usageDayChart(d, 'claude')}${usageDayChart(d, 'codex')}</div>
+    <h2 class="mp-section-label">Heaviest conversations</h2>
+    <div class="usage-grid">${usageTopTable(d, 'claude')}${usageTopTable(d, 'codex')}</div>
+    <h2 class="mp-section-label">Models</h2>
+    ${usageModels(d)}
+    <div class="usage-sec-head"><h2 class="mp-section-label">What was called</h2><div class="usage-chips" role="group" aria-label="Host">${hostBtn('claude')}${hostBtn('codex')}</div></div>
+    <div class="usage-lists">
+      ${usageList('Tools', l.tools, 'No tool calls in this window.')}
+      ${usageList('Skills', l.skills, 'No skills were loaded in this window.')}
+      ${usageList('Agents', l.agents, 'No subagents were dispatched in this window.')}
+      ${usageList('MCP servers', l.mcp, 'No MCP tools were called in this window.')}
+    </div>
+    <p class="usage-note">Read on this machine from ${USAGE_LOGS.claude} and ${USAGE_LOGS.codex}; nothing is sent anywhere. Tokens include cache reads. <b>$ list</b> is the API list-price equivalent from great_cto's price table, not a subscription bill — Claude Code's own estimate can differ for some models. A model without a price shows n/a, never $0.</p>`;
+}
+
 async function renderHarnesses() {
   const body = document.getElementById('harnesses-body');
   const status = document.getElementById('harnesses-status');
@@ -8340,6 +8731,7 @@ function cmdkActions() {
     { group: 'Go', label: 'Ledger — what it cost, what is running', run: () => switchTab('ledger') },
     { group: 'Go', label: 'Fleet — the agents and what they may do', run: () => switchTab('fleet') },
     { group: 'Go', label: 'Harness — host and second opinion', run: () => switchTab('harness') },
+    { group: 'Go', label: 'Usage — what Claude Code and Codex consumed', run: () => switchTab('usage') },
     { group: 'Go', label: 'Settings', run: () => switchTab('settings') },
     { group: 'Go', label: 'Tasks board (#/kanban, deep link)', run: () => switchTab('kanban') },
     { group: 'Do', label: 'New issue', run: () => openNewIssueModal() },
@@ -8532,7 +8924,7 @@ try {
 // panels, not keys.
 const DEST = { decisions: 'inbox', ledger: 'budgets', fleet: 'agents', dashboard: 'budgets', share: 'settings', notifications: 'settings' };
 const NAV = { inbox: 'decisions', budgets: 'ledger', agents: 'fleet', dashboard: 'ledger', share: 'settings', notifications: 'settings' };
-const ROUTES = { work: 1, history: 1, decisions: 1, ledger: 1, fleet: 1, harness: 1, settings: 1, kanban: 1 };
+const ROUTES = { work: 1, history: 1, decisions: 1, ledger: 1, fleet: 1, harness: 1, usage: 1, settings: 1, kanban: 1 };
 function switchTab(id, el) {
   const lid = DEST[id] || id;          // the panel's own name
   const navKey = NAV[id] || id;        // the destination to highlight
@@ -8541,7 +8933,7 @@ function switchTab(id, el) {
   currentTab = lid;
   document.getElementById('nav-views-label').hidden = lid !== 'agents';
   document.querySelector('.nav-views').hidden = lid !== 'agents';
-  if (['agents', 'budgets', 'harness'].includes(lid)) document.getElementById('tools-nav').open = true;
+  if (['agents', 'budgets', 'harness', 'usage'].includes(lid)) document.getElementById('tools-nav').open = true;
   if (lid === 'work' || lid === 'history') window.GctoWork.refresh();
   if (ROUTES[id]) {
     if (location.hash !== `#/${id}`) history.replaceState(null, '', `#/${id}`);
@@ -8562,7 +8954,7 @@ function switchTab(id, el) {
   // crumb — `labels` used to be referenced here but is only ever a function-local in
   // this file, so this threw ReferenceError on every tab switch and skipped the per-tab
   // loaders below (e.g. logs stuck on "Loading…"). Use a local label map.
-  const TAB_LABELS = { work: 'Work', history: 'History', decisions: 'Decisions', ledger: 'Ledger', fleet: 'Fleet', harness: 'Harness', settings: 'Settings', budgets: 'Budgets', docs: 'Docs', dashboard: 'Board', inbox: 'Inbox', tasks: 'Tasks', agents: 'Agents', logs: 'Activity', notifications: 'Notifications', metrics: 'Metrics', share: 'Share' };
+  const TAB_LABELS = { work: 'Work', history: 'History', decisions: 'Decisions', ledger: 'Ledger', fleet: 'Fleet', harness: 'Harness', usage: 'Usage', settings: 'Settings', budgets: 'Budgets', docs: 'Docs', dashboard: 'Board', inbox: 'Inbox', tasks: 'Tasks', agents: 'Agents', logs: 'Activity', notifications: 'Notifications', metrics: 'Metrics', share: 'Share' };
   const crumb = document.getElementById('crumb-here'); if (crumb) crumb.textContent = TAB_LABELS[id] || TAB_LABELS[lid] || 'Board';
   // Budgets render on Metrics, so the heartbeat that feeds them has to be
   // fetched when Metrics opens — not only from the agents drill-in it used to
@@ -8595,6 +8987,7 @@ function switchTab(id, el) {
   if (lid === 'notifications' || lid === 'settings') loadNotifications();
   if (lid === 'settings') loadSettingsPage();
   if (lid === 'harness') renderHarnesses();
+  if (lid === 'usage') loadUsage();
 }
 
 // Sidebar tabs: Enter/Space activate, arrows move (WAI-ARIA tablist).