codex-overleaf-link 2.5.1 → 2.6.5

package/extension/src/content/settingsPanel.js

@@ -9,8 +9,10 @@
 
   function codexIcon(name) {
     const icons = {
+      archive: '<rect x="2.5" y="3" width="11" height="3.2" rx=".8"/><path d="M3.5 6.2v6.3a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V6.2"/><path d="M6.5 9h3"/>',
       appearance: '<path d="M8 2.2v1.1"/><path d="M8 12.7v1.1"/><path d="M2.2 8h1.1"/><path d="M12.7 8h1.1"/><path d="m3.9 3.9.8.8"/><path d="m11.3 11.3.8.8"/><path d="m12.1 3.9-.8.8"/><path d="m4.7 11.3-.8.8"/><circle cx="8" cy="8" r="2.4"/>',
       bolt: '<path d="M8.9 1.8 3.8 8.8h3.3l-.5 5.4 5.5-7.5H8.8z"/>',
+      close: '<path d="m4.6 4.6 6.8 6.8M11.4 4.6l-6.8 6.8"/>',
       database: '<ellipse cx="8" cy="4" rx="4.5" ry="1.9"/><path d="M3.5 4v4c0 1 2 1.9 4.5 1.9s4.5-.9 4.5-1.9V4"/><path d="M3.5 8v4c0 1 2 1.9 4.5 1.9s4.5-.9 4.5-1.9V8"/>',
       flask: '<path d="M6 2.5h4"/><path d="M7 2.5v4.1l-3.4 5.3A1.4 1.4 0 0 0 4.8 14h6.4a1.4 1.4 0 0 0 1.2-2.1L9 6.6V2.5"/><path d="M5.3 10.5h5.4"/>',
       history: '<path d="M4.2 3.4h7.6"/><path d="M4.2 8h7.6"/><path d="M4.2 12.6h4.6"/><path d="M2.2 3.4h.1"/><path d="M2.2 8h.1"/><path d="M2.2 12.6h.1"/>',
@@ -36,7 +38,9 @@
       container,
       callbacks: options.callbacks || {},
       i18n: options.i18n || null,
-      button: options.button || null
+      button: options.button || null,
+      // Names the open project in project-page scope lines; may return ''.
+      getProjectName: typeof options.getProjectName === 'function' ? options.getProjectName : null
     };
 
     container.innerHTML = `
@@ -211,6 +215,7 @@
                 <p class="codex-set-row-help" data-update-settings-summary data-i18n="softwareUpdatesHelp">Automatically checks signed stable releases for the Extension and Native Host.</p>
                 <p class="codex-set-note" data-update-settings-state aria-live="polite" hidden></p>
                 <button type="button" class="codex-set-btn" data-check-updates data-i18n="checkForUpdates">Check for updates</button>
+                <button type="button" class="codex-set-btn" data-restore-previous-version hidden>Restore previous version</button>
               </div>
             </div>
           </details>
@@ -334,6 +339,7 @@
         return host || null;
       },
       setProviderCloseGuard: guard => instance.workbench?.setProviderCloseGuard(guard),
+      revealGroup: key => instance.workbench?.revealGroup(key) || null,
       loadState: state => loadState(instance, state),
       readState: () => readState(instance),
       setStatus: (text, status) => setStatus(instance, text, status),
@@ -464,7 +470,9 @@
     };
   }
 
-  function setStatus(target, text, status = 'info') {
+  // options.page names the workbench page a message belongs to; the workbench
+  // shows it only while that page is active. Untagged messages show everywhere.
+  function setStatus(target, text, status = 'info', options = {}) {
     const instance = target?._instance || target;
     const element = instance?.container?.querySelector('[data-project-settings-status]');
     if (!element) {
@@ -472,6 +480,9 @@
     }
     element.textContent = text || '';
     element.dataset.status = status;
+    if (options.page) element.dataset.statusPage = options.page;
+    else delete element.dataset.statusPage;
+    instance.workbench?.refresh();
   }
 
   function clearStatus(target) {
@@ -482,6 +493,8 @@
     }
     element.textContent = '';
     delete element.dataset.status;
+    delete element.dataset.statusPage;
+    instance.workbench?.refresh();
   }
 
   function setSkillsSummary(target, text) {

package/extension/src/content/settingsWorkbench.js

@@ -4,21 +4,32 @@
 })(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']
+  // The sidebar is split by scope; a page's section decides whether its groups
+  // need an open project. Pages: [id, label key, icon].
+  const SECTIONS = [
+    ['project', 'settingsScopeProjectTitle', [
+      ['writing', 'settingsWorkbenchWriting', 'pen'],
+      ['protection', 'settingsWorkbenchProtection', 'shield'],
+      ['cache', 'otSettingsTitle', 'flask'],
+      ['history', 'settingsWorkbenchChanges', 'history']
+    ]],
+    ['global', 'settingsScopeGlobalTitle', [
+      ['appearance', 'appearanceTitle', 'appearance'],
+      ['providers', 'settingsWorkbenchModels', 'bolt'],
+      ['context', 'settingsWorkbenchContextSkills', 'database'],
+      ['storage', 'storageTitle', 'archive'],
+      ['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'
+    'writing-style': 'writing', personalization: 'writing', protection: 'protection', privacy: 'protection',
+    experimental: 'cache', history: 'history', appearance: 'appearance', providers: 'providers',
+    'context-loading': 'context', skills: 'context', storage: 'storage', updates: 'updates'
   };
-  const PROJECT_GROUPS = new Set(['writing-style', 'personalization', 'protection', 'privacy', 'experimental', 'history']);
+  // Groups without a mapping keep their original scope.
+  const FALLBACK_PAGES = { project: 'writing', global: 'context' };
+  // The skills list opens in place of the page that holds the Skills group.
+  const SKILLS_PAGE = 'context';
 
   function mount(instance, options = {}) {
     const container = instance.container, doc = container.ownerDocument;
@@ -50,93 +61,94 @@
     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');
+    const title = make('h2', 'codex-wb-title', '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);
+    if (options.icon) closeButton.innerHTML = options.icon('close'); // Static, repository-owned icon path.
+    else closeButton.textContent = '\u00d7';
     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);
+    sidebar.append(title, nav);
     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;
+    // The close button floats over the content's top-right corner.
+    dialog.append(layout, closeButton);
+    const pages = new Map(), navButtons = new Map(), pageScopes = new Map(), sectionLabels = new Map(), groups = [];
+    let active = 'writing', 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);
+    for (const [scope, sectionKey, items] of SECTIONS) {
+      // Visual section heading; each tab references it as its description.
+      const label = make('div', 'codex-wb-nav-section', sectionKey);
+      label.id = 'codex-settings-nav-section-' + scope;
+      label.setAttribute('aria-hidden', 'true');
+      nav.append(label);
+      sectionLabels.set(scope, label);
+      for (const [id, key, icon] of items) {
+        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), make('p', 'codex-wb-page-scope'));
+        pages.set(id, page);
+        pageScopes.set(id, scope);
+        const tab = button('codex-wb-nav-button');
+        tab.id = 'codex-settings-nav-' + id;
+        tab.setAttribute('role', 'tab');
+        tab.setAttribute('aria-controls', page.id);
+        tab.setAttribute('aria-describedby', label.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);
       }
-      tab.append(make('span', '', key));
-      listen(tab, 'click', () => select(id));
-      nav.append(tab);
-      navButtons.set(id, tab);
     }
-    function addGroup(node, category, projectOnly) {
+    function addGroup(node, category) {
+      const projectOnly = pageScopes.get(category) === 'project';
       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);
+      if (summary) {
+        // Groups are plain sections: always open while their page is shown.
+        summary.tabIndex = -1;
+        listen(summary, 'click', event => event.preventDefault());
+      }
       pages.get(category).append(node);
-      groups.push({ node, category, projectOnly, expanded: true });
+      groups.push({ node, category, projectOnly });
     }
+    const fallbackPage = scope => FALLBACK_PAGES[
+      scope && !scope.classList.contains('codex-project-settings-scope--global') ? 'project' : 'global'];
     // 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));
+      addGroup(group, GROUP_PAGES[key] || fallbackPage(group.closest('.codex-project-settings-scope')));
     }
-    // Preserve non-card controls, including the legacy skill-loading entry.
-    // Scope headings are replaced by labels on the actual groups.
+    // Preserve non-card controls. The sidebar sections replace the scope headings.
     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();
+      if (scope.children.length) addGroup(scope, fallbackPage(scope));
+      else scope.remove();
     }
     for (const node of Array.from(settings.children)) {
       if (node === status) continue;
-      addGroup(node, 'instructions', false);
+      addGroup(node, FALLBACK_PAGES.global);
     }
     const providerHost = make('div', 'codex-wb-provider-host');
     providerHost.dataset.providerSettingsHost = '';
@@ -218,29 +230,54 @@
         && /^\/project\/[^/]+/.test(win?.location?.pathname || '');
     }
     function available(item) {
-      return (!item.projectOnly || hasProject()) && (filter !== 'project' || item.projectOnly);
+      return !item.projectOnly || hasProject();
+    }
+    // A page whose only visible group repeats the page title hides that group's
+    // title; the group header keeps only its Saved mark.
+    function refreshSoleSections() {
+      for (const page of pages.values()) {
+        const pageGroups = Array.from(page.querySelectorAll('.codex-set-group'));
+        const visibleGroups = pageGroups.filter(node => !node.hidden);
+        const pageTitle = page.querySelector('.codex-wb-page-title')?.textContent.trim();
+        for (const node of pageGroups) {
+          const groupTitle = node.querySelector('.codex-set-group-head .codex-set-group-title');
+          const sole = visibleGroups.length === 1 && visibleGroups[0] === node
+            && groupTitle && groupTitle.textContent.trim() === pageTitle;
+          if (sole) node.dataset.soleSection = 'true';
+          else delete node.dataset.soleSection;
+        }
+      }
+    }
+    // Each page states its scope once, under its title.
+    function renderPageScope(page, scope, projectName) {
+      const line = page.querySelector('.codex-wb-page-scope');
+      if (!line) return;
+      const text = t(scope === 'project' ? 'settingsPageScopeProject' : 'settingsPageScopeGlobal');
+      if (scope !== 'project' || !projectName) { line.textContent = text; return; }
+      const name = doc.createElement('b');
+      name.textContent = projectName;
+      line.replaceChildren(text + ' \u00b7 ', name);
     }
     function refresh() {
       if (destroyed) return;
-      if (!hasProject()) filter = 'all';
-      if (panel.dataset.view === 'skills') { active = 'instructions'; filter = 'all'; }
+      if (panel.dataset.view === 'skills') active = SKILLS_PAGE;
       const availablePages = new Set(groups.filter(available).map(item => item.category));
-      if (!availablePages.has(active)) active = CATEGORIES.find(([id]) => availablePages.has(id))?.[0] || 'general';
+      if (!availablePages.has(active)) active = Array.from(navButtons.keys()).find(id => availablePages.has(id)) || 'appearance';
       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')
+        if (node.closest('.codex-wb-nav, .codex-wb-footer')
+          || node.classList.contains('codex-wb-title')
           || 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'));
+      const projectName = hasProject() ? String(instance.getProjectName?.() || '').trim() : '';
+      for (const [id, page] of pages) renderPageScope(page, pageScopes.get(id), projectName);
+      for (const [scope, label] of sectionLabels) {
+        label.hidden = !Array.from(pageScopes).some(([id, pageScope]) => pageScope === scope && availablePages.has(id));
+      }
       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'));
       const skillsBack = skills?.querySelector('[data-skills-back]');
@@ -248,6 +285,7 @@
         skillsBack.title = t('settingsBack');
         skillsBack.setAttribute('aria-label', t('settingsBack'));
       }
+      if (status) status.hidden = Boolean(status.dataset.statusPage) && status.dataset.statusPage !== active;
       for (const [id, tab] of navButtons) {
         tab.hidden = !availablePages.has(id);
         tab.setAttribute('aria-selected', String(id === active));
@@ -256,12 +294,11 @@
       }
       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;
-        }
+        // Opening a group when its page is shown keeps the lazy toggle loaders (history, storage).
+        if (item.node.tagName === 'DETAILS' && item.node.open !== visible) item.node.open = visible;
         item.node.hidden = !visible;
       }
+      refreshSoleSections();
       updateThemes();
     }
     function requestProviders() {
@@ -277,9 +314,17 @@
       try { Promise.resolve(instance.callbacks.onProvidersOpen()).catch(failed); }
       catch (error) { failed(error); }
     }
+    // Shows the page that holds a group and returns the group, or null when the
+    // group is unavailable (for example a project group outside a project).
+    function revealGroup(key) {
+      const item = groups.find(entry => entry.node.dataset?.setGroup === key);
+      if (!item || !available(item)) return null;
+      active = item.category;
+      refresh();
+      return item.node;
+    }
     function revealProviders() {
       active = 'providers';
-      filter = 'all';
       providerRequested = true;
       pages.get('providers').dataset.providerEmbedded = 'true';
       panel.dataset.view = 'settings';
@@ -330,13 +375,6 @@
       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);
@@ -363,7 +401,7 @@
     observer.observe(panel, { attributes: true, attributeFilter: ['data-view', 'data-settings-scope', 'data-theme'] });
     refresh();
     return {
-      show, hide, refresh, revealProviders,
+      show, hide, refresh, revealGroup, revealProviders,
       setProviderCloseGuard(guard) { providerCloseGuard = guard; },
       destroy() {
         destroyed = true;

package/extension/src/content/sharedSessionViewSync.js

@@ -9,7 +9,11 @@
 
   function applySnapshot(options, sessions) {
     const previous = options.getState(), scope = options.getScope();
-    const next = options.normalize({ ...previous, sessions }, { restoreRunningRuns: false });
+    const input = sessions.length ? { ...previous, sessions } : {
+      ...previous, session: null, sessions: [], runs: [], activeSessionId: '',
+      task: '', focusFiles: [], selectionContext: null, composerAttachments: []
+    };
+    const next = options.normalize(input, { restoreRunningRuns: false });
     const unchangedSnapshot = JSON.stringify(next);
     options.setState(next);
     try {
@@ -49,9 +53,10 @@
       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))) {
+      // A locally edited draft or a not-yet-persisted edit takes priority over
+      // passive history refresh. Callers may distinguish imported shared drafts.
+      if ((options.hasLocalDraft ? options.hasLocalDraft(local) : Boolean(local.task))
+        || (local.sessions || []).some(session => StorageDb.hasUnpersistedSharedSession(session))) {
         schedule(1500); return;
       }
       const capturedVersion = version, capturedSignature = signature(local);
@@ -87,6 +92,10 @@
     }
     const unsubscribe = Bridge.subscribe(change => {
       const scope = getScope();
+      if (options.isDashboard?.()) {
+        if (scope.accountScopeId && change.accountScopeId === scope.accountScopeId) options.refreshDashboard?.();
+        return;
+      }
       if (!change.projectId || change.projectId === scope.projectId) {
         retryCount = 0; pending = true; schedule();
       }

package/extension/src/content/subagentActivityView.js

@@ -3,18 +3,31 @@
 })(typeof globalThis !== 'undefined' ? globalThis : window, function subagentActivityViewFactory(Agents, Activity) {
   'use strict';
   function create(deps) {
-    const { tx, getPanel, plain, make, icon, formatElapsed, renderBlocks } = deps;
+    const { tx, getPanel, plain, plainThought, make, icon, formatElapsed, renderBlocks, glyph = () => '' } = deps;
+    const withGlyph = (node, name, label) => {
+      node.insertAdjacentHTML('beforeend', glyph(name));
+      const text = make('span', ''); text.textContent = label; node.append(text);
+      return node;
+    };
     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] || '';
     }
+    // A row preview is one plain line: a final message keeps its words, not its
+    // Markdown ("- `main.tex` is …" reads "main.tex is …").
+    function plainMessage(value) {
+      return value.replace(/^\s*(?:#{1,6}\s+|>\s?|[-*+]\s+|\d+[.)]\s+)/gm, '')
+        .replace(/!?\[([^\]]*)\]\([^)\s]*\)/g, '$1').replace(/`([^`\n]+)`/g, '$1')
+        .replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, '$2').replace(/\s+/g, ' ').trim();
+    }
     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);
+      const text = plain(item?.meta?.target || item?.meta?.command || item?.event?.title || agent.task);
+      return (item?.kind === 'message' ? plainMessage(text) : text).slice(0, 180);
     }
     function elapsed(agent, run) {
       const duration = Agents.elapsedMs(agent, run, Date.now());
@@ -42,9 +55,9 @@
       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.type = 'button'; withGlyph(back, 'chevronLeft', tx('Back to main task', '返回主任务'));
       back.addEventListener('click', close);
-      const readonly = make('span', 'codex-subagent-readonly'); readonly.textContent = tx('Read only', '只读');
+      const readonly = withGlyph(make('span', 'codex-subagent-readonly'), 'lock', tx('Read only', '只读'));
       header.append(back, readonly);
       const parent = make('div', 'codex-subagent-parent');
       const parentLabel = make('span', 'codex-subagent-parent-label');
@@ -112,7 +125,7 @@
           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');
+          const tail = make('span', 'run-subagent-tail'), status = make('span', 'run-subagent-status'), time = make('span', 'run-subagent-time');
           tail.append(status, time);
           el.append(mark, copy, tail);
           el.addEventListener('click', () => open(card, agent.key, el));
@@ -154,15 +167,17 @@
       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.meta.dataset.state = childStatus;
       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);
+      const parentWork = plainThought(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 + ' 个子任务进行中');
+      viewer.parentCount.hidden = running === 0;
       for (const sibling of card.run.subagents || []) {
         let button = viewer.siblingRows.get(sibling.key);
         if (!button) {
@@ -172,7 +187,8 @@
         }
         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));
+        button.dataset.state = Agents.effectiveStatus(sibling, card.run);
+        button.title = statusLabel(button.dataset.state);
       }
       const childRun = { id: card.id + ':' + agent.key, status: ['pending', 'running'].includes(childStatus) ? 'running' : childStatus,
         events: agent.events || [], mode: 'ask' };