codex-overleaf-link 2.5.1 → 2.6.5

package/extension/src/content/activeTurnControl.js

@@ -7,12 +7,23 @@
 })(typeof window !== 'undefined' ? window : globalThis, function activeTurnControlFactory() {
   'use strict';
 
+  // Startup has an owner before a Native request exists. This identity is only
+  // for ownership probes; nativeRequestId remains reserved for the actual RPC.
+  function getStartupRequestId(sessionId, runId) {
+    return `startup:${encodeURIComponent(sessionId)}:${encodeURIComponent(runId)}`;
+  }
+
   function create(options = {}) {
     const runtime = options.chrome?.runtime;
     let port = null;
     let binding = null;
     let reconnectTimer = null;
     let destroyed = false;
+    let bindingWaiter = null;
+    let bindingSequence = 0;
+    let recoveryTimer = null;
+    let recoveryGeneration = 0;
+    const inventoryRetries = new Map();
 
     function connect() {
       if (destroyed || port || typeof runtime?.connect !== 'function') {
@@ -21,6 +32,11 @@
       try {
         const nextPort = runtime.connect({ name: 'codex-overleaf/run-owner' });
         port = nextPort;
+        nextPort.onMessage?.addListener?.(message => {
+          if (port !== nextPort || message?.type !== 'bound' || !bindingWaiter || !binding) return;
+          if (['requestId', 'projectKey', 'clientRunId', 'sessionId'].every(key => message[key] === binding[key])
+            && message.browserOnly === true && message.ownerToken === binding.ownerToken) bindingWaiter(message.ok !== false);
+        });
         nextPort.onDisconnect?.addListener?.(() => {
           if (port === nextPort) {
             port = null;
@@ -46,20 +62,39 @@
     }
 
     function bind(value = {}) {
+      bindingWaiter?.(false);
       binding = {
         requestId: String(value.requestId || ''),
         projectKey: String(value.projectKey || ''),
         clientRunId: String(value.clientRunId || ''),
-        sessionId: String(value.sessionId || '')
+        sessionId: String(value.sessionId || ''),
+        ...(value.browserOnly === true ? { browserOnly: true, ownerToken: String(value.ownerToken || `browser-${++bindingSequence}`) } : {})
       };
       connect();
       postBinding('bind', binding);
     }
 
-    function release(requestId) {
-      if (!binding || (requestId && binding.requestId !== requestId)) {
+    async function bindBrowserRun(value) {
+      bind({ ...value, browserOnly: true });
+      if (destroyed || !port) return false;
+      return new Promise(resolve => {
+        const timeout = setTimeout(() => complete(false), 5000);
+        const complete = ok => {
+          clearTimeout(timeout);
+          if (bindingWaiter === complete) bindingWaiter = null;
+          resolve(ok);
+        };
+        bindingWaiter = complete;
+        postBinding('bind', binding);
+      });
+    }
+
+    function release(requestId, ownerToken) {
+      if (!binding || (requestId && binding.requestId !== requestId)
+        || (ownerToken && ownerToken !== binding.ownerToken)) {
         return;
       }
+      bindingWaiter?.(false);
       postBinding('release', binding);
       binding = null;
     }
@@ -86,12 +121,94 @@
       return response?.ok === true;
     }
 
+    async function knownJournals(requestIds, owners = [], onRetry) {
+      if (typeof runtime?.sendMessage !== 'function') return null;
+      const known = new Set();
+      for (let offset = 0; offset < requestIds.length; offset += 64) {
+        const ids = requestIds.slice(offset, offset + 64);
+        const response = await runtime.sendMessage({ type: 'codex-overleaf/run-journal/known',
+          requestIds: ids, owners: owners.slice(offset, offset + 64) });
+        // An older background cannot rule out browser-only owners.
+        const needsStartupInventory = owners.slice(offset, offset + 64).some(owner => owner.preDispatch === true);
+        if (!response?.ok || !Array.isArray(response.known) || response.ownersChecked !== true
+          || (needsStartupInventory && response.preDispatchChecked !== true)) {
+          if (Number.isFinite(response?.retryAfterMs) && response.retryAfterMs > 0) onRetry?.(response.retryAfterMs);
+          return null;
+        }
+        for (const id of response.known) if (ids.includes(id)) known.add(id);
+      }
+      return known;
+    }
+
+    // Native journals and live browser-only owners are separate evidence. A
+    // missing journal alone cannot establish that another page stopped retrying.
+    async function recoverOrphanedRuns(projectKey, options, result, isCurrent) {
+      const now = Date.now(), candidates = [];
+      let recheckAfterMs = Infinity;
+      const sessions = () => options.listSessions?.() || [];
+      const requestIdFor = (session, record) => record.nativeRequestId || getStartupRequestId(session.id, record.id);
+      const eligible = (session, record) => record.status === 'running' && session.id && record.id
+        && !options.isLiveRun?.(record, session)
+        && (!session.projectId || session.projectId === projectKey)
+        && (!options.accountScopeId || !session.accountScopeId || session.accountScopeId === options.accountScopeId)
+        && (!record.runProjectId || record.runProjectId === projectKey);
+      for (const session of sessions()) {
+        for (const record of session.runs || []) {
+          if (!eligible(session, record)) continue;
+          const started = Date.parse(record.startedAt);
+          if (!Number.isFinite(started)) continue;
+          const remaining = started + (options.orphanGraceMs ?? 60000) - now;
+          if (remaining > 0) { recheckAfterMs = Math.min(recheckAfterMs, remaining); continue; }
+          candidates.push({ session, record, requestId: requestIdFor(session, record) });
+        }
+      }
+      result.recheckAfterMs = Number.isFinite(recheckAfterMs) ? recheckAfterMs : null;
+      if (!candidates.length) return;
+      const known = await knownJournals(candidates.map(item => item.requestId), candidates.map(({ session, record, requestId }) => ({
+        requestId, projectKey, clientRunId: record.id, sessionId: session.id,
+        ...(!record.nativeRequestId ? { preDispatch: true } : {})
+      })), delay => {
+        const key = `${options.accountScopeId || ''}:${projectKey}`;
+        const attempts = inventoryRetries.get(key) || 0;
+        if (attempts >= 3) return;
+        inventoryRetries.set(key, attempts + 1);
+        result.recheckAfterMs = Math.min(result.recheckAfterMs ?? Infinity, delay);
+      }).catch(() => null);
+      if (!known || !isCurrent()) return;
+      inventoryRetries.delete(`${options.accountScopeId || ''}:${projectKey}`);
+      for (const { session, record, requestId } of candidates) {
+        const currentSession = sessions().find(value => value.id === session.id);
+        // State normalization can replace run objects while inventory is pending.
+        if (!currentSession?.runs?.includes(record) || !eligible(currentSession, record)
+          || requestIdFor(currentSession, record) !== requestId || known.has(requestId)) continue;
+        if (!record.runProjectId) record.runProjectId = projectKey;
+        options.normalizeInterruptedRun?.(record);
+        record.status = 'interrupted';
+        record.interruptedDraft = { requestId, threadId: currentSession.codexThreadId || '',
+          turnId: record.codexTurnId || '', lastEventSeq: record.nativeEventSeq || 0, reason: 'extension_reloaded' };
+        options.pauseSessionQueue?.(currentSession, 'page_reload');
+        result.changed = true;
+        result.recoveredRuns.push({ sessionId: currentSession.id, runId: record.id,
+          projectId: projectKey, accountScopeId: options.accountScopeId });
+      }
+    }
+
+    function cancelRecovery() {
+      recoveryGeneration++;
+      clearTimeout(recoveryTimer);
+      recoveryTimer = null;
+    }
+
     async function recoverJournals(options = {}) {
+      cancelRecovery();
+      const generation = recoveryGeneration;
+      const isCurrent = () => !destroyed && generation === recoveryGeneration && options.isCurrent?.() !== false;
       const projectKey = String(options.projectKey || '');
       if (!projectKey) {
         return { changed: false, acknowledgeIds: [] };
       }
       const journals = await listJournals(projectKey).catch(() => []);
+      if (!isCurrent()) return { changed: false, acknowledgeIds: [], recoveredRuns: [] };
       let changed = false;
       const acknowledgeIds = [];
       const recoveredRuns = [];
@@ -116,11 +233,19 @@
             session.runs = [...(session.runs || []), record].slice(-20);
           }
         }
-        if (!record) {
+        if (!record || options.isLiveRun?.(record, session)) {
           continue;
         }
         if (record.runProjectId && record.runProjectId !== projectKey) continue;
         if (!record.runProjectId) record.runProjectId = projectKey;
+        if (journal.operation === 'compact') {
+          record.operation = 'compact';
+          if (!record.codexThreadId) record.codexThreadId = String(journal.threadId || '');
+          if (session.contextUsage?.threadId === record.codexThreadId
+            && Date.parse(session.contextUsage.observedAt || '') < Date.parse(record.startedAt || '')) {
+            session.contextUsage = null;
+          }
+        }
         if (record.status === 'running') {
           options.normalizeInterruptedRun?.(record);
         }
@@ -140,6 +265,9 @@
             record.nativeEventSeq = sequence;
             continue;
           }
+          // Non-display state (for example context usage) must also recover
+          // from the journal, after the owning thread/turn has been bound.
+          options.onRawEvent?.(raw, { record, session, sequence, journal });
           const recovered = options.mapEvent?.(raw, journal);
           if (recovered) {
             if (recovered.kind === 'stream') {
@@ -170,11 +298,21 @@
         recoveredRuns.push({ sessionId: session.id, runId: record.id,
           projectId: projectKey, accountScopeId: options.accountScopeId });
       }
-      return { changed, acknowledgeIds, recoveredRuns };
+      const result = { changed, acknowledgeIds, recoveredRuns };
+      await recoverOrphanedRuns(projectKey, options, result, isCurrent);
+      if (isCurrent() && result.recheckAfterMs !== null && typeof options.onRecheck === 'function') {
+        recoveryTimer = setTimeout(() => {
+          recoveryTimer = null;
+          if (isCurrent()) Promise.resolve(options.onRecheck()).catch(() => {});
+        }, Math.min(result.recheckAfterMs, 2147483647));
+      }
+      return result;
     }
 
     function destroy() {
       destroyed = true;
+      cancelRecovery();
+      bindingWaiter?.(false);
       clearTimeout(reconnectTimer);
       reconnectTimer = null;
       try {
@@ -187,8 +325,27 @@
     }
 
     connect();
-    return { acknowledge, bind, destroy, listJournals, recoverJournals, release };
+    return { acknowledge, bind, bindBrowserRun, cancelRecovery, destroy, getOwner: () => binding ? { ...binding } : null,
+      knownJournals, listJournals, recoverJournals, release };
+  }
+
+  function createInterruptedRun(journal, projectKey, statusText) {
+    return { id: journal.clientRunId, task: journal.task || 'interrupted task', mode: journal.mode || 'ask',
+      ...(journal.operation === 'compact' ? { operation: 'compact', codexThreadId: String(journal.threadId || '') } : {}),
+      model: journal.model || '', status: 'interrupted', statusText, runProjectId: projectKey,
+      startedAt: journal.createdAt || new Date().toISOString(), finishedAt: journal.updatedAt || new Date().toISOString(),
+      events: [], attachments: [], undoOperations: [], undoTrackedChanges: [], undoExpectedFiles: [] };
+  }
+
+  function mapRecoveredEvent(raw, journal, options) {
+    const activity = options.mapActivity(raw);
+    if (!activity?.visible || activity.kind === 'technical') return null;
+    return { kind: activity.kind || 'activity', title: options.sanitizeText(activity.title) || 'Event',
+      status: activity.status || 'running', detail: options.sanitizeValue(activity.detail),
+      timestamp: raw.timestamp || journal.updatedAt || new Date().toISOString(),
+      streamKey: options.sanitizeText(activity.streamKey), streamRole: options.sanitizeText(activity.streamRole),
+      appendText: options.sanitizeText(activity.appendText), replaceText: activity.replaceText };
   }
 
-  return { create };
+  return { create, createInterruptedRun, mapRecoveredEvent, getStartupRequestId };
 });

package/extension/src/content/composerAttachments.js

@@ -7,6 +7,7 @@
     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;
@@ -14,7 +15,7 @@
     const maxPreviewDataUrlChars = Number(limits.maxPreviewDataUrlChars) || 768 * 1024;
 
     let attachments = [];
-    const pendingAttachmentKeys = new Set();
+    const pendingAttachmentKeys = new Map();
     let pendingAttachmentBytes = 0;
     let attachmentGeneration = 0;
     let attachmentRevision = 0;
@@ -87,8 +88,15 @@
             continue;
           }
           attachmentRevision += 1;
-          pendingAttachmentKeys.add(dedupeKey);
+          pendingAttachmentKeys.set(dedupeKey, {
+            name: normalizeAttachmentName(file.name),
+            mimeType: String(file.type || ''),
+            size: fileSize,
+            loading: true
+          });
           pendingAttachmentBytes += fileSize;
+          renderComposerAttachments();
+          onChange();
           try {
             const dataUrl = await readFileAsDataUrl(file, tx);
             if (generation !== attachmentGeneration) return;
@@ -117,6 +125,8 @@
             if (generation === attachmentGeneration) {
               pendingAttachmentBytes = Math.max(0, pendingAttachmentBytes - fileSize);
               pendingAttachmentKeys.delete(dedupeKey);
+              renderComposerAttachments();
+              onChange();
             }
           }
         }
@@ -154,11 +164,13 @@
       if (!strip) {
         return;
       }
-      strip.hidden = attachments.length === 0;
-      renderAttachmentPreviewList(attachments, strip, {
+      const visibleAttachments = [...attachments, ...pendingAttachmentKeys.values()];
+      strip.hidden = visibleAttachments.length === 0;
+      renderAttachmentPreviewList(visibleAttachments, strip, {
         root: getPanel() || document.body,
         tr,
         tx,
+        icons,
         removable: true,
         onRemove: removeAttachment
       });
@@ -256,8 +268,8 @@
     }
 
     // v1.8.0 C4: survive a page refresh. Only small attachments persist
-    // (single base64 <= 1MB, max 3) — oversized ones are dropped on restore
-    // rather than bloating chrome.storage and every debounced saveState.
+    // (single base64 <= 1MB, max 3). Omitted names are saved separately so
+    // recovery can disclose files that need reattaching without saving bytes.
     const PERSIST_MAX_CONTENT_CHARS = 1024 * 1024;
     const PERSIST_MAX_COUNT = 3;
 
@@ -292,6 +304,15 @@
       return attachments.length;
     }
 
+    function getOmittedAttachmentNames() {
+      let persistedCount = 0;
+      return attachments.filter(attachment => {
+        if ((attachment.contentBase64 || '').length > PERSIST_MAX_CONTENT_CHARS || persistedCount >= PERSIST_MAX_COUNT) return true;
+        persistedCount += 1;
+        return false;
+      }).map(attachment => attachment.name);
+    }
+
     // 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) {
@@ -313,6 +334,8 @@
 
     return {
       serializePersistableAttachments,
+      getOmittedAttachmentNames,
+      hasPendingReads: () => pendingAttachmentKeys.size > 0,
       restorePersistedAttachments,
       restoreSubmittedAttachments,
       getRevision: () => attachmentRevision,
@@ -333,6 +356,7 @@
         root: getPanel() || document.body,
         tr,
         tx,
+        icons,
         ...options
       }),
       clear,
@@ -408,6 +432,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();
@@ -419,6 +449,10 @@
       const card = document.createElement('div');
       card.className = 'codex-attachment-preview-card';
       card.dataset.kind = isImage ? 'image' : 'file';
+      if (attachment.loading) {
+        card.dataset.loading = 'true';
+        card.setAttribute('aria-busy', 'true');
+      }
       card.title = label + ' · ' + formatFileSize(attachment.size);
       if (isImage) {
         const preview = document.createElement('button');
@@ -447,15 +481,17 @@
       if (!isImage) {
         const size = document.createElement('span');
         size.className = 'codex-attachment-preview-size';
-        size.textContent = formatFileSize(attachment.size);
+        size.textContent = attachment.loading
+          ? (options.tx ? options.tx('Loading…', '读取中…') : 'Loading…')
+          : formatFileSize(attachment.size);
         meta.append(size);
       }
       card.append(meta);
-      if (options.removable) {
+      if (options.removable && !attachment.loading) {
         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);
@@ -486,7 +522,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');

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>
@@ -136,6 +175,7 @@
 
     return {
       setRunning: running => setRunning(instance, running),
+      setSessionTransition: pending => setSessionTransition(instance, pending),
       setModels: models => setModels(instance, models),
       setMode: mode => setMode(instance, mode),
       focus: () => focus(instance),
@@ -157,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?.());
@@ -181,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);
     }
   }
 
@@ -210,6 +270,25 @@
     }
   }
 
+  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]');
@@ -217,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);
   }
@@ -293,6 +372,7 @@
   }
 
   function destroy(instance) {
+    instance.composition?.resolve();
     instance.menuResizeObserver?.disconnect();
     for (const { target, type, listener } of instance.listeners.splice(0)) {
       target.removeEventListener?.(type, listener);