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

package/src/components/UIResourceRenderer.tsx

@@ -9,6 +9,9 @@ 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'
 
 /**
@@ -554,43 +557,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
-
-  // 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)
-      }
-    }
-  })
+  const { execute, isExecuting } = useAction()
 
-  // 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 +606,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 +663,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 +716,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'

package/src/hooks/useAction.ts

@@ -0,0 +1,138 @@
+/**
+ * useAction - Hook for executing MCP actions from components
+ * Phase 5.0: Quick Wins - Simplified API for ActionRenderer and custom components
+ */
+
+import { createSignal, Accessor } from 'solid-js'
+import { useMCPActionSafe, ActionRequest, ActionResult } from '../context/MCPActionContext'
+
+/**
+ * Return type for useAction hook
+ */
+export interface UseActionReturn {
+  /**
+   * Execute a tool action
+   */
+  execute: (toolName: string, params?: Record<string, any>) => Promise<ActionResult>
+
+  /**
+   * Full execute with ActionRequest
+   */
+  executeAction: (request: ActionRequest) => Promise<ActionResult>
+
+  /**
+   * Whether an action is currently executing
+   */
+  isExecuting: Accessor<boolean>
+
+  /**
+   * Last result from action execution
+   */
+  lastResult: Accessor<ActionResult | undefined>
+
+  /**
+   * Last error (if any)
+   */
+  lastError: Accessor<string | undefined>
+}
+
+/**
+ * Hook for executing MCP actions
+ *
+ * @example
+ * ```tsx
+ * function MyButton() {
+ *   const { execute, isExecuting, lastError } = useAction()
+ *
+ *   const handleClick = async () => {
+ *     const result = await execute('search.hub', { query: 'test' })
+ *     if (result.success) {
+ *       console.log('Data:', result.data)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <button onClick={handleClick} disabled={isExecuting()}>
+ *       {isExecuting() ? 'Loading...' : 'Search'}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useAction(): UseActionReturn {
+  const context = useMCPActionSafe()
+  const [lastError, setLastError] = createSignal<string>()
+
+  const execute = async (toolName: string, params?: Record<string, any>): Promise<ActionResult> => {
+    setLastError(undefined)
+
+    const result = await context.executeAction({
+      toolName,
+      params,
+    })
+
+    if (!result.success && result.error) {
+      setLastError(result.error)
+    }
+
+    return result
+  }
+
+  const executeAction = async (request: ActionRequest): Promise<ActionResult> => {
+    setLastError(undefined)
+
+    const result = await context.executeAction(request)
+
+    if (!result.success && result.error) {
+      setLastError(result.error)
+    }
+
+    return result
+  }
+
+  return {
+    execute,
+    executeAction,
+    isExecuting: context.isExecuting,
+    lastResult: context.lastResult,
+    lastError,
+  }
+}
+
+/**
+ * Hook for binding action to a specific tool
+ *
+ * @example
+ * ```tsx
+ * function SearchButton() {
+ *   const { execute, isExecuting } = useToolAction('search.hub')
+ *
+ *   return (
+ *     <button onClick={() => execute({ query: 'test' })} disabled={isExecuting()}>
+ *       Search
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useToolAction(toolName: string): {
+  execute: (params?: Record<string, any>) => Promise<ActionResult>
+  isExecuting: Accessor<boolean>
+  lastResult: Accessor<ActionResult | undefined>
+  lastError: Accessor<string | undefined>
+} {
+  const { execute: baseExecute, isExecuting, lastResult, lastError } = useAction()
+
+  const execute = async (params?: Record<string, any>): Promise<ActionResult> => {
+    return baseExecute(toolName, params)
+  }
+
+  return {
+    execute,
+    isExecuting,
+    lastResult,
+    lastError,
+  }
+}
+
+export type { ActionRequest, ActionResult }

package/src/index.ts

@@ -38,7 +38,7 @@ export type {
 } from './components'
 
 // Hooks
-export { useStreamingUI } from './hooks'
+export { useStreamingUI, useAction, useToolAction } from './hooks'
 
 export type {
   UseStreamingUIOptions,
@@ -46,8 +46,19 @@ export type {
   StreamProgress,
   StreamError,
   CompleteMetadata,
+  UseActionReturn,
 } from './hooks'
 
+// Context (Phase 5.0)
+export { MCPActionProvider, MCPActionContext, useMCPAction, useMCPActionSafe } from './context'
+
+export type {
+  MCPActionContextValue,
+  MCPActionProviderProps,
+  ActionRequest,
+  ActionResult,
+} from './context'
+
 // Types
 export type {
   UIComponent,
@@ -59,6 +70,8 @@ export type {
   TableComponentParams,
   MetricComponentParams,
   TextComponentParams,
+  ActionComponentParams,
+  GridComponentParams,
 } from './types'
 
 // Services