oxios 1.10.1

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { Activity, Clock } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { EmptyState } from '@/components/shared/empty-state'
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 { useDreamReports, useDreamStatus } from '@/hooks/use-memory'
import type { DreamReport } from '@/types/memory'

export function DreamPanel() {
  const { t } = useTranslation()
  const { data: status, isLoading: sLoad } = useDreamStatus()
  const { data: reports, isLoading: rLoad, isError, refetch } = useDreamReports()

  if (isError) return <ErrorState onRetry={() => refetch()} />
  if (sLoad || rLoad) return <LoadingCards count={3} />

  const items = Array.isArray(reports) ? reports : []

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" /> {t('memory.dreamStatus')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4 flex-wrap">
            <Badge variant={status?.running ? 'default' : 'secondary'}>
              {status?.running ? t('memory.dreamRunning') : t('memory.dreamIdle')}
            </Badge>
            {status?.last_run && (
              <span className="text-sm text-muted-foreground flex items-center gap-1">
                <Clock className="h-3 w-3" /> {t('memory.lastRun')}:{' '}
                {new Date(status.last_run).toLocaleString()}
              </span>
            )}
            {status?.cycles_completed != null && (
              <span className="text-sm text-muted-foreground">
                Cycles: {status.cycles_completed}
              </span>
            )}
          </div>
        </CardContent>
      </Card>
      {items.length === 0 ? (
        <EmptyState
          icon={<Activity className="h-10 w-10" />}
          title={t('memory.noDreamReports')}
          description={t('memory.noDreamReportsDescription')}
        />
      ) : (
        <div className="space-y-3">
          {items.map((r: DreamReport) => (
            <Card key={r.id}>
              <CardContent className="p-4">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium">
                    {new Date(r.started_at).toLocaleString()}
                  </span>
                  <div className="flex items-center gap-2">
                    <Badge
                      variant={r.status === 'completed' ? 'success' : 'secondary'}
                      className="text-xs"
                    >
                      {r.status}
                    </Badge>
                    {r.completed_at && (
                      <span className="text-xs text-muted-foreground">
                        {(
                          (new Date(r.completed_at).getTime() - new Date(r.started_at).getTime()) /
                          1000
                        ).toFixed(1)}
                        s
                      </span>
                    )}
                  </div>
                </div>
                <div className="grid grid-cols-3 gap-2 text-xs">
                  <div>
                    <span className="text-muted-foreground">Processed:</span> {r.memories_processed}
                  </div>
                  <div>
                    <span className="text-muted-foreground">Consolidated:</span>{' '}
                    {r.memories_consolidated}
                  </div>
                  <div>
                    <span className="text-muted-foreground">Decayed:</span> {r.memories_decayed}
                  </div>
                </div>
                {r.summary && <p className="text-xs text-muted-foreground mt-2">{r.summary}</p>}
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}