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

package/src/components/StreamingUIRenderer.tsx

@@ -1,8 +1,22 @@
 /**
- * StreamingUIRenderer Component - Phase 2
+ * StreamingUIRenderer Component
  *
- * Renders streaming dashboard components with skeleton states and progress indicators.
- * Uses the useStreamingUI hook for SSE connection and state management.
+ * Renders streaming dashboard components with skeleton states and progress
+ * indicators. Uses the `useStreamingUI` hook for SSE connection and state.
+ *
+ * ## Rendering parity (v6.6.0 — closes Gap 1 of ROADMAP-opendata-macro-mcpui)
+ *
+ * Each component received over SSE is delegated to the real
+ * `<UIResourceRenderer>`. Streamed `table` / `chart` / `map` / `action-group`
+ * therefore render with the SAME fidelity as a static layout — no more
+ * simplified "type + title" placeholder. Validation, telemetry, the error
+ * boundary and `errorMode` all come from `<UIResourceRenderer>`, so the two
+ * paths cannot drift.
+ *
+ * Delegation is a one-way value import (`UIResourceRenderer` never imports
+ * this file — no cycle). The streamed component's `position` is normalized
+ * to full-width before delegation : this component owns the 12-column grid,
+ * `<UIResourceRenderer>` only owns the component's own rendering.
  *
  * Features:
  * - Skeleton loading states while components stream
@@ -21,14 +35,11 @@
  * ```
  */
 
-import { Show, For, createSignal, onMount, onCleanup } from 'solid-js'
+import { Show, For, createSignal, onMount } from 'solid-js'
 import { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'
 import type { UIComponent, RendererError } from '../types'
-import { validateComponent } from '../services/validation'
-import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
-import { markRenderStart, markRenderEnd, PERF_PREFIX } from '../utils/perf'
-import { useTelemetry } from '../context/MCPUITelemetryContext'
-import type { ValidationErrorMode } from './UIResourceRenderer'
+import { UIResourceRenderer, type ValidationErrorMode } from './UIResourceRenderer'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface StreamingUIRendererProps extends UseStreamingUIOptions {
   class?: string
@@ -38,164 +49,27 @@ export interface StreamingUIRendererProps extends UseStreamingUIOptions {
   /**
    * How to react when a streamed component fails `validateComponent()`
    * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0
-   * behavior). See `ValidationErrorMode` in `UIResourceRenderer`.
+   * behavior). Forwarded to the delegated `<UIResourceRenderer>`.
    */
   errorMode?: ValidationErrorMode
+  /**
+   * Visibility behavior of the inline expand button on streamed components
+   * wrapped in `<ExpandableWrapper>` (v6.6.0 — parity with the static
+   * `<UIResourceRenderer toolbarVariant>` prop). Forwarded as-is.
+   */
+  toolbarVariant?: 'hover' | 'always-visible'
 }
 
 /**
- * Component Renderer - Inline lightweight version
- * (Full implementation in UIResourceRenderer)
+ * The 12-column placement of a streamed component is owned by this
+ * component's outer grid (the cell `<div>` below). Delegating the component
+ * verbatim to `<UIResourceRenderer>` would re-apply that placement inside a
+ * fresh nested 12-column grid and visually misplace it. We hand
+ * `<UIResourceRenderer>` a full-width copy so it only renders the component,
+ * not a competing layout.
  */
-function StreamingComponentRenderer(props: {
-  component: UIComponent
-  onError?: (error: RendererError) => void
-  errorMode?: ValidationErrorMode
-}) {
-  // Performance marks (v5.4.0) — see utils/perf.ts
-  markRenderStart(props.component.id)
-
-  // Telemetry sink (B.5 — v5.6.0). Same wiring as ComponentRenderer in
-  // UIResourceRenderer.tsx — null when no Provider, no-op everywhere then.
-  const telemetry = useTelemetry()
-
-  onMount(() => {
-    markRenderEnd(props.component.id)
-    if (telemetry) {
-      const ts = Date.now()
-      telemetry.dispatch({
-        type: 'component:mounted',
-        id: props.component.id,
-        componentType: props.component.type,
-        ts,
-      })
-      if (typeof performance !== 'undefined' && typeof performance.getEntriesByName === 'function') {
-        const entries = performance.getEntriesByName(`${PERF_PREFIX}${props.component.id}:render`, 'measure')
-        const last = entries[entries.length - 1]
-        if (last) {
-          telemetry.dispatch({
-            type: 'component:rendered',
-            id: props.component.id,
-            componentType: props.component.type,
-            durationMs: last.duration,
-            ts,
-          })
-        }
-      }
-    }
-  })
-
-  onCleanup(() => {
-    if (telemetry) {
-      telemetry.dispatch({
-        type: 'component:unmounted',
-        id: props.component.id,
-        componentType: props.component.type,
-        ts: Date.now(),
-      })
-    }
-  })
-
-  // Validate component before rendering
-  const validation = validateComponent(props.component)
-  if (!validation.valid) {
-    props.onError?.({
-      type: 'validation',
-      message: 'Component validation failed',
-      componentId: props.component.id,
-      details: validation.errors,
-    })
-
-    if (telemetry) {
-      telemetry.dispatch({
-        type: 'validation:failed',
-        id: props.component.id,
-        componentType: props.component.type,
-        errorCount: validation.errors?.length ?? 0,
-        firstErrorCode: validation.errors?.[0]?.code ?? null,
-        ts: Date.now(),
-      })
-    }
-
-    const mode: ValidationErrorMode = props.errorMode ?? 'block'
-    const firstError = validation.errors?.[0]?.message || 'Unknown validation error'
-
-    if (mode === 'silent') {
-      return null
-    }
-
-    if (mode === 'inline-warn') {
-      return (
-        <div
-          class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"
-          role="alert"
-          aria-label="Component validation warning"
-          title={firstError}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-3.5 h-3.5"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-            <line x1="12" y1="9" x2="12" y2="13" />
-            <line x1="12" y1="17" x2="12.01" y2="17" />
-          </svg>
-          <span>Invalid {props.component.type}</span>
-        </div>
-      )
-    }
-
-    return (
-      <div class="w-full bg-error-subtle border border-border-error rounded-lg p-4">
-        <p class="text-sm font-medium text-error-primary">Validation Error</p>
-        <p class="text-xs text-text-secondary mt-1">
-          {firstError}
-        </p>
-      </div>
-    )
-  }
-
-  // Simplified renderer - just show component type and title
-  // Full rendering logic in UIResourceRenderer
-  const params = props.component.params as any
-
-  return (
-    <GenerativeUIErrorBoundary
-      componentId={props.component.id}
-      componentType={props.component.type}
-      onError={props.onError}
-      allowRetry={false}
-    >
-      <div class="w-full bg-surface-secondary border border-border-subtle rounded-lg p-4">
-        <div class="flex items-center gap-2 mb-2">
-          <span class="text-xs font-medium text-text-tertiary uppercase">
-            {props.component.type}
-          </span>
-        </div>
-        <Show when={params?.title}>
-          <h3 class="text-sm font-semibold text-text-primary">{params.title}</h3>
-        </Show>
-        <Show when={props.component.type === 'metric' && params?.value}>
-          <div class="mt-2">
-            <p class="text-2xl font-semibold text-text-primary">{params.value}</p>
-            <Show when={params.unit}>
-              <span class="text-sm text-text-secondary">{params.unit}</span>
-            </Show>
-          </div>
-        </Show>
-        <div class="mt-3 text-xs text-text-tertiary">
-          Component ID: {props.component.id.slice(0, 8)}...
-        </div>
-      </div>
-    </GenerativeUIErrorBoundary>
-  )
+function asFullWidth(component: UIComponent): UIComponent {
+  return { ...component, position: { colStart: 1, colSpan: 12 } }
 }
 
 export function StreamingUIRenderer(props: StreamingUIRendererProps) {
@@ -210,6 +84,7 @@ export function StreamingUIRenderer(props: StreamingUIRendererProps) {
       onComponentReceived: props.onComponentReceived,
     })
 
+  const strings = useMCPUIStrings()
   const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())
 
   // Track new components for animation
@@ -292,7 +167,7 @@ export function StreamingUIRenderer(props: StreamingUIRendererProps) {
               class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover"
               onClick={() => startStreaming()}
             >
-              Retry
+              {strings.retry}
             </button>
           </Show>
         </div>
@@ -300,7 +175,7 @@ export function StreamingUIRenderer(props: StreamingUIRendererProps) {
 
       {/* Components Grid */}
       <div class="grid grid-cols-12 gap-4">
-        {/* Render received components */}
+        {/* Render received components — delegated to the real UIResourceRenderer */}
         <For each={components()}>
           {(component) => {
             // Trigger animation on mount (SSR-safe, no 'use' directive needed)
@@ -314,10 +189,11 @@ export function StreamingUIRenderer(props: StreamingUIRendererProps) {
                 `}
                 style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}
               >
-                <StreamingComponentRenderer
-                  component={component}
-                  onError={props.onRenderError}
+                <UIResourceRenderer
+                  content={asFullWidth(component)}
                   errorMode={props.errorMode}
+                  onError={props.onRenderError}
+                  toolbarVariant={props.toolbarVariant}
                 />
               </div>
             )

package/src/components/index.ts

@@ -10,6 +10,16 @@ export type { UIResourceRendererProps } from './UIResourceRenderer'
 export { StreamingUIRenderer } from './StreamingUIRenderer'
 export type { StreamingUIRendererProps } from './StreamingUIRenderer'
 
+// Presentation feedback (v6.6.0 — R3, distinct from FeedbackInline)
+export {
+  PresentationFeedback,
+  DEFAULT_PRESENTATION_FEEDBACK_LABELS,
+} from './PresentationFeedback'
+export type {
+  PresentationFeedbackProps,
+  PresentationFeedbackLabels,
+} from './PresentationFeedback'
+
 export { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
 export type { GenerativeUIErrorBoundaryProps } from './GenerativeUIErrorBoundary'
 

package/src/context/MCPUIStringsContext.test.tsx

@@ -0,0 +1,116 @@
+/**
+ * v6.6.0 — MCPUIStringsProvider (D2 / R4 of ROADMAP-opendata-macro-mcpui).
+ *
+ * Coverage:
+ *   1. Defaults are English, available with no provider mounted
+ *   2. Provider does a partial merge over the EN defaults
+ *   3. FeedbackInline reads chrome strings from the provider
+ *   4. FeedbackInline `positiveAck` / `negativeAck` props still win over the provider
+ *   5. ExpandableWrapper reads the expand-button tooltip from the provider
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, cleanup, fireEvent } from '@solidjs/testing-library'
+import {
+  MCPUIStringsProvider,
+  useMCPUIStrings,
+  DEFAULT_MCPUI_STRINGS,
+} from './MCPUIStringsContext'
+import { FeedbackInline } from '../components/FeedbackInline'
+import { ExpandableWrapper } from '../components/ExpandableWrapper'
+
+describe('MCPUIStringsContext (v6.6.0)', () => {
+  beforeEach(() => cleanup())
+
+  it('defaults are English', () => {
+    expect(DEFAULT_MCPUI_STRINGS.expand).toBe('Expand')
+    expect(DEFAULT_MCPUI_STRINGS.feedbackUseful).toBe('Useful')
+    expect(DEFAULT_MCPUI_STRINGS.feedbackPositiveAck).toBe('Thanks!')
+    expect(DEFAULT_MCPUI_STRINGS.retry).toBe('Retry')
+  })
+
+  it('useMCPUIStrings returns the EN defaults with no provider mounted', () => {
+    let captured: ReturnType<typeof useMCPUIStrings> | undefined
+    const Probe = () => {
+      captured = useMCPUIStrings()
+      return <span>probe</span>
+    }
+    render(() => <Probe />)
+    expect(captured).toEqual(DEFAULT_MCPUI_STRINGS)
+  })
+
+  it('provider partial-merges over the EN defaults', () => {
+    let captured: ReturnType<typeof useMCPUIStrings> | undefined
+    const Probe = () => {
+      captured = useMCPUIStrings()
+      return <span>probe</span>
+    }
+    render(() => (
+      <MCPUIStringsProvider strings={{ expand: 'Agrandir', feedbackUseful: 'Utile' }}>
+        <Probe />
+      </MCPUIStringsProvider>
+    ))
+    // Overridden keys
+    expect(captured!.expand).toBe('Agrandir')
+    expect(captured!.feedbackUseful).toBe('Utile')
+    // Untouched keys fall back to EN
+    expect(captured!.retry).toBe('Retry')
+    expect(captured!.closeExpandedView).toBe('Close expanded view')
+  })
+
+  it('FeedbackInline reads its ack from the provider (FR override)', () => {
+    const { getByText, container } = render(() => (
+      <MCPUIStringsProvider
+        strings={{ feedbackPositiveAck: 'Merci !', feedbackUseful: 'Utile' }}
+      >
+        <FeedbackInline onSubmit={() => {}} />
+      </MCPUIStringsProvider>
+    ))
+    // Tooltip from provider
+    const upBtn = container.querySelector('[data-feedback-inline-rating="positive"]')
+    expect(upBtn?.getAttribute('title')).toBe('Utile')
+    // Ack from provider after click
+    fireEvent.click(upBtn!)
+    expect(getByText('Merci !')).toBeTruthy()
+  })
+
+  it('FeedbackInline defaults to EN ack when no provider is mounted', () => {
+    const { getByText, container } = render(() => <FeedbackInline onSubmit={() => {}} />)
+    const upBtn = container.querySelector('[data-feedback-inline-rating="positive"]')
+    fireEvent.click(upBtn!)
+    expect(getByText('Thanks!')).toBeTruthy()
+  })
+
+  it('FeedbackInline positiveAck prop still wins over the provider', () => {
+    const { getByText, container } = render(() => (
+      <MCPUIStringsProvider strings={{ feedbackPositiveAck: 'FromProvider' }}>
+        <FeedbackInline onSubmit={() => {}} positiveAck="FromProp" />
+      </MCPUIStringsProvider>
+    ))
+    const upBtn = container.querySelector('[data-feedback-inline-rating="positive"]')
+    fireEvent.click(upBtn!)
+    expect(getByText('FromProp')).toBeTruthy()
+  })
+
+  it('ExpandableWrapper reads the expand-button tooltip from the provider', () => {
+    const { container } = render(() => (
+      <MCPUIStringsProvider strings={{ expand: 'Plein écran' }}>
+        <ExpandableWrapper title="Données">
+          <div>content</div>
+        </ExpandableWrapper>
+      </MCPUIStringsProvider>
+    ))
+    const expandBtn = container.querySelector('button[aria-label="Expand to fullscreen"]')
+    expect(expandBtn?.getAttribute('title')).toBe('Plein écran')
+  })
+
+  it('ExpandableWrapper falls back to EN with no provider', () => {
+    const { container } = render(() => (
+      <ExpandableWrapper title="Data">
+        <div>content</div>
+      </ExpandableWrapper>
+    ))
+    const expandBtn = container.querySelector('button[aria-label="Expand to fullscreen"]')
+    expect(expandBtn?.getAttribute('title')).toBe('Expand')
+  })
+})

package/src/context/MCPUIStringsContext.tsx

@@ -0,0 +1,128 @@
+/**
+ * MCPUIStringsContext — i18n for the library's own "chrome" strings.
+ *
+ * @since v6.6.0 (D2 / R4 of ROADMAP-opendata-macro-mcpui)
+ *
+ * ## Scope — chrome only, NOT content
+ *
+ * MCP-UI renders two kinds of text :
+ *
+ * - **Content** — table headers, chart titles, action labels, prompt
+ *   questions. These come from the payload and are ALREADY localized by
+ *   whoever produced the payload (the connector / MCP server). MCP-UI
+ *   renders them verbatim and this context never touches them.
+ * - **Chrome** — the handful of strings the library itself hardcodes :
+ *   the expand-button tooltip, the feedback acknowledgements, etc. THIS
+ *   is what `MCPUIStrings` covers.
+ *
+ * There is deliberately no full i18n framework here : no per-renderer
+ * `locale` prop, no message catalogue, no ICU. A flat string map behind a
+ * context is enough — the chrome surface is small and static.
+ *
+ * ## Defaults are English
+ *
+ * `DEFAULT_MCPUI_STRINGS` is English. A published library should not ship
+ * hardcoded French. Consumers that want another language wrap their tree
+ * in `<MCPUIStringsProvider strings={...}>` with a partial override.
+ *
+ * Component props that already carry a label (e.g. `FeedbackInline`'s
+ * `positiveAck`, `ExpandableWrapper`'s `copyLabel`) keep priority over the
+ * provider — the provider only fills the gap when no explicit prop is set.
+ *
+ * @example
+ * ```tsx
+ * import { MCPUIStringsProvider } from '@seed-ship/mcp-ui-solid'
+ *
+ * <MCPUIStringsProvider strings={{ expand: 'Agrandir', feedbackUseful: 'Utile' }}>
+ *   <App />
+ * </MCPUIStringsProvider>
+ * ```
+ */
+
+import { createContext, useContext, type JSX } from 'solid-js'
+
+/**
+ * The library's own chrome strings. Flat map, no interpolation.
+ *
+ * Marked exhaustive as of v6.6.0 ; new chrome strings added by later
+ * renderers extend this interface (the `MCPUIStringsProvider` merge keeps
+ * older consumers working — any unset key falls back to the EN default).
+ */
+export interface MCPUIStrings {
+  // ── ExpandableWrapper toolbar ──────────────────────────────
+  /** `title` of the expand-to-fullscreen button. */
+  expand: string
+  /** Heading + `aria-label` of the fullscreen modal when no title is given. */
+  expandedView: string
+  /** Default tooltip of the copy button (overridden by `copyLabel` prop). */
+  copyToClipboard: string
+  /** `aria-label` of the close button in the fullscreen modal. */
+  closeExpandedView: string
+
+  // ── FeedbackInline (response-quality feedback) ─────────────
+  /** `title` of the thumb-up button. */
+  feedbackUseful: string
+  /** `title` of the thumb-down button. */
+  feedbackNotUseful: string
+  /** Acknowledgement shown after a positive rating (overridden by `positiveAck`). */
+  feedbackPositiveAck: string
+  /** Acknowledgement shown after a negative rating (overridden by `negativeAck`). */
+  feedbackNegativeAck: string
+
+  // ── Generic chrome ────────────────────────────────────────
+  /** Label of the streaming retry button. */
+  retry: string
+}
+
+/**
+ * English defaults. A published library ships no hardcoded non-English
+ * chrome — consumers localize via `<MCPUIStringsProvider>`.
+ */
+export const DEFAULT_MCPUI_STRINGS: MCPUIStrings = {
+  expand: 'Expand',
+  expandedView: 'Expanded view',
+  copyToClipboard: 'Copy to clipboard',
+  closeExpandedView: 'Close expanded view',
+  feedbackUseful: 'Useful',
+  feedbackNotUseful: 'Not useful',
+  feedbackPositiveAck: 'Thanks!',
+  feedbackNegativeAck: "Noted — we'll improve",
+  retry: 'Retry',
+}
+
+export const MCPUIStringsContext = createContext<MCPUIStrings>(DEFAULT_MCPUI_STRINGS)
+
+/**
+ * Reads the active chrome strings. Returns `DEFAULT_MCPUI_STRINGS` when no
+ * `<MCPUIStringsProvider>` is mounted above — every renderer works
+ * standalone with English chrome.
+ */
+export function useMCPUIStrings(): MCPUIStrings {
+  return useContext(MCPUIStringsContext)
+}
+
+export interface MCPUIStringsProviderProps {
+  /**
+   * Partial override of the chrome strings. Any key left unset falls back
+   * to the English `DEFAULT_MCPUI_STRINGS` — so a consumer can localize
+   * just the strings they care about.
+   */
+  strings?: Partial<MCPUIStrings>
+  children: JSX.Element
+}
+
+/**
+ * Provides localized chrome strings to every MCP-UI renderer below it.
+ * Merges the partial `strings` override over the English defaults.
+ */
+export function MCPUIStringsProvider(props: MCPUIStringsProviderProps): JSX.Element {
+  // `props.strings` is read inside the getter so a reactive override
+  // (signal-backed) re-propagates ; for the common static case it is read
+  // once at mount.
+  const value = (): MCPUIStrings => ({ ...DEFAULT_MCPUI_STRINGS, ...props.strings })
+  return (
+    <MCPUIStringsContext.Provider value={value()}>
+      {props.children}
+    </MCPUIStringsContext.Provider>
+  )
+}

package/src/index.ts

@@ -40,6 +40,21 @@ export { ComponentToolbar } from './components/ComponentToolbar'
 export { FeedbackInline } from './components/FeedbackInline'
 export type { FeedbackInlineProps, FeedbackInlineContext } from './components/FeedbackInline'
 
+// Presentation feedback (v6.6.0 — R3 ; separate axis from FeedbackInline)
+export {
+  PresentationFeedback,
+  DEFAULT_PRESENTATION_FEEDBACK_LABELS,
+} from './components/PresentationFeedback'
+export type {
+  PresentationFeedbackProps,
+  PresentationFeedbackLabels,
+} from './components/PresentationFeedback'
+export type {
+  ConnectorRenderFeedback,
+  ConnectorRenderProblem,
+  ConnectorPreferredLayout,
+} from '@seed-ship/mcp-ui-spec'
+
 // Chat Bus (v2.4.0 — @experimental)
 export { ChatBusProvider, useChatBus } from './hooks/useChatBus'
 export { ChatPrompt } from './components/ChatPrompt'
@@ -113,6 +128,18 @@ export type {
   DuplicateMountReporter,
 } from './utils/duplicate-mount-registry'
 
+// Chrome i18n — library's own strings, EN defaults (v6.6.0 — D2/R4)
+export {
+  MCPUIStringsProvider,
+  MCPUIStringsContext,
+  useMCPUIStrings,
+  DEFAULT_MCPUI_STRINGS,
+} from './context/MCPUIStringsContext'
+export type {
+  MCPUIStrings,
+  MCPUIStringsProviderProps,
+} from './context/MCPUIStringsContext'
+
 // Telemetry sink (B.5 — v5.6.0)
 export {
   MCPUITelemetryProvider,