fix(usage): default the trend chart to tokens and list it first

Match the heatmap on the same page, which already puts Tokens first
and selects it by default.

src/components/usage/UsageTrendChart.tsx

@@ -179,7 +179,7 @@ export function UsageTrendChart({
   refreshIntervalMs,
 }: UsageTrendChartProps) {
   const { t, i18n } = useTranslation();
-  const [metric, setMetric] = useState<TrendMetric>("requests");
+  const [metric, setMetric] = useState<TrendMetric>("tokens");
   const { startDate, endDate } = resolveUsageRange(range);
   const { data: trends, isLoading } = useUsageTrends(
     range,
@@ -274,8 +274,8 @@ export function UsageTrendChart({
           value={metric}
           onValueChange={setMetric}
           items={[
-            { value: "requests", label: t("usage.trend.requests") },
             { value: "tokens", label: t("usage.trend.tokens") },
+            { value: "requests", label: t("usage.trend.requests") },
             { value: "cost", label: t("usage.trend.cost") },
           ]}
         />

tests/components/UsageTrendChart.render.test.tsx

@@ -39,8 +39,8 @@ describe("UsageTrendChart (single metric)", () => {
     );
 
     const legend = screen.getByTestId("usage-trend-legend");
-    // 默认「请求」，且不再有第二条「成本（右轴）」图例
-    expect(legend).toHaveTextContent("usage.trend.requestsLegend");
+    // 默认「Tokens」（与热力图一致），且不再有第二条「成本（右轴）」图例
+    expect(legend).toHaveTextContent("usage.trend.tokens");
     expect(screen.queryByText(/usage.trend.costLine/)).not.toBeInTheDocument();
 
     await user.click(screen.getByRole("button", { name: "usage.trend.cost" }));
@@ -49,10 +49,10 @@ describe("UsageTrendChart (single metric)", () => {
     );
 
     await user.click(
-      screen.getByRole("button", { name: "usage.trend.tokens" }),
+      screen.getByRole("button", { name: "usage.trend.requests" }),
     );
     expect(screen.getByTestId("usage-trend-legend")).toHaveTextContent(
-      "usage.trend.tokens",
+      "usage.trend.requestsLegend",
     );
   });
 });