oxios 1.13.0

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

import { createFileRoute } from '@tanstack/react-router'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { BudgetManagement } from '@/components/budget/budget-management'
import { CostByModel } from '@/components/cost/cost-by-model'
import { CostByProject } from '@/components/cost/cost-by-project'
import { CostChart } from '@/components/cost/cost-chart'
import { CostSummaryCards } from '@/components/cost/cost-summary'
import { ProviderQuotaCards } from '@/components/cost/provider-quota-cards'
import { SpendLimitCard } from '@/components/cost/spend-limit-card'
import { RefreshButton } from '@/components/shared/refresh-button'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { useCostSummary } from '@/hooks/use-costs'
import type { CostPeriod } from '@/types/cost'

export const Route = createFileRoute('/budget')({ component: CostPage })

const PERIODS: CostPeriod[] = ['today', 'week', 'month', 'all']

function CostPage() {
  const { t } = useTranslation()
  const [period, setPeriod] = useState<CostPeriod>('month')
  const { refetch, isFetching } = useCostSummary(period)

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">{t('cost.title')}</h1>
          <p className="text-sm text-muted-foreground">{t('cost.subtitle')}</p>
        </div>
        <div className="flex items-center gap-2">
          <RefreshButton onClick={() => refetch()} isFetching={isFetching} />
        </div>
      </div>

      {/* Spend limit + period selector */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <SpendLimitCard />
        <div className="flex items-end sm:col-span-1 lg:col-span-3">
          <Tabs value={period} onValueChange={(v) => setPeriod(v as CostPeriod)} className="w-full">
            <TabsList>
              {PERIODS.map((p) => (
                <TabsTrigger key={p} value={p}>
                  {t(`cost.period.${p}`)}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        </div>
      </div>

      {/* Summary stat cards */}
      <CostSummaryCards period={period} />

      {/* Daily spend chart */}
      <CostChart days={30} />

      {/* Breakdowns */}
      <div className="grid gap-4 lg:grid-cols-2">
        <CostByModel period={period} />
        <CostByProject period={period} />
      </div>

      {/* Provider panel — all configured providers + quota data */}
      <ProviderQuotaCards />

      {/* Agent budget management — token/call rate limits */}
      <div className="space-y-2">
        <h2 className="text-lg font-semibold">{t('budget.title')}</h2>
        <BudgetManagement />
      </div>
    </div>
  )
}