@seed-ship/mcp-ui-solid 2.2.10 → 2.3.0

package/src/services/validation.test.ts

@@ -6,7 +6,7 @@
  */
 
 import { describe, it, expect, vi } from 'vitest'
-import { validateComponent, validateChartComponent } from './validation'
+import { validateComponent, validateChartComponent, getIframeSandbox } from './validation'
 import type { UIComponent, ComponentType } from '../types'
 
 /** Helper to create a minimal valid UIComponent for testing */
@@ -142,6 +142,108 @@ describe('validateComponent', () => {
   })
 })
 
+describe('component-specific validation', () => {
+  it('rejects video without url', () => {
+    const result = validateComponent(makeComponent('video'))
+    expect(result.errors?.some((e) => e.code === 'INVALID_VIDEO')).toBe(true)
+  })
+
+  it('rejects carousel with empty items', () => {
+    const result = validateComponent(makeComponent('carousel', { items: [] }))
+    expect(result.errors?.some((e) => e.code === 'EMPTY_CAROUSEL')).toBe(true)
+  })
+
+  it('rejects image-gallery with empty images', () => {
+    const result = validateComponent(makeComponent('image-gallery', { images: [] }))
+    expect(result.errors?.some((e) => e.code === 'EMPTY_GALLERY')).toBe(true)
+  })
+
+  it('rejects form with empty fields', () => {
+    const result = validateComponent(makeComponent('form', { fields: [] }))
+    expect(result.errors?.some((e) => e.code === 'EMPTY_FORM')).toBe(true)
+  })
+
+  it('rejects action-group with empty actions', () => {
+    const result = validateComponent(makeComponent('action-group', { actions: [] }))
+    expect(result.errors?.some((e) => e.code === 'EMPTY_ACTION_GROUP')).toBe(true)
+  })
+
+  it('rejects code without code content', () => {
+    const result = validateComponent(makeComponent('code'))
+    expect(result.errors?.some((e) => e.code === 'INVALID_CODE')).toBe(true)
+  })
+
+  it('rejects map without center or markers', () => {
+    const result = validateComponent(makeComponent('map'))
+    expect(result.errors?.some((e) => e.code === 'INVALID_MAP')).toBe(true)
+  })
+
+  it('accepts map with markers but no center', () => {
+    const result = validateComponent(makeComponent('map', { markers: [{ position: [48, 2] }] }))
+    const mapError = result.errors?.find((e) => e.code === 'INVALID_MAP')
+    expect(mapError).toBeUndefined()
+  })
+
+  it('accepts modal with no params beyond type', () => {
+    const result = validateComponent(makeComponent('modal', { title: 'Test' }))
+    expect(result.valid).toBe(true)
+  })
+})
+
+describe('validateChartComponent — scatter/bubble/time-series', () => {
+  it('validates scatter chart without labels', () => {
+    const result = validateChartComponent({
+      type: 'scatter',
+      data: { datasets: [{ label: 'Test', data: [{ x: 1, y: 2 }, { x: 3, y: 4 }] }] },
+    } as any)
+    expect(result.valid).toBe(true)
+  })
+
+  it('validates bubble chart without labels', () => {
+    const result = validateChartComponent({
+      type: 'bubble',
+      data: { datasets: [{ label: 'Test', data: [{ x: 1, y: 2, r: 5 }] }] },
+    } as any)
+    expect(result.valid).toBe(true)
+  })
+
+  it('validates line chart with time-series object data', () => {
+    const result = validateChartComponent({
+      type: 'line',
+      data: { datasets: [{ label: 'Prix', data: [{ x: '2024-01-01', y: 42 }, { x: '2024-02-01', y: 45 }] }] },
+    } as any)
+    expect(result.valid).toBe(true)
+  })
+
+  it('rejects scatter with number data instead of {x,y}', () => {
+    const result = validateChartComponent({
+      type: 'scatter',
+      data: { datasets: [{ label: 'Test', data: [1, 2, 3] }] },
+    } as any)
+    expect(result.valid).toBe(false)
+    expect(result.errors?.some((e) => e.code === 'INVALID_POINT_DATA')).toBe(true)
+  })
+
+  it('rejects bar chart without labels', () => {
+    const result = validateChartComponent({
+      type: 'bar',
+      data: { datasets: [{ label: 'Test', data: [1, 2, 3] }] },
+    } as any)
+    expect(result.valid).toBe(false)
+    expect(result.errors?.some((e) => e.code === 'MISSING_LABELS')).toBe(true)
+  })
+
+  it('accepts empty dataset without length mismatch', () => {
+    const result = validateChartComponent({
+      type: 'bar',
+      data: { labels: ['A', 'B'], datasets: [{ label: 'Test', data: [] }] },
+    } as any)
+    // Empty dataset should not trigger DATA_LENGTH_MISMATCH
+    const mismatch = result.errors?.find((e) => e.code === 'DATA_LENGTH_MISMATCH')
+    expect(mismatch).toBeUndefined()
+  })
+})
+
 describe('validateChartComponent — H1 null guards', () => {
 
   it('rejects chart with undefined data', () => {
@@ -170,3 +272,58 @@ describe('validateChartComponent — H1 null guards', () => {
     expect(result.valid).toBe(true)
   })
 })
+
+describe('getIframeSandbox — tiered sandbox', () => {
+  it('gives full sandbox to trusted domains (Google)', () => {
+    const sandbox = getIframeSandbox('https://docs.google.com/spreadsheets/d/123')
+    expect(sandbox).toContain('allow-same-origin')
+    expect(sandbox).toContain('allow-scripts')
+    expect(sandbox).toContain('allow-forms')
+  })
+
+  it('gives full sandbox to Deposium domains', () => {
+    const sandbox = getIframeSandbox('https://deposium.com/embed/123')
+    expect(sandbox).toContain('allow-same-origin')
+  })
+
+  it('gives full sandbox to payment domains (Stripe)', () => {
+    const sandbox = getIframeSandbox('https://checkout.stripe.com/c/pay_123')
+    expect(sandbox).toContain('allow-same-origin')
+    expect(sandbox).toContain('allow-forms')
+  })
+
+  it('gives full sandbox to Polar.sh', () => {
+    const sandbox = getIframeSandbox('https://polar.sh/checkout/123')
+    expect(sandbox).toContain('allow-same-origin')
+  })
+
+  it('gives restrictive sandbox to untrusted whitelisted domains (quickchart)', () => {
+    const sandbox = getIframeSandbox('https://quickchart.io/chart?c={}')
+    expect(sandbox).toContain('allow-scripts')
+    expect(sandbox).toContain('allow-popups')
+    expect(sandbox).not.toContain('allow-same-origin')
+    expect(sandbox).not.toContain('allow-forms')
+  })
+
+  it('gives restrictive sandbox to YouTube', () => {
+    const sandbox = getIframeSandbox('https://www.youtube.com/embed/abc123')
+    expect(sandbox).not.toContain('allow-same-origin')
+  })
+
+  it('gives restrictive sandbox to unknown domains', () => {
+    const sandbox = getIframeSandbox('https://evil.example.com/page')
+    expect(sandbox).not.toContain('allow-same-origin')
+  })
+
+  it('handles invalid URLs gracefully', () => {
+    const sandbox = getIframeSandbox('not-a-url')
+    expect(sandbox).toBe('allow-scripts allow-popups')
+  })
+
+  it('supports custom trusted domains', () => {
+    const sandbox = getIframeSandbox('https://my-internal-tool.corp.com/dash', {
+      customTrustedDomains: ['my-internal-tool.corp.com'],
+    })
+    expect(sandbox).toContain('allow-same-origin')
+  })
+})

package/src/services/validation.ts

@@ -160,6 +160,67 @@ export const DEFAULT_IFRAME_DOMAINS = [
   'www.clinicaltrials.gov',
   'linear.app',
   'www.linear.app',
+
+  // Payment platforms (v2.2.12)
+  'polar.sh',
+  'www.polar.sh',
+  'checkout.stripe.com',
+  'js.stripe.com',
+  'billing.stripe.com',
+  'buy.stripe.com',
+  'connect.stripe.com',
+  'invoice.stripe.com',
+]
+
+/**
+ * Trusted iframe domains that require allow-same-origin to function.
+ * These domains need access to their own cookies/storage for auth.
+ * All other whitelisted domains get a restrictive sandbox without allow-same-origin.
+ */
+export const TRUSTED_IFRAME_DOMAINS = [
+  // Deposium (own domains)
+  'deposium.com',
+  'deposium.vip',
+  'deposium.ai',
+  'localhost',
+
+  // Google services (need auth cookies)
+  'docs.google.com',
+  'drive.google.com',
+  'sheets.google.com',
+  'slides.google.com',
+  'maps.google.com',
+  'datastudio.google.com',
+  'lookerstudio.google.com',
+
+  // Productivity (need auth)
+  'notion.so',
+  'www.notion.so',
+  'airtable.com',
+  'figma.com',
+  'www.figma.com',
+  'miro.com',
+
+  // Payment (need auth + cookies for checkout)
+  'polar.sh',
+  'www.polar.sh',
+  'checkout.stripe.com',
+  'js.stripe.com',
+  'billing.stripe.com',
+  'buy.stripe.com',
+  'connect.stripe.com',
+  'invoice.stripe.com',
+
+  // Business tools (need auth)
+  'app.hubspot.com',
+  'share.hubspot.com',
+  'app.powerbi.com',
+  'linear.app',
+  'www.linear.app',
+  'calendly.com',
+  'typeform.com',
+  'cal.com',
+  'canva.com',
 ]
 
 /**
@@ -244,13 +305,22 @@ export function validateChartComponent(
   if (!Array.isArray(params.data.datasets)) {
     return { valid: false, errors: [{ path: 'params.data.datasets', message: 'Missing or invalid datasets array', code: 'MISSING_DATASETS' }] }
   }
-  if (!Array.isArray(params.data.labels)) {
-    return { valid: false, errors: [{ path: 'params.data.labels', message: 'Missing or invalid labels array', code: 'MISSING_LABELS' }] }
+  // Detect point-based charts (scatter/bubble) or object data (time-series line)
+  const chartType = params.type || 'bar'
+  const firstDataPoint = params.data.datasets[0]?.data?.[0]
+  const hasObjectData = typeof firstDataPoint === 'object' && firstDataPoint !== null && 'x' in firstDataPoint
+  const isPointChart = chartType === 'scatter' || chartType === 'bubble' || hasObjectData
+
+  // Labels required only for categorical charts (not scatter/bubble/time-series)
+  if (!isPointChart) {
+    if (!Array.isArray(params.data.labels)) {
+      return { valid: false, errors: [{ path: 'params.data.labels', message: 'Missing or invalid labels array', code: 'MISSING_LABELS' }] }
+    }
   }
 
   // Validate data points count
   const totalDataPoints = params.data.datasets.reduce(
-    (sum, dataset) => sum + dataset.data.length,
+    (sum, dataset) => sum + (Array.isArray(dataset.data) ? dataset.data.length : 0),
     0
   )
 
@@ -262,27 +332,41 @@ export function validateChartComponent(
     })
   }
 
-  // Validate labels match dataset length
-  const expectedLength = params.data.labels.length
-  for (const [index, dataset] of params.data.datasets.entries()) {
-    if (dataset.data.length !== expectedLength) {
-      errors.push({
-        path: `params.data.datasets[${index}]`,
-        message: `Dataset length mismatch: expected ${expectedLength}, got ${dataset.data.length}`,
-        code: 'DATA_LENGTH_MISMATCH',
-      })
+  // Length mismatch check — only for categorical charts, skip empty datasets
+  if (!isPointChart && Array.isArray(params.data.labels)) {
+    const expectedLength = params.data.labels.length
+    for (const [index, dataset] of params.data.datasets.entries()) {
+      if (Array.isArray(dataset.data) && dataset.data.length > 0 && dataset.data.length !== expectedLength) {
+        errors.push({
+          path: `params.data.datasets[${index}]`,
+          message: `Dataset length mismatch: expected ${expectedLength}, got ${dataset.data.length}`,
+          code: 'DATA_LENGTH_MISMATCH',
+        })
+      }
     }
   }
 
-  // Validate numeric data
+  // Data type validation — numbers for categorical, {x,y} objects for point charts
   for (const [index, dataset] of params.data.datasets.entries()) {
+    if (!Array.isArray(dataset.data)) continue
     for (const [dataIndex, value] of dataset.data.entries()) {
-      if (typeof value !== 'number' || !Number.isFinite(value)) {
-        errors.push({
-          path: `params.data.datasets[${index}].data[${dataIndex}]`,
-          message: `Invalid data value: ${value} (must be finite number)`,
-          code: 'INVALID_DATA_TYPE',
-        })
+      if (isPointChart) {
+        const vObj = value as any
+        if (typeof value !== 'object' || value === null || vObj.x == null || typeof vObj.y !== 'number') {
+          errors.push({
+            path: `params.data.datasets[${index}].data[${dataIndex}]`,
+            message: `Invalid point data: expected {x, y} object`,
+            code: 'INVALID_POINT_DATA',
+          })
+        }
+      } else {
+        if (typeof value !== 'number' || !Number.isFinite(value)) {
+          errors.push({
+            path: `params.data.datasets[${index}].data[${dataIndex}]`,
+            message: `Invalid data value: ${value} (must be finite number)`,
+            code: 'INVALID_DATA_TYPE',
+          })
+        }
       }
     }
   }
@@ -447,6 +531,45 @@ export function validateIframeDomain(
   }
 }
 
+/**
+ * Get the appropriate sandbox attribute for an iframe URL.
+ *
+ * Trusted domains (Google, Deposium, payment, auth-requiring services) get
+ * `allow-same-origin` so they can access their own cookies/storage.
+ * All other whitelisted domains get a restrictive sandbox without it,
+ * preventing access to the parent page's localStorage/cookies.
+ *
+ * @param url - The iframe URL
+ * @param options - Optional custom trusted domains
+ * @returns sandbox attribute string
+ */
+export function getIframeSandbox(
+  url: string,
+  options?: { customTrustedDomains?: string[] }
+): string {
+  const baseSandbox = 'allow-scripts allow-popups'
+
+  try {
+    const domain = new URL(url).hostname
+    let trustedList = TRUSTED_IFRAME_DOMAINS
+    if (options?.customTrustedDomains) {
+      trustedList = [...TRUSTED_IFRAME_DOMAINS, ...options.customTrustedDomains]
+    }
+
+    const isTrusted = trustedList.some(
+      (trusted) => domain === trusted || domain.endsWith(`.${trusted}`)
+    )
+
+    if (isTrusted) {
+      return `${baseSandbox} allow-same-origin allow-forms`
+    }
+  } catch {
+    // Invalid URL — use restrictive sandbox
+  }
+
+  return baseSandbox
+}
+
 /**
  * Validate entire component
  *
@@ -582,6 +705,85 @@ export function validateComponent(
       break
     }
 
+    case 'video': {
+      const videoParams = component.params as any
+      if (!videoParams.url) {
+        errors.push({ path: 'params', message: 'Video component must have url', code: 'INVALID_VIDEO' })
+      } else {
+        // Reuse iframe domain validation for video URLs
+        const videoResult = validateIframeDomain(videoParams.url, {
+          policy: options?.iframePolicy,
+          customDomains: options?.customIframeDomains,
+        })
+        if (!videoResult.valid) {
+          errors.push(...(videoResult.errors || []))
+        }
+      }
+      break
+    }
+
+    case 'carousel': {
+      const carouselParams = component.params as any
+      if (!Array.isArray(carouselParams.items) || carouselParams.items.length === 0) {
+        errors.push({ path: 'params.items', message: 'Carousel must have non-empty items array', code: 'EMPTY_CAROUSEL' })
+      }
+      break
+    }
+
+    case 'image-gallery': {
+      const galleryParams = component.params as any
+      if (!Array.isArray(galleryParams.images) || galleryParams.images.length === 0) {
+        errors.push({ path: 'params.images', message: 'Gallery must have non-empty images array', code: 'EMPTY_GALLERY' })
+      }
+      break
+    }
+
+    case 'form': {
+      const formParams = component.params as any
+      if (!Array.isArray(formParams.fields) || formParams.fields.length === 0) {
+        errors.push({ path: 'params.fields', message: 'Form must have non-empty fields array', code: 'EMPTY_FORM' })
+      }
+      break
+    }
+
+    case 'action-group': {
+      const agParams = component.params as any
+      if (!Array.isArray(agParams.actions) || agParams.actions.length === 0) {
+        errors.push({ path: 'params.actions', message: 'Action group must have non-empty actions array', code: 'EMPTY_ACTION_GROUP' })
+      }
+      break
+    }
+
+    case 'code': {
+      const codeParams = component.params as any
+      if (!codeParams.code) {
+        errors.push({ path: 'params.code', message: 'Code component must have code content', code: 'INVALID_CODE' })
+      }
+      break
+    }
+
+    case 'map': {
+      // Map can auto-detect center from markers, so center is not strictly required
+      const mapParams = component.params as any
+      if (!mapParams.center && (!Array.isArray(mapParams.markers) || mapParams.markers.length === 0)) {
+        errors.push({ path: 'params', message: 'Map must have center or markers', code: 'INVALID_MAP' })
+      }
+      break
+    }
+
+    case 'modal': {
+      // Modal is valid with minimal params (title optional, content can be children)
+      break
+    }
+
+    case 'artifact': {
+      const artifactParams = component.params as any
+      if (!artifactParams.content) {
+        errors.push({ path: 'params.content', message: 'Artifact must have content', code: 'INVALID_ARTIFACT' })
+      }
+      break
+    }
+
     default:
       // Known types without specific validation pass through — renderer handles errors
       // Truly unknown types (e.g. typos in streamed JSON) are rejected

package/src/types/index.ts

@@ -32,7 +32,7 @@ export type ComponentType =
 /**
  * Chart types (powered by Quickchart)
  */
-export type ChartType = 'bar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'scatter'
+export type ChartType = 'bar' | 'line' | 'pie' | 'doughnut' | 'radar' | 'scatter' | 'bubble' | 'polarArea'
 
 /**
  * Grid layout specification (12-column system)