Refactor global styles and enhance MITM functionality

- Updated global CSS to implement a new brand color palette and improve light/dark theme consistency.
- Enhanced the MitmServerCard component to provide clearer user feedback regarding admin privileges.
- Filtered LLM combos in the CombosPage to ensure only relevant data is displayed.
- Improved APIPageClient layout for better usability and visual consistency.
- Added functionality to save and load DNS tool states in the MITM manager.
- Updated OAuth configuration URLs for Qwen to reflect the new endpoint structure.
- Refined tunnel management logic to improve reliability and user experience.

src/app/(dashboard)/dashboard/usage/page.js

@@ -5,6 +5,13 @@ import { useSearchParams, useRouter } from "next/navigation";
 import { UsageStats, RequestLogger, CardSkeleton, SegmentedControl } from "@/shared/components";
 import RequestDetailsTab from "./components/RequestDetailsTab";
 
+const PERIODS = [
+  { value: "24h", label: "24h" },
+  { value: "7d", label: "7D" },
+  { value: "30d", label: "30D" },
+  { value: "60d", label: "60D" },
+];
+
 export default function UsagePage() {
   return (
     <Suspense fallback={<CardSkeleton />}>
@@ -18,6 +25,7 @@ function UsageContent() {
   const router = useRouter();
 
   const [tabLoading, setTabLoading] = useState(false);
+  const [period, setPeriod] = useState("7d");
 
   const tabFromUrl = searchParams.get("tab");
   const activeTab = tabFromUrl && ["overview", "logs", "details"].includes(tabFromUrl)
@@ -30,21 +38,32 @@ function UsageContent() {
     const params = new URLSearchParams(searchParams);
     params.set("tab", value);
     router.push(`/dashboard/usage?${params.toString()}`, { scroll: false });
-    // Brief loading flash so user sees feedback
     setTimeout(() => setTabLoading(false), 300);
   };
 
   return (
     <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
-      <SegmentedControl
-        options={[
-          { value: "overview", label: "Overview" },
-          { value: "details", label: "Details" },
-        ]}
-        value={activeTab}
-        onChange={handleTabChange}
-        className="w-full sm:w-auto"
-      />
+      {/* Tabs + period selector on same row */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <SegmentedControl
+          options={[
+            { value: "overview", label: "Overview" },
+            { value: "details", label: "Details" },
+          ]}
+          value={activeTab}
+          onChange={handleTabChange}
+          className="w-full sm:w-auto"
+        />
+        {activeTab === "overview" && (
+          <SegmentedControl
+            options={PERIODS}
+            value={period}
+            onChange={setPeriod}
+            size="sm"
+            className="w-full sm:w-auto"
+          />
+        )}
+      </div>
 
       {tabLoading ? (
         <CardSkeleton />
@@ -52,7 +71,7 @@ function UsageContent() {
         <>
           {activeTab === "overview" && (
             <Suspense fallback={<CardSkeleton />}>
-              <UsageStats />
+              <UsageStats period={period} setPeriod={setPeriod} hidePeriodSelector />
             </Suspense>
           )}
           {activeTab === "logs" && <RequestLogger />}
@@ -62,4 +81,3 @@ function UsageContent() {
     </div>
   );
 }
-