codex-overleaf-link 2.5.0 → 2.6.0

package/extension/src/content/composerAttachments.js

@@ -6,6 +6,8 @@
     const tx = typeof options.tx === 'function' ? options.tx : (en) => en;
     const tr = typeof options.tr === 'function' ? options.tr : (key) => key;
     const appendPlainLog = typeof options.appendPlainLog === 'function' ? options.appendPlainLog : () => {};
+    const onChange = typeof options.onChange === 'function' ? options.onChange : () => {};
+    const icons = options.icons || null;
     const limits = options.limits || {};
     const maxAttachments = Number(limits.maxAttachments) || 8;
     const maxAttachmentBytes = Number(limits.maxAttachmentBytes) || 12 * 1024 * 1024;
@@ -15,6 +17,8 @@
     let attachments = [];
     const pendingAttachmentKeys = new Set();
     let pendingAttachmentBytes = 0;
+    let attachmentGeneration = 0;
+    let attachmentRevision = 0;
 
     function handlePaste(event) {
       const files = collectFilesFromDataTransfer(event.clipboardData);
@@ -59,51 +63,68 @@
     }
 
     async function addFiles(files) {
-      for (const file of Array.from(files || [])) {
-        const dedupeKey = buildAttachmentDedupeKey(file);
-        if (isDuplicateAttachmentFile(dedupeKey)) {
-          continue;
-        }
-        if (attachments.length + pendingAttachmentKeys.size >= maxAttachments) {
-          appendPlainLog(tx(
-            `Attachment limit reached (${maxAttachments}).`,
-            `附件数量已达上限（${maxAttachments} 个）。`
-          ));
-          break;
-        }
-        validateAttachmentFile(file);
-        const fileSize = Number(file.size) || 0;
-        if (!canReserveAttachmentBytes(fileSize)) {
-          appendPlainLog(tx(
-            `Attachment total limit reached (${formatFileSize(maxAttachmentTotalBytes)}). Remove attachments or use smaller files.`,
-            `附件总大小已达上限（${formatFileSize(maxAttachmentTotalBytes)}）。请移除部分附件或使用更小的文件。`
-          ));
-          continue;
-        }
-        pendingAttachmentKeys.add(dedupeKey);
-        pendingAttachmentBytes += fileSize;
-        try {
-          const dataUrl = await readFileAsDataUrl(file);
-          const preview = await buildAttachmentPreviewData(file, dataUrl);
-          const attachment = {
-            id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
-            name: normalizeAttachmentName(file.name),
-            mimeType: String(file.type || ''),
-            size: Number(file.size) || 0,
-            kind: preview.kind,
-            previewDataUrl: preview.previewDataUrl,
-            contentBase64: extractBase64FromDataUrl(dataUrl),
-            dedupeKey
-          };
-          if (!attachments.some(existing => buildAttachmentDedupeKey(existing) === dedupeKey)) {
-            attachments.push(attachment);
+      const generation = attachmentGeneration;
+      try {
+        for (const file of Array.from(files || [])) {
+          if (generation !== attachmentGeneration) return;
+          const dedupeKey = buildAttachmentDedupeKey(file);
+          if (isDuplicateAttachmentFile(dedupeKey)) {
+            continue;
+          }
+          if (attachments.length + pendingAttachmentKeys.size >= maxAttachments) {
+            appendPlainLog(tx(
+              `Attachment limit reached (${maxAttachments}).`,
+              `附件数量已达上限（${maxAttachments} 个）。`
+            ));
+            break;
+          }
+          validateAttachmentFile(file);
+          const fileSize = Number(file.size) || 0;
+          if (!canReserveAttachmentBytes(fileSize)) {
+            appendPlainLog(tx(
+              `Attachment total limit reached (${formatFileSize(maxAttachmentTotalBytes)}). Remove attachments or use smaller files.`,
+              `附件总大小已达上限（${formatFileSize(maxAttachmentTotalBytes)}）。请移除部分附件或使用更小的文件。`
+            ));
+            continue;
+          }
+          attachmentRevision += 1;
+          pendingAttachmentKeys.add(dedupeKey);
+          pendingAttachmentBytes += fileSize;
+          try {
+            const dataUrl = await readFileAsDataUrl(file, tx);
+            if (generation !== attachmentGeneration) return;
+            const preview = await buildAttachmentPreviewData(file, dataUrl);
+            if (generation !== attachmentGeneration) return;
+            const attachment = {
+              id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+              name: normalizeAttachmentName(file.name),
+              mimeType: String(file.type || ''),
+              size: Number(file.size) || 0,
+              kind: preview.kind,
+              previewDataUrl: preview.previewDataUrl,
+              contentBase64: extractBase64FromDataUrl(dataUrl),
+              dedupeKey
+            };
+            if (!attachments.some(existing => buildAttachmentDedupeKey(existing) === dedupeKey)) {
+              attachments.push(attachment);
+              attachmentRevision += 1;
+              onChange();
+            }
+          } catch (error) {
+            if (generation !== attachmentGeneration) return;
+            throw error;
+          } finally {
+            // Cleared work no longer owns reservations in the current composer.
+            if (generation === attachmentGeneration) {
+              pendingAttachmentBytes = Math.max(0, pendingAttachmentBytes - fileSize);
+              pendingAttachmentKeys.delete(dedupeKey);
+            }
           }
-        } finally {
-          pendingAttachmentBytes = Math.max(0, pendingAttachmentBytes - fileSize);
-          pendingAttachmentKeys.delete(dedupeKey);
         }
+      } finally {
+        // A partial batch may have accepted files before validation or reading failed.
+        if (generation === attachmentGeneration) renderComposerAttachments();
       }
-      renderComposerAttachments();
     }
 
     function getAttachmentsForRun() {
@@ -139,20 +160,27 @@
         root: getPanel() || document.body,
         tr,
         tx,
+        icons,
         removable: true,
         onRemove: removeAttachment
       });
     }
 
-    function clear() {
+    function clear(options = {}) {
+      attachmentGeneration += 1;
+      attachmentRevision += 1;
       attachments = [];
       pendingAttachmentKeys.clear();
+      pendingAttachmentBytes = 0;
       renderComposerAttachments();
+      if (options.notify !== false) onChange();
     }
 
     function removeAttachment(id) {
+      const previousLength = attachments.length;
       attachments = attachments.filter(attachment => attachment.id !== id);
       renderComposerAttachments();
+      if (attachments.length !== previousLength) { attachmentRevision += 1; onChange(); }
     }
 
     function isDuplicateAttachmentFile(dedupeKey) {
@@ -260,14 +288,36 @@
       if (!usable.length) {
         return 0;
       }
+      attachmentRevision += 1;
       attachments = usable.map(item => ({ ...item }));
       renderComposerAttachments();
       return attachments.length;
     }
 
+    // Only a just-rejected local-skill submission uses this in-memory recovery.
+    // It keeps the normal composer limits, without durable-draft truncation.
+    function restoreSubmittedAttachments(value, expectedRevision) {
+      if (expectedRevision !== attachmentRevision || attachments.length || pendingAttachmentBytes || pendingAttachmentKeys.size) return false;
+      if (!Array.isArray(value) || value.length > maxAttachments) return false;
+      let total = 0;
+      for (const item of value) {
+        const size = Number(item?.size);
+        if (!item?.name || typeof item.contentBase64 !== 'string' || !Number.isFinite(size) || size < 0 || size > maxAttachmentBytes) return false;
+        total += size;
+      }
+      if (total > maxAttachmentTotalBytes) return false;
+      attachments = value.map((item, index) => ({ ...item, id: `restored-${Date.now()}-${index}`, dedupeKey: buildAttachmentDedupeKey(item) }));
+      attachmentRevision += 1;
+      renderComposerAttachments();
+      onChange();
+      return true;
+    }
+
     return {
       serializePersistableAttachments,
       restorePersistedAttachments,
+      restoreSubmittedAttachments,
+      getRevision: () => attachmentRevision,
       handlePaste,
       handleDragOver,
       handleDragLeave,
@@ -285,6 +335,7 @@
         root: getPanel() || document.body,
         tr,
         tx,
+        icons,
         ...options
       }),
       clear,
@@ -360,6 +411,12 @@
       .slice(0, 180) || '';
   }
 
+  function setCloseGlyph(button, icons) {
+    const glyph = icons?.svg?.('close', 'codex-close-glyph');
+    if (glyph) button.innerHTML = glyph;
+    else button.textContent = '×';
+  }
+
   function renderAttachmentPreviewList(attachments = [], container, options = {}) {
     if (!container) return;
     container.replaceChildren();
@@ -407,7 +464,7 @@
         const remove = document.createElement('button');
         remove.type = 'button';
         remove.className = 'codex-attachment-preview-remove';
-        remove.textContent = '×';
+        setCloseGlyph(remove, options.icons);
         const removeLabel = options.tx ? options.tx('Remove ' + label, '移除 ' + label) : 'Remove ' + label;
         remove.title = removeLabel;
         remove.setAttribute('aria-label', removeLabel);
@@ -438,7 +495,7 @@
     const close = document.createElement('button');
     close.type = 'button';
     close.className = 'codex-attachment-preview-dialog-close';
-    close.textContent = '×';
+    setCloseGlyph(close, options.icons);
     close.title = options.tr ? options.tr('close') : 'Close';
     close.setAttribute('aria-label', options.tr ? options.tr('close') : 'Close');
     const image = document.createElement('img');
@@ -496,13 +553,13 @@
       /\.(?:png|jpe?g|gif|webp|bmp|svg)$/i.test(String(attachment.name || ''));
   }
 
-  function readFileAsDataUrl(file) {
+  function readFileAsDataUrl(file, tx = en => en) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.onload = () => {
         resolve(String(reader.result || ''));
       };
-      reader.onerror = () => reject(reader.error || new Error('Could not read selected file'));
+      reader.onerror = () => reject(new Error(tx('Could not read selected file.', '无法读取所选文件。'), { cause: reader.error }));
       reader.readAsDataURL(file);
     });
   }

package/extension/src/content/composerPanel.js

@@ -13,6 +13,7 @@
       attachmentController: options.attachmentController || null,
       listeners: []
     };
+    const icon = name => options.icons?.svg(name) || '';
 
     container.innerHTML = `
       <div class="codex-pending-inputs" data-pending-inputs hidden></div>
@@ -20,9 +21,9 @@
         <div class="codex-attachment-strip codex-attachment-preview-list" data-attachment-strip hidden></div>
         <div class="codex-composer-selection" data-composer-selection hidden></div>
         <div class="codex-composer-skill-context" data-composer-skill-context hidden>
-          <span class="codex-composer-skill-icon" aria-hidden="true">◇</span>
+          <span class="codex-composer-skill-icon" aria-hidden="true">${icon('sparkle')}</span>
           <span data-composer-skill-label></span>
-          <button type="button" data-composer-skill-clear title="Clear skill" aria-label="Clear skill">×</button>
+          <button type="button" data-composer-skill-clear title="Clear skill" aria-label="Clear skill">${icon('close')}</button>
         </div>
         <textarea data-task rows="3" placeholder="Ask Codex anything. Type @ to add context"></textarea>
         <div class="codex-context-summary" data-context-summary hidden></div>
@@ -60,8 +61,43 @@
           </div>
         </div>
         <div class="codex-composer-toolbar">
-          <button type="button" data-add-context title="Add @ context" aria-label="Add @ context" aria-expanded="false">＋</button>
+          <button type="button" data-add-context title="Add @ context" aria-label="Add @ context" aria-expanded="false">${icon('plus')}</button>
           <div class="codex-model-config" data-model-config>
+            <div class="codex-context-usage" data-context-usage data-unknown="true">
+              <button type="button" class="codex-context-usage-button" data-context-usage-toggle aria-expanded="false">
+                <svg class="codex-context-usage-ring" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                  <circle class="codex-context-usage-track" cx="8" cy="8" r="6.4" pathLength="100"></circle>
+                  <circle class="codex-context-usage-fill" cx="8" cy="8" r="2.55" pathLength="100"></circle>
+                  <circle class="codex-context-usage-orbit" cx="8" cy="8" r="6.4" pathLength="100"></circle>
+                </svg>
+              </button>
+              <div class="codex-context-usage-popover" data-context-usage-popover role="region" tabindex="0" hidden>
+                <div class="codex-context-usage-head">
+                  <svg class="codex-context-usage-empty-ring" data-context-usage-empty-ring viewBox="0 0 26 26" aria-hidden="true" focusable="false"><circle cx="13" cy="13" r="10.5"></circle><circle class="codex-context-usage-empty-dot" cx="13" cy="13" r="2"></circle></svg>
+                  <div class="codex-context-usage-head-text">
+                    <div class="codex-context-usage-title" data-context-usage-title></div>
+                    <div class="codex-context-usage-amount" data-context-usage-amount></div>
+                  </div>
+                  <div class="codex-context-usage-figure" data-context-usage-figure>
+                    <span class="codex-context-usage-spinner" data-context-usage-spinner hidden>${icon('spin')}</span>
+                    <span class="codex-context-usage-chip" data-context-usage-chip hidden></span>
+                    <span class="codex-context-usage-percent" data-context-usage-percent-wrap><span data-context-usage-percent></span><small data-context-usage-percent-sign>%</small></span>
+                    <span class="codex-context-usage-level" data-context-usage-level hidden></span>
+                  </div>
+                </div>
+                <div class="codex-context-usage-note" data-context-usage-note hidden>${icon('compact')}<span data-context-usage-note-text></span></div>
+                <div class="codex-context-usage-bar" data-context-usage-bar aria-hidden="true"><i data-seg="cached"></i><i data-seg="input"></i><i data-seg="output"></i></div>
+                <div class="codex-context-usage-legend" data-context-usage-breakdown hidden>
+                  <div class="codex-context-usage-row"><i class="codex-context-usage-swatch" data-seg="input"></i><span data-context-usage-input-label></span><b data-context-usage-input></b><em data-context-usage-input-share></em></div>
+                  <div class="codex-context-usage-row" data-sub data-context-usage-cache><i class="codex-context-usage-swatch" data-seg="cached"></i><span data-context-usage-cached-label></span><b data-context-usage-cached></b><em data-context-usage-cache-rate></em></div>
+                  <div class="codex-context-usage-row"><i class="codex-context-usage-swatch" data-seg="output"></i><span data-context-usage-output-label></span><b data-context-usage-output></b><em data-context-usage-output-share></em></div>
+                </div>
+                <div class="codex-context-usage-foot" data-context-usage-foot>
+                  <span data-context-usage-reported hidden></span>
+                  <button type="button" class="codex-context-usage-compact" data-context-usage-compact>${icon('compact')}<span data-context-usage-compact-label></span></button>
+                </div>
+              </div>
+            </div>
             <button type="button" class="codex-model-config-button" data-model-config-toggle aria-haspopup="menu" aria-expanded="false">
               <span class="codex-model-speed-indicator" data-speed-indicator hidden aria-hidden="true">
                 <svg viewBox="0 0 16 16" focusable="false">
@@ -99,7 +135,10 @@
               </div>
             </div>
           </div>
-          <button type="submit" data-run data-action="send" title="Send" aria-label="Send">↑</button>
+          <button type="submit" data-run data-action="send" title="Send" aria-label="Send">
+            <span class="codex-run-glyph" data-run-glyph="send">${icon('send')}</span>
+            <span class="codex-run-glyph" data-run-glyph="cancel">${icon('stop')}</span>
+          </button>
         </div>
         <div class="codex-slash-menu" data-slash-menu hidden>
           <button type="button" data-slash-command="install-skill" data-slash-command-kind="installer">
@@ -119,9 +158,9 @@
                 </svg>
                 <span class="codex-context-sync-copy" data-context-sync-copy></span>
               </span>
-              <button type="button" class="codex-attach-button" data-attach-file title="Attach files (PDF, images)" aria-label="Attach files (PDF, images)">⌲</button>
+              <button type="button" class="codex-attach-button" data-attach-file title="Attach files (PDF, images)" aria-label="Attach files (PDF, images)">${icon('attach')}</button>
               <input type="file" data-attach-input multiple hidden>
-              <button type="button" data-context-refresh title="Refresh file list" aria-label="Refresh file list">↻</button>
+              <button type="button" data-context-refresh title="Refresh file list" aria-label="Refresh file list">${icon('refresh')}</button>
             </span>
           </div>
           <div class="codex-context-selection" data-context-selection></div>
@@ -132,9 +171,11 @@
     `;
 
     bindEvents(instance);
+    bindMenuLayout(instance);
 
     return {
       setRunning: running => setRunning(instance, running),
+      setSessionTransition: pending => setSessionTransition(instance, pending),
       setModels: models => setModels(instance, models),
       setMode: mode => setMode(instance, mode),
       focus: () => focus(instance),
@@ -156,14 +197,31 @@
     bind(instance, form, 'drop', event => instance.callbacks.onDrop?.(event));
     bind(instance, instance.container.querySelector('[data-run]'), 'click', event => {
       event.preventDefault();
-      if (instance.callbacks.isRunning?.() && !String(task?.value || '').trim()) {
+      if (instance.container.querySelector('[data-run]')?.dataset.action === 'cancel') {
         instance.callbacks.onCancel?.();
         return;
       }
       form?.requestSubmit?.();
     });
     bind(instance, task, 'keydown', event => instance.callbacks.onTaskKeydown?.(event));
-    bind(instance, task, 'input', event => instance.callbacks.onTaskInput?.(event));
+    bind(instance, task, 'input', event => {
+      if (acceptTaskInput(instance, task)) instance.callbacks.onTaskInput?.(event);
+    });
+    bind(instance, task, 'compositionstart', () => {
+      const composition = { scope: instance.callbacks.getTaskScope?.() };
+      composition.done = new Promise(resolve => { composition.resolve = resolve; });
+      instance.composition = composition;
+    });
+    bind(instance, task, 'compositionend', event => {
+      const composition = instance.composition;
+      if (acceptTaskInput(instance, task)) instance.callbacks.onInputChange?.(event);
+      // Chrome may emit the final input after compositionend. Keep its original
+      // owner until that event batch has finished, before a session can change.
+      if (composition) setTimeout(() => {
+        if (instance.composition === composition) instance.composition = null;
+        composition.resolve();
+      }, 0);
+    });
     bind(instance, instance.container.querySelector('[data-slash-menu]'), 'click', event => instance.callbacks.onSlashMenuClick?.(event));
     bind(instance, instance.container.querySelector('[data-composer-skill-clear]'), 'click', () => instance.callbacks.onClearSkillInvocation?.());
     bind(instance, instance.container.querySelector('[data-add-context]'), 'click', () => instance.callbacks.onAddContext?.());
@@ -180,8 +238,11 @@
     }
     for (const selector of ['[data-model]', '[data-reasoning]', '[data-speed]', '[data-mode]', '[data-task]', '[data-require-reviewing]', '[data-auto-recompile]']) {
       const element = instance.container.querySelector(selector);
-      bind(instance, element, 'change', event => instance.callbacks.onInputChange?.(event));
-      bind(instance, element, 'input', event => instance.callbacks.onInputChange?.(event));
+      const changed = event => {
+        if (element !== task || acceptTaskInput(instance, task)) instance.callbacks.onInputChange?.(event);
+      };
+      bind(instance, element, 'change', changed);
+      bind(instance, element, 'input', changed);
     }
   }
 
@@ -193,6 +254,41 @@
     instance.listeners.push({ target, type, listener });
   }
 
+  function bindMenuLayout(instance) {
+    const view = instance.container.ownerDocument?.defaultView || window;
+    const update = () => instance.callbacks.onMenuLayoutChange?.();
+    bind(instance, view, 'resize', update);
+    bind(instance, view.visualViewport, 'resize', update);
+    bind(instance, view.visualViewport, 'scroll', update);
+    const form = instance.container.querySelector('[data-composer-form]');
+    if (form && typeof view.ResizeObserver === 'function') {
+      instance.menuResizeObserver = new view.ResizeObserver(update);
+      instance.menuResizeObserver.observe(form);
+      instance.menuResizeObserver.observe(instance.container);
+      const panel = instance.container.closest?.('#codex-overleaf-panel');
+      if (panel && panel !== instance.container) instance.menuResizeObserver.observe(panel);
+    }
+  }
+
+  function acceptTaskInput(instance, task) {
+    if (instance.composition && instance.composition.scope !== instance.callbacks.getTaskScope?.()) {
+      task.value = instance.callbacks.getTaskValue?.() || '';
+      return false;
+    }
+    return !instance.sessionTransition || Boolean(instance.composition);
+  }
+
+  function setSessionTransition(instance, pending) {
+    const task = instance.container.querySelector('[data-task]');
+    if (pending && !instance.sessionTransition) instance.previousReadOnly = task?.readOnly === true;
+    instance.sessionTransition = pending;
+    const composition = instance.composition;
+    if (pending && composition) task?.blur();
+    if (task) task.readOnly = pending || instance.previousReadOnly === true;
+    setRunning(instance, Boolean(instance.callbacks.isRunning?.()));
+    return pending ? composition?.done : undefined;
+  }
+
   function setRunning(target, running) {
     const instance = target?._instance || target;
     const runButton = instance?.container?.querySelector('[data-run]');
@@ -200,14 +296,14 @@
       return;
     }
     const hasInput = Boolean(String(instance?.container?.querySelector('[data-task]')?.value || '').trim());
-    const action = running && !hasInput ? 'cancel' : 'send';
+    const action = running && (!hasInput || instance.sessionTransition) ? 'cancel' : 'send';
     const label = action === 'cancel'
       ? t(instance, 'cancelRun')
       : running
         ? t(instance, 'queueNextInput')
         : t(instance, 'send');
     runButton.dataset.action = action;
-    runButton.disabled = action === 'send' && !hasInput;
+    runButton.disabled = action === 'send' && (!hasInput || instance.sessionTransition);
     runButton.title = label;
     runButton.setAttribute('aria-label', label);
   }
@@ -276,6 +372,8 @@
   }
 
   function destroy(instance) {
+    instance.composition?.resolve();
+    instance.menuResizeObserver?.disconnect();
     for (const { target, type, listener } of instance.listeners.splice(0)) {
       target.removeEventListener?.(type, listener);
     }