feat(usage): enhance dashboard with auto-refresh control and robust formatting (#942)

* style: format code and apply clippy lint fixes

* feat(usage): enhance dashboard with auto-refresh control and robust formatting

- Add configurable auto-refresh interval toggle (off/5s/10s/30s/60s) to usage dashboard
- Extract shared format utilities (fmtUsd, fmtInt, parseFiniteNumber, getLocaleFromLanguage)
- Refactor request log time filtering to rolling vs fixed mode with validation
- Use stable serializable query keys instead of filter objects
- Handle NaN/Infinity safely in number formatting across all usage components
- Use RFC 3339 date format in backend trend data

src/components/usage/ModelStatsTable.tsx

@@ -8,10 +8,17 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useModelStats } from "@/lib/query/usage";
+import { fmtUsd } from "./format";
 
-export function ModelStatsTable() {
+interface ModelStatsTableProps {
+  refreshIntervalMs: number;
+}
+
+export function ModelStatsTable({ refreshIntervalMs }: ModelStatsTableProps) {
   const { t } = useTranslation();
-  const { data: stats, isLoading } = useModelStats();
+  const { data: stats, isLoading } = useModelStats({
+    refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
+  });
 
   if (isLoading) {
     return <div className="h-[400px] animate-pulse rounded bg-gray-100" />;
@@ -60,10 +67,10 @@ export function ModelStatsTable() {
                   {stat.totalTokens.toLocaleString()}
                 </TableCell>
                 <TableCell className="text-right">
-                  ${parseFloat(stat.totalCost).toFixed(4)}
+                  {fmtUsd(stat.totalCost, 4)}
                 </TableCell>
                 <TableCell className="text-right">
-                  ${parseFloat(stat.avgCostPerRequest).toFixed(6)}
+                  {fmtUsd(stat.avgCostPerRequest, 6)}
                 </TableCell>
               </TableRow>
             ))