@seed-ship/mcp-ui-solid 6.5.0 → 6.6.0

package/src/components/PresentationFeedback.test.tsx

@@ -0,0 +1,163 @@
+/**
+ * v6.6.0 — PresentationFeedback (R3 / D9 of ROADMAP-opendata-macro-mcpui).
+ *
+ * Coverage:
+ *   1. Resting step shows the verdict buttons
+ *   2. "Clear" submits a `readable` verdict immediately
+ *   3. "Not clear" opens the detail step (does NOT submit yet)
+ *   4. Detail step assembles problems + preferredLayout + comment into the payload
+ *   5. base fields (connectorId/toolName/queryHash/renderKind/layoutType) are carried
+ *   6. Submission is best-effort — a rejected onSubmit promise does not throw
+ *   7. Labels are overridable via the `labels` prop
+ *   8. The layout picker is hidden when no options are given
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, cleanup, fireEvent } from '@solidjs/testing-library'
+import { PresentationFeedback } from './PresentationFeedback'
+import type { ConnectorRenderFeedback } from '@seed-ship/mcp-ui-spec'
+
+const BASE = {
+  connectorId: 'datagouv',
+  toolName: 'datagouv.search',
+  queryHash: 'a1b2c3d4',
+  renderKind: 'primary',
+  layoutType: 'table',
+}
+
+describe('PresentationFeedback (v6.6.0)', () => {
+  beforeEach(() => cleanup())
+
+  it('resting step shows both verdict buttons', () => {
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={() => {}} />
+    ))
+    expect(container.querySelector('[data-presentation-feedback-verdict="readable"]')).toBeTruthy()
+    expect(
+      container.querySelector('[data-presentation-feedback-verdict="not_readable"]')
+    ).toBeTruthy()
+    expect(container.querySelector('[data-presentation-feedback-step="idle"]')).toBeTruthy()
+  })
+
+  it('"Clear" submits a readable verdict immediately', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.verdict).toBe('readable')
+    expect(payload.connectorId).toBe('datagouv')
+    expect(payload.queryHash).toBe('a1b2c3d4')
+    expect(payload.renderKind).toBe('primary')
+    expect(payload.layoutType).toBe('table')
+  })
+
+  it('"Not clear" opens the detail step without submitting', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(container.querySelector('[data-presentation-feedback-step="detail"]')).toBeTruthy()
+    expect(container.querySelector('[data-presentation-feedback-submit]')).toBeTruthy()
+  })
+
+  it('detail step assembles problems + preferredLayout + comment', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback
+        {...BASE}
+        onSubmit={onSubmit}
+        preferredLayoutOptions={['table', 'bar', 'map']}
+      />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    fireEvent.click(container.querySelector('[data-presentation-feedback-problem="too_raw"]')!)
+    fireEvent.click(
+      container.querySelector('[data-presentation-feedback-problem="wrong_columns"]')!
+    )
+    fireEvent.click(container.querySelector('[data-presentation-feedback-layout="bar"]')!)
+    const textarea = container.querySelector('[data-presentation-feedback-comment]') as HTMLTextAreaElement
+    fireEvent.input(textarea, { target: { value: 'prefer a chart' } })
+    fireEvent.click(container.querySelector('[data-presentation-feedback-submit]')!)
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.verdict).toBe('not_readable')
+    expect(payload.problems).toEqual(['too_raw', 'wrong_columns'])
+    expect(payload.preferredLayout).toBe('bar')
+    expect(payload.comment).toBe('prefer a chart')
+  })
+
+  it('deselecting a problem chip removes it from the payload', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    const chip = container.querySelector('[data-presentation-feedback-problem="wrong_chart"]')!
+    fireEvent.click(chip) // select
+    fireEvent.click(chip) // deselect
+    fireEvent.click(container.querySelector('[data-presentation-feedback-submit]')!)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.problems).toBeUndefined()
+  })
+
+  it('flips to the ack step after submitting', () => {
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={() => {}} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    expect(container.querySelector('[data-presentation-feedback-ack]')).toBeTruthy()
+  })
+
+  it('submission is best-effort — a rejected onSubmit promise does not throw', () => {
+    const onSubmit = vi.fn(() => Promise.reject(new Error('network down')))
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    expect(() =>
+      fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    ).not.toThrow()
+    expect(container.querySelector('[data-presentation-feedback-ack]')).toBeTruthy()
+  })
+
+  it('labels are overridable via the labels prop', () => {
+    const { container } = render(() => (
+      <PresentationFeedback
+        {...BASE}
+        onSubmit={() => {}}
+        labels={{ readable: 'Lisible', notReadable: 'Pas lisible' }}
+      />
+    ))
+    const readableBtn = container.querySelector(
+      '[data-presentation-feedback-verdict="readable"]'
+    )
+    expect(readableBtn?.textContent).toBe('Lisible')
+  })
+
+  it('hides the layout picker when no options are given', () => {
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={() => {}} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    expect(container.querySelector('[data-presentation-feedback-layout]')).toBeNull()
+  })
+
+  it('omits queryHash from the payload when not provided', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback
+        connectorId="c"
+        toolName="t"
+        onSubmit={onSubmit}
+      />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.queryHash).toBeUndefined()
+  })
+})

package/src/components/PresentationFeedback.tsx

@@ -0,0 +1,326 @@
+/**
+ * PresentationFeedback — feedback on how a connector result was *presented*.
+ *
+ * @experimental
+ * @since v6.6.0 (R3 / D9 of ROADMAP-opendata-macro-mcpui)
+ *
+ * ## A separate axis from `FeedbackInline`
+ *
+ * MCP-UI has two distinct feedback widgets, kept separate on purpose
+ * (cf. R3) :
+ *
+ * - **`FeedbackInline`** — was the *answer* good? (response quality)
+ * - **`PresentationFeedback`** (this) — was the answer *shown well*?
+ *   (layout / readability)
+ *
+ * They are separate components, separate exports, separate payloads — so
+ * the two axes never collapse into one in the UX or in the logs.
+ *
+ * ## Stateless — host owns persistence and re-render
+ *
+ * On submit the component calls `onSubmit(feedback)` with a
+ * `ConnectorRenderFeedback` payload and flips to its acknowledgement state.
+ * It does NOT persist anything and does NOT re-render the result itself
+ * (cf. D1 : adapter pure + host-owned state). The host persists the
+ * feedback and, if it wants to "close the loop", re-runs its adapter with
+ * the corrected `preferredLayout`.
+ *
+ * Submission is best-effort : a rejected `onSubmit` promise is swallowed,
+ * the UI still flips.
+ *
+ * ## Localization
+ *
+ * All labels ship in English and are overridable via the `labels` prop
+ * (partial). This component carries its own label bag rather than routing
+ * through `MCPUIStringsProvider` — its label set is large and specific to
+ * this one widget.
+ *
+ * @example
+ * ```tsx
+ * <PresentationFeedback
+ *   connectorId="datagouv"
+ *   toolName="datagouv.search"
+ *   queryHash={result.queryHash}
+ *   layoutType="table"
+ *   preferredLayoutOptions={['table', 'bar', 'map']}
+ *   onSubmit={(fb) => fetch('/api/render-feedback', {
+ *     method: 'POST', body: JSON.stringify(fb),
+ *   })}
+ * />
+ * ```
+ */
+
+import { Component, Show, For, createSignal } from 'solid-js'
+import type {
+  ConnectorRenderFeedback,
+  ConnectorRenderProblem,
+  ConnectorPreferredLayout,
+} from '@seed-ship/mcp-ui-spec'
+
+/** The full set of problem tags, in display order. */
+const PROBLEM_ORDER: ConnectorRenderProblem[] = [
+  'too_raw',
+  'wrong_columns',
+  'wrong_chart',
+  'missing_context',
+  'wrong_unit',
+  'bad_grouping',
+  'missing_dataset_context',
+]
+
+export interface PresentationFeedbackLabels {
+  /** Resting-state question. */
+  prompt: string
+  /** Positive verdict button. */
+  readable: string
+  /** Negative verdict button — opens the detail step. */
+  notReadable: string
+  /** Heading of the detail step. */
+  problemsPrompt: string
+  /** Per-problem chip labels. */
+  problemTooRaw: string
+  problemWrongColumns: string
+  problemWrongChart: string
+  problemMissingContext: string
+  problemWrongUnit: string
+  problemBadGrouping: string
+  problemMissingDatasetContext: string
+  /** Heading of the optional layout picker. */
+  preferLayoutPrompt: string
+  /** Free-text comment placeholder. */
+  commentPlaceholder: string
+  /** Submit button of the detail step. */
+  submit: string
+  /** Acknowledgement shown after submission. */
+  ack: string
+}
+
+/** English defaults. Override via the `labels` prop for other locales. */
+export const DEFAULT_PRESENTATION_FEEDBACK_LABELS: PresentationFeedbackLabels = {
+  prompt: 'Is this shown clearly?',
+  readable: 'Clear',
+  notReadable: 'Not clear',
+  problemsPrompt: "What's off?",
+  problemTooRaw: 'Too raw',
+  problemWrongColumns: 'Wrong columns',
+  problemWrongChart: 'Wrong chart',
+  problemMissingContext: 'Missing context',
+  problemWrongUnit: 'Wrong unit',
+  problemBadGrouping: 'Bad grouping',
+  problemMissingDatasetContext: 'Missing dataset context',
+  preferLayoutPrompt: 'Better shown as',
+  commentPlaceholder: 'Anything else? (optional)',
+  submit: 'Send feedback',
+  ack: 'Thanks — noted.',
+}
+
+const PROBLEM_LABEL_KEY: Record<ConnectorRenderProblem, keyof PresentationFeedbackLabels> = {
+  too_raw: 'problemTooRaw',
+  wrong_columns: 'problemWrongColumns',
+  wrong_chart: 'problemWrongChart',
+  missing_context: 'problemMissingContext',
+  wrong_unit: 'problemWrongUnit',
+  bad_grouping: 'problemBadGrouping',
+  missing_dataset_context: 'problemMissingDatasetContext',
+}
+
+export interface PresentationFeedbackProps {
+  /** Connector whose result is being rated. */
+  connectorId: string
+  /** Tool that produced the result. */
+  toolName: string
+  /** Stable key tying feedback to a `ConnectorDynamicResultV1.queryHash`. */
+  queryHash?: string
+  /** What is being rated (e.g. `'primary'`). Passed through to the payload. */
+  renderKind?: string
+  /** The layout type currently shown (e.g. `'table'`). Passed through. */
+  layoutType?: string
+  /**
+   * Called once on submit with the assembled `ConnectorRenderFeedback`.
+   * Persistence + any re-render are the host's responsibility.
+   */
+  onSubmit: (feedback: ConnectorRenderFeedback) => void | Promise<void>
+  /**
+   * Layout alternatives offered in the detail step. Omit (or pass an empty
+   * array) to hide the layout picker entirely.
+   */
+  preferredLayoutOptions?: ConnectorPreferredLayout[]
+  /** Partial label override (English defaults otherwise). */
+  labels?: Partial<PresentationFeedbackLabels>
+  /** Extra Tailwind classes on the container. */
+  class?: string
+}
+
+/**
+ * @experimental
+ * Presentation-quality feedback widget (readable / not-readable + detail).
+ */
+export const PresentationFeedback: Component<PresentationFeedbackProps> = (props) => {
+  const [step, setStep] = createSignal<'idle' | 'detail' | 'done'>('idle')
+  const [problems, setProblems] = createSignal<Set<ConnectorRenderProblem>>(new Set())
+  const [preferred, setPreferred] = createSignal<ConnectorPreferredLayout | undefined>(undefined)
+  const [comment, setComment] = createSignal('')
+
+  const label = (key: keyof PresentationFeedbackLabels): string =>
+    props.labels?.[key] ?? DEFAULT_PRESENTATION_FEEDBACK_LABELS[key]
+
+  const emit = (feedback: ConnectorRenderFeedback) => {
+    try {
+      // Fire-and-forget — feedback is best-effort, a rejection must not
+      // break the UI (mirrors FeedbackInline).
+      const result = props.onSubmit(feedback)
+      if (result && typeof (result as Promise<void>).catch === 'function') {
+        ;(result as Promise<void>).catch(() => {
+          /* non-blocking */
+        })
+      }
+    } catch {
+      /* non-blocking */
+    }
+    setStep('done')
+  }
+
+  const base = (): Pick<
+    ConnectorRenderFeedback,
+    'connectorId' | 'toolName' | 'queryHash' | 'renderKind' | 'layoutType'
+  > => ({
+    connectorId: props.connectorId,
+    toolName: props.toolName,
+    ...(props.queryHash ? { queryHash: props.queryHash } : {}),
+    ...(props.renderKind ? { renderKind: props.renderKind } : {}),
+    ...(props.layoutType ? { layoutType: props.layoutType } : {}),
+  })
+
+  const submitReadable = () => emit({ ...base(), verdict: 'readable' })
+
+  const submitNotReadable = () => {
+    const picked = [...problems()]
+    const text = comment().trim()
+    emit({
+      ...base(),
+      verdict: 'not_readable',
+      ...(picked.length > 0 ? { problems: picked } : {}),
+      ...(preferred() ? { preferredLayout: preferred() } : {}),
+      ...(text ? { comment: text } : {}),
+    })
+  }
+
+  const toggleProblem = (p: ConnectorRenderProblem) => {
+    setProblems((prev) => {
+      const next = new Set(prev)
+      if (next.has(p)) next.delete(p)
+      else next.add(p)
+      return next
+    })
+  }
+
+  return (
+    <div
+      class={`text-xs ${props.class ?? ''}`.trim()}
+      data-presentation-feedback-step={step()}
+    >
+      {/* ── Step 1 : verdict ─────────────────────────────── */}
+      <Show when={step() === 'idle'}>
+        <div class="flex items-center gap-2">
+          <span class="text-deposium-slate-500">{label('prompt')}</span>
+          <button
+            type="button"
+            onClick={submitReadable}
+            class="px-2 py-0.5 rounded border border-gray-200 dark:border-gray-600 text-deposium-slate-600 dark:text-gray-300 hover:border-green-500 hover:text-green-600 transition-colors"
+            data-presentation-feedback-verdict="readable"
+          >
+            {label('readable')}
+          </button>
+          <button
+            type="button"
+            onClick={() => setStep('detail')}
+            class="px-2 py-0.5 rounded border border-gray-200 dark:border-gray-600 text-deposium-slate-600 dark:text-gray-300 hover:border-amber-500 hover:text-amber-600 transition-colors"
+            data-presentation-feedback-verdict="not_readable"
+          >
+            {label('notReadable')}
+          </button>
+        </div>
+      </Show>
+
+      {/* ── Step 2 : detail ──────────────────────────────── */}
+      <Show when={step() === 'detail'}>
+        <div class="flex flex-col gap-2 p-2 rounded-lg border border-gray-200 dark:border-gray-700">
+          <span class="font-medium text-deposium-slate-600 dark:text-gray-300">
+            {label('problemsPrompt')}
+          </span>
+
+          {/* Problem chips */}
+          <div class="flex flex-wrap gap-1">
+            <For each={PROBLEM_ORDER}>
+              {(p) => (
+                <button
+                  type="button"
+                  onClick={() => toggleProblem(p)}
+                  aria-pressed={problems().has(p)}
+                  data-presentation-feedback-problem={p}
+                  class={`px-2 py-0.5 rounded-full border transition-colors ${
+                    problems().has(p)
+                      ? 'border-amber-500 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-200'
+                      : 'border-gray-200 dark:border-gray-600 text-deposium-slate-500 hover:border-amber-400'
+                  }`}
+                >
+                  {label(PROBLEM_LABEL_KEY[p])}
+                </button>
+              )}
+            </For>
+          </div>
+
+          {/* Optional layout picker */}
+          <Show when={(props.preferredLayoutOptions?.length ?? 0) > 0}>
+            <div class="flex flex-wrap items-center gap-1">
+              <span class="text-deposium-slate-500">{label('preferLayoutPrompt')}</span>
+              <For each={props.preferredLayoutOptions}>
+                {(opt) => (
+                  <button
+                    type="button"
+                    onClick={() => setPreferred((cur) => (cur === opt ? undefined : opt))}
+                    aria-pressed={preferred() === opt}
+                    data-presentation-feedback-layout={opt}
+                    class={`px-2 py-0.5 rounded border transition-colors ${
+                      preferred() === opt
+                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200'
+                        : 'border-gray-200 dark:border-gray-600 text-deposium-slate-500 hover:border-blue-400'
+                    }`}
+                  >
+                    {opt}
+                  </button>
+                )}
+              </For>
+            </div>
+          </Show>
+
+          {/* Free-text comment */}
+          <textarea
+            value={comment()}
+            onInput={(e) => setComment(e.currentTarget.value)}
+            placeholder={label('commentPlaceholder')}
+            rows={2}
+            class="w-full rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 p-1.5 text-xs resize-y"
+            data-presentation-feedback-comment
+          />
+
+          <button
+            type="button"
+            onClick={submitNotReadable}
+            class="self-end px-3 py-1 rounded bg-amber-500 text-white font-medium hover:bg-amber-600 transition-colors"
+            data-presentation-feedback-submit
+          >
+            {label('submit')}
+          </button>
+        </div>
+      </Show>
+
+      {/* ── Step 3 : acknowledgement ─────────────────────── */}
+      <Show when={step() === 'done'}>
+        <span class="text-deposium-slate-500" data-presentation-feedback-ack>
+          {label('ack')}
+        </span>
+      </Show>
+    </div>
+  )
+}

package/src/components/StreamingUIRenderer.parity.test.tsx

@@ -0,0 +1,158 @@
+/**
+ * v6.6.0 — Streaming/static rendering parity (Gap 1 of ROADMAP-opendata-macro-mcpui).
+ *
+ * Before v6.6.0, `StreamingUIRenderer` used an inline simplified renderer
+ * (`StreamingComponentRenderer`) that only showed a component's type label +
+ * title — a streamed `table` did NOT render a real `<table>`. v6.6.0 deletes
+ * that and delegates each streamed `UIComponent` to the real
+ * `<UIResourceRenderer>`.
+ *
+ * These tests pin the parity : a component rendered through the streaming
+ * path produces the SAME functional DOM as the static path, and the legacy
+ * "type + title placeholder" markers are gone.
+ *
+ * `useStreamingUI` is mocked so components can be injected directly, without
+ * standing up an SSE endpoint.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, cleanup } from '@solidjs/testing-library'
+
+// ── Mock the SSE hook : inject a fixed component list ─────────────
+const streamedComponents = vi.fn<() => unknown[]>(() => [])
+
+vi.mock('../hooks/useStreamingUI', () => ({
+  useStreamingUI: () => ({
+    components: streamedComponents,
+    isLoading: () => false,
+    isStreaming: () => false,
+    error: () => null,
+    progress: () => ({ message: '', receivedCount: 0, totalCount: null }),
+    metadata: () => null,
+    startStreaming: () => {},
+    stopStreaming: () => {},
+  }),
+}))
+
+// Imported AFTER the mock declaration so the mock is in effect.
+const { StreamingUIRenderer } = await import('./StreamingUIRenderer')
+const { UIResourceRenderer } = await import('./UIResourceRenderer')
+
+const TABLE_COMPONENT = {
+  id: 'tbl-1',
+  type: 'table' as const,
+  position: { colStart: 1, colSpan: 12 },
+  params: {
+    title: 'Prix au m2',
+    columns: [
+      { key: 'ville', label: 'Ville' },
+      { key: 'prix', label: 'Prix/m2' },
+    ],
+    rows: [
+      { ville: 'Toulouse', prix: 3200 },
+      { ville: 'Montpellier', prix: 3600 },
+    ],
+  },
+}
+
+const METRIC_COMPONENT = {
+  id: 'mtr-1',
+  type: 'metric' as const,
+  position: { colStart: 1, colSpan: 4 },
+  params: { title: 'Prix median', value: 3400, unit: 'EUR/m2' },
+}
+
+const ACTION_GROUP_COMPONENT = {
+  id: 'ag-1',
+  type: 'action-group' as const,
+  position: { colStart: 1, colSpan: 12 },
+  params: {
+    actions: [
+      { label: 'Comparer avec Paris', action: 'tool-call', toolName: 'datagouv.search' },
+      { label: 'Charger le dataset', action: 'tool-call', toolName: 'datagouv.load' },
+    ],
+  },
+}
+
+describe('StreamingUIRenderer parity (v6.6.0)', () => {
+  beforeEach(() => {
+    cleanup()
+    streamedComponents.mockReturnValue([])
+  })
+
+  it('streams a real <table>, not a type-label placeholder', () => {
+    streamedComponents.mockReturnValue([TABLE_COMPONENT])
+    const { container } = render(() => (
+      <StreamingUIRenderer query="immobilier toulouse" spaceIds={[]} />
+    ))
+    // Real TableRenderer output — an actual <table> with the rows.
+    const table = container.querySelector('table')
+    expect(table).toBeTruthy()
+    expect(container.textContent).toContain('Toulouse')
+    expect(container.textContent).toContain('Montpellier')
+  })
+
+  it('does NOT emit the legacy simplified-renderer markers', () => {
+    streamedComponents.mockReturnValue([TABLE_COMPONENT])
+    const { container } = render(() => (
+      <StreamingUIRenderer query="immobilier toulouse" spaceIds={[]} />
+    ))
+    // The pre-v6.6.0 inline renderer printed "Component ID: xxxxxxxx..."
+    expect(container.textContent).not.toContain('Component ID:')
+  })
+
+  it('streamed table DOM matches the static UIResourceRenderer path', () => {
+    streamedComponents.mockReturnValue([TABLE_COMPONENT])
+    const streamed = render(() => (
+      <StreamingUIRenderer query="q" spaceIds={[]} />
+    ))
+    const streamedTableCells = streamed.container.querySelectorAll('table td, table th').length
+
+    cleanup()
+
+    const staticRender = render(() => <UIResourceRenderer content={TABLE_COMPONENT} />)
+    const staticTableCells = staticRender.container.querySelectorAll('table td, table th').length
+
+    expect(streamedTableCells).toBeGreaterThan(0)
+    expect(streamedTableCells).toBe(staticTableCells)
+  })
+
+  it('streams a real metric value', () => {
+    streamedComponents.mockReturnValue([METRIC_COMPONENT])
+    const { container } = render(() => (
+      <StreamingUIRenderer query="prix" spaceIds={[]} />
+    ))
+    expect(container.textContent).toContain('3400')
+    expect(container.textContent).toContain('Prix median')
+  })
+
+  it('streams a real action-group with clickable buttons', () => {
+    streamedComponents.mockReturnValue([ACTION_GROUP_COMPONENT])
+    const { container } = render(() => (
+      <StreamingUIRenderer query="immobilier" spaceIds={[]} />
+    ))
+    const buttons = Array.from(container.querySelectorAll('button'))
+    const labels = buttons.map((b) => b.textContent?.trim())
+    expect(labels).toContain('Comparer avec Paris')
+    expect(labels).toContain('Charger le dataset')
+  })
+
+  it('renders every streamed component (multi-component layout)', () => {
+    streamedComponents.mockReturnValue([TABLE_COMPONENT, METRIC_COMPONENT, ACTION_GROUP_COMPONENT])
+    const { container } = render(() => (
+      <StreamingUIRenderer query="dashboard" spaceIds={[]} />
+    ))
+    expect(container.querySelector('table')).toBeTruthy()
+    expect(container.textContent).toContain('Prix median')
+    expect(container.textContent).toContain('Comparer avec Paris')
+  })
+
+  it('carries data-mcp-ui-component-id on streamed components (v6.5.0 identity)', () => {
+    streamedComponents.mockReturnValue([TABLE_COMPONENT])
+    const { container } = render(() => (
+      <StreamingUIRenderer query="q" spaceIds={[]} />
+    ))
+    // Delegation to UIResourceRenderer means the v6.5.0 identity attrs apply.
+    expect(container.querySelector('[data-mcp-ui-component-id="tbl-1"]')).toBeTruthy()
+  })
+})