codex-copilot-dx 0.9.5 → 0.9.6

package/README.md

@@ -236,6 +236,10 @@ The dashboard loads local status, a live GitHub Copilot model directory, and a s
 
 The transparent, single-color double-peak favicon follows the dashboard's saved light/dark choice without a separate network request.
 
+Usage Analytics is collapsed by default. Opening it adds daily input/output token bars (7/30/90 days) and a 365-day calendar of recorded usage calls or tokens, grouped in the browser's time zone. Cache-read tokens are already part of input and are not added again. Model and range filters use the current snapshot without additional requests; selecting a day shows its filtered model totals in the Usage table, and All history restores the original table. Analytics shares the existing current/rotated-log scan and exposes only bounded metadata (365 days, up to 100 model filters). Days before retained history are hatched, not presented as zero; the oldest retained day may be partial. Counts describe retained usage records, not messages, session time, or all HTTP requests. Refresh explicitly to update the snapshot; there is no background collection or polling.
+
+Terminal Animation is collapsed at the bottom of the page, with an Animation shortcut in the header. Preview frames load only when opened; closing it, hiding the page, or requesting reduced motion stops the preview timer. Unsaved choices survive folding and reopening. Recent upstream failures expand to existing diagnostic fields (time, model, code, message, response/request IDs, and retry policy) with a Copy diagnostic control. These are the last 10 retained `response.failed` events, not complete session histories; a retry attempt does not prove recovery. Diagnostic prose is redacted by the existing recorder but can still contain sensitive context: review before copying or sharing.
+
 Inspect only the local Codex configuration:
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-copilot-dx",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Use Codex App with GitHub Copilot",
   "author": "Dale Xiao",
   "type": "module",

package/src/dashboard/index.html

@@ -14,7 +14,7 @@
     <div class="shell">
       <header class="topbar">
         <div class="brand">CCDX <span class="brand-detail">/ LOCAL STATUS</span></div>
-        <div class="topbar-actions"><span id="connection" class="badge neutral" role="status">READING</span><button id="theme-toggle" class="icon-button" type="button" aria-label="Switch to light mode" title="Switch to light mode"><svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="icon-moon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 3A9 9 0 1 0 21 12 7 7 0 0 1 12 3Z"/></svg></button><button id="refresh" type="button">Refresh</button></div>
+        <div class="topbar-actions"><span id="connection" class="badge neutral" role="status">READING</span><button id="theme-toggle" class="icon-button" type="button" aria-label="Switch to light mode" title="Switch to light mode"><svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="icon-moon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 3A9 9 0 1 0 21 12 7 7 0 0 1 12 3Z"/></svg></button><button id="open-animation" type="button" aria-controls="animation-settings" aria-expanded="false">Animation</button><button id="refresh" type="button">Refresh</button></div>
       </header>
 
       <main>
@@ -47,12 +47,6 @@
           </article>
         </section>
 
-        <section class="panel dashboard-section" aria-label="Terminal animation">
-          <div class="panel-heading"><h2>TERMINAL ANIMATION</h2><span id="animation-state">READING</span></div>
-          <div id="animation-options" class="animation-options" role="group" aria-label="Animation theme"></div>
-          <div class="section-actions"><button id="save-animation" type="button" disabled>Save selection</button><span id="animation-note" role="status">Applies on next ccdx start.</span></div>
-        </section>
-
         <section class="panel dashboard-section" aria-label="Live upstream models">
           <div class="panel-heading"><h2>UPSTREAM GPT MODELS</h2><div class="heading-actions"><span id="models-state">CHECKING LIVE</span><button id="refresh-models" type="button">Refresh</button></div></div>
           <p id="models-note" class="table-note">Querying GitHub Copilot…</p>
@@ -61,17 +55,39 @@
         </section>
 
         <section class="panel dashboard-section" aria-label="Usage by model">
-          <div class="panel-heading"><h2>USAGE</h2><div class="heading-actions"><span id="usage-state">READING LOG</span><button id="refresh-usage" type="button">Refresh</button></div></div>
+          <div class="panel-heading"><h2>USAGE</h2><div class="heading-actions"><span id="usage-state">READING LOG</span><button id="clear-usage-day" type="button" hidden>All history</button><button id="refresh-usage" type="button">Refresh</button></div></div>
           <p id="usage-note" class="table-note">Aggregating local usage metadata…</p>
           <div class="table-wrap"><table class="usage-table"><thead><tr><th scope="col">MODEL</th><th scope="col">CALLS</th><th scope="col">INPUT</th><th scope="col">CACHE READ</th><th scope="col">OUTPUT</th><th scope="col">TOTAL</th><th scope="col">CACHE HIT</th></tr></thead><tbody id="usage-body"><tr><td colspan="7">Loading…</td></tr></tbody></table></div>
           <p class="hint">Cache hit = recorded cached / input tokens. ~ = incomplete history. — = unavailable or invalid counts.</p>
+          <details id="usage-analytics" class="analytics-section">
+            <summary>USAGE ANALYTICS</summary>
+            <div class="analytics-controls">
+              <label>Model <select id="analytics-model"><option value="">All models</option></select></label>
+              <label>Daily range <select id="analytics-range"><option value="7">7 days</option><option value="30" selected>30 days</option><option value="90">90 days</option></select></label>
+              <label>Activity <select id="analytics-metric"><option value="requests">Calls</option><option value="tokens">Tokens</option></select></label>
+            </div>
+            <p id="analytics-note" class="table-note" role="status">Open to read retained usage history.</p>
+            <div class="chart-heading"><h3>DAILY TOKENS</h3><span>INPUT + OUTPUT / CACHE INCLUDED IN INPUT</span></div>
+            <div id="daily-bars" class="daily-bars" aria-label="Daily token usage"></div>
+            <div class="daily-axis"><span id="daily-from"></span><span id="daily-to"></span></div>
+            <div class="chart-legend"><span class="legend-input">Input</span><span class="legend-output">Output</span></div>
+            <div class="chart-heading"><h3>REQUEST ACTIVITY · 365 DAYS</h3><span id="activity-scale">—</span></div>
+            <div class="calendar-scroll"><div class="calendar-grid"><div id="calendar-months" class="calendar-months" aria-hidden="true"></div><div id="activity-calendar" class="activity-calendar" aria-label="Daily recorded request activity"></div></div></div>
+            <p id="analytics-selection" class="hint" role="status">Select a day to inspect its model totals. No history is distinct from zero recorded calls.</p>
+          </details>
         </section>
 
         <section class="lower" aria-label="Recent failures">
-          <div class="panel-heading"><h2>RECENT UPSTREAM FAILURES</h2><span>response.failed</span></div>
+          <div class="panel-heading"><h2>RECENT UPSTREAM FAILURES</h2><span id="failure-count">response.failed</span></div>
           <ol id="failures"><li class="empty">Reading…</li></ol>
           <p class="hint">Upstream messages may contain sensitive text.</p>
         </section>
+
+        <details id="animation-settings" class="panel dashboard-section settings-panel">
+          <summary class="panel-heading"><h2>TERMINAL ANIMATION</h2><span id="animation-state">READING</span></summary>
+          <div id="animation-options" class="animation-options" role="group" aria-label="Animation theme"></div>
+          <div class="section-actions"><button id="save-animation" type="button" disabled>Save selection</button><span id="animation-note" role="status">Applies on next ccdx start.</span></div>
+        </details>
       </main>
 
       <footer>LOCAL ONLY / NO BACKGROUND POLLING</footer>

package/src/dashboard/ui.css

@@ -1,6 +1,7 @@
 :root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --page: #0b110d; --surface: #111a13; --text: #e0e9df; --strong: #f0f6ec; --muted: #9aada0; --badge: #a9b9aa; --subtle: #78917d; --quiet: #6d8371; --footer: #617966; --border: #2b3b2f; --top-border: #2a3a2e; --accent: #a6f5a8; --accent-soft: #84e99e; --heading: #83b98b; --bad: #ff947e; --failed: #ff9f91; --incomplete: #e3c77c; --button-border: #45634b; --button-bg: #152219; --button-fg: #b2f1bd; --button-hover: #203526; --selected-bg: #192a1d; --option-hover: #1a2a1e; --table-text: #d8e2d8; --preview: #657d69; --ansi-white: #f5fff5; --ansi-159: #9af5e9; --ansi-123: #75e4d9; --ansi-87: #5ad0d4; --ansi-51: #42b9d8; --ansi-45: #3ca2d0; --ansi-39: #4389c2; --ansi-33: #4775b2; }
 :root[data-theme="light"] { color-scheme: light; --page: #f5f8f3; --surface: #ffffff; --text: #1b2b20; --strong: #122219; --muted: #475d4e; --badge: #475d4e; --subtle: #4b6652; --quiet: #55715c; --footer: #59735f; --border: #c4d2c5; --top-border: #b8c9ba; --accent: #176b3a; --accent-soft: #176b3a; --heading: #235f37; --bad: #a33625; --failed: #a33625; --incomplete: #835600; --button-border: #79a085; --button-bg: #ebf4ec; --button-fg: #185b32; --button-hover: #dbeedd; --selected-bg: #e4f3e7; --option-hover: #edf6ee; --table-text: #233b2b; --preview: #596f60; --ansi-white: #234231; --ansi-159: #116b64; --ansi-123: #0d7771; --ansi-87: #116b75; --ansi-51: #14697e; --ansi-45: #1a6183; --ansi-39: #265f8d; --ansi-33: #365a8d; }
 * { box-sizing: border-box; }
+[hidden] { display: none !important; }
 body { margin: 0; color: var(--text); background: var(--page); font-size: 13px; }
 .shell { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
 .topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--top-border); }
@@ -78,12 +79,52 @@ td { color: var(--table-text); }
 .usage-table tr.total-row td { color: var(--accent); font-weight: 700; }
 .lower { margin-top: 11px; padding: 18px; }
 .lower ol { list-style: none; margin: 16px 0 0; padding: 0; }
-.lower li { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 11px; }
+.lower li { padding: 9px 0; border-top: 1px solid var(--border); font-size: 11px; }
 .lower li strong, .lower li span { overflow-wrap: anywhere; }
 .lower li strong { color: var(--text); font-weight: 650; }
 .lower li span, .lower li.empty { color: var(--muted); line-height: 1.5; }
+summary { cursor: pointer; line-height: 1.6; overflow-wrap: anywhere; }
+summary:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.settings-panel > summary { list-style: none; align-items: center; }
+.settings-panel > summary::-webkit-details-marker { display: none; }
+.settings-panel > summary h2::before { content: "+ "; }
+.settings-panel[open] > summary h2::before { content: "− "; }
+.failure-detail { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 7px 18px; margin: 14px 0; line-height: 1.6; }
+.failure-detail dt { color: var(--muted); }
+.failure-detail dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+.analytics-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
+.analytics-section > summary { color: var(--heading); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
+.analytics-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
+.analytics-controls label { color: var(--muted); font-size: 11px; }
+select { max-width: 260px; padding: 5px; font: inherit; color: var(--text); background: var(--page); border: 1px solid var(--border); }
+.chart-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 22px 0 10px; }
+.chart-heading h3 { margin: 0; color: var(--heading); font-size: 11px; }
+.chart-heading span, .chart-legend { color: var(--muted); font-size: 10px; }
+.daily-bars { display: flex; align-items: end; gap: 3px; height: 130px; border-bottom: 1px solid var(--border); }
+.daily-bar { height: 100%; flex: 1; min-width: 0; padding: 0; border: 0; display: flex; flex-direction: column; justify-content: end; background: transparent; border-radius: 0; }
+.daily-bar span { display: block; flex-shrink: 0; width: 100%; }
+.bar-input { background: var(--accent-soft); }
+.bar-output { background: var(--ansi-39); }
+.daily-bar:hover { background: var(--option-hover); }
+.daily-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 7px; }
+.daily-bar[aria-pressed="true"], .calendar-day[aria-pressed="true"] { outline: 2px solid var(--strong); outline-offset: 1px; }
+.chart-legend { display: flex; gap: 18px; margin-top: 9px; }
+.chart-legend span::before { content: "■"; margin-right: 6px; }
+.legend-input::before { color: var(--accent-soft); }
+.legend-output::before { color: var(--ansi-39); }
+.calendar-scroll { overflow-x: auto; padding: 4px; }
+.calendar-grid { width: max-content; }
+.calendar-months { display: grid; grid-auto-columns: 12px; gap: 4px; margin-bottom: 7px; color: var(--muted); font-size: 9px; height: 14px; }
+.activity-calendar { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 4px; width: max-content; }
+.calendar-day { padding: 0; border: 1px solid var(--border); width: 12px; height: 12px; background: var(--button-bg); }
+.calendar-day[data-level="1"] { background: color-mix(in srgb, var(--accent-soft) 25%, var(--surface)); }
+.calendar-day[data-level="2"] { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
+.calendar-day[data-level="3"] { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
+.calendar-day[data-level="4"] { background: var(--accent-soft); }
+.calendar-day:disabled, .daily-bar:disabled { background: repeating-linear-gradient(135deg, transparent, transparent 3px, var(--border) 3px, var(--border) 4px); opacity: .5; cursor: default; }
 footer { color: var(--footer); font-size: 10px; letter-spacing: .05em; padding: 22px 0 30px; }
 @media (max-width: 1000px) { .animation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 900px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details .panel:last-child { grid-column: 1 / -1; } }
 @media (max-width: 680px) { .animation-options { grid-template-columns: 1fr; } }
 @media (max-width: 620px) { .shell { padding: 0 16px; } .topbar { min-height: 60px; } .brand-detail { display: none; } .topbar-actions { gap: 11px; } .intro { display: block; padding: 29px 0 21px; } .intro p { margin-top: 9px; } .overview, .details { grid-template-columns: 1fr; } .details .panel:last-child { grid-column: auto; } .card { min-height: 122px; } .card strong { margin-top: 14px; } .lower li { display: block; } .lower li span { display: block; margin-top: 5px; } }
+@media (max-width: 460px) { .topbar { flex-wrap: wrap; padding: 12px 0; gap: 10px; } .topbar-actions { gap: 9px; } .panel-heading { flex-wrap: wrap; } .heading-actions { gap: 10px; } .failure-detail { grid-template-columns: 1fr; gap: 3px; } .failure-detail dd { margin-bottom: 7px; } select { max-width: 210px; } }

package/src/dashboard/ui.js

@@ -15,8 +15,10 @@ function duration(value) {
 
 function renderFailures(recent) {
   const list = element("failures");
+  const expanded = new Set([...list.querySelectorAll("details[open]")].map((item) => item.dataset.key));
   list.replaceChildren();
-  const failures = Array.isArray(recent) ? recent.slice(-5).reverse() : [];
+  const failures = Array.isArray(recent) ? recent.slice(-10).reverse() : [];
+  text("failure-count", `${failures.length} retained / response.failed`);
   if (!failures.length) {
     const item = document.createElement("li");
     item.className = "empty";
@@ -26,11 +28,38 @@ function renderFailures(recent) {
   }
   for (const failure of failures) {
     const item = document.createElement("li");
-    const title = document.createElement("strong");
-    const detail = document.createElement("span");
-    title.textContent = `${String(failure.model || "unknown_model").slice(0, 80)} / ${String(failure.code || "unknown_error").slice(0, 80)}`;
-    detail.textContent = `${String(failure.message || "No message").slice(0, 240)}${failure.retried ? " / retried" : ""}`;
-    item.append(title, detail);
+    const details = document.createElement("details");
+    details.dataset.key = `${failure.at}/${failure.response_id}/${failure.code}`;
+    details.open = expanded.has(details.dataset.key);
+    const title = document.createElement("summary");
+    title.textContent = `${String(failure.at || "unknown time")} / ${String(failure.model || "unknown_model").slice(0, 80)} / ${String(failure.code || "unknown_error").slice(0, 80)} / ${failure.retried ? "retry attempted" : "no retry"}`;
+    const fields = { time: failure.at, model: failure.model, event: failure.event_type, code: failure.code,
+      message: failure.message, response_id: failure.response_id, upstream_request_id: failure.upstream_request_id,
+      retry: failure.retried ? "attempted (outcome not recorded here)" : "not attempted",
+      retry_policy: failure.retry_policy, retry_skipped: failure.retry_skipped };
+    const diagnostic = document.createElement("dl");
+    diagnostic.className = "failure-detail";
+    const lines = [];
+    for (const [key, value] of Object.entries(fields)) {
+      if (value === undefined || value === null || value === "") continue;
+      const label = document.createElement("dt");
+      const content = document.createElement("dd");
+      label.textContent = key;
+      content.textContent = String(value).slice(0, 500);
+      diagnostic.append(label, content);
+      lines.push(`${key}: ${content.textContent}`);
+    }
+    const copy = document.createElement("button");
+    copy.type = "button";
+    copy.textContent = "Copy diagnostic";
+    copy.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(lines.join("\n"));
+        copy.textContent = "Copied";
+      } catch { copy.textContent = "Copy unavailable"; }
+    });
+    details.append(title, diagnostic, copy);
+    item.append(details);
     list.append(item);
   }
 }
@@ -109,6 +138,8 @@ let previewDisabledByEnvironment = false;
 let previewVisible = false;
 let previewTimer = null;
 let previewStarted = 0;
+let animationLoading = false;
+let animationFramesLoaded = false;
 const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
 
 function renderAnsiFrame(target, frame) {
@@ -146,14 +177,14 @@ function stopAnimationPreview() {
 
 function tickAnimationPreview() {
   previewTimer = null;
-  if (!previewVisible || document.visibilityState !== "visible" || reducedMotion.matches || previewDisabledByEnvironment) return;
+  if (!animationTimelines.length || !element("animation-settings").open || !previewVisible || document.visibilityState !== "visible" || reducedMotion.matches || previewDisabledByEnvironment) return;
   renderAnimationFrames(performance.now() - previewStarted);
   previewTimer = setTimeout(tickAnimationPreview, 32);
 }
 
 function syncAnimationPreview() {
   stopAnimationPreview();
-  if (!previewVisible || document.visibilityState !== "visible" || reducedMotion.matches || previewDisabledByEnvironment) {
+  if (!animationTimelines.length || !element("animation-settings").open || !previewVisible || document.visibilityState !== "visible" || reducedMotion.matches || previewDisabledByEnvironment) {
     for (const timeline of animationTimelines) timeline.lastFrame = -2;
     renderAnimationFrames(0);
     return;
@@ -186,6 +217,7 @@ function buildAnimationOptions(data) {
       selectedAnimation = theme.id;
       for (const [id, row] of animationRows) row.setAttribute("aria-pressed", String(id === theme.id));
       element("save-animation").disabled = selectedAnimation === savedAnimation;
+      updateAnimationState();
       syncAnimationPreview();
     });
     const name = document.createElement("span");
@@ -220,20 +252,33 @@ function animationNote(data) {
 }
 
 async function loadAnimation() {
+  const includeFrames = element("animation-settings").open;
+  if (animationLoading || (includeFrames && animationFramesLoaded)) return;
+  animationLoading = true;
   text("animation-state", "READING");
   try {
-    const response = await fetch("/_ccdx/ui/animation", { cache: "no-store", headers: { "X-CCDX-Dashboard": "1" }, signal: AbortSignal.timeout(8000) });
+    const response = await fetch(`/_ccdx/ui/animation${includeFrames ? "" : "?frames=0"}`, { cache: "no-store", headers: { "X-CCDX-Dashboard": "1" }, signal: AbortSignal.timeout(8000) });
     const data = await response.json();
     if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
-    buildAnimationOptions(data);
-    text("animation-state", `CURRENT ${data.theme.toUpperCase()}`);
+    if (includeFrames) {
+      buildAnimationOptions(data);
+      animationFramesLoaded = true;
+    } else { savedAnimation = data.theme; selectedAnimation = data.theme; }
+    updateAnimationState();
     text("animation-note", animationNote(data));
   } catch (error) {
     text("animation-state", "UNAVAILABLE");
     text("animation-note", String(error.message || error).slice(0, 180));
+  } finally {
+    animationLoading = false;
+    if (!includeFrames && element("animation-settings").open) loadAnimation();
   }
 }
 
+function updateAnimationState() {
+  text("animation-state", `CURRENT ${savedAnimation.toUpperCase()}${selectedAnimation !== savedAnimation ? " / UNSAVED" : ""}`);
+}
+
 async function saveAnimation() {
   const button = element("save-animation");
   if (!selectedAnimation || selectedAnimation === savedAnimation) return;
@@ -249,7 +294,7 @@ async function saveAnimation() {
     const data = await response.json();
     if (!response.ok) throw new Error(data.error || `HTTP ${response.status}`);
     savedAnimation = data.theme;
-    text("animation-state", `CURRENT ${data.theme.toUpperCase()}`);
+    updateAnimationState();
     text("animation-note", animationNote(data));
   } catch (error) {
     text("animation-note", `Not saved / ${String(error.message || error).slice(0, 150)}`);
@@ -313,36 +358,178 @@ function usageValues(row) {
   return [row.model, number(row.requests), number(row.input_tokens), number(row.cache_read_tokens), number(row.output_tokens), number(row.total_tokens), rate];
 }
 
+let usageData = null;
+let usageLoading = false;
+let selectedUsageDate = "";
+
+function renderUsageTable() {
+  const day = selectedUsageDate && usageData.analytics?.days.find((entry) => entry.date === selectedUsageDate);
+  const model = element("analytics-model").value;
+  const total = day ? { model: "TOTAL", ...analyticsPoint(day, model) } : usageData.total;
+  const rows = day ? day.models.filter((row) => !model || row.model === model).sort((a, b) => b.total_tokens - a.total_tokens || a.model.localeCompare(b.model)) : usageData.rows;
+  const body = element("usage-body");
+  body.replaceChildren();
+  if (total.requests > 0) {
+    body.append(tableRow(usageValues(total), { total: true }));
+    for (const row of rows) body.append(tableRow(usageValues(row)));
+  } else { emptyTable("usage-body", 7, "No usage records."); }
+  element("clear-usage-day").hidden = !day;
+  text("usage-state", day ? day.date : "LOCAL LOG");
+  text("usage-note", `${number(total.requests)} records / ${number(rows.length)} of ${number(day ? rows.length : usageData.model_count)} models shown${day ? ` / ${usageData.analytics.time_zone} / ${model || "All models"}` : ""}`);
+}
+
+function analyticsPoint(day, model) {
+  return model ? day.models.find((row) => row.model === model) || { requests: 0, input_tokens: 0, output_tokens: 0 } : day;
+}
+
+function selectUsageDay(date) {
+  selectedUsageDate = date;
+  renderUsageTable();
+  renderAnalytics();
+}
+
+function dayButton(day, point) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.disabled = !day.available;
+  button.setAttribute("aria-pressed", String(day.date === selectedUsageDate));
+  const description = !day.available ? "no retained history"
+    : `${number(point.requests)} recorded calls / input ${number(point.input_tokens)} / output ${number(point.output_tokens)} / cached ${number(point.cache_read_tokens)} (included in input)${point.tokens_partial ? " / partial token counts" : ""}`;
+  button.title = `${day.date} / ${description}`;
+  button.setAttribute("aria-label", button.title);
+  button.addEventListener("click", () => selectUsageDay(day.date));
+  return button;
+}
+
+function renderAnalytics() {
+  const analytics = usageData?.analytics;
+  if (!analytics) return;
+  const model = element("analytics-model").value;
+  const days = analytics.days;
+  const daily = days.slice(-Number(element("analytics-range").value));
+  const maximum = Math.max(1, ...daily.map((day) => {
+    const point = analyticsPoint(day, model);
+    return point.input_tokens + point.output_tokens;
+  }));
+  const bars = element("daily-bars");
+  bars.replaceChildren();
+  for (const day of daily) {
+    const point = analyticsPoint(day, model);
+    const button = dayButton(day, point);
+    button.className = "daily-bar";
+    for (const key of ["output_tokens", "input_tokens"]) {
+      const segment = document.createElement("span");
+      segment.className = key === "input_tokens" ? "bar-input" : "bar-output";
+      segment.style.height = `${point[key] / maximum * 100}%`;
+      button.append(segment);
+    }
+    bars.append(button);
+  }
+  text("daily-from", daily[0].date);
+  text("daily-to", analytics.to);
+  const metric = element("analytics-metric").value;
+  const value = (day) => {
+    const point = analyticsPoint(day, model);
+    return metric === "tokens" ? point.input_tokens + point.output_tokens : point.requests;
+  };
+  const peak = Math.max(1, ...days.map(value));
+  text("activity-scale", `${metric === "tokens" ? "INPUT + OUTPUT" : "RECORDED CALLS"} / PEAK ${number(peak === 1 && days.every((day) => value(day) === 0) ? 0 : peak)}`);
+  const calendar = element("activity-calendar");
+  calendar.replaceChildren();
+  const offset = (new Date(`${days[0].date}T00:00:00Z`).getUTCDay() + 6) % 7;
+  const months = element("calendar-months");
+  months.replaceChildren();
+  const columns = Math.ceil((offset + days.length) / 7);
+  let previousColumn = -4;
+  days.forEach((day, index) => {
+    if (index !== 0 && !day.date.endsWith("-01")) return;
+    const column = Math.floor((offset + index) / 7);
+    if (column - previousColumn < 4 || column + 4 > columns) return;
+    previousColumn = column;
+    const label = document.createElement("span");
+    label.textContent = day.date.slice(0, 7);
+    label.style.gridColumn = `${column + 1} / span 4`;
+    months.append(label);
+  });
+  for (let index = 0; index < offset; index += 1) {
+    const spacer = document.createElement("span");
+    spacer.setAttribute("aria-hidden", "true");
+    calendar.append(spacer);
+  }
+  for (const day of days) {
+    const button = dayButton(day, analyticsPoint(day, model));
+    button.className = "calendar-day";
+    const count = value(day);
+    button.dataset.level = String(count > 0 ? Math.min(4, Math.ceil(count / peak * 4)) : 0);
+    calendar.append(button);
+  }
+  text("analytics-note", `${analytics.time_zone} / ${daily[0].date} — ${analytics.to} / retained history starts ${analytics.first_date || "unknown"}; oldest day may be partial.${analytics.undated_records ? ` ${number(analytics.undated_records)} records with invalid/future timestamps excluded.` : ""}${analytics.models_truncated ? " Model filters limited to 100; all-model totals include the remainder." : ""}`);
+  text("analytics-selection", selectedUsageDate ? `Selected ${selectedUsageDate} / ${model || "All models"}: totals in the Usage table above / All history resets the table.` : "Select a day for model totals. Calls are usage records, not messages or time. Hatched cells: no retained history; empty cells: zero recorded calls.");
+}
+
+function updateAnalyticsModels() {
+  const select = element("analytics-model");
+  const previous = select.value;
+  select.replaceChildren();
+  for (const model of ["", ...usageData.analytics.models]) {
+    const option = document.createElement("option");
+    option.value = model;
+    option.textContent = model || "All models";
+    select.append(option);
+  }
+  select.value = usageData.analytics.models.includes(previous) ? previous : "";
+}
+
 async function loadUsage() {
+  if (usageLoading) return;
+  usageLoading = true;
+  const includeAnalytics = element("usage-analytics").open || Boolean(selectedUsageDate);
   const button = element("refresh-usage");
   button.disabled = true;
   text("usage-state", "READING LOG");
   text("usage-note", "Aggregating local usage metadata…");
   emptyTable("usage-body", 7, "Loading…");
   try {
-    const response = await fetch("/_ccdx/ui/usage", { cache: "no-store", headers: { "X-CCDX-Dashboard": "1" }, signal: AbortSignal.timeout(15000) });
+    const query = includeAnalytics ? `?analytics=1&time_zone=${encodeURIComponent(Intl.DateTimeFormat().resolvedOptions().timeZone)}` : "";
+    const response = await fetch(`/_ccdx/ui/usage${query}`, { cache: "no-store", headers: { "X-CCDX-Dashboard": "1" }, signal: AbortSignal.timeout(15000) });
     const data = await response.json();
     if (!response.ok || data.source !== "local_usage_log") throw new Error(data.error || `HTTP ${response.status}`);
-    const body = element("usage-body");
-    body.replaceChildren();
-    if (data.total.requests > 0) {
-      body.append(tableRow(usageValues(data.total), { total: true }));
-      for (const row of data.rows) body.append(tableRow(usageValues(row)));
-    } else {
-      emptyTable("usage-body", 7, "No usage records.");
-    }
-    text("usage-state", "LOCAL LOG");
-    text("usage-note", `${number(data.total.requests)} records / ${number(data.rows.length)} of ${number(data.model_count)} models shown`);
+    usageData = data;
+    if (data.analytics) updateAnalyticsModels();
+    renderUsageTable();
+    renderAnalytics();
   } catch (error) {
     text("usage-state", "LOG UNAVAILABLE");
     text("usage-note", String(error.message || error).slice(0, 180));
     emptyTable("usage-body", 7, "No usage summary available.");
+    if (includeAnalytics) text("analytics-note", "Analytics unavailable / refresh Usage to retry.");
   } finally {
+    usageLoading = false;
     button.disabled = false;
+    if (!includeAnalytics && element("usage-analytics").open) loadUsage();
   }
 }
 
 element("save-animation").addEventListener("click", saveAnimation);
+element("animation-settings").addEventListener("toggle", () => {
+  element("open-animation").setAttribute("aria-expanded", String(element("animation-settings").open));
+  if (element("animation-settings").open) loadAnimation();
+  syncAnimationPreview();
+});
+element("open-animation").addEventListener("click", () => {
+  const settings = element("animation-settings");
+  settings.open = true;
+  settings.scrollIntoView({ block: "center" });
+  settings.querySelector("summary").focus();
+});
+element("usage-analytics").addEventListener("toggle", () => {
+  if (element("usage-analytics").open && !usageData?.analytics) loadUsage();
+});
+for (const id of ["analytics-model", "analytics-range", "analytics-metric"]) element(id).addEventListener("change", () => {
+  renderAnalytics();
+  if (usageData && selectedUsageDate) renderUsageTable();
+});
+element("clear-usage-day").addEventListener("click", () => selectUsageDay(""));
 element("refresh-models").addEventListener("click", loadModels);
 element("refresh-usage").addEventListener("click", loadUsage);
 loadAnimation();

package/src/dashboard-api.mjs

@@ -10,6 +10,7 @@ import {
   TERMINAL_ANIMATION_THEMES,
 } from "./terminal-animation.mjs";
 import { cacheReadTokens, summarizeUsageLogs, usageCacheHitRate } from "./usage.mjs";
+import { createUsageAnalytics } from "./usage-analytics.mjs";
 import { readUserSettings, terminalAnimationPreference, writeTerminalAnimationTheme } from "./user-settings.mjs";
 
 const ANIMATION_PATH = "/_ccdx/ui/animation";
@@ -107,7 +108,7 @@ export async function handleDashboardApi(req, res, pathname, {
   env = process.env,
   home = os.homedir(),
   liveModelsFn = () => fetchLiveCopilotModels({ home }),
-  usageSummaryFn = () => summarizeUsageLogs(),
+  usageSummaryFn = (options) => summarizeUsageLogs(undefined, options),
 } = {}) {
   if (!isLoopbackAddress(req.socket?.remoteAddress)
     || req.headers?.host === undefined
@@ -122,7 +123,8 @@ export async function handleDashboardApi(req, res, pathname, {
 
   if (pathname === ANIMATION_PATH && req.method === "GET") {
     try {
-      sendJson(res, 200, animationState(env, home, { includeFrames: true }));
+      const query = new URL(req.url, "http://localhost").searchParams;
+      sendJson(res, 200, animationState(env, home, { includeFrames: query.get("frames") !== "0" }));
     } catch {
       sendJson(res, 409, { error: "Animation settings are invalid; inspect them with ccdx animation" });
     }
@@ -189,8 +191,21 @@ export async function handleDashboardApi(req, res, pathname, {
   }
 
   if (pathname === USAGE_PATH && req.method === "GET") {
+    const query = new URL(req.url, "http://localhost").searchParams;
+    let analytics = null;
+    if (query.get("analytics") === "1") {
+      try {
+        const timeZone = query.get("time_zone") || "UTC";
+        if (timeZone.length > 100) throw new Error("Invalid time zone");
+        analytics = createUsageAnalytics({ timeZone });
+      } catch {
+        sendJson(res, 400, { error: "Select a valid usage time zone" });
+        return;
+      }
+    }
     try {
-      sendJson(res, 200, { source: "local_usage_log", ...(usageTable(await usageSummaryFn())) });
+      const summary = await usageSummaryFn(analytics ? { onRecord: analytics.record } : undefined);
+      sendJson(res, 200, { source: "local_usage_log", ...usageTable(summary), ...(analytics ? { analytics: analytics.snapshot() } : {}) });
     } catch {
       sendJson(res, 500, { error: "Could not read local usage summary" });
     }

package/src/usage-analytics.mjs

@@ -0,0 +1,77 @@
+import { cacheReadTokens, usageCacheHitRate } from "./usage.mjs";
+
+const DAY_MS = 86400000;
+const DAYS = 365;
+const MAX_MODELS = 100;
+const TOKEN_FIELDS = ["input_tokens", "output_tokens", "total_tokens", "cached_input_tokens", "cache_read_input_tokens", "cache_hit_unknown_requests", "cache_hit_invalid_requests"];
+
+export function createUsageAnalytics({ timeZone = "UTC", now = Date.now() } = {}) {
+  const formatter = new Intl.DateTimeFormat("sv-SE", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" });
+  const today = formatter.format(new Date(now));
+  const end = Date.parse(`${today}T00:00:00Z`);
+  const start = end - (DAYS - 1) * DAY_MS;
+  const from = new Date(start).toISOString().slice(0, 10);
+  const dates = new Map();
+  const models = new Set();
+  let first = Infinity;
+  let last = -Infinity;
+  let undated = 0;
+  let modelsTruncated = false;
+
+  function add(target, values) {
+    target.requests += 1;
+    for (const key of TOKEN_FIELDS) {
+      if (Number.isFinite(values[key]) && values[key] >= 0) target[key] = (target[key] || 0) + values[key];
+    }
+    if (!Number.isFinite(values.input_tokens) || values.input_tokens < 0 || !Number.isFinite(values.output_tokens) || values.output_tokens < 0) target.tokens_partial = true;
+  }
+
+  function row(values = {}) {
+    return {
+      requests: values.requests || 0,
+      input_tokens: values.input_tokens || 0,
+      output_tokens: values.output_tokens || 0,
+      total_tokens: values.total_tokens ?? (values.input_tokens || 0) + (values.output_tokens || 0),
+      cache_read_tokens: cacheReadTokens(values) ?? null,
+      cache_hit_rate: usageCacheHitRate(values),
+      cache_hit_rate_partial: values.cache_hit_unknown_requests > 0,
+      tokens_partial: values.tokens_partial === true || values.cache_hit_invalid_requests > 0,
+    };
+  }
+
+  return {
+    record(record, summary) {
+      const timestamp = typeof record.ts === "string" ? Date.parse(record.ts) : NaN;
+      if (!Number.isFinite(timestamp) || timestamp > now) { undated += 1; return; }
+      first = Math.min(first, timestamp);
+      last = Math.max(last, timestamp);
+      if (timestamp < start - 2 * DAY_MS) return;
+      const date = formatter.format(new Date(timestamp));
+      if (date < from || date > today) return;
+      let point = dates.get(date);
+      if (!point) { point = { requests: 0, byModel: new Map() }; dates.set(date, point); }
+      add(point, summary.totals);
+      const model = String(record.model || "unknown").replace(/[\u0000-\u001f\u007f-\u009f]/g, " ").slice(0, 100);
+      if (!models.has(model) && models.size >= MAX_MODELS) { modelsTruncated = true; return; }
+      models.add(model);
+      if (!point.byModel.has(model)) point.byModel.set(model, { requests: 0 });
+      add(point.byModel.get(model), summary.totals);
+    },
+    snapshot() {
+      const firstDate = Number.isFinite(first) ? formatter.format(new Date(first)) : null;
+      const days = Array.from({ length: DAYS }, (_, index) => {
+        const date = new Date(start + index * DAY_MS).toISOString().slice(0, 10);
+        const point = dates.get(date);
+        return {
+          date,
+          available: firstDate !== null && date >= firstDate,
+          ...row(point),
+          models: point ? [...point.byModel].map(([model, values]) => ({ model, ...row(values) })) : [],
+        };
+      });
+      return { time_zone: formatter.resolvedOptions().timeZone, from, to: today, first_date: firstDate,
+        last_date: Number.isFinite(last) ? formatter.format(new Date(last)) : null,
+        undated_records: undated, models_truncated: modelsTruncated, models: [...models].sort(), days };
+    },
+  };
+}

package/src/usage.mjs

@@ -288,11 +288,12 @@ export function summarizeUsage(records) {
   return summary;
 }
 
-export async function summarizeUsageLogs(filePath = usageLogPath(), { warn = console.error } = {}) {
+export async function summarizeUsageLogs(filePath = usageLogPath(), { warn = console.error, onRecord } = {}) {
   const summary = { requests: 0, totals: {}, byModel: {} };
   for (const candidate of [rotatedFilePath(filePath), filePath]) {
     for await (const record of iterateUsageRecords(candidate, { warn })) {
       const one = summarizeUsage([record]);
+      onRecord?.(record, one);
       summary.requests += one.requests;
       addUsageTotals(summary.totals, one.totals);
       for (const [model, values] of Object.entries(one.byModel)) {