clay-server 2.27.0-beta.8 → 2.27.0

package/lib/public/modules/app-panels.js

@@ -0,0 +1,888 @@
+// app-panels.js - Config chip, usage panel, status panel, context panel
+// Extracted from app.js (PR-30)
+
+import { refreshIcons } from "./icons.js";
+import { escapeHtml } from "./utils.js";
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+// --- Module-owned state (not in store) ---
+var sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+var contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+var ctxPopoverEl = null;
+var ctxHoverTimer = null;
+var statusRefreshTimer = null;
+
+// --- DOM refs ---
+var configChipWrap = null;
+var configChip = null;
+var configChipLabel = null;
+var configPopover = null;
+var configModelList = null;
+var configModeList = null;
+var configEffortSection = null;
+var configEffortBar = null;
+var configBetaSection = null;
+var configBeta1mBtn = null;
+var configThinkingSection = null;
+var configThinkingBar = null;
+var configThinkingBudgetRow = null;
+var configThinkingBudgetInput = null;
+
+var usagePanel = null;
+var usagePanelClose = null;
+var usageCostEl = null;
+var usageInputEl = null;
+var usageOutputEl = null;
+var usageCacheReadEl = null;
+var usageCacheWriteEl = null;
+var usageTurnsEl = null;
+
+var statusPanel = null;
+var statusPanelClose = null;
+var statusPidEl = null;
+var statusUptimeEl = null;
+var statusRssEl = null;
+var statusHeapUsedEl = null;
+var statusHeapTotalEl = null;
+var statusExternalEl = null;
+var statusSessionsEl = null;
+var statusProcessingEl = null;
+var statusClientsEl = null;
+var statusTerminalsEl = null;
+
+var contextPanel = null;
+var contextPanelClose = null;
+var contextPanelMinimize = null;
+var contextBarFill = null;
+var contextBarPct = null;
+var contextUsedEl = null;
+var contextWindowEl = null;
+var contextMaxOutputEl = null;
+var contextInputEl = null;
+var contextOutputEl = null;
+var contextCacheReadEl = null;
+var contextCacheWriteEl = null;
+var contextModelEl = null;
+var contextCostEl = null;
+var contextTurnsEl = null;
+var contextMini = null;
+var contextMiniFill = null;
+var contextMiniLabel = null;
+
+// --- Constants ---
+var MODE_OPTIONS = [
+  { value: "default", label: "Default" },
+  { value: "plan", label: "Plan" },
+  { value: "acceptEdits", label: "Auto-accept edits" },
+];
+var MODE_FULL_AUTO = { value: "bypassPermissions", label: "Full auto" };
+var EFFORT_LEVELS = ["low", "medium", "high", "max"];
+var THINKING_OPTIONS = ["disabled", "adaptive", "budget"];
+var KNOWN_CONTEXT_WINDOWS = {
+  "opus-4-6": 1000000,
+  "claude-sonnet-4": 1000000
+};
+// Categories to hide from the legend (noise, not actionable)
+var CTX_HIDDEN_CATS = { "Free space": 1, "Autocompact buffer": 1 };
+
+// --- Non-store state accessors (module-owned, not in store) ---
+export function getSessionUsage() { return sessionUsage; }
+export function setSessionUsage(v) { sessionUsage = v; }
+export function getContextData() { return contextData; }
+export function setContextData(v) { contextData = v; }
+
+// --- Internal helpers ---
+
+function modelDisplayName(value, models) {
+  if (!value) return "";
+  if (models) {
+    for (var i = 0; i < models.length; i++) {
+      if (models[i].value === value && models[i].displayName) return models[i].displayName;
+    }
+  }
+  return value;
+}
+
+function modeDisplayName(value) {
+  for (var i = 0; i < MODE_OPTIONS.length; i++) {
+    if (MODE_OPTIONS[i].value === value) return MODE_OPTIONS[i].label;
+  }
+  if (value === "bypassPermissions") return "Full auto";
+  if (value === "dontAsk") return "Don\u2019t ask";
+  return value;
+}
+
+function effortDisplayName(value) {
+  if (!value) return "";
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+function thinkingDisplayName(value) {
+  if (value === "disabled") return "Off";
+  if (value === "adaptive") return "Adaptive";
+  if (value === "budget") return "Budget";
+  return value || "Adaptive";
+}
+
+function isSonnetModel(model) {
+  if (!model) return false;
+  var lower = model.toLowerCase();
+  return lower.indexOf("sonnet") !== -1;
+}
+
+function hasBeta(name) {
+  var betas = store.getState().currentBetas;
+  for (var i = 0; i < betas.length; i++) {
+    if (betas[i].indexOf(name) !== -1) return true;
+  }
+  return false;
+}
+
+function rebuildModelList() {
+  if (!configModelList) return;
+  configModelList.innerHTML = "";
+  var s = store.getState();
+  var list = s.currentModels.length > 0 ? s.currentModels : (s.currentModel ? [{ value: s.currentModel, displayName: s.currentModel }] : []);
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i];
+    var value = item.value || "";
+    var label = item.displayName || value;
+    var btn = document.createElement("button");
+    btn.className = "config-radio-item";
+    if (value === s.currentModel) btn.classList.add("active");
+    btn.dataset.model = value;
+    btn.textContent = label;
+    btn.addEventListener("click", function () {
+      var model = this.dataset.model;
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "set_model", model: model }));
+      }
+      configPopover.classList.add("hidden");
+      configChip.classList.remove("active");
+    });
+    configModelList.appendChild(btn);
+  }
+}
+
+function rebuildModeList() {
+  if (!configModeList) return;
+  configModeList.innerHTML = "";
+  var options = MODE_OPTIONS.slice();
+  if (store.getState().skipPermsEnabled) {
+    options.push(MODE_FULL_AUTO);
+  }
+  for (var i = 0; i < options.length; i++) {
+    var opt = options[i];
+    var btn = document.createElement("button");
+    btn.className = "config-radio-item";
+    if (opt.value === store.getState().currentMode) btn.classList.add("active");
+    btn.dataset.mode = opt.value;
+    btn.textContent = opt.label;
+    btn.addEventListener("click", function () {
+      var mode = this.dataset.mode;
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "set_permission_mode", mode: mode }));
+      }
+      configPopover.classList.add("hidden");
+      configChip.classList.remove("active");
+    });
+    configModeList.appendChild(btn);
+  }
+}
+
+function rebuildEffortBar() {
+  if (!configEffortBar || !configEffortSection) return;
+  var supportsEffort = getModelSupportsEffort();
+  if (!supportsEffort) {
+    configEffortSection.style.display = "none";
+    return;
+  }
+  configEffortSection.style.display = "";
+  configEffortBar.innerHTML = "";
+  var levels = getModelEffortLevels();
+  for (var i = 0; i < levels.length; i++) {
+    var level = levels[i];
+    var btn = document.createElement("button");
+    btn.className = "config-segment-btn";
+    if (level === store.getState().currentEffort) btn.classList.add("active");
+    btn.dataset.effort = level;
+    btn.textContent = effortDisplayName(level);
+    btn.addEventListener("click", function () {
+      var effort = this.dataset.effort;
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "set_effort", effort: effort }));
+      }
+      configPopover.classList.add("hidden");
+      configChip.classList.remove("active");
+    });
+    configEffortBar.appendChild(btn);
+  }
+}
+
+function rebuildBetaSection() {
+  if (!configBetaSection || !configBeta1mBtn) return;
+  // Only show for Sonnet models
+  if (!isSonnetModel(store.getState().currentModel)) {
+    configBetaSection.style.display = "none";
+    return;
+  }
+  configBetaSection.style.display = "";
+  var active = hasBeta("context-1m");
+  configBeta1mBtn.classList.toggle("active", active);
+  configBeta1mBtn.setAttribute("aria-checked", active ? "true" : "false");
+}
+
+function rebuildThinkingSection() {
+  if (!configThinkingBar || !configThinkingSection) return;
+  configThinkingSection.style.display = "";
+  configThinkingBar.innerHTML = "";
+  var s = store.getState();
+  for (var i = 0; i < THINKING_OPTIONS.length; i++) {
+    var opt = THINKING_OPTIONS[i];
+    var btn = document.createElement("button");
+    btn.className = "config-segment-btn";
+    if (opt === s.currentThinking) btn.classList.add("active");
+    btn.dataset.thinking = opt;
+    btn.textContent = thinkingDisplayName(opt);
+    btn.addEventListener("click", function () {
+      var thinking = this.dataset.thinking;
+      var msg = { type: "set_thinking", thinking: thinking };
+      if (thinking === "budget") {
+        msg.budgetTokens = store.getState().currentThinkingBudget;
+      }
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify(msg));
+      }
+    });
+    configThinkingBar.appendChild(btn);
+  }
+  // Show/hide budget input
+  if (configThinkingBudgetRow) {
+    configThinkingBudgetRow.style.display = s.currentThinking === "budget" ? "" : "none";
+  }
+  if (configThinkingBudgetInput) {
+    configThinkingBudgetInput.value = s.currentThinkingBudget;
+  }
+}
+
+function escHtml(s) {
+  var div = document.createElement("div");
+  div.textContent = s;
+  return div.innerHTML;
+}
+
+function em(emoji) {
+  return '<span class="ctx-emoji">' + emoji + '</span>';
+}
+
+// --- Exported functions ---
+
+export function initPanels() {
+  var $ = function (id) { return document.getElementById(id); };
+
+  // Config chip DOM refs
+  configChipWrap = $("config-chip-wrap");
+  configChip = $("config-chip");
+  configChipLabel = $("config-chip-label");
+  configPopover = $("config-popover");
+  configModelList = $("config-model-list");
+  configModeList = $("config-mode-list");
+  configEffortSection = $("config-effort-section");
+  configEffortBar = $("config-effort-bar");
+  configBetaSection = $("config-beta-section");
+  configBeta1mBtn = $("config-beta-1m");
+  configThinkingSection = $("config-thinking-section");
+  configThinkingBar = $("config-thinking-bar");
+  configThinkingBudgetRow = $("config-thinking-budget-row");
+  configThinkingBudgetInput = $("config-thinking-budget");
+
+  // Usage panel DOM refs
+  usagePanel = $("usage-panel");
+  usagePanelClose = $("usage-panel-close");
+  usageCostEl = $("usage-cost");
+  usageInputEl = $("usage-input");
+  usageOutputEl = $("usage-output");
+  usageCacheReadEl = $("usage-cache-read");
+  usageCacheWriteEl = $("usage-cache-write");
+  usageTurnsEl = $("usage-turns");
+
+  // Status panel DOM refs
+  statusPanel = $("status-panel");
+  statusPanelClose = $("status-panel-close");
+  statusPidEl = $("status-pid");
+  statusUptimeEl = $("status-uptime");
+  statusRssEl = $("status-rss");
+  statusHeapUsedEl = $("status-heap-used");
+  statusHeapTotalEl = $("status-heap-total");
+  statusExternalEl = $("status-external");
+  statusSessionsEl = $("status-sessions");
+  statusProcessingEl = $("status-processing");
+  statusClientsEl = $("status-clients");
+  statusTerminalsEl = $("status-terminals");
+
+  // Context panel DOM refs
+  contextPanel = $("context-panel");
+  contextPanelClose = $("context-panel-close");
+  contextPanelMinimize = $("context-panel-minimize");
+  contextBarFill = $("context-bar-fill");
+  contextBarPct = $("context-bar-pct");
+  contextUsedEl = $("context-used");
+  contextWindowEl = $("context-window");
+  contextMaxOutputEl = $("context-max-output");
+  contextInputEl = $("context-input");
+  contextOutputEl = $("context-output");
+  contextCacheReadEl = $("context-cache-read");
+  contextCacheWriteEl = $("context-cache-write");
+  contextModelEl = $("context-model");
+  contextCostEl = $("context-cost");
+  contextTurnsEl = $("context-turns");
+  contextMini = $("context-mini");
+  contextMiniFill = $("context-mini-fill");
+  contextMiniLabel = $("context-mini-label");
+
+  // --- Event listeners ---
+
+  if (configThinkingBudgetInput) {
+    configThinkingBudgetInput.addEventListener("change", function () {
+      var val = parseInt(this.value, 10);
+      if (isNaN(val) || val < 1024) val = 1024;
+      if (val > 128000) val = 128000;
+      store.setState({ currentThinkingBudget: val });
+      this.value = val;
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "set_thinking", thinking: "budget", budgetTokens: val }));
+      }
+    });
+  }
+
+  if (configBeta1mBtn) {
+    configBeta1mBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      var active = hasBeta("context-1m");
+      var betas = store.getState().currentBetas;
+      var newBetas;
+      if (active) {
+        // Remove context-1m beta
+        newBetas = [];
+        for (var i = 0; i < betas.length; i++) {
+          if (betas[i].indexOf("context-1m") === -1) {
+            newBetas.push(betas[i]);
+          }
+        }
+      } else {
+        // Add context-1m beta
+        newBetas = betas.slice();
+        newBetas.push("context-1m-2025-08-07");
+      }
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "set_betas", betas: newBetas }));
+      }
+    });
+  }
+
+  if (configChip) {
+    configChip.addEventListener("click", function (e) {
+      e.stopPropagation();
+      var wasHidden = configPopover.classList.toggle("hidden");
+      configChip.classList.toggle("active", !wasHidden);
+    });
+  }
+
+  document.addEventListener("click", function (e) {
+    if (configPopover && configChip && !configPopover.contains(e.target) && e.target !== configChip) {
+      configPopover.classList.add("hidden");
+      configChip.classList.remove("active");
+    }
+  });
+
+  if (usagePanelClose) {
+    usagePanelClose.addEventListener("click", function () {
+      usagePanel.classList.add("hidden");
+    });
+  }
+
+  if (statusPanelClose) {
+    statusPanelClose.addEventListener("click", function () {
+      statusPanel.classList.add("hidden");
+      if (statusRefreshTimer) {
+        clearInterval(statusRefreshTimer);
+        statusRefreshTimer = null;
+      }
+    });
+  }
+
+  if (contextPanelClose) {
+    contextPanelClose.addEventListener("click", function () {
+      setContextView("off");
+      applyContextView("off");
+    });
+  }
+
+  if (contextPanelMinimize) {
+    contextPanelMinimize.addEventListener("click", minimizeContext);
+  }
+
+  if (contextMini) {
+    contextMini.addEventListener("click", expandContext);
+  }
+
+  // Restore context view on load
+  applyContextView(getContextView());
+}
+
+// --- Config chip ---
+
+export function updateConfigChip() {
+  if (!configChipWrap || !configChip) return;
+  configChipWrap.classList.remove("hidden");
+  var s = store.getState();
+  var parts = [modelDisplayName(s.currentModel, s.currentModels)];
+  parts.push(modeDisplayName(s.currentMode));
+  // Only show effort if model supports it
+  var modelSupportsEffort = getModelSupportsEffort();
+  if (modelSupportsEffort) {
+    parts.push(effortDisplayName(s.currentEffort));
+  }
+  if (s.currentThinking && s.currentThinking !== "adaptive") {
+    parts.push(thinkingDisplayName(s.currentThinking));
+  }
+  if (hasBeta("context-1m")) {
+    parts.push("1M");
+  }
+  configChipLabel.textContent = parts.join(" \u00b7 ");
+  rebuildModelList();
+  rebuildModeList();
+  rebuildEffortBar();
+  rebuildThinkingSection();
+  rebuildBetaSection();
+}
+
+export function getModelSupportsEffort() {
+  var s = store.getState();
+  if (!s.currentModels || s.currentModels.length === 0) return true; // assume yes if no info
+  for (var i = 0; i < s.currentModels.length; i++) {
+    if (s.currentModels[i].value === s.currentModel) {
+      if (s.currentModels[i].supportsEffort === false) return false;
+      return true;
+    }
+  }
+  return true;
+}
+
+export function getModelEffortLevels() {
+  var s = store.getState();
+  if (!s.currentModels || s.currentModels.length === 0) return EFFORT_LEVELS;
+  for (var i = 0; i < s.currentModels.length; i++) {
+    if (s.currentModels[i].value === s.currentModel) {
+      if (s.currentModels[i].supportedEffortLevels && s.currentModels[i].supportedEffortLevels.length > 0) {
+        return s.currentModels[i].supportedEffortLevels;
+      }
+      return EFFORT_LEVELS;
+    }
+  }
+  return EFFORT_LEVELS;
+}
+
+// --- Usage panel ---
+
+export function formatTokens(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+  if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+  return String(n);
+}
+
+export function updateUsagePanel() {
+  if (!usageCostEl) return;
+  usageCostEl.textContent = "$" + sessionUsage.cost.toFixed(4);
+  usageInputEl.textContent = formatTokens(sessionUsage.input);
+  usageOutputEl.textContent = formatTokens(sessionUsage.output);
+  usageCacheReadEl.textContent = formatTokens(sessionUsage.cacheRead);
+  usageCacheWriteEl.textContent = formatTokens(sessionUsage.cacheWrite);
+  usageTurnsEl.textContent = String(sessionUsage.turns);
+}
+
+export function accumulateUsage(cost, usage) {
+  // cost is the SDK's total_cost_usd -- a cumulative running total, not a delta.
+  // Assign directly instead of summing to avoid overcounting.
+  if (cost != null) sessionUsage.cost = cost;
+  if (usage) {
+    sessionUsage.input += usage.input_tokens || usage.inputTokens || 0;
+    sessionUsage.output += usage.output_tokens || usage.outputTokens || 0;
+    sessionUsage.cacheRead += usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0;
+    sessionUsage.cacheWrite += usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0;
+  }
+  sessionUsage.turns++;
+  if (!store.getState().replayingHistory) updateUsagePanel();
+}
+
+export function resetUsage() {
+  sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+  updateUsagePanel();
+  if (usagePanel) usagePanel.classList.add("hidden");
+}
+
+export function toggleUsagePanel() {
+  if (!usagePanel) return;
+  usagePanel.classList.toggle("hidden");
+  refreshIcons();
+}
+
+// --- Status panel ---
+
+export function formatBytes(n) {
+  if (n >= 1073741824) return (n / 1073741824).toFixed(1) + " GB";
+  if (n >= 1048576) return (n / 1048576).toFixed(1) + " MB";
+  if (n >= 1024) return (n / 1024).toFixed(1) + " KB";
+  return n + " B";
+}
+
+export function formatUptime(seconds) {
+  var d = Math.floor(seconds / 86400);
+  var h = Math.floor((seconds % 86400) / 3600);
+  var m = Math.floor((seconds % 3600) / 60);
+  var s = Math.floor(seconds % 60);
+  if (d > 0) return d + "d " + h + "h " + m + "m";
+  if (h > 0) return h + "h " + m + "m " + s + "s";
+  return m + "m " + s + "s";
+}
+
+export function updateStatusPanel(data) {
+  if (!statusPidEl) return;
+  statusPidEl.textContent = String(data.pid);
+  statusUptimeEl.textContent = formatUptime(data.uptime);
+  statusRssEl.textContent = formatBytes(data.memory.rss);
+  statusHeapUsedEl.textContent = formatBytes(data.memory.heapUsed);
+  statusHeapTotalEl.textContent = formatBytes(data.memory.heapTotal);
+  statusExternalEl.textContent = formatBytes(data.memory.external);
+  statusSessionsEl.textContent = String(data.sessions);
+  statusProcessingEl.textContent = String(data.processing);
+  statusClientsEl.textContent = String(data.clients);
+  statusTerminalsEl.textContent = String(data.terminals);
+}
+
+export function requestProcessStats() {
+  var ws = getWs();
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "process_stats" }));
+  }
+}
+
+export function toggleStatusPanel() {
+  if (!statusPanel) return;
+  var opening = statusPanel.classList.contains("hidden");
+  statusPanel.classList.toggle("hidden");
+  if (opening) {
+    requestProcessStats();
+    statusRefreshTimer = setInterval(requestProcessStats, 5000);
+  } else {
+    if (statusRefreshTimer) {
+      clearInterval(statusRefreshTimer);
+      statusRefreshTimer = null;
+    }
+  }
+  refreshIcons();
+}
+
+// --- Context panel ---
+
+export function resolveContextWindow(model, sdkValue) {
+  if (sdkValue) return sdkValue;
+  var lc = (model || "").toLowerCase();
+  for (var key in KNOWN_CONTEXT_WINDOWS) {
+    if (lc.includes(key)) return KNOWN_CONTEXT_WINDOWS[key];
+  }
+  return 200000;
+}
+
+export function contextPctClass(pct) {
+  return pct >= 85 ? " danger" : pct >= 60 ? " warn" : "";
+}
+
+export function updateContextPanel() {
+  if (!contextUsedEl) return;
+  // Context window usage = input tokens only (includes cache read/write)
+  var used = contextData.input;
+  var win = contextData.contextWindow;
+  var pct = win > 0 ? Math.min(100, (used / win) * 100) : 0;
+  var cls = contextPctClass(pct);
+  // Panel bar
+  contextBarFill.style.width = pct.toFixed(1) + "%";
+  contextBarFill.className = "context-bar-fill" + cls;
+  contextBarPct.textContent = pct.toFixed(0) + "%";
+  // Mini bar
+  if (contextMiniFill) {
+    contextMiniFill.style.width = pct.toFixed(1) + "%";
+    contextMiniFill.className = "context-mini-fill" + cls;
+  }
+  if (contextMiniLabel) {
+    contextMiniLabel.textContent = (win > 0 ? formatTokens(used) + "/" + formatTokens(win) : "0%");
+  }
+  // Header bar
+  if (pct > 0) {
+    var statusArea = document.querySelector(".title-bar-content .status");
+    var hCtxEl = store.getState().headerContextEl;
+    if (statusArea && !hCtxEl) {
+      hCtxEl = document.createElement("div");
+      hCtxEl.className = "header-context";
+      hCtxEl.innerHTML = '<div class="header-context-bar"><div class="header-context-fill"></div></div><span class="header-context-label"></span>';
+      statusArea.insertBefore(hCtxEl, statusArea.firstChild);
+      hCtxEl.addEventListener("mouseenter", function() {
+        if (store.getState().richContextUsage) {
+          showCtxPopover();
+        }
+      });
+      hCtxEl.addEventListener("mouseleave", function() {
+        ctxHoverTimer = setTimeout(hideCtxPopover, 120);
+      });
+      store.setState({ headerContextEl: hCtxEl });
+    }
+    if (hCtxEl) {
+      var hFill = hCtxEl.querySelector(".header-context-fill");
+      var hLabel = hCtxEl.querySelector(".header-context-label");
+      hFill.style.width = pct.toFixed(1) + "%";
+      hFill.className = "header-context-fill" + cls;
+      hLabel.textContent = pct.toFixed(0) + "%";
+      // Use data-tip as fallback when rich data is not yet loaded
+      if (store.getState().richContextUsage) {
+        hCtxEl.removeAttribute("data-tip");
+      } else {
+        hCtxEl.dataset.tip = "Context window " + pct.toFixed(0) + "% used (" + formatTokens(used) + " / " + formatTokens(win) + " tokens)";
+      }
+    }
+  }
+  contextUsedEl.textContent = formatTokens(used);
+  contextWindowEl.textContent = win > 0 ? formatTokens(win) : "-";
+  contextMaxOutputEl.textContent = contextData.maxOutputTokens > 0 ? formatTokens(contextData.maxOutputTokens) : "-";
+  contextInputEl.textContent = formatTokens(contextData.input);
+  contextOutputEl.textContent = formatTokens(contextData.output);
+  contextCacheReadEl.textContent = formatTokens(contextData.cacheRead);
+  contextCacheWriteEl.textContent = formatTokens(contextData.cacheWrite);
+  contextModelEl.textContent = contextData.model;
+  contextCostEl.textContent = "$" + contextData.cost.toFixed(4);
+  contextTurnsEl.textContent = String(contextData.turns);
+}
+
+export function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens) {
+  // cost is the SDK's total_cost_usd -- a cumulative running total, not a delta.
+  if (cost != null) contextData.cost = cost;
+  // Use latest turn values (not cumulative) since each turn's input_tokens
+  // already includes the full conversation context up to that point
+  if (usage) {
+    // Prefer per-call input_tokens from the last stream message_start event
+    // when available -- result.usage.input_tokens sums all API calls in a turn,
+    // inflating context usage when tools are involved.
+    // Falls back to the summed value for setups that don't emit message_start.
+    if (lastStreamInputTokens) {
+      contextData.input = lastStreamInputTokens;
+    } else {
+      contextData.input = (usage.input_tokens || usage.inputTokens || 0)
+          + (usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0);
+    }
+    contextData.output = usage.output_tokens || usage.outputTokens || 0;
+    contextData.cacheRead = usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0;
+    contextData.cacheWrite = usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0;
+  }
+  contextData.turns++;
+  if (modelUsage) {
+    var models = Object.keys(modelUsage);
+    if (models.length > 0) {
+      var m = models[0];
+      var mu = modelUsage[m];
+      contextData.model = m;
+      contextData.contextWindow = resolveContextWindow(m, mu.contextWindow);
+      if (mu.maxOutputTokens) contextData.maxOutputTokens = mu.maxOutputTokens;
+    }
+  }
+  if (!store.getState().replayingHistory) updateContextPanel();
+}
+
+// contextView: "off" | "mini" | "panel"
+export function getContextView() {
+  try { return localStorage.getItem("clay-context-view") || "off"; } catch (e) { return "off"; }
+}
+
+export function setContextView(v) {
+  try { localStorage.setItem("clay-context-view", v); } catch (e) {}
+}
+
+export function applyContextView(view) {
+  if (contextPanel) contextPanel.classList.toggle("hidden", view !== "panel");
+  if (contextMini) contextMini.classList.toggle("hidden", view !== "mini");
+  if (view === "panel") refreshIcons();
+}
+
+export function resetContextData() {
+  contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
+  store.setState({ richContextUsage: null });
+  hideCtxPopover();
+  updateContextPanel();
+}
+
+export function resetContext() {
+  resetContextData();
+  // Keep view state, just reset data
+  applyContextView(getContextView());
+}
+
+export function minimizeContext() {
+  setContextView("mini");
+  applyContextView("mini");
+}
+
+export function expandContext() {
+  setContextView("panel");
+  applyContextView("panel");
+}
+
+export function toggleContextPanel() {
+  if (!contextPanel) return;
+  var view = getContextView();
+  if (view === "panel") {
+    setContextView("mini");
+    applyContextView("mini");
+  } else {
+    setContextView("panel");
+    applyContextView("panel");
+  }
+}
+
+// --- Rich context usage popover ---
+
+export function ensureCtxPopover() {
+  if (ctxPopoverEl) return;
+  ctxPopoverEl = document.createElement("div");
+  ctxPopoverEl.className = "context-usage-popover hidden";
+  // Keep popover open when hovering over it
+  ctxPopoverEl.addEventListener("mouseenter", function() {
+    if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
+  });
+  ctxPopoverEl.addEventListener("mouseleave", function() {
+    hideCtxPopover();
+  });
+}
+
+export function showCtxPopover() {
+  var s = store.getState();
+  if (!s.headerContextEl || !s.richContextUsage) return;
+  if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
+  ensureCtxPopover();
+  s.headerContextEl.appendChild(ctxPopoverEl);
+  renderCtxPopover();
+  ctxPopoverEl.classList.remove("hidden");
+  store.setState({ ctxPopoverVisible: true });
+}
+
+export function hideCtxPopover() {
+  if (!ctxPopoverEl) return;
+  ctxPopoverEl.classList.add("hidden");
+  store.setState({ ctxPopoverVisible: false });
+}
+
+export function renderCtxPopover() {
+  var richContextUsage = store.getState().richContextUsage;
+  if (!ctxPopoverEl || !richContextUsage) return;
+  var d = richContextUsage;
+  var cats = d.categories || [];
+  var total = d.totalTokens || 0;
+  var max = d.maxTokens || 0;
+  var pct = d.percentage != null ? d.percentage : (max > 0 ? (total / max) * 100 : 0);
+
+  var html = "";
+
+  // Header
+  html += '<div class="ctx-pop-header">';
+  html += '<span class="ctx-pop-model">' + escHtml(d.model || contextData.model || "-") + '</span>';
+  html += '<span class="ctx-pop-pct">' + pct.toFixed(0) + '%';
+  html += '<span class="ctx-pop-tokens">' + formatTokens(total) + ' / ' + formatTokens(max) + '</span>';
+  html += '</span>';
+  html += '</div>';
+
+  // Category emoji map
+  var CTX_EMOJI = {
+    "System prompt": "\ud83d\udcdc", "System tools": "\ud83d\udee0\ufe0f",
+    "Memory files": "\ud83d\udcc1", "Skills": "\u26a1", "Messages": "\ud83d\udcac",
+    "MCP tools": "\ud83d\udd0c", "Agents": "\ud83e\udd16", "Deferred tools": "\ud83d\udce6"
+  };
+
+  // Stacked bar
+  if (cats.length > 0 && max > 0) {
+    html += '<div class="ctx-cat-bar">';
+    for (var i = 0; i < cats.length; i++) {
+      var cat = cats[i];
+      if (cat.isDeferred || !cat.tokens || CTX_HIDDEN_CATS[cat.name]) continue;
+      var w = Math.max(0.3, (cat.tokens / max) * 100);
+      html += '<div style="width:' + w.toFixed(2) + '%;background:' + escHtml(cat.color) + '"></div>';
+    }
+    html += '</div>';
+
+    // Legend
+    html += '<div class="ctx-cat-legend">';
+    for (var j = 0; j < cats.length; j++) {
+      var c = cats[j];
+      if (c.isDeferred || !c.tokens || CTX_HIDDEN_CATS[c.name]) continue;
+      var emoji = CTX_EMOJI[c.name] || "\ud83d\udcca";
+      html += '<div class="ctx-cat-item">';
+      html += '<span class="ctx-cat-name">' + em(emoji) + ' ' + escHtml(c.name) + '</span>';
+      html += '<span class="ctx-cat-value">' + formatTokens(c.tokens) + '</span>';
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+
+  // Message breakdown
+  var mb = d.messageBreakdown;
+  if (mb) {
+    html += '<div class="ctx-pop-divider"></div>';
+    html += '<div class="ctx-pop-section-label">' + em("\ud83d\udcac") + ' Messages</div>';
+    if (mb.userMessageTokens) {
+      html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udc64") + ' User</span><span class="ctx-pop-row-value">' + formatTokens(mb.userMessageTokens) + '</span></div>';
+    }
+    if (mb.assistantMessageTokens) {
+      html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83e\udd16") + ' Assistant</span><span class="ctx-pop-row-value">' + formatTokens(mb.assistantMessageTokens) + '</span></div>';
+    }
+    if (mb.toolCallTokens) {
+      html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udee0\ufe0f") + ' Tool calls</span><span class="ctx-pop-row-value">' + formatTokens(mb.toolCallTokens) + '</span></div>';
+    }
+    if (mb.toolResultTokens) {
+      html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udccb") + ' Tool results</span><span class="ctx-pop-row-value">' + formatTokens(mb.toolResultTokens) + '</span></div>';
+    }
+    if (mb.attachmentTokens) {
+      html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udcce") + ' Attachments</span><span class="ctx-pop-row-value">' + formatTokens(mb.attachmentTokens) + '</span></div>';
+    }
+  }
+
+  // Memory files
+  var mf = d.memoryFiles;
+  if (mf && mf.length > 0) {
+    html += '<div class="ctx-pop-divider"></div>';
+    html += '<div class="ctx-pop-section-label">' + em("\ud83d\udcc1") + ' Memory Files</div>';
+    var baseCount = {};
+    for (var mc = 0; mc < mf.length; mc++) {
+      var bn = mf[mc].path.split("/").pop() || mf[mc].path;
+      baseCount[bn] = (baseCount[bn] || 0) + 1;
+    }
+    for (var mi = 0; mi < mf.length; mi++) {
+      var fpath = mf[mi].path;
+      var fname = fpath.split("/").pop() || fpath;
+      if (baseCount[fname] > 1) {
+        var parts = fpath.split("/");
+        fname = parts.length >= 2 ? parts[parts.length - 2] + "/" + fname : fpath;
+      }
+      html += '<div class="ctx-pop-row"><span class="ctx-pop-row-label">' + em("\ud83d\udcc4") + ' ' + escHtml(fname) + '</span><span class="ctx-pop-row-value">' + formatTokens(mf[mi].tokens) + '</span></div>';
+    }
+  }
+
+  // Auto-compact note
+  if (d.isAutoCompactEnabled && d.autoCompactThreshold) {
+    html += '<div class="ctx-pop-note">' + em("\u267b\ufe0f") + ' Auto-compact at ' + formatTokens(d.autoCompactThreshold) + '</div>';
+  }
+
+  ctxPopoverEl.innerHTML = html;
+}