clay-server 4.1.0-beta.9 → 4.1.0

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

@@ -5,15 +5,17 @@ import { refreshIcons } from "./icons.js";
 import { escapeHtml, showToast } from "./utils.js";
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { getContextView as getStoredContextView, getEffectiveContextView, setContextView as setStoredContextView } from './context-view-preference.js';
 import { reportPaneContext } from './pane-bridge.js';
 import { setupModelPicker, renderModelPicker, requestVendorModels, prepareModelPickerOpen, modelDisplayName } from './model-picker.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, thinking: null, costBasis: null };
+var contextData = { contextWindow: 0, currentInput: null, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0, thinking: null, costBasis: null };
 var ctxPopoverEl = null;
 var ctxHoverTimer = null;
 var statusRefreshTimer = null;
+var lastAppliedContextView = null;
 
 // --- DOM refs ---
 var configChipWrap = null;
@@ -374,6 +376,15 @@ export function initPanels() {
 
   // --- Reactive UI sync ---
   store.subscribe(function (state, prev) {
+    var effectiveContextView = getEffectiveContextView();
+    if (effectiveContextView !== lastAppliedContextView) {
+      lastAppliedContextView = effectiveContextView;
+      applyContextView(effectiveContextView);
+    }
+    if (state.contextViewPreferenceState && state.contextViewPreferenceState.error &&
+        state.contextViewPreferenceState.error !== (prev.contextViewPreferenceState && prev.contextViewPreferenceState.error)) {
+      showToast(state.contextViewPreferenceState.error, "error");
+    }
     // richContextUsage changed -> update popover + panel
     if (state.richContextUsage !== prev.richContextUsage) {
       if (state.richContextUsage) {
@@ -540,7 +551,6 @@ export function initPanels() {
   if (contextPanelClose) {
     contextPanelClose.addEventListener("click", function () {
       setContextView("off");
-      applyContextView("off");
     });
   }
 
@@ -553,7 +563,8 @@ export function initPanels() {
   }
 
   // Restore context view on load
-  applyContextView(getContextView());
+  lastAppliedContextView = getEffectiveContextView();
+  applyContextView(lastAppliedContextView);
 }
 
 // --- Config chip ---
@@ -718,9 +729,18 @@ export function contextPctClass(pct) {
 
 export function updateContextPanel() {
   if (!contextUsedEl) return;
-  // Context window usage = input tokens only (includes cache read/write)
-  var used = contextData.input;
-  var win = contextData.contextWindow;
+  // Context occupancy is separate from generic per-turn accounting. Codex
+  // only supplies currentInput from a verified last-turn snapshot; rich
+  // context usage is more authoritative when available.
+  var rich = store.get('richContextUsage');
+  var hasRich = rich && (
+    (typeof rich.totalTokens === "number" && typeof rich.maxTokens === "number" && rich.maxTokens > 0) ||
+    (typeof rich.input_tokens === "number" && typeof rich.contextWindow === "number" && rich.contextWindow > 0)
+  );
+  var hasCurrent = typeof contextData.currentInput === "number";
+  var hasContext = !!(hasRich || hasCurrent);
+  var used = hasRich ? (typeof rich.totalTokens === "number" ? rich.totalTokens : rich.input_tokens) : (hasCurrent ? contextData.currentInput : 0);
+  var win = hasRich ? (typeof rich.maxTokens === "number" ? rich.maxTokens : rich.contextWindow) : (hasCurrent ? contextData.contextWindow : 0);
   var pct = win > 0 ? Math.min(100, (used / win) * 100) : 0;
   var cls = contextPctClass(pct);
   reportPaneContext({ pct: pct, used: used, win: win, cls: cls, model: contextData.model, cost: contextData.cost });
@@ -734,7 +754,7 @@ export function updateContextPanel() {
     contextMiniFill.className = "context-mini-fill" + cls;
   }
   if (contextMiniLabel) {
-    contextMiniLabel.textContent = (win > 0 ? formatTokens(used) + "/" + formatTokens(win) : "0%");
+    contextMiniLabel.textContent = (win > 0 ? formatTokens(used) + "/" + formatTokens(win) : "-");
   }
   // Header bar. A split group has no meaningful group-level context usage:
   // the two members have separate windows, and the parent shell's own numbers
@@ -742,9 +762,9 @@ export function updateContextPanel() {
   // chip instead, so hide the title-bar gauge while a split is open.
   var splitOpen = !!store.get('splitPanes');
   var headerCtxEl = store.get('headerContextEl');
-  if (headerCtxEl) headerCtxEl.classList.toggle("hidden", splitOpen);
-  if (contextMini) contextMini.classList.toggle("split-hidden", splitOpen);
-  if (pct > 0 && !splitOpen) {
+  if (headerCtxEl) headerCtxEl.classList.toggle("hidden", splitOpen || !hasContext);
+  if (contextMini) contextMini.classList.toggle("split-hidden", splitOpen || !hasContext);
+  if (hasContext && !splitOpen) {
     var statusArea = document.querySelector(".title-bar-content .status");
     var hCtxEl = store.get('headerContextEl');
     if (statusArea && !hCtxEl) {
@@ -808,7 +828,7 @@ export function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens
     // 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) {
+    if (typeof lastStreamInputTokens === "number") {
       contextData.input = lastStreamInputTokens;
     } else {
       contextData.input = (usage.input_tokens || usage.inputTokens || 0)
@@ -817,6 +837,11 @@ export function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens
     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;
+    if (store.get('currentVendor') === "codex") {
+      contextData.currentInput = typeof lastStreamInputTokens === "number" ? lastStreamInputTokens : null;
+    } else {
+      contextData.currentInput = typeof lastStreamInputTokens === "number" ? lastStreamInputTokens : contextData.input;
+    }
   }
   contextData.turns++;
   if (modelUsage) {
@@ -830,6 +855,21 @@ export function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens
       contextData.model = displayModel;
       contextData.contextWindow = resolveContextWindow(displayModel, mu.contextWindow);
       if (mu.maxOutputTokens) contextData.maxOutputTokens = mu.maxOutputTokens;
+      if (store.get('currentVendor') === "codex") {
+        var snapshot = mu.contextSnapshot;
+        if (snapshot) store.set({ richContextUsage: null });
+        if (snapshot && snapshot.valid === true
+            && typeof snapshot.inputTokens === "number"
+            && typeof snapshot.contextWindow === "number"
+            && snapshot.contextWindow > 0) {
+          contextData.currentInput = snapshot.inputTokens;
+          contextData.contextWindow = snapshot.contextWindow;
+        } else {
+          // An explicit invalid marker is authoritative: do not retain an
+          // occupancy value from the previous live turn or history replay.
+          contextData.currentInput = null;
+        }
+      }
 
       // thinkingTokens and costBasis are per-model and optional: absent on
       // older CLI builds and, for a resumed session, on the turns that ran
@@ -860,50 +900,56 @@ export function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens
 
 // contextView: "off" | "mini" | "panel"
 export function getContextView() {
-  try { return localStorage.getItem("clay-context-view") || "off"; } catch (e) { return "off"; }
+  return getStoredContextView();
 }
 
 export function setContextView(v) {
-  try { localStorage.setItem("clay-context-view", v); } catch (e) {}
+  if (store.get("paneMode") === true) {
+    store.set({ contextViewOverride: v });
+    return true;
+  }
+  return setStoredContextView(v);
 }
 
 export function applyContextView(view) {
   if (contextPanel) contextPanel.classList.toggle("hidden", view !== "panel");
   if (contextMini) contextMini.classList.toggle("hidden", view !== "mini");
-  if (view === "panel") refreshIcons();
+  if (view === "panel") { refreshIcons(); requestContextDetails(); }
 }
 
 export function resetContextData() {
-  contextData = { contextWindow: 0, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0, thinking: null, costBasis: null };
+  contextData = { contextWindow: 0, currentInput: null, maxOutputTokens: 0, model: "-", cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0, thinking: null, costBasis: null };
   store.set({ richContextUsage: null });
   // hideCtxPopover + updateContextPanel handled by store subscriber
 }
 
+export function markContextUnavailable() {
+  contextData.currentInput = null;
+  store.set({ richContextUsage: null });
+  updateContextPanel();
+}
+
 export function resetContext() {
   resetContextData();
   // Keep view state, just reset data
-  applyContextView(getContextView());
+  applyContextView(getEffectiveContextView());
 }
 
 export function minimizeContext() {
   setContextView("mini");
-  applyContextView("mini");
 }
 
 export function expandContext() {
   setContextView("panel");
-  applyContextView("panel");
 }
 
 export function toggleContextPanel() {
   if (!contextPanel) return;
-  var view = getContextView();
+  var view = getEffectiveContextView();
   if (view === "panel") {
     setContextView("mini");
-    applyContextView("mini");
   } else {
     setContextView("panel");
-    applyContextView("panel");
   }
 }
 
@@ -922,9 +968,17 @@ export function ensureCtxPopover() {
   });
 }
 
+function requestContextDetails() {
+  var ws = getWs();
+  if (!store.get("replayingHistory") && ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "context_usage_request", sessionId: store.get("activeSessionId") }));
+  }
+}
+
 export function showCtxPopover() {
   var s = store.snap();
   if (!s.headerContextEl || !s.richContextUsage) return;
+  requestContextDetails();
   if (ctxHoverTimer) { clearTimeout(ctxHoverTimer); ctxHoverTimer = null; }
   ensureCtxPopover();
   s.headerContextEl.appendChild(ctxPopoverEl);
@@ -944,8 +998,8 @@ export function renderCtxPopover() {
   if (!ctxPopoverEl || !richContextUsage) return;
   var d = richContextUsage;
   var cats = d.categories || [];
-  var total = d.totalTokens || 0;
-  var max = d.maxTokens || 0;
+  var total = d.totalTokens != null ? d.totalTokens : (d.input_tokens || 0);
+  var max = d.maxTokens != null ? d.maxTokens : (d.contextWindow || 0);
   var pct = d.percentage != null ? d.percentage : (max > 0 ? (total / max) * 100 : 0);
 
   var html = "";

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

@@ -39,6 +39,7 @@ import { closeProjectSettings } from './project-settings.js';
 import { chooseProjectAfterRemoval } from './project-removal-target.js';
 import { isProjectActivated, isProjectActivationPending, isProjectContextConnected, projectWsPath } from './project-activation.js';
 import { rememberHomePrimarySurface } from './home-surface.js';
+import { clearProjectSplitState } from './split-session-boundary.js';
 
 // --- Module-owned state ---
 var cachedProjects = [];
@@ -447,6 +448,7 @@ export function switchProject(slug) {
   }
   if (homeVisible) store.set({ pendingHomeProjectSlug: slug });
   if (isProjectActivationPending(store.snap(), slug, ws)) return;
+  if (store.get('currentSlug') !== slug) clearProjectSplitState();
   resetFileBrowser();
   if (typeof closeScheduledTasks === "function") closeScheduledTasks();
   closeNotesBrowser();

package/lib/public/modules/app-rate-limit.js

@@ -13,6 +13,7 @@ var rateLimitResetTimer = null;
 var rateLimitUsageEl = null;
 var rateLimitResetState = {};
 var rateLimitTickTimer = null;
+var rateLimitPopoverTimers = [];
 var fastModeIndicatorEl = null;
 
 // --- Internal helpers ---
@@ -25,7 +26,7 @@ function getVendorUsageMeta(vendor) {
     codex: {
       icon: "/codex-avatar.png",
       alt: "Codex",
-      href: "https://chatgpt.com/admin/usage",
+      href: "https://chatgpt.com/codex/settings/usage",
       title: "Check usage on ChatGPT",
     },
     claude: {
@@ -35,7 +36,7 @@ function getVendorUsageMeta(vendor) {
       title: "Check usage on claude.ai",
     },
   };
-  return fallbacks[vendor] || fallbacks.claude;
+  return fallbacks[vendor] || null;
 }
 
 function vendorTracksRateLimits(vendor) {
@@ -51,6 +52,37 @@ function vendorSupportsScheduledMessages(vendor) {
   return scheduledMessageVendors.indexOf(vendor) !== -1;
 }
 
+function rateLimitEventAppliesToPane(msg, state) {
+  var activeSessionId = state.activeSessionId;
+  var activeVendor = state.currentVendor || "claude";
+  if (!msg) return false;
+  if (msg.sessionId != null && String(msg.sessionId) !== String(activeSessionId)) return false;
+  if (msg.vendor) return msg.vendor === activeVendor;
+  // Legacy Claude records predate vendor/session stamps. Never project them
+  // into a non-Claude pane, where they would look like Claude usage.
+  return activeVendor === "claude";
+}
+
+function rateLimitStateKey(sessionId, vendor) {
+  return String(store.get('currentSlug') || "") + "\u0000" +
+    String(store.get('myUserId') || "") + "\u0000" +
+    String(sessionId == null ? "" : sessionId) + "\u0000" + String(vendor || "claude");
+}
+
+function getActiveRateLimitState() {
+  var state = store.get('rateLimitState') || {};
+  var key = rateLimitStateKey(store.get('activeSessionId'), store.get('currentVendor'));
+  return state[key] || {};
+}
+
+function setActiveRateLimitState(next) {
+  var state = Object.assign({}, store.get('rateLimitState') || {});
+  var key = rateLimitStateKey(store.get('activeSessionId'), store.get('currentVendor'));
+  state[key] = next;
+  store.set({ rateLimitState: state });
+  rateLimitResetState = next;
+}
+
 function rateLimitTypeLabel(type) {
   if (!type) return "Usage";
   var labels = {
@@ -108,13 +140,15 @@ function updateRateLimitIndicator(msg) {
   var isRejected = msg.status === "rejected";
   var pillClass = "header-rate-limit" + (isRejected ? " rejected" : " warning");
   var label = isRejected ? "Rate limited" : "Rate warning";
+  var meta = getVendorUsageMeta(store.get('currentVendor') || "claude");
+  var link = meta
+    ? '<a href="' + meta.href + '" target="_blank" rel="noopener" class="rate-limit-link" title="' + meta.title + '">' + iconHtml("external-link") + "</a>"
+    : '<span class="rate-limit-link unavailable" title="Usage information is unavailable for this vendor">' + iconHtml("external-link") + "</span>";
   rateLimitIndicatorEl.innerHTML =
     '<span class="' + pillClass + '">' +
       iconHtml("alert-triangle") +
       '<span class="header-pill-text">' + label + "</span>" +
-      '<a href="https://claude.ai/settings/usage" target="_blank" rel="noopener" class="rate-limit-link">' +
-        iconHtml("external-link") +
-      "</a>" +
+      link +
     "</span>";
   refreshIcons();
 }
@@ -131,10 +165,12 @@ function showRateLimitPopover(text, isRejected) {
   rateLimitIndicatorEl.appendChild(pop);
 
   // Auto-dismiss after 5s
-  setTimeout(function () {
+  var fadeTimer = setTimeout(function () {
     pop.classList.add("fade-out");
-    setTimeout(function () { if (pop.parentNode) pop.remove(); }, 300);
+    var removeTimer = setTimeout(function () { if (pop.parentNode) pop.remove(); }, 300);
+    rateLimitPopoverTimers.push(removeTimer);
   }, 5000);
+  rateLimitPopoverTimers.push(fadeTimer);
 }
 
 function clearRateLimitIndicator() {
@@ -168,22 +204,81 @@ function tickRateLimitUsage() {
   if (!rateLimitUsageEl) return;
   var parts = [];
   var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
+  var nextState = Object.assign({}, rateLimitResetState);
+  var changed = false;
   for (var i = 0; i < types.length; i++) {
     var entry = rateLimitResetState[types[i]];
     if (!entry || !entry.resetsAt) continue;
     var timeStr = formatResetTime(entry.resetsAt);
-    if (!timeStr) { delete rateLimitResetState[types[i]]; continue; }
+    if (!timeStr) { delete nextState[types[i]]; changed = true; continue; }
     parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
   }
+  if (changed) setActiveRateLimitState(nextState);
   if (parts.length === 0) {
-    rateLimitUsageEl.innerHTML = iconHtml("activity") + '<span>Check usage</span>' + iconHtml("external-link");
-    refreshIcons();
+    renderRateLimitUsage();
+    return;
+  }
+  renderRateLimitUsage();
+}
+
+function renderRateLimitUsage() {
+  var activeVendor = store.get('currentVendor') || "claude";
+  if (!vendorTracksRateLimits(activeVendor)) {
+    if (rateLimitUsageEl) {
+      rateLimitUsageEl.remove();
+      rateLimitUsageEl = null;
+    }
     if (rateLimitTickTimer) { clearInterval(rateLimitTickTimer); rateLimitTickTimer = null; }
     return;
   }
-  var label = parts.join(" · ");
-  rateLimitUsageEl.innerHTML = iconHtml("activity") + '<span>' + label + '</span>' + iconHtml("external-link");
+
+  rateLimitResetState = getActiveRateLimitState();
+  var topBarActions = document.querySelector("#top-bar .top-bar-actions");
+  if (!topBarActions) return;
+  if (!rateLimitUsageEl) {
+    rateLimitUsageEl = document.createElement("a");
+    rateLimitUsageEl.id = "rate-limit-usage-link";
+    rateLimitUsageEl.className = "top-bar-pill pill-dim usage-check-link";
+    rateLimitUsageEl.target = "_blank";
+    rateLimitUsageEl.rel = "noopener";
+    var ref = document.getElementById("skip-perms-pill");
+    topBarActions.insertBefore(rateLimitUsageEl, ref);
+  }
+  rateLimitUsageEl.style.display = "";
+
+  var parts = [];
+  var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
+  for (var i = 0; i < types.length; i++) {
+    var entry = rateLimitResetState[types[i]];
+    if (!entry || !entry.resetsAt) continue;
+    var timeStr = formatResetTime(entry.resetsAt);
+    if (!timeStr) continue;
+    parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
+  }
+
+  var label = parts.length > 0 ? parts.join(" · ") : "Check usage";
+  var meta = getVendorUsageMeta(activeVendor);
+  if (meta) {
+    rateLimitUsageEl.href = meta.href;
+    rateLimitUsageEl.title = meta.title;
+    rateLimitUsageEl.removeAttribute("aria-disabled");
+    rateLimitUsageEl.innerHTML =
+      '<img src="' + meta.icon + '" class="usage-check-vendor-icon" alt="' + meta.alt + '">' +
+      '<span>' + label + '</span>' + iconHtml("external-link");
+  } else {
+    rateLimitUsageEl.removeAttribute("href");
+    rateLimitUsageEl.setAttribute("aria-disabled", "true");
+    rateLimitUsageEl.title = "Usage information is unavailable for this vendor";
+    rateLimitUsageEl.innerHTML = '<span>' + (parts.length > 0 ? label : "Usage unavailable") + '</span>';
+  }
   refreshIcons();
+
+  if (parts.length > 0 && !rateLimitTickTimer) {
+    rateLimitTickTimer = setInterval(tickRateLimitUsage, 30000);
+  } else if (parts.length === 0 && rateLimitTickTimer) {
+    clearInterval(rateLimitTickTimer);
+    rateLimitTickTimer = null;
+  }
 }
 
 // --- Exported functions ---
@@ -193,15 +288,32 @@ export function initRateLimit() {
     if (state.currentVendor !== prev.currentVendor && state.currentVendor) {
       if (!vendorSupportsScheduledMessages(state.currentVendor)) clearScheduleDelay();
     }
-    if (state.currentVendor !== prev.currentVendor || state.vendorInfo !== prev.vendorInfo) {
-      if (rateLimitUsageEl) {
-        rateLimitUsageEl.style.display = vendorTracksRateLimits(state.currentVendor || "claude") ? "" : "none";
-      }
+    if (state.currentVendor !== prev.currentVendor || state.activeSessionId !== prev.activeSessionId
+        || state.currentSlug !== prev.currentSlug || state.myUserId !== prev.myUserId) {
+      resetRateLimitState();
+    }
+    if (state.vendorInfo !== prev.vendorInfo && state.currentVendor === prev.currentVendor && state.activeSessionId === prev.activeSessionId
+        && state.currentSlug === prev.currentSlug && state.myUserId === prev.myUserId) {
+      renderRateLimitUsage();
     }
   });
 }
 
 export function handleRateLimitEvent(msg) {
+  if (!rateLimitEventAppliesToPane(msg, store.snap())) return;
+  if (msg.resetsAt && msg.resetsAt <= Date.now()) {
+    var expiredState = Object.assign({}, getActiveRateLimitState());
+    if (msg.rateLimitType) delete expiredState[msg.rateLimitType];
+    setActiveRateLimitState(expiredState);
+    clearRateLimitIndicator();
+    renderRateLimitUsage();
+    return;
+  }
+  if (msg.rateLimitType && msg.resetsAt) {
+    var eventState = Object.assign({}, getActiveRateLimitState());
+    eventState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
+    setActiveRateLimitState(eventState);
+  }
   var isRejected = msg.status === "rejected";
   var typeLabel = rateLimitTypeLabel(msg.rateLimitType);
   var popoverText = "";
@@ -226,8 +338,12 @@ export function handleRateLimitEvent(msg) {
     rateLimitResetTimer = setTimeout(function () {
       rateLimitResetsAt = null;
       rateLimitResetTimer = null;
+      var currentState = Object.assign({}, getActiveRateLimitState());
+      delete currentState[msg.rateLimitType];
+      setActiveRateLimitState(currentState);
       // Clear schedule mode when rate limit resets
       clearScheduleDelay();
+      renderRateLimitUsage();
     }, msg.resetsAt - Date.now() + 1000);
   } else {
     var pct = msg.utilization ? Math.round(msg.utilization * 100) : null;
@@ -239,58 +355,19 @@ export function handleRateLimitEvent(msg) {
 }
 
 export function updateRateLimitUsage(msg) {
+  if (!rateLimitEventAppliesToPane(msg, store.snap())) return;
   var activeVendor = store.get('currentVendor') || "claude";
   if (!vendorTracksRateLimits(activeVendor)) {
-    if (rateLimitUsageEl) rateLimitUsageEl.style.display = "none";
+    renderRateLimitUsage();
     return;
   }
   if (msg.rateLimitType && msg.resetsAt) {
-    rateLimitResetState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
-  }
-
-  var topBarActions = document.querySelector("#top-bar .top-bar-actions");
-  if (!topBarActions) return;
-
-  if (!rateLimitUsageEl) {
-    rateLimitUsageEl = document.createElement("a");
-    rateLimitUsageEl.id = "rate-limit-usage-link";
-    rateLimitUsageEl.className = "top-bar-pill pill-dim usage-check-link";
-    rateLimitUsageEl.target = "_blank";
-    rateLimitUsageEl.rel = "noopener";
-    var ref = document.getElementById("skip-perms-pill");
-    topBarActions.insertBefore(rateLimitUsageEl, ref);
-  }
-  rateLimitUsageEl.style.display = "";
-
-  // Build label from available reset times
-  var parts = [];
-  var types = ["five_hour", "seven_day", "seven_day_opus", "seven_day_sonnet"];
-  for (var i = 0; i < types.length; i++) {
-    var entry = rateLimitResetState[types[i]];
-    if (!entry || !entry.resetsAt) continue;
-    var timeStr = formatResetTime(entry.resetsAt);
-    if (!timeStr) continue;
-    parts.push(rateLimitTypeShortLabel(types[i]) + " resets " + timeStr);
+    var nextState = Object.assign({}, getActiveRateLimitState());
+    nextState[msg.rateLimitType] = { resetsAt: msg.resetsAt, status: msg.status };
+    setActiveRateLimitState(nextState);
   }
 
-  var label = parts.length > 0 ? parts.join(" · ") : "Check usage";
-  var vendor = activeVendor;
-  var meta = getVendorUsageMeta(vendor);
-  rateLimitUsageEl.href = meta.href;
-  rateLimitUsageEl.title = meta.title;
-  rateLimitUsageEl.innerHTML =
-    '<img src="' + meta.icon + '" class="usage-check-vendor-icon" alt="' + meta.alt + '">' +
-    '<span>' + label + '</span>' +
-    iconHtml("external-link");
-  refreshIcons();
-
-  // Start or stop live countdown tick
-  if (parts.length > 0 && !rateLimitTickTimer) {
-    rateLimitTickTimer = setInterval(tickRateLimitUsage, 30000);
-  } else if (parts.length === 0 && rateLimitTickTimer) {
-    clearInterval(rateLimitTickTimer);
-    rateLimitTickTimer = null;
-  }
+  renderRateLimitUsage();
 }
 
 export function handleFastModeState(state) {
@@ -322,6 +399,16 @@ export function handleFastModeState(state) {
 
 export function resetRateLimitState() {
   clearRateLimitIndicator();
+  rateLimitResetsAt = null;
+  if (rateLimitResetTimer) { clearTimeout(rateLimitResetTimer); rateLimitResetTimer = null; }
+  clearScheduleDelay();
+  for (var i = 0; i < rateLimitPopoverTimers.length; i++) clearTimeout(rateLimitPopoverTimers[i]);
+  rateLimitPopoverTimers = [];
+  if (rateLimitTickTimer) { clearInterval(rateLimitTickTimer); rateLimitTickTimer = null; }
   if (rateLimitCountdownTimer) { clearInterval(rateLimitCountdownTimer); rateLimitCountdownTimer = null; }
+  rateLimitResetState = getActiveRateLimitState();
+  renderRateLimitUsage();
   if (fastModeIndicatorEl) { fastModeIndicatorEl.remove(); fastModeIndicatorEl = null; }
 }
+
+export { rateLimitEventAppliesToPane, getVendorUsageMeta };