@seed-ship/mcp-ui-solid 6.5.0 → 6.6.1

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/ExpandableWrapper.test.tsx

@@ -143,7 +143,7 @@ describe('ExpandableWrapper', () => {
     expect(writeText).toHaveBeenCalledWith(testData)
   })
 
-  it('uses default title "Expanded View" when no title provided', async () => {
+  it('uses default title "Expanded view" when no title provided', async () => {
     const { getByLabelText, getByText } = render(() => (
       <ExpandableWrapper>
         <div>Content</div>
@@ -152,7 +152,10 @@ describe('ExpandableWrapper', () => {
 
     fireEvent.click(getByLabelText('Expand to fullscreen'))
 
-    expect(getByText('Expanded View')).toBeDefined()
+    // v6.6.0: default heading comes from MCPUIStrings.expandedView (D2).
+    // Also unified to a single casing — the pre-v6.6.0 code had
+    // 'Expanded View' as the heading but 'Expanded view' as the aria-label.
+    expect(getByText('Expanded view')).toBeDefined()
   })
 
   it('expanded content area is scrollable (overflow-auto)', async () => {

package/src/components/ExpandableWrapper.tsx

@@ -8,6 +8,7 @@
 
 import { Component, Show, createSignal, createEffect, onCleanup, JSX, createContext, useContext, Accessor } from 'solid-js'
 import { Portal } from 'solid-js/web'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 /** Context for child components to know if they're in expanded/fullscreen view */
 const ExpandedContext = createContext<Accessor<boolean>>(() => false)
@@ -50,6 +51,7 @@ export interface ExpandableWrapperProps {
 export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
   const [isExpanded, setIsExpanded] = createSignal(false)
   const [copied, setCopied] = createSignal(false)
+  const strings = useMCPUIStrings()
   let dialogRef: HTMLDivElement | undefined
   let contentRef: HTMLDivElement | undefined
   let inlineSlotRef: HTMLDivElement | undefined
@@ -133,7 +135,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
             ? 'opacity-60 hover:opacity-100'
             : 'opacity-0 group-hover:opacity-70 hover:!opacity-100'
         } p-1.5 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`}
-        title="Expand"
+        title={strings.expand}
         aria-label="Expand to fullscreen"
       >
         <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -150,7 +152,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
             onClick={handleBackdropClick}
             role="dialog"
             aria-modal="true"
-            aria-label={props.title || 'Expanded view'}
+            aria-label={props.title || strings.expandedView}
             tabIndex={-1}
             ref={dialogRef}
           >
@@ -163,7 +165,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
               {/* Header */}
               <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white truncate">
-                  {props.title || 'Expanded View'}
+                  {props.title || strings.expandedView}
                 </h2>
                 <div class="flex items-center gap-2">
                   {/* Copy button */}
@@ -171,8 +173,8 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
                     <button
                       onClick={handleCopy}
                       class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                      title={props.copyLabel || 'Copy to clipboard'}
-                      aria-label={props.copyLabel || 'Copy to clipboard'}
+                      title={props.copyLabel || strings.copyToClipboard}
+                      aria-label={props.copyLabel || strings.copyToClipboard}
                     >
                       <Show
                         when={!copied()}
@@ -192,7 +194,7 @@ export const ExpandableWrapper: Component<ExpandableWrapperProps> = (props) => {
                   <button
                     onClick={handleClose}
                     class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                    aria-label="Close expanded view"
+                    aria-label={strings.closeExpandedView}
                   >
                     <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

package/src/components/FeedbackInline.test.tsx

@@ -37,7 +37,8 @@ describe('FeedbackInline — v5.2.0', () => {
       intent: 'search',
       confidenceBand: 'high',
     })
-    expect(getByText('Merci !')).toBeDefined()
+    // v6.6.0: default ack is now EN (MCPUIStrings.feedbackPositiveAck) — R4.
+    expect(getByText('Thanks!')).toBeDefined()
   })
 
   it('click thumb-down calls onSubmit with negative and shows negative ack', () => {
@@ -49,7 +50,8 @@ describe('FeedbackInline — v5.2.0', () => {
     fireEvent.click(negative)
 
     expect(onSubmit).toHaveBeenCalledWith('negative', undefined)
-    expect(getByText("Noté, on s'améliore")).toBeDefined()
+    // v6.6.0: default ack is now EN (MCPUIStrings.feedbackNegativeAck) — R4.
+    expect(getByText("Noted — we'll improve")).toBeDefined()
   })
 
   it('second click after rating is a no-op (final state)', () => {
@@ -102,7 +104,8 @@ describe('FeedbackInline — v5.2.0', () => {
     ) as HTMLElement
     // Should not throw even though onSubmit rejects
     expect(() => fireEvent.click(positive)).not.toThrow()
-    expect(getByText('Merci !')).toBeDefined()
+    // v6.6.0: default ack is now EN (MCPUIStrings.feedbackPositiveAck) — R4.
+    expect(getByText('Thanks!')).toBeDefined()
   })
 
   it('works without messageHash or context', () => {

package/src/components/FeedbackInline.tsx

@@ -41,6 +41,7 @@
  */
 
 import { Component, Show, createSignal } from 'solid-js'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface FeedbackInlineContext {
   intent?: string
@@ -59,9 +60,9 @@ export interface FeedbackInlineProps {
   onSubmit: (rating: 'positive' | 'negative', context?: FeedbackInlineContext) => void | Promise<void>
   /** Extra context forwarded to `onSubmit`. */
   context?: FeedbackInlineContext
-  /** Ack text shown after positive rating. Default: 'Merci !' */
+  /** Ack text shown after positive rating. Defaults to `MCPUIStrings.feedbackPositiveAck` ('Thanks!' in EN). */
   positiveAck?: string
-  /** Ack text shown after negative rating. Default: "Noté, on s'améliore" */
+  /** Ack text shown after negative rating. Defaults to `MCPUIStrings.feedbackNegativeAck`. */
   negativeAck?: string
   /** Extra Tailwind classes on the container. */
   class?: string
@@ -73,6 +74,7 @@ export interface FeedbackInlineProps {
  */
 export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
   const [rating, setRating] = createSignal<'positive' | 'negative' | null>(null)
+  const strings = useMCPUIStrings()
 
   const handle = (value: 'positive' | 'negative') => {
     if (rating() !== null) return // already submitted, final state
@@ -98,8 +100,8 @@ export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
         fallback={
           <span class="text-[11px] text-deposium-slate-500">
             {rating() === 'positive'
-              ? (props.positiveAck ?? 'Merci !')
-              : (props.negativeAck ?? "Noté, on s'améliore")}
+              ? (props.positiveAck ?? strings.feedbackPositiveAck)
+              : (props.negativeAck ?? strings.feedbackNegativeAck)}
           </span>
         }
       >
@@ -107,7 +109,7 @@ export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
           type="button"
           onClick={() => handle('positive')}
           class="p-1 rounded hover:bg-green-500/10 text-deposium-slate-500 hover:text-green-500 transition-colors"
-          title="Utile"
+          title={strings.feedbackUseful}
           aria-label="Mark response as useful"
           data-feedback-inline-rating="positive"
         >
@@ -124,7 +126,7 @@ export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
           type="button"
           onClick={() => handle('negative')}
           class="p-1 rounded hover:bg-red-500/10 text-deposium-slate-500 hover:text-red-500 transition-colors"
-          title="Pas utile"
+          title={strings.feedbackNotUseful}
           aria-label="Mark response as not useful"
           data-feedback-inline-rating="negative"
         >

package/src/components/PresentationFeedback.test.tsx

@@ -0,0 +1,163 @@
+/**
+ * v6.6.0 — PresentationFeedback (R3 / D9 of ROADMAP-opendata-macro-mcpui).
+ *
+ * Coverage:
+ *   1. Resting step shows the verdict buttons
+ *   2. "Clear" submits a `readable` verdict immediately
+ *   3. "Not clear" opens the detail step (does NOT submit yet)
+ *   4. Detail step assembles problems + preferredLayout + comment into the payload
+ *   5. base fields (connectorId/toolName/queryHash/renderKind/layoutType) are carried
+ *   6. Submission is best-effort — a rejected onSubmit promise does not throw
+ *   7. Labels are overridable via the `labels` prop
+ *   8. The layout picker is hidden when no options are given
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, cleanup, fireEvent } from '@solidjs/testing-library'
+import { PresentationFeedback } from './PresentationFeedback'
+import type { ConnectorRenderFeedback } from '@seed-ship/mcp-ui-spec'
+
+const BASE = {
+  connectorId: 'datagouv',
+  toolName: 'datagouv.search',
+  queryHash: 'a1b2c3d4',
+  renderKind: 'primary',
+  layoutType: 'table',
+}
+
+describe('PresentationFeedback (v6.6.0)', () => {
+  beforeEach(() => cleanup())
+
+  it('resting step shows both verdict buttons', () => {
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={() => {}} />
+    ))
+    expect(container.querySelector('[data-presentation-feedback-verdict="readable"]')).toBeTruthy()
+    expect(
+      container.querySelector('[data-presentation-feedback-verdict="not_readable"]')
+    ).toBeTruthy()
+    expect(container.querySelector('[data-presentation-feedback-step="idle"]')).toBeTruthy()
+  })
+
+  it('"Clear" submits a readable verdict immediately', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.verdict).toBe('readable')
+    expect(payload.connectorId).toBe('datagouv')
+    expect(payload.queryHash).toBe('a1b2c3d4')
+    expect(payload.renderKind).toBe('primary')
+    expect(payload.layoutType).toBe('table')
+  })
+
+  it('"Not clear" opens the detail step without submitting', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(container.querySelector('[data-presentation-feedback-step="detail"]')).toBeTruthy()
+    expect(container.querySelector('[data-presentation-feedback-submit]')).toBeTruthy()
+  })
+
+  it('detail step assembles problems + preferredLayout + comment', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback
+        {...BASE}
+        onSubmit={onSubmit}
+        preferredLayoutOptions={['table', 'bar', 'map']}
+      />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    fireEvent.click(container.querySelector('[data-presentation-feedback-problem="too_raw"]')!)
+    fireEvent.click(
+      container.querySelector('[data-presentation-feedback-problem="wrong_columns"]')!
+    )
+    fireEvent.click(container.querySelector('[data-presentation-feedback-layout="bar"]')!)
+    const textarea = container.querySelector('[data-presentation-feedback-comment]') as HTMLTextAreaElement
+    fireEvent.input(textarea, { target: { value: 'prefer a chart' } })
+    fireEvent.click(container.querySelector('[data-presentation-feedback-submit]')!)
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.verdict).toBe('not_readable')
+    expect(payload.problems).toEqual(['too_raw', 'wrong_columns'])
+    expect(payload.preferredLayout).toBe('bar')
+    expect(payload.comment).toBe('prefer a chart')
+  })
+
+  it('deselecting a problem chip removes it from the payload', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    const chip = container.querySelector('[data-presentation-feedback-problem="wrong_chart"]')!
+    fireEvent.click(chip) // select
+    fireEvent.click(chip) // deselect
+    fireEvent.click(container.querySelector('[data-presentation-feedback-submit]')!)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.problems).toBeUndefined()
+  })
+
+  it('flips to the ack step after submitting', () => {
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={() => {}} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    expect(container.querySelector('[data-presentation-feedback-ack]')).toBeTruthy()
+  })
+
+  it('submission is best-effort — a rejected onSubmit promise does not throw', () => {
+    const onSubmit = vi.fn(() => Promise.reject(new Error('network down')))
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={onSubmit} />
+    ))
+    expect(() =>
+      fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    ).not.toThrow()
+    expect(container.querySelector('[data-presentation-feedback-ack]')).toBeTruthy()
+  })
+
+  it('labels are overridable via the labels prop', () => {
+    const { container } = render(() => (
+      <PresentationFeedback
+        {...BASE}
+        onSubmit={() => {}}
+        labels={{ readable: 'Lisible', notReadable: 'Pas lisible' }}
+      />
+    ))
+    const readableBtn = container.querySelector(
+      '[data-presentation-feedback-verdict="readable"]'
+    )
+    expect(readableBtn?.textContent).toBe('Lisible')
+  })
+
+  it('hides the layout picker when no options are given', () => {
+    const { container } = render(() => (
+      <PresentationFeedback {...BASE} onSubmit={() => {}} />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="not_readable"]')!)
+    expect(container.querySelector('[data-presentation-feedback-layout]')).toBeNull()
+  })
+
+  it('omits queryHash from the payload when not provided', () => {
+    const onSubmit = vi.fn()
+    const { container } = render(() => (
+      <PresentationFeedback
+        connectorId="c"
+        toolName="t"
+        onSubmit={onSubmit}
+      />
+    ))
+    fireEvent.click(container.querySelector('[data-presentation-feedback-verdict="readable"]')!)
+    const payload = onSubmit.mock.calls[0][0] as ConnectorRenderFeedback
+    expect(payload.queryHash).toBeUndefined()
+  })
+})