@skopon-cool/form-sdk 0.1.1 → 0.1.4

package/src/components/AskUserFormCard.tsx

@@ -1,20 +1,48 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Spin, Tooltip } from 'antd'
+import { Button, Spin, Tag, Tooltip } from 'antd'
 import type { FormDetailResult, FormSchema, SubmitMode } from '../types/index'
 import { buildAskUserSurface } from '../adapter/resolveSurface'
-import { buildCurlStatement } from '../submit/buildCurlStatement'
-import { intersectPayloadWithForm } from '../submit/intersectPayloadWithForm'
+import { buildAskUserCurlStatement } from '../submit/buildCurlStatement'
+import {
+  extractExtraBlockValues,
+  getPayloadInputFieldNames,
+  getPayloadRenderableBlocks,
+  intersectPayloadBlocksWithForm,
+  parsePayloadBlocksJson,
+  payloadHasInputBlocks,
+} from '../submit/intersectPayloadBlocksWithForm'
 import { copyTextToClipboard, submitFormJson } from '../submit/submitFormJson'
+import type { CaseSearchFn } from '../catalog/caseSearchContext'
+import type { ResumeSearchFn } from '../catalog/resumeSearchContext'
 import SkoponFormRenderer, { type SkoponFormRendererRef } from './SkoponFormRenderer'
 import CurlSubmitBlock from './CurlSubmitBlock'
 
+function formatSubmitErrorMessage(status: number, body: unknown): string {
+  if (body && typeof body === 'object' && body !== null && 'message' in body) {
+    const msg = (body as { message: unknown }).message
+    if (typeof msg === 'string' && msg.trim()) {
+      return `提交失败 (${status}): ${msg.trim()}`
+    }
+  }
+  if (typeof body === 'string' && body.trim()) {
+    return `提交失败 (${status}): ${body.trim()}`
+  }
+  return `提交失败 (${status})`
+}
+
 export interface AskUserFormCardProps {
   payload: unknown
-  formUniqueId: string
+  /** 可选；无则跳过拉取 vt_forms，仅用 payload blocks fallback */
+  formUniqueId?: string | null
   callbackUrl?: string | null
   submitMode?: SubmitMode
+  /** 需 useCallback 稳定引用，避免重复拉取 */
   fetchFormDetail: (ref: { formUniqueId: string }) => Promise<FormDetailResult>
   onNotify?: (type: 'success' | 'error', message: string) => void
+  /** 简历多选组件：注入搜索函数 */
+  resumeSearch?: ResumeSearchFn | null
+  /** 案例单选组件：注入搜索函数 */
+  caseSearch?: CaseSearchFn | null
 }
 
 export default function AskUserFormCard({
@@ -24,26 +52,52 @@ export default function AskUserFormCard({
   submitMode = 'curl',
   fetchFormDetail,
   onNotify,
+  resumeSearch = null,
+  caseSearch = null,
 }: AskUserFormCardProps) {
   const [formDef, setFormDef] = useState<FormSchema | null>(null)
   const [formDisabled, setFormDisabled] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
   const rendererRef = useRef<SkoponFormRendererRef>(null)
+  const mountedRef = useRef(true)
+  const onNotifyRef = useRef(onNotify)
+  onNotifyRef.current = onNotify
+
+  const resolvedFormUniqueId = formUniqueId?.trim() ?? ''
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
 
   useEffect(() => {
     let cancelled = false
+    if (!resolvedFormUniqueId) {
+      setLoading(false)
+      setFormDisabled(false)
+      setFormDef(null)
+      return () => {
+        cancelled = true
+      }
+    }
+
     setLoading(true)
     setFormDisabled(false)
-    fetchFormDetail({ formUniqueId })
+    fetchFormDetail({ formUniqueId: resolvedFormUniqueId })
       .then((detail) => {
         if (cancelled) return
         setFormDisabled(Boolean(detail.disabled))
-        setFormDef(detail.disabled ? null : detail.formDefinition ?? null)
+        setFormDef(detail.formDefinition ?? null)
       })
-      .catch(() => {
+      .catch((error) => {
         if (!cancelled) {
           setFormDisabled(false)
           setFormDef(null)
+          const detail = error instanceof Error ? error.message : '获取表单定义失败'
+          onNotifyRef.current?.('error', detail)
         }
       })
       .finally(() => {
@@ -52,25 +106,49 @@ export default function AskUserFormCard({
     return () => {
       cancelled = true
     }
-  }, [formUniqueId, fetchFormDetail])
+  }, [resolvedFormUniqueId, fetchFormDetail])
 
-  const { matchedBlocks, remainderPayload } = useMemo(
-    () => intersectPayloadWithForm(payload, formDef ?? undefined),
-    [payload, formDef],
-  )
+  const payloadDef = useMemo(() => parsePayloadBlocksJson(payload), [payload])
+
+  const intersection = useMemo(() => {
+    if (!payloadDef) return null
+    return intersectPayloadBlocksWithForm(payloadDef, formDef ?? undefined)
+  }, [payloadDef, formDef])
+
+  const matchedBlocks = intersection?.matchedBlocks ?? []
+  const usePayloadFallback =
+    Boolean(payloadDef && payloadHasInputBlocks(payloadDef) && matchedBlocks.length === 0)
 
-  const fieldNames = useMemo(
-    () =>
-      matchedBlocks
-        .map((block) => block.name?.trim())
-        .filter((name): name is string => Boolean(name)),
-    [matchedBlocks],
+  const renderBlocks = useMemo(() => {
+    if (intersection && intersection.renderBlocks.length > 0) {
+      return intersection.renderBlocks
+    }
+    if (usePayloadFallback && payloadDef) return getPayloadRenderableBlocks(payloadDef)
+    return []
+  }, [intersection, usePayloadFallback, payloadDef])
+
+  const extraValues = useMemo(
+    () => (usePayloadFallback ? {} : extractExtraBlockValues(intersection?.extraBlocks ?? [])),
+    [usePayloadFallback, intersection],
   )
 
+  const fieldNames = useMemo(() => {
+    if (usePayloadFallback && payloadDef) return getPayloadInputFieldNames(payloadDef)
+    return renderBlocks
+      .filter((block) => block.name?.trim())
+      .map((block) => block.name!.trim())
+  }, [usePayloadFallback, payloadDef, renderBlocks])
+
   const surfaceDoc = useMemo(() => {
-    if (!formDef || matchedBlocks.length === 0) return null
-    return buildAskUserSurface(formDef, matchedBlocks)
-  }, [formDef, matchedBlocks])
+    if (renderBlocks.length === 0) return null
+    const title = intersection?.title ?? payloadDef?.title ?? ''
+    const description = intersection?.description ?? payloadDef?.description ?? ''
+    return buildAskUserSurface({ title, description }, renderBlocks)
+  }, [intersection, payloadDef, renderBlocks])
+
+  const surfaceId = resolvedFormUniqueId
+    ? `ask-user-${resolvedFormUniqueId}`
+    : 'ask-user-payload'
 
   if (loading) {
     return (
@@ -80,76 +158,86 @@ export default function AskUserFormCard({
     )
   }
 
-  if (matchedBlocks.length === 0) {
+  if (!payloadDef || renderBlocks.length === 0) {
     return (
       <CurlSubmitBlock
         payload={payload}
         callbackUrl={callbackUrl}
-        unpublishedFormId={formDisabled ? formUniqueId : undefined}
+        unpublishedFormId={formDisabled && resolvedFormUniqueId ? resolvedFormUniqueId : undefined}
         onNotify={onNotify}
       />
     )
   }
 
-  const hasRemainder = Object.keys(remainderPayload).length > 0
-
   async function handleSubmit() {
-    const values = rendererRef.current?.getValues(fieldNames) ?? {}
-    if (submitMode === 'post') {
-      const url = (callbackUrl ?? '').trim()
-      if (!url) {
-        onNotify?.('error', 'callback_url 为空，无法提交')
-        return
-      }
-      try {
-        const result = await submitFormJson(url, values)
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      const cardValues = rendererRef.current?.getValues(fieldNames) ?? {}
+      const submitBody = { ...cardValues, ...extraValues }
+
+      if (submitMode === 'post') {
+        const url = (callbackUrl ?? '').trim()
+        if (!url) {
+          onNotifyRef.current?.('error', 'callback_url 为空，无法提交')
+          return
+        }
+        const result = await submitFormJson(url, submitBody)
+        if (!mountedRef.current) return
         if (result.ok) {
-          onNotify?.('success', '提交成功')
+          onNotifyRef.current?.('success', '提交成功')
         } else {
-          onNotify?.('error', `提交失败 (${result.status})`)
+          onNotifyRef.current?.('error', formatSubmitErrorMessage(result.status, result.body))
         }
-      } catch (error) {
-        const detail = error instanceof Error ? error.message : '提交失败'
-        onNotify?.('error', detail)
+        return
       }
-      return
-    }
 
-    try {
-      await copyTextToClipboard(buildCurlStatement(values, callbackUrl))
-      onNotify?.('success', '已复制 curl 到剪贴板')
-    } catch {
-      onNotify?.('error', '复制失败')
+      await copyTextToClipboard(
+        buildAskUserCurlStatement({ cardValues, extraValues, callbackUrl }),
+      )
+      if (!mountedRef.current) return
+      onNotifyRef.current?.('success', '已复制 curl 到剪贴板')
+    } catch (error) {
+      if (!mountedRef.current) return
+      const detail = error instanceof Error ? error.message : '复制失败'
+      onNotifyRef.current?.('error', detail)
+    } finally {
+      if (mountedRef.current) setSubmitting(false)
     }
   }
 
   return (
     <div className="ask-user-form-card">
+      {formDisabled && resolvedFormUniqueId ? (
+        <div className="ask-user-form-card-status">
+          <Tooltip title={resolvedFormUniqueId}>
+            <Tag className="ask-user-curl-unpublished-tag">卡片 ID 未发布</Tag>
+          </Tooltip>
+        </div>
+      ) : null}
       <SkoponFormRenderer
         ref={rendererRef}
         doc={surfaceDoc}
-        surfaceId={`ask-user-${formUniqueId}`}
+        surfaceId={surfaceId}
         fieldNames={fieldNames}
         interactive
+        resumeSearch={resumeSearch}
+        caseSearch={caseSearch}
       />
 
       <div className="ask-user-form-actions">
         <Tooltip title={submitMode === 'curl' ? '点击复制 curl' : '提交 JSON 到 callback_url'}>
-          <Button type="primary" size="small" onClick={() => void handleSubmit()}>
+          <Button
+            type="primary"
+            size="small"
+            loading={submitting}
+            disabled={submitting}
+            onClick={() => void handleSubmit()}
+          >
             提交
           </Button>
         </Tooltip>
       </div>
-
-      {hasRemainder ? (
-        <CurlSubmitBlock
-          payload={remainderPayload}
-          callbackUrl={callbackUrl}
-          title="以下字段不在表单中，请使用 curl 提交"
-          incompleteFormId={formUniqueId}
-          onNotify={onNotify}
-        />
-      ) : null}
     </div>
   )
 }

package/src/components/SkoponA2uiStreamRenderer.test.ts

@@ -0,0 +1,78 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, it, expect } from 'vitest'
+import { MessageProcessor, type A2uiMessage } from '@a2ui/web_core/v0_9'
+import type { ReactComponentImplementation } from '@a2ui/react/v0_9'
+import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
+import { buildSkoponCatalog, SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
+
+function createProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return new MessageProcessor([buildSkoponCatalog()])
+}
+
+function buildStreamMessages(surfaceId: string, label = '姓名'): A2uiMessage[] {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label }],
+    },
+    { includeHeader: false },
+  )
+  return surfaceDocToMessages(doc, { surfaceId, catalogId: SKOPON_CATALOG_ID }) as unknown as A2uiMessage[]
+}
+
+/** 与 SkoponA2uiStreamRenderer 在 messages 清空时的 reset 行为一致。 */
+function resetStreamProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return createProcessor()
+}
+
+describe('SkoponA2uiStreamRenderer stream lifecycle', () => {
+  it('processes incremental messages into surfaces', () => {
+    const surfaceId = 'stream-test'
+    const messages = buildStreamMessages(surfaceId)
+    const processor = createProcessor()
+    processor.processMessages(messages)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+  })
+
+  it('clears surfaces when stream messages are reset to empty', () => {
+    const surfaceId = 'stream-clear'
+    const messages = buildStreamMessages(surfaceId)
+    let processor = createProcessor()
+    processor.processMessages(messages)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+
+    processor = resetStreamProcessor()
+    expect(processor.model.surfacesMap.size).toBe(0)
+  })
+
+  it('rebuilds processor when message count shrinks', () => {
+    const surfaceId = 'stream-shrink'
+    const messages = buildStreamMessages(surfaceId)
+    const processor = createProcessor()
+    processor.processMessages(messages)
+    const countAfterFull = processor.model.surfacesMap.size
+
+    const rebuilt = createProcessor()
+    rebuilt.processMessages(messages.slice(0, 1))
+    expect(rebuilt.model.surfacesMap.size).toBeLessThanOrEqual(countAfterFull)
+  })
+
+  it('rebuilds processor when message count is unchanged but content replaced', () => {
+    const surfaceId = 'stream-same-len'
+    const messagesA = buildStreamMessages(surfaceId, '姓名')
+    const messagesB = buildStreamMessages(surfaceId, '昵称')
+    expect(messagesA.length).toBe(messagesB.length)
+
+    const processor = createProcessor()
+    processor.processMessages(messagesA)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+
+    const rebuilt = createProcessor()
+    rebuilt.processMessages(messagesB)
+    expect(rebuilt.model.surfacesMap.size).toBeGreaterThan(0)
+    expect(JSON.stringify(messagesA)).not.toBe(JSON.stringify(messagesB))
+  })
+})

package/src/components/SkoponA2uiStreamRenderer.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
+
+vi.mock('@a2ui/web_core/v0_9/basic_catalog', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@a2ui/web_core/v0_9/basic_catalog')>()
+  return { ...actual, injectBasicCatalogStyles: vi.fn() }
+})
+
+vi.mock('@a2ui/react/styles', () => ({
+  injectStyles: vi.fn(),
+  removeStyles: vi.fn(),
+}))
+
+import { createElement } from 'react'
+import { render, cleanup } from '@testing-library/react'
+import type { A2uiMessage } from '@a2ui/web_core/v0_9'
+import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
+import { SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
+import SkoponA2uiStreamRenderer from './SkoponA2uiStreamRenderer'
+
+function buildStreamMessages(surfaceId: string, label = '姓名'): A2uiMessage[] {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label }],
+    },
+    { includeHeader: false },
+  )
+  return surfaceDocToMessages(doc, { surfaceId, catalogId: SKOPON_CATALOG_ID }) as unknown as A2uiMessage[]
+}
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+describe('SkoponA2uiStreamRenderer component', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('mounts with empty messages without infinite update loop', () => {
+    expect(() =>
+      render(
+        createElement(SkoponA2uiStreamRenderer, {
+          messages: [],
+          emptyHint: createElement('span', null, 'stream-empty'),
+        }),
+      ),
+    ).not.toThrow()
+  })
+
+  it('reprocesses messages when surfaceId changes', () => {
+    const surfaceA = 'stream-a'
+    const surfaceB = 'stream-b'
+    const messages = buildStreamMessages(surfaceA)
+    const { rerender, getByText, queryByText } = render(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages,
+        surfaceId: surfaceA,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages,
+        surfaceId: surfaceB,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+    expect(queryByText('stream-empty')).toBeNull()
+  })
+
+  it('reprocesses messages when stream content is replaced at same length', () => {
+    const surfaceId = 'stream-replace'
+    const messagesA = buildStreamMessages(surfaceId, '姓名')
+    const messagesB = buildStreamMessages(surfaceId, '昵称')
+    expect(messagesA.length).toBe(messagesB.length)
+
+    const { rerender, getByText, queryByText } = render(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages: messagesA,
+        surfaceId,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages: messagesB,
+        surfaceId,
+      }),
+    )
+    expect(getByText('昵称')).toBeTruthy()
+    expect(queryByText('姓名')).toBeNull()
+  })
+})

package/src/components/SkoponA2uiStreamRenderer.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { MessageProcessor, type A2uiMessage } from '@a2ui/web_core/v0_9'
 import { injectBasicCatalogStyles } from '@a2ui/web_core/v0_9/basic_catalog'
 import { A2uiSurface, type ReactComponentImplementation } from '@a2ui/react/v0_9'
 import { injectStyles } from '@a2ui/react/styles'
 import { buildSkoponCatalog } from '../catalog/a2uiCustomCatalog'
 import { A2uiPreviewModeProvider } from '../catalog/a2uiPreviewContext'
+import { CaseSearchProvider, type CaseSearchFn } from '../catalog/caseSearchContext'
+import { ResumeSearchProvider, type ResumeSearchFn } from '../catalog/resumeSearchContext'
 
 export interface SkoponA2uiStreamRendererProps {
   /** 增量追加的 A2UI v0.9 消息 */
@@ -12,6 +14,14 @@ export interface SkoponA2uiStreamRendererProps {
   surfaceId?: string
   emptyHint?: ReactNode
   interactive?: boolean
+  /** 简历多选组件：注入搜索函数 */
+  resumeSearch?: ResumeSearchFn | null
+  /** 案例单选组件：注入搜索函数 */
+  caseSearch?: CaseSearchFn | null
+}
+
+function createProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return new MessageProcessor([buildSkoponCatalog()])
 }
 
 export default function SkoponA2uiStreamRenderer({
@@ -19,26 +29,66 @@ export default function SkoponA2uiStreamRenderer({
   surfaceId = 'skopon-form-stream',
   emptyHint = null,
   interactive = true,
+  resumeSearch = null,
+  caseSearch = null,
 }: SkoponA2uiStreamRendererProps) {
   useEffect(() => {
     injectStyles()
     injectBasicCatalogStyles()
   }, [])
 
-  const processorRef = useRef<MessageProcessor<ReactComponentImplementation> | null>(null)
+  const processorRef = useRef<MessageProcessor<ReactComponentImplementation>>(createProcessor())
   const processedCountRef = useRef(0)
+  const lastProcessedMessagesRef = useRef('')
+  const mountedRef = useRef(true)
+  const surfaceIdRef = useRef(surfaceId)
+
+  function commitProcessor(
+    next: MessageProcessor<ReactComponentImplementation>,
+    processedMessages: A2uiMessage[],
+  ) {
+    processorRef.current = next
+    processedCountRef.current = processedMessages.length
+    lastProcessedMessagesRef.current = JSON.stringify(processedMessages)
+    if (!mountedRef.current) return
+    setProcessor(next)
+    setSurfaces(Array.from(next.model.surfacesMap.values()))
+  }
+
+  function processedPrefixChanged(messages: A2uiMessage[], prefixLen: number): boolean {
+    if (prefixLen <= 0) return false
+    const newPrefix = JSON.stringify(messages.slice(0, prefixLen))
+    const stored = lastProcessedMessagesRef.current
+    if (!stored) return true
+    try {
+      const parsed = JSON.parse(stored) as A2uiMessage[]
+      return JSON.stringify(parsed.slice(0, prefixLen)) !== newPrefix
+    } catch {
+      return true
+    }
+  }
+
+  const [processor, setProcessor] = useState(() => processorRef.current)
+  const [surfaces, setSurfaces] = useState(() =>
+    Array.from(processorRef.current.model.surfacesMap.values()),
+  )
 
-  const processor = useMemo(() => {
-    const p = new MessageProcessor([buildSkoponCatalog()])
-    processorRef.current = p
-    processedCountRef.current = 0
-    return p
-  }, [surfaceId])
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
 
-  const [surfaces, setSurfaces] = useState(() => Array.from(processor.model.surfacesMap.values()))
+  useEffect(() => {
+    processorRef.current = processor
+  }, [processor])
 
   useEffect(() => {
-    const sync = () => setSurfaces(Array.from(processor.model.surfacesMap.values()))
+    const sync = () => {
+      if (!mountedRef.current) return
+      setSurfaces(Array.from(processor.model.surfacesMap.values()))
+    }
     const createdSub = processor.onSurfaceCreated(sync)
     const deletedSub = processor.onSurfaceDeleted(sync)
     return () => {
@@ -48,23 +98,91 @@ export default function SkoponA2uiStreamRenderer({
   }, [processor])
 
   useEffect(() => {
-    if (!Array.isArray(messages) || messages.length === 0) return
-    const pending = messages.slice(processedCountRef.current)
-    if (pending.length === 0) return
-    processor.processMessages(pending)
+    let cancelled = false
+    const surfaceIdChanged = surfaceIdRef.current !== surfaceId
+    surfaceIdRef.current = surfaceId
+
+    if (surfaceIdChanged) {
+      const next = createProcessor()
+      if (Array.isArray(messages) && messages.length > 0) {
+        next.processMessages(messages)
+        if (!cancelled) commitProcessor(next, messages)
+      } else {
+        processorRef.current = next
+        processedCountRef.current = 0
+        lastProcessedMessagesRef.current = ''
+        if (!cancelled) {
+          setProcessor(next)
+          setSurfaces([])
+        }
+      }
+      return () => {
+        cancelled = true
+      }
+    }
+
+    if (!Array.isArray(messages) || messages.length === 0) {
+      if (processedCountRef.current > 0) {
+        const next = createProcessor()
+        processorRef.current = next
+        processedCountRef.current = 0
+        lastProcessedMessagesRef.current = ''
+        if (!cancelled) {
+          setProcessor(next)
+          setSurfaces([])
+        }
+      }
+      return () => {
+        cancelled = true
+      }
+    }
+
+    const activeProcessor = processorRef.current
+    const processedCount = processedCountRef.current
+
+    if (
+      messages.length < processedCount ||
+      processedPrefixChanged(messages, processedCount)
+    ) {
+      const next = createProcessor()
+      next.processMessages(messages)
+      if (!cancelled) commitProcessor(next, messages)
+      return () => {
+        cancelled = true
+      }
+    }
+
+    const pending = messages.slice(processedCount)
+    if (pending.length === 0) {
+      return () => {
+        cancelled = true
+      }
+    }
+    activeProcessor.processMessages(pending)
     processedCountRef.current = messages.length
-    setSurfaces(Array.from(processor.model.surfacesMap.values()))
-  }, [messages, processor])
+    lastProcessedMessagesRef.current = JSON.stringify(messages)
+    if (!cancelled) {
+      setSurfaces(Array.from(activeProcessor.model.surfacesMap.values()))
+    }
+
+    return () => {
+      cancelled = true
+    }
+  }, [messages, surfaceId])
 
   if (surfaces.length === 0) return <>{emptyHint}</>
 
   return (
-    <A2uiPreviewModeProvider interactive={interactive}>
-      <div className="a2ui-surface a2ui-container">
-        {surfaces.map((surface) => (
-          <A2uiSurface key={surface.id} surface={surface} />
-        ))}
-      </div>
-    </A2uiPreviewModeProvider>
+    <ResumeSearchProvider resumeSearch={resumeSearch}>
+      <CaseSearchProvider caseSearch={caseSearch}>
+        <A2uiPreviewModeProvider interactive={interactive}>
+          <div className="a2ui-surface a2ui-container">
+            {surfaces.map((surface) => (
+              <A2uiSurface key={surface.id} surface={surface} />
+            ))}
+          </div>
+        </A2uiPreviewModeProvider>
+      </CaseSearchProvider>
+    </ResumeSearchProvider>
   )
 }