@raingor/pi-web-switch 0.3.1 → 0.3.2

package/src/components/dashboard/DashboardPage.tsx

@@ -2,9 +2,9 @@ import { useState, useEffect, useCallback } from "react";
 import { useConfigStore } from "@/store/config-store";
 import { useTranslation } from "@/lib/i18n";
 import { useCurrency } from "@/lib/currency";
-import { formatTokens, formatCost, formatNumber, cn, USD_TO_CNY } from "@/lib/utils";
+import { formatCost, formatNumber, cn, USD_TO_CNY } from "@/lib/utils";
 import {
-  Activity, DollarSign, BarChart3, ArrowUp, ArrowDown, Database, DollarSignIcon, RefreshCw,
+  Activity, DollarSign, BarChart3, ArrowUp, ArrowDown, Database, DollarSignIcon, RefreshCw, Download,
 } from "lucide-react";
 import {
   AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer,
@@ -71,13 +71,9 @@ interface UsageRangeData {
 
 type RangeKey = "today" | "7d" | "30d" | "custom";
 type TabKey = "log" | "provider" | "model";
+type SortDir = "asc" | "desc";
 
-const RANGE_OPTIONS: { key: RangeKey; label: string }[] = [
-  { key: "today", label: "Today" },
-  { key: "7d", label: "7 Days" },
-  { key: "30d", label: "30 Days" },
-  { key: "custom", label: "Custom" },
-];
+const RANGE_KEYS: RangeKey[] = ["today", "7d", "30d", "custom"];
 
 const COLORS = ["#3b82f6", "#10b981", "#8b5cf6", "#f59e0b", "#ef4444"];
 
@@ -89,13 +85,7 @@ const CHART_LINE_COLORS: Record<string, string> = {
   cost: "#ef4444",
 };
 
-const CHART_LABELS: Record<string, string> = {
-  input: "Input",
-  output: "Output",
-  cacheRead: "Cache Hit",
-  cacheWrite: "Cache Create",
-  cost: "Cost",
-};
+const LOG_PAGE_SIZE = 20;
 
 // ─── Helpers ────────────────────────────────────────────
 
@@ -124,17 +114,51 @@ function formatCostShort(n: number): string {
   return `$${n.toFixed(4)}`;
 }
 
-function formatCostShortCNY(n: number): string {
-  const cny = n * USD_TO_CNY;
-  if (cny >= 1) return `¥${cny.toFixed(2)}`;
-  return `¥${cny.toFixed(4)}`;
-}
-
 function formatDateShort(dateStr: string): string {
   const d = new Date(dateStr + "T00:00:00");
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
 
+function localDateStr(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+/** Previous period of equal length, for period-over-period trends. */
+function getPrevRange(range: RangeKey): { from: string; to: string } | null {
+  const now = new Date();
+  const shift = (days: number) => {
+    const d = new Date(now);
+    d.setDate(d.getDate() - days);
+    return localDateStr(d);
+  };
+  if (range === "today") return { from: shift(1), to: shift(1) };
+  if (range === "7d") return { from: shift(13), to: shift(7) };
+  if (range === "30d") return { from: shift(59), to: shift(30) };
+  return null; // custom: no comparable previous period
+}
+
+function sortRows<T extends Record<string, unknown>>(rows: T[], key: string, dir: SortDir): T[] {
+  return [...rows].sort((a, b) => {
+    const av = Number(a[key] ?? 0);
+    const bv = Number(b[key] ?? 0);
+    return dir === "desc" ? bv - av : av - bv;
+  });
+}
+
+function downloadCsv(filename: string, headers: string[], rows: (string | number)[][]) {
+  const esc = (v: string | number) => {
+    const s = String(v);
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  };
+  const csv = [headers, ...rows].map((r) => r.map(esc).join(",")).join("\n");
+  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
 // ─── Stat Card ──────────────────────────────────────────
 
 function StatCard({
@@ -212,6 +236,34 @@ function BreakdownRow({ label, value, total, color, lang = "en" }: { label: stri
   );
 }
 
+// ─── Sortable Table Header ──────────────────────────────
+
+function SortableTh({
+  label,
+  sortKey,
+  sort,
+  onSort,
+}: {
+  label: string;
+  sortKey: string;
+  sort: { key: string; dir: SortDir };
+  onSort: (key: string) => void;
+}) {
+  const active = sort.key === sortKey;
+  return (
+    <th
+      className="px-4 py-3 text-right font-medium cursor-pointer select-none"
+      style={{ color: active ? "#3b82f6" : "var(--muted-text)" }}
+      onClick={() => onSort(sortKey)}
+    >
+      <span className="inline-flex items-center gap-0.5">
+        {label}
+        {active && (sort.dir === "desc" ? <ArrowDown className="h-3 w-3" /> : <ArrowUp className="h-3 w-3" />)}
+      </span>
+    </th>
+  );
+}
+
 // ─── Main Component ─────────────────────────────────────
 
 export function DashboardPage() {
@@ -224,25 +276,52 @@ export function DashboardPage() {
   const [tab, setTab] = useState<TabKey>("log");
   const [data, setData] = useState<UsageRangeData | null>(null);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [autoRefresh, setAutoRefresh] = useState(true);
   const [refreshInterval, setRefreshInterval] = useState(30);
   const [showIntervalPicker, setShowIntervalPicker] = useState(false);
   const [lastUpdated, setLastUpdated] = useState<string | null>(null);
+  const [logPage, setLogPage] = useState(1);
+  const [providerSort, setProviderSort] = useState<{ key: string; dir: SortDir }>({ key: "totalCost", dir: "desc" });
+  const [modelSort, setModelSort] = useState<{ key: string; dir: SortDir }>({ key: "totalCost", dir: "desc" });
+  const [prevTotals, setPrevTotals] = useState<{ tokens: number; cost: number } | null>(null);
+
+  const customInvalid = range === "custom" && !!customFrom && !!customTo && customFrom > customTo;
 
   const fetchData = useCallback(() => {
-    if (!initialized) return;
+    if (!initialized || customInvalid) return;
     let url = "/api/pi/usage-range?range=" + range;
     if (range === "custom" && customFrom) {
       url += `&from=${customFrom}&to=${customTo || customFrom}`;
     }
+    setRefreshing(true);
     fetch(url)
       .then((r) => r.json())
-      .then((d) => { setData(d); setLoading(false); setLastUpdated(new Date().toLocaleTimeString()); })
-      .catch(() => setLoading(false));
-  }, [initialized, range, customFrom, customTo]);
+      .then((d) => {
+        setData(d);
+        setLoading(false);
+        setRefreshing(false);
+        setLastUpdated(new Date().toLocaleTimeString());
+      })
+      .catch(() => { setLoading(false); setRefreshing(false); });
+
+    // Previous period of equal length → period-over-period trend on stat cards
+    const prev = getPrevRange(range);
+    if (prev) {
+      fetch(`/api/pi/usage-range?range=custom&from=${prev.from}&to=${prev.to}`)
+        .then((r) => r.json())
+        .then((p) => setPrevTotals({ tokens: p.totalTokens ?? 0, cost: p.totalCost ?? 0 }))
+        .catch(() => setPrevTotals(null));
+    } else {
+      setPrevTotals(null);
+    }
+  }, [initialized, range, customFrom, customTo, customInvalid]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
+  // Reset request-log pagination when the queried range changes
+  useEffect(() => { setLogPage(1); }, [range, customFrom, customTo]);
+
   // Auto-refresh with configurable interval (seconds)
   useEffect(() => {
     if (!autoRefresh || refreshInterval <= 0) return;
@@ -265,6 +344,44 @@ export function DashboardPage() {
     requests: d.requests,
   }));
 
+  // Period-over-period trends (undefined → hidden)
+  const tokenTrend = data && prevTotals && prevTotals.tokens > 0
+    ? ((data.totalTokens - prevTotals.tokens) / prevTotals.tokens) * 100
+    : undefined;
+  const costTrend = data && prevTotals && prevTotals.cost > 0
+    ? ((data.totalCost - prevTotals.cost) / prevTotals.cost) * 100
+    : undefined;
+
+  // Sorted stats + request-log pagination
+  const sortedProviders = sortRows(data?.providerStats ?? [], providerSort.key, providerSort.dir);
+  const sortedModels = sortRows(data?.modelStats ?? [], modelSort.key, modelSort.dir);
+  const providerTotalCost = (data?.providerStats ?? []).reduce((s, p) => s + p.totalCost, 0);
+  const totalLogPages = Math.max(1, Math.ceil((data?.requestLog.length ?? 0) / LOG_PAGE_SIZE));
+  const currentLogPage = Math.min(logPage, totalLogPages);
+  const pagedLog = (data?.requestLog ?? []).slice((currentLogPage - 1) * LOG_PAGE_SIZE, currentLogPage * LOG_PAGE_SIZE);
+
+  const fmtCostCell = (v: number) => (currency === "CNY" ? `¥${(v * USD_TO_CNY).toFixed(4)}` : formatCostShort(v));
+
+  const toggleSort = (setter: typeof setProviderSort) => (key: string) =>
+    setter((s) => (s.key === key ? { key, dir: s.dir === "desc" ? "asc" : "desc" } : { key, dir: "desc" }));
+
+  const handleExport = () => {
+    if (!data) return;
+    if (tab === "log") {
+      downloadCsv(`pi-usage-log-${range}.csv`,
+        ["time", "provider", "model", "input", "output", "cost_usd", "requests"],
+        data.requestLog.map((r) => [r.timestamp, r.providerId, r.modelId, r.input, r.output, r.cost, r.requests]));
+    } else if (tab === "provider") {
+      downloadCsv(`pi-usage-provider-${range}.csv`,
+        ["provider", "tokens", "input", "output", "cost_usd", "requests", "models"],
+        sortedProviders.map((p) => [p.providerId, p.totalTokens, p.totalInput, p.totalOutput, p.totalCost, p.totalRequests, p.modelCount]));
+    } else {
+      downloadCsv(`pi-usage-model-${range}.csv`,
+        ["model", "provider", "tokens", "input", "output", "cost_usd", "requests"],
+        sortedModels.map((m) => [m.modelId, m.providerId, m.totalTokens, m.totalInput, m.totalOutput, m.totalCost, m.totalRequests]));
+    }
+  };
+
   return (
     <div className="space-y-5">
       {/* Title + Time Range Selector + Currency Toggle */}
@@ -273,7 +390,7 @@ export function DashboardPage() {
           <h1 className="text-xl font-bold" style={{ color: "var(--page-text)" }}>{t("dashboard.title")}</h1>
           <p className="text-xs mt-0.5" style={{ color: "var(--muted-text)" }}>
             {data ? t("dashboard.requests_count", String(data.requestLog.length), formatCost(data.totalCost, currency)) : ""}
-            {lastUpdated && <span className="ml-2">· Last updated {lastUpdated}</span>}
+            {lastUpdated && <span className="ml-2">· {t("dashboard.last_updated", lastUpdated)}</span>}
           </p>
         </div>
         <div className="flex items-center gap-2">
@@ -281,7 +398,7 @@ export function DashboardPage() {
             onClick={toggleCurrency}
             className="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
             style={{ borderColor: "var(--card-border)", color: "var(--muted-text)", backgroundColor: "var(--card-bg)" }}
-            title={currency === "USD" ? "Switch to CNY" : "Switch to USD"}
+            title={t("dashboard.switch_currency")}
           >
             <DollarSignIcon className="h-3.5 w-3.5" />
             {currency}
@@ -290,9 +407,9 @@ export function DashboardPage() {
             onClick={() => { fetchData(); }}
             className="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-gray-800/30"
             style={{ borderColor: "var(--card-border)", color: "var(--muted-text)", backgroundColor: "var(--card-bg)" }}
-            title="Refresh now"
+            title={t("dashboard.refresh_now")}
           >
-            <RefreshCw className="h-3.5 w-3.5" />
+            <RefreshCw className={cn("h-3.5 w-3.5", refreshing && "animate-spin")} />
           </button>
           <div className="relative">
             <button
@@ -307,7 +424,7 @@ export function DashboardPage() {
             >
               <span className="inline-block h-2 w-2 rounded-full"
                 style={{ backgroundColor: autoRefresh ? "#10b981" : "var(--subtle-text)" }} />
-              {autoRefresh ? `${refreshInterval}s` : "Off"}
+              {autoRefresh ? `${refreshInterval}s` : t("dashboard.off")}
             </button>
             {showIntervalPicker && (
               <div
@@ -318,7 +435,7 @@ export function DashboardPage() {
                 }}
               >
                 <div className="px-4 py-2 text-xs font-medium border-b" style={{ color: "var(--muted-text)", borderColor: "var(--card-border)" }}>
-                  {t("dashboard.range.today")}
+                  {t("dashboard.refresh_interval")}
                 </div>
                 {[5, 10, 30, 60].map((s) => (
                   <button
@@ -347,19 +464,19 @@ export function DashboardPage() {
             )}
           </div>
           <div className="flex items-center gap-1 rounded-lg border p-0.5" style={{ borderColor: "var(--card-border)", backgroundColor: "var(--page-bg)" }}>
-          {RANGE_OPTIONS.map((opt) => (
+          {RANGE_KEYS.map((key) => (
             <button
-              key={opt.key}
-              onClick={() => setRange(opt.key)}
+              key={key}
+              onClick={() => setRange(key)}
               className={cn(
                 "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
-                range === opt.key
+                range === key
                   ? "text-white"
                   : "hover:bg-gray-800/30"
               )}
-              style={range === opt.key ? { backgroundColor: "#3b82f6", color: "#fff" } : { color: "var(--muted-text)" }}
+              style={range === key ? { backgroundColor: "#3b82f6", color: "#fff" } : { color: "var(--muted-text)" }}
             >
-              {t("dashboard.range." + opt.key)}
+              {t("dashboard.range." + key)}
             </button>
           ))}
             </div>
@@ -368,13 +485,13 @@ export function DashboardPage() {
 
       {/* Custom Date Picker */}
       {range === "custom" && (
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <input
             type="date"
             value={customFrom || today}
             onChange={(e) => setCustomFrom(e.target.value)}
             className="rounded-lg border px-3 py-1.5 text-xs"
-            style={{ backgroundColor: "var(--input-bg)", borderColor: "var(--input-border)", color: "var(--input-text)" }}
+            style={{ backgroundColor: "var(--input-bg)", borderColor: customInvalid ? "#ef4444" : "var(--input-border)", color: "var(--input-text)" }}
           />
           <span className="text-xs" style={{ color: "var(--muted-text)" }}>{t("dashboard.to")}</span>
           <input
@@ -382,8 +499,9 @@ export function DashboardPage() {
             value={customTo || today}
             onChange={(e) => setCustomTo(e.target.value)}
             className="rounded-lg border px-3 py-1.5 text-xs"
-            style={{ backgroundColor: "var(--input-bg)", borderColor: "var(--input-border)", color: "var(--input-text)" }}
+            style={{ backgroundColor: "var(--input-bg)", borderColor: customInvalid ? "#ef4444" : "var(--input-border)", color: "var(--input-text)" }}
           />
+          {customInvalid && <span className="text-xs text-red-400">{t("dashboard.invalid_range")}</span>}
         </div>
       )}
 
@@ -395,7 +513,7 @@ export function DashboardPage() {
       )}
 
       {!loading && data && (
-        <>
+        <div className={cn("space-y-5 transition-opacity", refreshing && "opacity-60")}>
           {/* Overview Cards */}
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
             <StatCard
@@ -403,6 +521,8 @@ export function DashboardPage() {
               value={data.totalTokens.toLocaleString("en-US")}
               icon={<Activity className="h-4 w-4" style={{ color: "#3b82f6" }} />}
               subtitle={`≈ ${formatTokensShort(data.totalTokens, lang)}`}
+              trend={tokenTrend}
+              trendLabel={tokenTrend !== undefined ? t("dashboard.vs_prev") : undefined}
             >
               <div className="mt-3 space-y-0.5 border-t pt-3" style={{ borderColor: "var(--card-border)" }}>
                 <BreakdownRow label={t("dashboard.input")} value={data.totalInput} total={data.totalTokens} color="#3b82f6" lang={lang} />
@@ -421,9 +541,11 @@ export function DashboardPage() {
 
             <StatCard
               title={t("dashboard.total_cost")}
-              value={formatCost(data.totalCost)}
+              value={formatCost(data.totalCost, currency)}
               icon={<DollarSign className="h-4 w-4" style={{ color: "#f59e0b" }} />}
               subtitle={`${currency === "CNY" ? `¥${(data.totalCost * USD_TO_CNY).toFixed(4)}` : `$${data.totalCost.toFixed(4)}`} ${currency}`}
+              trend={costTrend}
+              trendLabel={costTrend !== undefined ? t("dashboard.vs_prev") : undefined}
             />
 
             <StatCard
@@ -470,7 +592,7 @@ export function DashboardPage() {
           {/* Tabs: Request Log / Provider / Model */}
           <div className="rounded-xl border overflow-hidden" style={{ borderColor: "var(--card-border)", backgroundColor: "var(--card-bg)" }}>
             {/* Tab Header */}
-            <div className="flex border-b" style={{ borderColor: "var(--card-border)" }}>
+            <div className="flex items-center border-b" style={{ borderColor: "var(--card-border)" }}>
               {([
                 { key: "log" as TabKey, label: "dashboard.request_log" },
                 { key: "provider" as TabKey, label: "dashboard.provider_stats" },
@@ -491,51 +613,83 @@ export function DashboardPage() {
                   {t(tabItem.label)}
                 </button>
               ))}
+              <button
+                onClick={handleExport}
+                className="ml-auto mr-3 flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors hover:bg-gray-800/30"
+                style={{ color: "var(--muted-text)" }}
+              >
+                <Download className="h-3.5 w-3.5" />
+                {t("dashboard.export_csv")}
+              </button>
             </div>
 
             {/* Tab Content */}
             <div className="overflow-x-auto">
               {tab === "log" && (
-                <table className="w-full text-xs">
-                  <thead>
-                    <tr className="border-b" style={{ borderColor: "var(--card-border)" }}>
-                      <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.time")}</th>
-                      <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.provider")}</th>
-                      <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.model")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.input")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.output")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.cost")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.requests")}</th>
-                      <th className="px-4 py-3 text-center font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.status")}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {data.requestLog.length === 0 ? (
-                      <tr>
-                        <td colSpan={8} className="px-4 py-8 text-center" style={{ color: "var(--subtle-text)" }}>
-                          {t("dashboard.no_data")}
-                        </td>
+                <>
+                  <table className="w-full text-xs">
+                    <thead>
+                      <tr className="border-b" style={{ borderColor: "var(--card-border)" }}>
+                        <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.time")}</th>
+                        <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.provider")}</th>
+                        <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.model")}</th>
+                        <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.input")}</th>
+                        <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.output")}</th>
+                        <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.cost")}</th>
+                        <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.requests")}</th>
                       </tr>
-                    ) : (
-                      data.requestLog.slice(0, 100).map((r, i) => (
-                        <tr key={i} className="border-b" style={{ borderColor: "var(--card-border)" }}>
-                          <td className="px-4 py-2.5 whitespace-nowrap" style={{ color: "var(--page-text)" }}>{r.timestamp}</td>
-                          <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{r.providerId}</td>
-                          <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{r.modelId}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.input, lang)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.output, lang)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{currency === "CNY" ? `¥${(r.cost * USD_TO_CNY).toFixed(4)}` : formatCostShort(r.cost)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{r.requests}</td>
-                          <td className="px-4 py-2.5 text-center">
-                            <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium text-emerald-400" style={{ backgroundColor: "rgba(16,185,129,0.1)" }}>
-                              200
-                            </span>
+                    </thead>
+                    <tbody>
+                      {pagedLog.length === 0 ? (
+                        <tr>
+                          <td colSpan={7} className="px-4 py-8 text-center" style={{ color: "var(--subtle-text)" }}>
+                            {t("dashboard.no_data")}
                           </td>
                         </tr>
-                      ))
-                    )}
-                  </tbody>
-                </table>
+                      ) : (
+                        pagedLog.map((r, i) => (
+                          <tr key={i} className="border-b" style={{ borderColor: "var(--card-border)" }}>
+                            <td className="px-4 py-2.5 whitespace-nowrap" style={{ color: "var(--page-text)" }}>{r.timestamp}</td>
+                            <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{r.providerId}</td>
+                            <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{r.modelId}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.input, lang)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.output, lang)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{fmtCostCell(r.cost)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{r.requests}</td>
+                          </tr>
+                        ))
+                      )}
+                    </tbody>
+                  </table>
+                  {data.requestLog.length > LOG_PAGE_SIZE && (
+                    <div className="flex items-center justify-between px-4 py-3">
+                      <span className="text-xs" style={{ color: "var(--subtle-text)" }}>
+                        {t("dashboard.total_items", String(data.requestLog.length))}
+                      </span>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setLogPage((p) => Math.max(1, p - 1))}
+                          disabled={currentLogPage <= 1}
+                          className="rounded-lg border px-3 py-1 text-xs disabled:opacity-40"
+                          style={{ borderColor: "var(--card-border)", color: "var(--muted-text)" }}
+                        >
+                          {t("dashboard.prev_page")}
+                        </button>
+                        <span className="text-xs" style={{ color: "var(--muted-text)" }}>
+                          {currentLogPage} / {totalLogPages}
+                        </span>
+                        <button
+                          onClick={() => setLogPage((p) => Math.min(totalLogPages, p + 1))}
+                          disabled={currentLogPage >= totalLogPages}
+                          className="rounded-lg border px-3 py-1 text-xs disabled:opacity-40"
+                          style={{ borderColor: "var(--card-border)", color: "var(--muted-text)" }}
+                        >
+                          {t("dashboard.next_page")}
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </>
               )}
 
               {tab === "provider" && (
@@ -543,29 +697,41 @@ export function DashboardPage() {
                   <thead>
                     <tr className="border-b" style={{ borderColor: "var(--card-border)" }}>
                       <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.provider")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>Tokens</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.input")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.output")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.cost")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.requests")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>Models</th>
+                      <SortableTh label={t("dashboard.tokens")} sortKey="totalTokens" sort={providerSort} onSort={toggleSort(setProviderSort)} />
+                      <SortableTh label={t("dashboard.input")} sortKey="totalInput" sort={providerSort} onSort={toggleSort(setProviderSort)} />
+                      <SortableTh label={t("dashboard.output")} sortKey="totalOutput" sort={providerSort} onSort={toggleSort(setProviderSort)} />
+                      <SortableTh label={t("dashboard.cost")} sortKey="totalCost" sort={providerSort} onSort={toggleSort(setProviderSort)} />
+                      <SortableTh label={t("dashboard.requests")} sortKey="totalRequests" sort={providerSort} onSort={toggleSort(setProviderSort)} />
+                      <SortableTh label={t("dashboard.models_count")} sortKey="modelCount" sort={providerSort} onSort={toggleSort(setProviderSort)} />
+                      <th className="px-4 py-3 text-left font-medium w-44" style={{ color: "var(--muted-text)" }}>{t("dashboard.cost_share")}</th>
                     </tr>
                   </thead>
                   <tbody>
-                    {data.providerStats.length === 0 ? (
-                      <tr><td colSpan={7} className="px-4 py-8 text-center" style={{ color: "var(--subtle-text)" }}>{t("dashboard.no_data")}</td></tr>
+                    {sortedProviders.length === 0 ? (
+                      <tr><td colSpan={8} className="px-4 py-8 text-center" style={{ color: "var(--subtle-text)" }}>{t("dashboard.no_data")}</td></tr>
                     ) : (
-                      data.providerStats.map((p, i) => (
-                        <tr key={i} className="border-b" style={{ borderColor: "var(--card-border)" }}>
-                          <td className="px-4 py-2.5 font-medium" style={{ color: "var(--page-text)" }}>{p.providerId}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalTokens, lang)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalInput, lang)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalOutput, lang)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{currency === "CNY" ? `¥${(p.totalCost * USD_TO_CNY).toFixed(4)}` : formatCostShort(p.totalCost)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{p.totalRequests}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{p.modelCount}</td>
-                        </tr>
-                      ))
+                      sortedProviders.map((p, i) => {
+                        const pct = providerTotalCost > 0 ? (p.totalCost / providerTotalCost) * 100 : 0;
+                        return (
+                          <tr key={p.providerId} className="border-b" style={{ borderColor: "var(--card-border)" }}>
+                            <td className="px-4 py-2.5 font-medium" style={{ color: "var(--page-text)" }}>{p.providerId}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalTokens, lang)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalInput, lang)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalOutput, lang)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{fmtCostCell(p.totalCost)}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{p.totalRequests}</td>
+                            <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{p.modelCount}</td>
+                            <td className="px-4 py-2.5">
+                              <div className="flex items-center gap-2">
+                                <div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: "var(--card-border)" }}>
+                                  <div className="h-full rounded-full" style={{ width: `${pct}%`, backgroundColor: COLORS[i % COLORS.length] ?? "#3b82f6" }} />
+                                </div>
+                                <span className="text-xs w-11 text-right" style={{ color: "var(--subtle-text)" }}>{pct.toFixed(1)}%</span>
+                              </div>
+                            </td>
+                          </tr>
+                        );
+                      })
                     )}
                   </tbody>
                 </table>
@@ -577,25 +743,25 @@ export function DashboardPage() {
                     <tr className="border-b" style={{ borderColor: "var(--card-border)" }}>
                       <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.model")}</th>
                       <th className="px-4 py-3 text-left font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.provider")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>Tokens</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.input")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.output")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.cost")}</th>
-                      <th className="px-4 py-3 text-right font-medium" style={{ color: "var(--muted-text)" }}>{t("dashboard.requests")}</th>
+                      <SortableTh label={t("dashboard.tokens")} sortKey="totalTokens" sort={modelSort} onSort={toggleSort(setModelSort)} />
+                      <SortableTh label={t("dashboard.input")} sortKey="totalInput" sort={modelSort} onSort={toggleSort(setModelSort)} />
+                      <SortableTh label={t("dashboard.output")} sortKey="totalOutput" sort={modelSort} onSort={toggleSort(setModelSort)} />
+                      <SortableTh label={t("dashboard.cost")} sortKey="totalCost" sort={modelSort} onSort={toggleSort(setModelSort)} />
+                      <SortableTh label={t("dashboard.requests")} sortKey="totalRequests" sort={modelSort} onSort={toggleSort(setModelSort)} />
                     </tr>
                   </thead>
                   <tbody>
-                    {data.modelStats.length === 0 ? (
+                    {sortedModels.length === 0 ? (
                       <tr><td colSpan={7} className="px-4 py-8 text-center" style={{ color: "var(--subtle-text)" }}>{t("dashboard.no_data")}</td></tr>
                     ) : (
-                      data.modelStats.map((m, i) => (
-                        <tr key={i} className="border-b" style={{ borderColor: "var(--card-border)" }}>
+                      sortedModels.map((m) => (
+                        <tr key={`${m.providerId}/${m.modelId}`} className="border-b" style={{ borderColor: "var(--card-border)" }}>
                           <td className="px-4 py-2.5 font-medium" style={{ color: "var(--page-text)" }}>{m.modelId}</td>
                           <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{m.providerId}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalTokens, lang)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalInput, lang)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalOutput, lang)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{currency === "CNY" ? `¥${(m.totalCost * USD_TO_CNY).toFixed(4)}` : formatCostShort(m.totalCost)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{fmtCostCell(m.totalCost)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{m.totalRequests}</td>
                         </tr>
                       ))
@@ -605,16 +771,8 @@ export function DashboardPage() {
               )}
             </div>
           </div>
-        </>
+        </div>
       )}
     </div>
   );
 }
-
-function TablePlaceholder({ message }: { message: string }) {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <p className="text-sm" style={{ color: "var(--subtle-text)" }}>{message}</p>
-    </div>
-  );
-}

package/src/components/layout/Sidebar.tsx

@@ -6,6 +6,7 @@ import {
   History,
   Brain,
   Globe,
+  Plug,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useTranslation, LANGUAGES } from "@/lib/i18n";
@@ -15,6 +16,7 @@ const navItems = [
   { to: "/", icon: LayoutDashboard, key: "nav.dashboard" },
   { to: "/sessions", icon: History, key: "nav.sessions" },
   { to: "/memory", icon: Brain, key: "nav.memory" },
+  { to: "/providers", icon: Plug, key: "nav.providers_models" },
   { to: "/settings", icon: Settings, key: "nav.settings" },
 ];