@seed-ship/mcp-ui-solid 4.0.6 → 4.2.0

package/src/components/FormFieldRenderer.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Component, Show, For, Switch, Match, Accessor, createSignal, createEffect, onCleanup } from 'solid-js'
-import type { FormFieldParams } from '../types'
+import type { FormFieldParams, PrefillSource } from '../types'
 import { useConditionalField } from '../hooks/useConditionalField'
 
 export interface FormFieldRendererProps {
@@ -20,6 +20,14 @@ export interface FormFieldRendererProps {
   formData?: Accessor<Record<string, any>>
 }
 
+/** Badge config by prefill source */
+const SOURCE_BADGES: Record<PrefillSource, { icon: string; title: string } | null> = {
+  detected: { icon: '\u2705', title: 'Detected from message' },
+  inferred: { icon: '\uD83D\uDD17', title: 'Inferred from context' },
+  user:     { icon: '\u270F\uFE0F', title: 'Previously provided' },
+  default:  null,
+}
+
 export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
   // Conditional visibility based on showWhen
   const { isVisible } = useConditionalField({
@@ -27,10 +35,23 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
     formData: props.formData || (() => ({})),
   })
 
+  // Muted state — starts muted if field says so, clears on focus/click
+  const [isMuted, setIsMuted] = createSignal(!!props.field.muted)
+
+  const handleFieldFocus = () => {
+    if (isMuted()) setIsMuted(false)
+  }
+
   const status = () => props.field.fieldStatus || 'optional'
   const isUnsupported = () => status() === 'unsupported'
   const isFieldDisabled = () => props.disabled || isUnsupported()
 
+  const sourceBadge = () => {
+    const src = props.field.source
+    if (!src) return null
+    return SOURCE_BADGES[src]
+  }
+
   const baseInputClass = () => `
     w-full px-3 py-2 border rounded-md
     focus:ring-2 focus:ring-blue-500 focus:border-blue-500
@@ -40,6 +61,7 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
       : 'border-gray-300 dark:border-gray-600'}
     dark:bg-gray-700 dark:text-white
     ${isUnsupported() ? 'opacity-50' : ''}
+    ${isMuted() ? 'bg-gray-50 dark:bg-gray-700/50 text-gray-500 dark:text-gray-400' : ''}
   `
 
   const fieldId = () => `field-${props.field.name}`
@@ -47,12 +69,15 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
 
   return (
     <Show when={isVisible()}>
-    <div class="space-y-1">
+    <div class="space-y-1" onFocusIn={handleFieldFocus} onClick={handleFieldFocus}>
       <Show when={props.field.label && props.field.type !== 'checkbox'}>
         <label
           for={fieldId()}
-          class={`block text-sm font-medium ${isUnsupported() ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}
+          class={`block text-sm font-medium ${isUnsupported() ? 'text-gray-400 dark:text-gray-500' : isMuted() ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}
         >
+          <Show when={sourceBadge()}>
+            <span class="mr-1" title={sourceBadge()!.title}>{sourceBadge()!.icon}</span>
+          </Show>
           {props.field.label}
           <Show when={props.field.required || status() === 'required'}>
             <span class="text-red-500 ml-1" aria-hidden="true">*</span>
@@ -322,7 +347,13 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
         </p>
       </Show>
 
-      <Show when={props.field.helpText && !props.error && !props.field.statusReason}>
+      <Show when={props.field.displayHint && props.field.prefill != null}>
+        <p class={`text-xs italic ${isMuted() ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'}`}>
+          {props.field.displayHint}
+        </p>
+      </Show>
+
+      <Show when={props.field.helpText && !props.error && !props.field.statusReason && !props.field.displayHint}>
         <p class="text-xs text-gray-500 dark:text-gray-400">{props.field.helpText}</p>
       </Show>
 

package/src/components/FormRenderer.tsx

@@ -5,7 +5,7 @@
  * Sprint 4: Form state persistence
  */
 
-import { Component, createSignal, For, Show, onMount, createEffect } from 'solid-js'
+import { Component, createSignal, For, Show, onMount, createEffect, onCleanup } from 'solid-js'
 import { FormFieldRenderer } from './FormFieldRenderer'
 import type { UIComponent, FormComponentParams, FormFieldParams } from '../types'
 import { useAction } from '../hooks/useAction'
@@ -56,11 +56,43 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
     })
   }
 
-  // Initialize form data with default values
+  // Auto-submit countdown state (v4.2.0)
+  const [countdown, setCountdown] = createSignal<number | null>(null)
+  let countdownTimer: ReturnType<typeof setInterval> | null = null
+  const [userInteracted, setUserInteracted] = createSignal(false)
+
+  const cancelCountdown = () => {
+    if (countdownTimer) {
+      clearInterval(countdownTimer)
+      countdownTimer = null
+    }
+    setCountdown(null)
+  }
+
+  const handleUserInteraction = () => {
+    if (!userInteracted()) {
+      setUserInteracted(true)
+      cancelCountdown()
+    }
+  }
+
+  onCleanup(() => cancelCountdown())
+
+  /**
+   * Check if all required fields have prefill values
+   */
+  const allRequiredPrefilled = (): boolean => {
+    return params().fields
+      .filter((f) => f.required)
+      .every((f) => f.prefill != null)
+  }
+
+  // Initialize form data with default values, applying prefill (v4.2.0)
   const initializeForm = (clearStorage = false) => {
     const initial: Record<string, any> = {}
     for (const field of params().fields) {
-      initial[field.name] = field.defaultValue ?? getFieldDefault(field.type)
+      // prefill takes priority over defaultValue
+      initial[field.name] = field.prefill ?? field.defaultValue ?? getFieldDefault(field.type)
     }
     setFormData(initial)
     setErrors({})
@@ -91,7 +123,29 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
     }
   })
 
+  // Auto-submit countdown (v4.2.0)
+  createEffect(() => {
+    const delay = params().autoSubmitDelay
+    if (!delay || !allRequiredPrefilled() || userInteracted()) return
+
+    let remaining = Math.ceil(delay / 1000)
+    setCountdown(remaining)
+
+    countdownTimer = setInterval(() => {
+      remaining--
+      if (remaining <= 0) {
+        cancelCountdown()
+        // Trigger submit programmatically
+        const form = document.querySelector(`#form-${props.component.id}`) as HTMLFormElement | null
+        if (form) form.requestSubmit()
+      } else {
+        setCountdown(remaining)
+      }
+    }, 1000)
+  })
+
   const handleFieldChange = (name: string, value: any) => {
+    handleUserInteraction()
     setFormData((prev) => ({ ...prev, [name]: value }))
     // Clear error on change
     if (errors()[name]) {
@@ -179,7 +233,7 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
         </h3>
       </Show>
 
-      <form onSubmit={handleSubmit} noValidate>
+      <form id={`form-${props.component.id}`} onSubmit={handleSubmit} noValidate>
         <div class={layoutClass()}>
           <For each={params().fields}>
             {(field) => (
@@ -203,6 +257,22 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
           </div>
         </Show>
 
+        {/* Auto-submit countdown (v4.2.0) */}
+        <Show when={countdown() != null}>
+          <div class="mt-4 flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
+            <span class="text-sm text-blue-700 dark:text-blue-300">
+              {params().submitLabel || 'Submit'} in {countdown()}s...
+            </span>
+            <button
+              type="button"
+              onClick={() => { cancelCountdown(); setUserInteracted(true) }}
+              class="text-sm text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200"
+            >
+              Cancel
+            </button>
+          </div>
+        </Show>
+
         <div class="flex gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
           <button
             type="submit"

package/src/components/ScratchpadPanel.tsx

@@ -6,13 +6,17 @@
  */
 
 import { Component, Show, For, Switch, Match, createSignal, createEffect, onCleanup } from 'solid-js'
-import type { ScratchpadState, ScratchpadSection, VerifiedTextContent, DataPreviewContent, MapSectionContent } from '../types/chat-bus'
+import type { ScratchpadState, ScratchpadSection, VerifiedTextContent, DataPreviewContent, MapSectionContent, AgentCardContent, SplitStepperContent, AgentHandoffContent, BriefingDiffContent } from '../types/chat-bus'
 import type { FormFieldParams, ChartComponentParams } from '../types'
 import { FormFieldRenderer } from './FormFieldRenderer'
 import { VerifiedText } from './VerifiedText'
 import { DataPreviewSection } from './DataPreviewSection'
 import { MapRenderer } from './MapRenderer'
 import { ChartJSRenderer } from './ChartJSRenderer'
+import { AgentCard, AgentStatusBadge } from './AgentCard'
+import { SplitStepper } from './SplitStepper'
+import { AgentHandoff } from './AgentHandoff'
+import { BriefingDiff } from './BriefingDiff'
 
 export interface ScratchpadPanelProps {
   state: ScratchpadState
@@ -177,6 +181,14 @@ export const ScratchpadPanel: Component<ScratchpadPanelProps> = (props) => {
         <div class="flex items-center gap-2">
           <span class="text-base">&#128221;</span>
           <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{props.state.title}</h3>
+          {/* AgentStatusBadge — auto-detected from agent_card sections (v4.1.0) */}
+          {(() => {
+            const agentSection = props.state.sections.find(s => s.type === 'agent_card')
+            if (!agentSection) return null
+            const ac = parseContent(agentSection.content) as AgentCardContent | null
+            if (!ac?.name) return null
+            return <AgentStatusBadge agentName={ac.name} status={ac.status || 'idle'} />
+          })()}
           <Show when={isCollapsible()}>
             <svg class={`w-3.5 h-3.5 text-gray-400 transition-transform ${collapsed() ? '-rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -363,7 +375,7 @@ const SectionRenderer: Component<{
   onSubmit?: (sectionId: string, values: Record<string, unknown>) => void
 }> = (props) => {
   return (
-    <div class="px-4 py-3">
+    <div class="px-4 py-3 animate-[slideDown_0.2s_ease-out]">
       <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">{props.section.title}</h4>
       <Switch>
         <Match when={props.section.type === 'data'}><DataSection content={parseContent(props.section.content)} /></Match>
@@ -383,6 +395,10 @@ const SectionRenderer: Component<{
         <Match when={props.section.type === 'data_preview'}><DataPreviewSection content={parseContent(props.section.content) as DataPreviewContent} /></Match>
         <Match when={props.section.type === 'map'}>{(() => { const c = parseContent(props.section.content) as MapSectionContent; return <MapRenderer params={{ geojson: c.geojson, center: c.center, zoom: c.zoom, geojsonStyle: c.style, popup: c.popup, layers: c.layers, height: c.height || '300px', fitBounds: true }} /> })()}</Match>
         <Match when={props.section.type === 'chart'}>{(() => { const c = parseContent(props.section.content) as ChartComponentParams; return <ChartJSRenderer component={{ id: props.section.id, type: 'chart', position: { colStart: 1, colSpan: 12 }, params: { ...c, renderer: 'native', height: (c as any)?.height || '250px' } }} /> })()}</Match>
+        <Match when={props.section.type === 'agent_card'}><AgentCard content={parseContent(props.section.content) as AgentCardContent} /></Match>
+        <Match when={props.section.type === 'split_stepper'}><SplitStepper content={parseContent(props.section.content) as SplitStepperContent} /></Match>
+        <Match when={props.section.type === 'agent_handoff'}><AgentHandoff content={parseContent(props.section.content) as AgentHandoffContent} /></Match>
+        <Match when={props.section.type === 'briefing_diff'}><BriefingDiff content={parseContent(props.section.content) as BriefingDiffContent} /></Match>
         <Match when={true}><pre class="text-xs text-gray-500 overflow-auto">{JSON.stringify(props.section.content, null, 2)}</pre></Match>
       </Switch>
     </div>
@@ -654,30 +670,63 @@ const ActionSection: Component<{
   content: unknown
   onAction?: (action: string, data?: unknown) => void
 }> = (props) => {
-  const actions = () => {
-    if (Array.isArray(props.content)) return props.content as Array<{ label: string; value?: string; action?: string; variant?: string; icon?: string }>
-    const obj = props.content as Record<string, unknown> | null
-    if (obj && Array.isArray(obj.actions)) {
-      console.warn('[MCP-UI] ActionSection: content should be an array, got { actions: [...] }. Unwrapping automatically.')
-      return obj.actions as Array<{ label: string; value?: string; action?: string; variant?: string; icon?: string }>
-    }
-    return []
+  const data = () => {
+    const c = props.content as any
+    if (Array.isArray(c)) return { actions: c, title: undefined, preview: undefined, validation: undefined }
+    if (c && Array.isArray(c.actions)) return { actions: c.actions, title: c.title, preview: c.preview, validation: c.validation }
+    return { actions: [], title: undefined, preview: undefined, validation: undefined }
   }
+
   return (
-    <div class="flex flex-wrap gap-2">
-      <For each={actions()}>
-        {(item) => (
-          <button type="button" onClick={() => props.onAction?.(item.value || item.action || item.label, item)}
-            class={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
-              item.variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700'
-              : item.variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700'
-              : 'border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-            }`}>
-            <Show when={item.icon}><span class="mr-1">{item.icon}</span></Show>
-            {item.label}
-          </button>
+    <div>
+      {/* Confirm checkpoint: title + preview (v4.1.0) */}
+      <Show when={data().title}>
+        <p class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">{data().title}</p>
+      </Show>
+      <Show when={data().preview}>
+        {(preview) => (
+          <div class="mb-2 p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400">
+            <Show when={preview().count != null}>
+              <span class="font-medium text-gray-800 dark:text-gray-200">{preview().count}</span> items
+            </Show>
+            <Show when={preview().summary}>
+              <span class="ml-1">&mdash; {preview().summary}</span>
+            </Show>
+          </div>
         )}
-      </For>
+      </Show>
+      <Show when={data().validation && data().validation.confidence != null}>
+        <div class="mb-2 flex items-center gap-2 text-xs">
+          <span classList={{
+            'text-green-600 dark:text-green-400': data().validation.confidence >= 0.8,
+            'text-amber-600 dark:text-amber-400': data().validation.confidence >= 0.5 && data().validation.confidence < 0.8,
+            'text-red-600 dark:text-red-400': data().validation.confidence < 0.5,
+          }}>
+            {Math.round(data().validation.confidence * 100)}% verified
+          </span>
+          <Show when={data().validation.hallucinated?.length > 0}>
+            <span class="text-amber-600">({data().validation.hallucinated.length} unverified)</span>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Action buttons */}
+      <div class="flex flex-wrap gap-2">
+        <For each={data().actions as Array<{ label: string; value?: string; action?: string; variant?: string; icon?: string }>}>
+          {(item) => (
+            <button type="button" on:click={() => props.onAction?.(item.value || item.action || item.label, item)}
+              class={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
+                item.variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700'
+                : item.variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700'
+                : item.variant === 'secondary' ? 'border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20'
+                : 'border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+              }`}>
+              <Show when={item.icon}><span class="mr-1">{item.icon}</span></Show>
+              {item.label}
+            </button>
+          )}
+        </For>
+      </div>
     </div>
   )
 }
@@ -737,18 +786,21 @@ const FeedbackSection: Component<{
 }> = (props) => {
   const [comment, setComment] = createSignal('')
   const [showComment, setShowComment] = createSignal(false)
+  const [submitted, setSubmitted] = createSignal<string | null>(null)
   const data = () => {
     const c = props.content as any
-    // Support both formats: options array (universal) and approve/reject (simple)
     const options = c?.options || [
-      { value: c?.approve?.value || 'approve', label: c?.approve?.label || 'Yes', icon: '👍', variant: 'primary' },
-      { value: c?.reject?.value || 'reject', label: c?.reject?.label || 'No', icon: '👎' },
+      { value: c?.approve?.value || 'approve', label: c?.approve?.label || 'Yes', icon: '\uD83D\uDC4D', variant: 'primary' },
+      { value: c?.reject?.value || 'reject', label: c?.reject?.label || 'No', icon: '\uD83D\uDC4E' },
     ]
     return {
       question: c?.question || '',
       options: options as Array<{ value: string; label: string; icon?: string; variant?: string; needsComment?: boolean }>,
       allowFreeText: c?.allowFreeText ?? c?.allowComment ?? false,
       placeholder: c?.placeholder || c?.commentPlaceholder || 'Add a comment...',
+      // v4.1.0: per-step feedback
+      agentId: c?.agentId as string | undefined,
+      stepId: c?.stepId as string | undefined,
     }
   }
 
@@ -757,35 +809,65 @@ const FeedbackSection: Component<{
       setShowComment(true)
       return
     }
-    props.onAction?.('feedback', { option: option.value, comment: comment() })
+    setSubmitted(option.value)
+    const payload = {
+      option: option.value,
+      comment: comment(),
+      ...(data().agentId ? { agentId: data().agentId } : {}),
+      ...(data().stepId ? { stepId: data().stepId } : {}),
+    }
+    console.info('[MCP-UI:HITL] user responded', {
+      agentId: data().agentId, stepId: data().stepId, action: option.value,
+    })
+    props.onAction?.('feedback', payload)
   }
 
   return (
     <div class="space-y-3">
       <p class="text-sm text-gray-700 dark:text-gray-300">{data().question}</p>
-      <div class="flex flex-wrap gap-2">
-        <For each={data().options}>
-          {(option) => (
-            <button type="button" onClick={() => handleOption(option)}
-              class={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${
-                option.variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700'
-                : option.variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700'
-                : 'border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-              }`}>
-              <Show when={option.icon}><span>{option.icon}</span></Show>
-              {option.label}
-            </button>
-          )}
-        </For>
-      </div>
-      <Show when={data().allowFreeText || showComment()}>
-        <div class="flex gap-1">
-          <input type="text" value={comment()} onInput={(e) => setComment(e.currentTarget.value)}
-            placeholder={data().placeholder} autofocus={showComment()}
-            class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none" />
-          <button type="button" onClick={() => props.onAction?.('feedback', { option: 'comment', comment: comment() })}
-            class="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Send</button>
+
+      {/* Already submitted — show micro-badge */}
+      <Show when={submitted()}>
+        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+          <span classList={{
+            'text-green-600': submitted() === 'approve',
+            'text-red-600': submitted() === 'reject',
+            'text-blue-600': submitted() !== 'approve' && submitted() !== 'reject',
+          }}>
+            {submitted() === 'approve' ? '\u2705' : submitted() === 'reject' ? '\u274C' : '\uD83D\uDCAC'} {submitted()}
+          </span>
+          <Show when={comment()}>
+            <span class="italic">&mdash; {comment()}</span>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Buttons — hidden after submit */}
+      <Show when={!submitted()}>
+        <div class="flex flex-wrap gap-2">
+          <For each={data().options}>
+            {(option) => (
+              <button type="button" on:click={() => handleOption(option)}
+                class={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${
+                  option.variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700'
+                  : option.variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700'
+                  : 'border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                }`}>
+                <Show when={option.icon}><span>{option.icon}</span></Show>
+                {option.label}
+              </button>
+            )}
+          </For>
         </div>
+        <Show when={data().allowFreeText || showComment()}>
+          <div class="flex gap-1">
+            <input type="text" value={comment()} onInput={(e) => setComment(e.currentTarget.value)}
+              placeholder={data().placeholder} autofocus={showComment()}
+              class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none" />
+            <button type="button" on:click={() => { setSubmitted('comment'); props.onAction?.('feedback', { option: 'comment', comment: comment(), agentId: data().agentId, stepId: data().stepId }) }}
+              class="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Send</button>
+          </div>
+        </Show>
       </Show>
     </div>
   )

package/src/components/SplitStepper.tsx

@@ -0,0 +1,111 @@
+/**
+ * SplitStepper — parallel agent steppers side by side
+ * v4.1.0: AITL sprint — 2-3 columns, synthesis row at bottom
+ *
+ * @experimental
+ */
+
+import { For, Show } from 'solid-js'
+import type { SplitStepperContent } from '../types/chat-bus'
+
+export interface SplitStepperProps {
+  content: SplitStepperContent
+}
+
+const STEP_ICONS: Record<string, string> = {
+  done: '\u2705',
+  active: '\uD83D\uDD04',
+  pending: '\u23F3',
+  skipped: '\u23ED\uFE0F',
+  error: '\u274C',
+}
+
+const AGENT_STATUS_COLORS: Record<string, string> = {
+  done: 'border-green-400 dark:border-green-600',
+  active: 'border-blue-400 dark:border-blue-500',
+  pending: 'border-gray-300 dark:border-gray-600',
+  error: 'border-red-400 dark:border-red-600',
+}
+
+export function SplitStepper(props: SplitStepperProps) {
+  const c = () => props.content
+
+  if (typeof console !== 'undefined') {
+    console.info('[MCP-UI:SplitStepper] mounted', {
+      agents: c().agents.map(a => `${a.id}:${a.status}`),
+      synthesis: c().synthesis?.status,
+    })
+  }
+
+  return (
+    <div class="split-stepper">
+      {/* Agent columns */}
+      <div class="grid gap-3" style={{ "grid-template-columns": `repeat(${Math.min(c().agents.length, 3)}, 1fr)` }}>
+        <For each={c().agents}>
+          {(agent) => (
+            <div class={`rounded-lg border-2 ${AGENT_STATUS_COLORS[agent.status] || AGENT_STATUS_COLORS.pending} p-3`}>
+              {/* Agent header */}
+              <div class="flex items-center gap-2 mb-2">
+                <span class="font-medium text-sm text-gray-900 dark:text-white truncate">{agent.name}</span>
+                <span class={`w-2 h-2 rounded-full flex-shrink-0 ${
+                  agent.status === 'done' ? 'bg-green-500' :
+                  agent.status === 'active' ? 'bg-blue-500 animate-pulse' :
+                  agent.status === 'error' ? 'bg-red-500' :
+                  'bg-gray-400'
+                }`} />
+              </div>
+
+              {/* Steps */}
+              <div class="space-y-1">
+                <For each={agent.steps}>
+                  {(step) => (
+                    <div class="flex items-center gap-2 text-xs">
+                      <span class="flex-shrink-0 w-4 text-center">{STEP_ICONS[step.status] || STEP_ICONS.pending}</span>
+                      <span classList={{
+                        'text-gray-900 dark:text-white font-medium': step.status === 'active',
+                        'text-gray-500 dark:text-gray-400': step.status !== 'active',
+                        'line-through opacity-50': step.status === 'skipped',
+                      }}>
+                        {step.label}
+                      </span>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+
+      {/* Synthesis row */}
+      <Show when={c().synthesis}>
+        {(syn) => (
+          <div class={`mt-3 p-3 rounded-lg border-2 text-center ${
+            syn().status === 'done' ? 'border-green-400 dark:border-green-600 bg-green-50 dark:bg-green-900/10' :
+            syn().status === 'active' ? 'border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/10' :
+            'border-dashed border-gray-300 dark:border-gray-600'
+          }`}>
+            <div class="flex items-center justify-center gap-2 text-sm">
+              <Show when={syn().status === 'active'}>
+                <div class="w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+              </Show>
+              <Show when={syn().status === 'done'}>
+                <span>{STEP_ICONS.done}</span>
+              </Show>
+              <Show when={syn().status === 'pending'}>
+                <span class="text-gray-400">{STEP_ICONS.pending}</span>
+              </Show>
+              <span classList={{
+                'font-medium text-blue-700 dark:text-blue-300': syn().status === 'active',
+                'font-medium text-green-700 dark:text-green-300': syn().status === 'done',
+                'text-gray-500 dark:text-gray-400': syn().status === 'pending',
+              }}>
+                {syn().label}
+              </span>
+            </div>
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/components/index.ts

@@ -64,6 +64,19 @@ export type { CodeBlockRendererProps } from './CodeBlockRenderer'
 export { MapRenderer } from './MapRenderer'
 export type { MapRendererProps } from './MapRenderer'
 
+// Agent AITL (v4.1.0)
+export { AgentCard, AgentStatusBadge } from './AgentCard'
+export type { AgentCardProps, AgentStatusBadgeProps } from './AgentCard'
+
+export { SplitStepper } from './SplitStepper'
+export type { SplitStepperProps } from './SplitStepper'
+
+export { AgentHandoff } from './AgentHandoff'
+export type { AgentHandoffProps } from './AgentHandoff'
+
+export { BriefingDiff } from './BriefingDiff'
+export type { BriefingDiffProps } from './BriefingDiff'
+
 // Data Verification (v3.1.0 — anti-hallucination)
 export { VerifiedText } from './VerifiedText'
 export type { VerifiedTextProps } from './VerifiedText'

package/src/index.ts

@@ -48,6 +48,12 @@ export { dispatchScratchpad, useScratchpadState } from './stores/scratchpad-stor
 export { VerifiedText } from './components/VerifiedText'
 export { DataPreviewSection } from './components/DataPreviewSection'
 
+// Agent AITL Components (v4.1.0)
+export { AgentCard, AgentStatusBadge } from './components/AgentCard'
+export { SplitStepper } from './components/SplitStepper'
+export { AgentHandoff } from './components/AgentHandoff'
+export { BriefingDiff } from './components/BriefingDiff'
+
 // Autocomplete Components
 export { GhostText, GhostTextInput } from './components/GhostText'
 export { AutocompleteDropdown } from './components/AutocompleteDropdown'
@@ -68,6 +74,10 @@ export type { ChatPromptProps } from './components/ChatPrompt'
 export type { ScratchpadPanelProps } from './components/ScratchpadPanel'
 export type { VerifiedTextProps } from './components/VerifiedText'
 export type { DataPreviewSectionProps } from './components/DataPreviewSection'
+export type { AgentCardProps, AgentStatusBadgeProps } from './components/AgentCard'
+export type { SplitStepperProps } from './components/SplitStepper'
+export type { AgentHandoffProps } from './components/AgentHandoff'
+export type { BriefingDiffProps } from './components/BriefingDiff'
 export type { GhostTextProps, GhostTextInputProps } from './components/GhostText'
 export type { AutocompleteDropdownProps } from './components/AutocompleteDropdown'
 export type { AutocompleteFormFieldProps, AutocompleteFormFieldParams } from './components/AutocompleteFormField'
@@ -271,4 +281,9 @@ export type {
   DataPreviewColumn,
   DataPreviewContent,
   MapSectionContent,
+  // Agent AITL types (v4.1.0)
+  AgentCardContent,
+  SplitStepperContent,
+  AgentHandoffContent,
+  BriefingDiffContent,
 } from './types/chat-bus'