@seed-ship/mcp-ui-solid 6.6.0 → 6.7.0

package/src/components/ActionGroupRenderer.tsx

@@ -26,7 +26,12 @@ const ActionButton: Component<{
   action: ActionComponentParams
   index: number
 }> = (props) => {
-  const { execute, isExecuting } = useAction()
+  const { execute, executeAction, isExecuting } = useAction()
+
+  // tool-call and submit both go through the host executor — they show a
+  // loading state and gate disabled while running. link does neither.
+  const isExecutable = () =>
+    props.action.action === 'tool-call' || props.action.action === 'submit'
 
   const handleClick = async (e: MouseEvent) => {
     if (props.action.disabled) return
@@ -34,13 +39,23 @@ const ActionButton: Component<{
     if (props.action.action === 'tool-call' && props.action.toolName) {
       e.preventDefault()
       await execute(props.action.toolName, props.action.params || {})
+    } else if (props.action.action === 'submit') {
+      // submit is NOT a tool call — route it through the executor with the
+      // `action: 'submit'` kind preserved so the host can POST to
+      // params.submit_url etc. Works without a surrounding <form>.
+      e.preventDefault()
+      await executeAction({
+        action: 'submit',
+        toolName: props.action.toolName || 'submit',
+        params: props.action.params || {},
+      })
     } else if (props.action.action === 'link' && props.action.url) {
       window.open(props.action.url, '_blank', 'noopener,noreferrer')
     }
   }
 
   const isDisabled = () =>
-    props.action.disabled || (props.action.action === 'tool-call' && isExecuting())
+    props.action.disabled || (isExecutable() && isExecuting())
 
   const variantClass = () => {
     switch (props.action.variant) {
@@ -98,10 +113,10 @@ const ActionButton: Component<{
         isDisabled() ? 'opacity-50 cursor-not-allowed' : ''
       }`}
     >
-      <Show when={isExecuting() && props.action.action === 'tool-call'}>
+      <Show when={isExecuting() && isExecutable()}>
         <span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
       </Show>
-      <Show when={props.action.icon && !(isExecuting() && props.action.action === 'tool-call')}>
+      <Show when={props.action.icon && !(isExecuting() && isExecutable())}>
         <span class="text-current">{props.action.icon}</span>
       </Show>
       {props.action.label}

package/src/components/ActionSubmit.test.tsx

@@ -0,0 +1,188 @@
+/**
+ * v6.6.1 — `action: 'submit'` reaches the host executor outside a <form>.
+ *
+ * Before v6.6.1, `submit` actions were inert : `ActionGroupRenderer` only
+ * branched on `tool-call` / `link`, and the standalone `action` renderer
+ * emitted a native `type="submit"` button that did nothing outside a real
+ * `<form>`. This file pins the fix — a full integration test through the
+ * real `useAction` → `MCPActionContext` → host `executor` path (no mocks).
+ *
+ * Covers both render surfaces :
+ *   - `<ActionGroupRenderer>` (action-group)
+ *   - `<UIResourceRenderer content={{ type: 'action', ... }}>` (standalone)
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen, fireEvent, waitFor, cleanup } from '@solidjs/testing-library'
+import { ActionGroupRenderer } from './ActionGroupRenderer'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import { MCPActionProvider } from '../context/MCPActionContext'
+import type { ActionRequest, ActionResult } from '../context/MCPActionContext'
+import type { UIComponent } from '../types'
+
+// The connector "feedback format" payload from the bug report.
+const SUBMIT_PARAMS = {
+  submit_url: '/api/connector-render-feedback',
+  feedback_kind: 'presentation',
+  connector_id: 'clinicaltrials',
+  tool_name: 'clinicaltrials_search',
+  render_kind: 'clinical_trial_search',
+  preferred_layout_options: ['table', 'cards', 'bar'],
+}
+
+function makeExecutor() {
+  const calls: ActionRequest[] = []
+  const executor = vi.fn(async (req: ActionRequest): Promise<ActionResult> => {
+    calls.push(req)
+    return { success: true, timestamp: new Date().toISOString(), toolName: req.toolName }
+  })
+  return { executor, calls }
+}
+
+describe('action: submit reaches the host executor (v6.6.1)', () => {
+  beforeEach(() => cleanup())
+
+  it('ActionGroupRenderer routes a submit action to the executor', async () => {
+    const { executor, calls } = makeExecutor()
+    const component: UIComponent = {
+      id: 'ag',
+      type: 'action-group',
+      position: { colStart: 1, colSpan: 12 },
+      params: {
+        actions: [
+          { label: 'Feedback format', action: 'submit', params: SUBMIT_PARAMS },
+        ],
+      },
+    } as UIComponent
+
+    render(() => (
+      <MCPActionProvider executor={executor}>
+        <ActionGroupRenderer component={component} />
+      </MCPActionProvider>
+    ))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Feedback format' }))
+
+    await waitFor(() => expect(executor).toHaveBeenCalledTimes(1))
+    const req = calls[0]
+    // The action KIND is preserved — host can tell it apart from a tool call.
+    expect(req.action).toBe('submit')
+    // The full params payload survives intact.
+    expect(req.params).toEqual(SUBMIT_PARAMS)
+  })
+
+  it('a submit action is NOT executed as a tool call', async () => {
+    const { executor, calls } = makeExecutor()
+    const component: UIComponent = {
+      id: 'ag',
+      type: 'action-group',
+      position: { colStart: 1, colSpan: 12 },
+      params: {
+        actions: [{ label: 'Send', action: 'submit', params: SUBMIT_PARAMS }],
+      },
+    } as UIComponent
+
+    render(() => (
+      <MCPActionProvider executor={executor}>
+        <ActionGroupRenderer component={component} />
+      </MCPActionProvider>
+    ))
+    fireEvent.click(screen.getByRole('button', { name: 'Send' }))
+
+    await waitFor(() => expect(executor).toHaveBeenCalledTimes(1))
+    // action is 'submit', never silently coerced to 'tool-call'
+    expect(calls[0].action).not.toBe('tool-call')
+    expect(calls[0].action).toBe('submit')
+  })
+
+  it('standalone action component (UIResourceRenderer) routes submit to the executor', async () => {
+    const { executor, calls } = makeExecutor()
+    const component: UIComponent = {
+      id: 'act',
+      type: 'action',
+      position: { colStart: 1, colSpan: 12 },
+      params: { label: 'Feedback format', action: 'submit', params: SUBMIT_PARAMS },
+    } as UIComponent
+
+    render(() => (
+      <MCPActionProvider executor={executor}>
+        <UIResourceRenderer content={component} />
+      </MCPActionProvider>
+    ))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Feedback format' }))
+
+    await waitFor(() => expect(executor).toHaveBeenCalledTimes(1))
+    expect(calls[0].action).toBe('submit')
+    expect(calls[0].params).toEqual(SUBMIT_PARAMS)
+  })
+
+  it('standalone submit button is type="button" — not a native form submit', () => {
+    const component: UIComponent = {
+      id: 'act',
+      type: 'action',
+      position: { colStart: 1, colSpan: 12 },
+      params: { label: 'Send', action: 'submit', params: {} },
+    } as UIComponent
+
+    const { container } = render(() => (
+      <MCPActionProvider executor={makeExecutor().executor}>
+        <UIResourceRenderer content={component} />
+      </MCPActionProvider>
+    ))
+    const btn = container.querySelector('button')
+    // Must NOT rely on a surrounding <form> — JS-handled, type=button.
+    expect(btn?.getAttribute('type')).toBe('button')
+  })
+
+  it('tool-call actions still work unchanged', async () => {
+    const { executor, calls } = makeExecutor()
+    const component: UIComponent = {
+      id: 'ag',
+      type: 'action-group',
+      position: { colStart: 1, colSpan: 12 },
+      params: {
+        actions: [
+          { label: 'Run', action: 'tool-call', toolName: 'do_thing', params: { a: 1 } },
+        ],
+      },
+    } as UIComponent
+
+    render(() => (
+      <MCPActionProvider executor={executor}>
+        <ActionGroupRenderer component={component} />
+      </MCPActionProvider>
+    ))
+    fireEvent.click(screen.getByRole('button', { name: 'Run' }))
+
+    await waitFor(() => expect(executor).toHaveBeenCalledTimes(1))
+    expect(calls[0].toolName).toBe('do_thing')
+    expect(calls[0].params).toEqual({ a: 1 })
+  })
+
+  it('a disabled submit action does not call the executor', async () => {
+    const { executor } = makeExecutor()
+    const component: UIComponent = {
+      id: 'ag',
+      type: 'action-group',
+      position: { colStart: 1, colSpan: 12 },
+      params: {
+        actions: [
+          { label: 'Send', action: 'submit', params: SUBMIT_PARAMS, disabled: true },
+        ],
+      },
+    } as UIComponent
+
+    render(() => (
+      <MCPActionProvider executor={executor}>
+        <ActionGroupRenderer component={component} />
+      </MCPActionProvider>
+    ))
+    const btn = screen.getByRole('button', { name: 'Send' })
+    expect(btn.hasAttribute('disabled')).toBe(true)
+    fireEvent.click(btn)
+    // Give any async handler a tick — nothing should fire.
+    await new Promise((r) => setTimeout(r, 10))
+    expect(executor).not.toHaveBeenCalled()
+  })
+})

package/src/components/UIResourceRenderer.tsx

@@ -1524,9 +1524,13 @@ function ComponentRenderer(props: {
  */
 function ActionRenderer(props: { component: UIComponent }) {
   const params = props.component.params as any
-  const { execute, isExecuting } = useAction()
+  const { execute, executeAction, isExecuting } = useAction()
   const telemetry = useTelemetry()
 
+  // tool-call and submit both run through the host executor — loading +
+  // disabled state apply to both. link does neither.
+  const isExecutable = () => params.action === 'tool-call' || params.action === 'submit'
+
   // Telemetry: action:dispatched on click (B.5 — v5.6.0). Fires for every
   // click attempt (tool-call or link), regardless of execute success.
   // Privacy: actionName is `toolName` (tool-call) or the action kind
@@ -1549,11 +1553,20 @@ function ActionRenderer(props: { component: UIComponent }) {
     if (params.action === 'tool-call' && params.toolName) {
       e.preventDefault()
       await execute(params.toolName, params.params || {})
+    } else if (params.action === 'submit') {
+      // submit is NOT a tool call — route through the executor with the
+      // `action: 'submit'` kind preserved. Works outside any <form>.
+      e.preventDefault()
+      await executeAction({
+        action: 'submit',
+        toolName: params.toolName || 'submit',
+        params: params.params || {},
+      })
     }
   }
 
   // Determine if button should be disabled (explicit disable or currently executing)
-  const isDisabled = () => params.disabled || (params.action === 'tool-call' && isExecuting())
+  const isDisabled = () => params.disabled || (isExecutable() && isExecuting())
 
   if (params.type === 'link' || params.action === 'link') {
     return (
@@ -1579,9 +1592,9 @@ function ActionRenderer(props: { component: UIComponent }) {
 
   return (
     <button
-      type={params.action === 'submit' ? 'submit' : 'button'}
+      type="button"
       disabled={isDisabled()}
-      aria-busy={isExecuting() && params.action === 'tool-call'}
+      aria-busy={isExecuting() && isExecutable()}
       aria-label={params.ariaLabel || params.label}
       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' :
@@ -1594,10 +1607,10 @@ function ActionRenderer(props: { component: UIComponent }) {
         ${params.className || ''}`}
       onClick={handleClick}
     >
-      <Show when={isExecuting() && params.action === 'tool-call'}>
+      <Show when={isExecuting() && isExecutable()}>
         <span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" aria-hidden="true" />
       </Show>
-      <Show when={params.icon && !(isExecuting() && params.action === 'tool-call')}>
+      <Show when={params.icon && !(isExecuting() && isExecutable())}>
         <span aria-hidden="true">{params.icon}</span>
       </Show>
       {params.label}

package/src/context/MCPActionContext.tsx

@@ -10,7 +10,9 @@ import { createContext, createSignal, useContext, ParentComponent, Accessor } fr
  */
 export interface ActionRequest {
   /**
-   * MCP tool name to execute
+   * MCP tool name to execute. For a `submit` action with no associated
+   * tool, renderers pass the sentinel `'submit'` — branch on `action`,
+   * not on `toolName`, to tell a submit apart from a tool call.
    */
   toolName: string
 
@@ -28,6 +30,17 @@ export interface ActionRequest {
    * Optional macro ID for template execution
    */
   macroId?: string
+
+  /**
+   * Action kind (v6.6.1). Lets a host `executor` tell a tool call apart
+   * from a form-style `submit`. Absent ⇒ treat as `'tool-call'` (backward
+   * compatible — every pre-v6.6.1 request omits it).
+   *
+   * A `submit` action carries its payload in `params` (e.g. `submit_url`,
+   * `connector_id`, `feedback_value`) and **must NOT** be executed as a
+   * tool call — the host routes it (e.g. POST to `params.submit_url`).
+   */
+  action?: 'tool-call' | 'submit' | 'link'
 }
 
 /**
@@ -149,6 +162,9 @@ const defaultExecutor = async (request: ActionRequest): Promise<ActionResult> =>
           params: request.params || {},
           spaceIds: request.spaceIds,
           macroId: request.macroId,
+          // v6.6.1 — action kind so a window-level listener can route a
+          // `submit` (POST to params.submit_url) vs a tool call.
+          action: request.action ?? 'tool-call',
         },
         bubbles: true,
       })