@seed-ship/mcp-ui-solid 6.8.2 → 6.10.0

package/src/components/ChartJSRenderer.tsx

@@ -8,41 +8,44 @@
  * ```
  */
 
-import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
-import type { UIComponent, ChartComponentParams } from '../types'
-import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js';
+import type { UIComponent, ChartComponentParams } from '../types';
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
+import { DegradedFallback } from './DegradedFallback';
+import { chartToDegradedTable } from '../utils/degraded-projections';
+import { useTelemetry } from '../context/MCPUITelemetryContext';
 
 // Lazy load Chart.js to avoid bundling if not used
-let ChartJS: any = null
-let chartJSLoadPromise: Promise<any> | null = null
+let ChartJS: any = null;
+let chartJSLoadPromise: Promise<any> | null = null;
 
 const loadChartJS = async () => {
-  if (ChartJS) return ChartJS
+  if (ChartJS) return ChartJS;
 
   if (!chartJSLoadPromise) {
     chartJSLoadPromise = import('chart.js/auto')
       .then((module) => {
-        ChartJS = module.default || module.Chart
-        return ChartJS
+        ChartJS = module.default || module.Chart;
+        return ChartJS;
       })
       .catch((err) => {
-        chartJSLoadPromise = null
-        throw err
-      })
+        chartJSLoadPromise = null;
+        throw err;
+      });
   }
 
-  return chartJSLoadPromise
-}
+  return chartJSLoadPromise;
+};
 
 /**
  * Check if Chart.js is available
  */
 export async function isChartJSAvailable(): Promise<boolean> {
   try {
-    await loadChartJS()
-    return true
+    await loadChartJS();
+    return true;
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -50,18 +53,18 @@ export interface ChartJSRendererProps {
   /**
    * UIComponent with chart params
    */
-  component: UIComponent
+  component: UIComponent;
 
   /**
    * Error callback
    */
-  onError?: (error: Error) => void
+  onError?: (error: Error) => void;
 
   /**
    * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).
    * @see ExpandableWrapperProps.toolbarVariant
    */
-  toolbarVariant?: 'hover' | 'always-visible'
+  toolbarVariant?: 'hover' | 'always-visible';
 }
 
 /**
@@ -87,50 +90,51 @@ export interface ChartJSRendererProps {
  * ```
  */
 export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
-  const [isLoading, setIsLoading] = createSignal(true)
-  const [error, setError] = createSignal<string>()
-  let canvasRef: HTMLCanvasElement | undefined
-  let chartInstance: any
+  const [isLoading, setIsLoading] = createSignal(true);
+  const [error, setError] = createSignal<string>();
+  let canvasRef: HTMLCanvasElement | undefined;
+  let chartInstance: any;
 
-  const params = () => props.component.params as ChartComponentParams
-  const isExpanded = useExpanded()
+  const params = () => props.component.params as ChartComponentParams;
+  const isExpanded = useExpanded();
+  const telemetry = useTelemetry();
 
   // v6.1.0 — export visibility :
   //   - undefined / true  → button shown (new default, was opt-in)
   //   - false             → button hidden (explicit opt-out, unchanged)
-  const exportEnabled = () => params().exportable !== false
+  const exportEnabled = () => params().exportable !== false;
 
   // v6.1.0 — copy data for the ExpandableWrapper modal-header copy button.
   // Lazy-stringified each time the button is clicked.
-  const copyDataJSON = () => JSON.stringify({ type: params().type, data: params().data }, null, 2)
+  const copyDataJSON = () => JSON.stringify({ type: params().type, data: params().data }, null, 2);
 
   // Chart PNG export
   const handleExportPNG = () => {
-    if (!canvasRef) return
-    const url = canvasRef.toDataURL('image/png')
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `${(params().title || 'chart').replace(/\s+/g, '-').toLowerCase()}.png`
-    a.click()
-  }
+    if (!canvasRef) return;
+    const url = canvasRef.toDataURL('image/png');
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${(params().title || 'chart').replace(/\s+/g, '-').toLowerCase()}.png`;
+    a.click();
+  };
 
   // Create/update chart when params change
   createEffect(async () => {
-    if (!canvasRef) return
+    if (!canvasRef) return;
 
     // Access params to track dependencies
-    const chartParams = params()
+    const chartParams = params();
 
-    setIsLoading(true)
-    setError(undefined)
+    setIsLoading(true);
+    setError(undefined);
 
     try {
-      const Chart = await loadChartJS()
+      const Chart = await loadChartJS();
 
       // Destroy previous instance
       if (chartInstance) {
-        chartInstance.destroy()
-        chartInstance = null
+        chartInstance.destroy();
+        chartInstance = null;
       }
 
       // Build options, merging time-axis config if present (v3.1.0)
@@ -146,11 +150,11 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             ...chartParams.options?.plugins?.legend,
           },
         },
-      }
+      };
 
       // Time-series axis (v3.1.0)
       if (chartParams.timeAxis) {
-        const ta = chartParams.timeAxis
+        const ta = chartParams.timeAxis;
         baseOptions.scales = {
           ...baseOptions.scales,
           x: {
@@ -164,7 +168,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             ...(ta.min ? { min: ta.min } : {}),
             ...(ta.max ? { max: ta.max } : {}),
           },
-        }
+        };
       }
 
       // Create new chart
@@ -172,24 +176,33 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         type: chartParams.type,
         data: chartParams.data,
         options: baseOptions,
-      })
+      });
 
-      setIsLoading(false)
+      setIsLoading(false);
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Chart rendering failed')
-      setError(error.message)
-      setIsLoading(false)
-      props.onError?.(error)
+      const error = err instanceof Error ? err : new Error('Chart rendering failed');
+      setError(error.message);
+      setIsLoading(false);
+      // Fallback ladder (P2.5): record the failure so it's observable, then
+      // degrade to the series table below instead of a blank canvas.
+      telemetry?.dispatch({
+        type: 'render:error',
+        errorMessage: error.message,
+        id: props.component?.id ?? '',
+        componentType: 'chart',
+        ts: Date.now(),
+      });
+      props.onError?.(error);
     }
-  })
+  });
 
   // Cleanup on unmount
   onCleanup(() => {
     if (chartInstance) {
-      chartInstance.destroy()
-      chartInstance = null
+      chartInstance.destroy();
+      chartInstance = null;
     }
-  })
+  });
 
   return (
     <ExpandableWrapper
@@ -198,15 +211,15 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
       copyLabel="Copy chart data (JSON)"
       toolbarVariant={props.toolbarVariant}
     >
-      <div class={`relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${
-        isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
-      }`}>
+      <div
+        class={`relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${
+          isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+        }`}
+      >
         <Show when={params().title || exportEnabled()}>
           <div class="flex items-center justify-between mb-3 flex-shrink-0">
             <Show when={params().title}>
-              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
-                {params().title}
-              </h3>
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{params().title}</h3>
             </Show>
             <Show when={exportEnabled()}>
               <button
@@ -215,8 +228,18 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
                 title="Download PNG"
                 aria-label="Download chart as PNG"
               >
-                <svg class="w-3 h-3 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                <svg
+                  class="w-3 h-3 text-gray-500 dark:text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  />
                 </svg>
               </button>
             </Show>
@@ -232,28 +255,14 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
           </div>
         </Show>
 
+        {/* Fallback ladder (P2.5): degrade to a series table on render error
+            instead of a bare "Chart Error" message. */}
         <Show when={error()}>
-          <div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800">
-            <div class="text-center">
-              <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3">
-                <svg
-                  class="w-6 h-6 text-red-600 dark:text-red-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
-              </div>
-              <p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p>
-              <p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">{error()}</p>
-            </div>
-          </div>
+          <DegradedFallback
+            message={`Chart rendering failed: ${error()}`}
+            caption="Showing the chart data as a table — the interactive chart is unavailable."
+            {...chartToDegradedTable(params() ?? {})}
+          />
         </Show>
 
         <div
@@ -270,5 +279,5 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         </div>
       </div>
     </ExpandableWrapper>
-  )
-}
+  );
+};

package/src/components/DegradedFallback.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * Tests for <DegradedFallback> — the middle rung of the renderer fallback
+ * ladder (P2.5). Pure presentational component, no peers, no async.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, cleanup } from '@solidjs/testing-library';
+import { DegradedFallback } from './DegradedFallback';
+
+describe('<DegradedFallback>', () => {
+  it('shows the message and a default caption', () => {
+    const { getByText, container } = render(() => (
+      <DegradedFallback message="Graph rendering failed" />
+    ));
+    expect(getByText('Graph rendering failed')).toBeTruthy();
+    expect(container.textContent).toContain('interactive view is unavailable');
+    cleanup();
+  });
+
+  it('renders a table when columns + rows are provided', () => {
+    const { container } = render(() => (
+      <DegradedFallback
+        message="failed"
+        columns={['Source', 'Target', 'Label']}
+        rows={[
+          ['a', 'b', 'rel'],
+          ['b', 'c', ''],
+        ]}
+      />
+    ));
+    const headers = container.querySelectorAll('th');
+    expect(headers).toHaveLength(3);
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(2);
+    expect(container.textContent).toContain('rel');
+    cleanup();
+  });
+
+  it('shows no table when columns are empty', () => {
+    const { container } = render(() => <DegradedFallback message="failed" rows={[['x']]} />);
+    expect(container.querySelector('table')).toBeNull();
+    cleanup();
+  });
+
+  it('truncates rows past maxRows and notes the remainder', () => {
+    const rows = Array.from({ length: 5 }, (_, i) => [String(i)]);
+    const { container } = render(() => (
+      <DegradedFallback message="failed" columns={['n']} rows={rows} maxRows={2} />
+    ));
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(2);
+    expect(container.textContent).toContain('+3 more rows');
+    cleanup();
+  });
+
+  it('uses a custom caption when provided', () => {
+    const { container } = render(() => (
+      <DegradedFallback message="failed" caption="custom caption here" />
+    ));
+    expect(container.textContent).toContain('custom caption here');
+    cleanup();
+  });
+});

package/src/components/DegradedFallback.tsx

@@ -0,0 +1,93 @@
+/**
+ * DegradedFallback — the middle rung of the renderer fallback ladder
+ * (audit 2026-05-30, P2.5).
+ *
+ * Each heavy renderer (graph / map / chart) follows the same contract:
+ *   1. native render when its peer lib is available and succeeds;
+ *   2. **degraded but useful** view when the native render throws — this
+ *      component: a visible notice + a plain data table so the user still
+ *      sees the underlying data instead of a blank space;
+ *   3. (the caller also emits a `component:error` telemetry event).
+ *
+ * Pure / presentational — no peer deps, no side effects — so a render-path
+ * failure in a heavy lib can never cascade into the fallback itself, and it
+ * is trivially unit-testable. Rows/cells are rendered as text; callers are
+ * responsible for stringifying complex cell values.
+ */
+
+import { Component, For, Show } from 'solid-js';
+
+export interface DegradedFallbackProps {
+  /** Short, human-readable reason the native render was skipped/failed. */
+  message: string;
+  /**
+   * Column headers for the degraded data table. When omitted (or empty),
+   * only the notice banner is shown.
+   */
+  columns?: string[];
+  /** Row data — each row is an array of cells aligned to `columns`. */
+  rows?: Array<Array<string | number>>;
+  /**
+   * Caption under the table. Defaults to a generic
+   * "interactive view unavailable" line.
+   */
+  caption?: string;
+  /** Max rows to render before truncating (default 50). */
+  maxRows?: number;
+}
+
+export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
+  const maxRows = () => props.maxRows ?? 50;
+  const allRows = () => props.rows ?? [];
+  const shownRows = () => allRows().slice(0, maxRows());
+  const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);
+  const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;
+
+  return (
+    <div
+      class="w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20"
+      role="alert"
+    >
+      <p class="text-sm font-medium text-amber-900 dark:text-amber-100">{props.message}</p>
+      <p class="mt-0.5 text-xs text-amber-700 dark:text-amber-300">
+        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}
+      </p>
+
+      <Show when={hasTable()}>
+        <div class="mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800">
+          <table class="w-full border-collapse text-left text-xs">
+            <thead class="sticky top-0 bg-amber-100 dark:bg-amber-900/40">
+              <tr>
+                <For each={props.columns}>
+                  {(col) => (
+                    <th class="px-2 py-1 font-medium text-amber-900 dark:text-amber-100">{col}</th>
+                  )}
+                </For>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={shownRows()}>
+                {(row) => (
+                  <tr class="border-t border-amber-100 dark:border-amber-800/60">
+                    <For each={props.columns}>
+                      {(_col, i) => (
+                        <td class="px-2 py-1 text-amber-800 dark:text-amber-200">
+                          {String(row[i()] ?? '')}
+                        </td>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+          </table>
+        </div>
+        <Show when={hiddenCount() > 0}>
+          <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
+            +{hiddenCount()} more rows not shown.
+          </p>
+        </Show>
+      </Show>
+    </div>
+  );
+};

package/src/components/GraphRenderer.tsx

@@ -28,6 +28,9 @@ import type {
 } from '@seed-ship/mcp-ui-spec';
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { PortalDropdownMenu } from './PortalDropdownMenu';
+import { DegradedFallback } from './DegradedFallback';
+import { graphToDegradedTable } from '../utils/degraded-projections';
+import { useTelemetry } from '../context/MCPUITelemetryContext';
 
 // Module-scoped lazy import promise — first call triggers the dynamic
 // import, subsequent calls reuse the resolved module.
@@ -220,6 +223,7 @@ export interface GraphRendererProps {
 export const GraphRenderer: Component<GraphRendererProps> = (props) => {
   const params = () => props.component.params as GraphComponentParams;
   const isExpanded = useExpanded();
+  const telemetry = useTelemetry();
   const [available, setAvailable] = createSignal<boolean | null>(null);
   const [error, setError] = createSignal<string | undefined>();
   const [exportMenuOpen, setExportMenuOpen] = createSignal(false);
@@ -293,7 +297,18 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
       graphInstance = new (Graph as any)(config);
       await graphInstance.render();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to render graph');
+      const message = err instanceof Error ? err.message : 'Failed to render graph';
+      setError(message);
+      // Fallback ladder (P2.5): the native G6 render threw — emit telemetry
+      // so the failure is observable, then degrade to the edge/node table
+      // below instead of leaving a blank canvas.
+      telemetry?.dispatch({
+        type: 'render:error',
+        errorMessage: message,
+        id: props.component.id ?? '',
+        componentType: 'graph',
+        ts: Date.now(),
+      });
     }
   });
 
@@ -424,19 +439,26 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
             </PortalDropdownMenu>
           </div>
 
+          {/* Native G6 canvas — hidden once a render error degrades us. */}
           <div
             ref={containerRef}
             class={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
-              isExpanded() ? 'flex-1 min-h-0' : ''
-            }`}
+              error() ? 'hidden' : ''
+            } ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
             style={
               isExpanded()
                 ? `height: 100%; width: ${params().width ?? '100%'};`
                 : `height: ${params().height ?? '400px'}; width: ${params().width ?? '100%'};`
             }
           />
+          {/* Fallback ladder (P2.5): degrade to an edge/node table on error
+              rather than showing a bare message. Export menu stays usable. */}
           <Show when={error()}>
-            <p class="text-xs text-red-600 dark:text-red-400 mt-1">Render error: {error()}</p>
+            <DegradedFallback
+              message={`Graph rendering failed: ${error()}`}
+              caption="Showing the graph data as a table — the interactive view is unavailable."
+              {...graphToDegradedTable(params())}
+            />
           </Show>
         </div>
       </ExpandableWrapper>

package/src/components/MapRenderer.security.test.ts

@@ -0,0 +1,83 @@
+/**
+ * MapRenderer XSS hardening tests (audit P1.2, v6.10.0).
+ *
+ * Leaflet renders bound tooltip/popup strings as HTML, so untrusted payload
+ * content (`marker.tooltip`, `marker.popup`, GeoJSON `popup.template`) is an
+ * XSS vector. These lock the safe-by-default behavior and the host opt-in,
+ * via the pure exported helpers (the Leaflet binding itself is a thin wrapper
+ * and not exercisable in jsdom).
+ */
+
+import { describe, it, expect } from 'vitest';
+import { popupSafeText, buildPopupContent } from './MapRenderer';
+
+const XSS = '<img src=x onerror=alert(1)>';
+
+describe('popupSafeText — marker tooltip/popup (P1.2)', () => {
+  it('escapes HTML by default (untrusted payload path)', () => {
+    const out = popupSafeText(XSS);
+    expect(out).toBe('&lt;img src=x onerror=alert(1)&gt;');
+    expect(out).not.toContain('<img');
+  });
+
+  it('escapes < > & " so no tag can be injected', () => {
+    expect(popupSafeText('a & b <c> "d"')).toBe('a &amp; b &lt;c&gt; &quot;d&quot;');
+  });
+
+  it('passes raw HTML through when the host opts in (trusted)', () => {
+    expect(popupSafeText(XSS, true)).toBe(XSS);
+  });
+
+  it('returns undefined for absent content', () => {
+    expect(popupSafeText(undefined)).toBeUndefined();
+    expect(popupSafeText(undefined, true)).toBeUndefined();
+  });
+
+  it('leaves plain text visually unchanged', () => {
+    expect(popupSafeText('Paris')).toBe('Paris');
+  });
+});
+
+describe('buildPopupContent — GeoJSON popup (P1.2)', () => {
+  const feature = (props: Record<string, unknown>) => ({ properties: props });
+
+  it('ignores a raw `popup.template` on the default (untrusted) path', () => {
+    const html = buildPopupContent(
+      feature({ name: 'Zone' }),
+      { template: `<b>{{name}}</b><img src=x onerror=alert(1)>` }
+      // allowHtml defaults to false
+    );
+    // Template skipped → falls through to the auto popup (no <img>, no <b>).
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('<b>');
+  });
+
+  it('honors `popup.template` when the host opts in, but escapes substituted values', () => {
+    const html = buildPopupContent(
+      feature({ name: '<script>evil</script>' }),
+      { template: '<b>{{name}}</b>' },
+      true
+    );
+    // The authored structural HTML stays; the data value is escaped.
+    expect(html).toContain('<b>');
+    expect(html).toContain('&lt;script&gt;');
+    expect(html).not.toContain('<script>');
+  });
+
+  it('auto-generated popup always escapes values (safe by construction)', () => {
+    const html = buildPopupContent(
+      feature({ title: XSS, count: 5 }),
+      { titleField: 'title', fields: ['count'] }
+      // default untrusted path
+    );
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;img');
+    // structural HTML authored by the renderer is present
+    expect(html).toContain('<strong>');
+  });
+
+  it('returns null when there is no popup config or no properties', () => {
+    expect(buildPopupContent({ properties: { a: 1 } }, undefined)).toBeNull();
+    expect(buildPopupContent({}, { titleField: 'a' })).toBeNull();
+  });
+});