@seed-ship/mcp-ui-solid 6.17.0 → 6.18.0

package/src/adapters/presentation.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createComparisonLayout,
+  createEvidenceLayout,
+  createGeographyLayout,
+  type ChartComponent,
+  type LinkComponent,
+  type MapComponent,
+  type MetricComponent,
+  type TableComponent,
+  type TextComponent,
+} from './presentation'
+
+const chart: ChartComponent = {
+  id: 'caller-chart', type: 'chart',
+  params: { type: 'scatter', data: { labels: ['A'], datasets: [{ label: 'score', data: [{ x: 1, y: 2 }] }] } },
+  metadata: { generatedAt: '2026-09-14T00:00:00.000Z', confidence: 0.8 },
+}
+const table: TableComponent = {
+  id: 'caller-table', type: 'table',
+  params: {
+    columns: [{ key: 'claim', label: 'Claim' }], rows: [{ claim: '[📄 CITATION 1]' }],
+    citationMap: { '1': { page: 3, file: 'source.pdf' } },
+  },
+}
+const map: MapComponent = {
+  id: 'caller-map', type: 'map',
+  params: { geojson: { type: 'FeatureCollection', features: [] }, fitBounds: true },
+}
+const summary: TextComponent = {
+  id: 'caller-summary', type: 'text',
+  params: { content: 'Caller-provided conclusion.', markdown: true },
+}
+const metric = (id: string): MetricComponent => ({
+  id, type: 'metric', params: { title: id, value: 1 },
+})
+const source = (id: string): LinkComponent => ({
+  id, type: 'link', params: { url: 'https://example.test', label: id },
+})
+
+describe('presentation recipes', () => {
+  it('creates a deterministic comparison with preserved source params and metadata', () => {
+    const metadata = { query: 'compare', generatedAt: '2026-09-14T00:00:00.000Z', totalComponents: 5 }
+    const input = { id: 'comparison-q3', chart, table, metrics: [metric('m-one'), metric('m-two')], summary, metadata }
+    const first = createComparisonLayout(input)
+    const second = createComparisonLayout(input)
+
+    expect(first).toEqual(second)
+    expect(first.components.map((component) => component.id)).toEqual(['caller-summary', 'm-one', 'm-two', 'caller-chart', 'caller-table'])
+    expect(first.components.at(-2)?.position).toEqual({ colStart: 1, colSpan: 7, rowStart: 3 })
+    expect(first.components.at(-1)?.position).toEqual({ colStart: 8, colSpan: 5, rowStart: 3 })
+    expect(first.components.at(-1)?.params).toEqual(table.params)
+    expect(first.components.at(-2)?.metadata).toEqual(chart.metadata)
+    expect(first.metadata).toEqual(metadata)
+    expect(table.position).toBeUndefined()
+  })
+
+  it('creates a geography overview with map before its tabular detail', () => {
+    const layout = createGeographyLayout({ id: 'geography-q3', map, table, metrics: [metric('geo-metric')] })
+    expect(layout.components.map((component) => component.type)).toEqual(['metric', 'map', 'table'])
+    expect(layout.components[1].position).toEqual({ colStart: 1, colSpan: 8, rowStart: 2 })
+    expect(layout.components[2].position).toEqual({ colStart: 9, colSpan: 4, rowStart: 2 })
+    expect(layout.components[1].params).toEqual(map.params)
+  })
+
+  it('keeps evidence source order and caller ids', () => {
+    const layout = createEvidenceLayout({ id: 'evidence-q3', summary, table, sources: [source('first'), source('second')] })
+    expect(layout.components.map((component) => component.id)).toEqual(['caller-summary', 'caller-table', 'first', 'second'])
+    expect(layout.components[2].params).toEqual(source('first').params)
+    expect(layout.components[3].params).toEqual(source('second').params)
+  })
+
+  it('wraps metrics and source links onto later rows without overlapping positions', () => {
+    const comparison = createComparisonLayout({
+      id: 'many-metrics', chart, table,
+      metrics: ['one', 'two', 'three', 'four', 'five'].map(metric),
+    })
+    expect(comparison.components.slice(0, 5).map((component) => component.position)).toEqual([
+      { colStart: 1, colSpan: 3, rowStart: 1 },
+      { colStart: 4, colSpan: 3, rowStart: 1 },
+      { colStart: 7, colSpan: 3, rowStart: 1 },
+      { colStart: 10, colSpan: 3, rowStart: 1 },
+      { colStart: 1, colSpan: 3, rowStart: 2 },
+    ])
+    expect(comparison.components.at(-2)?.position?.rowStart).toBe(3)
+
+    const evidence = createEvidenceLayout({
+      id: 'many-sources', summary, table,
+      sources: ['one', 'two', 'three', 'four'].map(source),
+    })
+    expect(evidence.components.slice(2).map((component) => component.position)).toEqual([
+      { colStart: 1, colSpan: 4, rowStart: 3 },
+      { colStart: 5, colSpan: 4, rowStart: 3 },
+      { colStart: 9, colSpan: 4, rowStart: 3 },
+      { colStart: 1, colSpan: 4, rowStart: 4 },
+    ])
+  })
+
+  it('rejects incompatible types and duplicate ids, including nested grid children', () => {
+    expect(() => createComparisonLayout({ id: 'bad', chart: { ...table, id: 'wrong-chart' } as unknown as ChartComponent, table })).toThrow('chart must be a chart component')
+    expect(() => createEvidenceLayout({ id: 'evidence-q3', summary, table, sources: [source('dup'), source('dup')] })).toThrow('Duplicate component id: dup')
+    const nestedGrid = {
+      id: 'nested-grid', type: 'grid', position: { colStart: 1, colSpan: 12 },
+      params: { children: [{ ...metric('nested-dup') }, { ...metric('nested-dup') }] },
+    }
+    expect(() => createComparisonLayout({ id: 'nested', chart, table, metrics: [nestedGrid as unknown as MetricComponent] })).toThrow('Duplicate component id: nested-dup')
+  })
+
+  it('rejects ids that cannot be safely used as stable component keys', () => {
+    expect(() => createGeographyLayout({ id: 'Not stable', map, table })).toThrow('Presentation layout id')
+    expect(() => createGeographyLayout({ id: undefined as unknown as string, map, table })).toThrow('Presentation layout id')
+    expect(() => createGeographyLayout({ id: 123 as unknown as string, map, table })).toThrow('Presentation layout id')
+  })
+})

package/src/adapters/presentation.ts

@@ -0,0 +1,229 @@
+/**
+ * Opt-in, pure presentation recipes for existing MCP-UI components.
+ *
+ * These helpers arrange caller-supplied components only. They never fetch,
+ * aggregate, sort, infer confidence, or manufacture sources: data, params,
+ * citations and component metadata remain the caller's responsibility.
+ */
+
+import type {
+  ChartComponentParams,
+  GridPosition,
+  MapComponentParams,
+  MetricComponentParams,
+  TableComponentParams,
+  TextComponentParams,
+  UIComponent,
+  UILayout,
+} from '../types'
+import type { LinkComponentParams } from '@seed-ship/mcp-ui-spec'
+
+type PresentationType = 'chart' | 'table' | 'map' | 'metric' | 'text' | 'link'
+
+/** A recipe owns the eventual grid position, so caller positions are optional. */
+export type PresentationComponent<T extends PresentationType, Params> = Omit<
+  UIComponent,
+  'type' | 'params' | 'position'
+> & {
+  type: T
+  params: Params
+  position?: GridPosition
+}
+
+export type ChartComponent = PresentationComponent<'chart', ChartComponentParams>
+export type TableComponent = PresentationComponent<'table', TableComponentParams>
+export type MapComponent = PresentationComponent<'map', MapComponentParams>
+export type MetricComponent = PresentationComponent<'metric', MetricComponentParams>
+export type TextComponent = PresentationComponent<'text', TextComponentParams>
+export type LinkComponent = PresentationComponent<'link', LinkComponentParams>
+
+export interface ComparisonLayoutInput {
+  /** Stable layout id; lower-case letters, digits and hyphens only. */
+  id: string
+  chart: ChartComponent
+  table: TableComponent
+  metrics?: MetricComponent[]
+  summary?: TextComponent
+  metadata?: UILayout['metadata']
+}
+
+export interface GeographyLayoutInput {
+  /** Stable layout id; lower-case letters, digits and hyphens only. */
+  id: string
+  map: MapComponent
+  table: TableComponent
+  metrics?: MetricComponent[]
+  summary?: TextComponent
+  metadata?: UILayout['metadata']
+}
+
+export interface EvidenceLayoutInput {
+  /** Stable layout id; lower-case letters, digits and hyphens only. */
+  id: string
+  summary: TextComponent
+  table: TableComponent
+  sources?: LinkComponent[]
+  metadata?: UILayout['metadata']
+}
+
+const ID_PATTERN = /^[a-z0-9-]+$/
+const DEFAULT_GRID = { columns: 12, gap: '1rem' } as const
+
+/**
+ * Presents a comparison in reading order: optional context and KPIs, then a
+ * chart beside the complete table. The supplied rows and chart series keep
+ * their original order.
+ */
+export function createComparisonLayout(input: ComparisonLayoutInput): UILayout {
+  assertRecipeId(input.id)
+  const inputComponents: Array<PresentationComponent<PresentationType, unknown>> = [
+    input.chart, input.table, ...(input.metrics ?? []),
+  ]
+  if (input.summary) inputComponents.push(input.summary)
+  assertUniqueComponentIds(inputComponents)
+  assertType(input.chart, 'chart', 'chart')
+  assertType(input.table, 'table', 'table')
+  input.metrics?.forEach((metric, index) => assertType(metric, 'metric', `metrics[${index}]`))
+  if (input.summary) assertType(input.summary, 'text', 'summary')
+
+  let row = 1
+  const components: UIComponent[] = []
+  if (input.summary) {
+    components.push(copyForLayout(input.summary, fullWidth(row++)))
+  }
+  components.push(...placeMetrics(input.metrics ?? [], row))
+  row += metricRows(input.metrics?.length ?? 0)
+  components.push(
+    copyForLayout(input.chart, { colStart: 1, colSpan: 7, rowStart: row }),
+    copyForLayout(input.table, { colStart: 8, colSpan: 5, rowStart: row })
+  )
+  return makeLayout(input.id, components, input.metadata)
+}
+
+/**
+ * Pairs a geographic overview with the corresponding inspectable table.
+ * Map and table data are passed through unchanged, including GeoJSON and
+ * citation maps.
+ */
+export function createGeographyLayout(input: GeographyLayoutInput): UILayout {
+  assertRecipeId(input.id)
+  const inputComponents: Array<PresentationComponent<PresentationType, unknown>> = [
+    input.map, input.table, ...(input.metrics ?? []),
+  ]
+  if (input.summary) inputComponents.push(input.summary)
+  assertUniqueComponentIds(inputComponents)
+  assertType(input.map, 'map', 'map')
+  assertType(input.table, 'table', 'table')
+  input.metrics?.forEach((metric, index) => assertType(metric, 'metric', `metrics[${index}]`))
+  if (input.summary) assertType(input.summary, 'text', 'summary')
+
+  let row = 1
+  const components: UIComponent[] = []
+  if (input.summary) {
+    components.push(copyForLayout(input.summary, fullWidth(row++)))
+  }
+  components.push(...placeMetrics(input.metrics ?? [], row))
+  row += metricRows(input.metrics?.length ?? 0)
+  components.push(
+    copyForLayout(input.map, { colStart: 1, colSpan: 8, rowStart: row }),
+    copyForLayout(input.table, { colStart: 9, colSpan: 4, rowStart: row })
+  )
+  return makeLayout(input.id, components, input.metadata)
+}
+
+/**
+ * Puts the conclusion first, evidence table second, and supplied source links
+ * last. Source order is deliberately preserved: this is a presentation recipe,
+ * not a confidence or provenance ranking algorithm.
+ */
+export function createEvidenceLayout(input: EvidenceLayoutInput): UILayout {
+  assertRecipeId(input.id)
+  const pieces = [input.summary, input.table, ...(input.sources ?? [])]
+  assertType(input.summary, 'text', 'summary')
+  assertType(input.table, 'table', 'table')
+  input.sources?.forEach((source, index) => assertType(source, 'link', `sources[${index}]`))
+  assertUniqueComponentIds(pieces)
+
+  const components: UIComponent[] = [
+    copyForLayout(input.summary, fullWidth(1)),
+    copyForLayout(input.table, fullWidth(2)),
+    ...placeSources(input.sources ?? [], 3),
+  ]
+  return makeLayout(input.id, components, input.metadata)
+}
+
+function makeLayout(id: string, components: UIComponent[], metadata?: UILayout['metadata']): UILayout {
+  assertUniqueComponentIds(components)
+  return { id, components, grid: { ...DEFAULT_GRID }, ...(metadata ? { metadata: { ...metadata } } : {}) }
+}
+
+function fullWidth(rowStart: number): GridPosition {
+  return { colStart: 1, colSpan: 12, rowStart }
+}
+
+function placeMetrics(metrics: MetricComponent[], rowStart: number): UIComponent[] {
+  if (metrics.length === 0) return []
+  const span = metrics.length === 1 ? 12 : metrics.length === 2 ? 6 : metrics.length === 3 ? 4 : 3
+  return metrics.map((metric, index) => {
+    const column = (index % Math.floor(12 / span)) * span + 1
+    const row = rowStart + Math.floor(index / Math.floor(12 / span))
+    return copyForLayout(metric, { colStart: column, colSpan: span, rowStart: row })
+  })
+}
+
+function metricRows(count: number): number {
+  if (count === 0) return 0
+  if (count <= 4) return 1
+  return Math.ceil(count / 4)
+}
+
+function placeSources(sources: LinkComponent[], rowStart: number): UIComponent[] {
+  return sources.map((source, index) => ({
+    ...copyForLayout(source, {
+      colStart: (index % 3) * 4 + 1,
+      colSpan: 4,
+      rowStart: rowStart + Math.floor(index / 3),
+    }),
+  }))
+}
+
+function copyForLayout(
+  component: PresentationComponent<PresentationType, unknown>,
+  position: GridPosition
+): UIComponent {
+  return {
+    ...component,
+    position: { ...position },
+  } as UIComponent
+}
+
+function assertRecipeId(id: string): void {
+  if (typeof id !== 'string' || !ID_PATTERN.test(id)) {
+    throw new Error('Presentation layout id must contain only lower-case letters, digits and hyphens.')
+  }
+}
+
+function assertType(component: { type: string }, expected: PresentationType, path: string): void {
+  if (component?.type !== expected) {
+    throw new Error(`${path} must be a ${expected} component.`)
+  }
+}
+
+/** Validates source IDs recursively so nested GridRenderer children stay key-safe. */
+function assertUniqueComponentIds(components: Array<UIComponent | PresentationComponent<PresentationType, unknown>>): void {
+  const ids = new Set<string>()
+  const visit = (component: { id: unknown; type?: unknown; params?: unknown }, path: string): void => {
+    if (!component || typeof component.id !== 'string' || !ID_PATTERN.test(component.id)) {
+      throw new Error(`${path} must have a stable lower-case component id.`)
+    }
+    if (ids.has(component.id)) throw new Error(`Duplicate component id: ${component.id}`)
+    ids.add(component.id)
+    if (component.type === 'grid') {
+      const children = (component.params as { children?: unknown })?.children
+      if (Array.isArray(children)) {
+        children.forEach((child, index) => visit(child as { id: unknown; type?: unknown; params?: unknown }, `${path}.children[${index}]`))
+      }
+    }
+  }
+  components.forEach((component, index) => visit(component, `components[${index}]`))
+}

package/src/components/ChartJSRenderer.test.tsx

@@ -0,0 +1,325 @@
+import { cleanup, fireEvent, render, waitFor } from '@solidjs/testing-library';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createSignal } from 'solid-js';
+import type { UIComponent } from '../types';
+import { MCPUIStringsProvider } from '../context/MCPUIStringsContext';
+import { ChartJSRenderer } from './ChartJSRenderer';
+import { ScratchpadPanel } from './ScratchpadPanel';
+import { UIResourceRenderer } from './UIResourceRenderer';
+import { chartToDataTable } from './chart-data-table';
+
+const chartHarness = vi.hoisted(() => ({
+  fail: false,
+  configs: [] as unknown[],
+  instances: [] as Array<{ destroy: ReturnType<typeof vi.fn>; resize: ReturnType<typeof vi.fn> }>,
+}));
+
+vi.mock('chart.js/auto', () => {
+  class FakeChart {
+    destroy = vi.fn();
+    resize = vi.fn();
+
+    constructor(_canvas: HTMLCanvasElement, config: unknown) {
+      if (chartHarness.fail) throw new Error('paint failed');
+      chartHarness.configs.push(config);
+      chartHarness.instances.push(this);
+    }
+  }
+
+  return { default: FakeChart };
+});
+
+function chartComponent(params: Record<string, unknown> = {}): UIComponent {
+  return {
+    id: 'chart-1',
+    type: 'chart',
+    position: { colStart: 1, colSpan: 6 },
+    params: {
+      type: 'bar',
+      title: 'Quarterly sales',
+      data: {
+        labels: ['Q1', 'Q2'],
+        datasets: [{ label: 'Revenue', data: [10, 20] }],
+      },
+      exportable: false,
+      ...params,
+    },
+  } as UIComponent;
+}
+
+describe('chartToDataTable', () => {
+  it('projects categorical bar and line data without dropping uneven values', () => {
+    expect(
+      chartToDataTable({
+        type: 'line',
+        data: {
+          labels: ['Jan', 'Feb'],
+          datasets: [
+            { label: 'North', data: [1, 2] },
+            { label: 'South', data: [3] },
+          ],
+        },
+      }),
+    ).toEqual({
+      columns: ['Label', 'North', 'South'],
+      rows: [
+        ['Jan', 1, 3],
+        ['Feb', 2, ''],
+      ],
+    });
+  });
+
+  it('keeps scatter x/y and bubble x/y/r in separate cells', () => {
+    expect(
+      chartToDataTable({
+        type: 'scatter',
+        data: { datasets: [{ label: 'Observations', data: [{ x: 2, y: 8 }] }] },
+      }),
+    ).toEqual({
+      columns: ['Series', 'Point', 'x', 'y'],
+      rows: [['Observations', 1, 2, 8]],
+    });
+
+    expect(
+      chartToDataTable({
+        type: 'bubble',
+        data: { datasets: [{ label: 'Cities', data: [{ x: 4, y: 6, r: 12 }] }] },
+      }),
+    ).toEqual({
+      columns: ['Series', 'Point', 'x', 'y', 'r'],
+      rows: [['Cities', 1, 4, 6, 12]],
+    });
+  });
+});
+
+describe('<ChartJSRenderer>', () => {
+  beforeEach(() => {
+    chartHarness.fail = false;
+    chartHarness.configs.length = 0;
+    chartHarness.instances.length = 0;
+  });
+
+  afterEach(() => cleanup());
+
+  it('keeps the native chart default and exposes a titled, described canvas', async () => {
+    const { getByRole } = render(() => <ChartJSRenderer component={chartComponent()} />);
+
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(1));
+    const canvas = getByRole('img', { name: 'Quarterly sales' });
+    const description = document.getElementById(canvas.getAttribute('aria-describedby')!);
+
+    expect(description?.textContent).toContain('Quarterly sales');
+    expect(description?.textContent).toContain('Exact values are available in the data view.');
+    expect(chartHarness.configs[0]).toMatchObject({
+      type: 'bar',
+      data: { labels: ['Q1', 'Q2'] },
+    });
+  });
+
+  it('uses keyboard-native buttons to toggle a successful chart to its exact data', async () => {
+    const { getByRole, getAllByRole } = render(() => (
+      <ChartJSRenderer component={chartComponent({ exportable: true })} />
+    ));
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(1));
+
+    const chartButton = getByRole('button', { name: 'Chart' });
+    const dataButton = getByRole('button', { name: 'Data' });
+    expect(chartButton.tagName).toBe('BUTTON');
+    expect(dataButton.tabIndex).toBe(0);
+    expect(chartButton.getAttribute('aria-pressed')).toBe('true');
+
+    fireEvent.click(dataButton);
+    expect(dataButton.getAttribute('aria-pressed')).toBe('true');
+    expect(getByRole('button', { name: 'Download chart as PNG' }).hasAttribute('disabled')).toBe(true);
+    expect(getByRole('table', { name: 'Quarterly sales — Chart data' })).toBeTruthy();
+    expect(getAllByRole('columnheader').map((cell) => cell.textContent)).toEqual([
+      'Label',
+      'Revenue',
+    ]);
+    expect(getAllByRole('cell').map((cell) => cell.textContent)).toEqual(['Q1', '10', 'Q2', '20']);
+
+    fireEvent.click(chartButton);
+    await waitFor(() => expect(chartHarness.instances[0].resize).toHaveBeenCalled());
+  });
+
+  it('bounds every inline data row to the configured height and fills the expanded viewport', async () => {
+    const labels = Array.from({ length: 40 }, (_, index) => `Row ${index + 1}`);
+    const values = labels.map((_, index) => index + 1);
+    const { getByRole, getByLabelText } = render(() => (
+      <ChartJSRenderer
+        component={chartComponent({
+          height: '18rem',
+          data: { labels, datasets: [{ label: 'Revenue', data: values }] },
+        })}
+      />
+    ));
+
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(1));
+    fireEvent.click(getByRole('button', { name: 'Data' }));
+    const table = getByRole('table', { name: 'Quarterly sales — Chart data' });
+    const viewport = table.parentElement!;
+
+    expect(viewport.style.height).toBe('18rem');
+    expect(viewport.style.maxHeight).toBe('70vh');
+    expect(viewport.classList.contains('overflow-auto')).toBe(true);
+    expect(table.textContent).toContain('Row 40');
+    expect(table.textContent).toContain('40');
+
+    fireEvent.click(getByLabelText('Expand to fullscreen'));
+    await waitFor(() =>
+      expect(document.querySelector('[role="dialog"][aria-label="Quarterly sales"]')).toBeTruthy(),
+    );
+    expect(viewport.style.height).toBe('');
+    expect(viewport.style.maxHeight).toBe('');
+    expect(viewport.classList.contains('flex-1')).toBe(true);
+    expect(viewport.classList.contains('min-h-0')).toBe(true);
+    expect(table.textContent).toContain('Row 40');
+    expect(chartHarness.instances).toHaveLength(1);
+  });
+
+  it('uses the default data height and applies a custom class to the chart wrapper', () => {
+    const { container, getByRole } = render(() => (
+      <ChartJSRenderer component={chartComponent({ className: 'consumer-chart-shell' })} />
+    ));
+
+    fireEvent.click(getByRole('button', { name: 'Data' }));
+    const table = getByRole('table', { name: 'Quarterly sales — Chart data' });
+    const wrapper = container.querySelector('.consumer-chart-shell');
+
+    expect(table.parentElement?.style.height).toBe('250px');
+    expect(wrapper).toBeTruthy();
+    expect(wrapper?.contains(table)).toBe(true);
+    expect(wrapper?.classList.contains('rounded-lg')).toBe(true);
+  });
+
+  it('makes the data view available while the native chart is still loading', () => {
+    const { getByRole, queryByText } = render(() => (
+      <ChartJSRenderer component={chartComponent()} />
+    ));
+
+    fireEvent.click(getByRole('button', { name: 'Data' }));
+    expect(getByRole('table', { name: 'Quarterly sales — Chart data' })).toBeTruthy();
+    expect(queryByText('Loading chart...')).toBeNull();
+  });
+
+  it('updates both Chart.js and the selected data view when props change', async () => {
+    const [component, setComponent] = createSignal(chartComponent());
+    const { getByRole } = render(() => <ChartJSRenderer component={component()} />);
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(1));
+    fireEvent.click(getByRole('button', { name: 'Data' }));
+
+    setComponent(
+      chartComponent({
+        title: 'Updated sales',
+        data: { labels: ['Q3'], datasets: [{ label: 'Revenue', data: [30] }] },
+      }),
+    );
+
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(2));
+    expect(chartHarness.instances[0].destroy).toHaveBeenCalledTimes(1);
+    expect(getByRole('table', { name: 'Updated sales — Chart data' }).textContent).toContain('30');
+  });
+
+  it('shows a localized empty state and localized view controls', async () => {
+    const component = chartComponent({
+      title: 'Vide',
+      data: { labels: [], datasets: [] },
+    });
+    const { getByRole, getByText } = render(() => (
+      <MCPUIStringsProvider
+        strings={{
+          chartView: 'Graphique',
+          chartDataView: 'Données',
+          chartViewSelector: 'Vue graphique ou données',
+          chartDataTable: 'Données du graphique',
+          chartDataSummary: 'Les valeurs exactes sont disponibles dans la vue données.',
+          chartNoData: 'Aucune donnée',
+        }}
+      >
+        <ChartJSRenderer component={component} />
+      </MCPUIStringsProvider>
+    ));
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(1));
+
+    expect(getByRole('group', { name: 'Vue graphique ou données' })).toBeTruthy();
+    fireEvent.click(getByRole('button', { name: 'Données' }));
+    expect(getByRole('table', { name: 'Vide — Données du graphique' })).toBeTruthy();
+    expect(getByText('Aucune donnée')).toBeTruthy();
+  });
+
+  it('retains a useful, coordinate-faithful table when Chart.js throws', async () => {
+    chartHarness.fail = true;
+    const onError = vi.fn();
+    const component = chartComponent({
+      type: 'bubble',
+      title: 'Bubbles',
+      data: { datasets: [{ label: 'Sample', data: [{ x: 1, y: 2, r: 3 }] }] },
+    });
+    const { getByText, getAllByRole } = render(() => (
+      <ChartJSRenderer component={component} onError={onError} />
+    ));
+
+    await waitFor(() => expect(getByText('Chart rendering failed: paint failed')).toBeTruthy());
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(getAllByRole('columnheader').map((cell) => cell.textContent)).toEqual([
+      'Series',
+      'Point',
+      'x',
+      'y',
+      'r',
+    ]);
+    expect(getAllByRole('cell').map((cell) => cell.textContent)).toEqual([
+      'Sample',
+      '1',
+      '1',
+      '2',
+      '3',
+    ]);
+  });
+
+  it('destroys the Chart.js instance on unmount', async () => {
+    const view = render(() => <ChartJSRenderer component={chartComponent()} />);
+    await waitFor(() => expect(chartHarness.instances).toHaveLength(1));
+
+    view.unmount();
+    expect(chartHarness.instances[0].destroy).toHaveBeenCalledTimes(1);
+  });
+
+  it('exposes the data view through UIResourceRenderer native charts', async () => {
+    const { getByRole } = render(() => (
+      <UIResourceRenderer content={chartComponent({ renderer: 'native' })} />
+    ));
+
+    await waitFor(() => expect(getByRole('group', { name: 'Chart or data view' })).toBeTruthy());
+    fireEvent.click(getByRole('button', { name: 'Data' }));
+    expect(getByRole('table', { name: 'Quarterly sales — Chart data' })).toBeTruthy();
+  });
+
+  it('exposes the data view through ScratchpadPanel chart sections', async () => {
+    const { getByRole } = render(() => (
+      <ScratchpadPanel
+        state={{
+          id: 'scratch-1',
+          title: 'Analysis',
+          status: 'ready',
+          filters: {},
+          agentMessages: [],
+          sections: [
+            {
+              id: 'section-chart',
+              title: 'Sales',
+              type: 'chart',
+              editable: false,
+              source: 'agent',
+              content: chartComponent().params,
+            },
+          ],
+        }}
+      />
+    ));
+
+    await waitFor(() => expect(getByRole('group', { name: 'Chart or data view' })).toBeTruthy());
+    fireEvent.click(getByRole('button', { name: 'Data' }));
+    expect(getByRole('table', { name: 'Quarterly sales — Chart data' })).toBeTruthy();
+  });
+});