feat(web-shell): support compact echarts full data blocks

packages/core/src/skills/bundled/web-shell-charts/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: web-shell-charts
+description: Produce Qwen Code Web Shell renderable ECharts code blocks using the echarts-fulldata fenced-code format. Use when the user asks for charts or visual data output that should render directly in Web Shell.
+when_to_use: When the user asks to create, show, render, or visualize a chart in Qwen Code Web Shell, especially with ECharts or the echarts-fulldata fenced-code format.
+---
+
+# Web Shell Charts
+
+Use this skill to emit charts that a Web Shell host can render from Markdown
+code blocks.
+
+## Output Contract
+
+Emit a fenced code block with the language tag `echarts-fulldata`:
+
+```echarts-fulldata
+const option = {
+  title: { text: 'Weekly orders' },
+  tooltip: { trigger: 'axis' },
+  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'bar', data: [120, 200, 150, 80, 240] }],
+};
+```
+
+The code block body must define `option` as an Apache ECharts option object.
+The renderer decides how to load ECharts and execute the block.
+
+## Rules
+
+- Put all chart data inside the code block. Use `dataset.source`, `series.data`,
+  or other inline option fields. Do not reference local files, URLs, DOM nodes,
+  global app state, or network requests.
+- Keep the block deterministic and side-effect free. Do not use `fetch`,
+  `import`, timers, random data, `document`, `window`, or filesystem access.
+- Prefer plain object/array data. Avoid functions in the option unless the user
+  explicitly needs custom ECharts callbacks and the host is known to allow them.
+- Close the Markdown fence normally so the Web Shell can render after the fence
+  closes or streaming finishes.
+- Use the simplest chart that answers the question. Include clear titles, axis
+  labels, units, and readable number formats.
+- If the data is too large, aggregate or sample it before producing the chart
+  and explain that reduction outside the code block.
+- If a chart cannot be produced safely, explain the reason in normal Markdown
+  and do not emit an `echarts-fulldata` block.
+
+## Response Shape
+
+For chart answers, use this order:
+
+1. One short takeaway sentence.
+2. One `echarts-fulldata` fenced code block containing the complete option.
+3. Optional notes about data reduction, assumptions, or how to read the chart.
+
+Do not wrap the chart block in another Markdown container.

packages/web-shell/client/components/messages/Markdown.test.ts

@@ -4,8 +4,12 @@
 import { act, createElement, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { WebShellCustomizationProvider } from '../../customization';
+import {
+  WebShellCustomizationProvider,
+  type WebShellCodeBlockRenderInfo,
+} from '../../customization';
 import { I18nProvider } from '../../i18n';
+import { ThemeProvider } from '../../themeContext';
 import * as EnhancedTableModule from './EnhancedMarkdownTable';
 import {
   MAX_HIGHLIGHT_LINE_CHARS,
@@ -261,6 +265,9 @@ describe('resolveFenceLanguage', () => {
     expect(resolveFenceLanguage('ts').resolvedLang).toBe('typescript');
     expect(resolveFenceLanguage('js').resolvedLang).toBe('javascript');
     expect(resolveFenceLanguage('py').resolvedLang).toBe('python');
+    expect(resolveFenceLanguage('c++').resolvedLang).toBe('cpp');
+    expect(resolveFenceLanguage('c#').resolvedLang).toBe('csharp');
+    expect(resolveFenceLanguage('f#').resolvedLang).toBe('fsharp');
     expect(resolveFenceLanguage('sh').resolvedLang).toBe('bash');
     expect(resolveFenceLanguage('yml').resolvedLang).toBe('yaml');
     expect(resolveFenceLanguage('golang').resolvedLang).toBe('go');
@@ -334,6 +341,307 @@ describe('Markdown mermaid rendering', () => {
   });
 });
 
+describe('Markdown custom code block rendering', () => {
+  it('lets host renderers replace assistant fenced code blocks', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn((info: WebShellCodeBlockRenderInfo) => {
+      if (info.language !== 'echarts-fulldata') return undefined;
+      return createElement(
+        'div',
+        { 'data-chart-theme': info.theme },
+        `${info.source}:${info.isStreaming}:${info.code}`,
+      );
+    });
+
+    await act(async () => {
+      root.render(
+        createElement(
+          ThemeProvider,
+          { value: 'light' },
+          createElement(
+            WebShellCustomizationProvider,
+            { value: { markdown: { renderCodeBlock } } },
+            createElement(Markdown, {
+              content: '```echarts-fulldata\nconst option = {};\n```',
+              source: 'assistant',
+              isStreaming: true,
+            }),
+          ),
+        ),
+      );
+    });
+
+    expect(renderCodeBlock).toHaveBeenCalledWith({
+      language: 'echarts-fulldata',
+      className: 'language-echarts-fulldata',
+      code: 'const option = {};',
+      isStreaming: true,
+      source: 'assistant',
+      theme: 'light',
+    });
+    expect(
+      container.querySelector('[data-chart-theme="light"]'),
+    ).not.toBeNull();
+    expect(container.textContent).toContain(
+      'assistant:true:const option = {};',
+    );
+
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('falls back to the default code block when the host renderer declines', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => undefined);
+
+    await act(async () => {
+      root.render(
+        createElement(
+          ThemeProvider,
+          { value: 'light' },
+          createElement(
+            WebShellCustomizationProvider,
+            { value: { markdown: { renderCodeBlock } } },
+            createElement(Markdown, {
+              content: '```custom-chart\nconst option = {};\n```',
+              source: 'assistant',
+              isStreaming: false,
+            }),
+          ),
+        ),
+      );
+    });
+
+    expect(renderCodeBlock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        language: 'custom-chart',
+        className: 'language-custom-chart',
+        code: 'const option = {};',
+        theme: 'light',
+      }),
+    );
+    expect(container.textContent).toContain('custom-chart');
+    expect(container.querySelector('pre code')?.textContent).toContain(
+      'const option = {};',
+    );
+
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('falls back to the default code block when the host renderer returns null', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => null);
+
+    await act(async () => {
+      root.render(
+        createElement(
+          WebShellCustomizationProvider,
+          { value: { markdown: { renderCodeBlock } } },
+          createElement(Markdown, {
+            content: '```custom-chart\nconst option = {};\n```',
+            source: 'assistant',
+          }),
+        ),
+      );
+    });
+
+    expect(renderCodeBlock).toHaveBeenCalledOnce();
+    expect(container.textContent).toContain('custom-chart');
+    expect(container.querySelector('pre code')?.textContent).toContain(
+      'const option = {};',
+    );
+
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('does not call host renderers when markdown source is omitted', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => createElement('div', null, 'custom'));
+
+    await act(async () => {
+      root.render(
+        createElement(
+          WebShellCustomizationProvider,
+          { value: { markdown: { renderCodeBlock } } },
+          createElement(Markdown, {
+            content: '```echarts-fulldata\nconst option = {};\n```',
+          }),
+        ),
+      );
+    });
+
+    expect(renderCodeBlock).not.toHaveBeenCalled();
+    expect(container.textContent).toContain('echarts-fulldata');
+    expect(container.querySelector('pre code')?.textContent).toContain(
+      'const option = {};',
+    );
+
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('does not call host renderers for inline code', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => createElement('div', null, 'custom'));
+
+    await act(async () => {
+      root.render(
+        createElement(
+          WebShellCustomizationProvider,
+          { value: { markdown: { renderCodeBlock } } },
+          createElement(Markdown, {
+            content: 'Inline `const x = 1` example.',
+            source: 'assistant',
+          }),
+        ),
+      );
+    });
+
+    expect(renderCodeBlock).not.toHaveBeenCalled();
+    expect(container.querySelector('code')?.textContent).toBe('const x = 1');
+
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('does not call host renderers for unfenced multiline code blocks', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => createElement('div', null, 'custom'));
+
+    await act(async () => {
+      root.render(
+        createElement(
+          WebShellCustomizationProvider,
+          { value: { markdown: { renderCodeBlock } } },
+          createElement(Markdown, {
+            content: '    const x = 1;\n    const y = 2;',
+            source: 'assistant',
+          }),
+        ),
+      );
+    });
+
+    expect(renderCodeBlock).not.toHaveBeenCalled();
+    expect(container.querySelector('pre code')?.textContent).toContain(
+      'const x = 1;',
+    );
+
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it('falls back to the default code block when the host renderer throws', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => {
+      throw new Error('boom');
+    });
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    try {
+      await act(async () => {
+        root.render(
+          createElement(
+            WebShellCustomizationProvider,
+            { value: { markdown: { renderCodeBlock } } },
+            createElement(Markdown, {
+              content: '```echarts-fulldata\nconst option = {};\n```',
+              source: 'assistant',
+            }),
+          ),
+        );
+      });
+
+      expect(renderCodeBlock).toHaveBeenCalled();
+      expect(errorSpy).toHaveBeenCalledWith(
+        '[web-shell] custom code block renderer failed:',
+        expect.any(Error),
+      );
+      expect(container.textContent).toContain('echarts-fulldata');
+      expect(container.querySelector('pre code')?.textContent).toContain(
+        'const option = {};',
+      );
+    } finally {
+      errorSpy.mockRestore();
+      await act(async () => {
+        root.unmount();
+      });
+      container.remove();
+    }
+  });
+
+  it('falls back to the default code block when custom rendered content throws', async () => {
+    function ThrowingChart() {
+      throw new Error('render boom');
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const renderCodeBlock = vi.fn(() => createElement(ThrowingChart));
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    try {
+      await act(async () => {
+        root.render(
+          createElement(
+            WebShellCustomizationProvider,
+            { value: { markdown: { renderCodeBlock } } },
+            createElement(Markdown, {
+              content: '```echarts-fulldata\nconst option = {};\n```',
+              source: 'assistant',
+            }),
+          ),
+        );
+      });
+
+      expect(renderCodeBlock).toHaveBeenCalled();
+      expect(errorSpy).toHaveBeenCalledWith(
+        '[web-shell] custom code block renderer failed:',
+        expect.any(Error),
+        expect.any(String),
+      );
+      expect(container.textContent).toContain('echarts-fulldata');
+      expect(container.querySelector('pre code')?.textContent).toContain(
+        'const option = {};',
+      );
+    } finally {
+      errorSpy.mockRestore();
+      await act(async () => {
+        root.unmount();
+      });
+      container.remove();
+    }
+  });
+});
+
 describe('Markdown code highlighting while streaming', () => {
   it('keeps streamed code content visible while streaming', async () => {
     const container = document.createElement('div');