| import { useEffect, useMemo, useRef } from 'react'; |
| import type { AgentEvent, JobState, RunResult } from '../types'; |
| import { useI18n, type MsgKey, type TFn } from '../i18n'; |
|
|
| const STEPS = ['plan', 'implement', 'verify', 'fix', 'evaluate'] as const; |
|
|
| function runSummary(r: RunResult, t: TFn, pct: (v: number | null | undefined) => string): string { |
| if (r.timed_out) return t('flow.timeout'); |
| if (!r.compiled) return t('flow.compileErr'); |
| return t('flow.runSummary', { p: r.passed, t: r.total, cov: pct(r.coverage.percent) }); |
| } |
|
|
| function Item({ e }: { e: AgentEvent }) { |
| const { t, pct, num, evTitle, pick } = useI18n(); |
| const d = e.data; |
| const title = evTitle(e); |
| if (e.type === 'phase') { |
| const n = STEPS.findIndex((s) => s === e.phase) + 1; |
| return ( |
| <li className="tl-item phase"> |
| <span className="tl-glyph" aria-hidden>{n || '•'}</span> |
| <div> |
| <div className="tl-title">{title}</div> |
| {d.agent && <div className="tl-meta">{t('flow.agent', { a: pick(d.agent_i18n, d.agent) })}</div>} |
| {d.reason && <div className="tl-meta">{t('flow.reason', { r: pick(d.reason_i18n, d.reason) })}</div>} |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'tool_call' && d.tool === 'write_tests') { |
| return ( |
| <li className="tl-item"> |
| <span className="tl-glyph" aria-hidden>✎</span> |
| <div> |
| <div className="tl-title">write_tests <span className="muted small">— {t('flow.wrote', { n: d.lines })}</span></div> |
| <details className="tl-detail"><summary>{t('flow.showCode')}</summary><pre>{d.code}</pre></details> |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'tool_call' && d.tool === 'report_bug') { |
| const ok = d.accepted !== false; |
| return ( |
| <li className={`tl-item ${ok ? 'bad' : ''}`}> |
| <span className="tl-glyph" aria-hidden>{ok ? '!' : '⊘'}</span> |
| <div> |
| <div className="tl-title">report_bug <span className="muted small">— {ok ? t('flow.bugOk') : t('flow.bugRejected', { by: t(d.by === 'kural' ? 'flow.by.rule' : 'flow.by.judge') })}</span></div> |
| <div className="tl-meta">{d.test_name}: {d.reason}</div> |
| {d.verdict && <div className="tl-meta"><strong>{t('flow.verdict')}</strong> {d.verdict}</div>} |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'tool_call') { |
| const bad = d.tool === 'report_bug'; |
| return ( |
| <li className={`tl-item ${bad ? 'bad' : ''}`}> |
| <span className="tl-glyph" aria-hidden>{bad ? '!' : '›'}</span> |
| <div> |
| <div className="tl-title">{title}</div> |
| {bad && <div className="tl-meta">{d.test_name}: {d.reason}</div>} |
| {d.summary && <div className="tl-meta">{d.summary}</div>} |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'tool_result' && d.run) { |
| const r: RunResult = d.run; |
| const failing = r.cases.filter((c) => c.status === 'failed' || c.status === 'error'); |
| return ( |
| <li className={`tl-item ${d.accepted ? 'ok' : 'bad'}`}> |
| <span className="tl-glyph" aria-hidden>{d.accepted ? '✓' : '✕'}</span> |
| <div> |
| <div className="tl-title">{t('flow.roundResult', { n: d.iteration, summary: runSummary(r, t, pct) })}</div> |
| <div className="tl-meta">{t('flow.sandboxSec', { s: num(r.duration_s, 1) })}</div> |
| {(!r.compiled || failing.length > 0) && ( |
| <details className="tl-detail"> |
| <summary>{!r.compiled ? t('flow.compilerOut') : t('flow.nFailed', { n: failing.length })}</summary> |
| <pre>{!r.compiled ? r.compile_output : failing.map((c) => `✕ ${c.name}\n${c.message}`).join('\n\n')}</pre> |
| </details> |
| )} |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'thought') { |
| return ( |
| <li className="tl-item"> |
| <span className="tl-glyph" aria-hidden>…</span> |
| <div> |
| <div className="tl-title muted">{title}</div> |
| {d.text && <details className="tl-detail"><summary>{t('flow.showText')}</summary><pre>{d.text}</pre></details>} |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'result') { |
| return ( |
| <li className="tl-item ok"> |
| <span className="tl-glyph" aria-hidden>✓</span> |
| <div><div className="tl-title">{title}</div> |
| {d.analysis?.test_plan?.length > 0 && <div className="tl-meta">{t('flow.planItems', { n: d.analysis.test_plan.length })}</div>}</div> |
| </li> |
| ); |
| } |
| if (e.type === 'llm_progress') { |
| return ( |
| <li className="tl-item"> |
| <span className="tl-glyph" aria-hidden>…</span> |
| <div> |
| <div className="tl-title">{t('flow.generating')}</div> |
| <div className="tl-meta"> |
| {d.seconds ? t('flow.genProgress', { s: Math.round(d.seconds), c: d.chunks }) : t('flow.genLoading')} |
| </div> |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'mutant') { |
| return ( |
| <li className="tl-item"> |
| <span className="tl-glyph" aria-hidden>μ</span> |
| <div> |
| <div className="tl-title">{t('flow.mutants', { d: d.done, t: d.total })}</div> |
| <div className="meter na" style={{ marginTop: 6 }}><span style={{ width: `${(100 * d.done) / d.total}%`, background: 'var(--signal)' }} /></div> |
| </div> |
| </li> |
| ); |
| } |
| if (e.type === 'error') { |
| return ( |
| <li className="tl-item bad"> |
| <span className="tl-glyph" aria-hidden>!</span> |
| <div><div className="tl-title">{t('flow.error')}</div><div className="tl-meta">{d.message}</div> |
| {d.trace && <details className="tl-detail"><summary>{t('flow.details')}</summary><pre>{d.trace}</pre></details>}</div> |
| </li> |
| ); |
| } |
| if (e.type === 'done' || e.type === 'status') { |
| return ( |
| <li className={`tl-item ${e.type === 'done' ? 'ok' : ''}`}> |
| <span className="tl-glyph" aria-hidden>{e.type === 'done' ? '■' : '▶'}</span> |
| <div><div className="tl-title">{title}</div> |
| <div className="tl-meta">{pick(d.stop_reason_i18n, d.stop_reason || '') || (d.model ? t('flow.model', { m: d.model }) : '')}</div></div> |
| </li> |
| ); |
| } |
| return null; |
| } |
|
|
| export default function AgentFlow({ events, job, running }: { events: AgentEvent[]; job: JobState | null; running: boolean }) { |
| const { t, pct, num } = useI18n(); |
| const endRef = useRef<HTMLDivElement>(null); |
|
|
| const { visible, active, seen, llm, runs } = useMemo(() => { |
| let lastMutant = -1, lastProgress = -1, lastLlm = -1; |
| events.forEach((e, i) => { |
| if (e.type === 'mutant') lastMutant = i; |
| if (e.type === 'llm_progress') lastProgress = i; |
| if (e.type === 'llm' || e.type === 'error' || e.type === 'done') lastLlm = i; |
| }); |
| |
| const showProgress = lastProgress > lastLlm ? lastProgress : -1; |
| const seen = new Set<string>(); |
| let active: string | null = null; |
| const runs: Array<{ it: number; r: RunResult }> = []; |
| let llm = { calls: 0, tin: 0, tout: 0, secs: 0 }; |
| for (const e of events) { |
| if (e.type === 'phase' && e.phase) { seen.add(e.phase); active = e.phase; } |
| if (e.type === 'llm') llm = { calls: llm.calls + 1, tin: llm.tin + (e.data.tokens_in || 0), tout: llm.tout + (e.data.tokens_out || 0), secs: llm.secs + (e.data.seconds || 0) }; |
| if (e.type === 'tool_result' && e.data.run) runs.push({ it: e.data.iteration, r: e.data.run }); |
| } |
| const visible = events.filter((e, i) => e.type !== 'llm' |
| && (e.type !== 'mutant' || i === lastMutant) |
| && (e.type !== 'llm_progress' || i === showProgress)); |
| return { visible, active, seen, llm, runs }; |
| }, [events]); |
|
|
| useEffect(() => { if (running) endRef.current?.scrollIntoView({ block: 'end' }); }, [visible.length, running]); |
|
|
| return ( |
| <section className="panel" aria-labelledby="flow-h"> |
| <div className="panel-head"> |
| <h2 id="flow-h">{t('flow.title')}</h2> |
| <div className="spacer" /> |
| {job && <span className={`tag ${running ? 'running' : job.status}`}>{t(`status.${running ? 'running' : job.status}` as MsgKey)}</span>} |
| </div> |
| <div className="loop" style={{ gridTemplateColumns: `repeat(${STEPS.length}, 1fr)` }} aria-label={t('flow.steps.aria')}> |
| {STEPS.map((s) => { |
| const isActive = running && active === s; |
| return ( |
| <div key={s} className={`loop-step ${isActive ? 'active' : seen.has(s) ? 'done' : ''}`}> |
| <div className="bar" />{t(`flow.step.${s}` as MsgKey)} |
| </div> |
| ); |
| })} |
| </div> |
| <div className="panel-body"> |
| {events.length === 0 ? ( |
| <div className="empty"> |
| <div> |
| <h3>{t('flow.emptyTitle')}</h3> |
| <p>{t('flow.emptyText')}</p> |
| </div> |
| </div> |
| ) : ( |
| <ol className="timeline" aria-live="polite"> |
| {visible.map((e) => <Item key={e.seq} e={e} />)} |
| </ol> |
| )} |
| <div ref={endRef} /> |
| </div> |
| {runs.length > 0 && ( |
| <div className="iter-strip" aria-label={t('flow.coverageByRound')}> |
| {runs.map(({ it, r }) => ( |
| <div className="iter-row" key={it}> |
| <span className="muted">{t('flow.round', { n: it })}</span> |
| <div className={`meter ${r.coverage.percent == null || !r.compiled ? 'na' : ''}`} |
| title={runSummary(r, t, pct)}><span style={{ width: `${r.compiled ? r.coverage.percent ?? 0 : 0}%` }} /></div> |
| <span className="mono small" style={{ textAlign: 'right' }}>{r.compiled ? pct(r.coverage.percent) : t('flow.compileShort')}</span> |
| </div> |
| ))} |
| {llm.calls > 0 && ( |
| <div className="small muted">{t('flow.llmStats', { c: llm.calls, tin: num(llm.tin), tout: num(llm.tout), s: num(llm.secs) })}</div> |
| )} |
| </div> |
| )} |
| </section> |
| ); |
| } |
|
|
