@seed-ship/mcp-ui-solid 4.0.0 → 4.0.2

package/src/components/DataPreviewSection.tsx

@@ -1,6 +1,6 @@
 /**
  * DataPreviewSection — paginated data table with export
- * v3.1.0: Replaces LLM-generated markdown tables with exact source data
+ * v4.0.1: Fixed rendering — defensive guards for store proxy content
  *
  * @experimental
  *
@@ -22,7 +22,6 @@ export interface DataPreviewSectionProps {
 /** Format a number for display (French locale) */
 function formatNumber(value: unknown, format?: string): string {
   if (typeof value !== 'number' || !isFinite(value)) return String(value ?? '')
-  // Simple formatting: use locale
   if (format === 'percent') return `${(value * 100).toFixed(1)}%`
   if (format === 'currency') return `${value.toLocaleString('fr-FR')} EUR`
   if (Number.isInteger(value)) return value.toLocaleString('fr-FR')
@@ -31,7 +30,7 @@ function formatNumber(value: unknown, format?: string): string {
 
 /** Format a cell value based on column type */
 function formatCell(value: unknown, col: DataPreviewColumn): string {
-  if (value == null) return '—'
+  if (value == null) return '\u2014'
   if (col.type === 'number') return formatNumber(value, col.format)
   if (col.type === 'date' && typeof value === 'string') {
     try {
@@ -68,26 +67,64 @@ function downloadFile(content: string, filename: string, mimeType: string) {
   URL.revokeObjectURL(url)
 }
 
+/**
+ * Extract a valid DataPreviewContent from props.content.
+ * Handles: direct DataPreviewContent, or wrapped in an extra layer.
+ */
+function resolveContent(raw: unknown): DataPreviewContent | null {
+  if (!raw || typeof raw !== 'object') return null
+  const obj = raw as Record<string, unknown>
+
+  // Direct shape: { columns: [...], rows: [...] }
+  if (Array.isArray(obj.columns) && Array.isArray(obj.rows)) {
+    return obj as unknown as DataPreviewContent
+  }
+
+  // Wrapped shape: { content: { columns: [...], rows: [...] } }
+  if (obj.content && typeof obj.content === 'object') {
+    const inner = obj.content as Record<string, unknown>
+    if (Array.isArray(inner.columns) && Array.isArray(inner.rows)) {
+      return inner as unknown as DataPreviewContent
+    }
+  }
+
+  return null
+}
+
 export function DataPreviewSection(props: DataPreviewSectionProps) {
-  const content = () => props.content
-  const pageSize = () => content().pageSize || 25
+  const content = createMemo(() => {
+    const resolved = resolveContent(props.content)
+    if (!resolved) {
+      console.warn(
+        '[MCP-UI] DataPreviewSection: invalid content — expected { columns: [...], rows: [...] }, got:',
+        props.content
+      )
+    }
+    return resolved
+  })
+
+  const columns = () => content()?.columns || []
+  const rows = () => content()?.rows || []
+  const pageSize = () => content()?.pageSize || 25
   const [page, setPage] = createSignal(0)
 
-  const totalRows = () => content().rows.length
+  const totalRows = () => rows().length
   const totalPages = () => Math.max(1, Math.ceil(totalRows() / pageSize()))
 
   const pagedRows = createMemo(() => {
     const start = page() * pageSize()
-    return content().rows.slice(start, start + pageSize())
+    return rows().slice(start, start + pageSize())
   })
 
   const handleExportCSV = () => {
-    const csv = toCSV(content().columns, content().rows)
+    const c = content()
+    if (!c) return
+    const csv = toCSV(c.columns, c.rows)
     downloadFile(csv, 'data-export.csv', 'text/csv;charset=utf-8')
   }
 
   const handleExportJSON = () => {
-    const json = JSON.stringify(content().rows, null, 2)
+    const json = JSON.stringify(rows(), null, 2)
     downloadFile(json, 'data-export.json', 'application/json')
   }
 
@@ -98,109 +135,117 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
   }
 
   return (
-    <div class="data-preview-section">
-      {/* Header with source + export */}
-      <div class="flex items-center justify-between mb-2">
-        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
-          <Show when={content().source}>
-            <span class="font-medium">{content().source}</span>
-          </Show>
-          <Show when={content().freshness}>
-            <span class="px-1.5 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">
-              {content().freshness}
-            </span>
-          </Show>
-        </div>
-
-        <Show when={content().exportable !== false}>
-          <div class="flex items-center gap-1">
-            <button
-              class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-              onClick={handleExportCSV}
-              title="Export CSV"
-            >
-              CSV
-            </button>
-            <button
-              class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-              onClick={handleExportJSON}
-              title="Export JSON"
-            >
-              JSON
-            </button>
-          </div>
-        </Show>
+    <Show when={content()} fallback={
+      <div class="text-xs text-amber-600 dark:text-amber-400 p-2">
+        [DataPreviewSection] Invalid content format
       </div>
-
-      {/* Table */}
-      <div class="overflow-x-auto rounded border border-gray-200 dark:border-gray-700">
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="bg-gray-50 dark:bg-gray-800">
-              <For each={content().columns}>
-                {(col) => (
-                  <th
-                    class="px-3 py-2 font-medium text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700"
-                    style={{ "text-align": columnAlign(col) }}
-                  >
-                    {col.label}
-                  </th>
-                )}
-              </For>
-            </tr>
-          </thead>
-          <tbody>
-            <For each={pagedRows()}>
-              {(row, i) => (
-                <tr
-                  class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
-                  classList={{ 'bg-gray-25 dark:bg-gray-850': i() % 2 === 1 }}
+    }>
+      {(c) => (
+        <div class="data-preview-section">
+          {/* Header with source + export */}
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+              <Show when={c().source}>
+                <span class="font-medium">{c().source}</span>
+              </Show>
+              <Show when={c().freshness}>
+                <span class="px-1.5 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">
+                  {c().freshness}
+                </span>
+              </Show>
+            </div>
+
+            <Show when={c().exportable !== false}>
+              <div class="flex items-center gap-1">
+                <button
+                  class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                  onClick={handleExportCSV}
+                  title="Export CSV"
+                >
+                  CSV
+                </button>
+                <button
+                  class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                  onClick={handleExportJSON}
+                  title="Export JSON"
                 >
-                  <For each={content().columns}>
+                  JSON
+                </button>
+              </div>
+            </Show>
+          </div>
+
+          {/* Table */}
+          <div class="overflow-x-auto rounded border border-gray-200 dark:border-gray-700">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="bg-gray-50 dark:bg-gray-800">
+                  <For each={columns()}>
                     {(col) => (
-                      <td
-                        class="px-3 py-2 text-gray-800 dark:text-gray-200"
+                      <th
+                        class="px-3 py-2 font-medium text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700"
                         style={{ "text-align": columnAlign(col) }}
                       >
-                        {formatCell(row[col.key], col)}
-                      </td>
+                        {col.label}
+                      </th>
                     )}
                   </For>
                 </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
+              </thead>
+              <tbody>
+                <For each={pagedRows()}>
+                  {(row, i) => (
+                    <tr
+                      class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                      classList={{ 'bg-gray-25 dark:bg-gray-850': i() % 2 === 1 }}
+                    >
+                      <For each={columns()}>
+                        {(col) => (
+                          <td
+                            class="px-3 py-2 text-gray-800 dark:text-gray-200"
+                            style={{ "text-align": columnAlign(col) }}
+                          >
+                            {formatCell(row[col.key], col)}
+                          </td>
+                        )}
+                      </For>
+                    </tr>
+                  )}
+                </For>
+              </tbody>
+            </table>
+          </div>
+
+          {/* Footer: pagination + row count */}
+          <div class="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
+            <span>
+              {c().totalRows
+                ? `${totalRows()} / ${c().totalRows!.toLocaleString('fr-FR')} rows`
+                : `${totalRows()} row${totalRows() !== 1 ? 's' : ''}`}
+            </span>
 
-      {/* Footer: pagination + row count */}
-      <div class="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
-        <span>
-          {content().totalRows
-            ? `${totalRows()} / ${content().totalRows!.toLocaleString('fr-FR')} rows`
-            : `${totalRows()} row${totalRows() !== 1 ? 's' : ''}`}
-        </span>
-
-        <Show when={totalPages() > 1}>
-          <div class="flex items-center gap-1">
-            <button
-              class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 transition-colors"
-              disabled={page() === 0}
-              onClick={() => setPage(p => p - 1)}
-            >
-              &laquo;
-            </button>
-            <span>{page() + 1} / {totalPages()}</span>
-            <button
-              class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 transition-colors"
-              disabled={page() >= totalPages() - 1}
-              onClick={() => setPage(p => p + 1)}
-            >
-              &raquo;
-            </button>
+            <Show when={totalPages() > 1}>
+              <div class="flex items-center gap-1">
+                <button
+                  class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 transition-colors"
+                  disabled={page() === 0}
+                  onClick={() => setPage(p => p - 1)}
+                >
+                  &laquo;
+                </button>
+                <span>{page() + 1} / {totalPages()}</span>
+                <button
+                  class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 transition-colors"
+                  disabled={page() >= totalPages() - 1}
+                  onClick={() => setPage(p => p + 1)}
+                >
+                  &raquo;
+                </button>
+              </div>
+            </Show>
           </div>
-        </Show>
-      </div>
-    </div>
+        </div>
+      )}
+    </Show>
   )
 }

package/src/components/ScratchpadPanel.tsx

@@ -342,6 +342,16 @@ export const ScratchpadPanel: Component<ScratchpadPanelProps> = (props) => {
   )
 }
 
+// ─── Helpers ────────────────────────────────────────────────
+
+/** Parse content that may arrive as a JSON string from SSE transport */
+function parseContent(content: unknown): unknown {
+  if (typeof content === 'string') {
+    try { return JSON.parse(content) } catch { return content }
+  }
+  return content
+}
+
 // ─── Section Renderer ────────────────────────────────────────
 
 const SectionRenderer: Component<{
@@ -356,23 +366,23 @@ const SectionRenderer: Component<{
     <div class="px-4 py-3">
       <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">{props.section.title}</h4>
       <Switch>
-        <Match when={props.section.type === 'data'}><DataSection content={props.section.content} /></Match>
-        <Match when={props.section.type === 'filter'}><InteractiveFilterSection content={props.section.content} filters={props.filters} onFilterChange={props.onFilterChange} /></Match>
+        <Match when={props.section.type === 'data'}><DataSection content={parseContent(props.section.content)} /></Match>
+        <Match when={props.section.type === 'filter'}><InteractiveFilterSection content={parseContent(props.section.content)} filters={props.filters} onFilterChange={props.onFilterChange} /></Match>
         <Match when={props.section.type === 'message'}><p class="text-sm text-gray-700 dark:text-gray-300">{String(props.section.content)}</p></Match>
-        <Match when={props.section.type === 'action'}><ActionSection content={props.section.content} onAction={props.onAction} /></Match>
-        <Match when={props.section.type === 'steps'}><EnrichedStepsSection content={props.section.content} onAction={props.onAction} onFilterChange={props.onFilterChange} /></Match>
-        <Match when={props.section.type === 'form'}><EmbeddedFormSection content={props.section.content} sectionId={props.section.id} onAction={props.onAction} onSubmit={props.onSubmit} /></Match>
-        <Match when={props.section.type === 'understanding'}><UnderstandingSection content={props.section.content} /></Match>
-        <Match when={props.section.type === 'feedback'}><FeedbackSection content={props.section.content} onAction={props.onAction} /></Match>
-        <Match when={props.section.type === 'prompt'}><PromptSection content={props.section.content} onAction={props.onAction} /></Match>
-        <Match when={props.section.type === 'stepper'}><StepperProgressSection content={props.section.content} /></Match>
-        <Match when={props.section.type === 'error'}><ErrorSectionRenderer content={props.section.content} onAction={props.onAction} /></Match>
-        <Match when={props.section.type === 'source_card'}><SourceCardSection content={props.section.content} /></Match>
-        <Match when={props.section.type === 'diff'}><DiffSection content={props.section.content} /></Match>
-        <Match when={props.section.type === 'verified_text'}><VerifiedText {...(props.section.content as VerifiedTextContent)} onHallucinationClick={(h) => props.onAction?.('hallucination_click', h)} /></Match>
-        <Match when={props.section.type === 'data_preview'}><DataPreviewSection content={props.section.content as DataPreviewContent} /></Match>
-        <Match when={props.section.type === 'map'}>{(() => { const c = props.section.content as MapSectionContent; return <MapRenderer params={{ geojson: c.geojson, center: c.center, zoom: c.zoom, geojsonStyle: c.style, popup: c.popup, layers: c.layers, height: c.height || '300px', fitBounds: true }} /> })()}</Match>
-        <Match when={props.section.type === 'chart'}><ChartJSRenderer component={{ id: props.section.id, type: 'chart', position: { colStart: 1, colSpan: 12 }, params: { ...(props.section.content as ChartComponentParams), renderer: 'native', height: (props.section.content as any)?.height || '250px' } }} /></Match>
+        <Match when={props.section.type === 'action'}><ActionSection content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
+        <Match when={props.section.type === 'steps'}><EnrichedStepsSection content={parseContent(props.section.content)} onAction={props.onAction} onFilterChange={props.onFilterChange} /></Match>
+        <Match when={props.section.type === 'form'}><EmbeddedFormSection content={parseContent(props.section.content)} sectionId={props.section.id} onAction={props.onAction} onSubmit={props.onSubmit} /></Match>
+        <Match when={props.section.type === 'understanding'}><UnderstandingSection content={parseContent(props.section.content)} /></Match>
+        <Match when={props.section.type === 'feedback'}><FeedbackSection content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
+        <Match when={props.section.type === 'prompt'}><PromptSection content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
+        <Match when={props.section.type === 'stepper'}><StepperProgressSection content={parseContent(props.section.content)} /></Match>
+        <Match when={props.section.type === 'error'}><ErrorSectionRenderer content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
+        <Match when={props.section.type === 'source_card'}><SourceCardSection content={parseContent(props.section.content)} /></Match>
+        <Match when={props.section.type === 'diff'}><DiffSection content={parseContent(props.section.content)} /></Match>
+        <Match when={props.section.type === 'verified_text'}><VerifiedText {...(parseContent(props.section.content) as VerifiedTextContent)} onHallucinationClick={(h) => props.onAction?.('hallucination_click', h)} /></Match>
+        <Match when={props.section.type === 'data_preview'}><DataPreviewSection content={parseContent(props.section.content) as DataPreviewContent} /></Match>
+        <Match when={props.section.type === 'map'}>{(() => { const c = parseContent(props.section.content) as MapSectionContent; return <MapRenderer params={{ geojson: c.geojson, center: c.center, zoom: c.zoom, geojsonStyle: c.style, popup: c.popup, layers: c.layers, height: c.height || '300px', fitBounds: true }} /> })()}</Match>
+        <Match when={props.section.type === 'chart'}>{(() => { const c = parseContent(props.section.content) as ChartComponentParams; return <ChartJSRenderer component={{ id: props.section.id, type: 'chart', position: { colStart: 1, colSpan: 12 }, params: { ...c, renderer: 'native', height: (c as any)?.height || '250px' } }} /> })()}</Match>
         <Match when={true}><pre class="text-xs text-gray-500 overflow-auto">{JSON.stringify(props.section.content, null, 2)}</pre></Match>
       </Switch>
     </div>
@@ -644,7 +654,15 @@ const ActionSection: Component<{
   content: unknown
   onAction?: (action: string, data?: unknown) => void
 }> = (props) => {
-  const actions = () => Array.isArray(props.content) ? props.content as Array<{ label: string; value?: string; action?: string; variant?: string; icon?: string }> : []
+  const actions = () => {
+    if (Array.isArray(props.content)) return props.content as Array<{ label: string; value?: string; action?: string; variant?: string; icon?: string }>
+    const obj = props.content as Record<string, unknown> | null
+    if (obj && Array.isArray(obj.actions)) {
+      console.warn('[MCP-UI] ActionSection: content should be an array, got { actions: [...] }. Unwrapping automatically.')
+      return obj.actions as Array<{ label: string; value?: string; action?: string; variant?: string; icon?: string }>
+    }
+    return []
+  }
   return (
     <div class="flex flex-wrap gap-2">
       <For each={actions()}>