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
50
51
52
53
54
55
56
57
58
59
60
61

import { ChevronDown, ChevronRight, Clock } from 'lucide-react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Badge } from '@/components/ui/badge'
import type { AgentTraceStep } from '@/types/agent'

interface TraceStepProps {
  step: AgentTraceStep
}

export function TraceStepCard({ step }: TraceStepProps) {
  const [expanded, setExpanded] = useState(false)
  const { t } = useTranslation()
  const durationSec = (step.duration_ms / 1000).toFixed(1)
  const statusColor =
    step.status === 'completed'
      ? 'bg-success'
      : step.status === 'failed'
        ? 'bg-error'
        : 'bg-warning'

  return (
    <div className="border rounded-lg">
      <button
        type="button"
        className="flex items-center gap-3 p-3 w-full text-left hover:bg-muted/50"
        onClick={() => setExpanded(!expanded)}
      >
        <div className={`w-2 h-2 rounded-full ${statusColor}`} />
        <Badge variant="outline" className="text-xs font-mono truncate min-w-0 max-w-[180px]">
          {step.tool_name || step.action}
        </Badge>
        <span className="text-xs text-muted-foreground flex items-center gap-1">
          <Clock className="h-3 w-3" /> {durationSec}s
        </span>
        <div className="flex-1" />
        {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
      </button>
      {expanded && (
        <div className="border-t px-3 py-2 space-y-2 bg-muted/30">
          <div>
            <p className="text-xs font-medium text-muted-foreground mb-1">
              {t('agents.inputLabel', 'Input')}
            </p>
            <pre className="text-xs bg-muted rounded p-2 overflow-x-auto whitespace-pre-wrap max-h-48 overflow-y-auto">
              {typeof step.input === 'string' ? step.input : JSON.stringify(step.input, null, 2)}
            </pre>
          </div>
          <div>
            <p className="text-xs font-medium text-muted-foreground mb-1">
              {t('agents.outputLabel', 'Output')}
            </p>
            <pre className="text-xs bg-muted rounded p-2 overflow-x-auto whitespace-pre-wrap max-h-48">
              {typeof step.output === 'string' ? step.output : JSON.stringify(step.output, null, 2)}
            </pre>
          </div>
        </div>
      )}
    </div>
  )
}