@seed-ship/mcp-ui-solid 5.2.0 → 5.3.0

package/src/components/ElicitationForm.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * Tests for ElicitationForm — v5.3.0
+ *
+ * Coverage focus : the inverse mapping (ChatPromptResponse → spec content)
+ * that this wrapper owns. The forward mapping (spec → ChatPromptConfig) is
+ * already covered by `chat-bus.test.ts elicitationToPromptConfig`.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, fireEvent, cleanup } from '@solidjs/testing-library'
+import { ElicitationForm } from './ElicitationForm'
+import type { ElicitationEvent } from '../types/chat-bus'
+
+describe('ElicitationForm — v5.3.0', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('boolean property → confirm UI → onAccept gets { propName: true }', () => {
+    const onAccept = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Proceed?',
+      requestedSchema: {
+        type: 'object',
+        properties: {
+          consent: { type: 'boolean', description: 'I agree' },
+        },
+        required: ['consent'],
+      },
+    }
+
+    const { getByText } = render(() => (
+      <ElicitationForm event={event} onAccept={onAccept} onCancel={() => {}} />
+    ))
+
+    // ChatPrompt renders a Confirm button — find and click it.
+    const confirmBtn = getByText('Confirm') as HTMLElement
+    fireEvent.click(confirmBtn)
+
+    expect(onAccept).toHaveBeenCalledTimes(1)
+    expect(onAccept).toHaveBeenCalledWith({ consent: true })
+  })
+
+  it('single enum property → choice UI → onAccept gets { propName: enumValue }', () => {
+    const onAccept = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Pick a tier',
+      requestedSchema: {
+        type: 'object',
+        properties: {
+          tier: {
+            type: 'string',
+            enum: ['free', 'pro', 'enterprise'],
+            enumNames: ['Free', 'Pro', 'Enterprise'],
+          },
+        },
+      },
+    }
+
+    const { getByText } = render(() => (
+      <ElicitationForm event={event} onAccept={onAccept} />
+    ))
+
+    fireEvent.click(getByText('Pro') as HTMLElement)
+
+    expect(onAccept).toHaveBeenCalledWith({ tier: 'pro' })
+  })
+
+  it('numeric enum property → onAccept coerces value to number', () => {
+    const onAccept = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Pick a level',
+      requestedSchema: {
+        type: 'object',
+        properties: {
+          level: { type: 'integer', enum: [1, 2, 3] },
+        },
+      },
+    }
+
+    const { getByText } = render(() => (
+      <ElicitationForm event={event} onAccept={onAccept} />
+    ))
+
+    fireEvent.click(getByText('2') as HTMLElement)
+
+    expect(onAccept).toHaveBeenCalledWith({ level: 2 })
+  })
+
+  it('multi-property schema → form UI → onAccept gets formValues unchanged', () => {
+    const onAccept = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Tenant scope required',
+      requestedSchema: {
+        type: 'object',
+        properties: {
+          tenant_id: { type: 'string', title: 'Tenant ID' },
+          space_id: { type: 'string', title: 'Space ID', default: 'default' },
+        },
+        required: ['tenant_id', 'space_id'],
+      },
+    }
+
+    const { container, getByText } = render(() => (
+      <ElicitationForm event={event} onAccept={onAccept} />
+    ))
+
+    const tenantInput = container.querySelector('input[name="tenant_id"]') as HTMLInputElement
+    const spaceInput = container.querySelector('input[name="space_id"]') as HTMLInputElement
+    expect(tenantInput).toBeTruthy()
+    expect(spaceInput).toBeTruthy()
+
+    fireEvent.input(tenantInput, { target: { value: 'acme-co' } })
+    fireEvent.input(spaceInput, { target: { value: 'prod' } })
+
+    const submitBtn = getByText('Submit') as HTMLElement
+    fireEvent.click(submitBtn)
+
+    expect(onAccept).toHaveBeenCalledTimes(1)
+    const [content] = onAccept.mock.calls[0]
+    expect(content).toMatchObject({ tenant_id: 'acme-co', space_id: 'prod' })
+  })
+
+  it('X dismiss → onCancel fires, onAccept does NOT', () => {
+    const onAccept = vi.fn()
+    const onCancel = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Pick a tier',
+      requestedSchema: {
+        type: 'object',
+        properties: {
+          tier: { type: 'string', enum: ['a', 'b'] },
+        },
+      },
+    }
+
+    const { container } = render(() => (
+      <ElicitationForm event={event} onAccept={onAccept} onCancel={onCancel} />
+    ))
+
+    const dismissBtn = container.querySelector('[aria-label="Dismiss"]') as HTMLElement
+    fireEvent.click(dismissBtn)
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+    expect(onAccept).not.toHaveBeenCalled()
+  })
+
+  it('onDecline takes precedence over onCancel when provided', () => {
+    const onAccept = vi.fn()
+    const onCancel = vi.fn()
+    const onDecline = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Proceed?',
+      requestedSchema: {
+        type: 'object',
+        properties: { consent: { type: 'boolean' } },
+      },
+    }
+
+    const { getByText } = render(() => (
+      <ElicitationForm
+        event={event}
+        onAccept={onAccept}
+        onCancel={onCancel}
+        onDecline={onDecline}
+        dismissLabel="Decline"
+      />
+    ))
+
+    fireEvent.click(getByText('Decline') as HTMLElement)
+
+    expect(onDecline).toHaveBeenCalledTimes(1)
+    expect(onCancel).not.toHaveBeenCalled()
+    expect(onAccept).not.toHaveBeenCalled()
+  })
+
+  it('confirm cancel button → onCancel fires (dismissed=true via cancel button)', () => {
+    const onAccept = vi.fn()
+    const onCancel = vi.fn()
+    const event: ElicitationEvent = {
+      message: 'Proceed?',
+      requestedSchema: {
+        type: 'object',
+        properties: { consent: { type: 'boolean' } },
+      },
+    }
+
+    const { getByText } = render(() => (
+      <ElicitationForm event={event} onAccept={onAccept} onCancel={onCancel} />
+    ))
+
+    fireEvent.click(getByText('Cancel') as HTMLElement)
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+    expect(onAccept).not.toHaveBeenCalled()
+  })
+})

package/src/components/ElicitationForm.tsx

@@ -0,0 +1,126 @@
+/**
+ * ElicitationForm — schema-driven renderer for MCP `elicitation/create` requests
+ *
+ * @experimental
+ * @since v5.3.0
+ *
+ * Thin wrapper over `<ChatPrompt>` + `elicitationToPromptConfig()` that
+ * accepts a spec-shaped `ElicitationEvent` (MCP 2025-06-18) and exposes a
+ * spec-shaped `onAccept(content)` callback whose payload is ready to send
+ * back as the `accept` outcome of an `elicitation/create` reply.
+ *
+ * The mapping (boolean → confirm, single enum ≤4 → choice, else → form) is
+ * delegated to the `elicitationToPromptConfig` helper — same rules, same
+ * tests. This component owns the inverse mapping : extracting a spec-shaped
+ * `Record<string, unknown>` from the `ChatPromptResponse`.
+ *
+ * ## Outcome semantics (per MCP spec 2025-06-18)
+ *
+ * | User action                           | Callback fired     | Payload                          |
+ * |---------------------------------------|--------------------|----------------------------------|
+ * | Submit form / pick choice / confirm   | `onAccept(content)`| `{ [propName]: value, ... }`     |
+ * | X icon / Cancel button                | `onCancel()` *or* `onDecline()` if provided | none                |
+ *
+ * mcp-ui's `<ChatPrompt>` does not natively distinguish "decline" (explicit
+ * refusal) from "cancel" (passive close). To surface a decline action,
+ * pass `dismissLabel="Decline"` and route the callback via `onDecline`.
+ *
+ * @example
+ * ```tsx
+ * bus.events.on('onElicitation', ({ elicitation }) => {
+ *   render(() => (
+ *     <ElicitationForm
+ *       event={elicitation}
+ *       onAccept={(content) => sendElicitationReply({ action: 'accept', content })}
+ *       onCancel={() => sendElicitationReply({ action: 'cancel' })}
+ *     />
+ *   ), mountPoint)
+ * })
+ * ```
+ */
+
+import { Component } from 'solid-js'
+import { ChatPrompt } from './ChatPrompt'
+import { elicitationToPromptConfig } from '../services/chat-bus'
+import type {
+  ChatPromptResponse,
+  ElicitationEvent,
+  ElicitationPropertySchema,
+} from '../types/chat-bus'
+
+export interface ElicitationFormProps {
+  /** MCP `elicitation/create` request payload to render. */
+  event: ElicitationEvent
+  /**
+   * Called when user submits a valid response. `content` is keyed by the
+   * elicitation `requestedSchema.properties` names — ready to send back as
+   * the `accept` outcome of an `elicitation/create` reply.
+   */
+  onAccept: (content: Record<string, unknown>) => void
+  /** Called when user dismisses (X icon, confirm-cancel button). */
+  onCancel?: () => void
+  /**
+   * Optional explicit decline action. When provided, takes precedence over
+   * `onCancel` on dismiss. Pair with `dismissLabel="Decline"` to surface as
+   * a decline action in the UI.
+   */
+  onDecline?: () => void
+  /** Label on the dismiss button (default: X icon). */
+  dismissLabel?: string
+}
+
+/**
+ * @experimental
+ * Schema-driven renderer for MCP `elicitation/create` requests.
+ */
+export const ElicitationForm: Component<ElicitationFormProps> = (props) => {
+  const config = () => elicitationToPromptConfig(props.event)
+
+  const handleSubmit = (response: ChatPromptResponse): void => {
+    if (response.dismissed) {
+      ;(props.onDecline ?? props.onCancel)?.()
+      return
+    }
+    props.onAccept(extractContent(response, props.event))
+  }
+
+  return <ChatPrompt config={config()} dismissLabel={props.dismissLabel} onSubmit={handleSubmit} />
+}
+
+function extractContent(
+  response: ChatPromptResponse,
+  event: ElicitationEvent
+): Record<string, unknown> {
+  // Form: response.value is already a Record keyed by property names.
+  if (typeof response.value !== 'string') {
+    return response.value
+  }
+
+  const propEntries = Object.entries(event.requestedSchema.properties)
+
+  // Single-property cases (boolean confirm or single enum choice).
+  if (propEntries.length === 1) {
+    const [name, schema] = propEntries[0]
+    return { [name]: coerceScalar(response.value, schema) }
+  }
+
+  // Multi-property string response — shouldn't happen since the helper
+  // routes multi-prop schemas to 'form'. Fall back gracefully.
+  console.warn(
+    '[MCP-UI] ElicitationForm: received string value for multi-property schema. Falling back to _value.'
+  )
+  return { _value: response.value }
+}
+
+function coerceScalar(value: string, schema: ElicitationPropertySchema): unknown {
+  // Confirm always emits the literal 'confirmed' on accept (cancel path is
+  // trapped earlier by `dismissed: true`). Map to boolean true.
+  if (schema.type === 'boolean') return true
+
+  if (schema.type === 'number' || schema.type === 'integer') {
+    const n = Number(value)
+    return Number.isFinite(n) ? n : value
+  }
+
+  return value
+}

package/src/components/index.ts

@@ -88,5 +88,9 @@ export type { DataPreviewSectionProps } from './DataPreviewSection'
 export { RenderContext, RenderProvider, useRenderContext } from './RenderContext'
 export type { RenderContextValue, RenderComponentFn } from './RenderContext'
 
+// MCP elicitation (v5.3.0)
+export { ElicitationForm } from './ElicitationForm'
+export type { ElicitationFormProps } from './ElicitationForm'
+
 // Default exports for lazy loading compatibility
 export { UIResourceRenderer as default } from './UIResourceRenderer'

package/src/index.ts

@@ -43,6 +43,7 @@ export type { FeedbackInlineProps, FeedbackInlineContext } from './components/Fe
 // Chat Bus (v2.4.0 — @experimental)
 export { ChatBusProvider, useChatBus } from './hooks/useChatBus'
 export { ChatPrompt } from './components/ChatPrompt'
+export { ElicitationForm } from './components/ElicitationForm'
 export { ScratchpadPanel } from './components/ScratchpadPanel'
 export {
   dispatchScratchpad,
@@ -53,6 +54,20 @@ export {
 } from './stores/scratchpad-store'
 export type { ScratchpadStoreHandle } from './stores/scratchpad-store'
 
+// Server Capabilities (v5.3.0)
+export {
+  setServerCapabilities,
+  useServerCapabilities,
+  createServerCapabilitiesStore,
+  ServerCapabilitiesContext,
+  ServerCapabilitiesProvider,
+} from './stores/server-capabilities-store'
+export type {
+  ServerCapabilities,
+  ServerInitializeInfo,
+  ServerCapabilitiesStoreHandle,
+} from './stores/server-capabilities-store'
+
 // Data Verification Components (v3.1.0)
 export { VerifiedText } from './components/VerifiedText'
 export { DataPreviewSection } from './components/DataPreviewSection'
@@ -80,6 +95,7 @@ export type { EditableUIResourceRendererProps } from './components/EditableUIRes
 export type { ExpandableWrapperProps } from './components/ExpandableWrapper'
 export type { ComponentToolbarProps, ToolbarAction, ToolbarIcon } from './components/ComponentToolbar'
 export type { ChatPromptProps } from './components/ChatPrompt'
+export type { ElicitationFormProps } from './components/ElicitationForm'
 export type { ScratchpadPanelProps } from './components/ScratchpadPanel'
 export type { VerifiedTextProps } from './components/VerifiedText'
 export type { DataPreviewSectionProps } from './components/DataPreviewSection'

package/src/stores/server-capabilities-store.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * Tests for server-capabilities-store — v5.3.0
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, cleanup } from '@solidjs/testing-library'
+import { createEffect, createRoot } from 'solid-js'
+import {
+  createServerCapabilitiesStore,
+  setServerCapabilities,
+  useServerCapabilities,
+  ServerCapabilitiesProvider,
+} from './server-capabilities-store'
+import type { ServerInitializeInfo } from './server-capabilities-store'
+
+const sampleInfo: ServerInitializeInfo = {
+  protocolVersion: '2025-06-18',
+  serverInfo: { name: 'deposium-mcp', version: '1.4.2' },
+  capabilities: {
+    tools: { listChanged: true },
+    prompts: { listChanged: false },
+    resources: { listChanged: true, subscribe: false },
+  },
+  instructions: 'Use deposium_chat for synthesis questions.',
+}
+
+describe('createServerCapabilitiesStore — v5.3.0', () => {
+  beforeEach(() => {
+    cleanup()
+    setServerCapabilities(null) // reset module singleton between tests
+  })
+
+  it('two factory stores do not share state', () => {
+    const storeA = createServerCapabilitiesStore()
+    const storeB = createServerCapabilitiesStore()
+
+    storeA.set(sampleInfo)
+
+    expect(storeA.info()?.serverInfo.name).toBe('deposium-mcp')
+    expect(storeB.info()).toBeNull()
+  })
+
+  it('accessors return null until set is called', () => {
+    const store = createServerCapabilitiesStore()
+
+    expect(store.info()).toBeNull()
+    expect(store.capabilities()).toBeNull()
+    expect(store.serverInfo()).toBeNull()
+    expect(store.protocolVersion()).toBeNull()
+    expect(store.hasCapability('tools')).toBe(false)
+  })
+
+  it('set(info) populates all derived accessors', () => {
+    const store = createServerCapabilitiesStore()
+    store.set(sampleInfo)
+
+    expect(store.protocolVersion()).toBe('2025-06-18')
+    expect(store.serverInfo()?.version).toBe('1.4.2')
+    expect(store.capabilities()?.tools?.listChanged).toBe(true)
+  })
+
+  it('set(null) clears the store', () => {
+    const store = createServerCapabilitiesStore()
+    store.set(sampleInfo)
+    expect(store.info()).not.toBeNull()
+
+    store.set(null)
+    expect(store.info()).toBeNull()
+    expect(store.hasCapability('tools')).toBe(false)
+  })
+
+  it('hasCapability returns true for present keys, false for absent', () => {
+    const store = createServerCapabilitiesStore()
+    store.set(sampleInfo)
+
+    expect(store.hasCapability('tools')).toBe(true)
+    expect(store.hasCapability('prompts')).toBe(true)
+    expect(store.hasCapability('resources')).toBe(true)
+    expect(store.hasCapability('logging')).toBe(false)
+    expect(store.hasCapability('completions')).toBe(false)
+    expect(store.hasCapability('experimental')).toBe(false)
+  })
+})
+
+describe('setServerCapabilities + useServerCapabilities (singleton path)', () => {
+  beforeEach(() => {
+    cleanup()
+    setServerCapabilities(null)
+  })
+
+  it('useServerCapabilities falls back to module singleton outside provider', () => {
+    setServerCapabilities(sampleInfo)
+
+    let captured: ReturnType<typeof useServerCapabilities> | null = null
+    const Probe = () => {
+      captured = useServerCapabilities()
+      return null
+    }
+    render(() => <Probe />)
+
+    expect(captured).not.toBeNull()
+    expect(captured!.serverInfo()?.name).toBe('deposium-mcp')
+    expect(captured!.hasCapability('tools')).toBe(true)
+  })
+
+  it('singleton state survives across renders', () => {
+    setServerCapabilities(sampleInfo)
+
+    const captures: Array<string | undefined> = []
+    const Probe = () => {
+      const { serverInfo } = useServerCapabilities()
+      captures.push(serverInfo()?.name)
+      return null
+    }
+    render(() => <Probe />)
+    render(() => <Probe />)
+
+    expect(captures).toEqual(['deposium-mcp', 'deposium-mcp'])
+  })
+})
+
+describe('ServerCapabilitiesProvider scoping', () => {
+  beforeEach(() => {
+    cleanup()
+    setServerCapabilities(null)
+  })
+
+  it('provider with explicit store overrides the singleton for descendants', () => {
+    setServerCapabilities(sampleInfo) // singleton has deposium-mcp
+
+    const scopedStore = createServerCapabilitiesStore()
+    scopedStore.set({
+      ...sampleInfo,
+      serverInfo: { name: 'other-mcp', version: '0.1.0' },
+    })
+
+    let inside: string | undefined
+    let outside: string | undefined
+
+    const Inside = () => {
+      inside = useServerCapabilities().serverInfo()?.name
+      return null
+    }
+    const Outside = () => {
+      outside = useServerCapabilities().serverInfo()?.name
+      return null
+    }
+
+    render(() => (
+      <>
+        <Outside />
+        <ServerCapabilitiesProvider store={scopedStore}>
+          <Inside />
+        </ServerCapabilitiesProvider>
+      </>
+    ))
+
+    expect(outside).toBe('deposium-mcp')
+    expect(inside).toBe('other-mcp')
+  })
+
+  it('provider without store creates a fresh isolated handle', () => {
+    setServerCapabilities(sampleInfo)
+
+    let inside: ReturnType<typeof useServerCapabilities> | null = null
+    const Inside = () => {
+      inside = useServerCapabilities()
+      return null
+    }
+    render(() => (
+      <ServerCapabilitiesProvider>
+        <Inside />
+      </ServerCapabilitiesProvider>
+    ))
+
+    expect(inside).not.toBeNull()
+    expect(inside!.info()).toBeNull() // fresh, not the singleton's state
+  })
+
+  it('set() updates trigger reactive effects', () => {
+    const store = createServerCapabilitiesStore()
+    const captures: Array<string | null> = []
+
+    let dispose: (() => void) | undefined
+    createRoot((d) => {
+      dispose = d
+      createEffect(() => {
+        captures.push(store.serverInfo()?.name ?? null)
+      })
+    })
+
+    // Initial effect run
+    expect(captures).toEqual([null])
+
+    store.set(sampleInfo)
+    expect(captures).toEqual([null, 'deposium-mcp'])
+
+    store.set({ ...sampleInfo, serverInfo: { name: 'renamed', version: '2.0.0' } })
+    expect(captures).toEqual([null, 'deposium-mcp', 'renamed'])
+
+    store.set(null)
+    expect(captures).toEqual([null, 'deposium-mcp', 'renamed', null])
+
+    dispose?.()
+  })
+})