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

package/src/components/GraphRenderer.tsx

@@ -30,6 +30,7 @@ import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { PortalDropdownMenu } from './PortalDropdownMenu';
 import { DegradedFallback } from './DegradedFallback';
 import { graphToDegradedTable } from '../utils/degraded-projections';
+import { escapeHtml } from '../utils/escape-html';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
 
 // Module-scoped lazy import promise — first call triggers the dynamic
@@ -479,24 +480,5 @@ async function downloadDataUrl(dataUrl: string, filename: string): Promise<void>
   downloadBlob(blob, filename);
 }
 
-function escapeHtml(s: string): string {
-  return s.replace(/[&<>"']/g, (c) => {
-    switch (c) {
-      case '&':
-        return '&amp;';
-      case '<':
-        return '&lt;';
-      case '>':
-        return '&gt;';
-      case '"':
-        return '&quot;';
-      case "'":
-        return '&#39;';
-      default:
-        return c;
-    }
-  });
-}
-
 // Re-export for tests + consumers that want to compose their own export menu
 export { toMermaid as graphToMermaid, toJSON as graphToJSON };

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

@@ -8,8 +8,8 @@
  * and not exercisable in jsdom).
  */
 
-import { describe, it, expect } from 'vitest';
-import { popupSafeText, buildPopupContent } from './MapRenderer';
+import { describe, it, expect, vi } from 'vitest';
+import { addGeoJSONLayer, popupSafeText, buildPopupContent } from './MapRenderer';
 
 const XSS = '<img src=x onerror=alert(1)>';
 
@@ -81,3 +81,56 @@ describe('buildPopupContent — GeoJSON popup (P1.2)', () => {
     expect(buildPopupContent({}, { titleField: 'a' })).toBeNull();
   });
 });
+
+describe('addGeoJSONLayer — trusted-host wiring (UI-MAP-0a)', () => {
+  function renderPopup(allowHtml = false) {
+    const bindPopup = vi.fn();
+    const addTo = vi.fn();
+    type GeoJSONOptions = {
+      onEachFeature: (
+        feature: { properties: Record<string, unknown> },
+        featureLayer: { bindPopup: typeof bindPopup }
+      ) => void;
+    };
+    const leaflet = {
+      geoJSON: vi.fn((_geojson: unknown, options: GeoJSONOptions) => {
+        options.onEachFeature(
+          { properties: { name: '<script>evil</script>' } },
+          { bindPopup }
+        );
+        return { addTo };
+      }),
+      circleMarker: vi.fn(),
+    };
+
+    addGeoJSONLayer(
+      {},
+      leaflet,
+      { type: 'FeatureCollection', features: [] },
+      undefined,
+      { template: '<b>{{name}}</b>' },
+      allowHtml
+    );
+
+    return { bindPopup, addTo };
+  }
+
+  it('ignores raw template HTML on the default untrusted path', () => {
+    const { bindPopup, addTo } = renderPopup();
+    const html = bindPopup.mock.calls[0][0] as string;
+
+    expect(html).not.toContain('<b>');
+    expect(html).not.toContain('<script>');
+    expect(html).toContain('&lt;script&gt;');
+    expect(addTo).toHaveBeenCalledOnce();
+  });
+
+  it('honors trusted template structure while escaping substituted values', () => {
+    const { bindPopup } = renderPopup(true);
+    const html = bindPopup.mock.calls[0][0] as string;
+
+    expect(html).toContain('<b>');
+    expect(html).toContain('&lt;script&gt;');
+    expect(html).not.toContain('<script>');
+  });
+});

package/src/components/MapRenderer.tsx

@@ -18,6 +18,7 @@ import type {
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { DegradedFallback } from './DegradedFallback';
 import { mapToDegradedTable } from '../utils/degraded-projections';
+import { escapeHtml } from '../utils/escape-html';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
 
 // Lazy load leaflet (it doesn't support SSR well)
@@ -172,14 +173,6 @@ export function buildPopupContent(
   return parts.join('<br/>');
 }
 
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
 /**
  * Resolve a marker's tooltip/popup string for binding (audit P1.2). Leaflet
  * renders bound strings as HTML; `marker.tooltip` / `marker.popup` come from
@@ -207,12 +200,13 @@ export function bindMarkerContent(
  * Add a GeoJSON layer to the map with style and popup support.
  * Returns the layer for bounds calculation.
  */
-function addGeoJSONLayer(
+export function addGeoJSONLayer(
   mapInst: any,
   leaflet: any,
   geojson: unknown,
   style?: MapGeoJSONStyle,
-  popup?: MapPopupConfig
+  popup?: MapPopupConfig,
+  allowHtml = false
 ): any {
   const styleFn = buildStyleFn(style);
 
@@ -231,7 +225,7 @@ function addGeoJSONLayer(
       });
     },
     onEachFeature: (feature: any, featureLayer: any) => {
-      const html = buildPopupContent(feature, popup);
+      const html = buildPopupContent(feature, popup, allowHtml);
       if (html) {
         featureLayer.bindPopup(html, { maxWidth: 300 });
       }
@@ -420,7 +414,14 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
 
         // ─── GeoJSON (v3.1.0) ───────────────────────
         if (p?.geojson) {
-          const geoLayer = addGeoJSONLayer(mapInstance, L, p.geojson, p.geojsonStyle, p.popup);
+          const geoLayer = addGeoJSONLayer(
+            mapInstance,
+            L,
+            p.geojson,
+            p.geojsonStyle,
+            p.popup,
+            allowHtml()
+          );
           allBoundsLayers.push(geoLayer);
         }
 
@@ -434,7 +435,8 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
               L,
               layerDef.geojson,
               layerDef.style || p?.geojsonStyle,
-              layerDef.popup || p?.popup
+              layerDef.popup || p?.popup,
+              allowHtml()
             );
 
             overlays[layerDef.name] = geoLayer;

package/src/components/UIResourceRenderer.tsx

@@ -1600,6 +1600,14 @@ function ComponentRenderer(props: {
       <Show when={props.component.type === 'footer'}>
         <FooterRenderer params={props.component.params as any} />
       </Show>
+      {/* `composite` is a UILayout discriminator, not a leaf renderer — a
+          top-level composite is handled as a layout (see `layout()` above). If
+          one arrives as a `components[]` entry or a streamed component it has no
+          leaf branch and now passes the (spec-derived) validation gate, so
+          surface the visible notice instead of a silent blank (audit P1.6). */}
+      <Show when={props.component.type === 'composite'}>
+        <UnsupportedComponentFallback component={props.component} />
+      </Show>
     </GenerativeUIErrorBoundary>
   )
 }

package/src/components/UnsupportedComponent.test.tsx

@@ -11,7 +11,7 @@ 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'
+import type { UIComponent, UILayout } from '../types'
 
 afterEach(cleanup)
 
@@ -59,6 +59,33 @@ describe('Unsupported component never renders blank (P1.6)', () => {
     })
   })
 
+  it('shows the notice for a composite nested as a components[] entry (not a silent blank)', async () => {
+    // A top-level composite is handled as a layout; but a composite that arrives
+    // as a leaf inside a layout's components[] has no dispatch branch. Since it
+    // now passes the spec-derived validation gate, it must surface the visible
+    // notice rather than render nothing (audit P1.6, Codex review follow-up).
+    const layoutWithNestedComposite: UILayout = {
+      id: 'L',
+      grid: { columns: 12, gap: '1rem' },
+      components: [
+        {
+          id: 'nested',
+          type: 'composite',
+          position: { colStart: 1, colSpan: 12 },
+          params: {},
+        } as UIComponent,
+      ],
+    }
+    const { container } = render(() => (
+      <UIResourceRenderer content={layoutWithNestedComposite} errorMode="silent" />
+    ))
+
+    await waitFor(() => {
+      expect(container.textContent ?? '').toContain('Unsupported component type')
+    })
+    expect(container.textContent).toContain('composite')
+  })
+
   it('renders a standalone footer component (previously a silent blank)', async () => {
     const footer: UIComponent = {
       id: 'f1',

package/src/components/index.ts

@@ -27,6 +27,9 @@ export type { GenerativeUIErrorBoundaryProps } from './GenerativeUIErrorBoundary
 export { FooterRenderer } from './FooterRenderer'
 export type { FooterComponentParams } from './FooterRenderer'
 
+// NOTE: kept as a published `./components` subpath export for backward compat.
+// This is a legacy stub superseded by the inline ActionRenderer in
+// UIResourceRenderer; slated for removal in the next MAJOR (not a minor).
 export { ActionRenderer } from './ActionRenderer'
 export type { ActionRendererProps } from './ActionRenderer'
 

package/src/hooks/useStreamingUI.test.ts

@@ -0,0 +1,194 @@
+/**
+ * useStreamingUI — behavioral coverage for the SSE streaming engine.
+ *
+ * The hook does NOT use `EventSource` (the field of that name is vestigial);
+ * it POSTs to /api/mcp/generative-ui-stream and reads an SSE-formatted body via
+ * `response.body.getReader()`. These tests stub `fetch` + the reader to drive
+ * scripted `status` / `component` / `complete` / `error` events and assert the
+ * four behaviors that had zero coverage: progressive accumulation, out-of-order
+ * buffering/reorder, terminal (non-recoverable) error, and recoverable-error
+ * reconnect with backoff.
+ *
+ * The hook auto-starts streaming on creation, so `fetch` is stubbed before the
+ * hook is instantiated inside a reactive root.
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { createRoot } from 'solid-js'
+import { useStreamingUI, type UseStreamingUIOptions } from './useStreamingUI'
+
+const T = '2026-07-03T00:00:00.000Z'
+
+/** One SSE message: an `event:` line + a `data:` line + a blank terminator. */
+function sse(event: string, data: unknown): string {
+  return `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`
+}
+
+/** A `component` event payload with the given sequence id. */
+function comp(seq: number, type = 'metric') {
+  return {
+    componentId: `c${seq}`,
+    sequenceId: seq,
+    component: { id: `c${seq}`, type, position: { colStart: 1, colSpan: 12 }, params: {} },
+    position: { colStart: 1, colSpan: 12 },
+  }
+}
+
+/** A `complete` event payload (CompleteMetadata). */
+function completeMeta() {
+  return {
+    layoutId: 'L1',
+    componentsCount: 2,
+    executionTimeMs: 1234,
+    firstTokenMs: 100,
+    provider: 'mock',
+    model: 'test',
+    cached: false,
+  }
+}
+
+/**
+ * A `fetch` stub. Each entry in `callSpecs` scripts one call (subsequent calls
+ * reuse the last entry) — either an HTTP failure (`ok: false`) or a readable
+ * body that yields the given SSE chunks then closes.
+ */
+function makeFetchStub(callSpecs: Array<{ ok?: boolean; errorBody?: unknown; chunks?: string[] }>) {
+  let call = 0
+  return vi.fn(async () => {
+    const spec = callSpecs[Math.min(call, callSpecs.length - 1)]
+    call++
+    if (spec.ok === false) {
+      return { ok: false, json: async () => spec.errorBody ?? { message: 'http error' } }
+    }
+    const encoder = new TextEncoder()
+    const chunks = spec.chunks ?? []
+    let i = 0
+    const reader = {
+      read: async () =>
+        i < chunks.length
+          ? { done: false, value: encoder.encode(chunks[i++]) }
+          : { done: true, value: undefined },
+    }
+    return { ok: true, body: { getReader: () => reader } }
+  })
+}
+
+const disposers: Array<() => void> = []
+
+/** Instantiate the hook inside a reactive root; returns its public API. */
+function renderHook(options: UseStreamingUIOptions) {
+  let api!: ReturnType<typeof useStreamingUI>
+  createRoot((dispose) => {
+    disposers.push(dispose)
+    api = useStreamingUI(options)
+  })
+  return api
+}
+
+describe('useStreamingUI', () => {
+  afterEach(() => {
+    while (disposers.length) disposers.pop()!()
+    vi.unstubAllGlobals()
+    vi.clearAllMocks()
+  })
+
+  it('accumulates components in sequence order and finalizes on complete', async () => {
+    const onComplete = vi.fn()
+    const onComponentReceived = vi.fn()
+    vi.stubGlobal(
+      'fetch',
+      makeFetchStub([
+        {
+          chunks: [
+            sse('status', { message: 'Working', timestamp: T, totalComponents: 2 }),
+            sse('component', comp(0, 'metric')),
+            sse('component', comp(1, 'text')),
+            sse('complete', completeMeta()),
+          ],
+        },
+      ])
+    )
+
+    const api = renderHook({ query: 'revenue', onComplete, onComponentReceived })
+
+    await vi.waitFor(() => expect(api.metadata()).not.toBeNull())
+
+    expect(api.components().map((c) => c.id)).toEqual(['c0', 'c1'])
+    expect(api.progress().totalCount).toBe(2)
+    expect(api.progress().receivedCount).toBe(2)
+    expect(api.metadata()?.executionTime).toBe(1234) // executionTimeMs aliased
+    expect(api.isStreaming()).toBe(false)
+    expect(api.isLoading()).toBe(false)
+    expect(onComponentReceived).toHaveBeenCalledTimes(2)
+    expect(onComplete).toHaveBeenCalledTimes(1)
+  })
+
+  it('buffers an out-of-order component and flushes in sequence order', async () => {
+    vi.stubGlobal(
+      'fetch',
+      makeFetchStub([
+        {
+          chunks: [
+            sse('status', { message: 's', timestamp: T }),
+            sse('component', comp(1, 'text')), // arrives before its predecessor
+            sse('component', comp(0, 'metric')), // unblocks the buffer
+            sse('complete', completeMeta()),
+          ],
+        },
+      ])
+    )
+
+    const api = renderHook({ query: 'q' })
+
+    await vi.waitFor(() => expect(api.components().length).toBe(2))
+    // Despite arriving 1-then-0, they surface in sequence order.
+    expect(api.components().map((c) => c.id)).toEqual(['c0', 'c1'])
+  })
+
+  it('surfaces a non-recoverable error and does not reconnect', async () => {
+    const onError = vi.fn()
+    const fetchStub = makeFetchStub([
+      { chunks: [sse('error', { error: 'fatal', message: 'boom', recoverable: false })] },
+    ])
+    vi.stubGlobal('fetch', fetchStub)
+
+    const api = renderHook({ query: 'q', onError })
+
+    await vi.waitFor(() => expect(api.error()).not.toBeNull())
+    expect(api.error()?.message).toBe('boom')
+    expect(api.isStreaming()).toBe(false)
+    expect(api.isLoading()).toBe(false)
+    expect(onError).toHaveBeenCalledTimes(1)
+
+    // A non-recoverable error schedules no retry — fetch stays at one call.
+    await new Promise((r) => setTimeout(r, 30))
+    expect(fetchStub).toHaveBeenCalledTimes(1)
+  })
+
+  it('reconnects with backoff after a recoverable error, then recovers', async () => {
+    const onError = vi.fn()
+    const fetchStub = makeFetchStub([
+      // 1st connection: recoverable error → schedules a reconnect (backoff 1000ms)
+      { chunks: [sse('error', { error: 'net', message: 'transient', recoverable: true })] },
+      // 2nd connection: succeeds
+      {
+        chunks: [
+          sse('status', { message: 'retry', timestamp: T }),
+          sse('component', comp(0, 'metric')),
+          sse('complete', completeMeta()),
+        ],
+      },
+    ])
+    vi.stubGlobal('fetch', fetchStub)
+
+    const api = renderHook({ query: 'q', onError })
+
+    await vi.waitFor(() => expect(onError).toHaveBeenCalledTimes(1))
+    // The reconnect fires a second fetch and the stream recovers.
+    await vi.waitFor(() => expect(fetchStub).toHaveBeenCalledTimes(2), { timeout: 2500 })
+    await vi.waitFor(() => expect(api.metadata()).not.toBeNull(), { timeout: 2500 })
+
+    expect(api.error()).toBeNull() // reconnect resets error state
+    expect(api.components().map((c) => c.id)).toEqual(['c0'])
+  })
+})

package/src/index.ts

@@ -292,6 +292,7 @@ export type {
   VideoComponentParams,
   // Code & Maps types (Sprint 6 + v3.1.0)
   CodeComponentParams,
+  LatLngPoint,
   MapMarker,
   MapComponentParams,
   MapPopupConfig,

package/src/services/component-registry.test.ts

@@ -3,9 +3,28 @@
  */
 
 import { describe, it, expect } from 'vitest'
-import { validateAgainstRegistry, getComponentEntry, ComponentRegistry } from './component-registry'
+import {
+  validateAgainstRegistry,
+  getComponentEntry,
+  ComponentRegistry,
+  MapRegistry,
+} from './component-registry'
 import type { ComponentType } from '../types'
-import { ComponentTypeSchema } from '@seed-ship/mcp-ui-spec'
+import { ComponentTypeSchema, MapComponentParamsSchema } from '@seed-ship/mcp-ui-spec'
+
+interface RegistrySchemaNode {
+  type?: string
+  enum?: string[]
+  oneOf?: RegistrySchemaNode[]
+  anyOf?: RegistrySchemaNode[]
+  properties?: Record<string, RegistrySchemaNode>
+  required?: string[]
+  items?: RegistrySchemaNode | RegistrySchemaNode[]
+  additionalItems?: boolean
+  minItems?: number
+  maxItems?: number
+  minLength?: number
+}
 
 /** All 20 component types in the registry */
 const ALL_TYPES: ComponentType[] = [
@@ -41,6 +60,89 @@ describe('registry ↔ schema parity (P1.5)', () => {
   })
 })
 
+describe('MapRegistry ↔ map spec parity (UI-MAP-0a)', () => {
+  const properties = MapRegistry.schema.properties as Record<string, RegistrySchemaNode>
+  const center = properties.center as { oneOf: unknown[] }
+  const markers = properties.markers as {
+    items: {
+      properties: Record<string, unknown> & { position: { oneOf: unknown[] } }
+    }
+  }
+  const markerProperties = markers.items.properties
+
+  it('advertises every root field accepted by MapComponentParamsSchema', () => {
+    expect(Object.keys(properties).sort()).toEqual(Object.keys(MapComponentParamsSchema.shape).sort())
+  })
+
+  it('uses the canonical marker names and keeps host trust out of the payload', () => {
+    expect(markerProperties).toHaveProperty('tooltip')
+    expect(markerProperties).not.toHaveProperty('title')
+    expect(properties).not.toHaveProperty('allowHtmlPopups')
+  })
+
+  it('advertises both tuple and object LatLng forms', () => {
+    expect(center.oneOf).toHaveLength(2)
+    expect(markerProperties.position.oneOf).toHaveLength(2)
+  })
+
+  it('advertises only the GeoJSON root shapes accepted by the runtime spec', () => {
+    const branches = properties.geojson.oneOf ?? []
+    const branchesByType = Object.fromEntries(
+      branches.map((branch) => {
+        const types = branch.properties?.type.enum ?? []
+        return [types.length === 1 ? types[0] : 'Geometry', branch]
+      })
+    ) as Record<string, RegistrySchemaNode>
+
+    expect(Object.keys(branchesByType).sort()).toEqual(['Feature', 'FeatureCollection', 'Geometry'])
+    expect(branchesByType.FeatureCollection.required).toEqual(['type', 'features'])
+    expect(branchesByType.Feature.required).toEqual(['type', 'geometry'])
+    expect(branchesByType.Geometry.required).toEqual(['type'])
+    expect(branchesByType.Geometry.properties?.type.enum).toEqual([
+      'Point',
+      'MultiPoint',
+      'LineString',
+      'MultiLineString',
+      'Polygon',
+      'MultiPolygon',
+      'GeometryCollection',
+    ])
+    expect(branchesByType.Geometry.properties?.coordinates.anyOf).toHaveLength(4)
+  })
+
+  it('preserves choropleth tuple order and rejects empty layer names in the advertised schema', () => {
+    const scale = properties.geojsonStyle.properties?.choroplethScale
+    const tuple = scale?.items as RegistrySchemaNode
+    const tupleItems = tuple.items as RegistrySchemaNode[]
+    const layer = properties.layers.items as RegistrySchemaNode
+
+    expect(tupleItems).toEqual([{ type: 'number' }, { type: 'string' }])
+    expect(tuple.additionalItems).toBe(false)
+    expect(tuple.minItems).toBe(2)
+    expect(tuple.maxItems).toBe(2)
+    expect(tuple).not.toHaveProperty('prefixItems')
+    expect(layer.properties?.name.minLength).toBe(1)
+  })
+
+  it.each([
+    ['empty GeoJSON objects', { geojson: {} }],
+    ['reversed choropleth tuples', { geojsonStyle: { choroplethScale: [['red', 0]] } }],
+    [
+      'empty layer names',
+      {
+        layers: [
+          {
+            name: '',
+            geojson: { type: 'FeatureCollection', features: [] },
+          },
+        ],
+      },
+    ],
+  ])('keeps runtime rejection coverage for %s', (_label, params) => {
+    expect(MapComponentParamsSchema.safeParse(params).success).toBe(false)
+  })
+})
+
 describe('ComponentRegistry', () => {
   describe('registry completeness', () => {
     it('has exactly 20 registered types', () => {