oxios 1.10.1

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { Activity } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { useKnowledgeDoneToday, useKnowledgeStatsToday } from '@/hooks/use-knowledge'

export function TodayStats() {
  const { t } = useTranslation()
  const { data: report, isLoading: reportLoading } = useKnowledgeStatsToday()
  const { data: doneData, isLoading: doneLoading } = useKnowledgeDoneToday()

  if (reportLoading || doneLoading) {
    return <div className="p-4 text-sm text-muted-foreground">{t('knowledge.loadingStats')}</div>
  }

  const doneItems = Array.isArray(doneData?.items) ? doneData.items : []
  const doneCount = doneData?.count ?? 0

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm flex items-center gap-2">
          <Activity className="h-4 w-4" />
          {t('knowledge.todayStats')}
        </CardTitle>
      </CardHeader>
      <CardContent>
        {doneCount > 0 ? (
          <div className="space-y-1">
            <p className="text-2xl font-bold">{doneCount}</p>
            <p className="text-xs text-muted-foreground">{t('knowledge.itemsCompleted')}</p>
            {doneItems.length > 0 && (
              <ul className="mt-2 space-y-0.5">
                {doneItems.slice(0, 5).map((item: unknown, i: number) => (
                  <li key={i} className="text-xs text-muted-foreground truncate">
                    • {String(item)}
                  </li>
                ))}
              </ul>
            )}
          </div>
        ) : (
          <p className="text-sm text-muted-foreground">{t('knowledge.nothingCompletedToday')}</p>
        )}
        {report && Object.keys(report).length > 0 && (
          <details className="mt-3">
            <summary className="text-xs text-muted-foreground cursor-pointer">
              {t('knowledge.rawReport')}
            </summary>
            <pre className="text-xs bg-muted p-2 rounded mt-1 overflow-x-auto">
              {JSON.stringify(report, null, 2)}
            </pre>
          </details>
        )}
      </CardContent>
    </Card>
  )
}