codex-overleaf-link 2.3.5 → 2.4.0

package/extension/src/content/panelMaintenance.js

@@ -129,29 +129,40 @@
   }
 
   // --- History & storage (v1.7.5): usage summary + clear-all in Settings ---
+  let storageUsageRequestId = 0;
   function refreshStorageUsageSummary() {
     const node = getSettingsPanelInstance()?.container?.querySelector('[data-storage-usage]');
     if (!node) {
       return;
     }
-    const sessionCount = Array.isArray(getState()?.sessions) ? getState().sessions.length : 0;
-    const runCount = Array.isArray(getState()?.runs) ? getState().runs.length : 0;
+    const requestId = ++storageUsageRequestId;
+    const projectId = getCurrentProjectId?.();
+    const isCurrent = () => requestId === storageUsageRequestId && projectId === getCurrentProjectId?.()
+      && getSettingsPanelInstance()?.container?.querySelector('[data-storage-usage]') === node;
+    const current = getState();
+    const sessionCount = Array.isArray(current?.sessions) ? current.sessions.length : 0;
+    const runCount = Array.isArray(current?.runs) ? current.runs.length : 0;
     const counts = tx(
-      `${sessionCount} session(s) · ${runCount} recent run(s) kept`,
-      `${sessionCount} 个会话 · 保留最近 ${runCount} 轮运行`
+      `${sessionCount} loaded session(s) in this project · ${runCount} run(s) in the active session`,
+      `当前项目已加载 ${sessionCount} 个会话 · 当前会话 ${runCount} 轮运行`
     );
+    // Dynamic text belongs to this renderer, not the loading-label translator.
+    node.removeAttribute?.('data-i18n');
     node.textContent = counts;
-    const estimate = navigator.storage?.estimate?.();
-    if (estimate?.then) {
-      estimate.then(info => {
-        const usage = Number(info?.usage);
-        if (Number.isFinite(usage) && usage >= 0) {
-          const mb = usage / (1024 * 1024);
-          const size = mb >= 1 ? `${mb.toFixed(1)} MB` : `${Math.max(1, Math.round(usage / 1024))} KB`;
-          node.textContent = tx(`${counts} · ~${size} used on this site`, `${counts} · 本站点约占用 ${size}`);
-        }
-      }).catch(() => { /* estimate unsupported — counts alone are fine */ });
-    }
+    const unavailable = () => {
+      if (isCurrent()) node.textContent = tx(`${counts} · Site storage estimate unavailable`, `${counts} · 本站点容量暂无法估算`);
+    };
+    let timer;
+    const estimate = Promise.resolve().then(() => navigator.storage?.estimate?.());
+    const deadline = new Promise(resolve => { timer = setTimeout(() => resolve(null), 2000); });
+    return Promise.race([estimate, deadline]).then(info => {
+      if (!isCurrent()) return;
+      const usage = info?.usage;
+      if (!Number.isFinite(usage) || usage < 0) { unavailable(); return; }
+      const mb = usage / (1024 * 1024);
+      const size = usage === 0 ? '0 KB' : mb >= 1 ? `${mb.toFixed(1)} MB` : `${Math.max(1, Math.round(usage / 1024))} KB`;
+      node.textContent = tx(`${counts} · Site total ~${size}`, `${counts} · 本站点总占用约 ${size}`);
+    }).catch(unavailable).finally(() => clearTimeout(timer));
   }
 
   async function clearAllHistoryWithConfirm() {

package/extension/src/content/providerSettingsCoordinator.js

@@ -59,6 +59,7 @@
     return {
       open: () => open(instance),
       refreshSummary: () => refreshSummary(instance),
+      renderSummary: () => updateSettingsSummary(instance),
       ensureLoaded: () => ensureLoaded(instance),
       getRunSelection: providerId => instance.loaded
         ? Profiles.buildRunSelection(instance.catalog, providerId || instance.getSelectedProviderId())

package/extension/src/content/runFailureNotice.js

@@ -0,0 +1,104 @@
+(function initRunFailureNotice(root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.CodexOverleafModuleRegistry.define('RunFailureNotice', [], factory);
+  }
+})(typeof window !== 'undefined' ? window : globalThis, function runFailureNoticeFactory() {
+  'use strict';
+
+  const REVIEW_CODES = new Set(['write_timeout', 'partial_write_needs_review']);
+  const CANCEL_CODES = new Set(['cancelled', 'user_cancelled', 'codex_cancelled']);
+
+  function create({ tr, projectRunSettlement, sanitizeText = value => value,
+    document: documentRef = globalThis.document } = {}) {
+    const notices = new WeakMap();
+
+    function append(report, event = {}, run = {}) {
+      const projection = typeof projectRunSettlement === 'function' && run
+        ? projectRunSettlement(run) : null;
+      const failure = projection?.primaryFailure || event.failure;
+      if (report.dataset.status === 'cancelled' || CANCEL_CODES.has(failure?.code)) return;
+      const facts = run?.settlement || run?.settlementFacts || {};
+      const unconfirmed = REVIEW_CODES.has(failure?.code)
+        || facts.documentEffect === 'possibly-changed'
+        || (facts.evidence?.applied === 'unknown' && facts.evidence?.settled === 'needs-review');
+      const partial = facts.evidence?.applied === 'partial' || run?.partialWriteback === true;
+      if (!failure && !unconfirmed && !partial && report.dataset.status !== 'failed') return;
+
+      const notice = documentRef.createElement('aside');
+      notice.className = 'run-feedback';
+      notice.dataset.tone = unconfirmed || partial || failure?.terminalState === 'degraded'
+        || failure?.terminalState === 'needs_review' ? 'warning' : 'error';
+      notice.setAttribute('role', 'note');
+      const heading = documentRef.createElement('strong');
+      heading.className = 'run-feedback__title';
+      heading.textContent = tr(unconfirmed ? 'runFeedbackUnconfirmedTitle'
+        : partial ? 'runFeedbackPartialTitle' : 'runFeedbackFailedTitle');
+      const message = documentRef.createElement('p');
+      const detail = typeof failure?.userMessage === 'string' ? failure.userMessage : '';
+      const file = safeProjectPath(failure?.file);
+      message.textContent = sanitizeText([file, detail].filter(Boolean).join(': ').slice(0, 1000))
+        || tr('runFeedbackGeneric');
+      notice.append(heading, message);
+      if (unconfirmed) {
+        const warning = documentRef.createElement('p');
+        warning.textContent = tr('runFeedbackUnconfirmed');
+        notice.append(warning);
+      }
+      notices.set(report, { notice, unconfirmed, failure, file });
+      report.append(notice);
+    }
+
+    function formatMetaValue(report, row) {
+      if (!notices.get(report)?.unconfirmed) return row.value;
+      const key = String(row.key || '').toLowerCase().replace(/[^a-z]/g, '');
+      const label = String(row.label || '').trim().toLowerCase();
+      if (key === 'writeresult' || key === 'next'
+        || ['write result', 'next', '\u5199\u5165\u7ed3\u679c', '\u4e0b\u4e00\u6b65'].includes(label)) {
+        return tr('runFeedbackUnconfirmedResult');
+      }
+      return row.value;
+    }
+
+    function prepareRecovery(report, { openFile } = {}) {
+      const info = notices.get(report);
+      const target = info?.notice || report;
+      if (!info?.unconfirmed) return { target, handled: false };
+      const canOpen = Boolean(info.file && typeof openFile === 'function');
+      const button = documentRef.createElement('button');
+      button.type = 'button';
+      button.className = 'run-final-answer__recovery-action';
+      button.dataset.recoveryFor = info.failure?.code || 'write_unconfirmed';
+      button.textContent = tr(canOpen ? 'runFeedbackReviewFile' : 'runFeedbackReviewDetails', { file: info.file });
+      button.addEventListener('click', event => {
+        event.stopPropagation();
+        if (canOpen) {
+          openFile(info.file);
+          return;
+        }
+        const process = report.closest?.('[data-run-id]')?.querySelector?.('[data-run-process]');
+        if (process) {
+          process.open = true;
+          process.scrollIntoView?.({ block: 'nearest' });
+        } else {
+          button.disabled = true;
+          button.title = tr('runFeedbackDetailsUnavailable');
+        }
+      });
+      target.append(button);
+      return { target, handled: true };
+    }
+
+    return Object.freeze({ append, formatMetaValue, prepareRecovery });
+  }
+
+  function safeProjectPath(value) {
+    if (typeof value !== 'string') return '';
+    const path = value.replace(/\\/g, '/');
+    return path && !path.startsWith('/') && !/^[A-Za-z]:/.test(path)
+      && !path.split('/').includes('..') ? path.slice(0, 300) : '';
+  }
+
+  return Object.freeze({ create });
+});

package/extension/src/content/runResultActions.js

@@ -107,7 +107,22 @@
       if (!copied) throw new Error('clipboard_copy_failed');
     }
 
-    return Object.freeze({ configureResultActions });
+    return Object.freeze({ configureResultActions, projectUndoAvailability });
+  }
+
+  function projectUndoAvailability(run, projectRunSettlement) {
+    const payload = run.recoveryPayload && typeof run.recoveryPayload === 'object'
+      ? run.recoveryPayload : run;
+    if (!Array.isArray(payload.appliedOperations)) return projectRunSettlement(run);
+    // Forward binary writes do not provide a rollback. Filter them only for
+    // display; preserve the canonical settlement and every real recovery field.
+    const appliedOperations = payload.appliedOperations.filter(operation =>
+      operation?.type !== 'binary-create' && operation?.type !== 'overwrite-binary');
+    if (appliedOperations.length === payload.appliedOperations.length) return projectRunSettlement(run);
+    return projectRunSettlement({
+      ...run,
+      recoveryPayload: { ...payload, appliedOperations }
+    });
   }
 
   return Object.freeze({ create });

package/extension/src/content/runScrollLayout.js

@@ -0,0 +1,124 @@
+(function initRunScrollLayout(root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.CodexOverleafModuleRegistry.define('RunScrollLayout', [], factory);
+  }
+})(typeof window !== 'undefined' ? window : globalThis, function runScrollLayoutFactory() {
+  'use strict';
+
+  const READING_ANCHORS = '.run-final-answer p, .run-final-answer li, .run-final-answer pre, .run-final-answer h1, .run-final-answer h2, .run-final-answer h3, .run-stream p, .run-stream li, .run-stream pre, [data-run-task], [data-run-status]';
+
+  function create({ getScroller, onLayoutChange, isFollowing = () => true, window: host = globalThis } = {}) {
+    let current = null;
+    let resizeObserver = null;
+    let mutationObserver = null;
+    let anchor = null;
+    let extent = '';
+
+    function measure() { return current ? `${current.scrollHeight}:${current.clientHeight}` : ''; }
+
+    function captureAnchor(force = false) {
+      if (!current || isFollowing()) { anchor = null; return; }
+      // A layout-induced scroll can arrive before ResizeObserver. Keep the
+      // pre-layout anchor until notify has compensated its displacement.
+      if (!force && extent !== measure()) return;
+      const bounds = current.getBoundingClientRect?.();
+      if (!bounds) return;
+      const nodes = current.querySelectorAll?.(READING_ANCHORS) || [];
+      anchor = null;
+      for (const node of nodes) {
+        const rect = node.getBoundingClientRect();
+        if (rect.height > 0 && rect.bottom > bounds.top && rect.top < bounds.bottom) {
+          anchor = { node, offset: rect.top - bounds.top };
+          break;
+        }
+      }
+    }
+
+    function restoreAnchor() {
+      if (isFollowing() || !anchor || !current.contains?.(anchor.node)) return;
+      const rect = anchor.node.getBoundingClientRect();
+      if (!rect.height) return;
+      const delta = rect.top - current.getBoundingClientRect().top - anchor.offset;
+      if (Math.abs(delta) > 0.5) current.scrollTop += delta;
+    }
+
+    function snapshot() {
+      captureAnchor();
+      const run = anchor?.node.closest?.('[data-run-id]');
+      return { scrollTop: current?.scrollTop || 0, runId: run?.dataset?.runId || '',
+        index: run ? Array.from(run.querySelectorAll(READING_ANCHORS)).indexOf(anchor.node) : -1,
+        offset: anchor?.offset || 0 };
+    }
+
+    function restore(reading) {
+      if (!current || !reading) return;
+      current.scrollTop = reading.scrollTop;
+      // History repaint replaces nodes. Rebind by run identity and paragraph
+      // position; a missing anchor falls back to the saved scroll offset.
+      const run = Array.from(current.querySelectorAll?.('[data-run-id]') || [])
+        .find(node => node.dataset.runId === reading.runId);
+      const node = run?.querySelectorAll(READING_ANCHORS)[reading.index];
+      anchor = node ? { node, offset: reading.offset } : null;
+      restoreAnchor();
+      extent = measure();
+      captureAnchor(true);
+    }
+
+    function dispose() {
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      resizeObserver = null;
+      mutationObserver = null;
+      current = null;
+      anchor = null;
+      extent = '';
+    }
+
+    function notify() {
+      if (!current) return;
+      const active = getScroller();
+      if (active !== current) {
+        bind(active);
+        return;
+      }
+      restoreAnchor();
+      extent = measure();
+      onLayoutChange(current);
+      captureAnchor(true);
+    }
+
+    function bind(scroller) {
+      if (scroller === current) return;
+      dispose();
+      if (!scroller || typeof host.ResizeObserver !== 'function') return;
+      current = scroller;
+      extent = measure();
+      captureAnchor(true);
+      resizeObserver = new host.ResizeObserver(notify);
+      resizeObserver.observe(scroller);
+      // Observe run-sized children, rather than every streaming text node.
+      for (const child of scroller.children || []) resizeObserver.observe(child);
+      if (typeof host.MutationObserver === 'function') {
+        mutationObserver = new host.MutationObserver(records => {
+          if (current !== scroller) return;
+          for (const record of records) {
+            for (const node of record.removedNodes) {
+              if (node.nodeType === 1) resizeObserver.unobserve(node);
+            }
+            for (const node of record.addedNodes) {
+              if (node.nodeType === 1) resizeObserver.observe(node);
+            }
+          }
+          notify();
+        });
+        mutationObserver.observe(scroller, { childList: true });
+      }
+    }
+
+    return Object.freeze({ bind, dispose, captureAnchor, snapshot, restore });
+  }
+
+  return Object.freeze({ create });
+});

package/extension/src/content/runTimelineView.js

@@ -14,6 +14,8 @@
     const {
       RunGuidanceView,
       RunResultActions,
+      RunScrollLayout,
+      RunFailureNotice,
       tr,
       tx,
       getLocale,
@@ -48,6 +50,7 @@
 
   let logAutoFollow = true;
   let userScrollIntentUntil = 0;
+  let userScrollExtent = '';
   // Scroll engine: a single rAF coalesces a burst of scroll requests into one
   // write per frame (streaming can fire ~25/sec); `scrollLogPendingForce`
   // survives that coalesce so a forced scroll is never lost. `unreadSinceDetach`
@@ -60,6 +63,12 @@
   // reads a static "Processing…" and the user can't tell a working run from a
   // hung one — the single highest-value streaming signal per competitor UX.
   let runElapsedTimer = null;
+  const scrollLayout = RunScrollLayout?.create({
+    getScroller: getLogScrollContainer,
+    isFollowing: () => logAutoFollow,
+    onLayoutChange: scroller => logAutoFollow ? scrollLogToBottom() : updateJumpToLatestButton(scroller)
+  });
+  const failureNotice = RunFailureNotice?.create({ tr, projectRunSettlement, sanitizeText: sanitizeAssistantVisibleText });
 
   // Re-arm auto-follow (called by the runtime when a new run starts, so the
   // log snaps back to following the live stream).
@@ -70,6 +79,7 @@
 
   function bindLogAutoFollow() {
     const scroller = getLogScrollContainer();
+    scrollLayout?.bind(scroller);
     if (!scroller || scroller.dataset.autoFollowBound === 'true') {
       return;
     }
@@ -79,15 +89,14 @@
     scroller.addEventListener('pointerdown', markUserScrollIntent, { passive: true });
     scroller.addEventListener('keydown', event => {
       if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(event.key)) {
-        markUserScrollIntent();
+        markUserScrollIntent(event);
       }
     });
     scroller.addEventListener('scroll', () => {
-      if (Date.now() <= userScrollIntentUntil) {
+      if (Date.now() <= userScrollIntentUntil && userScrollExtent === `${scroller.scrollHeight}:${scroller.clientHeight}`) {
         logAutoFollow = isLogNearBottom(scroller);
-      } else if (isLogNearBottom(scroller)) {
-        logAutoFollow = true;
       }
+      scrollLayout?.captureAnchor();
       // Reveal / hide the floating "jump to latest" button the instant the
       // user detaches from or re-reaches the bottom.
       updateJumpToLatestButton(scroller);
@@ -125,6 +134,7 @@
     if (!el) {
       return;
     }
+    if (el.dataset) el.dataset.logAutoFollow = logAutoFollow ? 'true' : 'false';
     const button = ensureJumpToLatestButton();
     if (!button) {
       return;
@@ -157,8 +167,16 @@
     return getPanel()?.querySelector('[data-log]') || getPanel()?.querySelector('[data-main]');
   }
 
-  function markUserScrollIntent() {
+  function markUserScrollIntent(event) {
+    const scroller = getLogScrollContainer();
+    if (!scroller || (event?.type === 'pointerdown' && event.target !== scroller)) return;
+    if (event?.target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
     userScrollIntentUntil = Date.now() + 1200;
+    userScrollExtent = `${scroller.scrollHeight}:${scroller.clientHeight}`;
+    if ((event?.type === 'wheel' && event.deltaY < 0) || ['ArrowUp', 'PageUp', 'Home'].includes(event?.key)) {
+      logAutoFollow = false;
+      scrollLogPendingForce = false;
+    }
   }
 
   function isLogNearBottom(log) {
@@ -181,7 +199,7 @@
       userScrollIntentUntil = 0;
       unreadSinceDetach = 0;
       scrollLogPendingForce = true;
-    } else if (!(logAutoFollow || isLogNearBottom(scroller))) {
+    } else if (!logAutoFollow) {
       // The user has scrolled up: do not yank them. Just keep the jump button
       // state current.
       updateJumpToLatestButton(scroller);
@@ -195,7 +213,7 @@
       }
       // Re-check intent AT PAINT TIME: a user who flicked up between schedule
       // and paint must not be snapped back down (closes the one-frame fight).
-      if (scrollLogPendingForce || logAutoFollow || isLogNearBottom(el)) {
+      if (scrollLogPendingForce || logAutoFollow) {
         setLogScrollPosition(el);
       }
       scrollLogPendingForce = false;
@@ -284,11 +302,13 @@
     }
     return tr('processed', { elapsed });
   }
-  function renderRunHistory() {
+  function renderRunHistory(options = {}) {
     const log = getPanel()?.querySelector('[data-log]');
     if (!log) {
       return;
     }
+    const reading = options.preserveScroll === true && !logAutoFollow
+      ? scrollLayout?.snapshot() || { scrollTop: log.scrollTop } : null;
     log.replaceChildren();
     if (!getState().runs?.length) {
       const empty = document.createElement('div');
@@ -317,7 +337,8 @@
     for (const run of runs) {
       log.append(renderRunCard(run));
     }
-    scrollLogToBottom({ force: true });
+    if (reading) { log.scrollTop = reading.scrollTop; scrollLayout?.restore(reading); updateJumpToLatestButton(log); }
+    else scrollLogToBottom({ force: true });
   }
 
   function renderRunCard(run) {
@@ -637,7 +658,7 @@
       if (row.key) dt.dataset.metaKey = row.key;
       const dd = document.createElement('dd');
       dd.className = 'run-final-answer__meta-value';
-      dd.textContent = row.value;
+      dd.textContent = failureNotice?.formatMetaValue(report, row) ?? row.value;
       metaBlock.append(dt, dd);
     }
     if (metaBlock.children.length) {
@@ -714,6 +735,7 @@
         report.append(main);
       }
 
+      failureNotice?.append(report, event, run);
       appendCompletionMetaBlock(report, structured.meta);
       appendCompileFix(report);
       appendRejectedRedo(report);
@@ -735,6 +757,7 @@
     report.append(body);
     appendCompileFix(report);
     appendRejectedRedo(report);
+    failureNotice?.append(report, event, run);
     appendCompletionMetaBlock(report, split.meta);
     appendRecoveryActionForFailure(report, event, run);
     return report;
@@ -793,6 +816,9 @@
   }
 
   function appendRecoveryActionForFailure(report, event, run) {
+    const recovery = failureNotice?.prepareRecovery(report, { openFile: openProjectFileForFailure });
+    if (recovery?.handled) return;
+    report = recovery?.target || report;
     const failureCode = event?.failure?.code || '';
     if (RETRYABLE_FAILURE_CODES.has(failureCode) && typeof refillComposerForRetry === 'function') {
       const retry = buildRecoveryButton(failureCode,
@@ -906,7 +932,7 @@
       return;
     }
 
-    const projection = projectRunSettlement(run);
+    const projection = RunResultActions.projectUndoAvailability(run, projectRunSettlement);
     if (!projection.canUndo && run.undoStatus !== 'applied') {
       button.hidden = true;
       return;

package/extension/src/content/sessionForkController.js

@@ -16,19 +16,28 @@
       const source = findSource(previousState, runId);
       if (!source) return failFork('session_fork_source_missing', tr('forkRunUnavailable'));
       const { session, run, runIndex } = source;
-      if (run.status === 'running' || !session.codexThreadId || !run.codexTurnId) {
+      const draftThreadId = run.codexTurnId && run.interruptedDraft?.turnId === run.codexTurnId
+        ? run.interruptedDraft.threadId : '';
+      // Provider switches replace the session thread, not the selected node's origin.
+      const sourceThreadId = String(run.codexThreadId || draftThreadId || session.codexThreadId || '').trim();
+      if (run.status === 'running' || !sourceThreadId || !run.codexTurnId) {
         return failFork('session_fork_unavailable', tr('forkRunUnavailable'));
       }
-      const response = await sendBackgroundNative({
-        method: 'codex.thread.fork',
-        params: {
-          threadId: session.codexThreadId,
-          lastTurnId: run.codexTurnId,
-          speedTier: session.speedTier,
-          loadCodexLocalSkills: previousState.loadCodexLocalSkills !== false,
-          loadCodexOverleafSkills: previousState.loadCodexOverleafSkills !== false
-        }
-      });
+      let response;
+      try {
+        response = await sendBackgroundNative({
+          method: 'codex.thread.fork',
+          params: {
+            threadId: sourceThreadId,
+            lastTurnId: run.codexTurnId,
+            speedTier: session.speedTier,
+            loadCodexLocalSkills: previousState.loadCodexLocalSkills !== false,
+            loadCodexOverleafSkills: previousState.loadCodexOverleafSkills !== false
+          }
+        });
+      } catch (error) {
+        return failFork(error?.code || 'session_fork_failed', error?.message || tr('forkRunFailed'));
+      }
       if (!response?.ok || !response.result?.threadId) {
         return failFork(response?.error?.code || 'session_fork_failed', response?.error?.message || tr('forkRunFailed'));
       }

package/extension/src/content/settingsPanel.js

@@ -95,18 +95,18 @@
           </details>
           <details class="codex-set-group" data-set-group="experimental">
             <summary class="codex-set-group-head">
-              <span class="codex-set-group-title">${codexSetIcon('flask')}<span data-i18n="experimentalTitle">Experimental</span></span>
+              <span class="codex-set-group-title">${codexSetIcon('database')}<span data-i18n="otSettingsTitle">Project cache</span></span>
               <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <label class="codex-project-settings-row codex-project-settings-row--switch">
                 <span class="codex-project-settings-row-label">
-                  <span data-i18n="experimentalOtMenuTitle">Experimental OT Mirror</span>
-                  <small class="codex-set-row-sub" data-i18n="experimentalOtMenuSubtitle">Experimental — speeds up reading the file you are editing; Codex falls back to normal reading whenever unsure.</small>
+                  <span data-i18n="experimentalOtMenuTitle">OT Mirror</span>
+                  <small class="codex-set-row-sub" data-i18n="experimentalOtMenuSubtitle">Warms recent edits to the active text file locally. File scope and freshness are checked before reuse.</small>
                 </span>
                 <input type="checkbox" class="codex-switch" data-experimental-ot>
               </label>
-              <p class="codex-set-row-help" data-experimental-ot-menu-status></p>
+              <p class="codex-set-row-help" data-experimental-ot-menu-status aria-live="polite"></p>
             </div>
           </details>
         </div>
@@ -159,17 +159,25 @@
               <button type="button" class="codex-set-btn" data-provider-settings-open data-i18n="providerSettingsConfigure">Configure</button>
             </div>
           </details>
+          <details class="codex-set-group" data-set-group="context-loading" open>
+            <summary class="codex-set-group-head">
+              <span class="codex-set-group-title">${codexSetIcon('database')}<span data-i18n="contextLoadingTitle">Context loading</span></span>
+              <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+            </summary>
+            <div class="codex-set-card">
+              <label class="codex-project-settings-row codex-project-settings-row--switch">
+                <span class="codex-project-settings-row-label" data-i18n="preloadProjectContextTitle">Preload project context</span>
+                <input type="checkbox" class="codex-switch" data-preload-project-context>
+              </label>
+              <p class="codex-set-row-help" data-i18n="preloadProjectContextDescription">Fetch the exact project file list in the background after an Overleaf project becomes idle.</p>
+            </div>
+          </details>
           <details class="codex-set-group" data-set-group="updates" open>
             <summary class="codex-set-group-head">
               <span class="codex-set-group-title">${codexSetIcon('software')}<span data-i18n="softwareUpdatesTitle">Software updates</span></span>
             </summary>
             <div class="codex-set-card" data-update-settings>
               <div class="codex-set-row">
-                <label class="codex-project-settings-row codex-project-settings-row--switch">
-                  <span class="codex-project-settings-row-label" data-i18n="preloadProjectContextTitle">Preload project context</span>
-                  <input type="checkbox" class="codex-switch" data-preload-project-context>
-                </label>
-                <p class="codex-set-row-help" data-i18n="preloadProjectContextDescription">Fetch the exact project file list in the background after an Overleaf project becomes idle.</p>
                 <p class="codex-set-row-help" data-update-settings-summary data-i18n="softwareUpdatesHelp">Automatically checks signed stable releases for the Extension and Native Host.</p>
                 <p class="codex-set-note" data-update-settings-state aria-live="polite" hidden></p>
                 <button type="button" class="codex-set-btn" data-check-updates data-i18n="checkForUpdates">Check for updates</button>
@@ -235,8 +243,11 @@
         instance.callbacks.onHistoryOpen?.();
       }
     });
+    container.querySelector('[data-storage-card]')?.addEventListener('toggle', event => {
+      if (event.target.open) instance.callbacks.onStorageOpen?.();
+    });
     container.querySelector('[data-history-filter]')?.addEventListener('input', () => instance.callbacks.onHistoryFilter?.());
-    // Experimental OT mirror: a single visible switch. The click is
+    // OT mirror: a single visible switch; legacy storage/DOM keys are retained. The click is
     // intercepted (the runtime's handler preventDefaults, runs the enable
     // confirmation, then sets checked + drives the change flow itself) so the
     // confirm-before-enable contract survives the control unification.
@@ -252,7 +263,12 @@
       const element = container.querySelector(selector);
       element?.addEventListener?.('change', event => {
         Promise.resolve(instance.callbacks.onInputChange?.(event))
-          .then(() => flashSaved(instance, event)).catch(() => {});
+          .then(() => {
+            flashSaved(instance, event);
+            if (selector === '[data-language-select]' && container.querySelector('[data-storage-card]')?.open) {
+              instance.callbacks.onStorageOpen?.();
+            }
+          }).catch(() => {});
       });
       element?.addEventListener?.('input', event => {
         Promise.resolve(instance.callbacks.onInputChange?.(event)).catch(() => {});
@@ -267,6 +283,7 @@
     setupGroupPersistence(instance);
 
     return {
+      get container() { return instance.container; },
       show: () => show(instance),
       hide: () => hide(instance),
       loadState: state => loadState(instance, state),