codex-overleaf-link 1.9.2 → 1.9.4

package/extension/src/popup.js

@@ -45,6 +45,7 @@
   });
 
   initPopupState();
+  scheduleConsentUpdateUi();
 
   async function initPopupState() {
     await checkNativeHost();
@@ -198,11 +199,11 @@
   function getStatusIconText(classification) {
     switch (classification) {
       case 'compatible':
-        return 'OK';
+        return '';
       case 'update-available':
-        return '!';
+        return '';
       default:
-        return 'X';
+        return '';
     }
   }
 
@@ -244,4 +245,268 @@
         return 'Native host is not compatible. Update the native host, then reload the extension.';
     }
   }
+
+  function scheduleConsentUpdateUi() {
+    const start = () => {
+      if (typeof document.createElement !== 'function') return;
+      injectConsentUpdateStyles();
+      const section = ensureUpdateSection();
+      let actionInFlight = false;
+      let currentView = null;
+
+      section.addEventListener('click', async event => {
+        const action = event.target?.closest?.('[data-update-action]')?.dataset?.updateAction;
+        if (!action || actionInFlight) return;
+        actionInFlight = true;
+        renderUpdateSection(section, currentView, { busyAction: action });
+        try {
+          currentView = await sendConsentAction(action);
+        } catch (error) {
+          currentView = failedUpdateView(currentView, error);
+        } finally {
+          actionInFlight = false;
+          renderUpdateSection(section, currentView);
+        }
+      });
+
+      chrome.runtime.onMessage.addListener(message => {
+        if (message?.type !== 'codex-overleaf/consent-update-state') return;
+        currentView = message.view;
+        if (!actionInFlight) renderUpdateSection(section, currentView);
+      });
+
+      sendConsentAction('get')
+        .then(view => {
+          currentView = view;
+          renderUpdateSection(section, view);
+        })
+        .catch(error => renderUpdateSection(section, failedUpdateView(null, error)));
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', start, { once: true });
+    } else {
+      Promise.resolve().then(start);
+    }
+  }
+
+  function ensureUpdateSection() {
+    let section = document.querySelector('.updates');
+    if (!section) {
+      section = document.createElement('section');
+      section.className = 'updates';
+      section.setAttribute('aria-label', 'Stable updates');
+      (nativeInstall || status).insertAdjacentElement('afterend', section);
+    }
+    section.classList.add('consent-updates');
+    section.replaceChildren();
+    return section;
+  }
+
+  async function sendConsentAction(action) {
+    const type = {
+      get: 'codex-overleaf/consent-update-get-state',
+      check: 'codex-overleaf/consent-update-check',
+      install: 'codex-overleaf/consent-update-install',
+      later: 'codex-overleaf/consent-update-later',
+      retry: 'codex-overleaf/consent-update-check'
+    }[action];
+    const response = await chrome.runtime.sendMessage({ type });
+    if (!response?.ok) {
+      const error = new Error(response?.error?.message || 'Update action failed.');
+      error.code = response?.error?.code || 'update_failed';
+      throw error;
+    }
+    return response.result;
+  }
+
+  function failedUpdateView(view, error) {
+    return {
+      ...(view || {}),
+      state: {
+        ...(view?.state || {}),
+        state: 'failed',
+        code: error?.code || 'update_failed',
+        message: error?.message || 'Update failed.'
+      },
+      progress: { value: 0, determinate: true, phase: 'failed' },
+      actions: { retry: true }
+    };
+  }
+
+  function renderUpdateSection(section, view = {}, options = {}) {
+    const focusedAction = document.activeElement?.dataset?.updateAction || '';
+    const state = view?.state || { state: 'idle' };
+    const progress = view?.progress || { value: 0, determinate: true, phase: 'idle' };
+    const copy = getUpdateCopy(state, view);
+    const card = document.createElement('div');
+    card.className = 'consent-update-card state-' + (state.state || 'idle');
+
+    const head = document.createElement('div');
+    head.className = 'consent-update-head';
+    const title = document.createElement('strong');
+    title.textContent = copy.title;
+    const version = document.createElement('span');
+    version.textContent = copy.version;
+    head.append(title, version);
+
+    const detail = document.createElement('p');
+    detail.className = 'consent-update-detail';
+    detail.textContent = copy.detail;
+
+    const progressEl = document.createElement('div');
+    progressEl.className = 'consent-update-progress' + (progress.determinate ? '' : ' is-indeterminate');
+    progressEl.setAttribute('role', 'progressbar');
+    progressEl.setAttribute('aria-label', copy.phase);
+    progressEl.setAttribute('aria-valuemin', '0');
+    progressEl.setAttribute('aria-valuemax', '100');
+    progressEl.setAttribute('aria-valuetext', copy.phase);
+    if (progress.determinate) progressEl.setAttribute('aria-valuenow', String(progress.value || 0));
+    const progressFill = document.createElement('span');
+    progressFill.style.width = Math.max(0, Math.min(100, Number(progress.value || 0))) + '%';
+    progressEl.append(progressFill);
+
+    const phase = document.createElement('div');
+    phase.className = 'consent-update-phase';
+    phase.textContent = copy.phase;
+
+    const actions = document.createElement('div');
+    actions.className = 'consent-update-actions';
+    for (const action of getVisibleActions(view, options.busyAction)) {
+      const actionButton = document.createElement('button');
+      actionButton.type = 'button';
+      actionButton.dataset.updateAction = action.id;
+      actionButton.className = action.primary ? 'update-primary' : 'update-secondary';
+      actionButton.textContent = action.label;
+      actionButton.disabled = Boolean(options.busyAction) || action.disabled;
+      actions.append(actionButton);
+    }
+
+    const live = document.createElement('div');
+    live.className = 'consent-update-live';
+    live.setAttribute('aria-live', 'polite');
+    live.textContent = ['committed', 'rolled_back', 'failed'].includes(state.state) ? copy.phase : '';
+
+    card.append(head, detail);
+    if (!['idle', 'update_available'].includes(state.state) || options.busyAction === 'check') {
+      card.append(progressEl, phase);
+    }
+    card.append(actions, live);
+    if (state.state === 'failed' && (state.code || state.message)) {
+      const details = document.createElement('details');
+      const summary = document.createElement('summary');
+      summary.textContent = utx('Technical details', '技术详情');
+      const code = document.createElement('code');
+      code.textContent = [state.code, state.message].filter(Boolean).join(': ');
+      details.append(summary, code);
+      card.append(details);
+    }
+    section.replaceChildren(card);
+    if (focusedAction) {
+      section.querySelector('[data-update-action="' + focusedAction + '"]:not(:disabled)')?.focus();
+    }
+  }
+
+  function getVisibleActions(view = {}, busyAction = '') {
+    const state = view.state?.state || 'idle';
+    if (busyAction) {
+      return [{ id: busyAction, label: getBusyLabel(busyAction), primary: true, disabled: true }];
+    }
+    if (state === 'update_available') {
+      return [
+        { id: 'later', label: utx('Later', '稍后提醒'), primary: false },
+        { id: 'install', label: utx('Update now', '立即更新'), primary: true }
+      ];
+    }
+    if (['staged', 'waiting_for_idle'].includes(state)) {
+      return [{ id: 'later', label: utx('Later', '稍后提醒'), primary: false }];
+    }
+    if (['downloading', 'applying', 'awaiting_health', 'checking'].includes(state)) return [];
+    if (['failed', 'rolled_back'].includes(state)) {
+      return [{ id: 'retry', label: utx('Retry', '重试'), primary: true }];
+    }
+    return [{ id: 'check', label: utx('Check latest', '检查更新'), primary: false }];
+  }
+
+  function getBusyLabel(action) {
+    return {
+      check: utx('Checking...', '正在检查...'),
+      retry: utx('Checking...', '正在检查...'),
+      install: utx('Starting update...', '正在启动更新...'),
+      later: utx('Saving...', '正在保存...')
+    }[action] || utx('Working...', '处理中...');
+  }
+
+  function getUpdateCopy(state, view) {
+    const current = state.currentVersion ? 'v' + state.currentVersion : '';
+    const latest = state.latestVersion ? 'v' + state.latestVersion : '';
+    const blocker = formatBlocker(state.blocker);
+    const map = {
+      idle: [utx('Stable updates', '稳定版更新'), utx('Up to date', '已是最新版'), utx('Automatically checks signed stable releases.', '自动检查经过签名验证的稳定版本。')],
+      checking: [utx('Checking for updates', '正在检查更新'), '', utx('Checking the latest signed stable release', '正在检查最新签名稳定版本')],
+      update_available: [utx('Update available', '发现新版本'), latest, view.snoozed ? utx('Reminder paused. Update remains ready here.', '提醒已暂停，仍可随时从这里更新。') : utx('Signed stable update for the extension and Native Host.', '扩展与 Native Host 的签名稳定更新。')],
+      downloading: [utx('Downloading update', '正在下载更新'), latest, utx('Downloading and verifying the coordinated update', '正在下载并验证协调更新')],
+      staged: [utx('Update ready', '更新已就绪'), latest, utx('Verified and ready to install at a safe point.', '已完成验证，将在安全时机安装。')],
+      waiting_for_idle: [utx('Waiting for a safe point', '正在等待安全时机'), latest, blocker],
+      applying: [utx('Installing update', '正在安装更新'), latest, utx('Installing extension and Native Host', '正在安装扩展与 Native Host')],
+      awaiting_health: [utx('Checking updated components', '正在检查更新后的组件'), latest, utx('Restarting and checking both components', '正在重启并检查两个组件')],
+      committed: [utx('Update complete', '更新完成'), latest || current, utx('Extension and Native Host were updated together.', '扩展与 Native Host 已同步更新。')],
+      rolled_back: [utx('Previous version restored', '已恢复上一版本'), current, utx('Health check failed, so the previous coordinated pair was restored.', '健康检查失败，已恢复上一组协调版本。')],
+      failed: [utx('Update could not continue', '更新无法继续'), latest, state.message || utx('Check the details and retry.', '请查看详情后重试。')]
+    };
+    const value = map[state.state] || map.idle;
+    return { title: value[0], version: value[1], detail: value[2], phase: value[2] };
+  }
+
+  function formatBlocker(blocker) {
+    const labels = {
+      unsaved: utx('Overleaf has not confirmed that this document is saved.', 'Overleaf 尚未确认当前文档已保存。'),
+      active_run: utx('A Codex task is still running.', 'Codex 任务仍在运行。'),
+      cancelling: utx('Cancellation is still settling.', '取消操作仍在收尾。'),
+      storage_write: utx('Extension state is still being saved.', '扩展状态仍在保存。'),
+      review_action: utx('Accept or Undo is still running.', '接受或撤销操作仍在进行。'),
+      dialog_open: utx('A confirmation dialog is open.', '确认对话框仍处于打开状态。'),
+      native_project_locked: utx('Native Host still holds a project lock.', 'Native Host 仍持有项目锁。'),
+      native_run_active: utx('Native Host is still processing a task.', 'Native Host 仍在处理任务。')
+    };
+    return labels[blocker] || utx('Waiting until every Overleaf tab is saved and idle.', '正在等待所有 Overleaf 标签页完成保存并进入空闲状态。');
+  }
+
+  function utx(english, chinese) {
+    const locale = document.documentElement?.lang || 'en';
+    return /^zh\b/i.test(locale) ? chinese : english;
+  }
+
+  function injectConsentUpdateStyles() {
+    if (document.getElementById('codex-overleaf-consent-update-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'codex-overleaf-consent-update-styles';
+    style.textContent = [
+      'body { width:344px; padding:16px; background:#171918; color:#eceeec; font-family:"Avenir Next","Segoe UI",sans-serif; }',
+      'h1 { font-size:16px; letter-spacing:-.01em; }',
+      '.version-status { color:#a8ada9; }',
+      '.status-icon { min-width:10px; min-height:10px; width:10px; height:10px; box-shadow:0 0 0 3px rgba(255,255,255,.04); }',
+      '.status-icon.compatible { background:#7fd58a; } .status-icon.update-available { background:#d7b96e; } .status-icon.incompatible { background:#d87972; }',
+      '#open-panel { border-color:#39403c; background:#242825; color:#dfe4df; font-weight:600; }',
+      '#status { color:#9ba19c; font-size:12px; }',
+      '.consent-updates { margin-top:14px; padding-top:13px; border-top:1px solid #303431; }',
+      '.consent-update-card { padding-top:1px; }',
+      '.consent-update-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }',
+      '.consent-update-head strong { font-size:13px; color:#f0f2f0; } .consent-update-head span { color:#85d99a; font-size:11px; font-weight:700; }',
+      '.consent-update-detail,.consent-update-phase { color:#a9aea9; font-size:12px; line-height:1.45; }',
+      '.consent-update-progress { position:relative; height:4px; margin:12px 0 8px; overflow:hidden; border-radius:999px; background:#2c312e; }',
+      '.consent-update-progress span { display:block; height:100%; border-radius:inherit; background:#4f9ee8; transition:width .25s ease; }',
+      '.consent-update-progress.is-indeterminate span { width:42% !important; animation:consent-progress 1.25s ease-in-out infinite; }',
+      '.consent-update-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }',
+      '.consent-update-actions button { width:auto; min-width:92px; margin:0; padding:7px 12px; font-weight:650; }',
+      '.consent-update-actions .update-primary { border-color:#4a91d7; background:#3578bd; }',
+      '.consent-update-actions .update-secondary { border-color:#3c433f; background:transparent; color:#d5dad6; }',
+      '.consent-update-actions button:focus-visible { outline:2px solid #79b8f2; outline-offset:2px; }',
+      '.consent-update-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }',
+      '.consent-update-card details { margin-top:10px; color:#a9aea9; font-size:11px; } .consent-update-card details code { background:#202320; color:#c9ceca; }',
+      '@keyframes consent-progress { 0% { transform:translateX(-110%); } 100% { transform:translateX(240%); } }',
+      '@media (prefers-reduced-motion:reduce) { .consent-update-progress.is-indeterminate span { animation:none; width:65% !important; } }'
+    ].join('\n');
+    document.head.append(style);
+  }
 })();

package/extension/src/shared/compatibility.js

@@ -12,7 +12,7 @@
   const MIN_NATIVE_VERSION = '1.0.0';
   const MIN_COMPATIBLE_NATIVE_VERSION = '1.0.0';
   const MIN_COMPATIBLE_EXTENSION_VERSION = '1.0.0';
-  const BUILD_TARGET_VERSION = '1.9.2';
+  const BUILD_TARGET_VERSION = '1.9.4';
   const DEFAULT_CHROME_EXTENSION_ID = 'illdpneeeopfffmiepaejglgmhpmdhdc';
   const REQUIRED_CAPABILITIES = Object.freeze([
     'bridgePing',

package/extension/src/shared/updateConsent.js

@@ -0,0 +1,201 @@
+(function initCodexOverleafUpdateConsent(root, factory) {
+  'use strict';
+
+  const api = factory();
+  root.CodexOverleafUpdateConsent = api;
+  if (typeof module === 'object' && module?.exports) {
+    module.exports = api;
+  }
+})(typeof globalThis === 'object' ? globalThis : this, function createUpdateConsentApi() {
+  'use strict';
+
+  const UPDATE_STATES = new Set([
+    'idle',
+    'checking',
+    'update_available',
+    'downloading',
+    'staged',
+    'waiting_for_idle',
+    'applying',
+    'awaiting_health',
+    'committed',
+    'rolled_back',
+    'failed'
+  ]);
+  const EXECUTION_STATES = new Set([
+    'downloading',
+    'staged',
+    'waiting_for_idle',
+    'applying',
+    'awaiting_health'
+  ]);
+  const TERMINAL_STATES = new Set(['committed', 'rolled_back', 'failed']);
+  const QUIET_FAILURE_CODES = new Set([
+    'update_network_failed',
+    'update_network_unavailable',
+    'update_github_http_error'
+  ]);
+  const PROGRESS = Object.freeze({
+    idle: { value: 0, determinate: true, phase: 'idle' },
+    checking: { value: 0, determinate: false, phase: 'checking' },
+    update_available: { value: 0, determinate: true, phase: 'available' },
+    downloading: { value: 35, determinate: false, phase: 'downloading' },
+    staged: { value: 65, determinate: true, phase: 'staged' },
+    waiting_for_idle: { value: 65, determinate: true, phase: 'waiting' },
+    applying: { value: 82, determinate: false, phase: 'applying' },
+    awaiting_health: { value: 94, determinate: false, phase: 'health' },
+    committed: { value: 100, determinate: true, phase: 'committed' },
+    rolled_back: { value: 94, determinate: true, phase: 'rolled_back' },
+    failed: { value: 0, determinate: true, phase: 'failed' }
+  });
+
+  function normalizeUpdateState(value = {}, currentVersion = '') {
+    const blockers = Array.isArray(value.blockers)
+      ? value.blockers.map(safeToken).filter(Boolean).slice(0, 12)
+      : [safeToken(value.blocker)].filter(Boolean);
+    const state = UPDATE_STATES.has(value.state) ? value.state : 'idle';
+    return {
+      state,
+      managed: value.managed !== false,
+      currentVersion: safeVersion(value.currentVersion) || safeVersion(currentVersion),
+      latestVersion: safeVersion(value.latestVersion) || safeVersion(value.currentVersion) || safeVersion(currentVersion),
+      etag: String(value.etag || '').slice(0, 300),
+      blocker: blockers[0] || '',
+      blockers,
+      transactionId: safeId(value.transactionId),
+      lastCheckedAt: finiteNumber(value.lastCheckedAt),
+      stagedAt: finiteNumber(value.stagedAt),
+      postponeUntil: finiteNumber(value.postponeUntil),
+      code: safeToken(value.code),
+      message: String(value.message || '').replace(/\s+/g, ' ').trim().slice(0, 300)
+    };
+  }
+
+  function normalizeConsentState(value = {}) {
+    return {
+      schemaVersion: 1,
+      mode: 'consent',
+      snoozedVersion: safeVersion(value.snoozedVersion),
+      snoozedUntil: finiteNumber(value.snoozedUntil),
+      authorizedVersion: safeVersion(value.authorizedVersion),
+      authorizationId: safeId(value.authorizationId),
+      authorizedAt: finiteNumber(value.authorizedAt),
+      lastPromptedVersion: safeVersion(value.lastPromptedVersion),
+      lastPromptedAt: finiteNumber(value.lastPromptedAt)
+    };
+  }
+
+  function deriveViewModel(updateValue = {}, consentValue = {}, options = {}) {
+    const now = finiteNumber(options.now) || Date.now();
+    const state = normalizeUpdateState(updateValue, options.currentVersion);
+    const consent = normalizeConsentState(consentValue);
+    const newer = compareStableVersions(state.latestVersion, state.currentVersion) > 0;
+    const snoozed = newer &&
+      consent.snoozedVersion === state.latestVersion &&
+      consent.snoozedUntil > now;
+    const execution = EXECUTION_STATES.has(state.state);
+    const available = state.state === 'update_available' && newer;
+    const progress = getProgressModel(state);
+    const quietFailure = state.state === 'failed' && QUIET_FAILURE_CODES.has(state.code);
+
+    return {
+      state,
+      consent: {
+        mode: consent.mode,
+        snoozedVersion: consent.snoozedVersion,
+        snoozedUntil: consent.snoozedUntil,
+        authorizedVersion: consent.authorizedVersion,
+        authorizedAt: consent.authorizedAt
+      },
+      progress,
+      available,
+      snoozed,
+      execution,
+      showPanel: (available && !snoozed) || execution || state.state === 'rolled_back' ||
+        (state.state === 'failed' && !quietFailure && newer),
+      badge: getBadge(state, { available, snoozed }),
+      actions: {
+        check: ['idle', 'committed', 'rolled_back', 'failed'].includes(state.state),
+        install: available,
+        later: available || ['staged', 'waiting_for_idle'].includes(state.state),
+        retry: ['failed', 'rolled_back'].includes(state.state)
+      }
+    };
+  }
+
+  function getProgressModel(stateValue = {}) {
+    const state = normalizeUpdateState(stateValue);
+    const base = PROGRESS[state.state] || PROGRESS.idle;
+    return {
+      ...base,
+      blocker: state.blocker,
+      code: state.code,
+      message: state.message
+    };
+  }
+
+  function getBadge(state, flags) {
+    if (state.state === 'applying' || state.state === 'awaiting_health') {
+      return { text: '...', color: '#3578bd' };
+    }
+    if (state.state === 'failed' || state.state === 'rolled_back') {
+      return { text: '!', color: '#b85450' };
+    }
+    if (flags.available) {
+      return { text: 'UP', color: flags.snoozed ? '#6f6755' : '#3578bd' };
+    }
+    return { text: '', color: '#3578bd' };
+  }
+
+  function isExecutionState(value) {
+    return EXECUTION_STATES.has(String(value || ''));
+  }
+
+  function isTerminalState(value) {
+    return TERMINAL_STATES.has(String(value || ''));
+  }
+
+  function compareStableVersions(left, right) {
+    const a = parseVersion(left);
+    const b = parseVersion(right);
+    if (!a || !b) return 0;
+    for (let index = 0; index < 3; index += 1) {
+      if (a[index] !== b[index]) return a[index] > b[index] ? 1 : -1;
+    }
+    return 0;
+  }
+
+  function parseVersion(value) {
+    const match = String(value || '').match(/^(\d+)\.(\d+)\.(\d+)$/);
+    return match ? match.slice(1).map(Number) : null;
+  }
+
+  function safeVersion(value) {
+    return parseVersion(value) ? String(value) : '';
+  }
+
+  function safeToken(value) {
+    const token = String(value || '');
+    return /^[a-z0-9_.-]{1,100}$/i.test(token) ? token : '';
+  }
+
+  function safeId(value) {
+    const id = String(value || '');
+    return /^[a-z0-9-]{1,100}$/i.test(id) ? id : '';
+  }
+
+  function finiteNumber(value) {
+    const number = Number(value || 0);
+    return Number.isFinite(number) && number >= 0 ? number : 0;
+  }
+
+  return Object.freeze({
+    compareStableVersions,
+    deriveViewModel,
+    getProgressModel,
+    isExecutionState,
+    isTerminalState,
+    normalizeConsentState,
+    normalizeUpdateState
+  });
+});

package/extension/styles/panel.css

@@ -4046,3 +4046,149 @@
 #codex-overleaf-panel .recent-projects-degraded [data-recent-projects-retry] {
   margin-top: 8px;
 }
+
+/* v1.9.4: consent-driven coordinated update notice. */
+#codex-overleaf-panel .codex-update-notice {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  margin: 0;
+  padding: 11px 13px;
+  border-bottom: 1px solid var(--tl-border, #2a2f2c);
+  background:
+    linear-gradient(100deg, rgba(53, 120, 189, 0.13), transparent 58%),
+    var(--tl-surface-1, #181a19);
+}
+
+#codex-overleaf-panel .codex-update-notice[hidden] {
+  display: none;
+}
+
+#codex-overleaf-panel .codex-update-notice-body {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+#codex-overleaf-panel .codex-update-notice-eyebrow {
+  color: #7fb5e9;
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+#codex-overleaf-panel .codex-update-notice strong {
+  color: var(--tl-fg-1, #eceeec);
+  font-size: 12.5px;
+}
+
+#codex-overleaf-panel .codex-update-notice-detail {
+  overflow: hidden;
+  color: var(--tl-fg-3, #9da39e);
+  font-size: 11px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+}
+
+#codex-overleaf-panel .codex-update-notice-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+#codex-overleaf-panel .codex-update-notice-actions button {
+  width: auto;
+  min-width: 58px;
+  margin: 0;
+  padding: 5px 8px;
+  border: 1px solid var(--tl-border-strong, #414844);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--tl-fg-2, #d5dad6);
+  font-size: 10.5px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+#codex-overleaf-panel .codex-update-notice-actions button.is-primary {
+  border-color: #4a91d7;
+  background: #3578bd;
+  color: #fff;
+}
+
+#codex-overleaf-panel .codex-update-notice-actions button:focus-visible {
+  outline: 2px solid #79b8f2;
+  outline-offset: 2px;
+}
+
+#codex-overleaf-panel .codex-update-notice-progress {
+  position: relative;
+  height: 3px;
+  margin-top: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #2c312e;
+}
+
+#codex-overleaf-panel .codex-update-notice-progress > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: #4f9ee8;
+  transition: width 250ms ease;
+}
+
+#codex-overleaf-panel .codex-update-notice-progress.is-indeterminate > span {
+  width: 42% !important;
+  animation: codex-update-notice-progress 1.25s ease-in-out infinite;
+}
+
+#codex-overleaf-panel .codex-update-notice[data-state="waiting_for_idle"] {
+  background:
+    linear-gradient(100deg, rgba(199, 160, 83, 0.13), transparent 58%),
+    var(--tl-surface-1, #181a19);
+}
+
+#codex-overleaf-panel .codex-update-notice[data-state="waiting_for_idle"] .codex-update-notice-eyebrow {
+  color: #d4b86f;
+}
+
+#codex-overleaf-panel .codex-update-notice[data-state="committed"] .codex-update-notice-eyebrow {
+  color: var(--tl-ok, #7fd58a);
+}
+
+#codex-overleaf-panel .codex-update-notice[data-state="failed"],
+#codex-overleaf-panel .codex-update-notice[data-state="rolled_back"] {
+  background:
+    linear-gradient(100deg, rgba(184, 84, 80, 0.12), transparent 58%),
+    var(--tl-surface-1, #181a19);
+}
+
+#codex-overleaf-panel .codex-update-notice[data-state="failed"] .codex-update-notice-eyebrow,
+#codex-overleaf-panel .codex-update-notice[data-state="rolled_back"] .codex-update-notice-eyebrow {
+  color: var(--tl-fail, #d87972);
+}
+
+@keyframes codex-update-notice-progress {
+  0% { transform: translateX(-110%); }
+  100% { transform: translateX(240%); }
+}
+
+@media (max-width: 720px) {
+  #codex-overleaf-panel .codex-update-notice {
+    grid-template-columns: 1fr;
+  }
+
+  #codex-overleaf-panel .codex-update-notice-actions {
+    justify-content: flex-end;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #codex-overleaf-panel .codex-update-notice-progress.is-indeterminate > span {
+    width: 65% !important;
+    animation: none;
+  }
+}