feat: add token usage statistics page in Settings

New "Usage" tab in Settings showing token consumption analytics:

- **Data cards**: Total Tokens, Total Cost, Sessions, Cache Hit Rate
- **Bar chart**: Daily token usage with model/provider color grouping
  using recharts v3, with custom tooltip and continuous date x-axis
- **Provider tracking**: Each session now records the active provider
  name (e.g. "Kimi Coding Plan") so the chart distinguishes usage
  across different providers, not just model names

Backend changes (db.ts):
- Added `provider_name` column to chat_sessions with auto-migration
- Added `getTokenUsageStats(days)` with summary + daily aggregation
- SQL uses `json_valid()` guard to prevent malformed JSON crashes
- Fixed off-by-one: 7D now shows exactly 7 calendar days, not 8
- Provider-qualified grouping: shows provider name when set,
  plain model name when using direct Anthropic

API changes (route.ts):
- Persists effectiveModel and activeProvider name on every message
- Captures model from SDK init event for accurate tracking
- New GET /api/usage/stats endpoint

Frontend fixes:
- SettingsLayout: replaced useEffect+setState with useSyncExternalStore
  to fix react-hooks/set-state-in-effect lint error
- UsageStatsSection: AbortController prevents request race on rapid
  range switching; cache hit rate formula corrected to
  cache_read/(cache_read+input); date gaps filled with zeros for
  continuous x-axis
- Full i18n support (en + zh)

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

Author: 7418

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "codepilot",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "private": true,
   "author": {
     "name": "op7418",
@@ -45,6 +45,7 @@
     "react-dom": "19.2.3",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
+    "recharts": "^3.7.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^3.22.0",

package.json

@@ -1,6 +1,6 @@
 import { NextRequest } from 'next/server';
 import { streamClaude } from '@/lib/claude-client';
-import { addMessage, getSession, updateSessionTitle, updateSdkSessionId, getSetting } from '@/lib/db';
+import { addMessage, getSession, updateSessionTitle, updateSdkSessionId, updateSessionModel, updateSessionProvider, getSetting, getActiveProvider } from '@/lib/db';
 import type { SendMessageRequest, SSEEvent, TokenUsage, MessageContentBlock, FileAttachment } from '@/types';
 import fs from 'fs';
 import path from 'path';
@@ -57,6 +57,17 @@ export async function POST(request: NextRequest) {
     // Determine model: request override > session model > default setting
     const effectiveModel = model || session.model || getSetting('default_model') || undefined;
 
+    // Persist model and provider to session so usage stats can group by model+provider.
+    // This runs on every message but the DB writes are cheap (single UPDATE by PK).
+    if (effectiveModel && effectiveModel !== session.model) {
+      updateSessionModel(session_id, effectiveModel);
+    }
+    const activeProvider = getActiveProvider();
+    const providerName = activeProvider?.name || '';
+    if (providerName !== (session.provider_name || '')) {
+      updateSessionProvider(session_id, providerName);
+    }
+
     // Determine permission mode from chat mode: code → acceptEdits, plan → plan, ask → default (no tools)
     const effectiveMode = mode || session.mode || 'code';
     let permissionMode: string;
@@ -185,12 +196,15 @@ async function collectStreamResponse(stream: ReadableStream<string>, sessionId:
                 // skip malformed tool_result data
               }
             } else if (event.type === 'status') {
-              // Capture SDK session_id from init event and persist it
+              // Capture SDK session_id and model from init event and persist them
               try {
                 const statusData = JSON.parse(event.data);
                 if (statusData.session_id) {
                   updateSdkSessionId(sessionId, statusData.session_id);
                 }
+                if (statusData.model) {
+                  updateSessionModel(sessionId, statusData.model);
+                }
               } catch {
                 // skip malformed status data
               }

src/app/api/chat/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest } from 'next/server';
+import { getTokenUsageStats } from '@/lib/db';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams;
+    const daysParam = searchParams.get('days');
+    const days = daysParam ? Math.min(Math.max(parseInt(daysParam, 10) || 30, 1), 365) : 30;
+
+    const stats = getTokenUsageStats(days);
+    return Response.json(stats);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to fetch usage stats';
+    return Response.json({ error: message }, { status: 500 });
+  }
+}