oxios 1.5.2

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { CheckCircle2, HelpCircle, XCircle } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import type { EvaluationResult } from '@/types/seed'

export function EvaluationCard({ evaluation }: { evaluation?: EvaluationResult }) {
  const { t } = useTranslation()
  if (!evaluation) return null

  const items = [
    {
      label: t('seeds.mechanical'),
      passed: evaluation.mechanical?.passed,
      detail: evaluation.mechanical?.details,
    },
    {
      label: t('seeds.semantic'),
      passed: evaluation.semantic?.passed,
      detail: evaluation.semantic?.details,
    },
    {
      label: t('seeds.consensus'),
      passed: evaluation.consensus?.agreed,
      detail: evaluation.consensus?.details,
    },
  ]

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('seeds.evaluationResult')}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-3 md:grid-cols-3">
          {items.map((item) => (
            <div key={item.label} className="flex items-center gap-2 rounded-lg border p-3">
              {item.passed === true ? (
                <CheckCircle2 className="h-5 w-5 text-success" />
              ) : item.passed === false ? (
                <XCircle className="h-5 w-5 text-error" />
              ) : (
                <HelpCircle className="h-5 w-5 text-muted-foreground" />
              )}
              <div>
                <p className="text-sm font-medium">{item.label}</p>
                {item.detail && <p className="text-xs text-muted-foreground">{item.detail}</p>}
              </div>
            </div>
          ))}
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">{t('seeds.score')}:</span>
          <div className="flex items-center gap-2 flex-wrap">
            <div className="h-2 w-32 min-w-[80px] overflow-hidden rounded-full bg-muted">
              <div
                className="h-full rounded-full bg-primary"
                style={{ width: `${(evaluation.score || 0) * 100}%` }}
              />
            </div>
            <Badge variant="outline">{(evaluation.score || 0).toFixed(2)} / 1.0</Badge>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}