oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import { Activity } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { EmptyState } from '@/components/shared/empty-state'
import type { AgentTrace } from '@/types/agent'
import { TraceStepCard } from './trace-step'

interface ExecutionTraceProps {
  trace: AgentTrace | null | undefined
  isLoading?: boolean
}

export function ExecutionTrace({ trace, isLoading }: ExecutionTraceProps) {
  const { t } = useTranslation()

  if (isLoading) {
    return (
      <div className="space-y-2">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="h-16 bg-muted animate-pulse rounded-lg" />
        ))}
      </div>
    )
  }

  if (!trace?.steps?.length) {
    return (
      <EmptyState
        icon={<Activity className="h-10 w-10" />}
        title={t('agents.noTrace')}
        description={t('agents.noTraceDescription')}
      />
    )
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <span className="text-sm text-muted-foreground">
          {t('agents.steps', { count: trace.steps.length })}
        </span>
      </div>
      <div className="space-y-2">
        {trace.steps.map((step) => (
          <TraceStepCard key={step.index} step={step} />
        ))}
      </div>
    </div>
  )
}