oxios 1.10.1

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

import { Brain, ChevronDown, ChevronRight, Clock, Lightbulb, Wrench } 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
}

/** Icon + color for a trace step kind. */
function kindVisual(kind: AgentTraceStep['kind']) {
  switch (kind) {
    case 'memory':
      return { icon: <Brain className="h-3.5 w-3.5 text-info" />, badgeClass: 'text-info' }
    case 'reasoning':
      return {
        icon: <Lightbulb className="h-3.5 w-3.5 text-message-task" />,
        badgeClass: 'text-message-task',
      }
    default:
      return { icon: <Wrench className="h-3.5 w-3.5 text-muted-foreground" />, badgeClass: '' }
  }
}

/** Human-readable label for a kind. */
function kindLabel(
  kind: AgentTraceStep['kind'],
  t: ReturnType<typeof useTranslation>['t'],
): string | null {
  switch (kind) {
    case 'memory':
      return t('agents.memoryRecall', 'Memory Recall')
    case 'reasoning':
      return t('agents.reasoning', 'Reasoning')
    default:
      return null
  }
}

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'
  const kind = step.kind
  const visual = kindVisual(kind)
  const kLabel = kindLabel(kind, t)
  const badgeText = kLabel ?? step.tool_name ?? step.action
  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}`} />
        {visual.icon}
        <Badge
          variant="outline"
          className={`text-xs font-mono truncate min-w-0 max-w-[180px] ${visual.badgeClass}`}
        >
          {badgeText}
        </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>
  )
}