forked from bots-garden/ori
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 1 | /** |
| 2 | * Root component: header with connection/session status, the conversation | |
| 3 | * thread, and the composer. The WebSocket is injected so tests (and future | |
| 4 | * embeddings) can supply a fake. | |
| 5 | * | |
| 6 | * @example | |
| 7 | * <App socket={connectSocket({ url: wsUrl(), dispatch })} /> | |
| 8 | */ | |
| 9 | ||
| 10 | import type { OriSocket } from "./ws"; | |
| 11 | import { useChatState } from "./store"; | |
| 12 | import { ChatThread } from "./components/ChatThread"; | |
| 13 | import { PermissionPrompt } from "./components/PermissionPrompt"; | |
| 14 | import { PlanView } from "./components/PlanView"; | |
| 15 | import { PromptInput } from "./components/PromptInput"; | |
| 16 | ||
| 17 | export function App({ socket }: { socket: OriSocket }) { | |
| 18 | const state = useChatState(); | |
| 19 | ||
| 20 | return ( | |
| 21 | <div className="app"> | |
| 22 | <header className="topbar"> | |
| 23 | <h1 className="topbar-title">Ori</h1> | |
| 24 | <span className={`status status-${state.connection}`}> | |
| 25 | {state.connection} | |
| 26 | {state.sessionId ? ` · ${state.sessionId}` : ""} | |
| 27 | </span> | |
| 28 | </header> | |
| 29 | <ChatThread thread={state.thread} turnActive={state.turnActive} /> | |
| 30 | <PlanView entries={state.plan} /> | |
| 31 | {state.permissions.map((request) => ( | |
| 32 | <PermissionPrompt | |
| 33 | key={request.requestId} | |
| 34 | request={request} | |
| 35 | onRespond={(requestId, optionId) => | |
| 36 | socket.send({ type: "permission_response", requestId, optionId }) | |
| 37 | } | |
| 38 | /> | |
| 39 | ))} | |
| 40 | <PromptInput | |
| 41 | turnActive={state.turnActive} | |
| 42 | onSend={(text) => socket.send({ type: "prompt", text })} | |
| 43 | onCancel={() => socket.send({ type: "cancel" })} | |
| 44 | /> | |
| 45 | </div> | |
| 46 | ); | |
| 47 | } |