docs: audit reports + feature docs + skills + admin-v2 + config sync

Update audit tracker, roadmap, architecture docs,
add admin-v2 Roles page + Billing tests,
sync CLAUDE.md, Cargo.toml, docker-compose.yml,
add deep-research / frontend-design / chart-visualization skills

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-v2/tests/pages/Usage.test.tsx

@@ -0,0 +1,248 @@
+// ============================================================
+// Usage 页面测试
+// ============================================================
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import Usage from '@/pages/Usage'
+
+// ── Mock data ────────────────────────────────────────────────
+
+const mockDailyStats = [
+  {
+    day: '2026-03-28',
+    request_count: 120,
+    input_tokens: 24000,
+    output_tokens: 8000,
+    unique_devices: 5,
+  },
+  {
+    day: '2026-03-29',
+    request_count: 80,
+    input_tokens: 16000,
+    output_tokens: 5000,
+    unique_devices: 3,
+  },
+  {
+    day: '2026-03-30',
+    request_count: 200,
+    input_tokens: 40000,
+    output_tokens: 12000,
+    unique_devices: 7,
+  },
+]
+
+const mockModelStats = [
+  {
+    model_id: 'gpt-4o',
+    request_count: 300,
+    input_tokens: 60000,
+    output_tokens: 18000,
+    avg_latency_ms: 450.3,
+    success_rate: 0.98,
+  },
+  {
+    model_id: 'claude-sonnet-4-20250514',
+    request_count: 100,
+    input_tokens: 20000,
+    output_tokens: 7000,
+    avg_latency_ms: 620.7,
+    success_rate: 0.95,
+  },
+]
+
+// ── MSW server ───────────────────────────────────────────────
+
+const server = setupServer()
+
+beforeEach(() => {
+  server.listen({ onUnhandledRequest: 'bypass' })
+})
+
+afterEach(() => {
+  server.close()
+})
+
+// ── Helper: render with QueryClient ──────────────────────────
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>,
+  )
+}
+
+// ── Tests ────────────────────────────────────────────────────
+
+describe('Usage page', () => {
+  it('renders page title and summary cards', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    expect(screen.getByText('用量统计')).toBeInTheDocument()
+    expect(screen.getByText('查看模型使用情况和 Token 消耗')).toBeInTheDocument()
+
+    // Summary card titles
+    expect(screen.getByText('总请求数')).toBeInTheDocument()
+    expect(screen.getByText('总 Token 数')).toBeInTheDocument()
+
+    // Total requests: 120 + 80 + 200 = 400
+    await waitFor(() => {
+      expect(screen.getByText('400')).toBeInTheDocument()
+    })
+
+    // Total tokens: (24000+8000) + (16000+5000) + (40000+12000) = 105,000
+    expect(screen.getByText('105,000')).toBeInTheDocument()
+  })
+
+  it('fetches and displays daily stats table', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    // Table column headers
+    expect(screen.getByText('每日统计')).toBeInTheDocument()
+
+    // Wait for data rows to render
+    await waitFor(() => {
+      expect(screen.getByText('2026-03-28')).toBeInTheDocument()
+    })
+
+    // Formatted request counts
+    expect(screen.getByText('120')).toBeInTheDocument()
+    expect(screen.getByText('80')).toBeInTheDocument()
+    expect(screen.getByText('200')).toBeInTheDocument()
+
+    // Device counts
+    expect(screen.getByText('5')).toBeInTheDocument()
+  })
+
+  it('fetches and displays model stats table', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    expect(screen.getByText('按模型统计')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByText('gpt-4o')).toBeInTheDocument()
+    })
+
+    expect(screen.getByText('claude-sonnet-4-20250514')).toBeInTheDocument()
+
+    // Success rate: 0.98 -> "98.0%"
+    expect(screen.getByText('98.0%')).toBeInTheDocument()
+
+    // Avg latency: 450.3 -> "450ms"
+    expect(screen.getByText('450ms')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner before data loads', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockDailyStats)
+      }),
+      http.get('*/api/v1/telemetry/stats', async () => {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    // Ant Design Spin component renders a .ant-spin element
+    const spinner = document.querySelector('.ant-spin')
+    expect(spinner).toBeTruthy()
+
+    // Wait for loading to complete so afterEach cleanup is clean
+    await waitFor(() => {
+      expect(screen.getByText('用量统计')).toBeInTheDocument()
+    })
+  })
+
+  it('shows ErrorState when daily stats request fails', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json(
+          { error: 'internal_error', message: '服务器内部错误' },
+          { status: 500 },
+        )
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json(mockModelStats)
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('服务器内部错误')).toBeInTheDocument()
+    })
+
+    // ErrorState renders a retry button (antd v6 may split Chinese characters)
+    expect(screen.getByRole('button', { name: /重.*试/ })).toBeInTheDocument()
+  })
+
+  it('calculates totals correctly from daily data', async () => {
+    server.use(
+      http.get('*/api/v1/telemetry/daily', () => {
+        return HttpResponse.json([
+          {
+            day: '2026-03-30',
+            request_count: 1500,
+            input_tokens: 10000,
+            output_tokens: 3000,
+            unique_devices: 2,
+          },
+        ])
+      }),
+      http.get('*/api/v1/telemetry/stats', () => {
+        return HttpResponse.json([])
+      }),
+    )
+
+    renderWithProviders(<Usage />)
+
+    // Total requests: 1500 (formatted as "1,500" by Statistic)
+    await waitFor(() => {
+      const elements = screen.getAllByText('1,500')
+      expect(elements.length).toBeGreaterThanOrEqual(1)
+    })
+
+    // Total tokens: 10000 + 3000 = 13,000
+    expect(screen.getAllByText('13,000').length).toBeGreaterThanOrEqual(1)
+  })
+})