diff --git a/packages/web-templates/src/export-html/build.mjs b/packages/web-templates/src/export-html/build.mjs
index 2f5c70bf29b..f2f01c1e9b1 100644
--- a/packages/web-templates/src/export-html/build.mjs
+++ b/packages/web-templates/src/export-html/build.mjs
@@ -1,40 +1,89 @@
 import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
 import { build } from 'esbuild';
+import { build as viteBuild } from 'vite';
 import { buildConfig } from './esbuild.config.mjs';
 import prettier from 'prettier';
 
+const require = createRequire(import.meta.url);
 const assetsDir = dirname(fileURLToPath(import.meta.url));
 const srcDir = join(assetsDir, 'src');
 const assetsDistDir = join(assetsDir, 'dist');
 const generatedDir = join(assetsDir, '..', 'generated');
+const webuiDir = join(assetsDir, '..', '..', '..', 'webui');
 await mkdir(generatedDir, { recursive: true });
 await mkdir(assetsDistDir, { recursive: true });
 
 const templateModulePath = join(generatedDir, 'exportHtmlTemplate.ts');
-const packageJsonPath = join(assetsDir, 'package.json');
-const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
-const dependencyVersions = packageJson?.dependencies ?? {};
-
-const getDependencyVersion = (name) => {
-  const version = dependencyVersions[name];
-  if (!version) {
-    throw new Error(`Missing ${name} dependency version in package.json.`);
-  }
-  // Handle various version formats:
-  // - "^0.1.0" -> "0.1.0"
-  // - "~1.2.3" -> "1.2.3"
-  // - "latest" -> "latest"
-  // - "^0.1.0@latest" -> "0.1.0" (remove npm tag suffix)
-  const versionWithoutPrefix = version.replace(/^[^0-9a-zA-Z]+/, '');
-  // Remove npm tag suffix (e.g., "0.1.0@latest" -> "0.1.0")
-  return versionWithoutPrefix.replace(/@.+$/, '');
-};
-const webuiVersion = getDependencyVersion('@qwen-code/webui');
 const reactUmdVersion = '18.2.0';
 const reactDomUmdVersion = '18.2.0';
 
+// Build the @qwen-code/webui viewer as a UMD bundle from webui sources and
+// inline it into the template below. The exported HTML must stay
+// self-contained: @qwen-code/webui is not published as part of the release
+// flow, and resolving it from a CDN at view time would retroactively change
+// how every already-generated export renders. Building it here (instead of
+// reading packages/webui/dist) keeps the template build independent of
+// webui's own build, which runs after web-templates in scripts/build.js and
+// is skipped entirely by --cli-only builds.
+const webuiDistDir = join(assetsDistDir, 'webui');
+await viteBuild({
+  configFile: false,
+  root: webuiDir,
+  logLevel: 'warn',
+  css: {
+    postcss: {
+      plugins: [
+        require('tailwindcss')({
+          presets: [require(join(webuiDir, 'tailwind.preset.cjs'))],
+          content: [join(webuiDir, 'src', '**', '*.{ts,tsx}')],
+        }),
+        require('autoprefixer'),
+      ],
+    },
+  },
+  build: {
+    outDir: webuiDistDir,
+    emptyOutDir: true,
+    minify: true,
+    sourcemap: false,
+    cssCodeSplit: false,
+    lib: {
+      entry: join(webuiDir, 'src', 'index.ts'),
+      name: 'QwenCodeWebUI',
+      formats: ['umd'],
+      fileName: () => 'index.umd.js',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-dom/client': 'ReactDOM',
+          'react/jsx-runtime': 'ReactJSXRuntime',
+        },
+        assetFileNames: 'styles.[ext]',
+      },
+    },
+  },
+});
+const webuiJs = (await readFile(join(webuiDistDir, 'index.umd.js'), 'utf8'))
+  // Escape for inlining into a <script> block, mirroring the CLI's
+  // escapeJsonForHtml: a literal "</script" would terminate the tag.
+  .replace(/<\/script/gi, '<\\/script');
+// The bundle inevitably contains `<!--` (markdown-it's HTML regexes). If a
+// `<script` byte ever appears after it, HTML5 script-data double-escaping
+// swallows the rest of the template — fail the build instead of every export.
+if (/<script/i.test(webuiJs)) {
+  throw new Error(
+    'webui UMD bundle contains a <script sequence; refusing to inline.',
+  );
+}
+const webuiCss = await readFile(join(webuiDistDir, 'styles.css'), 'utf8');
+
 const buildResult = await build(buildConfig);
 
 const jsBundle = buildResult.outputFiles.find((file) =>
@@ -54,14 +103,30 @@ const htmlTemplate = await readFile(join(srcDir, 'index.html'), 'utf8');
 const faviconSvg = await readFile(join(srcDir, 'favicon.svg'), 'utf8');
 const faviconData = encodeURIComponent(faviconSvg.trim());
 
+// Function-form replacers: the bundles are untrusted replacement content,
+// and a string replacement would interpret `$&`/`$'`/`` $` `` sequences in
+// them as substitution patterns, corrupting the inlined code.
 const htmlOutput = htmlTemplate
-  .replace('__INLINE_CSS__', css.trim())
-  .replace('__INLINE_SCRIPT__', jsBundle.text.trim())
+  .replace('__INLINE_CSS__', () => css.trim())
+  .replace('__INLINE_SCRIPT__', () => jsBundle.text.trim())
+  .replace('__WEBUI_UMD_JS__', () => webuiJs.trim())
+  .replace('__WEBUI_CSS__', () => webuiCss.trim())
   .replaceAll('__REACT_UMD_VERSION__', reactUmdVersion)
   .replaceAll('__REACT_DOM_UMD_VERSION__', reactDomUmdVersion)
-  .replaceAll('__WEBUI_VERSION__', webuiVersion)
-  .replace('__FAVICON_SVG__', faviconSvg.trim())
-  .replace('__FAVICON_DATA__', faviconData);
+  .replace('__FAVICON_SVG__', () => faviconSvg.trim())
+  .replace('__FAVICON_DATA__', () => faviconData);
+
+// A dropped or renamed .replace() above would otherwise still exit 0 and
+// ship a template that throws at view time.
+const residualPlaceholder =
+  /__(INLINE_CSS|INLINE_SCRIPT|WEBUI_UMD_JS|WEBUI_CSS|FAVICON_SVG|FAVICON_DATA)__/.exec(
+    htmlOutput,
+  );
+if (residualPlaceholder) {
+  throw new Error(
+    `Unreplaced placeholder ${residualPlaceholder[0]} in export HTML template.`,
+  );
+}
 
 const templateModule = `/**
  * @license
diff --git a/packages/web-templates/src/export-html/package.json b/packages/web-templates/src/export-html/package.json
index 934da462d1f..f08eaf57264 100644
--- a/packages/web-templates/src/export-html/package.json
+++ b/packages/web-templates/src/export-html/package.json
@@ -5,9 +5,6 @@
   "scripts": {
     "build": "node build.mjs"
   },
-  "dependencies": {
-    "@qwen-code/webui": "latest"
-  },
   "devDependencies": {
     "esbuild": "^0.25.0"
   }
diff --git a/packages/web-templates/src/export-html/src/index.html b/packages/web-templates/src/export-html/src/index.html
index 393f96f36dc..910c27600a8 100644
--- a/packages/web-templates/src/export-html/src/index.html
+++ b/packages/web-templates/src/export-html/src/index.html
@@ -31,11 +31,12 @@
       window['react/jsx-runtime'] = jsxRuntime;
       window['react/jsx-dev-runtime'] = jsxRuntime;
     </script>
-    <script src="https://unpkg.com/@qwen-code/webui@__WEBUI_VERSION__/dist/index.umd.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/@qwen-code/webui@__WEBUI_VERSION__/dist/styles.css"
-    />
+    <script>
+      __WEBUI_UMD_JS__;
+    </script>
+    <style>
+      __WEBUI_CSS__
+    </style>
     <title>Qwen Code Chat Export</title>
     <script>
       // Pre-hydrate FOUC guard: must run before <style> below applies layout.
diff --git a/packages/web-templates/src/export-html/src/main.tsx b/packages/web-templates/src/export-html/src/main.tsx
index d316038a444..f728104358a 100644
--- a/packages/web-templates/src/export-html/src/main.tsx
+++ b/packages/web-templates/src/export-html/src/main.tsx
@@ -22,6 +22,7 @@ declare const QwenCodeWebUI: {
     messages: unknown[];
     autoScroll: boolean;
     theme: string;
+    showExpandControl?: boolean;
   }) => React.ReactNode;
   PlatformProvider: (props: {
     value: unknown;
@@ -76,7 +77,12 @@ const App = () => {
       <div className="content-wrapper">
         <div className="chat-container">
           <PlatformProvider value={platformContext}>
-            <ChatViewer messages={messages} autoScroll={false} theme={theme} />
+            <ChatViewer
+              messages={messages}
+              autoScroll={false}
+              theme={theme}
+              showExpandControl
+            />
           </PlatformProvider>
         </div>
         {metadata && <MetadataSidebar metadata={metadata} />}
diff --git a/packages/webui/src/components/ChatViewer/ChatViewer.css b/packages/webui/src/components/ChatViewer/ChatViewer.css
index 94b8dca78fe..82a1b431cfc 100644
--- a/packages/webui/src/components/ChatViewer/ChatViewer.css
+++ b/packages/webui/src/components/ChatViewer/ChatViewer.css
@@ -51,6 +51,44 @@
   scroll-behavior: smooth;
 }
 
+/* ===========================
+   Global expand/collapse control
+   =========================== */
+.chat-viewer-expand-control {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 20px 0;
+  flex-shrink: 0;
+}
+
+.chat-viewer-expand-control-button {
+  background: transparent;
+  border: 1px solid var(--app-input-border, rgba(255, 255, 255, 0.2));
+  border-radius: 4px;
+  color: var(--app-secondary-foreground, rgba(255, 255, 255, 0.6));
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1.4;
+  padding: 3px 10px;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.chat-viewer-expand-control-button:hover {
+  color: var(--app-primary-foreground, #cccccc);
+  border-color: var(--app-primary-foreground, #cccccc);
+  background-color: var(--app-input-background, rgba(255, 255, 255, 0.06));
+}
+
+@media (max-width: 600px) {
+  .chat-viewer-expand-control {
+    padding: 8px 12px 0;
+  }
+}
+
 /* Dark theme scrollbar styling */
 .chat-viewer-messages::-webkit-scrollbar {
   width: 8px;
diff --git a/packages/webui/src/components/ChatViewer/ChatViewer.expandControl.test.tsx b/packages/webui/src/components/ChatViewer/ChatViewer.expandControl.test.tsx
new file mode 100644
index 00000000000..ca91cbca3f8
--- /dev/null
+++ b/packages/webui/src/components/ChatViewer/ChatViewer.expandControl.test.tsx
@@ -0,0 +1,462 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatViewer, type ChatMessageData } from './ChatViewer.js';
+
+const LONG_OUTPUT = `${'x'.repeat(600)}__SHELL_TAIL__`;
+
+const LONG_READ_OUTPUT = `${'y'.repeat(400)}__READ_TAIL__`;
+
+const USER_MESSAGE_WITH_FILE_REFERENCE = [
+  'please review this file',
+  '--- Content from referenced files ---',
+  'Content from @src/example.ts:',
+  'FILE-REF-BODY-LINE-1',
+  'FILE-REF-BODY-LINE-2',
+  '--- End of content ---',
+].join('\n');
+
+const createFileAndReadMessages = (): ChatMessageData[] => [
+  {
+    uuid: 'user-file-1',
+    timestamp: '2026-03-22T16:48:30.000Z',
+    type: 'user',
+    message: {
+      role: 'user',
+      parts: [{ text: USER_MESSAGE_WITH_FILE_REFERENCE }],
+    },
+  },
+  {
+    uuid: 'read-1',
+    timestamp: '2026-03-22T16:48:35.000Z',
+    type: 'tool_call',
+    toolCall: {
+      toolCallId: 'read-1-call',
+      kind: 'read',
+      title: 'Read src/example.ts',
+      status: 'completed',
+      rawInput: { file_path: 'src/example.ts' },
+      locations: [{ path: 'src/example.ts' }],
+      content: [
+        {
+          type: 'content',
+          content: { type: 'text', text: LONG_READ_OUTPUT },
+        },
+      ],
+    },
+  },
+];
+
+const LONG_SEARCH_OUTPUT = `${'s'.repeat(500)}SEARCH-TAIL-MARKER`;
+
+const LONG_FETCH_OUTPUT = `${'f'.repeat(400)} WEBFETCH-TAIL-MARKER`;
+
+const createSearchMessages = (): ChatMessageData[] => [
+  {
+    uuid: 'user-search',
+    timestamp: '2026-03-22T16:48:30.000Z',
+    type: 'user',
+    message: { role: 'user', parts: [{ text: 'find the thing' }] },
+  },
+  {
+    uuid: 'search-1',
+    timestamp: '2026-03-22T16:48:35.000Z',
+    type: 'tool_call',
+    toolCall: {
+      toolCallId: 'search-1-call',
+      kind: 'search',
+      title: 'Search "pattern"',
+      status: 'completed',
+      rawInput: { pattern: 'pattern' },
+      content: [
+        {
+          type: 'content',
+          content: { type: 'text', text: LONG_SEARCH_OUTPUT },
+        },
+      ],
+    },
+  },
+];
+
+const createWebFetchMessages = (): ChatMessageData[] => [
+  {
+    uuid: 'user-fetch',
+    timestamp: '2026-03-22T16:48:30.000Z',
+    type: 'user',
+    message: { role: 'user', parts: [{ text: 'fetch the page' }] },
+  },
+  {
+    uuid: 'fetch-1',
+    timestamp: '2026-03-22T16:48:35.000Z',
+    type: 'tool_call',
+    toolCall: {
+      toolCallId: 'fetch-1-call',
+      kind: 'web_fetch',
+      title: 'Fetch https://example.com',
+      status: 'completed',
+      rawInput: { url: 'https://example.com' },
+      content: [
+        {
+          type: 'content',
+          content: { type: 'text', text: LONG_FETCH_OUTPUT },
+        },
+      ],
+    },
+  },
+];
+
+const createMessages = (): ChatMessageData[] => [
+  {
+    uuid: 'user-1',
+    timestamp: '2026-03-22T16:48:30.000Z',
+    type: 'user',
+    message: { role: 'user', parts: [{ text: 'hello' }] },
+  },
+  {
+    uuid: 'thinking-1',
+    timestamp: '2026-03-22T16:48:31.000Z',
+    type: 'assistant',
+    message: {
+      role: 'thinking',
+      // Avoid `__text__` markers: thinking content renders as Markdown and
+      // would strip the double underscores as bold syntax.
+      parts: [{ text: 'thinking body THINKING-BODY-MARKER' }],
+    },
+  },
+  {
+    uuid: 'shell-1',
+    timestamp: '2026-03-22T16:48:35.000Z',
+    type: 'tool_call',
+    toolCall: {
+      toolCallId: 'shell-1-call',
+      kind: 'bash',
+      title: 'Run command',
+      status: 'completed',
+      rawInput: { command: 'run-command' },
+      content: [
+        { type: 'content', content: { type: 'text', text: LONG_OUTPUT } },
+      ],
+    },
+  },
+];
+
+describe('ChatViewer global expand control', () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    (
+      globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => root?.unmount());
+      root = null;
+    }
+    if (container) {
+      container.remove();
+      container = null;
+    }
+  });
+
+  const clickButton = (label: string) => {
+    const button = container?.querySelector(
+      `button[aria-label="${label}"]`,
+    ) as HTMLButtonElement;
+    expect(button).not.toBeNull();
+    act(() => {
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+  };
+
+  const getOutputToggle = () =>
+    container?.querySelector(
+      'button[aria-label="Expand output"], button[aria-label="Collapse output"]',
+    ) as HTMLButtonElement;
+
+  const getOutputContent = () =>
+    container?.querySelector(
+      '.toolcall-collapsible-output-content',
+    ) as HTMLDivElement;
+
+  const getOutputCardContent = () =>
+    container?.querySelector(
+      '.webfetch-output-content',
+    ) as HTMLDivElement | null;
+
+  const isThinkingExpanded = () =>
+    container?.querySelector('.thinking-content') != null;
+
+  it('does not render the toolbar by default', () => {
+    act(() => {
+      root?.render(
+        <ChatViewer messages={createMessages()} autoScroll={false} />,
+      );
+    });
+
+    expect(container?.querySelector('.chat-viewer-expand-control')).toBeNull();
+  });
+
+  it('expands thinking blocks and long tool outputs via Expand all', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    // Baseline: both sections start collapsed. ShellToolCall renders its
+    // output with collapsedHeight=60 (not the CollapsibleOutput default).
+    expect(isThinkingExpanded()).toBe(false);
+    expect(getOutputToggle().getAttribute('aria-expanded')).toBe('false');
+    expect(getOutputContent().style.maxHeight).toBe('60px');
+
+    clickButton('Expand all sections');
+
+    // Wait for the state instead of reading it synchronously so the
+    // assertions stay deterministic under degraded scheduling (cold-cache
+    // CI runs can defer the global signal flush past the click's act()).
+    await vi.waitFor(() => {
+      expect(isThinkingExpanded()).toBe(true);
+      expect(container?.textContent).toContain('THINKING-BODY-MARKER');
+      expect(getOutputToggle().getAttribute('aria-expanded')).toBe('true');
+      expect(getOutputContent().style.maxHeight).toBe('');
+    });
+  });
+
+  it('collapses previously expanded sections via Collapse all', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    clickButton('Expand all sections');
+    await vi.waitFor(() => expect(isThinkingExpanded()).toBe(true));
+
+    clickButton('Collapse all sections');
+
+    await vi.waitFor(() => {
+      expect(isThinkingExpanded()).toBe(false);
+      expect(getOutputToggle().getAttribute('aria-expanded')).toBe('false');
+      expect(getOutputContent().style.maxHeight).toBe('60px');
+    });
+  });
+
+  it('keeps individual toggles working after a global command', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    clickButton('Expand all sections');
+    await vi.waitFor(() => expect(isThinkingExpanded()).toBe(true));
+
+    // Manually collapse the thinking block again.
+    const thinkingToggle = container?.querySelector(
+      'button[aria-label="Collapse thinking"]',
+    ) as HTMLButtonElement;
+    expect(thinkingToggle).not.toBeNull();
+    act(() => {
+      thinkingToggle.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(isThinkingExpanded()).toBe(false);
+
+    // The shell output stays expanded: the manual toggle only affects its
+    // own section.
+    expect(getOutputToggle().getAttribute('aria-expanded')).toBe('true');
+
+    // A later global command reaches every section again.
+    clickButton('Collapse all sections');
+    await vi.waitFor(() =>
+      expect(getOutputToggle().getAttribute('aria-expanded')).toBe('false'),
+    );
+  });
+
+  it('does not render the toolbar for an empty message list', () => {
+    act(() => {
+      root?.render(
+        <ChatViewer messages={[]} autoScroll={false} showExpandControl />,
+      );
+    });
+
+    expect(container?.querySelector('.chat-viewer-expand-control')).toBeNull();
+  });
+
+  it('expands file references and read outputs via the global buttons', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createFileAndReadMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    const getFileRefToggle = () =>
+      container?.querySelector(
+        '.user-message-container button[aria-expanded]',
+      ) as HTMLButtonElement;
+    const getReadToggle = () =>
+      container?.querySelector(
+        '.read-tool-call-success button[aria-expanded]',
+      ) as HTMLButtonElement;
+
+    // Baseline: both sections start collapsed. The collapsed file-reference
+    // body is not rendered at all.
+    expect(getFileRefToggle().getAttribute('aria-expanded')).toBe('false');
+    expect(container?.textContent).not.toContain('FILE-REF-BODY-LINE-1');
+    expect(getReadToggle().getAttribute('aria-expanded')).toBe('false');
+    expect(getReadToggle()?.textContent).toContain('Show more');
+
+    clickButton('Expand all sections');
+
+    await vi.waitFor(() => {
+      expect(getFileRefToggle().getAttribute('aria-expanded')).toBe('true');
+      expect(container?.textContent).toContain('FILE-REF-BODY-LINE-1');
+      expect(getReadToggle().getAttribute('aria-expanded')).toBe('true');
+      expect(getReadToggle()?.textContent).toContain('Collapse');
+    });
+
+    clickButton('Collapse all sections');
+
+    await vi.waitFor(() => {
+      expect(getFileRefToggle().getAttribute('aria-expanded')).toBe('false');
+      expect(container?.textContent).not.toContain('FILE-REF-BODY-LINE-1');
+      expect(getReadToggle().getAttribute('aria-expanded')).toBe('false');
+      expect(getReadToggle()?.textContent).toContain('Show more');
+    });
+  });
+
+  it('mounts sections added after a global command in the target state', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    clickButton('Expand all sections');
+    await vi.waitFor(() =>
+      expect(container?.querySelectorAll('.thinking-content').length).toBe(1),
+    );
+
+    // A new thinking message arrives after the global command (streaming).
+    const lateThinking: ChatMessageData = {
+      uuid: 'thinking-late',
+      timestamp: '2026-03-22T16:49:00.000Z',
+      type: 'assistant',
+      message: {
+        role: 'thinking',
+        parts: [{ text: 'late body LATE-THINKING-MARKER' }],
+      },
+    };
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={[...createMessages(), lateThinking]}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    // The late section inherits the latest global target (expanded)
+    // without another toolbar click.
+    expect(container?.querySelectorAll('.thinking-content').length).toBe(2);
+    expect(container?.textContent).toContain('LATE-THINKING-MARKER');
+  });
+
+  it('toggles SearchToolCall collapsible output via the global buttons', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createSearchMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    // Baseline: the search result body starts collapsed (its content is not
+    // rendered until expanded), and its trigger is a keyboard-reachable
+    // button with expanded-state semantics.
+    const searchToggle = container?.querySelector(
+      '[role="button"][aria-expanded]',
+    ) as HTMLElement;
+    expect(searchToggle).not.toBeNull();
+    expect(searchToggle.getAttribute('aria-expanded')).toBe('false');
+    expect(searchToggle.tabIndex).toBe(0);
+    expect(container?.textContent).not.toContain('SEARCH-TAIL-MARKER');
+
+    clickButton('Expand all sections');
+    await vi.waitFor(() =>
+      expect(container?.textContent).toContain('SEARCH-TAIL-MARKER'),
+    );
+
+    clickButton('Collapse all sections');
+    await vi.waitFor(() =>
+      expect(container?.textContent).not.toContain('SEARCH-TAIL-MARKER'),
+    );
+  });
+
+  it('toggles WebFetchToolCall OutputCard via the global buttons', async () => {
+    act(() => {
+      root?.render(
+        <ChatViewer
+          messages={createWebFetchMessages()}
+          autoScroll={false}
+          showExpandControl
+        />,
+      );
+    });
+
+    // Baseline: long content (> EXPAND_THRESHOLD) renders the toggle with
+    // aria wiring and a collapsed max-height.
+    const toggle = getOutputToggle();
+    expect(toggle).not.toBeNull();
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(getOutputCardContent()?.style.maxHeight).toBe('120px');
+
+    clickButton('Expand all sections');
+    await vi.waitFor(() => {
+      expect(getOutputToggle().getAttribute('aria-expanded')).toBe('true');
+      expect(getOutputCardContent()?.style.maxHeight).toBe('');
+    });
+
+    clickButton('Collapse all sections');
+    await vi.waitFor(() => {
+      expect(getOutputToggle().getAttribute('aria-expanded')).toBe('false');
+      expect(getOutputCardContent()?.style.maxHeight).toBe('120px');
+    });
+  });
+});
diff --git a/packages/webui/src/components/ChatViewer/ChatViewer.tsx b/packages/webui/src/components/ChatViewer/ChatViewer.tsx
index 60cfc7502c5..3a326cd4f1f 100644
--- a/packages/webui/src/components/ChatViewer/ChatViewer.tsx
+++ b/packages/webui/src/components/ChatViewer/ChatViewer.tsx
@@ -10,6 +10,7 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import { UserMessage } from '../messages/UserMessage.js';
 import { AssistantMessage } from '../messages/Assistant/AssistantMessage.js';
@@ -20,6 +21,10 @@ import {
 } from '../toolcalls/index.js';
 import type { ToolCallData as BaseToolCallData } from '../toolcalls/index.js';
 import { getUserTranscriptDisplayText } from '../../adapters/userTranscriptDisplay.js';
+import {
+  ExpandControlContext,
+  type ExpandControlContextValue,
+} from '../../context/ExpandControlContext.js';
 import './ChatViewer.css';
 
 /**
@@ -99,6 +104,14 @@ export interface ChatViewerProps {
   theme?: 'dark' | 'light' | 'auto';
   /** Show empty state icon (default: true) */
   showEmptyIcon?: boolean;
+  /**
+   * Show a global "Expand all / Collapse all" control above the messages
+   * (default: false). When enabled, the control broadcasts expand/collapse
+   * signals to every collapsible section (thinking blocks, tool outputs,
+   * file references) via {@link ExpandControlContext}; individual toggles
+   * keep working between global commands.
+   */
+  showExpandControl?: boolean;
 }
 
 /**
@@ -173,6 +186,7 @@ export const ChatViewer = forwardRef<ChatViewerHandle, ChatViewerProps>(
       autoScroll = true,
       theme = 'auto',
       showEmptyIcon = true,
+      showExpandControl = false,
     },
     ref,
   ) => {
@@ -180,6 +194,19 @@ export const ChatViewer = forwardRef<ChatViewerHandle, ChatViewerProps>(
     const scrollAnchorRef = useRef<HTMLDivElement>(null);
     const prevMessageCountRef = useRef(0);
 
+    // Global expand/collapse state broadcast to collapsible sections.
+    // `signal` is bumped on every command so consumers can distinguish a
+    // fresh global command from ordinary re-renders.
+    const [expandControl, setExpandControl] =
+      useState<ExpandControlContextValue>({ signal: 0, expanded: false });
+
+    const issueExpandControl = (expanded: boolean) => {
+      setExpandControl((current) => ({
+        signal: current.signal + 1,
+        expanded,
+      }));
+    };
+
     // Sort messages by timestamp and filter out system messages and hidden tool calls
     const sortedMessages = useMemo(
       () =>
@@ -334,34 +361,67 @@ export const ChatViewer = forwardRef<ChatViewerHandle, ChatViewerProps>(
       .filter(Boolean)
       .join(' ');
 
+    const showExpandToolbar = showExpandControl && sortedMessages.length > 0;
+
+    const messagesRegion = (
+      <div
+        ref={scrollContainerRef}
+        className="chat-viewer-messages chat-messages"
+      >
+        {sortedMessages.length === 0 ? (
+          <div className="chat-viewer-empty">
+            {showEmptyIcon && (
+              <div className="chat-viewer-empty-icon" aria-hidden="true">
+                💬
+              </div>
+            )}
+            <div className="chat-viewer-empty-text">{emptyMessage}</div>
+          </div>
+        ) : (
+          <>
+            {sortedMessages.map((msg, index) =>
+              renderMessage(msg, index, sortedMessages),
+            )}
+            {/* Scroll anchor for auto-scroll functionality */}
+            <div ref={scrollAnchorRef} className="chat-viewer-scroll-anchor" />
+          </>
+        )}
+      </div>
+    );
+
     return (
       <div className={containerClasses}>
-        <div
-          ref={scrollContainerRef}
-          className="chat-viewer-messages chat-messages"
-        >
-          {sortedMessages.length === 0 ? (
-            <div className="chat-viewer-empty">
-              {showEmptyIcon && (
-                <div className="chat-viewer-empty-icon" aria-hidden="true">
-                  💬
-                </div>
-              )}
-              <div className="chat-viewer-empty-text">{emptyMessage}</div>
-            </div>
-          ) : (
-            <>
-              {sortedMessages.map((msg, index) =>
-                renderMessage(msg, index, sortedMessages),
-              )}
-              {/* Scroll anchor for auto-scroll functionality */}
-              <div
-                ref={scrollAnchorRef}
-                className="chat-viewer-scroll-anchor"
-              />
-            </>
-          )}
-        </div>
+        {showExpandToolbar && (
+          <div
+            className="chat-viewer-expand-control"
+            role="toolbar"
+            aria-label="Expand or collapse all sections"
+          >
+            <button
+              type="button"
+              className="chat-viewer-expand-control-button"
+              aria-label="Expand all sections"
+              onClick={() => issueExpandControl(true)}
+            >
+              Expand all
+            </button>
+            <button
+              type="button"
+              className="chat-viewer-expand-control-button"
+              aria-label="Collapse all sections"
+              onClick={() => issueExpandControl(false)}
+            >
+              Collapse all
+            </button>
+          </div>
+        )}
+        {showExpandControl ? (
+          <ExpandControlContext.Provider value={expandControl}>
+            {messagesRegion}
+          </ExpandControlContext.Provider>
+        ) : (
+          messagesRegion
+        )}
       </div>
     );
   },
diff --git a/packages/webui/src/components/messages/CollapsibleFileContent.tsx b/packages/webui/src/components/messages/CollapsibleFileContent.tsx
index a21a5679e2e..99e38f174d1 100644
--- a/packages/webui/src/components/messages/CollapsibleFileContent.tsx
+++ b/packages/webui/src/components/messages/CollapsibleFileContent.tsx
@@ -5,8 +5,9 @@
  */
 
 import type { FC } from 'react';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import { MessageContent } from './MessageContent.js';
+import { useControlledExpanded } from '../../context/ExpandControlContext.js';
 
 /**
  * Parsed segment of user message content
@@ -118,7 +119,7 @@ const CollapsibleFileReference: FC<CollapsibleFileReferenceProps> = ({
   onFileClick,
   defaultExpanded = false,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isExpanded, setIsExpanded] = useControlledExpanded(defaultExpanded);
 
   const lineCount = useMemo(
     () => segment.content.split('\n').length,
diff --git a/packages/webui/src/components/messages/ThinkingMessage.tsx b/packages/webui/src/components/messages/ThinkingMessage.tsx
index b9669962fe1..cd9a8470903 100644
--- a/packages/webui/src/components/messages/ThinkingMessage.tsx
+++ b/packages/webui/src/components/messages/ThinkingMessage.tsx
@@ -4,9 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { type FC, memo, useState } from 'react';
+import { type FC, memo } from 'react';
 import { MessageContent } from './MessageContent.js';
 import { ChevronIcon } from '../icons/index.js';
+import { useControlledExpanded } from '../../context/ExpandControlContext.js';
 import './ThinkingMessage.css';
 
 /**
@@ -41,7 +42,7 @@ const ThinkingMessageBase: FC<ThinkingMessageProps> = ({
   defaultExpanded = false,
   status = 'default',
 }) => {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isExpanded, setIsExpanded] = useControlledExpanded(defaultExpanded);
 
   const handleToggle = () => {
     setIsExpanded(!isExpanded);
diff --git a/packages/webui/src/components/toolcalls/ReadToolCall.tsx b/packages/webui/src/components/toolcalls/ReadToolCall.tsx
index de3c240f365..97cfdf55d01 100644
--- a/packages/webui/src/components/toolcalls/ReadToolCall.tsx
+++ b/packages/webui/src/components/toolcalls/ReadToolCall.tsx
@@ -8,13 +8,14 @@
  */
 
 import type { FC } from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FileLink } from '../layout/FileLink.js';
 import {
   groupContent,
   mapToolStatusToContainerStatus,
 } from './shared/index.js';
 import { usePlatform } from '../../context/PlatformContext.js';
+import { useControlledExpanded } from '../../context/ExpandControlContext.js';
 import type {
   BaseToolCallProps,
   ToolCallContainerProps,
@@ -69,7 +70,7 @@ export const ReadToolCall: FC<BaseToolCallProps> = ({
   const { kind, title, content, locations, toolCallId } = toolCall;
   const platform = usePlatform();
   const openedDiffsRef = useRef<Map<string, string>>(new Map());
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useControlledExpanded(false);
 
   // Group content by type; memoize to avoid new array identities on every render
   const { errors, diffs, textOutputs } = useMemo(
@@ -268,6 +269,8 @@ export const ReadToolCall: FC<BaseToolCallProps> = ({
             {isLongContent && (
               <button
                 onClick={() => setIsExpanded(!isExpanded)}
+                aria-expanded={isExpanded}
+                aria-label={isExpanded ? 'Collapse output' : 'Expand output'}
                 className="flex items-center justify-center w-full py-1 px-2 border-t border-[var(--app-input-border)] cursor-pointer text-[var(--app-secondary-foreground)] text-[0.75em] opacity-70 hover:opacity-100 hover:bg-[var(--app-code-background)] transition-opacity bg-transparent"
               >
                 {isExpanded ? '▲ Collapse' : '▼ Show more'}
@@ -325,6 +328,8 @@ export const ReadToolCall: FC<BaseToolCallProps> = ({
           {isLongContent && (
             <button
               onClick={() => setIsExpanded(!isExpanded)}
+              aria-expanded={isExpanded}
+              aria-label={isExpanded ? 'Collapse output' : 'Expand output'}
               className="flex items-center justify-center w-full py-1 px-2 border-t border-[var(--app-input-border)] cursor-pointer text-[var(--app-secondary-foreground)] text-[0.75em] opacity-70 hover:opacity-100 hover:bg-[var(--app-code-background)] transition-opacity bg-transparent"
             >
               {isExpanded ? '▲ Collapse' : '▼ Show more'}
diff --git a/packages/webui/src/components/toolcalls/SearchToolCall.tsx b/packages/webui/src/components/toolcalls/SearchToolCall.tsx
index 81cd21b0add..441559bdead 100644
--- a/packages/webui/src/components/toolcalls/SearchToolCall.tsx
+++ b/packages/webui/src/components/toolcalls/SearchToolCall.tsx
@@ -6,7 +6,7 @@
  * Search tool call component - specialized for search operations
  */
 
-import { useState, type FC } from 'react';
+import { type FC } from 'react';
 import {
   safeTitle,
   groupContent,
@@ -16,6 +16,7 @@ import {
 import type { BaseToolCallProps, ContainerStatus } from './shared/index.js';
 import { FileLink } from '../layout/FileLink.js';
 import { getToolDisplayLabel } from './labelUtils.js';
+import { useControlledExpanded } from '../../context/ExpandControlContext.js';
 
 /**
  * Collapsible output component for search results
@@ -29,13 +30,23 @@ const CollapsibleOutput: FC<{
   /** Whether to start expanded (default: false) */
   defaultExpanded?: boolean;
 }> = ({ summary, children, defaultExpanded = false }) => {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isExpanded, setIsExpanded] = useControlledExpanded(defaultExpanded);
 
   return (
     <div className="flex flex-col">
       <div
         className="inline-flex text-[var(--app-secondary-foreground)] text-[0.85em] opacity-70 mt-[2px] mb-[2px] flex-row items-start w-full gap-1 cursor-pointer hover:opacity-100 transition-opacity"
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? 'Collapse output' : 'Expand output'}
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
       >
         <span className="flex-shrink-0 relative top-[-0.1em]">⎿</span>
         <span className="flex-shrink-0">{summary}</span>
diff --git a/packages/webui/src/components/toolcalls/WebFetchToolCall.tsx b/packages/webui/src/components/toolcalls/WebFetchToolCall.tsx
index 5fe27e1ba30..bcedc5797f1 100644
--- a/packages/webui/src/components/toolcalls/WebFetchToolCall.tsx
+++ b/packages/webui/src/components/toolcalls/WebFetchToolCall.tsx
@@ -7,7 +7,7 @@
  * Displays web fetch and search operations with URL/query and output
  */
 
-import { useState, type FC } from 'react';
+import { type FC } from 'react';
 import {
   ToolCallContainer,
   safeTitle,
@@ -17,6 +17,7 @@ import {
 import type { BaseToolCallProps } from './shared/index.js';
 import { getToolDisplayLabel } from './labelUtils.js';
 import { MarkdownRenderer } from '../messages/MarkdownRenderer/MarkdownRenderer.js';
+import { useControlledExpanded } from '../../context/ExpandControlContext.js';
 
 type WebVariant = 'fetch' | 'search';
 
@@ -60,7 +61,7 @@ const OutputCard: FC<{
   content: string;
   isError?: boolean;
 }> = ({ content, isError = false }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useControlledExpanded(false);
   const isLongContent = content.length > EXPAND_THRESHOLD;
 
   return (
@@ -71,7 +72,7 @@ const OutputCard: FC<{
             OUT
           </div>
           <div
-            className={`break-words m-0 p-1 overflow-hidden ${
+            className={`webfetch-output-content break-words m-0 p-1 overflow-hidden ${
               isError ? 'whitespace-pre-wrap' : ''
             }`}
             style={
@@ -101,7 +102,12 @@ const OutputCard: FC<{
           <div className="flex justify-center border-t border-[var(--app-input-border)] pt-1">
             <button
               type="button"
-              onClick={() => setIsExpanded(!isExpanded)}
+              onClick={(event) => {
+                event.stopPropagation();
+                setIsExpanded(!isExpanded);
+              }}
+              aria-expanded={isExpanded}
+              aria-label={isExpanded ? 'Collapse output' : 'Expand output'}
               className="text-[var(--app-secondary-foreground)] text-[0.8em] hover:text-[var(--app-primary-foreground)] cursor-pointer bg-transparent border-none px-2 py-1 rounded hover:bg-[var(--app-input-background)] transition-colors"
             >
               {isExpanded ? '▲ Collapse' : '▼ Show more'}
diff --git a/packages/webui/src/components/toolcalls/shared/CollapsibleOutput.tsx b/packages/webui/src/components/toolcalls/shared/CollapsibleOutput.tsx
index 4e73f141e01..2f767d7cb8c 100644
--- a/packages/webui/src/components/toolcalls/shared/CollapsibleOutput.tsx
+++ b/packages/webui/src/components/toolcalls/shared/CollapsibleOutput.tsx
@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useState, type FC, type ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
+import { useControlledExpanded } from '../../../context/ExpandControlContext.js';
 
 interface CollapsibleOutputProps {
   children: ReactNode;
@@ -24,7 +25,7 @@ export const CollapsibleOutput: FC<CollapsibleOutputProps> = ({
   fadeStart = 140,
   className = '',
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useControlledExpanded(false);
 
   return (
     <div className="flex flex-col gap-[3px]">
diff --git a/packages/webui/src/context/ExpandControlContext.tsx b/packages/webui/src/context/ExpandControlContext.tsx
new file mode 100644
index 00000000000..2c2bb73ebe6
--- /dev/null
+++ b/packages/webui/src/context/ExpandControlContext.tsx
@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  createContext,
+  useContext,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+
+/**
+ * Value published by a container (e.g. ChatViewer) that wants to issue
+ * global "expand all" / "collapse all" commands to the collapsible
+ * sections it renders.
+ */
+export interface ExpandControlContextValue {
+  /**
+   * Monotonic counter bumped every time a global expand/collapse command
+   * is issued. Components sync to `expanded` only when this changes, so
+   * unrelated re-renders never disturb their local toggle state.
+   */
+  signal: number;
+  /** Target expanded state carried by the latest signal. */
+  expanded: boolean;
+}
+
+/**
+ * Context used to broadcast global expand/collapse commands.
+ * Null when no ancestor provides the control — collapsible components
+ * then behave exactly as before (purely local state).
+ */
+export const ExpandControlContext =
+  createContext<ExpandControlContextValue | null>(null);
+
+/**
+ * Read the nearest global expand control, if any.
+ */
+export function useExpandControl(): ExpandControlContextValue | null {
+  return useContext(ExpandControlContext);
+}
+
+/**
+ * Local expanded state for a collapsible UI element that also obeys
+ * global expand/collapse signals from the nearest
+ * {@link ExpandControlContext}.
+ *
+ * - Without a provider: identical to `useState(defaultExpanded)`.
+ * - With a provider: when a new global signal fires the local state is
+ *   synced to the signal's target; individual toggles keep working and
+ *   are not overridden until the next global signal.
+ * - Mounting after a global signal inherits the latest target instead of
+ *   falling back to the component default.
+ */
+export function useControlledExpanded(
+  defaultExpanded = false,
+): [boolean, Dispatch<SetStateAction<boolean>>] {
+  const control = useContext(ExpandControlContext);
+  const signal = control?.signal ?? 0;
+  const [isExpanded, setIsExpanded] = useState(() =>
+    control && signal > 0 ? control.expanded : defaultExpanded,
+  );
+  const [lastSignal, setLastSignal] = useState(signal);
+
+  // Sync during render (React's "adjusting state while rendering" pattern)
+  // instead of in an effect: an effect would let every consumer commit once
+  // with its stale value before the sync fires, so each global command
+  // would reconcile every collapsible section twice and land the visible
+  // change one commit late. The previous signal is tracked in state rather
+  // than a ref so the guard survives discarded render passes under
+  // concurrent scheduling: a ref mutation persists even when React throws
+  // the render away, permanently desyncing the consumer from the signal,
+  // while a render-phase state update is re-applied on the retried render.
+  if (signal !== lastSignal) {
+    setLastSignal(signal);
+    if (control && signal > 0) {
+      setIsExpanded(control.expanded);
+    }
+  }
+
+  return [isExpanded, setIsExpanded];
+}
diff --git a/packages/webui/src/index.ts b/packages/webui/src/index.ts
index 87cbcbc21a9..8eb490c8667 100644
--- a/packages/webui/src/index.ts
+++ b/packages/webui/src/index.ts
@@ -25,6 +25,13 @@ export type {
   PlatformType,
 } from './context/PlatformContext';
 
+export {
+  ExpandControlContext,
+  useExpandControl,
+  useControlledExpanded,
+} from './context/ExpandControlContext';
+export type { ExpandControlContextValue } from './context/ExpandControlContext';
+
 // Layout components
 export { default as Container } from './components/layout/Container';
 export { default as Header } from './components/layout/Header';