Function TestPanel

testing/panel/src/routes/stream-debugger.tsx:44–629

()

}

function TestPanel() {
  const searchParams = useSearch({ from: '/stream-debugger' })
  const [recording, setRecording] = useState<ChunkRecording | null>(null)
  const [currentChunkIndex, setCurrentChunkIndex] = useState(-1)
  const [uiMessage, setUIMessage] = useState<UIMessage | null>(null)
  const [result, setResult] = useState<ProcessorResult | null>(null)
  const [isDragging, setIsDragging] = useState(false)
  const [selectedSample, setSelectedSample] = useState<string>('')
  const [copied, setCopied] = useState(false)
  const [recordedTraces, setRecordedTraces] = useState<Array<RecordedTrace>>([])
  const fileInputRef = useRef<HTMLInputElement>(null)

  // Processor ref for step-through mode
  const processorRef = useRef<StreamProcessor | null>(null)

  const sampleOptions = useMemo(() => Object.keys(sampleTraces), [])

  // Function to fetch recorded traces
  const fetchRecordedTraces = useCallback(() => {
    fetch('/api/list-traces')
      .then((res) => res.json())
      .then((data) => {
        if (data.traces) {
          setRecordedTraces(data.traces)
        }
      })
      .catch((error) => {
        console.error('[TestPanel] Failed to load trace list:', error)
      })
  }, [])

  // Fetch recorded traces on mount
  useEffect(() => {
    fetchRecordedTraces()
  }, [fetchRecordedTraces])

  const resetState = useCallback(() => {
    setCurrentChunkIndex(-1)
    setUIMessage(null)
    setResult(null)
    processorRef.current = null
  }, [])

  const createProcessor = useCallback(() => {
    const processor = new StreamProcessor({
      events: {
        onMessagesChange: (messages: Array<UIMessage>) => {
          // Get the assistant message (should be the last one)
          const assistantMessage = messages.find((m) => m.role === 'assistant')
          if (assistantMessage) {
            setUIMessage(assistantMessage)
          }
        },
        onStreamEnd: (message: UIMessage) => {
          // Get text content from parts
          const textParts = message.parts.filter((p) => p.type === 'text')
          const content = textParts.map((p) => (p as any).content).join('')