codex-overleaf-link 2.4.1 → 2.5.0

package/extension/src/content/selectionContextView.js

@@ -0,0 +1,300 @@
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) module.exports = factory(require('../shared/selectionContext'));
+  else root.CodexOverleafModuleRegistry.define('SelectionContextView', ['SelectionContext'], factory);
+})(typeof globalThis !== 'undefined' ? globalThis : window, function (SelectionContext) {
+  'use strict';
+
+  // The chip shared by the composer and sent messages: file:lines, the edit-only
+  // scope label, and the selected text behind a disclosure.
+  function buildChip(selection, { document: doc = globalThis.document, tx = en => en, expanded = false } = {}) {
+    const lines = selection.lineStart === selection.lineEnd
+      ? String(selection.lineStart) : selection.lineStart + '-' + selection.lineEnd;
+    const location = selection.path + ':' + lines;
+    const details = doc.createElement('details');
+    details.open = expanded;
+    const summary = doc.createElement('summary');
+    summary.title = location;
+    summary.setAttribute('aria-label', tx('Preview selection from ' + location, '预览选区：' + location));
+    const file = doc.createElement('span');
+    file.className = 'codex-selection-file';
+    file.textContent = selection.path.split('/').pop();
+    const range = doc.createElement('span');
+    range.className = 'codex-selection-range';
+    range.textContent = ':' + lines;
+    summary.append(file, range);
+    if (selection.mode === 'edit') {
+      const scope = doc.createElement('span');
+      scope.className = 'codex-selection-scope';
+      scope.textContent = tx('Selection only', '仅此处');
+      summary.append(scope);
+    }
+    const source = doc.createElement('pre');
+    source.textContent = selection.text;
+    details.append(summary, source);
+    return details;
+  }
+
+  // Read-only chip for a sent message: the selection travels with the run's
+  // execution snapshot, so the bubble keeps showing what was attached.
+  function renderSent(host, value, options = {}) {
+    if (!host) return;
+    const selection = SelectionContext.normalize(value);
+    host.replaceChildren();
+    host.hidden = !selection;
+    if (selection) host.append(buildChip(selection, options));
+  }
+
+  function create(deps = {}) {
+    let generation = 0;
+    let probeGeneration = 0;
+    let timer = null;
+    let controller = null;
+    let toolbar = null;
+    let candidate = null;
+    let pointerSelecting = false;
+    let pointerEditor = null;
+    const resetEvent = 'codex-overleaf-selection-ui-reset';
+    const tx = (en, zh) => deps.tx ? deps.tx(en, zh) : en;
+
+    function capture() {
+      const selection = SelectionContext.normalize(deps.getState()?.selectionContext);
+      return selection?.projectId === deps.getProjectId() ? selection : null;
+    }
+
+    function clear() {
+      generation += 1;
+      hideFloating();
+      deps.setSelection(null);
+      render();
+    }
+
+    function render() {
+      const panel = deps.getPanel();
+      if (toolbar && !toolbar.hidden) syncFloatingAppearance();
+      const host = panel?.querySelector('[data-composer-selection]');
+      if (!host) return;
+      const selection = capture();
+      const id = selection ? [selection.projectId, selection.path, selection.from, selection.to,
+        selection.documentHash, selection.capturedAt, selection.mode].join(':') : '';
+      const expanded = Boolean(id && host.dataset.selectionId === id && host.querySelector('details')?.open);
+      host.replaceChildren();
+      host.dataset.selectionId = id;
+      host.hidden = !selection;
+      if (!selection) return;
+
+      host.append(buildChip(selection, { document, tx, expanded }));
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.textContent = '\u00d7';
+      remove.title = tx('Remove selection', '移除选区');
+      remove.setAttribute('aria-label', remove.title);
+      remove.addEventListener('click', clear);
+      host.append(remove);
+    }
+
+    async function attach(mode = 'reference', selected = null) {
+      const request = ++generation;
+      const projectId = deps.getProjectId();
+      const sessionId = deps.getState()?.activeSessionId;
+      if (selected && (selected.projectId !== projectId || selected.sessionId !== sessionId)) return null;
+      hideFloating();
+      try {
+        const response = selected
+          ? { ok: true, selection: selected.selection }
+          : await deps.callPageBridge('getSelectionContext', { runProjectId: projectId });
+        if (request !== generation || projectId !== deps.getProjectId()
+          || sessionId !== deps.getState()?.activeSessionId) return null;
+        const selection = SelectionContext.normalize({
+          ...(response?.selection || response), mode: mode === 'edit' ? 'edit' : 'reference'
+        });
+        if (response?.ok !== true || !selection || selection.projectId !== projectId) {
+          deps.toast?.(response?.code === 'selection_too_large'
+            ? tx('Select a shorter passage (up to 20,000 characters).', '请选择较短的片段，最多 20,000 个字符。')
+            : tx('Select text in the source editor first.', '请先在源码编辑器中选中文字。'));
+          return null;
+        }
+        await deps.openComposer?.();
+        if (request !== generation || projectId !== deps.getProjectId()
+          || sessionId !== deps.getState()?.activeSessionId) return null;
+        deps.setSelection(selection, { edit: selection.mode === 'edit' });
+        render();
+        const panel = deps.getPanel();
+        const tray = panel?.querySelector('[data-context-tray]');
+        if (tray) tray.hidden = true;
+        panel?.querySelector('[data-add-context]')?.setAttribute('aria-expanded', 'false');
+        panel?.querySelector('[data-task]')?.focus();
+        return selection;
+      } catch (_) {
+        if (request === generation && projectId === deps.getProjectId()
+          && sessionId === deps.getState()?.activeSessionId) {
+          deps.toast?.(tx('Could not attach the selection. Select it again and retry.', '未能添加选区，请重新选取后再试。'));
+        }
+        return null;
+      }
+    }
+
+    function editorFor(node) {
+      const element = node?.nodeType === 1 ? node : node?.parentElement;
+      const editor = element?.closest?.('.cm-editor');
+      return editor && !editor.closest('#codex-overleaf-panel') ? editor : null;
+    }
+
+    function hideFloating() {
+      probeGeneration += 1;
+      clearTimeout(timer);
+      timer = null;
+      candidate = null;
+      if (!toolbar) return;
+      if (typeof toolbar.hidePopover === 'function' && toolbar.matches(':popover-open')) toolbar.hidePopover();
+      toolbar.hidden = true;
+    }
+
+    function syncFloatingAppearance() {
+      if (!toolbar) return;
+      const panel = deps.getPanel();
+      const computed = panel ? window.getComputedStyle(panel) : null;
+      const theme = deps.getState()?.theme;
+      const dark = theme === 'dark' || (theme !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      const colors = dark
+        ? ['#26282b', '#f1f2f4', '#adb4be', '#454b53', '#353a41', '#91b7e1']
+        : ['#ffffff', '#24292f', '#67717e', '#d8dde3', '#f0f3f6', '#2f73b8'];
+      ['--tl-surface-0', '--tl-fg-1', '--tl-fg-3', '--tl-border-strong', '--tl-hover', '--tl-accent']
+        .forEach((name, index) => toolbar.style.setProperty(name, computed?.getPropertyValue(name).trim() || colors[index]));
+      if (computed?.fontFamily) toolbar.style.fontFamily = computed.fontFamily;
+      toolbar.setAttribute('aria-label', tx('Selected text actions', '选区操作'));
+      toolbar.querySelector('[data-selection-action="reference"]').textContent = tx('Add to Chat', '加入对话');
+      toolbar.querySelector('[data-selection-action="edit"]').textContent = tx('Edit Selection', '仅编辑此处');
+    }
+
+    function ensureToolbar() {
+      if (toolbar) return;
+      toolbar = document.createElement('div');
+      toolbar.className = 'codex-selection-actions';
+      toolbar.setAttribute('data-codex-selection-actions', '');
+      toolbar.setAttribute('role', 'toolbar');
+      toolbar.hidden = true;
+      if (typeof toolbar.showPopover === 'function') toolbar.setAttribute('popover', 'manual');
+      for (const mode of ['reference', 'edit']) {
+        if (mode === 'edit') {
+          const divider = document.createElement('span');
+          divider.className = 'codex-selection-action-divider';
+          divider.setAttribute('aria-hidden', 'true');
+          toolbar.append(divider);
+        }
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.dataset.selectionAction = mode;
+        button.addEventListener('click', () => {
+          const selected = candidate;
+          if (selected) void attach(mode, selected);
+        });
+        toolbar.append(button);
+      }
+      document.body.append(toolbar);
+      syncFloatingAppearance();
+    }
+
+    function showFloating(anchor) {
+      ensureToolbar();
+      syncFloatingAppearance();
+      toolbar.hidden = false;
+      if (typeof toolbar.showPopover === 'function' && !toolbar.matches(':popover-open')) toolbar.showPopover();
+      const rect = toolbar.getBoundingClientRect();
+      const width = window.innerWidth, height = window.innerHeight;
+      const left = Math.max(8, Math.min(width - rect.width - 8,
+        (anchor.left + anchor.right) / 2 - rect.width / 2));
+      const preferredTop = anchor.top - rect.height - 8;
+      const top = Math.max(8, Math.min(height - rect.height - 8,
+        preferredTop >= 8 ? preferredTop : anchor.bottom + 8));
+      toolbar.style.left = left + 'px';
+      toolbar.style.top = top + 'px';
+    }
+
+    function schedule(editor) {
+      hideFloating();
+      if (!controller || pointerSelecting || !editor) return;
+      const request = ++probeGeneration;
+      timer = setTimeout(() => { timer = null; void probe(editor, request); }, 90);
+    }
+
+    async function probe(editor, request) {
+      if (!controller || request !== probeGeneration || document.hidden
+        || !editor.isConnected || !editor.contains(document.activeElement)) return;
+      const projectId = deps.getProjectId();
+      const sessionId = deps.getState()?.activeSessionId;
+      try {
+        const response = await deps.callPageBridge('getSelectionContext', { runProjectId: projectId });
+        if (request !== probeGeneration || projectId !== deps.getProjectId()
+          || sessionId !== deps.getState()?.activeSessionId || !editor.isConnected
+          || !editor.contains(document.activeElement)) return;
+        const selection = SelectionContext.normalize(response?.selection || response);
+        const anchor = response?.anchor;
+        if (!response?.ok || !selection || selection.projectId !== projectId || !anchor
+          || !['left', 'right', 'top', 'bottom'].every(key => Number.isFinite(anchor[key]))
+          || anchor.bottom < 0 || anchor.top > window.innerHeight) return;
+        candidate = { selection, anchor, projectId, sessionId };
+        showFloating(anchor);
+      } catch (_) { /* Transient editor states do not interrupt ordinary selection. */ }
+    }
+
+    function start() {
+      if (controller) return;
+      // Replacing a content runtime retires the old selection listener set.
+      document.dispatchEvent(new Event(resetEvent));
+      controller = new AbortController();
+      const options = { capture: true, signal: controller.signal };
+      document.addEventListener(resetEvent, destroy, options);
+      document.addEventListener('pointerdown', event => {
+        if (toolbar?.contains(event.target)) {
+          if (event.button === 0) event.preventDefault();
+          return;
+        }
+        hideFloating();
+        pointerEditor = editorFor(event.target);
+        pointerSelecting = Boolean(pointerEditor && event.button === 0);
+      }, options);
+      document.addEventListener('pointerup', () => {
+        if (!pointerSelecting) return;
+        pointerSelecting = false;
+        const editor = pointerEditor;
+        pointerEditor = null;
+        schedule(editor);
+      }, options);
+      document.addEventListener('pointercancel', () => {
+        pointerSelecting = false;
+        pointerEditor = null;
+        hideFloating();
+      }, options);
+      document.addEventListener('selectionchange', () => {
+        if (pointerSelecting || toolbar?.contains(document.activeElement)) return;
+        schedule(editorFor(document.activeElement));
+      }, options);
+      document.addEventListener('keyup', event => {
+        if (event.key !== 'Escape' && editorFor(event.target)) schedule(editorFor(event.target));
+      }, options);
+      document.addEventListener('keydown', event => {
+        if (event.key === 'Escape') hideFloating();
+      }, options);
+      document.addEventListener('scroll', hideFloating, { ...options, passive: true });
+      document.addEventListener('visibilitychange', () => { if (document.hidden) hideFloating(); }, options);
+      window.addEventListener('resize', hideFloating, { ...options, passive: true });
+      window.addEventListener('blur', hideFloating, options);
+      window.addEventListener('pagehide', event => { if (event.persisted) hideFloating(); else destroy(); }, options);
+    }
+
+    function destroy() {
+      generation += 1;
+      hideFloating();
+      controller?.abort();
+      controller = null;
+      pointerSelecting = false;
+      pointerEditor = null;
+      toolbar?.remove();
+      toolbar = null;
+    }
+
+    return { attach, capture, clear, render, start, destroy };
+  }
+
+  return { create, buildChip, renderSent };
+});

package/extension/src/content/sessionPersistence.js

@@ -85,7 +85,12 @@
       record !== rawExistingSessions[index] && !writable.some(item => item.id === record.id)
     );
     if (cleanedExisting.length || writable.length) {
-      await StorageDb.putRecords('sessions', [...cleanedExisting, ...writable]);
+      const written = await StorageDb.putRecords('sessions', [...cleanedExisting, ...writable], {
+        reviewRunIds: options.reviewRunIds
+      });
+      // Check the actual durable result, including a decision already saved
+      // from another origin, instead of acknowledging only the proposed view.
+      return written.filter(record => writable.some(candidate => candidate.id === record.id));
     }
     return writable;
   }

package/extension/src/content/settingsPanel.js

@@ -1,4 +1,10 @@
-(function initCodexOverleafSettingsPanel() {
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory(require('./settingsWorkbench'));
+  } else {
+    root.CodexOverleafModuleRegistry.define('SettingsPanel', ['SettingsWorkbench'], factory);
+  }
+})(typeof globalThis !== 'undefined' ? globalThis : this, function settingsPanelFactory(SettingsWorkbench) {
   'use strict';
 
   function codexIcon(name) {
@@ -45,10 +51,16 @@
         <div class="codex-project-settings-status" data-project-settings-status></div>
         <div class="codex-project-settings-scope">
           <div class="codex-project-settings-scope-title codex-set-eyebrow" data-i18n="settingsScopeProjectTitle">This project</div>
+          <details class="codex-set-group" data-set-group="writing-style" open>
+            <summary class="codex-set-group-head">
+              <span class="codex-set-group-title">${codexSetIcon('pen')}<span data-writing-style-heading>Writing style</span></span>
+            </summary>
+            <div class="codex-set-card" data-writing-style-settings></div>
+          </details>
           <details class="codex-set-group" data-set-group="personalization" open>
             <summary class="codex-set-group-head">
               <span class="codex-set-group-title">${codexSetIcon('pen')}<span data-i18n="personalizationConfig">Personalization</span></span>
-              <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <p class="codex-set-row-help" data-i18n="personalizationHelp">Style, terminology, and LaTeX conventions Codex should follow in this project.</p>
@@ -58,7 +70,7 @@
           <details class="codex-set-group" data-set-group="protection" open>
             <summary class="codex-set-group-head">
               <span class="codex-set-group-title">${codexSetIcon('shield')}<span data-i18n="fileProtectionTitle">File protection</span></span>
-              <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <div class="codex-set-row">
@@ -78,7 +90,7 @@
           <details class="codex-set-group" data-set-group="privacy" open>
             <summary class="codex-set-group-head">
               <span class="codex-set-group-title">${codexSetIcon('lock')}<span data-i18n="privacyTitle">Privacy</span></span>
-              <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <label class="codex-project-settings-row codex-project-settings-row--switch">
@@ -96,7 +108,7 @@
           <details class="codex-set-group" data-set-group="experimental">
             <summary class="codex-set-group-head">
               <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>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <label class="codex-project-settings-row codex-project-settings-row--switch">
@@ -113,19 +125,37 @@
         <div class="codex-project-settings-scope codex-project-settings-scope--global">
           <details class="codex-set-group" data-set-group="history" data-history-card>
             <summary class="codex-set-group-head">
-              <span class="codex-set-group-title">${codexSetIcon('history')}<span data-i18n="historyTitle">Change history</span></span>
+              <span class="codex-set-group-title">${codexSetIcon('history')}<span data-i18n="historyTitle">File changes</span><span class="codex-history-count" data-history-count aria-live="polite"></span></span>
             </summary>
             <div class="codex-set-card">
-              <p class="codex-set-row-help" data-i18n="historyHelp">What Codex wrote to this project, per run. Filter by file name or task text.</p>
-              <input type="text" class="codex-set-select codex-history-filter" data-history-filter>
+              <p class="codex-set-row-help" data-i18n="historyHelp">Review recent file changes and open the matching conversation.</p>
+              <div class="codex-history-toolbar">
+                <label class="codex-history-search">
+                  <span class="codex-history-search-mark" aria-hidden="true"></span>
+                  <input type="search" class="codex-set-select codex-history-filter" data-history-filter autocomplete="off">
+                </label>
+                <select class="codex-set-select codex-history-status-filter" data-history-status data-i18n-aria-label="historyStatusLabel">
+                  <option value="all" data-i18n="historyStatusAll">All statuses</option>
+                  <option value="pending" data-i18n="historyStatusPending">Pending review</option>
+                  <option value="accepted" data-i18n="historyStatusAccepted">Accepted</option>
+                  <option value="undone" data-i18n="historyStatusUndone">Undone</option>
+                  <option value="attention" data-i18n="historyStatusAttention">Needs attention</option>
+                  <option value="written" data-i18n="historyStatusWritten">Written</option>
+                </select>
+              </div>
               <div class="codex-history-list" data-history-list></div>
+              <button type="button" class="codex-history-jump codex-history-more" data-history-more hidden></button>
+              <label class="codex-history-include" hidden>
+                <input type="checkbox" data-history-include-empty>
+                <span data-history-include-label></span>
+              </label>
             </div>
           </details>
           <div class="codex-project-settings-scope-title codex-set-eyebrow" data-i18n="settingsScopeGlobalTitle">All projects</div>
           <details class="codex-set-group" data-set-group="appearance" open>
             <summary class="codex-set-group-head">
               <span class="codex-set-group-title">${codexSetIcon('appearance')}<span data-i18n="appearanceTitle">Appearance</span></span>
-              <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <label class="codex-project-settings-row codex-project-settings-row--select">
@@ -153,7 +183,7 @@
             </summary>
             <div class="codex-set-card codex-provider-settings-entry">
               <div class="codex-provider-settings-entry-copy">
-                <p class="codex-set-row-help" data-i18n="providerSettingsHelp">Configure experimental third-party model APIs. Compatibility varies by provider and gateway.</p>
+                <p class="codex-set-row-help" data-i18n="providerSettingsHelp">Manage model API connections.</p>
                 <p class="codex-provider-settings-summary" data-provider-settings-summary data-tone="loading">${t(instance, 'providerSettingsLoading')}</p>
               </div>
               <button type="button" class="codex-set-btn" data-provider-settings-open data-i18n="providerSettingsConfigure">Configure</button>
@@ -162,7 +192,7 @@
           <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>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <label class="codex-project-settings-row codex-project-settings-row--switch">
@@ -186,18 +216,24 @@
           </details>
           <details class="codex-set-group" data-set-group="storage" data-storage-card>
             <summary class="codex-set-group-head">
-              <span class="codex-set-group-title">${codexSetIcon('database')}<span data-i18n="storageTitle">History &amp; storage</span></span>
+              <span class="codex-set-group-title">${codexSetIcon('database')}<span data-i18n="storageTitle">Local data</span></span>
             </summary>
             <div class="codex-set-card">
-              <p class="codex-set-row-help" data-storage-usage data-i18n="storageUsageLoading">Calculating usage…</p>
-              <button type="button" class="codex-set-btn codex-set-btn--danger" data-clear-all-history data-i18n="storageClearAll">Clear all history…</button>
-              <p class="codex-set-row-help" data-i18n="storageClearAllHelp">Removes every stored session, run and audit record for all projects. Project settings and rules are kept.</p>
+              <div class="codex-storage-data-row">
+                <div class="codex-storage-data-copy">
+                  <div class="codex-storage-data-label" data-i18n="storageSavedData">Saved conversations &amp; records</div>
+                  <p class="codex-set-row-help" data-storage-usage data-i18n="storageUsageLoading">Loading saved history…</p>
+                </div>
+                <button type="button" class="codex-set-btn codex-set-btn--danger" data-clear-all-history data-i18n="storageClearAll">Clear local history…</button>
+              </div>
+              <p class="codex-set-row-help codex-storage-clear-help" data-i18n="storageClearAllHelp">Clearing removes local history and undo information. Overleaf project files stay unchanged.</p>
+              <p class="codex-storage-estimate" data-storage-estimate aria-live="polite"></p>
             </div>
           </details>
           <details class="codex-set-group" data-set-group="skills" open>
             <summary class="codex-set-group-head">
               <span class="codex-set-group-title">${codexSetIcon('bolt')}<span data-i18n="localSkillsTitle">Skills</span></span>
-              <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+              <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
             </summary>
             <div class="codex-set-card">
               <label class="codex-project-settings-row codex-project-settings-row--switch">
@@ -220,7 +256,7 @@
           <div>
             <div class="codex-custom-instructions-title" data-i18n="codexOverleafSkillsTitle">Codex Overleaf skills</div>
           </div>
-          <span class="codex-set-saved" data-set-saved hidden>✓ <span data-i18n="settingsSaved">Saved</span></span>
+          <span class="codex-set-saved" data-set-saved hidden><svg class="codex-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m3.5 8 3 3 6-6"/></svg><span data-i18n="settingsSaved">Saved</span></span>
         </div>
         <div class="codex-set-card">
           <label class="codex-project-settings-row codex-project-settings-row--switch">
@@ -247,6 +283,8 @@
       if (event.target.open) instance.callbacks.onStorageOpen?.();
     });
     container.querySelector('[data-history-filter]')?.addEventListener('input', () => instance.callbacks.onHistoryFilter?.());
+    container.querySelector('[data-history-status]')?.addEventListener('change', () => instance.callbacks.onHistoryFilter?.());
+    container.querySelector('[data-history-include-empty]')?.addEventListener('change', () => instance.callbacks.onHistoryFilter?.());
     // 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
@@ -265,8 +303,9 @@
         Promise.resolve(instance.callbacks.onInputChange?.(event))
           .then(() => {
             flashSaved(instance, event);
-            if (selector === '[data-language-select]' && container.querySelector('[data-storage-card]')?.open) {
-              instance.callbacks.onStorageOpen?.();
+            if (selector === '[data-language-select]') {
+              if (container.querySelector('[data-storage-card]')?.open) instance.callbacks.onStorageOpen?.();
+              instance.callbacks.onHistoryFilter?.();
             }
           }).catch(() => {});
       });
@@ -280,12 +319,18 @@
       element?.addEventListener?.('input', () => updateGovernanceNotes(instance));
       element?.addEventListener?.('change', () => updateGovernanceNotes(instance));
     }
-    setupGroupPersistence(instance);
+    instance.workbench = SettingsWorkbench.mount(instance, { icon: codexIcon });
 
     return {
       get container() { return instance.container; },
       show: () => show(instance),
       hide: () => hide(instance),
+      openProviderPage: () => {
+        const host = instance.workbench?.revealProviders();
+        if (host) show(instance);
+        return host || null;
+      },
+      setProviderCloseGuard: guard => instance.workbench?.setProviderCloseGuard(guard),
       loadState: state => loadState(instance, state),
       readState: () => readState(instance),
       setStatus: (text, status) => setStatus(instance, text, status),
@@ -310,10 +355,12 @@
       button.dataset.active = 'true';
       button.setAttribute('aria-expanded', 'true');
     }
-    root.querySelector('[data-custom-instructions-input]')?.focus?.();
+    if (instance.workbench) instance.workbench.show();
+    else root.querySelector('[data-custom-instructions-input]')?.focus?.();
   }
 
   function refreshSettingsScope(instance, root) {
+    if (instance.workbench) { instance.workbench.refresh(); return; }
     const accountScope = instance.container?.closest?.('[data-settings-scope]')?.dataset?.settingsScope === 'account';
     const prefix = accountScope ? 'recentProjects_settings' : 'projectSettings';
     for (const [selector, suffix] of [['[data-settings-title]', 'Title'], ['[data-settings-subtitle]', 'Subtitle']]) {
@@ -337,6 +384,7 @@
       button.setAttribute('aria-expanded', 'false');
     }
     clearStatus(instance);
+    instance.workbench?.hide();
   }
 
   function isVisible(target) {
@@ -386,6 +434,7 @@
       setValue(scope, '[data-theme-select]', state.theme || 'dark');
       setValue(scope, '[data-language-select]', state.language || 'en');
     }
+    instance.workbench?.refresh();
   }
 
   function readState(target) {
@@ -413,7 +462,7 @@
 
   function setStatus(target, text, status = 'info') {
     const instance = target?._instance || target;
-    const element = getRoot(instance)?.querySelector('[data-project-settings-status]');
+    const element = instance?.container?.querySelector('[data-project-settings-status]');
     if (!element) {
       return;
     }
@@ -423,7 +472,7 @@
 
   function clearStatus(target) {
     const instance = target?._instance || target;
-    const element = getRoot(instance)?.querySelector('[data-project-settings-status]');
+    const element = instance?.container?.querySelector('[data-project-settings-status]');
     if (!element) {
       return;
     }
@@ -440,11 +489,11 @@
     element.textContent = text || '';
   }
 
-  // Flash the "✓ Saved" indicator after a field auto-saves, then fade it out.
+  // Flash the check-mark "Saved" indicator after a field auto-saves, then fade it out.
   // The fields persist immediately on change, so this is purely a confirmation
   // cue — it never gates the save itself.
   function flashSaved(instance, event) {
-    // Card-level feedback: the ✓ appears on the card that was actually
+    // Card-level feedback: the check appears on the card that was actually
     // changed (falls back to the screen's first badge, e.g. the skills page).
     const origin = event?.target?.closest?.('details.codex-set-group, section');
     const badge = origin?.querySelector?.('[data-set-saved]')
@@ -530,31 +579,6 @@
     element.dataset.tone = typeof value === 'object' && value.tone ? value.tone : 'ok';
   }
 
-  // Collapse memory: card open/closed state persists per browser profile.
-  const GROUP_STORE_KEY = 'codexOverleafSettingsGroups';
-
-  function setupGroupPersistence(instance) {
-    let stored = {};
-    try {
-      stored = JSON.parse(globalThis.localStorage?.getItem(GROUP_STORE_KEY) || '{}') || {};
-    } catch (_error) {
-      stored = {};
-    }
-    for (const details of instance.container.querySelectorAll('details[data-set-group]')) {
-      const key = details.dataset.setGroup;
-      if (key in stored) {
-        details.open = stored[key] !== false;
-      }
-      details.addEventListener('toggle', () => {
-        try {
-          const current = JSON.parse(globalThis.localStorage?.getItem(GROUP_STORE_KEY) || '{}') || {};
-          current[key] = details.open;
-          globalThis.localStorage?.setItem(GROUP_STORE_KEY, JSON.stringify(current));
-        } catch (_error) { /* private mode — collapse state just doesn't persist */ }
-      });
-    }
-  }
-
   function getRoot(instance) {
     return instance?.container?.querySelector('[data-project-settings-panel]') || null;
   }
@@ -582,6 +606,7 @@
   }
 
   function destroy(instance) {
+    instance.workbench?.destroy();
     if (instance._savedFlashTimer) {
       clearTimeout(instance._savedFlashTimer);
       instance._savedFlashTimer = null;
@@ -589,7 +614,7 @@
     instance.container.textContent = '';
   }
 
-  window.CodexOverleafSettingsPanel = {
+  return {
     create,
     loadState,
     readState,
@@ -601,4 +626,4 @@
     setSkillsSummary,
     setProviderSummary
   };
-})();
+});