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
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

import { createFileRoute, Link } from '@tanstack/react-router'
import { ArrowLeft } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { GroupProgress } from '@/components/agent-group/group-progress'
import { SubAgentList } from '@/components/agent-group/sub-agent-list'
import { ErrorState } from '@/components/shared/error-state'
import { LoadingCards } from '@/components/shared/loading'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { useAgentGroupDetail, useAgentGroupProgress } from '@/hooks/use-agent-groups'

export const Route = createFileRoute('/agent-groups/$groupId')({ component: AgentGroupDetailPage })

function AgentGroupDetailPage() {
  const { t } = useTranslation()
  const { groupId } = Route.useParams()
  const { data: group, isLoading: l1, isError: e1 } = useAgentGroupDetail(groupId)
  const { data: progress, isLoading: l2, isError: e2 } = useAgentGroupProgress(groupId)

  if (l1 || l2) return <LoadingCards count={4} />
  if (e1 || e2 || !group) return <ErrorState />

  const status = progress?.status ?? 'Unknown'
  const pct = progress?.completion_pct ?? 0

  return (
    <div className="space-y-6">
      {/* Back */}
      <Link
        to="/agent-groups"
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="h-4 w-4" /> {t('agentGroups.backToGroups')}
      </Link>

      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            {t('agentGroups.group')} #{group.id.slice(0, 8)}
            <Badge
              variant={
                status === 'Completed' ? 'success' : status === 'Failed' ? 'destructive' : 'default'
              }
            >
              {status}
            </Badge>
          </h1>
          {group.parent_seed_id && (
            <p className="text-sm text-muted-foreground">
              {t('agentGroups.parentSeed')}: {group.parent_seed_id.slice(0, 8)}...
            </p>
          )}
        </div>
        <span className="text-lg font-bold">
          {Math.round(pct)}% ({progress?.completed ?? 0}/{group.agents.length})
        </span>
      </div>

      <GroupProgress pct={pct} />

      {/* Sub-agents */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">{t('agentGroups.subAgents')}</CardTitle>
        </CardHeader>
        <CardContent>
          <SubAgentList agents={group.agents} />
        </CardContent>
      </Card>

      {/* Combined results */}
      {progress?.combined_results && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t('agentGroups.combinedResults')}</CardTitle>
          </CardHeader>
          <CardContent>
            <pre className="text-sm whitespace-pre-wrap bg-muted/50 rounded p-3 max-h-96 overflow-y-auto">
              {progress.combined_results}
            </pre>
          </CardContent>
        </Card>
      )}
    </div>
  )
}