@seed-ship/mcp-ui-solid 2.1.2 → 2.2.3

package/src/components/UIResourceRenderer.tsx

@@ -21,6 +21,7 @@ import { ImageGalleryRenderer } from './ImageGalleryRenderer'
 import { VideoRenderer } from './VideoRenderer'
 import { CodeBlockRenderer } from './CodeBlockRenderer'
 import { MapRenderer } from './MapRenderer'
+import { ExpandableWrapper } from './ExpandableWrapper'
 import { RenderProvider } from './RenderContext'
 import { useAction } from '../hooks/useAction'
 import { marked } from 'marked'
@@ -230,7 +231,7 @@ function ChartRenderer(props: {
 /**
  * Smart cell value renderer that handles markdown links and other formats
  */
-function renderCellValue(value: any): string {
+export function renderCellValue(value: any): string {
   // Handle null/undefined
   if (value === null || value === undefined) {
     return '-'
@@ -285,6 +286,17 @@ function renderCellValue(value: any): string {
     return DOMPurify.sanitize(htmlValue, { ADD_ATTR: ['target', 'rel'] })
   }
 
+  // Detect raw HTML in cell values (e.g. <a href="..." data-citation-page="5">text</a>)
+  // This handles cases where cell data comes from innerHTML extraction
+  const hasHtml = /<[a-z][\s\S]*>/i.test(strValue)
+  if (hasHtml) {
+    return DOMPurify.sanitize(strValue, {
+      ALLOWED_TAGS: ['a', 'strong', 'em', 'b', 'i', 'code', 'span', 'br'],
+      ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'data-citation-page', 'data-citation-source', 'title'],
+      ADD_ATTR: ['target', 'rel'],
+    })
+  }
+
   // Check if value contains markdown formatting (bold, italic, code, etc.)
   const hasMarkdown = /[*_`[\]#]/.test(strValue)
   if (hasMarkdown) {
@@ -293,8 +305,8 @@ function renderCellValue(value: any): string {
     return DOMPurify.sanitize(parsed, { ADD_ATTR: ['target', 'rel'] })
   }
 
-  // Plain text
-  return strValue
+  // Plain text — sanitize to prevent XSS via innerHTML
+  return DOMPurify.sanitize(strValue)
 }
 
 /**
@@ -361,22 +373,85 @@ function TableRenderer(props: {
     }
   })
 
+  // Cell value extraction helper
+  const getCellValue = (row: any, key: string): string => {
+    const value = row[key]
+    if (value === null || value === undefined) return ''
+    if (typeof value === 'object') return value.name || value.label || JSON.stringify(value)
+    return String(value)
+  }
+
   // Generate copyable text from table data (TSV format for spreadsheet compatibility)
   const getTableText = () => {
     const columns = tableParams.columns || []
     const rows = tableParams.rows || []
     const header = columns.map((c: any) => c.label).join('\t')
     const dataRows = rows.map((row: any) =>
-      columns.map((c: any) => {
-        const value = row[c.key]
-        if (value === null || value === undefined) return ''
-        if (typeof value === 'object') return value.name || value.label || JSON.stringify(value)
-        return String(value)
-      }).join('\t')
+      columns.map((c: any) => getCellValue(row, c.key)).join('\t')
+    ).join('\n')
+    return `${header}\n${dataRows}`
+  }
+
+  // CSV generation (RFC 4180 compliant)
+  const getTableCSV = () => {
+    const columns = tableParams.columns || []
+    const rows = tableParams.rows || []
+    const escapeCSV = (val: string) => {
+      if (val.includes(',') || val.includes('"') || val.includes('\n')) {
+        return `"${val.replace(/"/g, '""')}"`
+      }
+      return val
+    }
+    const header = columns.map((c: any) => escapeCSV(c.label)).join(',')
+    const dataRows = rows.map((row: any) =>
+      columns.map((c: any) => escapeCSV(getCellValue(row, c.key))).join(',')
     ).join('\n')
     return `${header}\n${dataRows}`
   }
 
+  // JSON generation
+  const getTableJSON = () => {
+    const columns = tableParams.columns || []
+    const rows = tableParams.rows || []
+    return JSON.stringify({ columns: columns.map((c: any) => ({ key: c.key, label: c.label })), rows }, null, 2)
+  }
+
+  // Download helper
+  const downloadFile = (content: string, filename: string, mimeType: string) => {
+    const blob = new Blob([content], { type: mimeType })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  // Export config
+  const exportable = tableParams.exportable
+  const exportFormats = typeof exportable === 'object' && exportable?.formats
+    ? exportable.formats
+    : ['csv', 'tsv', 'json']
+  const exportFilename = (typeof exportable === 'object' && exportable?.filename) || `table-${Math.random().toString(36).slice(2, 9)}`
+
+  // Export dropdown state
+  const [showExportMenu, setShowExportMenu] = createSignal(false)
+
+  const handleExport = (format: string) => {
+    setShowExportMenu(false)
+    switch (format) {
+      case 'tsv':
+        navigator.clipboard.writeText(getTableText())
+        break
+      case 'csv':
+        downloadFile(getTableCSV(), `${exportFilename}.csv`, 'text/csv')
+        break
+      case 'json':
+        downloadFile(getTableJSON(), `${exportFilename}.json`, 'application/json')
+        break
+    }
+  }
+
   const tableId = `table-${Math.random().toString(36).slice(2, 9)}`
 
   // Standard table body (non-virtualized)
@@ -440,65 +515,93 @@ function TableRenderer(props: {
   }
 
   return (
-    <div class="relative w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden group">
-      <CopyButton getText={getTableText} title="Copy table data" position="top-right" />
-      <div class="p-4">
-        <Show when={tableParams.title}>
-          <h3 id={`${tableId}-title`} class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
-            {tableParams.title}
-            <Show when={isVirtualizing()}>
-              <span class="ml-2 text-xs font-normal text-gray-400">(virtualized: {tableParams.rows?.length} rows)</span>
+    <ExpandableWrapper title={tableParams.title || 'Table'} copyData={getTableText()} copyLabel="Copy table (TSV)">
+      <div class="relative w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden group">
+        <Show when={exportable} fallback={<CopyButton getText={getTableText} title="Copy table data" position="top-right" />}>
+          <div class="absolute right-10 top-2 z-10">
+            <button
+              onClick={() => setShowExportMenu(!showExportMenu())}
+              class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"
+              title="Export table"
+              aria-label="Export table"
+            >
+              <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 when={showExportMenu()}>
+              <div class="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 text-sm">
+                <Show when={(exportFormats as string[]).includes('tsv')}>
+                  <button onClick={() => handleExport('tsv')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Copy TSV</button>
+                </Show>
+                <Show when={(exportFormats as string[]).includes('csv')}>
+                  <button onClick={() => handleExport('csv')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Download CSV</button>
+                </Show>
+                <Show when={(exportFormats as string[]).includes('json')}>
+                  <button onClick={() => handleExport('json')} class="w-full text-left px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Download JSON</button>
+                </Show>
+              </div>
             </Show>
-          </h3>
+          </div>
         </Show>
+        <div class="p-4">
+          <Show when={tableParams.title}>
+            <h3 id={`${tableId}-title`} class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+              {tableParams.title}
+              <Show when={isVirtualizing()}>
+                <span class="ml-2 text-xs font-normal text-gray-400">(virtualized: {tableParams.rows?.length} rows)</span>
+              </Show>
+            </h3>
+          </Show>
 
-        <div
-          ref={scrollContainerRef}
-          class="overflow-x-auto"
-          style={isVirtualizing() ? { 'max-height': '500px', 'overflow-y': 'auto' } : {}}
-          role="region"
-          aria-label={tableParams.title || 'Data table'}
-          tabindex="0"
-        >
-          <table
-            class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border-separate border-spacing-0"
-            aria-labelledby={tableParams.title ? `${tableId}-title` : undefined}
+          <div
+            ref={scrollContainerRef}
+            class="overflow-x-auto"
+            style={isVirtualizing() ? { 'max-height': '500px', 'overflow-y': 'auto' } : {}}
+            role="region"
+            aria-label={tableParams.title || 'Data table'}
+            tabindex="0"
           >
-            <thead class="bg-gray-50 dark:bg-gray-900/50 sticky top-0 z-10">
-              <tr>
-                <For each={tableParams.columns}>
-                  {(column: any) => (
-                    <th
-                      scope="col"
-                      class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 first:pl-6 last:pr-6 bg-gray-50 dark:bg-gray-900/50"
-                      style={column.width ? { width: column.width } : {}}
-                    >
-                      {column.label}
-                    </th>
-                  )}
-                </For>
-              </tr>
-            </thead>
-            <Show when={isVirtualizing()} fallback={<StandardTableBody />}>
-              <VirtualizedTableBody />
-            </Show>
-          </table>
-        </div>
-
-        <Show when={tableParams.pagination}>
-          <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-            <span>
-              Showing {tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1} -{' '}
-              {Math.min(
-                (tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize,
-                tableParams.pagination.totalRows
-              )}{' '}
-              of {tableParams.pagination.totalRows}
-            </span>
+            <table
+              class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border-separate border-spacing-0"
+              aria-labelledby={tableParams.title ? `${tableId}-title` : undefined}
+            >
+              <thead class="bg-gray-50 dark:bg-gray-900/50 sticky top-0 z-10">
+                <tr>
+                  <For each={tableParams.columns}>
+                    {(column: any) => (
+                      <th
+                        scope="col"
+                        class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 first:pl-6 last:pr-6 bg-gray-50 dark:bg-gray-900/50"
+                        style={column.width ? { width: column.width } : {}}
+                      >
+                        {column.label}
+                      </th>
+                    )}
+                  </For>
+                </tr>
+              </thead>
+              <Show when={isVirtualizing()} fallback={<StandardTableBody />}>
+                <VirtualizedTableBody />
+              </Show>
+            </table>
           </div>
-        </Show>
+
+          <Show when={tableParams.pagination}>
+            <div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+              <span>
+                Showing {tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1} -{' '}
+                {Math.min(
+                  (tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize,
+                  tableParams.pagination.totalRows
+                )}{' '}
+                of {tableParams.pagination.totalRows}
+              </span>
+            </div>
+          </Show>
+        </div>
       </div>
-    </div>
+    </ExpandableWrapper>
   )
 }
 

package/src/components/renderCellValue.test.ts

@@ -0,0 +1,122 @@
+/**
+ * Tests for renderCellValue — P1.1: HTML/link preservation in table cells
+ */
+
+import { describe, it, expect } from 'vitest'
+import { renderCellValue } from './UIResourceRenderer'
+
+describe('renderCellValue', () => {
+  // Basic values
+  it('returns "-" for null', () => {
+    expect(renderCellValue(null)).toBe('-')
+  })
+
+  it('returns "-" for undefined', () => {
+    expect(renderCellValue(undefined)).toBe('-')
+  })
+
+  it('returns plain text as-is', () => {
+    expect(renderCellValue('Hello world')).toBe('Hello world')
+  })
+
+  it('returns number as string', () => {
+    expect(renderCellValue(42)).toBe('42')
+  })
+
+  // Object with URL (existing behavior)
+  it('renders object with url as link', () => {
+    const result = renderCellValue({ url: 'https://example.com', name: 'Example' })
+    expect(result).toContain('href="https://example.com"')
+    expect(result).toContain('Example')
+    expect(result).toContain('<a ')
+  })
+
+  // Markdown links
+  it('converts markdown links to HTML', () => {
+    const result = renderCellValue('[Google](https://google.com)')
+    expect(result).toContain('href="https://google.com"')
+    expect(result).toContain('Google')
+    expect(result).toContain('<a ')
+  })
+
+  it('handles multiple markdown links in same value', () => {
+    const result = renderCellValue('See [Google](https://google.com) and [GitHub](https://github.com)')
+    expect(result).toContain('Google')
+    expect(result).toContain('GitHub')
+    expect((result.match(/<a /g) || []).length).toBe(2)
+  })
+
+  // Raw HTML links (P1.1 fix)
+  it('preserves raw HTML <a> tags', () => {
+    const result = renderCellValue('<a href="https://example.com">Click here</a>')
+    expect(result).toContain('href="https://example.com"')
+    expect(result).toContain('Click here')
+    expect(result).toContain('<a ')
+  })
+
+  it('preserves citation links with data attributes', () => {
+    const result = renderCellValue('<a href="#p5" data-citation-page="5">Source [5]</a>')
+    expect(result).toContain('data-citation-page="5"')
+    expect(result).toContain('Source [5]')
+    expect(result).toContain('<a ')
+  })
+
+  it('preserves mixed text and HTML links', () => {
+    const result = renderCellValue('Revenue: $1.2M <a href="/report">details</a>')
+    expect(result).toContain('Revenue: $1.2M')
+    expect(result).toContain('href="/report"')
+    expect(result).toContain('details')
+  })
+
+  it('preserves multiple HTML links', () => {
+    const result = renderCellValue('<a href="/a">Link A</a> and <a href="/b">Link B</a>')
+    expect(result).toContain('Link A')
+    expect(result).toContain('Link B')
+    expect((result.match(/<a /g) || []).length).toBe(2)
+  })
+
+  // HTML sanitization (security)
+  it('strips dangerous tags from HTML', () => {
+    const result = renderCellValue('<script>alert("xss")</script>Safe text')
+    expect(result).not.toContain('<script>')
+    expect(result).toContain('Safe text')
+  })
+
+  it('strips onclick handlers from links', () => {
+    const result = renderCellValue('<a href="#" onclick="alert(1)">Link</a>')
+    expect(result).not.toContain('onclick')
+    expect(result).toContain('Link')
+  })
+
+  it('strips iframe tags', () => {
+    const result = renderCellValue('<iframe src="https://evil.com"></iframe>')
+    expect(result).not.toContain('<iframe')
+  })
+
+  // Allowed inline HTML
+  it('preserves <strong> and <em> tags', () => {
+    const result = renderCellValue('<strong>Bold</strong> and <em>italic</em>')
+    expect(result).toContain('<strong>Bold</strong>')
+    expect(result).toContain('<em>italic</em>')
+  })
+
+  it('preserves <code> tags', () => {
+    const result = renderCellValue('Use <code>npm install</code>')
+    expect(result).toContain('<code>npm install</code>')
+  })
+
+  // Plain text XSS prevention
+  it('sanitizes plain text that looks like HTML injection', () => {
+    const result = renderCellValue('<img src=x onerror=alert(1)>')
+    expect(result).not.toContain('onerror')
+  })
+
+  // Undefined cleanup
+  it('cleans up "Text – undefined" patterns', () => {
+    expect(renderCellValue('Paris – undefined')).toBe('Paris')
+  })
+
+  it('returns "-" for standalone "undefined"', () => {
+    expect(renderCellValue('undefined')).toBe('-')
+  })
+})

package/src/index.ts

@@ -35,6 +35,7 @@ export { UIResourceRenderer, StreamingUIRenderer, GenerativeUIErrorBoundary } fr
 export { DraggableGridItem } from './components/DraggableGridItem'
 export { ResizeHandle } from './components/ResizeHandle'
 export { EditableUIResourceRenderer } from './components/EditableUIResourceRenderer'
+export { ExpandableWrapper } from './components/ExpandableWrapper'
 
 // Autocomplete Components
 export { GhostText, GhostTextInput } from './components/GhostText'
@@ -50,6 +51,7 @@ export type {
 export type { DraggableGridItemProps } from './components/DraggableGridItem'
 export type { ResizeHandleProps as ResizeHandleComponentProps } from './components/ResizeHandle'
 export type { EditableUIResourceRendererProps } from './components/EditableUIResourceRenderer'
+export type { ExpandableWrapperProps } from './components/ExpandableWrapper'
 export type { GhostTextProps, GhostTextInputProps } from './components/GhostText'
 export type { AutocompleteDropdownProps } from './components/AutocompleteDropdown'
 export type { AutocompleteFormFieldProps, AutocompleteFormFieldParams } from './components/AutocompleteFormField'

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

@@ -0,0 +1,81 @@
+/**
+ * Tests for P0 fix: ComponentRegistry validation leniency
+ *
+ * Ensures unregistered component types (code, map, form, modal, etc.)
+ * pass validation with warnings instead of failing with errors.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { validateAgainstRegistry, getComponentEntry, ComponentRegistry } from './component-registry'
+import type { ComponentType } from '../types'
+
+/** The 9 types currently registered in ComponentRegistry */
+const REGISTERED_TYPES: ComponentType[] = [
+  'chart', 'table', 'metric', 'text', 'grid',
+  'action', 'footer', 'carousel', 'artifact',
+]
+
+/** The 9 types with renderers but NO registry entry */
+const UNREGISTERED_TYPES: ComponentType[] = [
+  'code', 'map', 'form', 'modal', 'action-group',
+  'image-gallery', 'video', 'iframe', 'image', 'link',
+]
+
+describe('validateAgainstRegistry', () => {
+  describe('registered types', () => {
+    it.each(REGISTERED_TYPES)('validates "%s" with valid: true when params are correct', (type) => {
+      const entry = getComponentEntry(type)
+      expect(entry).toBeDefined()
+
+      // Build minimal valid params from required fields
+      const params: Record<string, any> = {}
+      const required = entry!.schema.required || []
+      for (const key of required) {
+        params[key] = 'test-value'
+      }
+
+      const result = validateAgainstRegistry(type, params)
+      expect(result.valid).toBe(true)
+      expect(result.errors).toBeUndefined()
+      expect(result.warnings).toBeUndefined()
+    })
+
+    it.each(REGISTERED_TYPES)('rejects "%s" when required fields are missing', (type) => {
+      const entry = getComponentEntry(type)
+      const required = entry!.schema.required || []
+      if (required.length === 0) return // skip types with no required fields
+
+      const result = validateAgainstRegistry(type, {})
+      expect(result.valid).toBe(false)
+      expect(result.errors).toBeDefined()
+      expect(result.errors!.length).toBeGreaterThan(0)
+      expect(result.errors![0]).toContain('Missing required field')
+    })
+  })
+
+  describe('unregistered types (have renderers, no registry entry)', () => {
+    it.each(UNREGISTERED_TYPES)('passes "%s" with valid: true and a warning', (type) => {
+      const result = validateAgainstRegistry(type, { anything: true })
+      expect(result.valid).toBe(true)
+      expect(result.errors).toBeUndefined()
+      expect(result.warnings).toBeDefined()
+      expect(result.warnings![0]).toContain(`No registry entry for type: ${type}`)
+    })
+
+    it.each(UNREGISTERED_TYPES)('getComponentEntry returns undefined for "%s"', (type) => {
+      expect(getComponentEntry(type)).toBeUndefined()
+    })
+  })
+
+  describe('registry consistency', () => {
+    it('has exactly 9 registered types', () => {
+      expect(ComponentRegistry.size).toBe(9)
+    })
+
+    it('all registered types are in REGISTERED_TYPES', () => {
+      for (const [type] of ComponentRegistry) {
+        expect(REGISTERED_TYPES).toContain(type)
+      }
+    })
+  })
+})

package/src/services/component-registry.ts

@@ -596,10 +596,11 @@ export function getRegistryForLLM(): string {
 export function validateAgainstRegistry(
   componentType: ComponentType,
   params: any
-): { valid: boolean; errors?: string[] } {
+): { valid: boolean; errors?: string[]; warnings?: string[] } {
   const entry = getComponentEntry(componentType)
   if (!entry) {
-    return { valid: false, errors: [`Unknown component type: ${componentType}`] }
+    // Warn but don't block — renderer may exist even without registry entry
+    return { valid: true, warnings: [`No registry entry for type: ${componentType}`] }
   }
 
   // Basic validation (Phase 1 will add Zod schema validation)

package/src/services/validation.test.ts

@@ -0,0 +1,134 @@
+/**
+ * Tests for P0 fix: validateComponent() default case leniency
+ *
+ * Ensures unregistered component types pass through validateComponent()
+ * without UNKNOWN_COMPONENT_TYPE errors.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { validateComponent } from './validation'
+import type { UIComponent, ComponentType } from '../types'
+
+/** Helper to create a minimal valid UIComponent for testing */
+function makeComponent(type: ComponentType, params: Record<string, any> = {}): UIComponent {
+  return {
+    id: `test-${type}`,
+    type,
+    position: { colStart: 1, colSpan: 12 },
+    params: params as any,
+  }
+}
+
+/** Types that have explicit validation cases in validateComponent */
+const VALIDATED_TYPES: ComponentType[] = [
+  'chart', 'table', 'metric', 'text', 'iframe', 'image', 'link', 'action',
+]
+
+/** Types that hit the default case (no specific validation) */
+const PASSTHROUGH_TYPES: ComponentType[] = [
+  'code', 'map', 'form', 'modal', 'action-group',
+  'image-gallery', 'video', 'grid', 'carousel',
+  'artifact', 'footer',
+]
+
+describe('validateComponent', () => {
+  describe('passthrough types (no specific validation case)', () => {
+    it.each(PASSTHROUGH_TYPES)('"%s" does NOT produce UNKNOWN_COMPONENT_TYPE error', (type) => {
+      const component = makeComponent(type)
+      const result = validateComponent(component)
+
+      const unknownTypeError = result.errors?.find(
+        (e) => e.code === 'UNKNOWN_COMPONENT_TYPE'
+      )
+      expect(unknownTypeError).toBeUndefined()
+    })
+  })
+
+  describe('validated types still work', () => {
+    it('validates a valid chart component', () => {
+      const component = makeComponent('chart', {
+        chartType: 'bar',
+        data: { labels: ['A'], datasets: [{ data: [1] }] },
+      })
+      const result = validateComponent(component)
+      expect(result.valid).toBe(true)
+    })
+
+    it('validates a valid table component', () => {
+      const component = makeComponent('table', {
+        columns: [{ key: 'name', label: 'Name' }],
+        rows: [{ name: 'test' }],
+      })
+      const result = validateComponent(component)
+      expect(result.valid).toBe(true)
+    })
+
+    it('validates a valid text component', () => {
+      const component = makeComponent('text', {
+        content: 'Hello world',
+      })
+      const result = validateComponent(component)
+      expect(result.valid).toBe(true)
+    })
+
+    it('validates a valid metric component', () => {
+      const component = makeComponent('metric', {
+        value: 42,
+        title: 'Count',
+      })
+      const result = validateComponent(component)
+      expect(result.valid).toBe(true)
+    })
+  })
+
+  describe('regression: code type renders without validation error', () => {
+    it('type "code" passes validation', () => {
+      const component = makeComponent('code', {
+        code: 'console.log("hello")',
+        language: 'typescript',
+      })
+      const result = validateComponent(component)
+      const unknownTypeError = result.errors?.find(
+        (e) => e.code === 'UNKNOWN_COMPONENT_TYPE'
+      )
+      expect(unknownTypeError).toBeUndefined()
+    })
+
+    it('type "map" passes validation', () => {
+      const component = makeComponent('map', {
+        center: { lat: 48.8566, lng: 2.3522 },
+        zoom: 13,
+      })
+      const result = validateComponent(component)
+      const unknownTypeError = result.errors?.find(
+        (e) => e.code === 'UNKNOWN_COMPONENT_TYPE'
+      )
+      expect(unknownTypeError).toBeUndefined()
+    })
+  })
+
+  describe('truly unknown types are rejected', () => {
+    it('rejects a typo like "chrt" with UNKNOWN_COMPONENT_TYPE', () => {
+      const component = makeComponent('chrt' as any)
+      const result = validateComponent(component)
+      const unknownTypeError = result.errors?.find(
+        (e) => e.code === 'UNKNOWN_COMPONENT_TYPE'
+      )
+      expect(unknownTypeError).toBeDefined()
+      expect(result.valid).toBe(false)
+    })
+
+    it('rejects garbage type "foobar"', () => {
+      const component = makeComponent('foobar' as any)
+      const result = validateComponent(component)
+      expect(result.valid).toBe(false)
+      expect(result.errors?.some((e) => e.code === 'UNKNOWN_COMPONENT_TYPE')).toBe(true)
+    })
+
+    it('rejects empty string type', () => {
+      const component = makeComponent('' as any)
+      const result = validateComponent(component)
+      expect(result.valid).toBe(false)
+    })
+  })
+})