| import { useEffect, useRef, useState } from 'react' |
|
|
| import { AgentTrace } from './components/AgentTrace' |
| import { LatencyBreakdown } from './components/LatencyBreakdown' |
| import { useAgentStream } from './lib/useAgentStream' |
|
|
| const EXAMPLES = [ |
| 'Analyze Alphabet FY2024 revenue and how it relates to the competitive risks in the 10-K', |
| 'What was total revenue in FY2024?', |
| 'How is the company doing?', |
| ] |
|
|
| const SPEEDS = [ |
| { label: '1×', value: 1, hint: 'Real latency (~22s)' }, |
| { label: '5×', value: 5, hint: 'Compressed' }, |
| { label: '20×', value: 20, hint: 'Fast iteration' }, |
| ] |
|
|
| export default function App() { |
| const { state, send, cancel } = useAgentStream() |
| const [draft, setDraft] = useState(EXAMPLES[0]) |
| const [speed, setSpeed] = useState(5) |
| const [agentMode, setAgentMode] = useState<'live' | 'mock'>('mock') |
| const answerRef = useRef<HTMLDivElement>(null) |
| const streaming = state.status === 'streaming' |
|
|
| useEffect(() => { |
| void fetch('/api/health') |
| .then((res) => res.json()) |
| .then((body: { agent?: string }) => { |
| if (body.agent === 'live') setAgentMode('live') |
| }) |
| .catch(() => undefined) |
| }, []) |
|
|
| useEffect(() => { |
| answerRef.current?.scrollTo({ top: answerRef.current.scrollHeight }) |
| }, [state.answer]) |
|
|
| function submit() { |
| const query = draft.trim() |
| if (query && !streaming) void send(query, speed) |
| } |
|
|
| return ( |
| <div className="mx-auto flex h-full max-w-[1400px] flex-col gap-4 p-5"> |
| <header className="flex flex-wrap items-center gap-3"> |
| <div> |
| <h1 className="text-lg font-semibold tracking-tight text-slate-100"> |
| FinRAG |
| <span className="ml-2 text-sm font-normal text-slate-500"> |
| Agentic analysis of Alphabet Inc. |
| </span> |
| </h1> |
| </div> |
| <div className="ml-auto flex items-center gap-3"> |
| <span |
| className={`rounded-full border px-2.5 py-1 font-mono text-[11px] ${ |
| agentMode === 'live' |
| ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300' |
| : 'border-amber-400/30 bg-amber-400/10 text-amber-300' |
| }`} |
| > |
| {agentMode === 'live' ? 'live · RunPod' : 'mock agent'} |
| </span> |
| {agentMode === 'mock' && ( |
| <div className="flex items-center gap-1 rounded-lg border border-edge bg-panel p-1"> |
| {SPEEDS.map((option) => ( |
| <button |
| key={option.value} |
| type="button" |
| title={option.hint} |
| onClick={() => setSpeed(option.value)} |
| className={`rounded px-2 py-1 font-mono text-[11px] transition ${ |
| speed === option.value |
| ? 'bg-slate-700 text-slate-100' |
| : 'text-slate-500 hover:text-slate-300' |
| }`} |
| > |
| {option.label} |
| </button> |
| ))} |
| </div> |
| )} |
| </div> |
| </header> |
| |
| <div className="grid min-h-0 flex-1 gap-4 lg:grid-cols-[1fr_420px]"> |
| {/* --- Conversation ------------------------------------------------ */} |
| <main className="flex min-h-0 flex-col gap-3"> |
| <div className="flex min-h-0 flex-1 flex-col rounded-xl border border-edge bg-panel"> |
| {state.query && ( |
| <div className="border-b border-edge px-5 py-3.5"> |
| <p className="text-sm leading-relaxed text-slate-300">{state.query}</p> |
| </div> |
| )} |
| |
| <div ref={answerRef} className="min-h-0 flex-1 overflow-y-auto px-5 py-4"> |
| {state.status === 'idle' && ( |
| <div className="flex h-full flex-col items-center justify-center gap-4 text-center"> |
| <p className="max-w-sm text-sm leading-relaxed text-slate-500"> |
| Ask a question about Alphabet's filings. The supervisor graph plans, calls |
| tools, audits its own output, and replans when the audit fails. |
| </p> |
| <div className="flex flex-col gap-1.5"> |
| {EXAMPLES.map((example) => ( |
| <button |
| key={example} |
| type="button" |
| onClick={() => setDraft(example)} |
| className="max-w-md rounded-lg border border-edge px-3 py-2 text-left text-xs text-slate-400 transition hover:border-slate-600 hover:text-slate-200" |
| > |
| {example} |
| </button> |
| ))} |
| </div> |
| </div> |
| )} |
| |
| {state.clarification && ( |
| <div className="rounded-lg border border-sky-500/40 bg-sky-500/10 p-4"> |
| <p className="font-mono text-[10px] uppercase tracking-wider text-sky-300"> |
| Gatekeeper needs clarification |
| </p> |
| <p className="mt-2 text-sm leading-relaxed text-slate-200"> |
| {state.clarification} |
| </p> |
| </div> |
| )} |
| |
| {state.answer && ( |
| <div className="space-y-4"> |
| {state.answer.split('\n\n').map((para, i) => ( |
| <p key={i} className="text-sm leading-relaxed text-slate-200"> |
| {para} |
| {streaming && i === state.answer.split('\n\n').length - 1 && ( |
| <span className="ml-0.5 inline-block h-4 w-1.5 translate-y-0.5 animate-pulse bg-emerald-400" /> |
| )} |
| </p> |
| ))} |
| </div> |
| )} |
| |
| {streaming && !state.answer && !state.clarification && ( |
| <p className="text-xs text-slate-500"> |
| Working — first question after idle can take a few minutes while |
| the GPU worker starts. Watch the trace panel. |
| </p> |
| )} |
| |
| {state.errorMessage && ( |
| <div className="rounded-lg border border-rose-500/40 bg-rose-500/10 p-4"> |
| <p className="font-mono text-[10px] uppercase tracking-wider text-rose-300"> |
| Stream failed |
| </p> |
| <p className="mt-2 text-sm text-slate-300">{state.errorMessage}</p> |
| </div> |
| )} |
| </div> |
| </div> |
| |
| {/* --- Composer -------------------------------------------------- */} |
| <div className="rounded-xl border border-edge bg-panel p-2.5"> |
| <textarea |
| value={draft} |
| onChange={(event) => setDraft(event.target.value)} |
| onKeyDown={(event) => { |
| if (event.key === 'Enter' && !event.shiftKey) { |
| event.preventDefault() |
| submit() |
| } |
| }} |
| rows={2} |
| placeholder="Ask about revenue, margins, risk factors…" |
| className="w-full resize-none bg-transparent px-2 py-1.5 text-sm text-slate-200 placeholder:text-slate-600 focus:outline-none" |
| /> |
| <div className="flex items-center gap-2 px-1"> |
| <span className="font-mono text-[10px] text-slate-600"> |
| Enter to send · Shift+Enter for newline |
| </span> |
| {streaming ? ( |
| <button |
| type="button" |
| onClick={cancel} |
| className="ml-auto rounded-lg border border-edge px-3.5 py-1.5 text-xs font-medium text-slate-300 transition hover:border-rose-500/50 hover:text-rose-300" |
| > |
| Stop |
| </button> |
| ) : ( |
| <button |
| type="button" |
| onClick={submit} |
| disabled={!draft.trim()} |
| className="ml-auto rounded-lg bg-slate-100 px-3.5 py-1.5 text-xs font-semibold text-slate-900 transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-40" |
| > |
| Send |
| </button> |
| )} |
| </div> |
| </div> |
| </main> |
| |
| {/* --- Trace panel -------------------------------------------------- */} |
| <aside className="flex min-h-0 flex-col gap-3"> |
| <div className="flex min-h-0 flex-1 flex-col rounded-xl border border-edge bg-panel"> |
| <header className="flex items-center gap-2 border-b border-edge px-4 py-3"> |
| <h2 className="text-xs font-semibold uppercase tracking-wider text-slate-400"> |
| Agent trace |
| </h2> |
| {streaming && ( |
| <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" /> |
| )} |
| {state.runId && ( |
| <span className="ml-auto font-mono text-[10px] text-slate-600">{state.runId}</span> |
| )} |
| </header> |
| <div className="min-h-0 flex-1 overflow-y-auto p-4"> |
| <AgentTrace trace={state.trace} /> |
| </div> |
| </div> |
| {state.summary && <LatencyBreakdown summary={state.summary} />} |
| </aside> |
| </div> |
| </div> |
| ) |
| } |
|
|
