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

import { useNavigate } from '@tanstack/react-router'
import { Bot, Clock } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { EmptyState } from '@/components/shared/empty-state'
import { LoadingCards } from '@/components/shared/loading'
import { StatusIndicator } from '@/components/shared/status-indicator'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { useSeedAgents } from '@/hooks/use-agent-trace'

export function LinkedAgents({ seedId }: { seedId: string }) {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const { data, isLoading } = useSeedAgents(seedId)

  if (isLoading) return <LoadingCards count={2} />

  const agents = Array.isArray(data?.agents) ? data.agents : []
  if (!agents.length) {
    return <EmptyState icon={<Bot className="h-10 w-10" />} title={t('seeds.noLinkedAgents')} />
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Bot className="h-4 w-4" /> {t('seeds.linkedAgents')}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {agents.map((a) => (
            <button
              type="button"
              key={a.id}
              className="flex cursor-pointer items-center justify-between rounded-lg border p-3 hover:bg-muted/50 w-full text-left"
              onClick={() => navigate({ to: '/agents/$agentId', params: { agentId: a.id } })}
            >
              <div className="flex items-center gap-2">
                <Bot className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium">{a.name}</span>
                <StatusIndicator status={a.status?.toLowerCase() ?? 'unknown'} />
              </div>
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <Clock className="h-3 w-3" />
                {a.created_at ? new Date(a.created_at).toLocaleString() : ''}
              </div>
            </button>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}