plugin-ai-api 1.0.15 → 1.0.20

package/src/client-v2/pages/GeneralPage.tsx

@@ -0,0 +1,170 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Alert, Button, Card, Form, InputNumber, Select, Space, Switch, Typography, message } from 'antd';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useT } from '../locale';
+import { errorMessage, unwrapData } from './api';
+
+interface GeneralSettings {
+  mode: 'llm' | 'agent';
+  defaultAiEmployee?: string;
+  defaultLlmService?: string;
+  enabledLlmServices: string[];
+  rateLimitPerMinute: number;
+  quotaEnabled: boolean;
+  defaultReservationOutputTokens: number;
+}
+
+interface LlmService {
+  name: string;
+  title?: string;
+}
+
+interface AiEmployee {
+  username: string;
+  nickname?: string;
+}
+
+const defaults: GeneralSettings = {
+  mode: 'llm',
+  enabledLlmServices: [],
+  rateLimitPerMinute: 60,
+  quotaEnabled: false,
+  defaultReservationOutputTokens: 4096,
+};
+
+export default function GeneralPage() {
+  const ctx = useFlowContext();
+  const t = useT();
+  const [form] = Form.useForm<GeneralSettings>();
+  const mode = Form.useWatch('mode', form);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [services, setServices] = useState<LlmService[]>([]);
+  const [employees, setEmployees] = useState<AiEmployee[]>([]);
+  const [loadError, setLoadError] = useState<string>();
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setLoadError(undefined);
+    try {
+      const [configResponse, servicesResponse, employeesResponse] = await Promise.all([
+        ctx.api.request({ url: 'aiApiConfig:get', method: 'get' }),
+        ctx.api.request({ url: 'ai:listLLMServices', method: 'get' }),
+        ctx.api.request({ url: 'aiEmployees:list', method: 'get', params: { paginate: false } }),
+      ]);
+      form.setFieldsValue({ ...defaults, ...unwrapData<Partial<GeneralSettings>>(configResponse, {}) });
+      setServices(unwrapData<LlmService[]>(servicesResponse, []));
+      setEmployees(unwrapData<AiEmployee[]>(employeesResponse, []));
+    } catch (error) {
+      setLoadError(errorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [ctx.api, form]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const save = async () => {
+    const values = await form.validateFields();
+    setSaving(true);
+    try {
+      await ctx.api.request({ url: 'aiApiConfig:save', method: 'post', data: values });
+      message.success(t('Configuration saved'));
+    } catch (error) {
+      message.error(`${t('Failed to save configuration')}: ${errorMessage(error)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const serviceOptions = services.map((service) => ({
+    label: service.title || service.name,
+    value: service.name,
+  }));
+  const employeeOptions = employees.map((employee) => ({
+    label: employee.nickname ? `${employee.nickname} (${employee.username})` : employee.username,
+    value: employee.username,
+  }));
+  const baseUrl = `${window.location.origin}/api/ai-llm/v1`;
+
+  return (
+    <Card title={t('Configuration')} loading={loading}>
+      {loadError ? <Alert type="error" showIcon message={loadError} style={{ marginBottom: 16 }} /> : null}
+      <Form form={form} layout="vertical" style={{ maxWidth: 720 }} initialValues={defaults}>
+        <Form.Item name="mode" label={t('API mode')} rules={[{ required: true }]}>
+          <Select
+            options={[
+              { label: t('Direct LLM'), value: 'llm' },
+              { label: t('AI Employee agent'), value: 'agent' },
+            ]}
+          />
+        </Form.Item>
+        <Form.Item name="defaultLlmService" label={t('Default LLM service')}>
+          <Select allowClear showSearch optionFilterProp="label" options={serviceOptions} />
+        </Form.Item>
+        <Form.Item name="enabledLlmServices" label={t('Enabled LLM Services')}>
+          <Select mode="multiple" allowClear showSearch optionFilterProp="label" options={serviceOptions} />
+        </Form.Item>
+        {mode === 'agent' ? (
+          <Form.Item name="defaultAiEmployee" label={t('Default AI Employee')}>
+            <Select
+              allowClear
+              showSearch
+              optionFilterProp="label"
+              placeholder={t('Select an AI Employee')}
+              options={employeeOptions}
+            />
+          </Form.Item>
+        ) : null}
+        <Form.Item name="rateLimitPerMinute" label={t('Rate Limit')} rules={[{ required: true }]}>
+          <InputNumber min={1} style={{ width: '100%' }} />
+        </Form.Item>
+        <Form.Item name="quotaEnabled" label={t('Enable user quotas')} valuePropName="checked">
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          name="defaultReservationOutputTokens"
+          label={t('Default reserved output tokens')}
+          rules={[{ required: true }]}
+        >
+          <InputNumber min={1} style={{ width: '100%' }} />
+        </Form.Item>
+        <Space>
+          <Button type="primary" loading={saving} onClick={save}>
+            {t('Save Configuration')}
+          </Button>
+          <Button onClick={load}>{t('Refresh')}</Button>
+        </Space>
+      </Form>
+      <Card title={t('Usage guide')} size="small" style={{ marginTop: 24 }}>
+        <Alert
+          type="info"
+          showIcon
+          message={t('OpenAI-compatible endpoint')}
+          description={
+            <Space direction="vertical" size={4}>
+              <Typography.Text>{t('Base URL')}</Typography.Text>
+              <Typography.Text code copyable>
+                {baseUrl}
+              </Typography.Text>
+              <Typography.Text>{t('Use a NocoBase API key as the Bearer token.')}</Typography.Text>
+            </Space>
+          }
+          style={{ marginBottom: 16 }}
+        />
+        <Typography.Paragraph>{t('List available models')}</Typography.Paragraph>
+        <Typography.Paragraph
+          code
+          copyable
+        >{`curl ${baseUrl}/models -H "Authorization: Bearer <your-api-key>"`}</Typography.Paragraph>
+        <Typography.Paragraph>{t('Send a chat completion')}</Typography.Paragraph>
+        <Typography.Paragraph code copyable>{`curl ${baseUrl}/chat/completions \\
+  -H "Authorization: Bearer <your-api-key>" \\
+  -H "Content-Type: application/json" \\
+  -d '{"model":"<service>/<model>","messages":[{"role":"user","content":"Hello"}]}'`}</Typography.Paragraph>
+      </Card>
+    </Card>
+  );
+}

package/src/client-v2/pages/ModelPricingPage.tsx

@@ -0,0 +1,285 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popconfirm,
+  Select,
+  Space,
+  Switch,
+  Table,
+  Tag,
+  message,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import dayjs, { type Dayjs } from 'dayjs';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useT } from '../locale';
+import { errorMessage, unwrapData } from './api';
+
+interface ModelPrice {
+  id: string | number;
+  llmService: string;
+  provider: string;
+  model: string;
+  currency: string;
+  inputPricePerMillionTokens: string;
+  outputPricePerMillionTokens: string;
+  fixedCostPerRequest: string;
+  effectiveFrom: string;
+  effectiveTo?: string;
+  enabled: boolean;
+  notes?: string;
+}
+
+interface PriceFormValues extends Omit<ModelPrice, 'id' | 'effectiveFrom' | 'effectiveTo'> {
+  effectiveFrom: Dayjs;
+  effectiveTo?: Dayjs;
+}
+
+interface LlmService {
+  name: string;
+  title?: string;
+  provider: string;
+}
+
+interface LlmModel {
+  id: string;
+}
+
+export default function ModelPricingPage() {
+  const ctx = useFlowContext();
+  const t = useT();
+  const [form] = Form.useForm<PriceFormValues>();
+  const selectedService = Form.useWatch('llmService', form);
+  const [rows, setRows] = useState<ModelPrice[]>([]);
+  const [services, setServices] = useState<LlmService[]>([]);
+  const [models, setModels] = useState<LlmModel[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editing, setEditing] = useState<ModelPrice>();
+  const [open, setOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [pricesResponse, servicesResponse] = await Promise.all([
+        ctx.api.request({
+          url: 'aiApiModelPrices:list',
+          method: 'get',
+          params: { pageSize: 200, sort: '-effectiveFrom' },
+        }),
+        ctx.api.request({ url: 'ai:listLLMServices', method: 'get' }),
+      ]);
+      setRows(unwrapData<ModelPrice[]>(pricesResponse, []));
+      setServices(unwrapData<LlmService[]>(servicesResponse, []));
+    } catch (error) {
+      message.error(errorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [ctx.api]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const showCreate = () => {
+    setEditing(undefined);
+    setModels([]);
+    form.setFieldsValue({
+      currency: 'USD',
+      inputPricePerMillionTokens: '0',
+      outputPricePerMillionTokens: '0',
+      fixedCostPerRequest: '0',
+      effectiveFrom: dayjs(),
+      enabled: true,
+    } as PriceFormValues);
+    setOpen(true);
+  };
+
+  const showEdit = (record: ModelPrice) => {
+    setEditing(record);
+    form.setFieldsValue({
+      ...record,
+      effectiveFrom: dayjs(record.effectiveFrom),
+      effectiveTo: record.effectiveTo ? dayjs(record.effectiveTo) : undefined,
+    });
+    setOpen(true);
+    loadModels(record.llmService, record.model);
+  };
+
+  const loadModels = async (llmService: string, currentModel?: string) => {
+    setModelsLoading(true);
+    try {
+      const response = await ctx.api.request({
+        url: 'ai:listModels',
+        method: 'get',
+        params: { llmService },
+      });
+      const loadedModels = unwrapData<LlmModel[]>(response, []);
+      setModels(
+        currentModel && !loadedModels.some((item) => item.id === currentModel)
+          ? [{ id: currentModel }, ...loadedModels]
+          : loadedModels,
+      );
+    } catch (error) {
+      setModels(currentModel ? [{ id: currentModel }] : []);
+      message.error(`${t('Failed to load models')}: ${errorMessage(error)}`);
+    } finally {
+      setModelsLoading(false);
+    }
+  };
+
+  const changeService = (llmService: string) => {
+    form.setFieldValue('model', undefined);
+    setModels([]);
+    loadModels(llmService);
+  };
+
+  const save = async () => {
+    const values = await form.validateFields();
+    const service = services.find((item) => item.name === values.llmService);
+    const data = {
+      ...values,
+      provider: service?.provider ?? values.provider,
+      effectiveFrom: values.effectiveFrom.toISOString(),
+      effectiveTo: values.effectiveTo?.toISOString() ?? null,
+    };
+    setSaving(true);
+    try {
+      await ctx.api.request({
+        url: editing ? `aiApiModelPrices:update/${editing.id}` : 'aiApiModelPrices:create',
+        method: 'post',
+        data,
+      });
+      message.success(t('Saved successfully'));
+      setOpen(false);
+      await load();
+    } catch (error) {
+      message.error(errorMessage(error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (id: string | number) => {
+    try {
+      await ctx.api.request({ url: `aiApiModelPrices:destroy/${id}`, method: 'post' });
+      message.success(t('Deleted successfully'));
+      await load();
+    } catch (error) {
+      message.error(errorMessage(error));
+    }
+  };
+
+  const columns: ColumnsType<ModelPrice> = [
+    { title: t('LLM service'), dataIndex: 'llmService', key: 'llmService', width: 180 },
+    { title: t('Model'), dataIndex: 'model', key: 'model', width: 180 },
+    { title: t('Input price / 1M'), dataIndex: 'inputPricePerMillionTokens', key: 'inputPrice', width: 150 },
+    { title: t('Output price / 1M'), dataIndex: 'outputPricePerMillionTokens', key: 'outputPrice', width: 150 },
+    { title: t('Fixed request cost'), dataIndex: 'fixedCostPerRequest', key: 'fixedCost', width: 150 },
+    { title: t('Currency'), dataIndex: 'currency', key: 'currency', width: 90 },
+    {
+      title: t('Status'),
+      dataIndex: 'enabled',
+      key: 'enabled',
+      width: 100,
+      render: (enabled: boolean) => (
+        <Tag color={enabled ? 'green' : 'default'}>{enabled ? t('Enabled') : t('Disabled')}</Tag>
+      ),
+    },
+    {
+      title: t('Actions'),
+      key: 'actions',
+      fixed: 'right',
+      width: 150,
+      render: (_, record) => (
+        <Space>
+          <Button type="link" onClick={() => showEdit(record)}>
+            {t('Edit')}
+          </Button>
+          <Popconfirm title={t('Delete this price?')} onConfirm={() => remove(record.id)}>
+            <Button type="link" danger>
+              {t('Delete')}
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Card
+      title={t('Model pricing')}
+      extra={
+        <Button type="primary" onClick={showCreate}>
+          {t('Add price')}
+        </Button>
+      }
+    >
+      <Table rowKey="id" columns={columns} dataSource={rows} loading={loading} scroll={{ x: 1200 }} />
+      <Modal
+        title={editing ? t('Edit price') : t('Add price')}
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={save}
+        confirmLoading={saving}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" preserve={false}>
+          <Form.Item name="llmService" label={t('LLM service')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              onChange={changeService}
+              options={services.map((service) => ({ label: service.title || service.name, value: service.name }))}
+            />
+          </Form.Item>
+          <Form.Item name="provider" hidden>
+            <Input />
+          </Form.Item>
+          <Form.Item name="model" label={t('Model')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              loading={modelsLoading}
+              disabled={!selectedService}
+              placeholder={t('Select a model')}
+              options={models.map((model) => ({ label: model.id, value: model.id }))}
+            />
+          </Form.Item>
+          <Form.Item name="currency" label={t('Currency')} rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="inputPricePerMillionTokens" label={t('Input price / 1M')} rules={[{ required: true }]}>
+            <InputNumber min={0} stringMode style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item name="outputPricePerMillionTokens" label={t('Output price / 1M')} rules={[{ required: true }]}>
+            <InputNumber min={0} stringMode style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item name="fixedCostPerRequest" label={t('Fixed request cost')} rules={[{ required: true }]}>
+            <InputNumber min={0} stringMode style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item name="effectiveFrom" label={t('Effective from')} rules={[{ required: true }]}>
+            <DatePicker showTime style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item name="effectiveTo" label={t('Effective to')}>
+            <DatePicker showTime style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item name="enabled" label={t('Enabled')} valuePropName="checked">
+            <Switch />
+          </Form.Item>
+          <Form.Item name="notes" label={t('Notes')}>
+            <Input.TextArea rows={3} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Card>
+  );
+}

package/src/client-v2/pages/UsagePage.tsx

@@ -0,0 +1,248 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+  Space,
+  Statistic,
+  Table,
+  Tag,
+  message,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import dayjs, { type Dayjs } from 'dayjs';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useT } from '../locale';
+import { errorMessage, unwrapData } from './api';
+
+interface UsageRecord {
+  id: string | number;
+  requestId: string;
+  userId: string | number;
+  model?: string;
+  resolvedService?: string;
+  resolvedModel?: string;
+  status: string;
+  inputTokens?: number;
+  outputTokens?: number;
+  totalTokens?: number;
+  estimatedCost?: string;
+  currency?: string;
+  costStatus?: string;
+  startedAt?: string;
+}
+
+interface UsageFilters {
+  range: [Dayjs, Dayjs];
+  userId?: number;
+  resolvedService?: string;
+  resolvedModel?: string;
+  status?: string;
+}
+
+interface UsageSummary {
+  requestCount: number;
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+  costsByCurrency: { currency: string; totalCost: string }[];
+}
+
+interface LlmService {
+  name: string;
+  title?: string;
+}
+
+const initialRange = (): [Dayjs, Dayjs] => [dayjs().subtract(29, 'day').startOf('day'), dayjs().endOf('day')];
+const emptySummary: UsageSummary = {
+  requestCount: 0,
+  inputTokens: 0,
+  outputTokens: 0,
+  totalTokens: 0,
+  costsByCurrency: [],
+};
+
+export default function UsagePage() {
+  const ctx = useFlowContext();
+  const t = useT();
+  const [form] = Form.useForm<UsageFilters>();
+  const [rows, setRows] = useState<UsageRecord[]>([]);
+  const [summary, setSummary] = useState<UsageSummary>(emptySummary);
+  const [services, setServices] = useState<LlmService[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const load = useCallback(
+    async (override?: UsageFilters) => {
+      const values = override ?? form.getFieldsValue();
+      const [start, end] = values.range ?? initialRange();
+      const conditions: Record<string, unknown>[] = [
+        { startedAt: { $gte: start.toISOString(), $lte: end.toISOString() } },
+      ];
+      if (values.userId !== undefined) conditions.push({ userId: values.userId });
+      if (values.resolvedService) conditions.push({ resolvedService: values.resolvedService });
+      if (values.resolvedModel) conditions.push({ resolvedModel: values.resolvedModel });
+      if (values.status) conditions.push({ status: values.status });
+      const summaryParams = {
+        start: start.toISOString(),
+        end: end.toISOString(),
+        userId: values.userId,
+        resolvedService: values.resolvedService,
+        resolvedModel: values.resolvedModel,
+        status: values.status,
+      };
+
+      setLoading(true);
+      try {
+        const [recordsResponse, summaryResponse] = await Promise.all([
+          ctx.api.request({
+            url: 'aiApiUsageRecords:list',
+            method: 'get',
+            params: { pageSize: 100, sort: '-startedAt', filter: { $and: conditions } },
+          }),
+          ctx.api.request({ url: 'aiApiUsageMonitor:summary', method: 'get', params: summaryParams }),
+        ]);
+        setRows(unwrapData<UsageRecord[]>(recordsResponse, []));
+        setSummary(unwrapData<UsageSummary>(summaryResponse, emptySummary));
+      } catch (error) {
+        message.error(errorMessage(error));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [ctx.api, form],
+  );
+
+  useEffect(() => {
+    const range = initialRange();
+    form.setFieldsValue({ range });
+    load({ range });
+    ctx.api
+      .request({ url: 'ai:listLLMServices', method: 'get' })
+      .then((response) => setServices(unwrapData<LlmService[]>(response, [])))
+      .catch((error: unknown) => message.error(errorMessage(error)));
+  }, [ctx.api, form, load]);
+
+  const reset = () => {
+    const range = initialRange();
+    form.setFieldsValue({
+      range,
+      userId: undefined,
+      resolvedService: undefined,
+      resolvedModel: undefined,
+      status: undefined,
+    });
+    load({ range });
+  };
+
+  const totalCost = summary.costsByCurrency.length
+    ? summary.costsByCurrency.map((item) => `${item.totalCost} ${item.currency}`).join(' + ')
+    : '0';
+
+  const columns: ColumnsType<UsageRecord> = [
+    { title: t('Started at'), dataIndex: 'startedAt', key: 'startedAt', width: 180 },
+    { title: t('User'), dataIndex: 'userId', key: 'userId', width: 90 },
+    { title: t('Requested model'), dataIndex: 'model', key: 'model', width: 170 },
+    { title: t('Resolved service'), dataIndex: 'resolvedService', key: 'resolvedService', width: 170 },
+    { title: t('Resolved model'), dataIndex: 'resolvedModel', key: 'resolvedModel', width: 170 },
+    { title: t('Input tokens'), dataIndex: 'inputTokens', key: 'inputTokens', width: 110 },
+    { title: t('Output tokens'), dataIndex: 'outputTokens', key: 'outputTokens', width: 110 },
+    { title: t('Total tokens'), dataIndex: 'totalTokens', key: 'totalTokens', width: 110 },
+    {
+      title: t('Cost'),
+      key: 'cost',
+      width: 130,
+      render: (_, record) => (record.estimatedCost == null ? '-' : `${record.estimatedCost} ${record.currency ?? ''}`),
+    },
+    {
+      title: t('Cost status'),
+      dataIndex: 'costStatus',
+      key: 'costStatus',
+      width: 130,
+      render: (status?: string) => (status ? <Tag>{status}</Tag> : '-'),
+    },
+    { title: t('Status'), dataIndex: 'status', key: 'status', width: 100 },
+    { title: t('Request ID'), dataIndex: 'requestId', key: 'requestId', width: 240 },
+  ];
+
+  return (
+    <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      <Card title={t('Usage filters')} size="small">
+        <Form form={form} layout="inline" onFinish={(values) => load(values)}>
+          <Form.Item name="range" label={t('Time range')} rules={[{ required: true }]}>
+            <DatePicker.RangePicker showTime />
+          </Form.Item>
+          <Form.Item name="userId" label={t('User ID')}>
+            <InputNumber min={1} style={{ width: 110 }} />
+          </Form.Item>
+          <Form.Item name="resolvedService" label={t('Resolved service')}>
+            <Select
+              allowClear
+              showSearch
+              optionFilterProp="label"
+              style={{ width: 190 }}
+              options={services.map((service) => ({ label: service.title || service.name, value: service.name }))}
+            />
+          </Form.Item>
+          <Form.Item name="resolvedModel" label={t('Resolved model')}>
+            <Input allowClear style={{ width: 180 }} />
+          </Form.Item>
+          <Form.Item name="status" label={t('Status')}>
+            <Select
+              allowClear
+              style={{ width: 130 }}
+              options={[
+                { label: t('Succeeded'), value: 'succeeded' },
+                { label: t('Failed'), value: 'failed' },
+                { label: t('Started'), value: 'started' },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Space>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                {t('Apply filters')}
+              </Button>
+              <Button onClick={reset}>{t('Reset')}</Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Card>
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} lg={6}>
+          <Card size="small">
+            <Statistic title={t('Requests')} value={summary.requestCount} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <Card size="small">
+            <Statistic title={t('Input tokens')} value={summary.inputTokens} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <Card size="small">
+            <Statistic title={t('Output tokens')} value={summary.outputTokens} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} lg={6}>
+          <Card size="small">
+            <Statistic title={t('Total tokens')} value={summary.totalTokens} />
+          </Card>
+        </Col>
+        <Col xs={24}>
+          <Card size="small">
+            <Statistic title={t('Total cost')} value={totalCost} />
+          </Card>
+        </Col>
+      </Row>
+      <Card title={t('Usage records')} extra={<Button onClick={() => load()}>{t('Refresh')}</Button>}>
+        <Table rowKey="id" columns={columns} dataSource={rows} loading={loading} scroll={{ x: 1600 }} />
+      </Card>
+    </Space>
+  );
+}