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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

import { Activity, Brain, Hash, Pin } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import {
  Bar,
  BarChart,
  Cell,
  Legend,
  Pie,
  PieChart,
  Tooltip as RechartsTooltip,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from 'recharts'
import { ErrorState } from '@/components/shared/error-state'
import { LoadingCards } from '@/components/shared/loading'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { useMemoryStats } from '@/hooks/use-memory'

const TIER_COLORS = { hot: '#ef4444', warm: '#eab308', cold: '#3b82f6' }

export function MemoryOverview() {
  const { t } = useTranslation()
  const { data: stats, isLoading, isError, refetch } = useMemoryStats()

  if (isLoading) return <LoadingCards count={4} />
  if (isError) return <ErrorState onRetry={() => refetch()} />
  if (!stats) return null

  const tierData = Object.entries(stats.by_tier || {})
    .filter(([, v]) => v > 0)
    .map(([name, value]) => ({
      name: t(`memory.${name}`, name),
      value,
      fill: TIER_COLORS[name as keyof typeof TIER_COLORS] || '#888',
    }))

  const typeData = Object.entries(stats.by_type || {})
    .filter(([, v]) => v > 0)
    .map(([name, value]) => ({ name: t(`memory.${name}`, name), value }))

  const statCards = [
    { label: t('memory.totalEntries'), value: stats.total, icon: Brain },
    {
      label: t('memory.vectorIndex'),
      value: stats.by_type ? Object.keys(stats.by_type).length : 0,
      icon: Hash,
    },
    { label: t('memory.pinnedEntries'), value: 0, icon: Pin },
    {
      label: t('memory.dreamStatus'),
      value: 'idle',
      icon: Activity,
    },
  ]

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {statCards.map((s) => (
          <Card key={s.label}>
            <CardContent className="p-4 flex items-center gap-3">
              <s.icon className="h-8 w-8 text-muted-foreground" />
              <div>
                <p className="text-2xl font-bold">{s.value}</p>
                <p className="text-xs text-muted-foreground">{s.label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>{t('memory.tierDistribution')}</CardTitle>
          </CardHeader>
          <CardContent>
            {tierData.length > 0 ? (
              <ResponsiveContainer width="100%" height={200}>
                <PieChart>
                  <Pie
                    data={tierData}
                    dataKey="value"
                    nameKey="name"
                    cx="50%"
                    cy="50%"
                    outerRadius={80}
                    label
                  >
                    {tierData.map((entry, i) => (
                      <Cell key={i} fill={entry.fill} />
                    ))}
                  </Pie>
                  <RechartsTooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-sm text-muted-foreground">{t('memory.noData')}</p>
            )}
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>{t('memory.typeDistribution')}</CardTitle>
          </CardHeader>
          <CardContent>
            {typeData.length > 0 ? (
              <ResponsiveContainer width="100%" height={200}>
                <BarChart data={typeData}>
                  <XAxis dataKey="name" tick={{ fontSize: 11 }} />
                  <YAxis />
                  <RechartsTooltip />
                  <Bar dataKey="value" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>
            ) : (
              <p className="text-sm text-muted-foreground">{t('memory.noData')}</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}