@seed-ship/mcp-ui-solid 1.0.29 → 1.0.31

package/src/components/GenerativeUIErrorBoundary.tsx

@@ -0,0 +1,259 @@
+/**
+ * Generative UI Error Boundary with Telemetry
+ * Phase 0: Error isolation + structured logging
+ *
+ * Features:
+ * - Component-level error isolation
+ * - Structured logging with context
+ * - Performance timing
+ * - Retry mechanism
+ * - User-friendly fallback UI
+ */
+
+import { Component, ErrorBoundary, createSignal, Show } from 'solid-js'
+import { isServer } from 'solid-js/web'
+import { createLogger } from '../utils/logger'
+import type { RendererError } from '../types'
+
+const logger = createLogger('generative-ui')
+
+/**
+ * Props for GenerativeUIErrorBoundary
+ */
+export interface GenerativeUIErrorBoundaryProps {
+  /**
+   * Component identifier for telemetry
+   */
+  componentId: string
+
+  /**
+   * Component type for context
+   */
+  componentType: string
+
+  /**
+   * Error callback
+   */
+  onError?: (error: RendererError) => void
+
+  /**
+   * Allow retry on error
+   */
+  allowRetry?: boolean
+
+  /**
+   * Child components to wrap
+   */
+  children: any
+
+  /**
+   * Custom fallback UI (optional)
+   */
+  fallback?: (error: Error, retry?: () => void) => any
+}
+
+/**
+ * Default fallback UI for errors
+ */
+function DefaultErrorFallback(props: {
+  error: Error
+  componentId: string
+  componentType: string
+  allowRetry?: boolean
+  onRetry?: () => void
+}) {
+  return (
+    <div class="w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0">
+          <svg
+            class="w-5 h-5 text-yellow-600 dark:text-yellow-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <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>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">
+            Component Failed to Render
+          </p>
+          <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+            Type: {props.componentType || 'unknown'} | ID: {props.componentId?.slice(0, 8) || 'unknown'}...
+          </p>
+          <Show when={import.meta.env.DEV}>
+            <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono">
+              {props.error.message}
+            </p>
+          </Show>
+          <Show when={props.allowRetry}>
+            <button
+              onClick={props.onRetry}
+              class="mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline"
+            >
+              Retry Rendering
+            </button>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Generative UI Error Boundary Component
+ */
+export const GenerativeUIErrorBoundary: Component<GenerativeUIErrorBoundaryProps> = (props) => {
+  const [retryKey, setRetryKey] = createSignal(0)
+  const [renderStartTime] = createSignal(isServer ? 0 : performance.now())
+
+  // Handle error with telemetry
+  const handleError = (error: Error) => {
+    const renderEndTime = isServer ? 0 : performance.now()
+    const renderDuration = renderEndTime - renderStartTime()
+
+    // Structure error context
+    const errorContext = {
+      componentId: props.componentId,
+      componentType: props.componentType,
+      errorMessage: error.message,
+      errorStack: error.stack,
+      renderDuration,
+      retryCount: retryKey(),
+      timestamp: new Date().toISOString(),
+      userAgent: isServer ? 'server' : navigator.userAgent,
+      viewport: isServer
+        ? { width: 0, height: 0 }
+        : { width: window.innerWidth, height: window.innerHeight },
+    }
+
+    // Log to structured logger
+    logger.error(`Component render failed: ${props.componentType}`, errorContext)
+
+    // Call error callback
+    props.onError?.({
+      type: 'render',
+      message: error.message,
+      componentId: props.componentId,
+      details: errorContext,
+    })
+
+    // In production, send to monitoring service
+    if (import.meta.env.PROD) {
+      // Future: Send to Sentry or other APM
+      // Sentry.captureException(error, { contexts: { component: errorContext } })
+    }
+  }
+
+  // Retry mechanism
+  const handleRetry = () => {
+    const newRetryCount = retryKey() + 1
+    logger.info(`Retrying component render: ${props.componentType}`, {
+      componentId: props.componentId,
+      retryCount: newRetryCount,
+    })
+    setRetryKey(newRetryCount)
+  }
+
+  return (
+    <ErrorBoundary
+      fallback={(error) => {
+        handleError(error)
+
+        // Use custom fallback if provided
+        if (props.fallback) {
+          return props.fallback(error, props.allowRetry ? handleRetry : undefined)
+        }
+
+        // Default fallback
+        return (
+          <DefaultErrorFallback
+            error={error}
+            componentId={props.componentId}
+            componentType={props.componentType}
+            allowRetry={props.allowRetry}
+            onRetry={handleRetry}
+          />
+        )
+      }}
+    >
+      {/* Key prop for forcing remount on retry */}
+      {(() => {
+        const _ = retryKey() // Access signal to track changes
+        return <>{props.children}</>
+      })()}
+    </ErrorBoundary>
+  )
+}
+
+/**
+ * Performance monitoring wrapper
+ * Logs render times for performance analysis
+ */
+export function withPerformanceMonitoring<P extends { componentId: string; componentType: string }>(
+  WrappedComponent: Component<P>
+) {
+  return (props: P) => {
+    const renderStart = isServer ? 0 : performance.now()
+
+    // Log render start
+    logger.debug(`Component render start: ${props.componentType}`, {
+      componentId: props.componentId,
+      timestamp: new Date().toISOString(),
+    })
+
+    // Measure on mount completion (client-side only)
+    if (!isServer && typeof window !== 'undefined') {
+      requestAnimationFrame(() => {
+        const renderEnd = performance.now()
+        const duration = renderEnd - renderStart
+
+        logger.info(`Component rendered: ${props.componentType}`, {
+          componentId: props.componentId,
+          renderDuration: duration,
+          timestamp: new Date().toISOString(),
+        })
+
+        // Warn if render is slow (>50ms target)
+        if (duration > 50) {
+          logger.warn(`Slow component render: ${props.componentType}`, {
+            componentId: props.componentId,
+            renderDuration: duration,
+            threshold: 50,
+          })
+        }
+      })
+    }
+
+    return <WrappedComponent {...props} />
+  }
+}
+
+/**
+ * Hook to track component lifecycle events
+ */
+export function useComponentTelemetry(componentId: string, componentType: string) {
+  const mountTime = isServer ? 0 : performance.now()
+
+  // Log mount
+  logger.debug(`Component mounted: ${componentType}`, {
+    componentId,
+    timestamp: new Date().toISOString(),
+  })
+
+  // Return cleanup function for unmount
+  return () => {
+    const lifetime = isServer ? 0 : performance.now() - mountTime
+    logger.debug(`Component unmounted: ${componentType}`, {
+      componentId,
+      lifetime,
+      timestamp: new Date().toISOString(),
+    })
+  }
+}

package/src/components/StreamingUIRenderer.tsx

@@ -0,0 +1,327 @@
+/**
+ * StreamingUIRenderer Component - Phase 2
+ *
+ * Renders streaming dashboard components with skeleton states and progress indicators.
+ * Uses the useStreamingUI hook for SSE connection and state management.
+ *
+ * Features:
+ * - Skeleton loading states while components stream
+ * - Progress bar and status messages
+ * - Smooth component animations on arrival
+ * - Error handling with retry capability
+ * - Responsive 12-column grid layout
+ *
+ * Usage:
+ * ```tsx
+ * <StreamingUIRenderer
+ *   query="Show me revenue trends"
+ *   spaceIds={['uuid1', 'uuid2']}
+ *   onComplete={(metadata) => console.log('Done!', metadata)}
+ * />
+ * ```
+ */
+
+import { Show, For, createSignal, onMount } from 'solid-js'
+import { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'
+import type { UIComponent, RendererError } from '../types'
+import { validateComponent } from '../services/validation'
+import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
+
+export interface StreamingUIRendererProps extends UseStreamingUIOptions {
+  class?: string
+  showProgress?: boolean
+  showMetadata?: boolean
+  onRenderError?: (error: RendererError) => void
+}
+
+/**
+ * Component Renderer - Inline lightweight version
+ * (Full implementation in UIResourceRenderer)
+ */
+function StreamingComponentRenderer(props: {
+  component: UIComponent
+  onError?: (error: RendererError) => void
+}) {
+  // Validate component before rendering
+  const validation = validateComponent(props.component)
+  if (!validation.valid) {
+    props.onError?.({
+      type: 'validation',
+      message: 'Component validation failed',
+      componentId: props.component.id,
+      details: validation.errors,
+    })
+
+    return (
+      <div class="w-full bg-error-subtle border border-border-error rounded-lg p-4">
+        <p class="text-sm font-medium text-error-primary">Validation Error</p>
+        <p class="text-xs text-text-secondary mt-1">
+          {validation.errors?.[0]?.message || 'Unknown validation error'}
+        </p>
+      </div>
+    )
+  }
+
+  // Simplified renderer - just show component type and title
+  // Full rendering logic in UIResourceRenderer
+  const params = props.component.params as any
+
+  return (
+    <GenerativeUIErrorBoundary
+      componentId={props.component.id}
+      componentType={props.component.type}
+      onError={props.onError}
+      allowRetry={false}
+    >
+      <div class="w-full bg-surface-secondary border border-border-subtle rounded-lg p-4">
+        <div class="flex items-center gap-2 mb-2">
+          <span class="text-xs font-medium text-text-tertiary uppercase">
+            {props.component.type}
+          </span>
+        </div>
+        <Show when={params?.title}>
+          <h3 class="text-sm font-semibold text-text-primary">{params.title}</h3>
+        </Show>
+        <Show when={props.component.type === 'metric' && params?.value}>
+          <div class="mt-2">
+            <p class="text-2xl font-semibold text-text-primary">{params.value}</p>
+            <Show when={params.unit}>
+              <span class="text-sm text-text-secondary">{params.unit}</span>
+            </Show>
+          </div>
+        </Show>
+        <div class="mt-3 text-xs text-text-tertiary">
+          Component ID: {props.component.id.slice(0, 8)}...
+        </div>
+      </div>
+    </GenerativeUIErrorBoundary>
+  )
+}
+
+export function StreamingUIRenderer(props: StreamingUIRendererProps) {
+  const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =
+    useStreamingUI({
+      query: props.query,
+      spaceIds: props.spaceIds,
+      sessionId: props.sessionId,
+      options: props.options,
+      onComplete: props.onComplete,
+      onError: props.onError,
+      onComponentReceived: props.onComponentReceived,
+    })
+
+  const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())
+
+  // Track new components for animation
+  const handleComponentRender = (componentId: string) => {
+    setAnimatingComponents((prev) => new Set([...prev, componentId]))
+
+    // Remove from animating set after animation completes
+    setTimeout(() => {
+      setAnimatingComponents((prev) => {
+        const next = new Set(prev)
+        next.delete(componentId)
+        return next
+      })
+    }, 500)
+  }
+
+  return (
+    <div class={`streaming-ui-renderer ${props.class || ''}`}>
+      {/* Progress Bar */}
+      <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>
+        <div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4">
+          {/* Status Message */}
+          <div class="mb-2 flex items-center justify-between">
+            <span class="text-sm font-medium text-text-primary">{progress().message}</span>
+            <Show when={progress().totalCount !== null}>
+              <span class="text-sm text-text-secondary">
+                {progress().receivedCount} / {progress().totalCount}
+              </span>
+            </Show>
+          </div>
+
+          {/* Progress Bar */}
+          <div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary">
+            <div
+              class="h-full bg-brand-primary transition-all duration-300 ease-out"
+              style={
+                progress().totalCount !== null
+                  ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`
+                  : 'width: 0%'
+              }
+            />
+          </div>
+
+          {/* Indeterminate Progress (when totalCount unknown) */}
+          <Show when={progress().totalCount === null && isStreaming()}>
+            <div class="mt-2">
+              <div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary">
+                <div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary" />
+              </div>
+            </div>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Error State */}
+      <Show when={error()}>
+        <div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4">
+          <div class="mb-2 flex items-center gap-2">
+            <svg
+              class="h-5 w-5 text-error-primary"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span class="font-medium text-error-primary">{error()?.error}</span>
+          </div>
+          <p class="text-sm text-text-secondary">{error()?.message}</p>
+
+          {/* Retry Button (if recoverable) */}
+          <Show when={error()?.recoverable}>
+            <button
+              type="button"
+              class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover"
+              onClick={() => startStreaming()}
+            >
+              Retry
+            </button>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Components Grid */}
+      <div class="grid grid-cols-12 gap-4">
+        {/* Render received components */}
+        <For each={components()}>
+          {(component) => {
+            // Trigger animation on mount (SSR-safe, no 'use' directive needed)
+            onMount(() => handleComponentRender(component.id))
+
+            return (
+              <div
+                class={`
+                  col-span-${component.position.colSpan}
+                  ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}
+                `}
+                style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}
+              >
+                <StreamingComponentRenderer component={component} onError={props.onRenderError} />
+              </div>
+            )
+          }}
+        </For>
+
+        {/* Skeleton placeholders (if streaming and expecting more) */}
+        <Show when={isStreaming() && progress().totalCount !== null}>
+          <For
+            each={Array.from({
+              length: progress().totalCount! - progress().receivedCount,
+            })}
+          >
+            {() => <SkeletonComponent />}
+          </For>
+        </Show>
+      </div>
+
+      {/* Metadata Display */}
+      <Show when={props.showMetadata !== false && metadata()}>
+        <div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary">
+          <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <div>
+              <div class="font-medium text-text-primary">Provider</div>
+              <div>{metadata()?.provider}</div>
+            </div>
+            <div>
+              <div class="font-medium text-text-primary">Model</div>
+              <div>{metadata()?.model}</div>
+            </div>
+            <div>
+              <div class="font-medium text-text-primary">Execution Time</div>
+              <div>{metadata()?.executionTimeMs}ms</div>
+            </div>
+            <Show when={metadata()?.costUSD !== undefined}>
+              <div>
+                <div class="font-medium text-text-primary">Cost</div>
+                <div>${metadata()?.costUSD?.toFixed(4)}</div>
+              </div>
+            </Show>
+            <div>
+              <div class="font-medium text-text-primary">TTFB</div>
+              <div>{metadata()?.firstTokenMs}ms</div>
+            </div>
+            <Show when={metadata()?.cached}>
+              <div>
+                <div class="font-medium text-text-primary">Cached</div>
+                <div class="text-success-primary">Yes</div>
+              </div>
+            </Show>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * Skeleton Component - Placeholder while components load
+ */
+function SkeletonComponent() {
+  return (
+    <div class="col-span-12 md:col-span-6 lg:col-span-4">
+      <div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4">
+        {/* Header skeleton */}
+        <div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary" />
+
+        {/* Content skeleton */}
+        <div class="space-y-3">
+          <div class="h-4 rounded bg-surface-tertiary" />
+          <div class="h-4 w-5/6 rounded bg-surface-tertiary" />
+          <div class="h-4 w-4/6 rounded bg-surface-tertiary" />
+        </div>
+
+        {/* Chart/visual skeleton */}
+        <div class="mt-4 h-32 rounded bg-surface-tertiary" />
+      </div>
+    </div>
+  )
+}
+
+// CSS Animations (add to global styles or Tailwind config)
+/*
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.5s ease-out;
+}
+
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s infinite ease-in-out;
+}
+*/