@seed-ship/mcp-ui-solid 4.2.2 → 4.3.1

package/dist/types.d.ts

@@ -275,6 +275,14 @@ export interface FormFieldParams {
     source?: PrefillSource;
     /** If true, field is visually muted (but still editable on click/focus). */
     muted?: boolean;
+    /** How to handle prefill for autocomplete fields.
+     *  - "exact" (default): prefill is the final value (code), use as-is
+     *  - "resolve": prefill is a display name, call apiUrl to resolve to valueField */
+    prefillMode?: 'exact' | 'resolve';
+    /** Regex pattern the submitted value MUST match. Prevents submit if invalid. */
+    valueFormat?: string;
+    /** Human-readable hint shown when valueFormat validation fails. */
+    valueFormatHint?: string;
     minLength?: number;
     maxLength?: number;
     pattern?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/FormFieldRenderer.tsx

@@ -500,6 +500,7 @@ const AutocompleteField: Component<{
   const [suggestions, setSuggestions] = createSignal<Array<{ label: string; value: string }>>([])
   const [isOpen, setIsOpen] = createSignal(false)
   const [selectedLabels, setSelectedLabels] = createSignal<Map<string, string>>(new Map())
+  const [resolving, setResolving] = createSignal(false)
   let debounceTimer: ReturnType<typeof setTimeout> | null = null
 
   const isMultiple = () => props.field.multiple === true
@@ -535,6 +536,72 @@ const AutocompleteField: Component<{
     }
   }
 
+  // Proposal 1: prefillMode "resolve" — call apiUrl to resolve display name → code
+  const resolvePrefill = async (prefillValues: string[]) => {
+    if (!props.field.apiUrl || !props.field.searchParam) return
+    setResolving(true)
+    const labelField = props.field.labelField || 'label'
+    const valueField = props.field.valueField || 'value'
+
+    try {
+      const resolvedValues: string[] = []
+      for (const pv of prefillValues) {
+        const params = new URLSearchParams({ [props.field.searchParam]: pv, limit: '1' })
+        if (props.field.extraParams) {
+          for (const [k, v] of Object.entries(props.field.extraParams)) params.set(k, v)
+        }
+        const res = await fetch(`${props.field.apiUrl}?${params}`)
+        if (!res.ok) { resolvedValues.push(pv); continue }
+        const data = await res.json()
+        const items = Array.isArray(data) ? data : data.results || data.features || []
+        if (items.length > 0) {
+          const code = String(items[0][valueField] || pv)
+          const label = items[0][labelField] || pv
+          resolvedValues.push(code)
+          setSelectedLabels((prev) => new Map(prev).set(code, label))
+        } else {
+          resolvedValues.push(pv)
+          setSelectedLabels((prev) => new Map(prev).set(pv, pv))
+        }
+      }
+      if (isMultiple()) {
+        props.onChange(resolvedValues)
+      } else {
+        props.onChange(resolvedValues[0] || '')
+        const label = selectedLabels().get(resolvedValues[0])
+        if (label) setQuery(label)
+      }
+    } catch {
+      // Fallback: use raw prefill values
+    } finally {
+      setResolving(false)
+    }
+  }
+
+  // On mount: handle prefill
+  createEffect(() => {
+    const prefill = props.field.prefill
+    if (!prefill) return
+    const values = Array.isArray(prefill) ? prefill : [prefill]
+    if (values.length === 0) return
+
+    if (props.field.prefillMode === 'resolve') {
+      // Proposal 1: resolve display names to codes via API
+      resolvePrefill(values)
+    } else {
+      // Proposal 2 + 6: exact mode — prefill is a code, show displayHint or label as tag
+      for (const v of values) {
+        if (!selectedLabels().has(v)) {
+          setSelectedLabels((prev) => new Map(prev).set(v, props.field.displayHint || v))
+        }
+      }
+      if (!isMultiple() && values[0]) {
+        const label = props.field.displayHint || values[0]
+        setQuery(label)
+      }
+    }
+  })
+
   const handleInput = (value: string) => {
     setQuery(value)
     // Only clear the stored value if user is actively changing the text
@@ -567,6 +634,7 @@ const AutocompleteField: Component<{
       setSuggestions([])
       setIsOpen(false)
     } else {
+      // Proposal 6: always store valueField (item.value), display labelField
       props.onChange(item.value)
       setSelectedLabels((prev) => new Map(prev).set(item.value, item.label))
       setQuery(item.label)
@@ -575,6 +643,17 @@ const AutocompleteField: Component<{
     }
   }
 
+  // Proposal 6: on blur without selection, auto-resolve typed text to first API result
+  const handleBlur = () => {
+    setTimeout(() => {
+      setIsOpen(false)
+      // If user typed but didn't select, and field has valueField, resolve first match
+      if (!isMultiple() && query() && !props.value && props.field.valueField && suggestions().length > 0) {
+        selectSuggestion(suggestions()[0])
+      }
+    }, 200)
+  }
+
   const removeChip = (val: string) => {
     props.onChange(selectedValues().filter((v) => v !== val))
     setSelectedLabels((prev) => { const m = new Map(prev); m.delete(val); return m })
@@ -586,6 +665,14 @@ const AutocompleteField: Component<{
 
   return (
     <div class="relative">
+      {/* Resolving indicator */}
+      <Show when={resolving()}>
+        <div class="flex items-center gap-1 mb-1 text-xs text-gray-400">
+          <span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full" />
+          Resolving...
+        </div>
+      </Show>
+
       {/* Multi chips */}
       <Show when={isMultiple() && selectedValues().length > 0}>
         <div class="flex flex-wrap gap-1 mb-1">
@@ -612,11 +699,11 @@ const AutocompleteField: Component<{
         value={query()}
         onInput={(e) => handleInput(e.currentTarget.value)}
         onFocus={() => { if (suggestions().length) setIsOpen(true) }}
-        onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+        onBlur={handleBlur}
         placeholder={isMultiple() && selectedValues().length
           ? 'Add more...'
           : props.field.placeholder}
-        disabled={props.disabled}
+        disabled={props.disabled || resolving()}
         class={props.baseClass}
         autocomplete="off"
       />

package/src/components/FormRenderer.tsx

@@ -234,6 +234,18 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
       </Show>
 
       <form id={`form-${props.component.id}`} onSubmit={handleSubmit} noValidate>
+        {/* Proposal 3: prefill summary */}
+        <Show when={params().fields.some((f) => f.prefill != null)}>
+          {(() => {
+            const prefilled = params().fields.filter((f) => f.prefill != null).length
+            const total = params().fields.length
+            return (
+              <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                {prefilled} champ{prefilled > 1 ? 's' : ''} pré-rempli{prefilled > 1 ? 's' : ''} sur {total}
+              </p>
+            )
+          })()}
+        </Show>
         <div class={layoutClass()}>
           <For each={params().fields}>
             {(field) => (

package/src/components/ScratchpadPanel.tsx

@@ -36,6 +36,8 @@ export interface ScratchpadPanelProps {
   debug?: boolean
   /** Show mini debug overlay */
   debugOverlay?: boolean
+  /** Show collapsible debug trace panel under forms */
+  debugTrace?: boolean
   closable?: boolean
   autoCloseDelay?: number
   collapsible?: boolean
@@ -243,6 +245,7 @@ export const ScratchpadPanel: Component<ScratchpadPanelProps> = (props) => {
                   onAction={handleAction}
                   onSectionEdit={props.onSectionEdit}
                   onSubmit={props.onSubmit}
+                  debugTrace={props.debugTrace}
                 />
               )}
             </For>
@@ -373,6 +376,7 @@ const SectionRenderer: Component<{
   onAction?: (action: string, data?: unknown) => void
   onSectionEdit?: (sectionId: string, content: unknown) => void
   onSubmit?: (sectionId: string, values: Record<string, unknown>) => void
+  debugTrace?: boolean
 }> = (props) => {
   return (
     <div class="px-4 py-3 animate-[slideDown_0.2s_ease-out]">
@@ -383,7 +387,7 @@ const SectionRenderer: Component<{
         <Match when={props.section.type === 'message'}><p class="text-sm text-gray-700 dark:text-gray-300">{String(props.section.content)}</p></Match>
         <Match when={props.section.type === 'action'}><ActionSection content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
         <Match when={props.section.type === 'steps'}><EnrichedStepsSection content={parseContent(props.section.content)} onAction={props.onAction} onFilterChange={props.onFilterChange} /></Match>
-        <Match when={props.section.type === 'form'}><EmbeddedFormSection content={parseContent(props.section.content)} sectionId={props.section.id} onAction={props.onAction} onSubmit={props.onSubmit} /></Match>
+        <Match when={props.section.type === 'form'}><EmbeddedFormSection content={parseContent(props.section.content)} sectionId={props.section.id} onAction={props.onAction} onSubmit={props.onSubmit} debugTrace={props.debugTrace} /></Match>
         <Match when={props.section.type === 'understanding'}><UnderstandingSection content={parseContent(props.section.content)} /></Match>
         <Match when={props.section.type === 'feedback'}><FeedbackSection content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
         <Match when={props.section.type === 'prompt'}><PromptSection content={parseContent(props.section.content)} onAction={props.onAction} /></Match>
@@ -524,6 +528,7 @@ const EmbeddedFormSection: Component<{
   sectionId: string
   onAction?: (action: string, data?: unknown) => void
   onSubmit?: (sectionId: string, values: Record<string, unknown>) => void
+  debugTrace?: boolean
 }> = (props) => {
   const [dynamicOptions, setDynamicOptions] = createSignal<Record<string, Array<{ label: string; value: string }>>>({})
 
@@ -631,6 +636,9 @@ const EmbeddedFormSection: Component<{
     return dynOpts ? { ...field, options: dynOpts } as FormFieldParams : field as FormFieldParams
   }
 
+  // Debug trace: track submitted values
+  const [submittedValues, setSubmittedValues] = createSignal<Record<string, any> | null>(null)
+
   const handleSubmit = (e: Event) => {
     e.preventDefault()
 
@@ -644,6 +652,8 @@ const EmbeddedFormSection: Component<{
         .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))
     )
 
+    setSubmittedValues(values)
+
     // DX1 Etape 7: form submit log
     console.info(`%c[MCP-UI] Form submitted%c section=${props.sectionId} fields=${Object.keys(values).join(',')}`, 'color: #8b5cf6; font-weight: bold', 'color: inherit')
 
@@ -654,8 +664,43 @@ const EmbeddedFormSection: Component<{
     }
   }
 
+  // Proposal 3: prefill confidence summary
+  const prefillSummary = () => {
+    const fields = config().fields
+    const total = fields.length
+    const prefilled = fields.filter((f: any) => f.prefill != null).length
+    return { total, prefilled }
+  }
+
+  // Proposal 4: auto-submit toast mode — compact view when ALL fields prefilled
+  const [expanded, setExpanded] = createSignal(false)
+  const allFieldsPrefilled = () => {
+    const fields = config().fields
+    return fields.length > 0 && fields.every((f: any) => f.prefill != null)
+  }
+  const showToast = () => allFieldsPrefilled() && !userInteracted() && !expanded() && countdown() != null
+
   return (
+    <>
+    <Show when={!showToast()} fallback={
+      <div class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm">
+        <span class="flex-1 text-blue-800 dark:text-blue-200 font-medium">
+          {config().fields.map((f: any) => f.displayHint || f.prefill).join(', ')}
+        </span>
+        <span class="text-blue-600 dark:text-blue-300">{countdown()}s...</span>
+        <button type="button" onClick={() => { setExpanded(true); cancelCountdown(); setUserInteracted(true) }}
+          class="text-blue-600 dark:text-blue-400 underline text-xs">Modifier</button>
+        <button type="button" onClick={() => { cancelCountdown(); setUserInteracted(true) }}
+          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;</button>
+      </div>
+    }>
     <form id={`scratchpad-form-${props.sectionId}`} onSubmit={handleSubmit} class="flex flex-col gap-3">
+      {/* Proposal 3: prefill summary */}
+      <Show when={prefillSummary().prefilled > 0}>
+        <p class="text-xs text-gray-500 dark:text-gray-400">
+          {prefillSummary().prefilled} champ{prefillSummary().prefilled > 1 ? 's' : ''} pré-rempli{prefillSummary().prefilled > 1 ? 's' : ''} sur {prefillSummary().total}
+        </p>
+      </Show>
       <For each={config().fields}>
         {(field) => (
           <FormFieldRenderer
@@ -686,6 +731,134 @@ const EmbeddedFormSection: Component<{
         </button>
       </div>
     </form>
+    </Show>
+
+    {/* Debug trace panel */}
+    <Show when={props.debugTrace}>
+      <FormDebugTrace
+        fields={config().fields}
+        formData={formData()}
+        submittedValues={submittedValues()}
+        autoSubmitDelay={config().autoSubmitDelay}
+        userInteracted={userInteracted()}
+        rawContent={props.content}
+      />
+    </Show>
+    </>
+  )
+}
+
+// ─── Form Debug Trace Panel ─────────────────────────────────
+
+const FormDebugTrace: Component<{
+  fields: any[]
+  formData: Record<string, any>
+  submittedValues: Record<string, any> | null
+  autoSubmitDelay?: number
+  userInteracted: boolean
+  rawContent: unknown
+}> = (props) => {
+  const [open, setOpen] = createSignal(false)
+  const [showRaw, setShowRaw] = createSignal(false)
+
+  const prefilledCount = () => props.fields.filter((f: any) => f.prefill != null).length
+  const requiredFields = () => props.fields.filter((f: any) => f.required)
+  const missingRequired = () => requiredFields().filter((f: any) => f.prefill == null)
+
+  const autoSubmitReason = () => {
+    if (!props.autoSubmitDelay) return 'no autoSubmitDelay configured'
+    if (missingRequired().length > 0) return `${missingRequired().length} required field(s) without prefill`
+    if (props.userInteracted) return 'user interacted — cancelled'
+    return 'all conditions met'
+  }
+
+  // Server-side _debug data
+  const serverDebug = () => (props.rawContent as any)?._debug
+
+  return (
+    <div class="mt-2 border border-gray-200 dark:border-gray-700 rounded-md text-xs font-mono">
+      <button
+        type="button"
+        onClick={() => setOpen(!open())}
+        class="w-full px-3 py-1.5 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-1"
+      >
+        <span>{open() ? '\u25BE' : '\u25B8'}</span>
+        Debug trace ({prefilledCount()}/{props.fields.length} prefilled)
+      </button>
+      <Show when={open()}>
+        <div class="px-3 pb-3 space-y-2 text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-2">
+          <div>Fields: {props.fields.length} total, {prefilledCount()} prefilled</div>
+
+          <For each={props.fields}>
+            {(field: any) => (
+              <div class="pl-2 border-l-2 border-gray-200 dark:border-gray-600 space-y-0.5">
+                <div class="text-gray-800 dark:text-gray-200 font-medium">{field.name}:</div>
+                <Show when={field.prefill != null}>
+                  <div>  prefill: {JSON.stringify(field.prefill)}</div>
+                </Show>
+                <Show when={!field.prefill}>
+                  <div class="text-amber-500">  prefill: (none)</div>
+                </Show>
+                <Show when={field.source}><div>  source: {field.source}</div></Show>
+                <Show when={field.displayHint}><div>  displayHint: "{field.displayHint}"</div></Show>
+                <Show when={field.muted}><div>  muted: true</div></Show>
+                <Show when={field.prefillMode}><div>  prefillMode: {field.prefillMode}</div></Show>
+                <Show when={field.valueFormat}><div>  valueFormat: /{field.valueFormat}/</div></Show>
+                <Show when={props.submittedValues}>
+                  {(() => {
+                    const v = props.submittedValues![field.name]
+                    const hasValue = v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0)
+                    return (
+                      <div class={hasValue ? 'text-green-600 dark:text-green-400' : 'text-gray-400'}>
+                        {'\u2192'} submitted: {hasValue ? `${JSON.stringify(v)} \u2713` : '(empty)'}
+                      </div>
+                    )
+                  })()}
+                </Show>
+              </div>
+            )}
+          </For>
+
+          <div class="pt-1 border-t border-gray-200 dark:border-gray-600">
+            autoSubmit: {props.autoSubmitDelay ? 'true' : 'false'}
+            {props.autoSubmitDelay ? ` (${props.autoSubmitDelay}ms)` : ''}
+            <div>  reason: {autoSubmitReason()}</div>
+          </div>
+
+          <Show when={serverDebug()}>
+            <div class="pt-1 border-t border-gray-200 dark:border-gray-600">
+              <div class="font-medium text-gray-800 dark:text-gray-200">Server _debug:</div>
+              <Show when={serverDebug()?.resolvers}>
+                <For each={serverDebug().resolvers}>
+                  {(r: any) => (
+                    <div class="pl-2">
+                      {r.field}: {r.resolver} "{r.input}" {'\u2192'} "{r.output}" ({r.ms}ms)
+                    </div>
+                  )}
+                </For>
+              </Show>
+              <Show when={serverDebug()?.routing}>
+                <div class="pl-2">routing: {serverDebug().routing.topic} via {serverDebug().routing.method} ({serverDebug().routing.ms}ms)</div>
+              </Show>
+              <Show when={serverDebug()?.missingFields}>
+                <div class="pl-2 text-amber-500">missing: {serverDebug().missingFields.join(', ')}</div>
+              </Show>
+            </div>
+          </Show>
+
+          <div class="pt-1 border-t border-gray-200 dark:border-gray-600">
+            <button type="button" onClick={() => setShowRaw(!showRaw())} class="text-blue-500 hover:text-blue-700 underline">
+              {showRaw() ? 'Hide' : 'Show'} raw SSE payload
+            </button>
+            <Show when={showRaw()}>
+              <pre class="mt-1 p-2 bg-gray-50 dark:bg-gray-900 rounded max-h-48 overflow-auto text-[10px]">
+                {JSON.stringify(props.rawContent, null, 2)}
+              </pre>
+            </Show>
+          </div>
+        </div>
+      </Show>
+    </div>
   )
 }
 

package/src/services/validation.ts

@@ -939,6 +939,16 @@ export function validateFieldValue(
       break
   }
 
+  // valueFormat validation (v4.3.0) — runs after type-specific checks
+  if (field.valueFormat && value !== undefined && value !== null && value !== '') {
+    const vals = Array.isArray(value) ? value : [String(value)]
+    for (const v of vals) {
+      if (!new RegExp(field.valueFormat).test(v)) {
+        return { valid: false, error: field.valueFormatHint || `Invalid format (expected: ${field.valueFormat})` }
+      }
+    }
+  }
+
   return { valid: true }
 }
 

package/src/types/index.ts

@@ -345,6 +345,14 @@ export interface FormFieldParams {
   source?: PrefillSource
   /** If true, field is visually muted (but still editable on click/focus). */
   muted?: boolean
+  /** How to handle prefill for autocomplete fields.
+   *  - "exact" (default): prefill is the final value (code), use as-is
+   *  - "resolve": prefill is a display name, call apiUrl to resolve to valueField */
+  prefillMode?: 'exact' | 'resolve'
+  /** Regex pattern the submitted value MUST match. Prevents submit if invalid. */
+  valueFormat?: string
+  /** Human-readable hint shown when valueFormat validation fails. */
+  valueFormatHint?: string
 
   // Text/textarea specific
   minLength?: number