import { useEffect, useMemo, useRef, useState } from 'react' import { useQuery } from '@tanstack/react-query' import { useNavigate } from '@tanstack/react-router' import { SteerModal } from './steer-modal' import { killAgentSession, toggleAgentPause } from '@/lib/gateway-api' import { toast } from '@/components/ui/toast' export type AgentStreamPanelProps = { sessionKey: string agentName: string agentColor: string onClose: () => void } type Row = Record const AGENT_COLOR_DOT_CLASS: Record = { orange: 'bg-orange-500', blue: 'bg-blue-500', cyan: 'bg-cyan-500', purple: 'bg-purple-500', violet: 'bg-violet-500' } const ROLE_BADGE_CLASS: Record = { user: 'bg-blue-100 text-blue-700 dark:bg-blue-950/40 dark:text-blue-200', assistant: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200', system: 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300', tool: 'bg-purple-100 text-purple-700 dark:bg-purple-950/40 dark:text-purple-200', } const toStr = (v: unknown) => (typeof v === 'string' ? v.trim() : '') const toNum = (v: unknown) => { if (typeof v === 'number' && Number.isFinite(v)) return v if (typeof v === 'string') { const parsed = Number(v) if (Number.isFinite(parsed)) return parsed } return 0 } const toTs = (v: unknown) => { if (typeof v === 'number' && Number.isFinite(v)) return v < 1_000_000_000_000 ? v * 1000 : v if (typeof v === 'string') { const parsed = Date.parse(v) if (!Number.isNaN(parsed)) return parsed } return 0 } const asObj = (v: unknown): Row => (v && typeof v === 'object' && !Array.isArray(v) ? (v as Row) : {}) function normalizeRole(raw: unknown): 'user' | 'assistant' | 'system' | 'tool' { const role = toStr(raw).toLowerCase() if (role === 'user' || role === 'assistant' || role === 'system') return role if (role.includes('tool')) return 'tool' return 'assistant' } function textFromMessage(message: Row): string { const direct = message.content if (typeof direct === 'string') return direct if (typeof message.text === 'string') return message.text if (!Array.isArray(direct)) return '' return direct.map((entry) => { const block = asObj(entry) const type = toStr(block.type).toLowerCase() if (type === 'text') return toStr(block.text) if (type === 'thinking') return toStr(block.thinking) || toStr(block.text) if (type.includes('tool')) { const name = toStr(block.name) || toStr(block.toolName) const args = block.arguments ?? block.args const argsText = typeof args === 'string' ? args : args && typeof args === 'object' ? JSON.stringify(args) : '' return [name, argsText].filter(Boolean).join(' ') } if (Array.isArray(block.content)) { return block.content.map((nested) => toStr(asObj(nested).text)).filter(Boolean).join('\n') } return toStr(block.text) }).filter(Boolean).join('\n').trim() } const truncate = (value: string, max = 200) => (value.length <= max ? value : `${value.slice(0, max - 3)}...`) const formatAgo = (ts: number) => { if (!ts) return 'just now' const s = Math.max(0, Math.floor((Date.now() - ts) / 1000)) if (s < 60) return `${s}s ago` const m = Math.floor(s / 60) if (m < 60) return `${m}m ago` const h = Math.floor(m / 60) if (h < 24) return `${h}h ago` return `${Math.floor(h / 24)}d ago` } const formatRuntime = (ts: number) => { if (!ts) return '--' const s = Math.max(0, Math.floor((Date.now() - ts) / 1000)) const h = Math.floor(s / 3600) const m = Math.floor((s % 3600) / 60) if (h > 0) return `${h}h ${m}m` if (m > 0) return `${m}m ${s % 60}s` return `${s}s` } const formatCost = (v: number) => (v > 0 ? (v >= 1 ? `$${v.toFixed(2)}` : `$${v.toFixed(4)}`) : '$0.00') export function AgentStreamPanel({ sessionKey, agentName, agentColor, onClose }: AgentStreamPanelProps) { const navigate = useNavigate() const [steerOpen, setSteerOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false) const [pausePending, setPausePending] = useState(false) const [killPending, setKillPending] = useState(false) const streamRef = useRef(null) useEffect(() => { const onEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose() } window.addEventListener('keydown', onEscape) return () => window.removeEventListener('keydown', onEscape) }, [onClose]) const sessionsQuery = useQuery({ queryKey: ['agent-stream-panel', 'sessions'], queryFn: async () => { const res = await fetch('/api/sessions') if (!res.ok) throw new Error('Failed to load sessions') const payload = (await res.json()) as { sessions?: Array } return Array.isArray(payload.sessions) ? payload.sessions : [] }, refetchInterval: 5000, retry: false, }) const historyQuery = useQuery({ queryKey: ['agent-stream-panel', 'history', sessionKey], queryFn: async () => { const params = new URLSearchParams({ sessionKey, limit: '20' }) const res = await fetch(`/api/history?${params.toString()}`) if (!res.ok) throw new Error('Failed to load history') const payload = (await res.json()) as Record return Array.isArray(payload.messages) ? (payload.messages as Array) : [] }, refetchInterval: 5000, retry: false, }) const session = useMemo(() => { const rows = sessionsQuery.data ?? [] return rows.find((row) => toStr(row.key) === sessionKey || toStr(row.friendlyId) === sessionKey) ?? null }, [sessionKey, sessionsQuery.data]) const usage = asObj(session?.usage) const inputTokens = toNum(session?.inputTokens ?? usage.inputTokens ?? usage.promptTokens) const outputTokens = toNum(session?.outputTokens ?? usage.outputTokens ?? usage.completionTokens) const totalCost = toNum(session?.cost ?? usage.cost ?? usage.costUsd) const runtimeStart = toTs(session?.startedAt) || toTs(session?.createdAt) || toTs(session?.updatedAt) const isPaused = toStr(session?.status).toLowerCase().includes('pause') || session?.enabled === false const model = toStr(session?.model) || 'unknown model' const messages = useMemo(() => (historyQuery.data ?? []).map((row, index) => ({ id: `${index}-${toTs(row.timestamp) || toTs(row.createdAt) || toTs(row.updatedAt)}`, role: normalizeRole(row.role), timestamp: toTs(row.timestamp) || toTs(row.createdAt) || toTs(row.updatedAt), text: truncate(textFromMessage(row) || '(empty)', 200), })), [historyQuery.data]) useEffect(() => { if (!streamRef.current) return streamRef.current.scrollTo({ top: streamRef.current.scrollHeight, behavior: 'smooth' }) }, [historyQuery.dataUpdatedAt, messages.length]) async function onPauseToggle() { if (pausePending) return setPausePending(true) const nextPaused = !isPaused try { await toggleAgentPause(sessionKey, nextPaused) toast(`${agentName} ${nextPaused ? 'paused' : 'resumed'}`, { type: 'success' }) void sessionsQuery.refetch() } catch (error) { toast(error instanceof Error ? error.message : 'Failed to update pause state', { type: 'error' }) } finally { setPausePending(false) setMenuOpen(false) } } async function onKill() { if (killPending) return setKillPending(true) try { await killAgentSession(sessionKey) toast(`${agentName} terminated`, { type: 'success' }) onClose() } catch (error) { toast(error instanceof Error ? error.message : 'Failed to terminate agent', { type: 'error' }) } finally { setKillPending(false) setMenuOpen(false) } } return ( <>
Tokens{inputTokens.toLocaleString()} / {outputTokens.toLocaleString()} Cost{formatCost(totalCost)} Runtime{formatRuntime(runtimeStart)}
{messages.length === 0 ?

Waiting for messages...

: messages.map((message) => (
{message.role}{formatAgo(message.timestamp)}

{message.text}

))}
{menuOpen ?
: null}
) }