clay-server 2.31.0 → 2.32.0-beta.2

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

@@ -13,6 +13,9 @@ var _extRequestCallbacks = {};
 
 // Queue for extension messages that arrived before WS was ready
 var _pendingExtMessages = [];
+// Cache last extension state so we can resend on WS reconnect (server restart)
+var _lastTabListMsg = null;
+var _lastMcpServersMsg = null;
 
 function sendOrQueue(msgObj) {
   var ws = getWs();
@@ -24,14 +27,20 @@ function sendOrQueue(msgObj) {
 }
 
 export function flushPendingExtMessages() {
-  if (_pendingExtMessages.length === 0) return;
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return;
-  var queued = _pendingExtMessages.slice();
-  _pendingExtMessages = [];
-  for (var i = 0; i < queued.length; i++) {
-    ws.send(JSON.stringify(queued[i]));
+  // Flush queued messages from before WS was ready
+  if (_pendingExtMessages.length > 0) {
+    var queued = _pendingExtMessages.slice();
+    _pendingExtMessages = [];
+    for (var i = 0; i < queued.length; i++) {
+      ws.send(JSON.stringify(queued[i]));
+    }
   }
+  // Resend cached extension state on every WS reconnect so the server
+  // re-registers _extensionWs and rebuilds MCP proxy servers
+  if (_lastTabListMsg) ws.send(JSON.stringify(_lastTabListMsg));
+  if (_lastMcpServersMsg) ws.send(JSON.stringify(_lastMcpServersMsg));
 }
 
 export function initMisc() {
@@ -121,11 +130,9 @@ export function initMisc() {
     if (msg.type === "clay_ext_tab_list") {
       setExtensionConnected(true);
       updateBrowserTabList(msg.tabs);
-      // Also inform server about tab list (queue if WS not ready yet)
-      sendOrQueue({
-        type: "browser_tab_list",
-        tabs: msg.tabs
-      });
+      // Cache and send (or queue) - resent on WS reconnect via flushPendingExtMessages
+      _lastTabListMsg = { type: "browser_tab_list", tabs: msg.tabs };
+      sendOrQueue(_lastTabListMsg);
     }
     if (msg.type === "clay_ext_result") {
       handleExtensionResult(msg.requestId, msg.result);
@@ -135,12 +142,14 @@ export function initMisc() {
     }
 
     // MCP bridge: extension reports available MCP servers (queue if WS not ready yet)
+    // Cache for resend on WS reconnect (server restart loses _availableServers)
     if (msg.type === "mcp_servers_available") {
-      sendOrQueue({
+      _lastMcpServersMsg = {
         type: "mcp_servers_available",
         servers: msg.servers,
         hostConnected: msg.hostConnected
-      });
+      };
+      sendOrQueue(_lastMcpServersMsg);
     }
 
     // MCP bridge: tool result from extension (tool results should not be queued,
@@ -161,6 +170,7 @@ export function initMisc() {
 
 // Forward an MCP tool call from the server to the Chrome extension
 export function forwardMcpToolCall(msg) {
+  console.log("[mcp] forwarding to extension:", msg.callId, msg.server, msg.method);
   window.postMessage({
     source: "clay-page",
     payload: {
@@ -185,6 +195,7 @@ export function setHttpMcpServers(servers) {
 }
 
 export function handleMcpToolCallMessage(msg) {
+  console.log("[mcp] tool call received from server:", msg.callId, msg.server, msg.params && msg.params.name);
   var httpUrl = _httpMcpServers[msg.server];
   if (httpUrl) {
     // HTTP transport: call directly via fetch

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

@@ -15,6 +15,12 @@ var bannerContainer = null;
 var bellBtn = null;
 var badgeEl = null;
 
+// --- Update available banner state ---
+var pendingUpdateMsg = null;
+var updateReshowTimer = null;
+var updateDismissedAt = 0;
+var UPDATE_RESHOW_INTERVAL = 60 * 60 * 1000; // 1 hour
+
 // ========================================================
 // Init
 // ========================================================
@@ -44,7 +50,10 @@ function showAllBanners() {
   // Clear existing banners first
   if (bannerContainer) bannerContainer.innerHTML = "";
 
-  if (notifications.length === 0) {
+  // Re-add update banner if present
+  if (pendingUpdateMsg) showUpdateBanner(pendingUpdateMsg);
+
+  if (notifications.length === 0 && !pendingUpdateMsg) {
     showBanner({
       id: "_empty",
       type: "info",
@@ -237,7 +246,7 @@ export function handleNotificationCreated(msg) {
   var notif = msg.notification;
 
   // Auto-dismiss if it's for the session the user is currently viewing
-  var activeSession = store.getState().activeSessionId || null;
+  var activeSession = store.get('activeSessionId') || null;
   console.log("[notif] created:", notif.type, "sessionId=" + notif.sessionId + "(" + typeof notif.sessionId + ")", "active=" + activeSession + "(" + typeof activeSession + ")", "match=" + (notif.sessionId == activeSession));
   if (notif.sessionId && String(notif.sessionId) === String(activeSession)) {
     dismissNotif(notif.id);
@@ -297,7 +306,7 @@ function navigateToNotification(notif) {
     return;
   }
 
-  var currentSlug = store.getState().currentSlug || "";
+  var currentSlug = store.get('currentSlug') || "";
   var needsProjectSwitch = notif.slug && notif.slug !== currentSlug;
 
   if (needsProjectSwitch) {
@@ -314,6 +323,91 @@ function navigateToNotification(notif) {
   }
 }
 
+// ========================================================
+// Update available banner
+// ========================================================
+
+export function showUpdateBanner(msg) {
+  if (!msg || !msg.version) return;
+  pendingUpdateMsg = msg;
+  if (!bannerContainer) return;
+
+  // If user dismissed recently, skip until reshow timer fires
+  if (updateDismissedAt && (Date.now() - updateDismissedAt) < UPDATE_RESHOW_INTERVAL) return;
+
+  // Remove any existing update banner
+  var existing = bannerContainer.querySelector('[data-notif-id="_update"]');
+  if (existing) removeBanner(existing);
+
+  var isHeadless = store.get('isHeadlessMode');
+  var updTag = msg.version.indexOf("-beta") !== -1 ? "beta" : "latest";
+
+  var banner = document.createElement("div");
+  banner.className = "notif-banner notif-banner-update";
+  banner.setAttribute("data-notif-id", "_update");
+
+  var actionsHtml = '';
+  if (!isHeadless) {
+    actionsHtml =
+      '<div class="notif-banner-actions">' +
+        '<button class="notif-banner-update-now">Update now</button>' +
+      '</div>';
+  }
+
+  banner.innerHTML =
+    '<div class="notif-banner-icon"><img src="/icon-banded-76.png" width="32" height="32" alt="Clay" style="border-radius:8px"></div>' +
+    '<div class="notif-banner-body">' +
+      '<div class="notif-banner-project">CLAY</div>' +
+      '<div class="notif-banner-title">v' + escapeHtml(msg.version) + ' is available</div>' +
+      (isHeadless
+        ? '<div class="notif-banner-text">Run: npx clay-server@' + escapeHtml(updTag) + '</div>'
+        : '') +
+      actionsHtml +
+    '</div>' +
+    '<button class="notif-banner-close">' + iconHtml("x") + '</button>';
+
+  bannerContainer.appendChild(banner);
+  refreshIcons();
+
+  requestAnimationFrame(function () {
+    banner.classList.add("show");
+  });
+
+  // "Update now" button
+  var updateBtn = banner.querySelector(".notif-banner-update-now");
+  if (updateBtn) {
+    updateBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "update_now" }));
+        updateBtn.textContent = "Updating...";
+        updateBtn.disabled = true;
+      }
+    });
+  }
+
+  // Close button -> dismiss, re-show in 1 hour
+  var closeBtn = banner.querySelector(".notif-banner-close");
+  if (closeBtn) {
+    closeBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      removeBanner(banner);
+      scheduleUpdateReshow();
+    });
+  }
+}
+
+function scheduleUpdateReshow() {
+  updateDismissedAt = Date.now();
+  if (updateReshowTimer) clearTimeout(updateReshowTimer);
+  updateReshowTimer = setTimeout(function () {
+    updateReshowTimer = null;
+    updateDismissedAt = 0;
+    if (pendingUpdateMsg) showUpdateBanner(pendingUpdateMsg);
+  }, UPDATE_RESHOW_INTERVAL);
+}
+
 // ========================================================
 // Helpers
 // ========================================================

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

@@ -2,9 +2,10 @@
 // Extracted from app.js (PR-30)
 
 import { refreshIcons } from "./icons.js";
-import { escapeHtml } from "./utils.js";
+import { escapeHtml, showToast } from "./utils.js";
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { VENDOR_NAMES } from './app-rendering.js';
 
 // --- Module-owned state (not in store) ---
 var sessionUsage = { cost: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, turns: 0 };
@@ -28,6 +29,12 @@ var configThinkingSection = null;
 var configThinkingBar = null;
 var configThinkingBudgetRow = null;
 var configThinkingBudgetInput = null;
+var configApprovalSection = null;
+var configApprovalBar = null;
+var configSandboxSection = null;
+var configSandboxBar = null;
+var configWebsearchSection = null;
+var configWebsearchBar = null;
 
 var usagePanel = null;
 var usagePanelClose = null;
@@ -78,10 +85,35 @@ var MODE_OPTIONS = [
 ];
 var MODE_FULL_AUTO = { value: "bypassPermissions", label: "Full auto" };
 var EFFORT_LEVELS = ["low", "medium", "high", "xhigh", "max"];
+var EFFORT_LEVELS_BY_VENDOR = {
+  claude: ["low", "medium", "high", "xhigh", "max"],
+  codex: ["minimal", "low", "medium", "high", "xhigh"],
+};
 var THINKING_OPTIONS = ["disabled", "adaptive", "budget"];
+var CODEX_APPROVAL_OPTIONS = [
+  { value: "never", label: "Auto" },
+  { value: "on-failure", label: "On Fail" },
+  { value: "on-request", label: "Ask" },
+];
+var CODEX_SANDBOX_OPTIONS = [
+  { value: "read-only", label: "Read Only" },
+  { value: "workspace-write", label: "Workspace" },
+  { value: "danger-full-access", label: "Full Access" },
+];
+var CODEX_WEBSEARCH_OPTIONS = [
+  { value: "disabled", label: "Off" },
+  { value: "cached", label: "Cached" },
+  { value: "live", label: "Live" },
+];
 var KNOWN_CONTEXT_WINDOWS = {
   "opus-4-6": 1000000,
-  "claude-sonnet-4": 1000000
+  "claude-sonnet-4": 1000000,
+  "gpt-5.4": 1048576,
+  "gpt-5.3": 1048576,
+  "gpt-5.2": 1048576,
+  "gpt-4.1": 1047576,
+  "o3": 200000,
+  "o4-mini": 200000,
 };
 // Categories to hide from the legend (noise, not actionable)
 var CTX_HIDDEN_CATS = { "Free space": 1, "Autocompact buffer": 1 };
@@ -98,7 +130,9 @@ 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;
+      var m = models[i];
+      if (typeof m === "string") { if (m === value) return m; }
+      else if (m.value === value && m.displayName) return m.displayName;
     }
   }
   return value;
@@ -133,7 +167,7 @@ function isSonnetModel(model) {
 }
 
 function hasBeta(name) {
-  var betas = store.getState().currentBetas;
+  var betas = store.get('currentBetas');
   for (var i = 0; i < betas.length; i++) {
     if (betas[i].indexOf(name) !== -1) return true;
   }
@@ -143,12 +177,13 @@ function hasBeta(name) {
 function rebuildModelList() {
   if (!configModelList) return;
   configModelList.innerHTML = "";
-  var s = store.getState();
+  var s = store.snap();
   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;
+    // Support both object { value, displayName } and plain string formats
+    var value = typeof item === "string" ? item : (item.value || "");
+    var label = typeof item === "string" ? item : (item.displayName || value);
     var btn = document.createElement("button");
     btn.className = "config-radio-item";
     if (value === s.currentModel) btn.classList.add("active");
@@ -171,14 +206,14 @@ function rebuildModeList() {
   if (!configModeList) return;
   configModeList.innerHTML = "";
   var options = MODE_OPTIONS.slice();
-  if (store.getState().skipPermsEnabled) {
+  if (store.get('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");
+    if (opt.value === store.get('currentMode')) btn.classList.add("active");
     btn.dataset.mode = opt.value;
     btn.textContent = opt.label;
     btn.addEventListener("click", function () {
@@ -208,7 +243,7 @@ function rebuildEffortBar() {
     var level = levels[i];
     var btn = document.createElement("button");
     btn.className = "config-segment-btn";
-    if (level === store.getState().currentEffort) btn.classList.add("active");
+    if (level === store.get('currentEffort')) btn.classList.add("active");
     btn.dataset.effort = level;
     btn.textContent = effortDisplayName(level);
     btn.addEventListener("click", function () {
@@ -227,7 +262,7 @@ function rebuildEffortBar() {
 function rebuildBetaSection() {
   if (!configBetaSection || !configBeta1mBtn) return;
   // Only show for Sonnet models
-  if (!isSonnetModel(store.getState().currentModel)) {
+  if (!isSonnetModel(store.get('currentModel'))) {
     configBetaSection.style.display = "none";
     return;
   }
@@ -241,7 +276,7 @@ function rebuildThinkingSection() {
   if (!configThinkingBar || !configThinkingSection) return;
   configThinkingSection.style.display = "";
   configThinkingBar.innerHTML = "";
-  var s = store.getState();
+  var s = store.snap();
   for (var i = 0; i < THINKING_OPTIONS.length; i++) {
     var opt = THINKING_OPTIONS[i];
     var btn = document.createElement("button");
@@ -253,7 +288,7 @@ function rebuildThinkingSection() {
       var thinking = this.dataset.thinking;
       var msg = { type: "set_thinking", thinking: thinking };
       if (thinking === "budget") {
-        msg.budgetTokens = store.getState().currentThinkingBudget;
+        msg.budgetTokens = store.get('currentThinkingBudget');
       }
       var ws = getWs();
       if (ws && ws.readyState === 1) {
@@ -271,6 +306,47 @@ function rebuildThinkingSection() {
   }
 }
 
+function buildSegmentedBar(barEl, options, currentValue, msgType, msgKey) {
+  if (!barEl) return;
+  barEl.innerHTML = "";
+  for (var i = 0; i < options.length; i++) {
+    var opt = options[i];
+    var btn = document.createElement("button");
+    btn.className = "config-segment-btn";
+    if (opt.value === currentValue) btn.classList.add("active");
+    btn.dataset.val = opt.value;
+    btn.textContent = opt.label;
+    btn.addEventListener("click", function () {
+      var val = this.dataset.val;
+      var msg = { type: msgType };
+      msg[msgKey] = val;
+      var ws = getWs();
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify(msg));
+      configPopover.classList.add("hidden");
+      configChip.classList.remove("active");
+    });
+    barEl.appendChild(btn);
+  }
+}
+
+function rebuildCodexSections() {
+  var s = store.snap();
+  var isCodex = (s.currentVendor || "claude") === "codex";
+
+  if (configApprovalSection) {
+    configApprovalSection.style.display = isCodex ? "" : "none";
+    if (isCodex) buildSegmentedBar(configApprovalBar, CODEX_APPROVAL_OPTIONS, s.codexApproval || "on-failure", "set_codex_approval", "approval");
+  }
+  if (configSandboxSection) {
+    configSandboxSection.style.display = isCodex ? "" : "none";
+    if (isCodex) buildSegmentedBar(configSandboxBar, CODEX_SANDBOX_OPTIONS, s.codexSandbox || "workspace-write", "set_codex_sandbox", "sandbox");
+  }
+  if (configWebsearchSection) {
+    configWebsearchSection.style.display = isCodex ? "" : "none";
+    if (isCodex) buildSegmentedBar(configWebsearchBar, CODEX_WEBSEARCH_OPTIONS, s.codexWebSearch || "disabled", "set_codex_websearch", "webSearch");
+  }
+}
+
 function escHtml(s) {
   var div = document.createElement("div");
   div.textContent = s;
@@ -301,6 +377,86 @@ export function initPanels() {
   configThinkingBar = $("config-thinking-bar");
   configThinkingBudgetRow = $("config-thinking-budget-row");
   configThinkingBudgetInput = $("config-thinking-budget");
+  configApprovalSection = $("config-approval-section");
+  configApprovalBar = $("config-approval-bar");
+  configSandboxSection = $("config-sandbox-section");
+  configSandboxBar = $("config-sandbox-bar");
+  configWebsearchSection = $("config-websearch-section");
+  configWebsearchBar = $("config-websearch-bar");
+
+  // --- Vendor toggle ---
+  var vendorToggleWrap = $("vendor-toggle-wrap");
+  var vendorBtnClaude = $("vendor-btn-claude");
+  var vendorBtnCodex = $("vendor-btn-codex");
+  var vendorBtns = { claude: vendorBtnClaude, codex: vendorBtnCodex };
+
+  function updateVendorToggle() {
+    var installed = store.get('installedVendors') || [];
+    var current = store.get('currentVendor') || "claude";
+
+    var vendors = Object.keys(vendorBtns);
+    for (var i = 0; i < vendors.length; i++) {
+      var v = vendors[i];
+      var btn = vendorBtns[v];
+      if (!btn) continue;
+      var isInstalled = installed.indexOf(v) !== -1;
+      btn.classList.toggle("active", v === current);
+      btn.classList.toggle("disabled", !isInstalled);
+      btn.title = isInstalled ? (VENDOR_NAMES[v] || v) : (VENDOR_NAMES[v] || v) + " is not installed";
+    }
+  }
+
+  function onVendorClick(vendor) {
+    if (vendor === (store.get('currentVendor') || "claude")) return;
+    var installed = store.get('installedVendors') || [];
+    if (installed.indexOf(vendor) === -1) return;
+    store.set({ currentVendor: vendor });
+    var ws = getWs();
+    if (ws) ws.send(JSON.stringify({ type: "set_vendor", vendor: vendor }));
+  }
+
+  if (vendorBtnClaude) vendorBtnClaude.addEventListener("click", function() { onVendorClick("claude"); });
+  if (vendorBtnCodex) vendorBtnCodex.addEventListener("click", function() { onVendorClick("codex"); });
+
+  // --- Reactive UI sync ---
+  store.subscribe(function (state, prev) {
+    // Vendor toggle state
+    if (state.availableVendors !== prev.availableVendors ||
+        state.installedVendors !== prev.installedVendors ||
+        state.currentVendor !== prev.currentVendor) {
+      updateVendorToggle();
+    }
+
+    // richContextUsage changed -> update popover + panel
+    if (state.richContextUsage !== prev.richContextUsage) {
+      if (state.richContextUsage) {
+        var hce = store.get('headerContextEl');
+        if (hce) hce.removeAttribute("data-tip");
+        if (state.ctxPopoverVisible) renderCtxPopover();
+      } else {
+        hideCtxPopover();
+      }
+      updateContextPanel();
+    }
+    // Vendor changed -> switch model list and current model to match
+    if (state.currentVendor !== prev.currentVendor && state.currentVendor) {
+      var ws = getWs();
+      if (ws) ws.send(JSON.stringify({ type: "get_vendor_models", vendor: state.currentVendor }));
+    }
+
+    // config chip
+    if (state.currentModel !== prev.currentModel ||
+        state.currentMode !== prev.currentMode ||
+        state.currentEffort !== prev.currentEffort ||
+        state.currentBetas !== prev.currentBetas ||
+        state.currentThinking !== prev.currentThinking ||
+        state.currentVendor !== prev.currentVendor ||
+        state.codexApproval !== prev.codexApproval ||
+        state.codexSandbox !== prev.codexSandbox ||
+        state.codexWebSearch !== prev.codexWebSearch) {
+      updateConfigChip();
+    }
+  });
 
   // Usage panel DOM refs
   usagePanel = $("usage-panel");
@@ -353,7 +509,7 @@ export function initPanels() {
       var val = parseInt(this.value, 10);
       if (isNaN(val) || val < 1024) val = 1024;
       if (val > 128000) val = 128000;
-      store.setState({ currentThinkingBudget: val });
+      store.set({ currentThinkingBudget: val });
       this.value = val;
       var ws = getWs();
       if (ws && ws.readyState === 1) {
@@ -366,7 +522,7 @@ export function initPanels() {
     configBeta1mBtn.addEventListener("click", function (e) {
       e.stopPropagation();
       var active = hasBeta("context-1m");
-      var betas = store.getState().currentBetas;
+      var betas = store.get('currentBetas');
       var newBetas;
       if (active) {
         // Remove context-1m beta
@@ -443,30 +599,27 @@ export function initPanels() {
 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 ");
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  configChipLabel.textContent = modelDisplayName(s.currentModel, s.currentModels);
   rebuildModelList();
   rebuildModeList();
   rebuildEffortBar();
+
+  // Vendor-specific sections
+  var isClaude = vendor === "claude";
+  // MODE, THINKING, BETA are Claude-only
+  if (configModeList && configModeList.parentElement) configModeList.parentElement.style.display = isClaude ? "" : "none";
   rebuildThinkingSection();
-  rebuildBetaSection();
+  if (configThinkingSection) configThinkingSection.style.display = isClaude ? "" : "none";
+  // BETA section deprecated (1M context is now standard)
+  if (configBetaSection) configBetaSection.style.display = "none";
+  // APPROVAL, SANDBOX, WEB SEARCH are Codex-only
+  rebuildCodexSections();
 }
 
 export function getModelSupportsEffort() {
-  var s = store.getState();
+  var s = store.snap();
   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) {
@@ -478,17 +631,19 @@ export function getModelSupportsEffort() {
 }
 
 export function getModelEffortLevels() {
-  var s = store.getState();
-  if (!s.currentModels || s.currentModels.length === 0) return EFFORT_LEVELS;
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var defaultLevels = EFFORT_LEVELS_BY_VENDOR[vendor] || EFFORT_LEVELS;
+  if (!s.currentModels || s.currentModels.length === 0) return defaultLevels;
   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 defaultLevels;
     }
   }
-  return EFFORT_LEVELS;
+  return defaultLevels;
 }
 
 // --- Usage panel ---
@@ -520,7 +675,7 @@ export function accumulateUsage(cost, usage) {
     sessionUsage.cacheWrite += usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0;
   }
   sessionUsage.turns++;
-  if (!store.getState().replayingHistory) updateUsagePanel();
+  if (!store.get('replayingHistory')) updateUsagePanel();
 }
 
 export function resetUsage() {
@@ -628,21 +783,21 @@ export function updateContextPanel() {
   // Header bar
   if (pct > 0) {
     var statusArea = document.querySelector(".title-bar-content .status");
-    var hCtxEl = store.getState().headerContextEl;
+    var hCtxEl = store.get('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) {
+        if (store.get('richContextUsage')) {
           showCtxPopover();
         }
       });
       hCtxEl.addEventListener("mouseleave", function() {
         ctxHoverTimer = setTimeout(hideCtxPopover, 120);
       });
-      store.setState({ headerContextEl: hCtxEl });
+      store.set({ headerContextEl: hCtxEl });
     }
     if (hCtxEl) {
       var hFill = hCtxEl.querySelector(".header-context-fill");
@@ -651,7 +806,7 @@ export function updateContextPanel() {
       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) {
+      if (store.get('richContextUsage')) {
         hCtxEl.removeAttribute("data-tip");
       } else {
         hCtxEl.dataset.tip = "Context window " + pct.toFixed(0) + "% used (" + formatTokens(used) + " / " + formatTokens(win) + " tokens)";
@@ -701,7 +856,7 @@ export function accumulateContext(cost, usage, modelUsage, lastStreamInputTokens
       if (mu.maxOutputTokens) contextData.maxOutputTokens = mu.maxOutputTokens;
     }
   }
-  if (!store.getState().replayingHistory) updateContextPanel();
+  if (!store.get('replayingHistory')) updateContextPanel();
 }
 
 // contextView: "off" | "mini" | "panel"
@@ -721,9 +876,8 @@ export function applyContextView(view) {
 
 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();
+  store.set({ richContextUsage: null });
+  // hideCtxPopover + updateContextPanel handled by store subscriber
 }
 
 export function resetContext() {
@@ -770,24 +924,24 @@ export function ensureCtxPopover() {
 }
 
 export function showCtxPopover() {
-  var s = store.getState();
+  var s = store.snap();
   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 });
+  store.set({ ctxPopoverVisible: true });
 }
 
 export function hideCtxPopover() {
   if (!ctxPopoverEl) return;
   ctxPopoverEl.classList.add("hidden");
-  store.setState({ ctxPopoverVisible: false });
+  store.set({ ctxPopoverVisible: false });
 }
 
 export function renderCtxPopover() {
-  var richContextUsage = store.getState().richContextUsage;
+  var richContextUsage = store.get('richContextUsage');
   if (!ctxPopoverEl || !richContextUsage) return;
   var d = richContextUsage;
   var cats = d.categories || [];