@seed-ship/mcp-ui-solid 1.1.0 → 1.2.1

package/src/components/UIResourceRenderer.tsx

@@ -9,8 +9,55 @@ import { isServer } from 'solid-js/web'
 import type { UIComponent, UILayout, RendererError, ComponentType } from '../types'
 import { validateComponent, DEFAULT_RESOURCE_LIMITS } from '../services/validation'
 import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
+import { GridRenderer } from './GridRenderer'
+import { FooterRenderer } from './FooterRenderer'
+import { useAction } from '../hooks/useAction'
 import { marked } from 'marked'
 
+/**
+ * Copy button component with visual feedback
+ */
+function CopyButton(props: { getText: () => string; title?: string; position?: 'top-right' | 'bottom-right' }) {
+  const [copied, setCopied] = createSignal(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(props.getText())
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  const positionClasses = () => {
+    return props.position === 'bottom-right'
+      ? 'absolute -right-2 -bottom-3'
+      : 'absolute right-2 top-2'
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      class={`${positionClasses()} 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 z-10`}
+      title={props.title || 'Copy'}
+    >
+      <Show
+        when={!copied()}
+        fallback={
+          <svg class="w-3 h-3 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+        }
+      >
+        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+      </Show>
+    </button>
+  )
+}
+
 /**
  * Props for UIResourceRenderer
  */
@@ -197,8 +244,25 @@ function TableRenderer(props: {
 }) {
   const tableParams = props.component.params as any
 
+  // 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')
+    ).join('\n')
+    return `${header}\n${dataRows}`
+  }
+
   return (
-    <div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <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 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
@@ -264,8 +328,17 @@ function TableRenderer(props: {
 function MetricRenderer(props: { component: UIComponent }) {
   const metricParams = props.component.params as any
 
+  // Generate copyable text for metric
+  const getMetricText = () => {
+    const title = metricParams.title || metricParams.label || ''
+    const value = metricParams.value
+    const unit = metricParams.unit || ''
+    return `${title}: ${value}${unit ? ' ' + unit : ''}`
+  }
+
   return (
-    <div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
+    <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 p-4 group">
+      <CopyButton getText={getMetricText} title="Copy metric" position="top-right" />
       <div class="flex flex-col h-full justify-between">
         <div>
           <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
@@ -352,12 +425,18 @@ function TextRenderer(props: { component: UIComponent }) {
     return textParams.content
   })
 
+  // Get plain text content for copying (strip markdown/HTML)
+  const getTextContent = () => {
+    return textParams.content || ''
+  }
+
   // Render as image component if we extracted image data
   return (
     <Show
       when={imageData()}
       fallback={
-        <div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
+        <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 p-4 group">
+          <CopyButton getText={getTextContent} title="Copy text" position="top-right" />
           <div
             class={`prose prose-sm dark:prose-invert max-w-none ${textParams.className || ''}`}
             innerHTML={htmlContent()}
@@ -554,43 +633,32 @@ function ComponentRenderer(props: {
       <Show when={props.component.type === 'action'}>
         <ActionRenderer component={props.component} />
       </Show>
+      <Show when={props.component.type === 'grid'}>
+        <GridRenderer component={props.component} onError={props.onError} />
+      </Show>
     </GenerativeUIErrorBoundary>
   )
 }
 
 /**
  * Render an action component (button or link)
+ * Refactored in Phase 5.0 to use useAction hook for Context-based execution
  */
 function ActionRenderer(props: { component: UIComponent }) {
   const params = props.component.params as any
-  let dispatchAction: ((toolName: string, toolParams: any) => void) | null = null
+  const { execute, isExecuting } = useAction()
 
-  // Initialize CustomEvent dispatcher only on client-side
-  // Use createEffect instead of onMount for SSR compatibility
-  createEffect(() => {
-    if (typeof window !== 'undefined') {
-      dispatchAction = (toolName: string, toolParams: any) => {
-        const event = new CustomEvent('mcp-action', {
-          detail: {
-            toolName,
-            params: toolParams,
-          },
-          bubbles: true,
-        })
-        window.dispatchEvent(event)
-      }
-    }
-  })
-
-  // Handle click to execute tool via window event
-  const handleClick = (e: MouseEvent) => {
+  // Handle click to execute tool via Context (falls back to CustomEvent if no provider)
+  const handleClick = async (e: MouseEvent) => {
     if (params.action === 'tool-call' && params.toolName) {
       e.preventDefault()
-      // SSR-safe: Only call if dispatcher was initialized client-side
-      dispatchAction?.(params.toolName, params.params || {})
+      await execute(params.toolName, params.params || {})
     }
   }
 
+  // Determine if button should be disabled (explicit disable or currently executing)
+  const isDisabled = () => params.disabled || (params.action === 'tool-call' && isExecuting())
+
   if (params.type === 'link' || params.action === 'link') {
     return (
       <a
@@ -614,18 +682,21 @@ function ActionRenderer(props: { component: UIComponent }) {
   return (
     <button
       type={params.action === 'submit' ? 'submit' : 'button'}
-      disabled={params.disabled}
+      disabled={isDisabled()}
       class={`inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
         ${params.variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700 shadow-sm' :
           params.variant === 'secondary' ? 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600' :
             params.variant === 'outline' ? 'border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800' :
               params.variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' :
                 'bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'}
-        ${params.disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        ${isDisabled() ? 'opacity-50 cursor-not-allowed' : ''}
         ${params.size === 'sm' ? 'px-3 py-1.5 text-xs' : params.size === 'lg' ? 'px-6 py-3 text-base' : ''}`}
       onClick={handleClick}
     >
-      <Show when={params.icon}>
+      <Show when={isExecuting() && params.action === 'tool-call'}>
+        <span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
+      </Show>
+      <Show when={params.icon && !(isExecuting() && params.action === 'tool-call')}>
         <span>{params.icon}</span>
       </Show>
       {params.label}
@@ -668,6 +739,46 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
     return `grid-column: ${colStart} / span ${colSpan}; grid-row: ${rowStart ? `${rowStart} / span ${rowSpan}` : 'auto'}`
   }
 
+  // Auto-footer logic (Phase 5.0)
+  // Automatically inject footer when metadata is present and no explicit footer exists
+  const shouldShowAutoFooter = createMemo(() => {
+    const layoutData = layout()
+
+    // Don't show if explicitly hidden
+    if (layoutData.metadata?.hideFooter) {
+      return false
+    }
+
+    // Don't show if no metadata (nothing to display)
+    if (!layoutData.metadata) {
+      return false
+    }
+
+    // Don't show if explicit footer component exists
+    const hasExplicitFooter = layoutData.components.some((c) => c.type === 'footer')
+    if (hasExplicitFooter) {
+      return false
+    }
+
+    // Show auto-footer if metadata has relevant info
+    return !!(
+      layoutData.metadata.executionTime ||
+      layoutData.metadata.sourceCount ||
+      layoutData.metadata.llmModel
+    )
+  })
+
+  // Build auto-footer params from metadata
+  const autoFooterParams = createMemo(() => {
+    const layoutData = layout()
+    return {
+      poweredBy: 'Deposium',
+      executionTime: layoutData.metadata?.executionTime,
+      model: layoutData.metadata?.llmModel,
+      sourceCount: layoutData.metadata?.sourceCount,
+    }
+  })
+
   const layoutData = layout()
 
   return (
@@ -681,6 +792,11 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
           )}
         </For>
       </div>
+
+      {/* Auto-injected footer (Phase 5.0) */}
+      <Show when={shouldShowAutoFooter()}>
+        <FooterRenderer params={autoFooterParams()} />
+      </Show>
     </div>
   )
 }

package/src/context/MCPActionContext.tsx

@@ -0,0 +1,350 @@
+/**
+ * MCPActionContext - Context provider for MCP action execution
+ * Phase 5.0: Quick Wins - Replaces CustomEvent with typed context for Mastra integration
+ */
+
+import { createContext, createSignal, useContext, ParentComponent, Accessor } from 'solid-js'
+
+/**
+ * Action request payload
+ */
+export interface ActionRequest {
+  /**
+   * MCP tool name to execute
+   */
+  toolName: string
+
+  /**
+   * Tool parameters
+   */
+  params?: Record<string, any>
+
+  /**
+   * Optional space IDs for multi-space context
+   */
+  spaceIds?: string[]
+
+  /**
+   * Optional macro ID for template execution
+   */
+  macroId?: string
+}
+
+/**
+ * Action result from execution
+ */
+export interface ActionResult {
+  /**
+   * Whether the action was successful
+   */
+  success: boolean
+
+  /**
+   * Result data (if successful)
+   */
+  data?: any
+
+  /**
+   * Error message (if failed)
+   */
+  error?: string
+
+  /**
+   * Execution timestamp
+   */
+  timestamp: string
+
+  /**
+   * Tool that was executed
+   */
+  toolName: string
+}
+
+/**
+ * Context value interface
+ */
+export interface MCPActionContextValue {
+  /**
+   * Execute an MCP action
+   */
+  executeAction: (request: ActionRequest) => Promise<ActionResult>
+
+  /**
+   * Currently available tools (from MCP server)
+   */
+  availableTools: Accessor<string[]>
+
+  /**
+   * Space IDs in current context
+   */
+  spaceIds: Accessor<string[]>
+
+  /**
+   * Current macro ID (if executing within a template)
+   */
+  macroId: Accessor<string | undefined>
+
+  /**
+   * Whether an action is currently executing
+   */
+  isExecuting: Accessor<boolean>
+
+  /**
+   * Last action result
+   */
+  lastResult: Accessor<ActionResult | undefined>
+}
+
+/**
+ * Props for MCPActionProvider
+ */
+export interface MCPActionProviderProps {
+  /**
+   * Space IDs for multi-space queries
+   */
+  spaceIds?: string[]
+
+  /**
+   * Macro ID when executing within a template
+   */
+  macroId?: string
+
+  /**
+   * Available MCP tools
+   */
+  availableTools?: string[]
+
+  /**
+   * Callback for action execution (for audit logging)
+   */
+  onAction?: (request: ActionRequest, result: ActionResult) => void
+
+  /**
+   * Callback for webhook events (n8n, Zapier integration)
+   */
+  onWebhook?: (event: { type: string; payload: any }) => void
+
+  /**
+   * Custom action executor (override default)
+   */
+  executor?: (request: ActionRequest) => Promise<ActionResult>
+}
+
+// Create the context with undefined default
+const MCPActionContext = createContext<MCPActionContextValue>()
+
+/**
+ * Default action executor using CustomEvent fallback
+ * This maintains backward compatibility while allowing Context-based usage
+ */
+const defaultExecutor = async (request: ActionRequest): Promise<ActionResult> => {
+  return new Promise((resolve) => {
+    const timestamp = new Date().toISOString()
+
+    // Dispatch CustomEvent for backward compatibility with existing listeners
+    if (typeof window !== 'undefined') {
+      const event = new CustomEvent('mcp-action', {
+        detail: {
+          toolName: request.toolName,
+          params: request.params || {},
+          spaceIds: request.spaceIds,
+          macroId: request.macroId,
+        },
+        bubbles: true,
+      })
+
+      // Listen for response event
+      const responseHandler = (e: Event) => {
+        const customEvent = e as CustomEvent
+        window.removeEventListener('mcp-action-response', responseHandler)
+        resolve({
+          success: customEvent.detail?.success ?? true,
+          data: customEvent.detail?.data,
+          error: customEvent.detail?.error,
+          timestamp,
+          toolName: request.toolName,
+        })
+      }
+
+      window.addEventListener('mcp-action-response', responseHandler)
+      window.dispatchEvent(event)
+
+      // Timeout fallback - resolve as success if no response in 100ms
+      // (indicates no listener, action was dispatched)
+      setTimeout(() => {
+        window.removeEventListener('mcp-action-response', responseHandler)
+        resolve({
+          success: true,
+          data: { dispatched: true },
+          timestamp,
+          toolName: request.toolName,
+        })
+      }, 100)
+    } else {
+      // Server-side: return immediately
+      resolve({
+        success: false,
+        error: 'Actions not available server-side',
+        timestamp,
+        toolName: request.toolName,
+      })
+    }
+  })
+}
+
+/**
+ * MCPActionProvider - Provides action execution context to child components
+ *
+ * @example
+ * ```tsx
+ * <MCPActionProvider
+ *   spaceIds={['space-123']}
+ *   macroId="sales_overview"
+ *   onAction={(req, res) => audit(req, res)}
+ * >
+ *   <UIResourceRenderer layout={layout} />
+ * </MCPActionProvider>
+ * ```
+ */
+export const MCPActionProvider: ParentComponent<MCPActionProviderProps> = (props) => {
+  const [isExecuting, setIsExecuting] = createSignal(false)
+  const [lastResult, setLastResult] = createSignal<ActionResult>()
+  const [spaceIds, setSpaceIds] = createSignal<string[]>(props.spaceIds || [])
+  const [macroId, setMacroId] = createSignal<string | undefined>(props.macroId)
+  const [availableTools, setAvailableTools] = createSignal<string[]>(props.availableTools || [])
+
+  // Update signals when props change
+  // Note: This is a simple approach; for more complex scenarios, consider createEffect
+
+  const executeAction = async (request: ActionRequest): Promise<ActionResult> => {
+    setIsExecuting(true)
+
+    try {
+      // Enrich request with context
+      const enrichedRequest: ActionRequest = {
+        ...request,
+        spaceIds: request.spaceIds || spaceIds(),
+        macroId: request.macroId || macroId(),
+      }
+
+      // Execute using custom executor or default
+      const executor = props.executor || defaultExecutor
+      const result = await executor(enrichedRequest)
+
+      setLastResult(result)
+
+      // Call audit callback if provided
+      props.onAction?.(enrichedRequest, result)
+
+      // Trigger webhook if provided and action was successful
+      if (result.success && props.onWebhook) {
+        props.onWebhook({
+          type: 'action-completed',
+          payload: {
+            request: enrichedRequest,
+            result,
+          },
+        })
+      }
+
+      return result
+    } catch (error) {
+      const errorResult: ActionResult = {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: new Date().toISOString(),
+        toolName: request.toolName,
+      }
+
+      setLastResult(errorResult)
+      props.onAction?.(request, errorResult)
+
+      return errorResult
+    } finally {
+      setIsExecuting(false)
+    }
+  }
+
+  const contextValue: MCPActionContextValue = {
+    executeAction,
+    availableTools,
+    spaceIds,
+    macroId,
+    isExecuting,
+    lastResult,
+  }
+
+  return (
+    <MCPActionContext.Provider value={contextValue}>
+      {props.children}
+    </MCPActionContext.Provider>
+  )
+}
+
+/**
+ * Hook to access MCP action context
+ * Throws if used outside of MCPActionProvider
+ *
+ * @example
+ * ```tsx
+ * const { executeAction, isExecuting } = useMCPAction()
+ *
+ * const handleClick = async () => {
+ *   const result = await executeAction({
+ *     toolName: 'search.hub',
+ *     params: { query: 'revenue Q4' },
+ *   })
+ * }
+ * ```
+ */
+export function useMCPAction(): MCPActionContextValue {
+  const context = useContext(MCPActionContext)
+  if (!context) {
+    throw new Error('useMCPAction must be used within an MCPActionProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to access MCP action context with fallback for components
+ * outside of provider (uses CustomEvent fallback)
+ *
+ * @example
+ * ```tsx
+ * const { executeAction, isExecuting } = useMCPActionSafe()
+ * // Works even without MCPActionProvider
+ * ```
+ */
+export function useMCPActionSafe(): MCPActionContextValue {
+  const context = useContext(MCPActionContext)
+
+  if (context) {
+    return context
+  }
+
+  // Fallback implementation for components outside provider
+  const [isExecuting, setIsExecuting] = createSignal(false)
+  const [lastResult, setLastResult] = createSignal<ActionResult>()
+
+  const executeAction = async (request: ActionRequest): Promise<ActionResult> => {
+    setIsExecuting(true)
+    try {
+      const result = await defaultExecutor(request)
+      setLastResult(result)
+      return result
+    } finally {
+      setIsExecuting(false)
+    }
+  }
+
+  return {
+    executeAction,
+    availableTools: () => [],
+    spaceIds: () => [],
+    macroId: () => undefined,
+    isExecuting,
+    lastResult,
+  }
+}
+
+export { MCPActionContext }

package/src/context/index.ts

@@ -0,0 +1,19 @@
+/**
+ * MCP UI Solid - Context Providers
+ *
+ * Context providers for action execution and state management
+ */
+
+export {
+  MCPActionProvider,
+  MCPActionContext,
+  useMCPAction,
+  useMCPActionSafe,
+} from './MCPActionContext'
+
+export type {
+  MCPActionContextValue,
+  MCPActionProviderProps,
+  ActionRequest,
+  ActionResult,
+} from './MCPActionContext'

package/src/hooks/index.ts

@@ -12,3 +12,7 @@ export type {
   StreamError,
   CompleteMetadata,
 } from './useStreamingUI'
+
+// Action hooks (Phase 5.0)
+export { useAction, useToolAction } from './useAction'
+export type { UseActionReturn, ActionRequest, ActionResult } from './useAction'