codex-overleaf-link 2.4.1 → 2.5.0

package/extension/src/content/settingsWorkbench.js

@@ -0,0 +1,374 @@
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) module.exports = factory();
+  else root.CodexOverleafModuleRegistry.define('SettingsWorkbench', [], factory);
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  const CATEGORIES = [
+    ['general', 'settingsWorkbenchGeneral', 'appearance'],
+    ['providers', 'settingsWorkbenchModels', 'bolt'],
+    ['context', 'settingsWorkbenchContext', 'database'],
+    ['instructions', 'settingsWorkbenchInstructions', 'pen'],
+    ['protection', 'settingsWorkbenchProtection', 'shield'],
+    ['history', 'settingsWorkbenchHistory', 'history'],
+    ['updates', 'softwareUpdatesTitle', 'software']
+  ];
+  const GROUP_PAGES = {
+    appearance: 'general', 'writing-style': 'general', providers: 'providers', 'context-loading': 'context',
+    experimental: 'context', personalization: 'instructions', protection: 'protection',
+    privacy: 'protection', history: 'history', storage: 'history', updates: 'updates'
+  };
+  const PROJECT_GROUPS = new Set(['writing-style', 'personalization', 'protection', 'privacy', 'experimental', 'history']);
+
+  function mount(instance, options = {}) {
+    const container = instance.container, doc = container.ownerDocument;
+    const panel = container.closest('#codex-overleaf-panel');
+    const settings = container.querySelector('[data-project-settings-panel]');
+    const skills = container.querySelector('.codex-skills-panel');
+    if (!panel || !settings || !doc) return null;
+    const win = doc.defaultView;
+    const t = key => instance.i18n?.tr?.(key) || key;
+    const listeners = [];
+    const listen = (node, name, listener, eventOptions) => {
+      node?.addEventListener(name, listener, eventOptions);
+      listeners.push(() => node?.removeEventListener(name, listener, eventOptions));
+    };
+    const make = (tag, className, key) => {
+      const node = doc.createElement(tag);
+      if (className) node.className = className;
+      if (key) { node.dataset.i18n = key; node.textContent = t(key); }
+      return node;
+    };
+    const button = (className, key) => {
+      const node = make('button', className, key);
+      node.type = 'button';
+      return node;
+    };
+    const originalHead = settings.querySelector('.codex-custom-instructions-head');
+    const closeButton = originalHead?.querySelector('[data-settings-back]')
+      || button('', 'settingsWorkbenchClose');
+    const status = settings.querySelector('[data-project-settings-status]');
+    const dialog = make('dialog', 'codex-settings-workbench');
+    dialog.setAttribute('aria-labelledby', 'codex-settings-workbench-title');
+    const header = make('header', 'codex-wb-header');
+    const heading = make('div', 'codex-wb-heading');
+    const title = make('h2', '', 'settingsWorkbenchTitle');
+    title.id = 'codex-settings-workbench-title';
+    heading.append(title, make('p', '', 'settingsWorkbenchSubtitle'));
+    closeButton.classList.add('codex-wb-close');
+    closeButton.textContent = '\u00d7';
+    header.append(heading, closeButton);
+    originalHead?.remove();
+
+    const layout = make('div', 'codex-wb-layout');
+    const sidebar = make('aside', 'codex-wb-sidebar');
+    const filters = make('div', 'codex-wb-filters');
+    filters.setAttribute('role', 'group');
+    const allFilter = button('', 'settingsWorkbenchAll');
+    const projectFilter = button('', 'settingsScopeProjectTitle');
+    filters.append(allFilter, projectFilter);
+    const nav = make('nav', 'codex-wb-nav');
+    nav.setAttribute('role', 'tablist');
+    nav.setAttribute('aria-orientation', 'vertical');
+    const brand = make('div', 'codex-wb-brand');
+    brand.textContent = 'Codex Overleaf Link';
+    sidebar.append(filters, nav, brand);
+    const main = make('div', 'codex-wb-main');
+    const body = make('div', 'codex-wb-body');
+    const footer = make('footer', 'codex-wb-footer');
+    if (status) { status.setAttribute('aria-live', 'polite'); footer.append(status); }
+    main.append(body, footer);
+    layout.append(sidebar, main);
+    dialog.append(header, layout);
+    const pages = new Map(), navButtons = new Map(), groups = [];
+    let active = 'general', filter = 'all', returnFocus = null, destroyed = false;
+    let providerRequested = false, providerCloseGuard = null, closing = null;
+
+    for (const [id, key, icon] of CATEGORIES) {
+      const page = make('section', 'codex-wb-page');
+      page.id = 'codex-settings-page-' + id;
+      page.dataset.workbenchPage = id;
+      page.setAttribute('role', 'tabpanel');
+      page.setAttribute('aria-labelledby', 'codex-settings-nav-' + id);
+      page.hidden = true;
+      page.append(make('h3', 'codex-wb-page-title', key));
+      pages.set(id, page);
+      const tab = button('codex-wb-nav-button');
+      tab.id = 'codex-settings-nav-' + id;
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-controls', page.id);
+      if (options.icon) {
+        const glyph = make('span', 'codex-wb-nav-icon');
+        glyph.innerHTML = options.icon(icon); // Static, repository-owned icon paths only.
+        tab.append(glyph);
+      }
+      tab.append(make('span', '', key));
+      listen(tab, 'click', () => select(id));
+      nav.append(tab);
+      navButtons.set(id, tab);
+    }
+    function addGroup(node, category, projectOnly) {
+      node.hidden = true;
+      node.dataset.workbenchScope = projectOnly ? 'project' : 'global';
+      const summary = node.querySelector('summary');
+      const badge = make('span', 'codex-wb-scope-label',
+        projectOnly ? 'settingsScopeProjectTitle' : 'settingsScopeGlobalTitle');
+      (summary || node).append(badge);
+      pages.get(category).append(node);
+      groups.push({ node, category, projectOnly, expanded: true });
+    }
+    // Move existing controls rather than copying them. Their listeners, unsaved
+    // values, identity, validation and persistence callbacks remain attached.
+    for (const group of Array.from(settings.querySelectorAll('[data-set-group]'))) {
+      const key = group.dataset.setGroup;
+      const originalScope = group.closest('.codex-project-settings-scope');
+      const projectOnly = PROJECT_GROUPS.has(key)
+        || (!GROUP_PAGES[key] && originalScope && !originalScope.classList.contains('codex-project-settings-scope--global'));
+      addGroup(group, GROUP_PAGES[key] || 'instructions', Boolean(projectOnly));
+    }
+    // Preserve non-card controls, including the legacy skill-loading entry.
+    // Scope headings are replaced by labels on the actual groups.
+    for (const scope of Array.from(settings.querySelectorAll('.codex-project-settings-scope'))) {
+      scope.querySelectorAll('.codex-project-settings-scope-title').forEach(node => node.remove());
+      if (scope.children.length) {
+        addGroup(scope, 'instructions', !scope.classList.contains('codex-project-settings-scope--global'));
+      } else scope.remove();
+    }
+    for (const node of Array.from(settings.children)) {
+      if (node === status) continue;
+      addGroup(node, 'instructions', false);
+    }
+    const providerHost = make('div', 'codex-wb-provider-host');
+    providerHost.dataset.providerSettingsHost = '';
+    pages.get('providers').append(providerHost);
+    settings.append(...pages.values());
+    body.append(settings);
+    if (skills) {
+      const back = skills.querySelector('[data-skills-back]');
+      if (back) back.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9.5 4-4 4 4 4"/></svg>';
+      const masterRow = skills.querySelector('[data-load-codex-overleaf-skills]')?.closest('label');
+      const masterTitle = masterRow?.querySelector('.codex-project-settings-row-label');
+      if (masterRow && masterTitle) {
+        if (masterRow.parentElement !== skills) {
+          masterRow.parentElement.classList.remove('codex-set-card');
+          masterRow.parentElement.classList.add('codex-wb-skills-master');
+        }
+        masterRow.classList.add('codex-wb-skills-master-row');
+        masterTitle.dataset.i18n = 'settingsWorkbenchEnableSkills';
+        masterTitle.classList.add('codex-wb-skills-caption');
+        const copy = make('div', 'codex-wb-skills-master-copy');
+        masterTitle.before(copy);
+        copy.append(masterTitle, make('p', 'codex-wb-skills-help codex-wb-skills-caption', 'settingsWorkbenchSkillsHelp'));
+      }
+      skills.querySelector('[data-local-skill-list]')?.before(
+        make('div', 'codex-wb-skills-list-title codex-wb-skills-caption', 'settingsWorkbenchSkillsList')
+      );
+      body.append(skills);
+    }
+    container.append(dialog);
+    panel.dataset.settingsWorkbench = 'true';
+
+    const themeSelect = settings.querySelector('[data-theme-select]');
+    let themeChoices = null;
+    if (themeSelect) {
+      const row = themeSelect.closest('label') || themeSelect;
+      themeSelect.hidden = true;
+      themeChoices = make('div', 'codex-wb-themes');
+      themeChoices.setAttribute('role', 'radiogroup');
+      for (const [value, key] of [['light', 'themeLight'], ['dark', 'themeDark'], ['auto', 'themeAuto']]) {
+        const choice = button('codex-wb-theme-choice');
+        choice.dataset.themeChoice = value;
+        choice.setAttribute('role', 'radio');
+        const preview = make('span', 'codex-wb-theme-preview');
+        preview.dataset.previewTheme = value;
+        preview.setAttribute('aria-hidden', 'true');
+        const lines = make('span', 'codex-wb-theme-lines');
+        lines.append(make('b'), make('b'), make('b'));
+        preview.append(lines);
+        choice.append(preview, make('span', 'codex-wb-theme-caption', key));
+        listen(choice, 'click', () => {
+          themeSelect.value = value;
+          themeSelect.dispatchEvent(new win.Event('input', { bubbles: true }));
+          themeSelect.dispatchEvent(new win.Event('change', { bubbles: true }));
+          updateThemes();
+        });
+        themeChoices.append(choice);
+      }
+      row.after(themeChoices);
+      listen(themeChoices, 'keydown', event => {
+        const choices = Array.from(themeChoices.querySelectorAll('button'));
+        const index = choices.indexOf(event.target);
+        if (index < 0 || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+        event.preventDefault(); event.stopPropagation();
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? choices.length - 1
+          : (index + (event.key === 'ArrowLeft' ? -1 : 1) + choices.length) % choices.length;
+        choices[next].click(); choices[next].focus();
+      });
+    }
+    function updateThemes() {
+      themeChoices?.setAttribute('aria-label', t('themeLabel'));
+      for (const choice of themeChoices?.querySelectorAll('button') || []) {
+        const selected = choice.dataset.themeChoice === themeSelect.value;
+        choice.setAttribute('aria-checked', String(selected));
+        choice.tabIndex = selected ? 0 : -1;
+      }
+    }
+    function hasProject() {
+      return panel.dataset.settingsScope !== 'account'
+        && /^\/project\/[^/]+/.test(win?.location?.pathname || '');
+    }
+    function available(item) {
+      return (!item.projectOnly || hasProject()) && (filter !== 'project' || item.projectOnly);
+    }
+    function refresh() {
+      if (destroyed) return;
+      if (!hasProject()) filter = 'all';
+      if (panel.dataset.view === 'skills') { active = 'instructions'; filter = 'all'; }
+      const availablePages = new Set(groups.filter(available).map(item => item.category));
+      if (!availablePages.has(active)) active = CATEGORIES.find(([id]) => availablePages.has(id))?.[0] || 'general';
+      for (const node of dialog.querySelectorAll('[data-i18n]')) {
+        // Existing controls use their established translation pass; update the
+        // newly owned chrome only, without replacing controls or skill rows.
+        if (node.closest('.codex-wb-header, .codex-wb-nav, .codex-wb-filters, .codex-wb-footer')
+          || node.classList.contains('codex-wb-page-title')
+          || node.classList.contains('codex-wb-scope-label')
+          || node.classList.contains('codex-wb-theme-caption')
+          || node.classList.contains('codex-wb-skills-caption')) node.textContent = t(node.dataset.i18n);
+      }
+      projectFilter.disabled = !hasProject();
+      projectFilter.title = hasProject() ? t('settingsWorkbenchProjectFilter') : t('settingsWorkbenchOpenProject');
+      filters.setAttribute('aria-label', t('settingsWorkbenchFilter'));
+      nav.setAttribute('aria-label', t('settingsWorkbenchCategories'));
+      allFilter.setAttribute('aria-pressed', String(filter === 'all'));
+      projectFilter.setAttribute('aria-pressed', String(filter === 'project'));
+      closeButton.title = t('settingsWorkbenchClose');
+      closeButton.setAttribute('aria-label', t('settingsWorkbenchClose'));
+      for (const [id, tab] of navButtons) {
+        tab.hidden = !availablePages.has(id);
+        tab.setAttribute('aria-selected', String(id === active));
+        tab.tabIndex = id === active ? 0 : -1;
+        pages.get(id).hidden = id !== active;
+      }
+      for (const item of groups) {
+        const visible = available(item) && item.category === active && panel.dataset.view !== 'skills';
+        if (item.node.tagName === 'DETAILS' && item.node.hidden !== !visible) {
+          if (!visible) item.expanded = item.node.open;
+          item.node.open = visible && item.expanded;
+        }
+        item.node.hidden = !visible;
+      }
+      updateThemes();
+    }
+    function requestProviders() {
+      if (active !== 'providers' || providerRequested || typeof instance.callbacks.onProvidersOpen !== 'function') return;
+      providerRequested = true;
+      const failed = error => {
+        providerRequested = false;
+        if (status && !destroyed) {
+          status.textContent = error?.message || t('settingsWorkbenchProviderOpenFailed');
+          status.dataset.status = 'failed';
+        }
+      };
+      try { Promise.resolve(instance.callbacks.onProvidersOpen()).catch(failed); }
+      catch (error) { failed(error); }
+    }
+    function revealProviders() {
+      active = 'providers';
+      filter = 'all';
+      providerRequested = true;
+      pages.get('providers').dataset.providerEmbedded = 'true';
+      panel.dataset.view = 'settings';
+      refresh();
+      return providerHost;
+    }
+    function requestClose() {
+      if (closing) return closing;
+      closing = (async () => {
+        if (providerCloseGuard && !await providerCloseGuard()) return;
+        if (!destroyed) instance.callbacks.onBack?.();
+      })().catch(error => {
+        if (status && !destroyed) {
+          status.textContent = error?.message || t('settingsWorkbenchProviderOpenFailed');
+          status.dataset.status = 'failed';
+        }
+      }).finally(() => { closing = null; });
+      return closing;
+    }
+    function select(id) {
+      active = id;
+      if (panel.dataset.view === 'skills') instance.callbacks.onSkillsBack?.();
+      refresh();
+      body.scrollTop = 0;
+      if (dialog.open) requestProviders();
+    }
+    function show() {
+      if (destroyed) return;
+      refresh();
+      if (!dialog.open) {
+        returnFocus = doc.activeElement;
+        dialog.showModal();
+        panel.dataset.settingsWorkbenchOpen = 'true';
+        navButtons.get(active)?.focus();
+      }
+      requestProviders();
+    }
+    function hide() {
+      providerRequested = false;
+      if (!dialog.open) return;
+      if (dialog.contains(doc.activeElement)) doc.activeElement?.blur?.();
+      dialog.close();
+      delete panel.dataset.settingsWorkbenchOpen;
+      if (returnFocus?.isConnected) returnFocus.focus?.();
+    }
+    const syncView = () => {
+      refresh();
+      if (['settings', 'skills'].includes(panel.dataset.view)) show();
+      else hide();
+    };
+    listen(allFilter, 'click', () => { filter = 'all'; refresh(); });
+    listen(projectFilter, 'click', () => {
+      filter = 'project';
+      if (panel.dataset.view === 'skills') instance.callbacks.onSkillsBack?.();
+      refresh();
+      body.scrollTop = 0;
+    });
+    listen(nav, 'keydown', event => {
+      if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;
+      const tabs = Array.from(navButtons.values()).filter(tab => !tab.hidden);
+      const index = tabs.indexOf(event.target);
+      if (index < 0) return;
+      event.preventDefault(); event.stopPropagation();
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1
+        : (index + (event.key === 'ArrowUp' ? -1 : 1) + tabs.length) % tabs.length;
+      tabs[next].click(); tabs[next].focus();
+    });
+    listen(closeButton, 'click', event => {
+      if (!providerCloseGuard) return;
+      event.preventDefault(); event.stopImmediatePropagation();
+      void requestClose();
+    }, true);
+    listen(dialog, 'cancel', event => {
+      // File-input cancel events bubble; only this dialog's own cancel closes it.
+      if (event.target !== dialog) return;
+      event.preventDefault(); event.stopPropagation();
+      void requestClose();
+    });
+    listen(dialog, 'change', refresh);
+    const observer = new win.MutationObserver(syncView);
+    observer.observe(panel, { attributes: true, attributeFilter: ['data-view', 'data-settings-scope', 'data-theme'] });
+    refresh();
+    return {
+      show, hide, refresh, revealProviders,
+      setProviderCloseGuard(guard) { providerCloseGuard = guard; },
+      destroy() {
+        destroyed = true;
+        observer.disconnect();
+        listeners.splice(0).forEach(dispose => dispose());
+        hide();
+        dialog.remove();
+        delete panel.dataset.settingsWorkbench;
+      }
+    };
+  }
+  return { mount };
+});

package/extension/src/content/sharedSessionViewSync.js

@@ -0,0 +1,72 @@
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) module.exports = factory();
+  else root.CodexOverleafModuleRegistry.define('SharedSessionViewSync', [], factory);
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  function install(options) {
+    const { Bridge, StorageDb, getScope, getState, isBusy, apply, notice } = options;
+    let saving = 0, version = 0, pending = false, timer = null, refreshing = false, stopped = false;
+    const sameScope = (a, b) => a.accountScopeId === b.accountScopeId
+      && a.projectId === b.projectId && a.generation === b.generation;
+    const signature = state => JSON.stringify([state.activeSessionId,
+      (state.sessions || []).map(session => [session.id, session.updatedAt, session.task])]);
+    function schedule(delay = 250) {
+      if (stopped || timer || !pending) return;
+      timer = setTimeout(() => { timer = null; void refresh(); }, delay);
+    }
+    async function refresh() {
+      if (refreshing || stopped || !pending) return;
+      const scope = getScope();
+      if (!scope.projectId || !scope.accountScopeId) { pending = false; return; }
+      if (saving || isBusy()) { schedule(1000); return; }
+      const local = getState();
+      // A draft or a not-yet-persisted edit always takes priority over passive
+      // history refresh. It remains on screen until the user saves/sends it.
+      if (local.task || (local.sessions || []).some(session => StorageDb.hasUnpersistedSharedSession(session))) {
+        schedule(1500); return;
+      }
+      const capturedVersion = version, capturedSignature = signature(local);
+      pending = false; refreshing = true;
+      try {
+        const records = await StorageDb.readSharedProjectSnapshot(scope.projectId);
+        if (!sameScope(scope, getScope())) return;
+        if (saving || isBusy() || version !== capturedVersion || signature(getState()) !== capturedSignature) {
+          pending = true; return;
+        }
+        const ids = new Set(records.map(record => record.id));
+        const newLocal = (local.sessions || []).filter(session =>
+          !ids.has(session.id) && !StorageDb.wasSharedSessionStored(session.id));
+        // The data has now been adopted by this view; future writes may use it
+        // as a merge baseline. Snapshot reads alone never advance the baseline.
+        StorageDb.adoptSharedSessionBaseline(records);
+        apply([...records, ...newLocal]);
+      } catch (error) {
+        notice?.(error);
+      } finally {
+        refreshing = false;
+        schedule(1000);
+      }
+    }
+    const unsubscribe = Bridge.subscribe(change => {
+      const scope = getScope();
+      if (!change.projectId || change.projectId === scope.projectId) {
+        pending = true; schedule();
+      }
+    });
+    return {
+      beginSave() {
+        saving += 1; version += 1;
+        let ended = false;
+        return () => {
+          if (ended) return;
+          ended = true; saving -= 1; version += 1; schedule();
+        };
+      },
+      dispose() {
+        stopped = true; clearTimeout(timer); unsubscribe();
+      }
+    };
+  }
+  return { install };
+});

package/extension/src/content/subagentActivityView.js

@@ -0,0 +1,195 @@
+(function initSubagentActivityView(root, factory) {
+  root.CodexOverleafModuleRegistry.define('SubagentActivityView', ['SubagentActivityModel', 'RunActivityModel'], factory);
+})(typeof globalThis !== 'undefined' ? globalThis : window, function subagentActivityViewFactory(Agents, Activity) {
+  'use strict';
+  function create(deps) {
+    const { tx, getPanel, plain, make, icon, formatElapsed, renderBlocks } = deps;
+    let viewer = null;
+    function statusLabel(status) {
+      return ({ pending: tx('Starting', '启动中'), running: tx('Running', '运行中'),
+        completed: tx('Completed', '已完成'), failed: tx('Failed', '失败'),
+        cancelled: tx('Stopped', '已停止'), unknown: tx('Status unconfirmed', '状态未确认') })[status] || '';
+    }
+    function latest(agent) {
+      const blocks = Activity.project({ status: agent.status, events: agent.events || [] }).blocks;
+      const last = blocks.at(-1);
+      const item = last?.kind === 'exploreGroup' ? last.items.at(-1) : last;
+      return plain(item?.meta?.target || item?.meta?.command || item?.event?.title || agent.task).slice(0, 180);
+    }
+    function elapsed(agent, run) {
+      const duration = Agents.elapsedMs(agent, run, Date.now());
+      return duration === null ? '' : formatElapsed(duration);
+    }
+    function close() {
+      if (!viewer) return;
+      const previous = viewer; viewer = null;
+      previous.shell.remove();
+      for (const [node, inert] of previous.inert) if (node.isConnected) node.inert = inert;
+      if (previous.log?.isConnected) previous.log.scrollTop = previous.parentScroll;
+      if (previous.trigger?.isConnected) previous.trigger.focus({ preventScroll: true });
+    }
+    function open(card, key, trigger) {
+      const agent = card.run.subagents?.find(item => item.key === key);
+      const panel = getPanel();
+      if (!agent || !panel) return;
+      if (viewer?.card.id === card.id) {
+        viewer.scrolls.set(viewer.key, viewer.body.scrollTop);
+        viewer.key = key; viewer.rows.clear(); viewer.events.replaceChildren(); renderViewer(card); return;
+      }
+      close();
+      const shell = make('section', 'codex-subagent-view');
+      shell.setAttribute('role', 'region');
+      shell.setAttribute('aria-label', tx('Subagent conversation', '子代理对话'));
+      const header = make('header', 'codex-subagent-view-head');
+      const back = make('button', 'codex-subagent-back');
+      back.type = 'button'; back.textContent = tx('Back to main task', '返回主任务');
+      back.addEventListener('click', close);
+      const readonly = make('span', 'codex-subagent-readonly'); readonly.textContent = tx('Read only', '只读');
+      header.append(back, readonly);
+      const parent = make('div', 'codex-subagent-parent');
+      const parentLabel = make('span', 'codex-subagent-parent-label');
+      const parentCount = make('span', 'codex-subagent-parent-count');
+      parent.append(parentLabel, parentCount);
+      const siblings = make('nav', 'codex-subagent-siblings'); siblings.setAttribute('aria-label', tx('Subagents', '子代理'));
+      const body = make('div', 'codex-subagent-body');
+      const title = make('h3', 'codex-subagent-title');
+      const meta = make('div', 'codex-subagent-meta');
+      const assignment = make('details', 'codex-subagent-assignment');
+      const assignmentLabel = make('summary', ''); assignmentLabel.textContent = tx('Assigned task', '派遣任务');
+      const prompt = make('p', ''); assignment.append(assignmentLabel, prompt);
+      const events = make('div', 'run-workflow-list');
+      events.dataset.expanded = 'true';
+      const empty = make('p', 'codex-subagent-empty');
+      const limit = make('p', 'codex-subagent-history-note');
+      const bottom = make('button', 'codex-subagent-latest'); bottom.type = 'button';
+      bottom.textContent = tx('Latest activity', '最新活动'); bottom.hidden = true;
+      bottom.addEventListener('click', () => { body.scrollTop = body.scrollHeight; });
+      body.append(title, meta, assignment, events, empty, limit);
+      const footer = make('footer', 'codex-subagent-footer');
+      footer.textContent = tx('Continue the conversation in the main task.', '后续对话在主任务中继续。');
+      shell.append(header, parent, siblings, body, bottom, footer);
+      const log = panel.querySelector('[data-log]');
+      const inert = Array.from(panel.children).map(node => [node, node.inert]);
+      for (const [node] of inert) node.inert = true;
+      panel.append(shell);
+      viewer = { shell, card, key, trigger, log, parentScroll: log?.scrollTop || 0, inert,
+        title, meta, assignment, prompt, parentLabel, parentCount, siblings, body, events, empty, limit, bottom,
+        rows: new Map(), siblingRows: new Map(), scrolls: new Map(), renderedKey: '' };
+      body.addEventListener('scroll', () => {
+        if (viewer?.shell === shell) bottom.hidden = body.scrollHeight - body.scrollTop - body.clientHeight < 70;
+      }, { passive: true });
+      shell.addEventListener('keydown', event => { if (event.key === 'Escape') { event.stopPropagation(); close(); } });
+      renderViewer(card); back.focus({ preventScroll: true });
+    }
+    function mount(card) {
+      const el = make('section', 'run-subagents');
+      const heading = make('div', 'run-subagents-heading');
+      const label = make('span', ''); label.textContent = tx('Subagents', '子代理');
+      const count = make('span', 'run-subagents-count'); count.setAttribute('aria-live', 'polite');
+      heading.append(icon('agent'), label, count);
+      const rows = make('div', 'run-subagents-rows'); el.append(heading, rows);
+      card.events.before(el);
+      card.subagentGroup = { el, count, rows, cache: new Map() };
+    }
+    function update(card) {
+      if (!card.subagentGroup) mount(card);
+      const agents = card.run.subagents || [], group = card.subagentGroup;
+      group.el.hidden = agents.length === 0;
+      const running = agents.filter(agent => ['pending', 'running'].includes(Agents.effectiveStatus(agent, card.run))).length;
+      const completed = agents.filter(agent => Agents.effectiveStatus(agent, card.run) === 'completed').length;
+      const failed = agents.filter(agent => Agents.effectiveStatus(agent, card.run) === 'failed').length;
+      group.count.textContent = [
+        running ? tx(running + ' active', running + ' 进行中') : '',
+        completed ? tx(completed + ' completed', completed + ' 已完成') : '',
+        failed ? tx(failed + ' failed', failed + ' 失败') : ''
+      ].filter(Boolean).join(' · ') || tx(agents.length + ' recorded', agents.length + ' 项记录');
+      const keep = new Set();
+      for (const agent of agents) {
+        keep.add(agent.key);
+        let row = group.cache.get(agent.key);
+        if (!row) {
+          const el = make('button', 'run-subagent-row'); el.type = 'button';
+          const mark = icon('agent'), copy = make('span', 'run-subagent-copy');
+          const name = make('span', 'run-subagent-name'), activity = make('span', 'run-subagent-activity');
+          copy.append(name, activity);
+          const tail = make('span', 'run-subagent-tail'), status = make('span', ''), time = make('span', 'run-subagent-time');
+          tail.append(status, time);
+          el.append(mark, copy, tail);
+          el.addEventListener('click', () => open(card, agent.key, el));
+          row = { el, name, activity, status, time }; group.cache.set(agent.key, row); group.rows.append(el);
+        }
+        const status = Agents.effectiveStatus(agent, card.run);
+        row.el.dataset.state = status;
+        row.name.textContent = plain(agent.title || agent.jobId || agent.threadId);
+        row.activity.textContent = latest(agent) || statusLabel(status);
+        row.activity.title = row.activity.textContent;
+        row.status.textContent = statusLabel(status); row.time.textContent = elapsed(agent, card.run);
+        row.el.setAttribute('aria-label', row.name.textContent + ', ' + statusLabel(status) + ', ' + tx('Open conversation', '查看子对话'));
+      }
+      for (const [key, row] of group.cache) if (!keep.has(key)) { row.el.remove(); group.cache.delete(key); }
+      if (viewer?.card.id === card.id) renderViewer(card);
+    }
+    function renderViewer(card) {
+      try {
+        renderViewerContent(card);
+        if (viewer) viewer.renderError = false;
+      } catch (error) {
+        // A read-only child view must not interrupt the parent event or settlement path.
+        if (!viewer) return;
+        if (!viewer.renderError) console.warn('[codex-overleaf] Child conversation render failed:', plain(error?.message));
+        viewer.renderError = true;
+        viewer.rows.clear(); viewer.events.replaceChildren();
+        viewer.empty.hidden = false;
+        viewer.empty.textContent = tx('Unable to display this subagent conversation. Return to the main task and reopen it.',
+          '暂时无法显示子代理对话，请返回主任务后重新打开。');
+      }
+    }
+    function renderViewerContent(card) {
+      if (!viewer || !viewer.shell.isConnected) { if (viewer) close(); return; }
+      const agent = card.run.subagents?.find(item => item.key === viewer.key);
+      if (!agent) { close(); return; }
+      viewer.card = card;
+      const switched = viewer.renderedKey !== agent.key;
+      const follow = !switched && viewer.body.scrollHeight - viewer.body.scrollTop - viewer.body.clientHeight < 70;
+      const childStatus = Agents.effectiveStatus(agent, card.run);
+      viewer.title.textContent = plain(agent.title || agent.jobId || agent.threadId);
+      viewer.meta.textContent = [statusLabel(childStatus), elapsed(agent, card.run), agent.model, agent.reasoningEffort].filter(Boolean).join(' · ');
+      viewer.prompt.textContent = plain(agent.task);
+      viewer.assignment.hidden = !viewer.prompt.textContent;
+      const parent = Activity.project(card.run), last = parent.blocks.at(-1);
+      const lastItem = last?.kind === 'exploreGroup' ? last.items.at(-1) : last;
+      const parentWork = plain(lastItem?.meta?.target || lastItem?.meta?.command || lastItem?.event?.title).slice(0, 150);
+      viewer.parentLabel.textContent = tx('Main agent · ', '主 agent · ') + (card.run.status === 'running'
+        ? parentWork || tx('Working', '处理中') : tx('Run ended', '本轮已结束'));
+      const running = (card.run.subagents || []).filter(item => ['pending', 'running'].includes(Agents.effectiveStatus(item, card.run))).length;
+      viewer.parentCount.textContent = tx(running + ' subagents active', running + ' 个子任务进行中');
+      for (const sibling of card.run.subagents || []) {
+        let button = viewer.siblingRows.get(sibling.key);
+        if (!button) {
+          button = make('button', 'codex-subagent-sibling'); button.type = 'button';
+          button.addEventListener('click', () => open(viewer.card, sibling.key, viewer.trigger));
+          viewer.siblingRows.set(sibling.key, button); viewer.siblings.append(button);
+        }
+        button.textContent = plain(sibling.title || sibling.jobId || sibling.threadId);
+        button.setAttribute('aria-pressed', String(sibling.key === agent.key));
+        button.title = statusLabel(Agents.effectiveStatus(sibling, card.run));
+      }
+      const childRun = { id: card.id + ':' + agent.key, status: ['pending', 'running'].includes(childStatus) ? 'running' : childStatus,
+        events: agent.events || [], mode: 'ask' };
+      const result = Activity.project(childRun);
+      const childCard = { id: childRun.id, projection: result };
+      renderBlocks(viewer.events, result.blocks, viewer.rows, childCard, childRun);
+      viewer.empty.hidden = result.blocks.length > 0;
+      viewer.empty.textContent = agent.historyUnavailable
+        ? tx('This runtime could not read the child history. Recorded updates remain available.', '当前运行端无法读取子会话历史，已记录的活动仍会保留。')
+        : tx('Waiting for recorded activity from this subagent.', '等待该子代理的活动记录。');
+      viewer.limit.hidden = !agent.clipped;
+      viewer.limit.textContent = tx('Older details were trimmed to keep history bounded.', '较早的详细记录已按历史容量上限裁剪。');
+      if (switched) viewer.body.scrollTop = viewer.scrolls.get(agent.key) || 0;
+      else if (follow) viewer.body.scrollTop = viewer.body.scrollHeight;
+      viewer.renderedKey = agent.key;
+    }
+    return { update, close, isOpen: () => Boolean(viewer?.shell.isConnected) };
+  }
+  return { create };
+});