@seed-ship/mcp-ui-solid 4.0.5 → 4.1.0

package/src/components/BriefingDiff.tsx

@@ -0,0 +1,93 @@
+/**
+ * BriefingDiff — highlight changes between two briefings
+ * v4.1.0: AITL sprint — added/removed/changed entries with color coding
+ *
+ * @experimental
+ */
+
+import { For, Show } from 'solid-js'
+import type { BriefingDiffContent } from '../types/chat-bus'
+
+export interface BriefingDiffProps {
+  content: BriefingDiffContent
+}
+
+const CHANGE_CONFIG: Record<string, { icon: string; color: string; bg: string }> = {
+  added: { icon: '+', color: 'text-green-700 dark:text-green-300', bg: 'bg-green-50 dark:bg-green-900/10' },
+  removed: { icon: '\u2212', color: 'text-red-700 dark:text-red-300', bg: 'bg-red-50 dark:bg-red-900/10' },
+  changed: { icon: '\u2194', color: 'text-amber-700 dark:text-amber-300', bg: 'bg-amber-50 dark:bg-amber-900/10' },
+}
+
+export function BriefingDiff(props: BriefingDiffProps) {
+  const c = () => props.content
+
+  if (typeof console !== 'undefined') {
+    console.info('[MCP-UI:BriefingDiff] mounted', {
+      changes: c().changes.length,
+      stats: c().stats,
+    })
+  }
+
+  return (
+    <div class="briefing-diff space-y-2">
+      {/* Header */}
+      <Show when={c().title || c().previousDate || c().currentDate}>
+        <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+          <Show when={c().title}><span class="font-medium">{c().title}</span></Show>
+          <Show when={c().previousDate && c().currentDate}>
+            <span>{c().previousDate} &rarr; {c().currentDate}</span>
+          </Show>
+        </div>
+      </Show>
+
+      {/* Stats summary */}
+      <Show when={c().stats}>
+        {(stats) => (
+          <div class="flex items-center gap-3 text-xs">
+            <Show when={stats().added > 0}>
+              <span class="text-green-600 dark:text-green-400">+{stats().added} added</span>
+            </Show>
+            <Show when={stats().removed > 0}>
+              <span class="text-red-600 dark:text-red-400">{stats().removed} removed</span>
+            </Show>
+            <Show when={stats().changed > 0}>
+              <span class="text-amber-600 dark:text-amber-400">{stats().changed} changed</span>
+            </Show>
+          </div>
+        )}
+      </Show>
+
+      {/* Change list */}
+      <div class="space-y-1">
+        <For each={c().changes}>
+          {(change) => {
+            const cfg = CHANGE_CONFIG[change.type] || CHANGE_CONFIG.changed
+            return (
+              <div class={`flex items-start gap-2 px-2 py-1.5 rounded ${cfg.bg}`}>
+                <span class={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${cfg.color}`}>
+                  {cfg.icon}
+                </span>
+                <div class="flex-1 min-w-0">
+                  <span class={`text-sm font-medium ${cfg.color}`}>{change.label}</span>
+                  <Show when={change.type === 'changed' && change.previous && change.current}>
+                    <div class="mt-0.5 text-xs">
+                      <span class="text-red-500 line-through">{change.previous}</span>
+                      <span class="mx-1 text-gray-400">&rarr;</span>
+                      <span class="text-green-600 dark:text-green-400">{change.current}</span>
+                    </div>
+                  </Show>
+                  <Show when={change.type === 'added' && change.current}>
+                    <div class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">{change.current}</div>
+                  </Show>
+                  <Show when={change.type === 'removed' && change.previous}>
+                    <div class="mt-0.5 text-xs text-gray-500 line-through">{change.previous}</div>
+                  </Show>
+                </div>
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}

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/UIResourceRenderer.tsx

@@ -645,7 +645,7 @@ function TableRenderer(props: {
                         scope="col"
                         class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 first:pl-6 last:pr-6 bg-gray-50 dark:bg-gray-900/50 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors"
                         style={column.width ? { width: column.width } : {}}
-                        onClick={() => handleSort(column.key)}
+                        on:click={() => handleSort(column.key)}
                         title={`Sort by ${column.label}`}
                       >
                         <span class="inline-flex items-center gap-1">

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'

package/src/types/chat-bus.ts

@@ -111,6 +111,10 @@ export interface ChatCommands {
   /** Change the chat mode */
   setMode: (mode: string) => void
 
+  // --- Agents (v4.1.0) ---
+  /** Trigger an agent from the chat (replaces /macro command) */
+  triggerAgent: (agentId: string, params?: Record<string, unknown>) => void
+
   // --- UI ---
   /** Scroll to a specific message */
   scrollToMessage: (messageId: string) => void
@@ -366,7 +370,7 @@ export interface ScratchpadState {
 export interface ScratchpadSection {
   id: string
   title: string
-  type: 'data' | 'filter' | 'preview' | 'message' | 'action' | 'steps' | 'form' | 'understanding' | 'feedback' | 'prompt' | 'stepper' | 'error' | 'source_card' | 'diff' | 'verified_text' | 'data_preview' | 'map' | 'chart'
+  type: 'data' | 'filter' | 'preview' | 'message' | 'action' | 'steps' | 'form' | 'understanding' | 'feedback' | 'prompt' | 'stepper' | 'error' | 'source_card' | 'diff' | 'verified_text' | 'data_preview' | 'map' | 'chart' | 'agent_card' | 'split_stepper' | 'agent_handoff' | 'briefing_diff'
   content: unknown
   /** Can the human edit this section? */
   editable: boolean
@@ -541,3 +545,68 @@ export interface MapSectionContent {
   /** Map height (CSS, default: '300px') */
   height?: string
 }
+
+// ─── Agent section types (v4.1.0 — AITL sprint) ────────────
+
+/** Content for agent_card scratchpad section */
+export interface AgentCardContent {
+  agentId: string
+  name: string
+  /** Avatar icon key (e.g. 'scales', 'chart', 'search') or emoji */
+  avatar?: string
+  status: 'idle' | 'running' | 'waiting' | 'done' | 'error'
+  /** Agent capabilities as string badges */
+  capabilities?: string[]
+  /** LLM model used */
+  model?: string
+  /** Current step info (shown when running) */
+  currentStep?: { id: string; label: string }
+}
+
+/** Content for split_stepper scratchpad section (parallel agents) */
+export interface SplitStepperContent {
+  agents: Array<{
+    id: string
+    name: string
+    steps: Array<{ id: string; label: string; status: 'done' | 'active' | 'pending' | 'skipped' | 'error' }>
+    status: 'done' | 'active' | 'pending' | 'error'
+  }>
+  /** Final synthesis step (activates when all agents are done) */
+  synthesis?: {
+    status: 'done' | 'active' | 'pending'
+    label: string
+  }
+}
+
+/** Content for agent_handoff scratchpad section */
+export interface AgentHandoffContent {
+  from: { id: string; name: string; avatar?: string }
+  to: { id: string; name: string; avatar?: string }
+  /** Data keys transferred */
+  dataKeys?: string[]
+  /** Summary of what was transferred */
+  summary?: string
+  /** Count of items transferred */
+  itemCount?: number
+}
+
+/** Content for briefing_diff scratchpad section */
+export interface BriefingDiffContent {
+  /** Title of the comparison */
+  title?: string
+  /** When was the previous version */
+  previousDate?: string
+  /** When is the current version */
+  currentDate?: string
+  /** List of changes */
+  changes: Array<{
+    type: 'added' | 'removed' | 'changed'
+    label: string
+    /** Previous value (for 'changed' and 'removed') */
+    previous?: string
+    /** Current value (for 'changed' and 'added') */
+    current?: string
+  }>
+  /** Summary stats */
+  stats?: { added: number; removed: number; changed: number }
+}