@seed-ship/mcp-ui-solid 6.13.0 → 6.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "6.13.0",
+  "version": "6.15.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/ChartRenderer.quickchart.test.tsx

@@ -0,0 +1,66 @@
+/**
+ * v6.14.0 — audit P1.7: the quickchart.io fallback must be an explicit host
+ * opt-in, never an implicit external network call.
+ *
+ * We drive the decision with `renderer: 'iframe'` (an explicit request for the
+ * external image path) — that branch is gated purely on `allowQuickchartFallback`
+ * and is independent of whether the `chart.js` peer happens to be installed in
+ * the test env. Default (no opt-in) → no quickchart URL, degrades to a local
+ * table; with opt-in → the quickchart.io image URL is produced.
+ */
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, cleanup, waitFor } from '@solidjs/testing-library'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import type { UIComponent } from '../types'
+
+afterEach(cleanup)
+
+const chart: UIComponent = {
+  id: 'c1',
+  type: 'chart',
+  position: { colStart: 1, colSpan: 12 },
+  params: {
+    type: 'bar',
+    title: 'Sensitive revenue',
+    renderer: 'iframe', // explicit external render request
+    data: {
+      labels: ['Q1', 'Q2'],
+      datasets: [{ label: 'Revenue', data: [100, 200] }],
+    },
+  } as any,
+}
+
+function quickchartImg(container: HTMLElement): HTMLImageElement | null {
+  return (
+    (Array.from(container.querySelectorAll('img')).find((img) =>
+      (img.getAttribute('src') ?? '').includes('quickchart.io')
+    ) as HTMLImageElement | undefined) ?? null
+  )
+}
+
+describe('Chart quickchart fallback is opt-in (P1.7)', () => {
+  it('does NOT call quickchart.io by default — degrades instead', async () => {
+    const { container } = render(() => <UIResourceRenderer content={chart} />)
+
+    await waitFor(() => {
+      expect(container.textContent ?? '').toContain('Interactive chart unavailable')
+    })
+
+    expect(quickchartImg(container)).toBeNull()
+    // The degraded table surfaces the underlying series data.
+    expect(container.textContent).toContain('Revenue')
+  })
+
+  it('uses quickchart.io only when the host opts in', async () => {
+    const { container } = render(() => (
+      <UIResourceRenderer content={chart} allowQuickchartFallback />
+    ))
+
+    await waitFor(() => {
+      expect(quickchartImg(container)).not.toBeNull()
+    })
+
+    const src = quickchartImg(container)?.getAttribute('src') ?? ''
+    expect(src).toContain('https://quickchart.io/chart?c=')
+  })
+})

package/src/components/UIResourceRenderer.tsx

@@ -43,6 +43,8 @@ import { FormRenderer } from './FormRenderer'
 import { ModalRenderer } from './ModalRenderer'
 import { ActionGroupRenderer } from './ActionGroupRenderer'
 import { ChartJSRenderer, isChartJSAvailable } from './ChartJSRenderer'
+import { DegradedFallback } from './DegradedFallback'
+import { chartToDegradedTable } from '../utils/degraded-projections'
 import { ImageGalleryRenderer } from './ImageGalleryRenderer'
 import { VideoRenderer } from './VideoRenderer'
 import { CodeBlockRenderer } from './CodeBlockRenderer'
@@ -144,6 +146,26 @@ export interface UIResourceRendererProps {
    */
   toolbarVariant?: 'hover' | 'always-visible'
 
+  /**
+   * Allow the chart renderer to fall back to the **quickchart.io** image API
+   * when the native `chart.js` peer is unavailable (v6.14.0, audit P1.7).
+   *
+   * The quickchart fallback sends the **entire chart config** (labels + data)
+   * to an external service inside an image URL — an implicit network call that
+   * can leak potentially sensitive data and behaves differently offline. For a
+   * public, LLM/connector-driven package the safe default is **off**: when
+   * Chart.js is missing (or `renderer: 'iframe'` is requested) the chart
+   * **degrades to a local data table** and emits a `render:error` telemetry
+   * signal instead of silently calling out.
+   *
+   * This is a **host-level** trust decision, deliberately NOT a payload field
+   * (a payload could otherwise opt itself in). Set it to `true` only when the
+   * data is non-sensitive and an external image render is acceptable.
+   *
+   * @default false
+   */
+  allowQuickchartFallback?: boolean
+
   /**
    * Per-instance hook fired when this renderer mounts a content key that
    * is already mounted elsewhere in the document (v6.5.0 — closes Demande 2
@@ -177,14 +199,36 @@ function ChartRenderer(props: {
   component: UIComponent
   onError?: (error: RendererError) => void
   toolbarVariant?: 'hover' | 'always-visible'
+  /** Host opt-in for the external quickchart.io fallback (audit P1.7). */
+  allowQuickchartFallback?: boolean
 }) {
   const [useNative, setUseNative] = createSignal(false)
   const [iframeUrl, setIframeUrl] = createSignal<string>()
   const [isLoading, setIsLoading] = createSignal(true)
   const [error, setError] = createSignal<string>()
+  // Set when Chart.js is unavailable AND the host has not opted into the
+  // external quickchart fallback — we then degrade to a local data table
+  // rather than calling out to quickchart.io (audit P1.7).
+  const [degraded, setDegraded] = createSignal(false)
+  const telemetry = useTelemetry()
 
   const params = () => props.component.params as any
   const rendererPref = () => params()?.renderer || 'auto'
+  const allowQuickchart = () => props.allowQuickchartFallback === true
+
+  // Emit a clear, observable signal whenever we decline the external fallback.
+  const signalBlockedFallback = (reason: string) => {
+    setDegraded(true)
+    setIsLoading(false)
+    const message = `Chart degraded to a data table: ${reason}`
+    telemetry?.dispatch({
+      type: 'render:error',
+      errorMessage: message,
+      id: props.component.id ?? '',
+      componentType: 'chart',
+      ts: Date.now(),
+    })
+  }
 
   // Guard: if data or datasets missing, show error instead of crashing Chart.js
   if (!params()?.data?.datasets) {
@@ -200,9 +244,17 @@ function ChartRenderer(props: {
     const pref = rendererPref()
 
     if (pref === 'iframe') {
-      // Force iframe mode
+      // Explicit external render requested. Honor it only when the host has
+      // opted in (audit P1.7) — otherwise degrade to a local table.
       setUseNative(false)
-      buildIframeUrl()
+      if (allowQuickchart()) {
+        buildIframeUrl()
+      } else {
+        signalBlockedFallback(
+          "renderer: 'iframe' requires the external quickchart.io service; " +
+            'set allowQuickchartFallback on the host to enable it.'
+        )
+      }
     } else if (pref === 'native') {
       // Force native mode - will show error if Chart.js not available
       const available = await isChartJSAvailable()
@@ -214,14 +266,19 @@ function ChartRenderer(props: {
         setIsLoading(false)
       }
     } else {
-      // Auto mode - use native if available, otherwise iframe
+      // Auto mode - use native if available. When Chart.js is missing, only
+      // call out to quickchart.io if the host opted in; otherwise degrade to a
+      // local data table instead of an implicit external network call (P1.7).
       const available = await isChartJSAvailable()
       if (available) {
         setUseNative(true)
         setIsLoading(false)
-      } else {
+      } else if (allowQuickchart()) {
         setUseNative(false)
         buildIframeUrl()
+      } else {
+        setUseNative(false)
+        signalBlockedFallback('Chart.js peer is not installed.')
       }
     }
   })
@@ -256,6 +313,19 @@ function ChartRenderer(props: {
       when={useNative()}
       fallback={
         <div class="relative w-full h-full min-h-[300px] bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+          {/* P1.7 — Chart.js missing and quickchart fallback not allowed:
+              show the chart data as a local table instead of an implicit
+              call to quickchart.io. */}
+          <Show when={degraded()}>
+            <div class="p-3">
+              <DegradedFallback
+                message="Interactive chart unavailable — install the chart.js peer dependency, or set allowQuickchartFallback to use the external quickchart.io renderer."
+                caption="Showing the chart data as a table."
+                {...chartToDegradedTable(params() ?? {})}
+              />
+            </div>
+          </Show>
+
           <Show when={isLoading()}>
             <div class="absolute inset-0 flex items-center justify-center">
               <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
@@ -1330,6 +1400,8 @@ function ComponentRenderer(props: {
   onError?: (error: RendererError) => void
   errorMode?: ValidationErrorMode
   toolbarVariant?: 'hover' | 'always-visible'
+  /** Host opt-in for the external quickchart.io chart fallback (audit P1.7). */
+  allowQuickchartFallback?: boolean
 }) {
   // Performance marks — visible in Chrome DevTools "Performance" panel under
   // user timings. Always-on, SSR-safe (see utils/perf.ts).
@@ -1406,6 +1478,14 @@ function ComponentRenderer(props: {
     const mode: ValidationErrorMode = props.errorMode ?? 'block'
     const firstError = validation.errors?.[0]?.message || 'Unknown validation error'
 
+    // P1.6 — an UNKNOWN component type must never produce a silent blank,
+    // whatever the errorMode. The renderer has no branch for it, so even
+    // `silent` would otherwise render nothing. Always surface a visible
+    // "Unsupported component type" notice + a render:error telemetry signal.
+    if (validation.errors?.some((e) => e.code === 'UNKNOWN_COMPONENT_TYPE')) {
+      return <UnsupportedComponentFallback component={props.component} />
+    }
+
     if (mode === 'silent') {
       return null
     }
@@ -1458,7 +1538,7 @@ function ComponentRenderer(props: {
       allowRetry={true}
     >
       <Show when={props.component.type === 'chart'}>
-        <ChartRenderer component={props.component} onError={props.onError} toolbarVariant={props.toolbarVariant} />
+        <ChartRenderer component={props.component} onError={props.onError} toolbarVariant={props.toolbarVariant} allowQuickchartFallback={props.allowQuickchartFallback} />
       </Show>
       <Show when={props.component.type === 'table'}>
         <TableRenderer component={props.component} onError={props.onError} toolbarVariant={props.toolbarVariant} />
@@ -1514,10 +1594,37 @@ function ComponentRenderer(props: {
       <Show when={props.component.type === 'graph'}>
         <GraphRenderer component={props.component} toolbarVariant={props.toolbarVariant} />
       </Show>
+      {/* P1.6 — `footer` is a valid type with a real renderer but had no
+          dispatch branch, so a standalone footer component rendered a silent
+          blank (it was only auto-injected at the layout level). */}
+      <Show when={props.component.type === 'footer'}>
+        <FooterRenderer params={props.component.params as any} />
+      </Show>
     </GenerativeUIErrorBoundary>
   )
 }
 
+/**
+ * Visible fallback for a component whose `type` is not recognized (audit P1.6).
+ *
+ * An unknown type has no renderer branch, so without this it would render a
+ * **silent blank** — even under `errorMode: 'silent'`. The validation gate
+ * routes unknown types here regardless of mode, so the user always sees an
+ * "Unsupported component type: X" notice. The telemetry signal is emitted by
+ * the gate itself (`validation:failed` with `firstErrorCode:
+ * 'UNKNOWN_COMPONENT_TYPE'`), so this component stays purely presentational.
+ */
+function UnsupportedComponentFallback(props: { component: UIComponent }) {
+  return (
+    <div
+      role="alert"
+      class="w-full rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-200"
+    >
+      Unsupported component type: <code class="font-mono">{props.component.type}</code>
+    </div>
+  )
+}
+
 /**
  * Render an action component (button or link)
  * Refactored in Phase 5.0 to use useAction hook for Context-based execution
@@ -1834,7 +1941,7 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
 
   // Wrapper function for RenderContext (breaks circular dependency)
   const renderComponent = (component: UIComponent, onError?: (error: RendererError) => void) => (
-    <ComponentRenderer component={component} onError={onError} errorMode={props.errorMode} toolbarVariant={props.toolbarVariant} />
+    <ComponentRenderer component={component} onError={onError} errorMode={props.errorMode} toolbarVariant={props.toolbarVariant} allowQuickchartFallback={props.allowQuickchartFallback} />
   )
 
   return (
@@ -1852,7 +1959,7 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
                 style={getGridStyleString(component)}
                 data-mcp-ui-component-id={getUiResourceStableKey(component)}
               >
-                <ComponentRenderer component={component} onError={props.onError} errorMode={props.errorMode} toolbarVariant={props.toolbarVariant} />
+                <ComponentRenderer component={component} onError={props.onError} errorMode={props.errorMode} toolbarVariant={props.toolbarVariant} allowQuickchartFallback={props.allowQuickchartFallback} />
               </div>
             )}
           </For>

package/src/components/UnsupportedComponent.test.tsx

@@ -0,0 +1,77 @@
+/**
+ * v6.15.0 — audit P1.6: a component that reaches the renderer with a type that
+ * has no render branch must never produce a silent blank.
+ *
+ * `errorMode: 'silent'` lets a payload past the validation gate without an
+ * error card, so a bogus / known-but-unrendered type would otherwise render
+ * nothing. We assert the visible "Unsupported component type" notice instead,
+ * and that a real type (`footer`, previously missing a branch) now renders.
+ */
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, cleanup, waitFor } from '@solidjs/testing-library'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import { MCPUITelemetryProvider } from '../context/MCPUITelemetryContext'
+import type { UIComponent } from '../types'
+
+afterEach(cleanup)
+
+const bogus = {
+  id: 'x1',
+  type: 'totally-made-up' as any,
+  position: { colStart: 1, colSpan: 12 },
+  params: {},
+} satisfies UIComponent
+
+describe('Unsupported component never renders blank (P1.6)', () => {
+  it('shows a visible "Unsupported component type" notice', async () => {
+    // errorMode: 'silent' skips the validation error card, so the bogus type
+    // reaches the render dispatch — the catch-all must still surface it.
+    const { container } = render(() => (
+      <UIResourceRenderer content={bogus} errorMode="silent" />
+    ))
+
+    await waitFor(() => {
+      expect(container.textContent ?? '').toContain('Unsupported component type')
+    })
+    expect(container.textContent).toContain('totally-made-up')
+  })
+
+  it('emits a validation:failed telemetry signal for the unsupported type', async () => {
+    const events: Array<{ type: string; errorMessage?: string }> = []
+    render(() => (
+      <MCPUITelemetryProvider
+        sink={(batch) => events.push(...batch)}
+        options={{ bufferMs: 0 }}
+      >
+        <UIResourceRenderer content={bogus} errorMode="silent" />
+      </MCPUITelemetryProvider>
+    ))
+
+    // The validation gate emits `validation:failed` with the precise
+    // `UNKNOWN_COMPONENT_TYPE` code — the privacy-safe drift signal hosts watch.
+    await waitFor(() => {
+      expect(
+        events.some(
+          (e: any) =>
+            e.type === 'validation:failed' && e.firstErrorCode === 'UNKNOWN_COMPONENT_TYPE'
+        )
+      ).toBe(true)
+    })
+  })
+
+  it('renders a standalone footer component (previously a silent blank)', async () => {
+    const footer: UIComponent = {
+      id: 'f1',
+      type: 'footer',
+      position: { colStart: 1, colSpan: 12 },
+      params: { poweredBy: 'Deposium', sourceCount: 3 } as any,
+    }
+    const { container } = render(() => <UIResourceRenderer content={footer} />)
+
+    await waitFor(() => {
+      expect(container.textContent ?? '').toContain('Deposium')
+    })
+    // Not the unsupported notice — footer is a real renderer now.
+    expect(container.textContent).not.toContain('Unsupported component type')
+  })
+})