Function SimulatorPage

testing/panel/src/routes/simulator.tsx:537–648

()

}

function SimulatorPage() {
  const [chunks, setChunks] = useState<Array<any>>([])
  const [input, setInput] = useState('')

  const { messages, sendMessage, isLoading, addToolApprovalResponse, stop } =
    useChat({
      connection: fetchServerSentEvents('/api/simulator-chat'),
      tools,
      onChunk: (chunk: any) => {
        setChunks((prev) => [...prev, chunk])
      },
    })

  const clearChunks = () => setChunks([])

  const handleInject = (template: string) => {
    setInput((prev) => (prev ? `${prev}\n${template}` : template))
  }

  return (
    <div className="flex h-[calc(100vh-72px)] bg-gray-900">
      {/* Left side - Chat (1/2 width) */}
      <div className="w-1/2 flex flex-col border-r border-purple-500/20">
        {/* Header bar */}
        <div className="border-b border-purple-500/20 bg-gray-800 px-4 py-3">
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2">
              <FlaskConical className="w-5 h-5 text-purple-400" />
              <h1 className="text-white font-semibold">Tool Simulator</h1>
            </div>
            <span className="text-xs px-2 py-1 bg-purple-500/20 text-purple-400 rounded">
              Mock LLM
            </span>
          </div>
          <p className="text-gray-400 text-xs mt-1">
            Test tool execution flows with a simulated LLM. Use the syntax:{' '}
            <code className="bg-gray-700 px-1 rounded">
              toolName({'{ args }'})
            </code>
          </p>
        </div>

        <Messages
          messages={messages}
          addToolApprovalResponse={addToolApprovalResponse}
        />

        <ToolInjectionPanel onInject={handleInject} />

        <ChatInputArea>
          <div className="space-y-3">
            {isLoading && (
              <div className="flex items-center justify-center">
                <button
                  onClick={stop}
                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                >
                  <Square className="w-4 h-4 fill-current" />