import { Head, router } from '@inertiajs/react'; import { Activity, Gauge, RefreshCw, TimerReset } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import { cn } from '@/lib/utils'; import type { BreadcrumbItem } from '@/types'; type Turn = { at: string | null; conversation_id: string | null; agent_id: string | null; retrieve_ms: number; tool_loop_ms: number; first_token_ms: number; llm_ms: number; total_ms: number; embed_ms: number; ann_ms: number; hydrate_ms: number; rerank_ms: number; cache_hit: boolean; rerank_skipped: boolean; sources: number; tokens_out: number; is_playground: boolean; route: string; route_reason: string; }; type StageAggregate = { p50: number; p95: number; max: number }; type Props = { turns: Turn[]; aggregates: Record; verdict: string; }; const STAGE_CARDS: Array<{ key: string; label: string }> = [ { key: 'first_token_ms', label: 'First token' }, { key: 'tool_loop_ms', label: 'Tool loop' }, { key: 'retrieve_ms', label: 'Retrieval (total)' }, { key: 'embed_ms', label: 'Embed query' }, { key: 'ann_ms', label: 'Vector search' }, { key: 'rerank_ms', label: 'Rerank' }, { key: 'llm_ms', label: 'LLM full reply' }, { key: 'total_ms', label: 'Turn total' }, ]; function msTone(ms: number): string { if (ms === 0) { return 'text-muted-foreground'; } if (ms < 300) { return 'text-emerald-600 dark:text-emerald-400'; } if (ms < 800) { return 'text-amber-600 dark:text-amber-400'; } return 'text-red-600 dark:text-red-400'; } export default function HotPathLatency({ turns, aggregates, verdict }: Props) { const { t } = useT(); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Settings'), href: '/settings/system' }, { title: t('Hot path latency'), href: '/settings/system/hotpath-latency', }, ]; return (

{t('Hot path latency')}

{t( 'Per-stage timings for the last :count visitor turns. Find which round-trip makes the bot feel slow.', { count: turns.length }, )}

{verdict}
{STAGE_CARDS.map(({ key, label }) => { const agg = aggregates[key] ?? { p50: 0, p95: 0, max: 0, }; return (

{t(label)}

{agg.p50}ms

p95 {agg.p95}ms · max {agg.max}ms

); })}
{turns.length === 0 ? (

{t( 'No turns recorded yet. Send a message through the widget or playground, then refresh.', )}

) : (
{turns.map((turn, i) => ( ))}
{t('When')} {t('First token')} {t('Tool loop')} {t('Retrieve')} {t('Embed')} {t('Search')} {t('Rerank')} {t('LLM')} {t('Total')} {t('Notes')}
{turn.at ? new Date( turn.at, ).toLocaleTimeString() : '—'} {turn.first_token_ms}ms 0 ? msTone( turn.tool_loop_ms, ) : 'text-muted-foreground', )} > {turn.tool_loop_ms > 0 ? `${turn.tool_loop_ms}ms` : '—'} {turn.retrieve_ms}ms {turn.cache_hit ? '—' : `${turn.embed_ms}ms`} {turn.cache_hit ? '—' : `${turn.ann_ms}ms`} {turn.cache_hit ? '—' : turn.rerank_skipped ? t('skipped') : `${turn.rerank_ms}ms`} {turn.llm_ms}ms {turn.total_ms}ms {[ turn.route !== '' ? `${turn.route}${turn.route_reason !== '' ? ` (${turn.route_reason})` : ''}` : null, turn.cache_hit ? t( 'retrieve cache hit', ) : null, turn.rerank_skipped ? t('rerank skipped') : null, turn.is_playground ? t('playground') : null, `${turn.sources} ${t('sources')}`, `${turn.tokens_out} ${t('tokens')}`, ] .filter(Boolean) .join(' · ')}
)}

{t( 'Buffer holds the most recent 100 turns (7-day TTL). Timings are recorded after the reply finishes streaming — collecting them costs the visitor nothing.', )}

); }