diff --git a/.gitignore b/.gitignore
index f9db7ffb..3333d1c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,8 @@ proof_backups
 
 *.todo
 ui_out
+output/
+.pnpm-store/
+
+# env files
+.env*
diff --git a/routstr/core/admin.py b/routstr/core/admin.py
index 7776d5f8..21f54f74 100644
--- a/routstr/core/admin.py
+++ b/routstr/core/admin.py
@@ -26,18 +26,53 @@ logger = get_logger(__name__)
 admin_router = APIRouter(prefix="/admin", include_in_schema=False)
 
 admin_sessions: dict[str, int] = {}
-ADMIN_SESSION_DURATION = 3600
+ADMIN_SESSION_DURATION = 12 * 60 * 60
+
+
+def _current_timestamp() -> int:
+    return int(datetime.now(timezone.utc).timestamp())
+
+
+def _cleanup_expired_admin_sessions(now_timestamp: int | None = None) -> None:
+    current_timestamp = (
+        now_timestamp if now_timestamp is not None else _current_timestamp()
+    )
+    expired_tokens = [
+        token
+        for token, expiry_timestamp in admin_sessions.items()
+        if expiry_timestamp <= current_timestamp
+    ]
+    for token in expired_tokens:
+        admin_sessions.pop(token, None)
+
+
+def _raise_unauthorized(detail: str) -> None:
+    raise HTTPException(
+        status_code=401,
+        detail=detail,
+        headers={"WWW-Authenticate": "Bearer"},
+    )
 
 
 def require_admin_api(request: Request) -> None:
-    auth_header = request.headers.get("Authorization")
-    if auth_header and auth_header.startswith("Bearer "):
-        token = auth_header.split(" ", 1)[1]
-        expiry = admin_sessions.get(token)
-        if expiry and expiry > int(datetime.now(timezone.utc).timestamp()):
-            return
+    auth_header = request.headers.get("Authorization", "")
+    if not auth_header.startswith("Bearer "):
+        _raise_unauthorized("Missing bearer token")
 
-    raise HTTPException(status_code=403, detail="Unauthorized")
+    token = auth_header.split(" ", 1)[1].strip()
+    if not token:
+        _raise_unauthorized("Missing bearer token")
+
+    now_timestamp = _current_timestamp()
+    expiry_timestamp = admin_sessions.get(token)
+    if expiry_timestamp is None:
+        _raise_unauthorized("Invalid session token")
+
+    if expiry_timestamp <= now_timestamp:
+        admin_sessions.pop(token, None)
+        _raise_unauthorized("Session expired")
+
+    _cleanup_expired_admin_sessions(now_timestamp)
 
 
 @admin_router.get("/api/temporary-balances", dependencies=[Depends(require_admin_api)])
@@ -206,18 +241,10 @@ async def admin_login(
         raise HTTPException(status_code=401, detail="Invalid password")
 
     token = secrets.token_urlsafe(32)
-    expiry_timestamp = (
-        int(datetime.now(timezone.utc).timestamp()) + ADMIN_SESSION_DURATION
-    )
+    expiry_timestamp = _current_timestamp() + ADMIN_SESSION_DURATION
     admin_sessions[token] = expiry_timestamp
 
-    expired_tokens = [
-        t
-        for t, exp in admin_sessions.items()
-        if exp <= int(datetime.now(timezone.utc).timestamp())
-    ]
-    for t in expired_tokens:
-        del admin_sessions[t]
+    _cleanup_expired_admin_sessions()
 
     return {"ok": True, "token": token, "expires_in": ADMIN_SESSION_DURATION}
 
@@ -941,7 +968,9 @@ async def get_usage_metrics(
         default=15, ge=1, le=1440, description="Time interval in minutes"
     ),
     hours: int = Query(
-        default=24, ge=1, le=168, description="Hours of history to analyze"
+        default=24,
+        ge=1,
+        description="Hours of history to analyze",
     ),
 ) -> dict:
     """Get usage metrics aggregated by time interval."""
@@ -952,7 +981,9 @@ async def get_usage_metrics(
 async def get_usage_summary(
     request: Request,
     hours: int = Query(
-        default=24, ge=1, le=168, description="Hours of history to analyze"
+        default=24,
+        ge=1,
+        description="Hours of history to analyze",
     ),
 ) -> dict:
     """Get summary statistics for the specified time period."""
@@ -963,7 +994,9 @@ async def get_usage_summary(
 async def get_error_details(
     request: Request,
     hours: int = Query(
-        default=24, ge=1, le=168, description="Hours of history to analyze"
+        default=24,
+        ge=1,
+        description="Hours of history to analyze",
     ),
     limit: int = Query(
         default=100, ge=1, le=1000, description="Maximum number of errors to return"
@@ -979,7 +1012,9 @@ async def get_error_details(
 async def get_revenue_by_model(
     request: Request,
     hours: int = Query(
-        default=24, ge=1, le=168, description="Hours of history to analyze"
+        default=24,
+        ge=1,
+        description="Hours of history to analyze",
     ),
     limit: int = Query(
         default=20, ge=1, le=100, description="Maximum number of models to return"
diff --git a/routstr/core/log_manager.py b/routstr/core/log_manager.py
index 43920605..e3fd52fd 100644
--- a/routstr/core/log_manager.py
+++ b/routstr/core/log_manager.py
@@ -453,7 +453,17 @@ class LogManager:
         self, entries: list[dict], interval_minutes: int, hours_back: int
     ) -> dict:
         time_buckets: dict[str, dict[str, Any]] = defaultdict(
-            lambda: {"requests": 0, "errors": 0, "revenue_msats": 0.0}
+            lambda: {
+                "total_requests": 0,
+                "successful_chat_completions": 0,
+                "failed_requests": 0,
+                "errors": 0,
+                "warnings": 0,
+                "payment_processed": 0,
+                "upstream_errors": 0,
+                "revenue_msats": 0.0,
+                "refunds_msats": 0.0,
+            }
         )
 
         for entry in entries:
@@ -479,10 +489,26 @@ class LogManager:
                 level = entry.get("levelname", "").upper()
 
                 if "received proxy request" in message:
-                    bucket["requests"] += 1
+                    bucket["total_requests"] += 1
+
+                if (
+                    "completed for streaming" in message
+                    or "completed for non-streaming" in message
+                ):
+                    bucket["successful_chat_completions"] += 1
 
                 if level == "ERROR":
                     bucket["errors"] += 1
+                    if "upstream" in message:
+                        bucket["upstream_errors"] += 1
+                elif level == "WARNING":
+                    bucket["warnings"] += 1
+
+                if "upstream request failed" in message or "revert payment" in message:
+                    bucket["failed_requests"] += 1
+
+                if "payment processed successfully" in message:
+                    bucket["payment_processed"] += 1
 
                 if (
                     "completed for streaming" in message
@@ -493,12 +519,20 @@ class LogManager:
                         actual_cost = cost_data.get("total_msats", 0)
                         if isinstance(actual_cost, (int, float)) and actual_cost > 0:
                             bucket["revenue_msats"] += float(actual_cost)
+
+                if "revert payment" in message:
+                    max_cost = entry.get("max_cost_for_model", 0)
+                    if isinstance(max_cost, (int, float)) and max_cost > 0:
+                        bucket["refunds_msats"] += float(max_cost)
             except Exception:
                 continue
 
         result = []
         for bucket_key in sorted(time_buckets.keys()):
-            result.append({"timestamp": bucket_key, **time_buckets[bucket_key]})
+            bucket = dict(time_buckets[bucket_key])
+            # Backward-compatible alias for any callers still reading "requests".
+            bucket["requests"] = bucket["total_requests"]
+            result.append({"timestamp": bucket_key, **bucket})
 
         return {
             "metrics": result,
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
deleted file mode 100644
index 2988de07..00000000
--- a/ui/.eslintrc.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": [
-    "next",
-    "next/core-web-vitals",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "plugins": ["react", "@typescript-eslint"]
-}
diff --git a/ui/.gitignore b/ui/.gitignore
index fcc7df91..ba72a214 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -42,3 +42,4 @@ next-env.d.ts
 
 # favicon conflicts
 /app/favicon.ico
+.pnpm-store/
diff --git a/ui/app/balances/page.tsx b/ui/app/balances/page.tsx
index 89e44f3a..4e962d0c 100644
--- a/ui/app/balances/page.tsx
+++ b/ui/app/balances/page.tsx
@@ -2,12 +2,11 @@
 
 import { useCurrencyStore } from '@/lib/stores/currency';
 import { useQuery } from '@tanstack/react-query';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { DetailedWalletBalance } from '@/components/detailed-wallet-balance';
 import { TemporaryBalances } from '@/components/temporary-balances';
 import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 
 export default function BalancesPage() {
   const { displayUnit } = useCurrencyStore();
@@ -22,39 +21,26 @@ export default function BalancesPage() {
   const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
 
   return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset className='p-0'>
-        <SiteHeader />
-        <div className='container max-w-6xl px-4 py-8 md:px-6 lg:px-8'>
-          <div className='mb-8 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between'>
-            <div>
-              <h1 className='text-3xl font-bold tracking-tight'>Balances</h1>
-              <p className='text-muted-foreground mt-2'>
-                Monitor and manage wallet balances
-              </p>
-            </div>
-            {/* Global currency toggle is now in SiteHeader */}
-          </div>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='Balances'
+          description='Monitor and manage wallet balances across cashu mints and temporary stores.'
+        />
 
-          <div className='grid gap-6'>
-            <div className='col-span-full'>
-              <DetailedWalletBalance
-                refreshInterval={30000}
-                displayUnit={displayUnit}
-                usdPerSat={usdPerSat}
-              />
-            </div>
-            <div className='col-span-full'>
-              <TemporaryBalances
-                refreshInterval={60000}
-                displayUnit={displayUnit}
-                usdPerSat={usdPerSat}
-              />
-            </div>
-          </div>
+        <div className='grid gap-6'>
+          <DetailedWalletBalance
+            refreshInterval={30000}
+            displayUnit={displayUnit}
+            usdPerSat={usdPerSat}
+          />
+          <TemporaryBalances
+            refreshInterval={60000}
+            displayUnit={displayUnit}
+            usdPerSat={usdPerSat}
+          />
         </div>
-      </SidebarInset>
-    </SidebarProvider>
+      </div>
+    </AppPageShell>
   );
 }
diff --git a/ui/app/globals.css b/ui/app/globals.css
index 37756b40..d56b97f0 100644
--- a/ui/app/globals.css
+++ b/ui/app/globals.css
@@ -1,13 +1,133 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
+@import "tailwindcss";
+@import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.dark *, .red *));
+
+:root {
+  --radius: 0.625rem;
+  --font-geist-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  --font-geist-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+.red {
+  --background: oklch(0.14 0.03 24);
+  --foreground: oklch(0.9 0.05 28);
+  --card: oklch(0.17 0.04 24);
+  --card-foreground: oklch(0.9 0.05 28);
+  --popover: oklch(0.17 0.04 24);
+  --popover-foreground: oklch(0.9 0.05 28);
+  --primary: oklch(0.78 0.14 25);
+  --primary-foreground: oklch(0.14 0.03 24);
+  --secondary: oklch(0.22 0.05 24);
+  --secondary-foreground: oklch(0.9 0.05 28);
+  --muted: oklch(0.22 0.05 24);
+  --muted-foreground: oklch(0.72 0.04 26);
+  --accent: oklch(0.25 0.08 25);
+  --accent-foreground: oklch(0.92 0.05 28);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.72 0.11 25 / 24%);
+  --input: oklch(0.75 0.12 25 / 28%);
+  --ring: oklch(0.62 0.12 24);
+}
+
+html.red {
+  color-scheme: dark;
+}
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: Geist, sans-serif;
-  --font-mono: Geist Mono, monospace;
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-border: var(--border);
+  --color-card: var(--card);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -21,194 +141,40 @@
   --color-chart-3: var(--chart-3);
   --color-chart-2: var(--chart-2);
   --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --font-serif: Georgia, serif;
-  --radius: 0.5rem;
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
-  --tracking-normal: var(--tracking-normal);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-md: var(--shadow-md);
-  --shadow: var(--shadow);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-2xs: var(--shadow-2xs);
-  --spacing: var(--spacing);
-  --letter-spacing: var(--letter-spacing);
-  --shadow-offset-y: var(--shadow-offset-y);
-  --shadow-offset-x: var(--shadow-offset-x);
-  --shadow-spread: var(--shadow-spread);
-  --shadow-blur: var(--shadow-blur);
-  --shadow-opacity: var(--shadow-opacity);
-  --color-shadow-color: var(--shadow-color);
-  --color-destructive-foreground: var(--destructive-foreground);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
-:root {
-  --radius: 0.5rem;
-  --background: oklch(0.99 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.99 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.94 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.44 0 0);
-  --accent: oklch(0.94 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.63 0.19 23.03);
-  --border: oklch(0.92 0 0);
-  --input: oklch(0.94 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.81 0.17 75.35);
-  --chart-2: oklch(0.55 0.22 264.53);
-  --chart-3: oklch(0.72 0 0);
-  --chart-4: oklch(0.92 0 0);
-  --chart-5: oklch(0.56 0 0);
-  --sidebar: oklch(0.99 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.94 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --destructive-foreground: oklch(1 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.18;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-offset-x: 0px;
-  --shadow-offset-y: 1px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-  --tracking-normal: 0em;
+body {
+  font-family: var(--font-sans);
 }
 
-.dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.14 0 0);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.18 0 0);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.25 0 0);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.23 0 0);
-  --muted-foreground: oklch(0.72 0 0);
-  --accent: oklch(0.32 0 0);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.69 0.2 23.91);
-  --border: oklch(0.26 0 0);
-  --input: oklch(0.32 0 0);
-  --ring: oklch(0.72 0 0);
-  --chart-1: oklch(0.81 0.17 75.35);
-  --chart-2: oklch(0.58 0.21 260.84);
-  --chart-3: oklch(0.56 0 0);
-  --chart-4: oklch(0.44 0 0);
-  --chart-5: oklch(0.92 0 0);
-  --sidebar: oklch(0.18 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.32 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.32 0 0);
-  --sidebar-ring: oklch(0.72 0 0);
-  --destructive-foreground: oklch(0 0 0);
-  --radius: 0.5rem;
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.18;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-offset-x: 0px;
-  --shadow-offset-y: 1px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl:
-    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+html,
+body {
+  max-width: 100%;
+}
+
+@layer utilities {
+  .pb-mobile-nav {
+    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
+  }
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
-    letter-spacing: var(--tracking-normal);
   }
-}
 
-/* Custom animations */
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
+  button,
+  [type="button"],
+  [type="submit"],
+  [type="reset"],
+  [role="button"] {
+    cursor: pointer;
   }
 }
-
-.animate-shimmer {
-  animation: shimmer 2s infinite;
-}
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
index 6c087695..08eecccb 100644
--- a/ui/app/layout.tsx
+++ b/ui/app/layout.tsx
@@ -7,15 +7,11 @@ import { SuppressHydrationWarning } from '@/components/suppress-hydration-warnin
 const geistSans = Geist({
   variable: '--font-geist-sans',
   subsets: ['latin'],
-  preload: false,
-  display: 'swap',
 });
 
 const geistMono = Geist_Mono({
   variable: '--font-geist-mono',
   subsets: ['latin'],
-  preload: false,
-  display: 'swap',
 });
 
 export const metadata: Metadata = {
@@ -33,9 +29,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='en' suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
-      >
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
         <SuppressHydrationWarning>
           <Providers>{children}</Providers>
         </SuppressHydrationWarning>
diff --git a/ui/app/login/page.tsx b/ui/app/login/page.tsx
index ba47a120..9144c262 100644
--- a/ui/app/login/page.tsx
+++ b/ui/app/login/page.tsx
@@ -5,16 +5,10 @@ import type { ChangeEvent, FormEvent, ReactElement } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
 import { adminLogin } from '@/lib/api/services/auth';
 import { ConfigurationService } from '@/lib/api/services/configuration';
 import { toast } from 'sonner';
+import { AuthPageShell } from '@/components/auth-page-shell';
 
 export default function AdminLoginPage(): ReactElement {
   const router = useRouter();
@@ -78,51 +72,42 @@ export default function AdminLoginPage(): ReactElement {
   };
 
   return (
-    <div className='bg-background text-foreground flex min-h-screen items-center justify-center px-4 py-12'>
-      <Card className='border-border/60 bg-card/90 w-full max-w-md border shadow-2xl shadow-black/30 backdrop-blur'>
-        <CardHeader className='space-y-1'>
-          <CardTitle className='text-center text-2xl font-bold'>
-            Admin Login
-          </CardTitle>
-          <CardDescription className='text-center'>
-            Enter your admin password to access the dashboard
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className='space-y-4'>
-            {allowCustomBaseUrl && (
-              <div className='space-y-2'>
-                <Input
-                  type='text'
-                  placeholder='API URL (https://api.example.com)'
-                  value={baseUrl}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                    setBaseUrl(event.target.value)
-                  }
-                  disabled={isLoading}
-                  required
-                />
-              </div>
-            )}
-            <div className='space-y-2'>
-              <Input
-                type='password'
-                placeholder='Admin Password'
-                value={password}
-                onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                  setPassword(event.target.value)
-                }
-                disabled={isLoading}
-                autoFocus
-                required
-              />
-            </div>
-            <Button type='submit' className='w-full' disabled={isLoading}>
-              {isLoading ? 'Logging in...' : 'Login'}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
+    <AuthPageShell
+      title='Admin Login'
+      description='Enter your admin password to access the dashboard.'
+    >
+      <form onSubmit={handleSubmit} className='space-y-4'>
+        {allowCustomBaseUrl && (
+          <div className='space-y-2'>
+            <Input
+              type='text'
+              placeholder='API URL (https://api.example.com)'
+              value={baseUrl}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                setBaseUrl(event.target.value)
+              }
+              disabled={isLoading}
+              required
+            />
+          </div>
+        )}
+        <div className='space-y-2'>
+          <Input
+            type='password'
+            placeholder='Admin Password'
+            value={password}
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              setPassword(event.target.value)
+            }
+            disabled={isLoading}
+            autoFocus
+            required
+          />
+        </div>
+        <Button type='submit' className='w-full' disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Login'}
+        </Button>
+      </form>
+    </AuthPageShell>
   );
 }
diff --git a/ui/app/logs/log-details-dialog.tsx b/ui/app/logs/log-details-dialog.tsx
index 5c0193ce..627d8c04 100644
--- a/ui/app/logs/log-details-dialog.tsx
+++ b/ui/app/logs/log-details-dialog.tsx
@@ -10,18 +10,8 @@ import {
 } from '@/components/ui/dialog';
 import { Copy, Check } from 'lucide-react';
 import { useState } from 'react';
-
-interface LogEntry {
-  asctime: string;
-  name: string;
-  levelname: string;
-  message: string;
-  pathname: string;
-  lineno: number;
-  version: string;
-  request_id: string;
-  [key: string]: string | number | object | undefined;
-}
+import { getLogLevelBadgeVariant } from '@/lib/utils/log-level';
+import type { LogEntry } from './types';
 
 interface LogDetailsDialogProps {
   log: LogEntry | null;
@@ -29,24 +19,6 @@ interface LogDetailsDialogProps {
   onClose: () => void;
 }
 
-const getLevelColor = (level: string): string => {
-  switch (level.toUpperCase()) {
-    case 'TRACE':
-    case 'DEBUG':
-      return 'bg-gray-100 text-gray-800 border-gray-200';
-    case 'INFO':
-      return 'bg-blue-100 text-blue-800 border-blue-200';
-    case 'WARNING':
-      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
-    case 'ERROR':
-      return 'bg-red-100 text-red-800 border-red-200';
-    case 'CRITICAL':
-      return 'bg-purple-100 text-purple-800 border-purple-200';
-    default:
-      return 'bg-gray-100 text-gray-800 border-gray-200';
-  }
-};
-
 export function LogDetailsDialog({
   log,
   isOpen,
@@ -79,10 +51,13 @@ export function LogDetailsDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className='max-h-[90vh] w-[95vw] max-w-[95vw] overflow-hidden'>
+      <DialogContent className='max-h-[92svh] w-full max-w-none overflow-hidden md:max-w-4xl'>
         <DialogHeader>
           <DialogTitle className='flex items-center gap-2'>
-            <Badge variant='outline' className={getLevelColor(log.levelname)}>
+            <Badge
+              variant={getLogLevelBadgeVariant(log.levelname)}
+              className='uppercase'
+            >
               {log.levelname}
             </Badge>
             <span>Log Entry Details</span>
@@ -92,7 +67,7 @@ export function LogDetailsDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <ScrollArea className='h-[75vh] w-full overflow-x-auto'>
+        <ScrollArea className='h-[70svh] w-full overflow-x-auto sm:h-[75vh]'>
           <div className='space-y-6'>
             <div>
               <h4 className='mb-2 text-sm font-medium'>Message</h4>
diff --git a/ui/app/logs/log-entry-card.tsx b/ui/app/logs/log-entry-card.tsx
index 20133908..ae20a77b 100644
--- a/ui/app/logs/log-entry-card.tsx
+++ b/ui/app/logs/log-entry-card.tsx
@@ -1,41 +1,13 @@
 import { Badge } from '@/components/ui/badge';
-import { Eye } from 'lucide-react';
-
-interface LogEntry {
-  asctime: string;
-  name: string;
-  levelname: string;
-  message: string;
-  pathname: string;
-  lineno: number;
-  version: string;
-  request_id: string;
-  [key: string]: string | number | object | undefined;
-}
+import { ChevronRight } from 'lucide-react';
+import { getLogLevelBadgeVariant } from '@/lib/utils/log-level';
+import type { LogEntry } from './types';
 
 interface LogEntryCardProps {
   entry: LogEntry;
   onClick: (entry: LogEntry) => void;
 }
 
-const getLevelColor = (level: string): string => {
-  switch (level.toUpperCase()) {
-    case 'TRACE':
-    case 'DEBUG':
-      return 'bg-gray-100 text-gray-800 border-gray-200';
-    case 'INFO':
-      return 'bg-blue-100 text-blue-800 border-blue-200';
-    case 'WARNING':
-      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
-    case 'ERROR':
-      return 'bg-red-100 text-red-800 border-red-200';
-    case 'CRITICAL':
-      return 'bg-purple-100 text-purple-800 border-purple-200';
-    default:
-      return 'bg-gray-100 text-gray-800 border-gray-200';
-  }
-};
-
 export function LogEntryCard({ entry, onClick }: LogEntryCardProps) {
   const extraFields = Object.keys(entry).filter(
     (key) =>
@@ -50,73 +22,58 @@ export function LogEntryCard({ entry, onClick }: LogEntryCardProps) {
         'request_id',
       ].includes(key)
   );
+  const hasRequestId =
+    Boolean(entry.request_id) && entry.request_id !== 'no-request-id';
+  const shortPath = entry.pathname.split('/').pop() || entry.pathname;
 
   return (
     <div
-      className='bg-card hover:bg-accent/50 group mb-4 cursor-pointer overflow-hidden rounded-lg border p-3 transition-colors duration-200 sm:p-4'
+      className='bg-card hover:bg-accent/35 group mb-2 cursor-pointer rounded-lg border p-2.5 transition-colors duration-150 sm:p-3'
       onClick={() => onClick(entry)}
     >
-      <div className='mb-3 flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
-        <div className='flex min-w-0 flex-wrap items-center gap-2'>
-          <Badge variant='outline' className={getLevelColor(entry.levelname)}>
-            {entry.levelname}
-          </Badge>
-          <span className='text-muted-foreground truncate text-xs sm:text-sm'>
-            {entry.asctime}
-          </span>
-          <Badge variant='secondary' className='truncate text-xs'>
-            {entry.name}
-          </Badge>
-        </div>
-        <div className='flex min-w-0 items-center gap-2'>
-          <div className='text-muted-foreground truncate text-xs'>
-            {entry.pathname}:{entry.lineno}
-          </div>
-          <Eye className='text-muted-foreground h-4 w-4 flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100' />
-        </div>
-      </div>
-
-      <div className='mb-2 line-clamp-3 overflow-hidden font-mono text-xs break-words sm:text-sm'>
-        {entry.message}
-      </div>
-
-      {entry.request_id && entry.request_id !== 'no-request-id' && (
-        <div className='mb-2 min-w-0'>
-          <div className='inline-block max-w-full'>
-            <Badge variant='outline' className='text-xs'>
-              <span className='inline-block max-w-[250px] truncate sm:max-w-[400px]'>
-                Request ID: {entry.request_id}
-              </span>
+      <div className='flex min-w-0 items-start justify-between gap-2'>
+        <div className='min-w-0 flex-1 space-y-1.5'>
+          <div className='flex min-w-0 flex-wrap items-center gap-1.5'>
+            <Badge
+              variant={getLogLevelBadgeVariant(entry.levelname)}
+              className='h-5 px-1.5 text-[10px] uppercase'
+            >
+              {entry.levelname}
+            </Badge>
+            <span className='text-muted-foreground text-[11px]'>
+              {entry.asctime}
+            </span>
+            <Badge
+              variant='secondary'
+              className='h-5 max-w-[11rem] truncate px-1.5 text-[10px]'
+            >
+              {entry.name}
             </Badge>
           </div>
-        </div>
-      )}
 
-      {extraFields.length > 0 && (
-        <div className='mt-3 min-w-0 border-t pt-3'>
-          <div className='mb-2 text-xs font-medium'>Additional Fields:</div>
-          <div className='grid grid-cols-1 gap-2'>
-            {extraFields.slice(0, 4).map((key) => (
-              <div
-                key={key}
-                className='min-w-0 overflow-hidden text-xs break-words'
-              >
-                <span className='font-medium break-all'>{key}:</span>{' '}
-                <span className='text-muted-foreground break-all'>
-                  {typeof entry[key] === 'object'
-                    ? JSON.stringify(entry[key])
-                    : String(entry[key])}
-                </span>
-              </div>
-            ))}
-            {extraFields.length > 4 && (
-              <div className='text-muted-foreground text-xs'>
-                ...and {extraFields.length - 4} more fields
-              </div>
-            )}
+          <p className='line-clamp-1 font-mono text-xs break-words sm:text-sm'>
+            {entry.message}
+          </p>
+
+          <div className='text-muted-foreground flex min-w-0 flex-wrap items-center gap-1.5 text-[11px]'>
+            {hasRequestId ? (
+              <span className='inline-block max-w-[14rem] truncate rounded border px-1.5 py-0.5 font-mono text-[10px] sm:max-w-[20rem]'>
+                {entry.request_id}
+              </span>
+            ) : null}
+            <span className='truncate'>
+              {shortPath}:{entry.lineno}
+            </span>
+            {extraFields.length > 0 ? (
+              <span>{extraFields.length} extra</span>
+            ) : null}
           </div>
         </div>
-      )}
+
+        <div className='pt-0.5'>
+          <ChevronRight className='text-muted-foreground h-4 w-4 opacity-50 transition-opacity group-hover:opacity-90' />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/ui/app/logs/log-filters.tsx b/ui/app/logs/log-filters.tsx
index b72cd73a..88a2ea54 100644
--- a/ui/app/logs/log-filters.tsx
+++ b/ui/app/logs/log-filters.tsx
@@ -1,3 +1,6 @@
+import { useEffect, useState, type ChangeEvent, type KeyboardEvent } from 'react';
+import { format } from 'date-fns';
+import { CalendarIcon, Filter, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -21,20 +24,8 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Calendar } from '@/components/ui/calendar';
-import { Badge } from '@/components/ui/badge';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import { Checkbox } from '@/components/ui/checkbox';
-import { CalendarIcon, Filter, X, Plus } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import { format } from 'date-fns';
 import { cn } from '@/lib/utils';
+import { MultiSelectCommandFilter } from './multi-select-command-filter';
 
 interface LogFiltersProps {
   selectedDate: string;
@@ -97,32 +88,8 @@ const ENDPOINT_OPTIONS = [
   '/embeddings/models',
 ];
 
-interface FilterBadgeProps {
-  value: string;
-  onRemove: (value: string) => void;
-}
-
-function FilterBadge({ value, onRemove }: FilterBadgeProps) {
-  return (
-    <Badge
-      variant='secondary'
-      className='flex items-center gap-1 px-1 font-normal'
-    >
-      {value}
-      <button
-        type='button'
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onRemove(value);
-        }}
-        className='hover:bg-muted-foreground/20 rounded-full'
-      >
-        <X className='h-3 w-3' />
-      </button>
-    </Badge>
-  );
-}
+const STATUS_4XX_CODES = STATUS_CODE_OPTIONS.filter((code) => code.startsWith('4'));
+const STATUS_5XX_CODES = STATUS_CODE_OPTIONS.filter((code) => code.startsWith('5'));
 
 export function LogFilters({
   selectedDate,
@@ -151,7 +118,7 @@ export function LogFilters({
   const [isCustom, setIsCustom] = useState<boolean>(!isPreset);
   const [date, setDate] = useState<Date | undefined>(
     selectedDate && selectedDate !== 'all'
-      ? new Date(selectedDate + 'T00:00:00')
+      ? new Date(`${selectedDate}T00:00:00`)
       : undefined
   );
 
@@ -162,6 +129,7 @@ export function LogFilters({
   useEffect(() => {
     const currentIsPreset = PRESET_LIMITS.includes(limit.toString());
     setIsCustom(!currentIsPreset);
+
     if (!currentIsPreset) {
       setCustomLimit(limit.toString());
     }
@@ -170,79 +138,71 @@ export function LogFilters({
   useEffect(() => {
     if (selectedDate === 'all' || !selectedDate) {
       setDate(undefined);
-    } else {
-      const d = new Date(selectedDate + 'T00:00:00');
-      setDate(isNaN(d.getTime()) ? undefined : d);
+      return;
     }
+
+    const parsedDate = new Date(`${selectedDate}T00:00:00`);
+    setDate(Number.isNaN(parsedDate.getTime()) ? undefined : parsedDate);
   }, [selectedDate]);
 
   const handleLimitChange = (value: string) => {
     if (value === 'custom') {
       setIsCustom(true);
       setCustomLimit(limit.toString());
-    } else {
-      setIsCustom(false);
-      setCustomLimit('');
-      onLimitChange(Number(value));
+      return;
     }
+
+    setIsCustom(false);
+    setCustomLimit('');
+    onLimitChange(Number(value));
   };
 
-  const handleCustomLimitChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setCustomLimit(value);
+  const handleCustomLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setCustomLimit(event.target.value);
   };
 
   const handleCustomLimitApply = () => {
-    const numValue = parseInt(customLimit);
-    if (!isNaN(numValue) && numValue > 0) {
-      onLimitChange(numValue);
-    } else {
-      setIsCustom(false);
-      setCustomLimit('');
-      onLimitChange(100);
+    const numericValue = Number.parseInt(customLimit, 10);
+
+    if (!Number.isNaN(numericValue) && numericValue > 0) {
+      onLimitChange(numericValue);
+      return;
     }
+
+    setIsCustom(false);
+    setCustomLimit('');
+    onLimitChange(100);
   };
 
-  const handleCustomLimitKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (e.key === 'Enter') {
+  const handleCustomLimitKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
       handleCustomLimitApply();
     }
   };
 
-  const handleDateSelect = (selectedDate: Date | undefined) => {
-    setDate(selectedDate);
-    if (selectedDate) {
-      onDateChange(format(selectedDate, 'yyyy-MM-dd'));
-    } else {
-      onDateChange('all');
-    }
-  };
+  const handleDateSelect = (nextDate: Date | undefined) => {
+    setDate(nextDate);
 
-  const toggleSelection = (
-    current: string[],
-    value: string,
-    onChange: (val: string[]) => void
-  ) => {
-    if (current.includes(value)) {
-      onChange(current.filter((v) => v !== value));
-    } else {
-      onChange([...current, value]);
+    if (nextDate) {
+      onDateChange(format(nextDate, 'yyyy-MM-dd'));
+      return;
     }
+
+    onDateChange('all');
   };
 
   const handleQuickStatusCode = (range: '4xx' | '5xx') => {
-    const codes = STATUS_CODE_OPTIONS.filter((c) => c.startsWith(range[0]));
-    const newSelection = new Set([...selectedStatusCodes]);
-    const allIncluded = codes.every((c) => selectedStatusCodes.includes(c));
+    const rangeCodes = range === '4xx' ? STATUS_4XX_CODES : STATUS_5XX_CODES;
+    const nextSelection = new Set(selectedStatusCodes);
+    const allSelected = rangeCodes.every((code) => selectedStatusCodes.includes(code));
 
-    if (allIncluded) {
-      codes.forEach((c) => newSelection.delete(c));
+    if (allSelected) {
+      rangeCodes.forEach((code) => nextSelection.delete(code));
     } else {
-      codes.forEach((c) => newSelection.add(c));
+      rangeCodes.forEach((code) => nextSelection.add(code));
     }
-    onStatusCodesChange(Array.from(newSelection));
+
+    onStatusCodesChange(Array.from(nextSelection));
   };
 
   return (
@@ -314,336 +274,62 @@ export function LogFilters({
             </Select>
           </div>
 
-          <div className='space-y-2'>
-            <Label>Status Codes</Label>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='outline'
-                  className='w-full justify-start text-left font-normal'
-                >
-                  <div className='flex flex-wrap gap-1'>
-                    {selectedStatusCodes.length > 0 ? (
-                      selectedStatusCodes.map((code) => (
-                        <FilterBadge
-                          key={code}
-                          value={code}
-                          onRemove={(val) =>
-                            toggleSelection(
-                              selectedStatusCodes,
-                              val,
-                              onStatusCodesChange
-                            )
-                          }
-                        />
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground'>All codes</span>
-                    )}
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className='w-64 p-0' align='start'>
-                <Command>
-                  <CommandInput
-                    placeholder='Search or add status code...'
-                    value={statusSearch}
-                    onValueChange={setStatusSearch}
-                  />
-                  <CommandList>
-                    {selectedStatusCodes.length > 0 && (
-                      <CommandGroup heading='Selected'>
-                        {selectedStatusCodes.map((code) => (
-                          <CommandItem
-                            key={`selected-${code}`}
-                            onSelect={() =>
-                              toggleSelection(
-                                selectedStatusCodes,
-                                code,
-                                onStatusCodesChange
-                              )
-                            }
-                          >
-                            <Checkbox checked={true} className='mr-2' />
-                            {code}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    )}
-                    {statusSearch &&
-                      !STATUS_CODE_OPTIONS.includes(statusSearch) &&
-                      !selectedStatusCodes.includes(statusSearch) && (
-                        <CommandGroup heading='Custom'>
-                          <CommandItem
-                            onSelect={() => {
-                              if (/^\d+$/.test(statusSearch)) {
-                                toggleSelection(
-                                  selectedStatusCodes,
-                                  statusSearch,
-                                  onStatusCodesChange
-                                );
-                                setStatusSearch('');
-                              }
-                            }}
-                          >
-                            <Plus className='mr-2 h-4 w-4' />
-                            Add &quot;{statusSearch}&quot;
-                          </CommandItem>
-                        </CommandGroup>
-                      )}
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup heading='Quick Filters'>
-                      <CommandItem
-                        onSelect={() => handleQuickStatusCode('4xx')}
-                      >
-                        <Checkbox
-                          checked={STATUS_CODE_OPTIONS.filter((c) =>
-                            c.startsWith('4')
-                          ).every((c) => selectedStatusCodes.includes(c))}
-                          className='mr-2'
-                        />
-                        4xx Errors
-                      </CommandItem>
-                      <CommandItem
-                        onSelect={() => handleQuickStatusCode('5xx')}
-                      >
-                        <Checkbox
-                          checked={STATUS_CODE_OPTIONS.filter((c) =>
-                            c.startsWith('5')
-                          ).every((c) => selectedStatusCodes.includes(c))}
-                          className='mr-2'
-                        />
-                        5xx Errors
-                      </CommandItem>
-                    </CommandGroup>
-                    <CommandGroup heading='Common Codes'>
-                      {STATUS_CODE_OPTIONS.filter(
-                        (code) => !selectedStatusCodes.includes(code)
-                      ).map((code) => (
-                        <CommandItem
-                          key={code}
-                          onSelect={() =>
-                            toggleSelection(
-                              selectedStatusCodes,
-                              code,
-                              onStatusCodesChange
-                            )
-                          }
-                        >
-                          <Checkbox checked={false} className='mr-2' />
-                          {code}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
+          <MultiSelectCommandFilter
+            label='Status Codes'
+            emptyLabel='All codes'
+            selectedValues={selectedStatusCodes}
+            onSelectedValuesChange={onStatusCodesChange}
+            options={STATUS_CODE_OPTIONS}
+            searchValue={statusSearch}
+            onSearchValueChange={setStatusSearch}
+            searchPlaceholder='Search or add status code...'
+            popoverClassName='w-[min(16rem,calc(100vw-2rem))] p-0'
+            optionsGroupLabel='Common Codes'
+            canAddCustom={(value) => /^\d+$/.test(value)}
+            quickFilters={[
+              {
+                label: '4xx Errors',
+                checked: STATUS_4XX_CODES.every((code) =>
+                  selectedStatusCodes.includes(code)
+                ),
+                onSelect: () => handleQuickStatusCode('4xx'),
+              },
+              {
+                label: '5xx Errors',
+                checked: STATUS_5XX_CODES.every((code) =>
+                  selectedStatusCodes.includes(code)
+                ),
+                onSelect: () => handleQuickStatusCode('5xx'),
+              },
+            ]}
+          />
 
-          <div className='space-y-2'>
-            <Label>HTTP Methods</Label>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='outline'
-                  className='w-full justify-start text-left font-normal'
-                >
-                  <div className='flex flex-wrap gap-1'>
-                    {selectedMethods.length > 0 ? (
-                      selectedMethods.map((method) => (
-                        <FilterBadge
-                          key={method}
-                          value={method}
-                          onRemove={(val) =>
-                            toggleSelection(
-                              selectedMethods,
-                              val,
-                              onMethodsChange
-                            )
-                          }
-                        />
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground'>All methods</span>
-                    )}
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className='w-64 p-0' align='start'>
-                <Command>
-                  <CommandInput
-                    placeholder='Search or add method...'
-                    value={methodSearch}
-                    onValueChange={setMethodSearch}
-                  />
-                  <CommandList>
-                    {selectedMethods.length > 0 && (
-                      <CommandGroup heading='Selected'>
-                        {selectedMethods.map((method) => (
-                          <CommandItem
-                            key={`selected-${method}`}
-                            onSelect={() =>
-                              toggleSelection(
-                                selectedMethods,
-                                method,
-                                onMethodsChange
-                              )
-                            }
-                          >
-                            <Checkbox checked={true} className='mr-2' />
-                            {method}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    )}
-                    {methodSearch &&
-                      !METHOD_OPTIONS.includes(methodSearch.toUpperCase()) &&
-                      !selectedMethods.includes(methodSearch.toUpperCase()) && (
-                        <CommandGroup heading='Custom'>
-                          <CommandItem
-                            onSelect={() => {
-                              toggleSelection(
-                                selectedMethods,
-                                methodSearch.toUpperCase(),
-                                onMethodsChange
-                              );
-                              setMethodSearch('');
-                            }}
-                          >
-                            <Plus className='mr-2 h-4 w-4' />
-                            Add &quot;{methodSearch.toUpperCase()}&quot;
-                          </CommandItem>
-                        </CommandGroup>
-                      )}
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup>
-                      {METHOD_OPTIONS.filter(
-                        (method) => !selectedMethods.includes(method)
-                      ).map((method) => (
-                        <CommandItem
-                          key={method}
-                          onSelect={() =>
-                            toggleSelection(
-                              selectedMethods,
-                              method,
-                              onMethodsChange
-                            )
-                          }
-                        >
-                          <Checkbox checked={false} className='mr-2' />
-                          {method}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
+          <MultiSelectCommandFilter
+            label='HTTP Methods'
+            emptyLabel='All methods'
+            selectedValues={selectedMethods}
+            onSelectedValuesChange={onMethodsChange}
+            options={METHOD_OPTIONS}
+            searchValue={methodSearch}
+            onSearchValueChange={setMethodSearch}
+            searchPlaceholder='Search or add method...'
+            popoverClassName='w-[min(16rem,calc(100vw-2rem))] p-0'
+            optionsGroupLabel='Methods'
+            normalizeCustomValue={(value) => value.toUpperCase()}
+          />
 
-          <div className='space-y-2'>
-            <Label>Endpoints</Label>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='outline'
-                  className='w-full justify-start text-left font-normal'
-                >
-                  <div className='flex flex-wrap gap-1 overflow-hidden'>
-                    {selectedEndpoints.length > 0 ? (
-                      selectedEndpoints.map((endpoint) => (
-                        <FilterBadge
-                          key={endpoint}
-                          value={endpoint}
-                          onRemove={(val) =>
-                            toggleSelection(
-                              selectedEndpoints,
-                              val,
-                              onEndpointsChange
-                            )
-                          }
-                        />
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground'>
-                        All endpoints
-                      </span>
-                    )}
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className='w-80 p-0' align='start'>
-                <Command>
-                  <CommandInput
-                    placeholder='Search or add endpoint pattern...'
-                    value={endpointSearch}
-                    onValueChange={setEndpointSearch}
-                  />
-                  <CommandList>
-                    {selectedEndpoints.length > 0 && (
-                      <CommandGroup heading='Selected'>
-                        {selectedEndpoints.map((endpoint) => (
-                          <CommandItem
-                            key={`selected-${endpoint}`}
-                            onSelect={() =>
-                              toggleSelection(
-                                selectedEndpoints,
-                                endpoint,
-                                onEndpointsChange
-                              )
-                            }
-                          >
-                            <Checkbox checked={true} className='mr-2' />
-                            {endpoint}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    )}
-                    {endpointSearch &&
-                      !ENDPOINT_OPTIONS.includes(endpointSearch) &&
-                      !selectedEndpoints.includes(endpointSearch) && (
-                        <CommandGroup heading='Custom'>
-                          <CommandItem
-                            onSelect={() => {
-                              toggleSelection(
-                                selectedEndpoints,
-                                endpointSearch,
-                                onEndpointsChange
-                              );
-                              setEndpointSearch('');
-                            }}
-                          >
-                            <Plus className='mr-2 h-4 w-4' />
-                            Add &quot;{endpointSearch}&quot;
-                          </CommandItem>
-                        </CommandGroup>
-                      )}
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup heading='Common Endpoints'>
-                      {ENDPOINT_OPTIONS.filter(
-                        (endpoint) => !selectedEndpoints.includes(endpoint)
-                      ).map((endpoint) => (
-                        <CommandItem
-                          key={endpoint}
-                          onSelect={() =>
-                            toggleSelection(
-                              selectedEndpoints,
-                              endpoint,
-                              onEndpointsChange
-                            )
-                          }
-                        >
-                          <Checkbox checked={false} className='mr-2' />
-                          {endpoint}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
+          <MultiSelectCommandFilter
+            label='Endpoints'
+            emptyLabel='All endpoints'
+            selectedValues={selectedEndpoints}
+            onSelectedValuesChange={onEndpointsChange}
+            options={ENDPOINT_OPTIONS}
+            searchValue={endpointSearch}
+            onSearchValueChange={setEndpointSearch}
+            searchPlaceholder='Search or add endpoint pattern...'
+            popoverClassName='w-[min(20rem,calc(100vw-2rem))] p-0'
+            optionsGroupLabel='Common Endpoints'
+          />
 
           <div className='space-y-2'>
             <Label htmlFor='request-id'>Request ID</Label>
@@ -652,7 +338,7 @@ export function LogFilters({
               type='text'
               placeholder='Search by request ID'
               value={requestId}
-              onChange={(e) => onRequestIdChange(e.target.value)}
+              onChange={(event) => onRequestIdChange(event.target.value)}
             />
           </div>
 
@@ -668,14 +354,14 @@ export function LogFilters({
               type='text'
               placeholder='Search in message and name'
               value={searchText}
-              onChange={(e) => onSearchTextChange(e.target.value)}
+              onChange={(event) => onSearchTextChange(event.target.value)}
             />
           </div>
 
           <div className='space-y-2'>
             <Label htmlFor='limit'>Limit</Label>
             {isCustom ? (
-              <div className='flex gap-2'>
+              <div className='flex flex-col gap-2 sm:flex-row'>
                 <Input
                   id='limit'
                   type='number'
@@ -686,7 +372,7 @@ export function LogFilters({
                   onKeyDown={handleCustomLimitKeyDown}
                   onBlur={handleCustomLimitApply}
                   autoFocus
-                  className='flex-1'
+                  className='flex-1 sm:flex-auto'
                 />
                 <Button
                   type='button'
@@ -695,6 +381,7 @@ export function LogFilters({
                   onClick={() => {
                     setIsCustom(false);
                     setCustomLimit('');
+
                     if (!isPreset) {
                       onLimitChange(100);
                     }
@@ -712,12 +399,11 @@ export function LogFilters({
                   <SelectValue placeholder='Select limit' />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value='25'>25</SelectItem>
-                  <SelectItem value='50'>50</SelectItem>
-                  <SelectItem value='100'>100</SelectItem>
-                  <SelectItem value='200'>200</SelectItem>
-                  <SelectItem value='500'>500</SelectItem>
-                  <SelectItem value='1000'>1000</SelectItem>
+                  {PRESET_LIMITS.map((preset) => (
+                    <SelectItem key={preset} value={preset}>
+                      {preset}
+                    </SelectItem>
+                  ))}
                   <SelectItem value='custom'>Custom...</SelectItem>
                 </SelectContent>
               </Select>
@@ -727,13 +413,8 @@ export function LogFilters({
             )}
           </div>
 
-          <div className='space-y-2'>
-            <Label>&nbsp;</Label>
-            <Button
-              onClick={onClearFilters}
-              variant='outline'
-              className='w-full'
-            >
+          <div className='flex items-end sm:col-span-2 lg:col-span-1'>
+            <Button onClick={onClearFilters} variant='outline' className='w-full'>
               Clear Filters
             </Button>
           </div>
diff --git a/ui/app/logs/multi-select-command-filter.tsx b/ui/app/logs/multi-select-command-filter.tsx
new file mode 100644
index 00000000..1f141b84
--- /dev/null
+++ b/ui/app/logs/multi-select-command-filter.tsx
@@ -0,0 +1,173 @@
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Badge } from '@/components/ui/badge';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Plus, X } from 'lucide-react';
+
+interface QuickFilterOption {
+  label: string;
+  checked: boolean;
+  onSelect: () => void;
+}
+
+interface MultiSelectCommandFilterProps {
+  label: string;
+  emptyLabel: string;
+  selectedValues: string[];
+  onSelectedValuesChange: (values: string[]) => void;
+  options: string[];
+  searchValue: string;
+  onSearchValueChange: (value: string) => void;
+  searchPlaceholder: string;
+  popoverClassName?: string;
+  selectedGroupLabel?: string;
+  customGroupLabel?: string;
+  quickGroupLabel?: string;
+  optionsGroupLabel?: string;
+  quickFilters?: QuickFilterOption[];
+  normalizeCustomValue?: (value: string) => string;
+  canAddCustom?: (value: string) => boolean;
+}
+
+function FilterBadge({ value }: { value: string }) {
+  return (
+    <Badge variant='secondary' className='flex items-center gap-1 px-1 font-normal'>
+      {value}
+      <X className='h-3 w-3 opacity-70' aria-hidden='true' />
+    </Badge>
+  );
+}
+
+export function MultiSelectCommandFilter({
+  label,
+  emptyLabel,
+  selectedValues,
+  onSelectedValuesChange,
+  options,
+  searchValue,
+  onSearchValueChange,
+  searchPlaceholder,
+  popoverClassName = 'w-64 p-0',
+  selectedGroupLabel = 'Selected',
+  customGroupLabel = 'Custom',
+  quickGroupLabel = 'Quick Filters',
+  optionsGroupLabel = 'Options',
+  quickFilters = [],
+  normalizeCustomValue,
+  canAddCustom,
+}: MultiSelectCommandFilterProps) {
+  const toggleSelection = (value: string) => {
+    if (selectedValues.includes(value)) {
+      onSelectedValuesChange(selectedValues.filter((item) => item !== value));
+      return;
+    }
+
+    onSelectedValuesChange([...selectedValues, value]);
+  };
+
+  const normalizedSearch = normalizeCustomValue
+    ? normalizeCustomValue(searchValue)
+    : searchValue;
+
+  const canShowCustomAction =
+    normalizedSearch.length > 0 &&
+    !options.includes(normalizedSearch) &&
+    !selectedValues.includes(normalizedSearch) &&
+    (canAddCustom ? canAddCustom(normalizedSearch) : true);
+
+  return (
+    <div className='space-y-2'>
+      <Label>{label}</Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant='outline' className='w-full justify-start text-left font-normal'>
+            <div className='flex flex-wrap gap-1 overflow-hidden'>
+              {selectedValues.length > 0 ? (
+                selectedValues.map((value) => (
+                  <FilterBadge key={value} value={value} />
+                ))
+              ) : (
+                <span className='text-muted-foreground'>{emptyLabel}</span>
+              )}
+            </div>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className={popoverClassName} align='start'>
+          <Command>
+            <CommandInput
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              onValueChange={onSearchValueChange}
+            />
+            <CommandList>
+              {selectedValues.length > 0 && (
+                <CommandGroup heading={selectedGroupLabel}>
+                  {selectedValues.map((value) => (
+                    <CommandItem
+                      key={`selected-${value}`}
+                      onSelect={() => toggleSelection(value)}
+                    >
+                      <Checkbox checked={true} className='mr-2' />
+                      {value}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+
+              {canShowCustomAction && (
+                <CommandGroup heading={customGroupLabel}>
+                  <CommandItem
+                    onSelect={() => {
+                      toggleSelection(normalizedSearch);
+                      onSearchValueChange('');
+                    }}
+                  >
+                    <Plus className='mr-2 h-4 w-4' />
+                    Add &quot;{normalizedSearch}&quot;
+                  </CommandItem>
+                </CommandGroup>
+              )}
+
+              <CommandEmpty>No results found.</CommandEmpty>
+
+              {quickFilters.length > 0 && (
+                <CommandGroup heading={quickGroupLabel}>
+                  {quickFilters.map((filter) => (
+                    <CommandItem key={filter.label} onSelect={filter.onSelect}>
+                      <Checkbox checked={filter.checked} className='mr-2' />
+                      {filter.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+
+              <CommandGroup heading={optionsGroupLabel}>
+                {options
+                  .filter((option) => !selectedValues.includes(option))
+                  .map((option) => (
+                    <CommandItem key={option} onSelect={() => toggleSelection(option)}>
+                      <Checkbox checked={false} className='mr-2' />
+                      {option}
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/ui/app/logs/page.tsx b/ui/app/logs/page.tsx
index 877a5de5..e375acdf 100644
--- a/ui/app/logs/page.tsx
+++ b/ui/app/logs/page.tsx
@@ -2,8 +2,6 @@
 
 import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -14,9 +12,18 @@ import {
 } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import { Skeleton } from '@/components/ui/skeleton';
 import { FileText, RefreshCw } from 'lucide-react';
 import { apiClient } from '@/lib/api/client';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 import { LogEntry, LogsResponse } from './types';
 import { LogFilters } from './log-filters';
 import { LogEntryCard } from './log-entry-card';
@@ -135,126 +142,127 @@ export default function LogsPage() {
     setIsDialogOpen(true);
   };
 
+  const hasActiveFilters =
+    selectedDate !== 'all' ||
+    selectedLevel !== 'all' ||
+    Boolean(requestId) ||
+    Boolean(searchText) ||
+    selectedStatusCodes.length > 0 ||
+    selectedMethods.length > 0 ||
+    selectedEndpoints.length > 0;
+
+  const activeFilterDescription = [
+    selectedDate !== 'all' ? `date ${selectedDate}` : null,
+    selectedLevel !== 'all' ? `level ${selectedLevel}` : null,
+    requestId ? `request ID ${requestId}` : null,
+    searchText ? `text "${searchText}"` : null,
+    selectedStatusCodes.length > 0
+      ? `status ${selectedStatusCodes.join(', ')}`
+      : null,
+    selectedMethods.length > 0 ? `method ${selectedMethods.join(', ')}` : null,
+    selectedEndpoints.length > 0
+      ? `endpoint ${selectedEndpoints.join(', ')}`
+      : null,
+  ]
+    .filter(Boolean)
+    .join(' • ');
+
   return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset className='overflow-x-hidden p-0'>
-        <SiteHeader />
-        <div className='container max-w-6xl overflow-x-hidden px-3 py-4 sm:px-4 sm:py-8 md:px-6 lg:px-8'>
-          <div className='mb-6 flex flex-col gap-3 sm:mb-8 sm:gap-4 lg:flex-row lg:items-start lg:justify-between'>
-            <div>
-              <h1 className='flex items-center gap-2 text-2xl font-bold tracking-tight sm:text-3xl'>
-                <FileText className='h-6 w-6 sm:h-8 sm:w-8' />
-                System Logs
-              </h1>
-              <p className='text-muted-foreground mt-1 text-sm sm:mt-2 sm:text-base'>
-                View and filter application logs
-              </p>
-            </div>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl overflow-x-hidden'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='System Logs'
+          description='View and filter application logs.'
+          actions={
             <Button
               onClick={() => refetchLogs()}
               variant='outline'
               size='sm'
-              className='self-start'
+              className='w-full sm:w-auto'
             >
               <RefreshCw className='mr-2 h-4 w-4' />
               Refresh
             </Button>
-          </div>
+          }
+        />
 
-          <LogFilters
-            selectedDate={selectedDate}
-            selectedLevel={selectedLevel}
-            requestId={requestId}
-            searchText={searchText}
-            selectedStatusCodes={selectedStatusCodes}
-            selectedMethods={selectedMethods}
-            selectedEndpoints={selectedEndpoints}
-            limit={limit}
-            onDateChange={setSelectedDate}
-            onLevelChange={setSelectedLevel}
-            onRequestIdChange={setRequestId}
-            onSearchTextChange={setSearchText}
-            onStatusCodesChange={setSelectedStatusCodes}
-            onMethodsChange={setSelectedMethods}
-            onEndpointsChange={setSelectedEndpoints}
-            onLimitChange={setLimit}
-            onClearFilters={handleClearFilters}
-          />
+        <LogFilters
+          selectedDate={selectedDate}
+          selectedLevel={selectedLevel}
+          requestId={requestId}
+          searchText={searchText}
+          selectedStatusCodes={selectedStatusCodes}
+          selectedMethods={selectedMethods}
+          selectedEndpoints={selectedEndpoints}
+          limit={limit}
+          onDateChange={setSelectedDate}
+          onLevelChange={setSelectedLevel}
+          onRequestIdChange={setRequestId}
+          onSearchTextChange={setSearchText}
+          onStatusCodesChange={setSelectedStatusCodes}
+          onMethodsChange={setSelectedMethods}
+          onEndpointsChange={setSelectedEndpoints}
+          onLimitChange={setLimit}
+          onClearFilters={handleClearFilters}
+        />
 
-          <Card>
-            <CardHeader>
-              <CardTitle className='flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between'>
-                <span className='text-lg sm:text-xl'>Log Entries</span>
-                {logsData && (
-                  <Badge variant='secondary' className='text-xs sm:text-sm'>
-                    {logsData.logs.length} entries
-                  </Badge>
-                )}
-              </CardTitle>
-              {(selectedDate !== 'all' ||
-                selectedLevel !== 'all' ||
-                requestId ||
-                searchText ||
-                selectedStatusCodes.length > 0 ||
-                selectedMethods.length > 0 ||
-                selectedEndpoints.length > 0) && (
-                <CardDescription className='text-xs sm:text-sm'>
-                  Showing logs
-                  {selectedDate !== 'all' && ` for ${selectedDate}`}
-                  {selectedLevel !== 'all' && ` with level ${selectedLevel}`}
-                  {requestId && ` with request ID ${requestId}`}
-                  {searchText && ` matching "${searchText}"`}
-                  {selectedStatusCodes.length > 0 &&
-                    ` with status ${selectedStatusCodes.join(', ')}`}
-                  {selectedMethods.length > 0 &&
-                    ` with method ${selectedMethods.join(', ')}`}
-                  {selectedEndpoints.length > 0 &&
-                    ` with endpoint ${selectedEndpoints.join(', ')}`}
-                </CardDescription>
+        <Card>
+          <CardHeader>
+            <CardTitle className='flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between'>
+              <span className='text-lg sm:text-xl'>Log Entries</span>
+              {logsData && (
+                <Badge variant='secondary' className='text-xs sm:text-sm'>
+                  {logsData.logs.length} entries
+                </Badge>
               )}
-            </CardHeader>
-            <CardContent className='overflow-hidden p-3 sm:p-6'>
-              {isLoading ? (
-                <div className='flex items-center justify-center py-8'>
-                  <RefreshCw className='h-6 w-6 animate-spin' />
-                  <span className='ml-2 text-sm sm:text-base'>
-                    Loading logs...
-                  </span>
+            </CardTitle>
+            {hasActiveFilters && (
+              <CardDescription className='text-xs sm:text-sm'>
+                Showing logs filtered by {activeFilterDescription}
+              </CardDescription>
+            )}
+          </CardHeader>
+          <CardContent className='overflow-hidden p-3 sm:p-6'>
+            {isLoading ? (
+              <div className='space-y-2'>
+                {Array.from({ length: 8 }).map((_, index) => (
+                  <Skeleton key={`logs-loading-${index}`} className='h-16 w-full rounded-lg' />
+                ))}
+              </div>
+            ) : logsData?.logs && logsData.logs.length > 0 ? (
+              <ScrollArea className='h-[55svh] min-h-[420px] w-full sm:h-[600px]'>
+                <div className='space-y-2 pr-3'>
+                  {logsData.logs.map((entry, index) => (
+                    <LogEntryCard
+                      key={`${entry.request_id}-${entry.asctime}-${entry.lineno}-${index}`}
+                      entry={entry}
+                      onClick={handleLogClick}
+                    />
+                  ))}
                 </div>
-              ) : logsData?.logs && logsData.logs.length > 0 ? (
-                <>
-                  <ScrollArea className='h-[500px] w-full sm:h-[600px]'>
-                    <div className='space-y-2 pr-3'>
-                      {logsData.logs.map((entry, index) => (
-                        <LogEntryCard
-                          key={`${entry.request_id}-${entry.asctime}-${entry.lineno}-${index}`}
-                          entry={entry}
-                          onClick={handleLogClick}
-                        />
-                      ))}
-                    </div>
-                  </ScrollArea>
-                </>
-              ) : (
-                <div className='text-muted-foreground py-8 text-center'>
-                  <FileText className='mx-auto mb-4 h-10 w-10 opacity-50 sm:h-12 sm:w-12' />
-                  <p className='text-sm sm:text-base'>No log entries found</p>
-                  <p className='text-xs sm:text-sm'>
-                    Try adjusting your filters or check back later
-                  </p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
+              </ScrollArea>
+            ) : (
+              <Empty className='py-8'>
+                <EmptyHeader>
+                  <EmptyMedia variant='icon'>
+                    <FileText className='h-4 w-4' />
+                  </EmptyMedia>
+                  <EmptyTitle>No log entries found</EmptyTitle>
+                  <EmptyDescription>
+                    Try adjusting your filters or check back later.
+                  </EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            )}
+          </CardContent>
+        </Card>
 
-          <LogDetailsDialog
-            log={selectedLog}
-            isOpen={isDialogOpen}
-            onClose={() => setIsDialogOpen(false)}
-          />
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+        <LogDetailsDialog
+          log={selectedLog}
+          isOpen={isDialogOpen}
+          onClose={() => setIsDialogOpen(false)}
+        />
+      </div>
+    </AppPageShell>
   );
 }
diff --git a/ui/app/model/page.tsx b/ui/app/model/page.tsx
index 6f523cf7..4b448165 100644
--- a/ui/app/model/page.tsx
+++ b/ui/app/model/page.tsx
@@ -1,25 +1,34 @@
 'use client';
 
-import { ModelSelector } from '@/components/ModelSelector';
-import { ModelTester } from '@/components/ModelTester';
-import { ApiEndpointTester } from '@/components/ApiEndpointTester';
-import { ModelSearchFilter } from '@/components/ModelSearchFilter';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useQuery } from '@tanstack/react-query';
-import { AdminService } from '@/lib/api/services/admin';
-import { Skeleton } from '@/components/ui/skeleton';
-import { AlertCircle, Users, Globe } from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Badge } from '@/components/ui/badge';
 import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AlertCircle } from 'lucide-react';
 import type { Model } from '@/lib/api/schemas/models';
-import { groupAndSortModelsByProvider } from '@/lib/utils/modelSort';
+import { AdminService } from '@/lib/api/services/admin';
+import { groupAndSortModelsByProvider } from '@/lib/utils/model-sort';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
+import { ModelSelector } from '@/components/model-selector';
+import { ModelTester } from '@/components/model-tester';
+import { ApiEndpointTester } from '@/components/api-endpoint-tester';
+import { ModelSearchFilter } from '@/components/model-search-filter';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 export default function ModelsPage() {
-  const [filteredModels, setFilteredModels] = useState<Model[]>([]);
+  const [filteredModels, setFilteredModels] = useState<Model[] | undefined>(
+    undefined
+  );
+  const [selectedProviderScope, setSelectedProviderScope] =
+    useState<string>('all');
 
   const {
     data: modelsData,
@@ -33,297 +42,212 @@ export default function ModelsPage() {
 
   const { models = [], groups = [] } = modelsData || {};
 
-  const groupedModels = useMemo(() => {
-    return groupAndSortModelsByProvider(models);
-  }, [models]);
+  const groupedModels = useMemo(
+    () => groupAndSortModelsByProvider(models),
+    [models]
+  );
 
-  const groupDataMap = useMemo(() => {
-    return new Map(groups.map((group) => [group.provider, group]));
-  }, [groups]);
+  const groupDataMap = useMemo(
+    () => new Map(groups.map((group) => [group.provider, group])),
+    [groups]
+  );
 
   const providerInfo = useMemo(() => {
     const allProviders = new Set([
       ...Object.keys(groupedModels),
-      ...groups.map((g) => g.provider),
+      ...groups.map((group) => group.provider),
     ]);
-    console.log(allProviders);
 
-    return Array.from(allProviders).map((provider) => {
-      const providerModels = groupedModels[provider] || [];
-      const groupData = groupDataMap.get(provider);
-      const activeModels = providerModels.filter(
-        (m) => m.isEnabled && !m.soft_deleted
-      ).length;
-      const totalModels = providerModels.length;
+    return Array.from(allProviders)
+      .map((provider) => {
+        const providerModels = groupedModels[provider] || [];
+        const groupData = groupDataMap.get(provider);
 
-      return {
-        provider,
-        activeModels,
-        totalModels,
-        groupData,
-        hasGroupUrl: !!groupData?.group_url,
-        hasGroupApiKey: !!groupData?.group_api_key,
-      };
-    });
-  }, [groupedModels, groupDataMap, groups]);
+        return {
+          provider,
+          totalModels: providerModels.length,
+          disabledModels: providerModels.filter((model) => model.soft_deleted)
+            .length,
+          groupData,
+        };
+      })
+      .sort((a, b) => a.provider.localeCompare(b.provider));
+  }, [groupDataMap, groupedModels, groups]);
+
+  const activeProviderScope = useMemo(() => {
+    if (selectedProviderScope === 'all') {
+      return 'all';
+    }
+
+    const providerExists = providerInfo.some(
+      (provider) => provider.provider === selectedProviderScope
+    );
+
+    return providerExists ? selectedProviderScope : 'all';
+  }, [providerInfo, selectedProviderScope]);
+
+  const selectedProviderGroup =
+    activeProviderScope === 'all'
+      ? undefined
+      : groupDataMap.get(activeProviderScope);
+
+  const scopedModels = useMemo(() => {
+    if (activeProviderScope === 'all') {
+      return models;
+    }
+
+    return models.filter((model) => model.provider === activeProviderScope);
+  }, [activeProviderScope, models]);
 
   return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset>
-        <SiteHeader />
-        <div className='flex flex-1 flex-col'>
-          <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-            <div className='mb-6 flex items-center justify-between'>
-              <h1 className='text-2xl font-bold tracking-tight'>
-                Model Management & API Testing
-              </h1>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='space-y-3 sm:space-y-4'>
+        <PageHeader
+          title='Model Management'
+          description='Manage provider model catalogs and validate endpoints from one place.'
+        />
+
+        <Tabs defaultValue='manage' className='w-full gap-3 sm:gap-4'>
+          <TabsList
+            variant='line'
+            className='w-full snap-x snap-mandatory justify-start gap-0.5 overflow-x-auto whitespace-nowrap [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+          >
+            <TabsTrigger
+              value='manage'
+              className='h-9 snap-start px-2 text-[13px] sm:h-10 sm:px-2.5 sm:text-sm'
+            >
+              Manage Models
+            </TabsTrigger>
+            <TabsTrigger
+              value='test-basic'
+              className='h-9 snap-start px-2 text-[13px] sm:h-10 sm:px-2.5 sm:text-sm'
+            >
+              Basic Testing
+            </TabsTrigger>
+            <TabsTrigger
+              value='test-api'
+              className='h-9 snap-start px-2 text-[13px] sm:h-10 sm:px-2.5 sm:text-sm'
+            >
+              API Endpoints
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value='manage' className='mt-0'>
+            {isLoadingModels ? (
+              <div className='space-y-4'>
+                <Skeleton className='h-16 w-full' />
+                <Skeleton className='h-[420px] w-full' />
+              </div>
+            ) : modelsError ? (
+              <Alert variant='destructive'>
+                <AlertCircle className='h-4 w-4' />
+                <AlertDescription>
+                  Failed to load models. Please try refreshing the page.
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <div className='space-y-3 sm:space-y-4'>
+                <div className='flex flex-col gap-2 sm:gap-2.5 md:flex-row md:items-center'>
+                  <Select
+                    value={activeProviderScope}
+                    onValueChange={(value) => {
+                      setSelectedProviderScope(value);
+                      setFilteredModels(undefined);
+                    }}
+                  >
+                    <SelectTrigger className='h-8 w-full md:w-[220px]'>
+                      <SelectValue placeholder='Provider scope' />
+                    </SelectTrigger>
+                    <SelectContent align='start'>
+                      <SelectItem value='all'>
+                        All providers ({models.length})
+                      </SelectItem>
+                      {providerInfo.map(({ provider, totalModels }) => (
+                        <SelectItem key={provider} value={provider}>
+                          {provider} ({totalModels})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  <ModelSearchFilter
+                    models={scopedModels}
+                    onFilteredModelsChange={setFilteredModels}
+                    className='w-full min-w-0 flex-1'
+                  />
+                </div>
+
+                <ModelSelector
+                  filterProvider={
+                    activeProviderScope === 'all'
+                      ? undefined
+                      : activeProviderScope
+                  }
+                  groupData={selectedProviderGroup}
+                  filteredModels={filteredModels}
+                  showDeleteAllButton={activeProviderScope === 'all'}
+                />
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value='test-basic' className='mt-0 space-y-3'>
+            <div className='space-y-1'>
+              <h3 className='text-base font-semibold'>
+                Basic Credential Testing
+              </h3>
+              <p className='text-muted-foreground text-sm'>
+                Run chat-completion checks through the secure proxy to validate
+                model credentials and endpoint connectivity.
+              </p>
             </div>
+            {isLoadingModels ? (
+              <div className='space-y-4'>
+                <Skeleton className='h-[220px] w-full' />
+                <Skeleton className='h-[120px] w-full' />
+              </div>
+            ) : modelsError ? (
+              <Alert variant='destructive'>
+                <AlertCircle className='h-4 w-4' />
+                <AlertDescription>
+                  Failed to load models for testing. Please try refreshing the
+                  page.
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <ModelTester models={models} />
+            )}
+          </TabsContent>
 
-            <Tabs defaultValue='manage' className='w-full'>
-              <TabsList className='grid w-full grid-cols-3'>
-                <TabsTrigger value='manage'>Manage Models</TabsTrigger>
-                {/*<TabsTrigger value='test-basic'>Basic Testing</TabsTrigger>
-                <TabsTrigger value='test-api'>API Endpoints</TabsTrigger> */}
-              </TabsList>
-
-              <TabsContent value='manage' className='space-y-4'>
-                <div className='text-muted-foreground text-sm'>
-                  Manage your AI models organized by provider groups. Configure
-                  API keys, and organize models by provider groups.
-                </div>
-
-                {isLoadingModels ? (
-                  <div className='space-y-4'>
-                    <Skeleton className='h-[60px] w-full' />
-                    <Skeleton className='h-[400px] w-full' />
-                  </div>
-                ) : modelsError ? (
-                  <Alert variant='destructive'>
-                    <AlertCircle className='h-4 w-4' />
-                    <AlertDescription>
-                      Failed to load models. Please try refreshing the page.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <Tabs defaultValue='all' className='w-full'>
-                    <div className='space-y-4'>
-                      {/* Provider Tabs Navigation */}
-                      <div className='overflow-x-auto rounded-lg border p-1'>
-                        <TabsList className='grid w-full max-w-full min-w-max auto-cols-fr grid-flow-col gap-1 sm:gap-2'>
-                          <TabsTrigger
-                            value='all'
-                            className='flex items-center gap-1 text-xs whitespace-nowrap sm:gap-2 sm:text-sm'
-                          >
-                            <Globe className='h-3 w-3 sm:h-4 sm:w-4' />
-                            <span className='hidden sm:inline'>All Models</span>
-                            <span className='sm:hidden'>All</span>
-                            <Badge variant='secondary' className='ml-1 text-xs'>
-                              {models.length}
-                            </Badge>
-                          </TabsTrigger>
-                          {providerInfo.map(
-                            ({ provider, activeModels, totalModels }) => (
-                              <TabsTrigger
-                                key={provider}
-                                value={provider}
-                                className='flex min-w-fit items-center gap-1 text-xs whitespace-nowrap sm:gap-2 sm:text-sm'
-                              >
-                                <Users className='h-3 w-3 sm:h-4 sm:w-4' />
-                                <span className='max-w-20 truncate sm:max-w-none'>
-                                  {provider}
-                                </span>
-                                <div className='flex items-center gap-1'>
-                                  <Badge
-                                    variant='secondary'
-                                    className='ml-1 text-xs'
-                                  >
-                                    {activeModels}/{totalModels}
-                                  </Badge>
-                                </div>
-                              </TabsTrigger>
-                            )
-                          )}
-                        </TabsList>
-                      </div>
-
-                      {/* All Models Tab */}
-                      <TabsContent value='all'>
-                        <div className='space-y-4'>
-                          <div className='text-muted-foreground text-sm'>
-                            Overview of all models across all provider groups.
-                          </div>
-                          <ModelSearchFilter
-                            models={models}
-                            onFilteredModelsChange={setFilteredModels}
-                          />
-                          <ModelSelector
-                            filteredModels={filteredModels}
-                            showDeleteAllButton={true}
-                          />
-                        </div>
-                      </TabsContent>
-
-                      {providerInfo.map(
-                        ({ provider, totalModels, groupData }) => {
-                          const providerModels = groupedModels[provider] || [];
-
-                          return (
-                            <TabsContent key={provider} value={provider}>
-                              <div className='space-y-4'>
-                                <div className='flex items-center justify-between'>
-                                  <div>
-                                    <h3 className='flex items-center gap-2 text-lg font-semibold'>
-                                      <Users className='h-5 w-5' />
-                                      {provider}
-                                    </h3>
-                                    <div className='text-muted-foreground flex items-center gap-4 text-sm'>
-                                      {providerModels.filter(
-                                        (m) => m.soft_deleted
-                                      ).length > 0 && (
-                                        <span className='text-orange-600'>
-                                          {
-                                            providerModels.filter(
-                                              (m) => m.soft_deleted
-                                            ).length
-                                          }{' '}
-                                          disabled
-                                        </span>
-                                      )}
-                                      {groupData?.group_url && (
-                                        <span className='flex items-center gap-1'>
-                                          <Globe className='h-3 w-3' />
-                                          {groupData.group_url}
-                                        </span>
-                                      )}
-                                      {totalModels === 0 && (
-                                        <span className='text-muted-foreground'>
-                                          No models configured
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
-                                </div>
-                                {totalModels === 0 && (
-                                  <Alert className='mb-4'>
-                                    <AlertCircle className='h-4 w-4' />
-                                    <AlertDescription>
-                                      <div className='space-y-2'>
-                                        <p className='font-medium'>
-                                          No models found for this provider
-                                        </p>
-                                        <div className='space-y-1 text-sm'>
-                                          <p className='font-medium'>
-                                            Common issues:
-                                          </p>
-                                          <ul className='ml-2 list-inside list-disc space-y-1'>
-                                            <li>
-                                              <strong>API credentials:</strong>{' '}
-                                              Check if the API key is correct
-                                              and has the right permissions
-                                            </li>
-                                            <li>
-                                              <strong>Base URL:</strong> Verify
-                                              the base URL is correct for your
-                                              provider
-                                            </li>
-                                            <li>
-                                              <strong>Network access:</strong>{' '}
-                                              Ensure the server can reach the
-                                              provider&apos;s API endpoint
-                                            </li>
-                                            <li>
-                                              <strong>Provider status:</strong>{' '}
-                                              The upstream provider might be
-                                              temporarily unavailable
-                                            </li>
-                                          </ul>
-                                          {groupData?.group_url && (
-                                            <p className='text-muted-foreground mt-2 text-xs'>
-                                              Current endpoint:{' '}
-                                              <code className='bg-muted rounded px-1'>
-                                                {groupData.group_url}
-                                              </code>
-                                            </p>
-                                          )}
-                                        </div>
-                                      </div>
-                                    </AlertDescription>
-                                  </Alert>
-                                )}
-                                <ModelSelector
-                                  filterProvider={provider}
-                                  groupData={groupData}
-                                  showProviderActions={true}
-                                  showDeleteAllButton={false}
-                                />
-                              </div>
-                            </TabsContent>
-                          );
-                        }
-                      )}
-                    </div>
-                  </Tabs>
-                )}
-              </TabsContent>
-
-              <TabsContent value='test-basic' className='space-y-4'>
-                <div className='text-muted-foreground text-sm'>
-                  Test model credentials and connectivity with basic chat
-                  completion requests through the secure proxy (resolves CORS
-                  and Docker network issues). Models can be tested even without
-                  API keys configured (useful for free models or when
-                  authentication is handled elsewhere).
-                </div>
-
-                {isLoadingModels ? (
-                  <div className='space-y-4'>
-                    <Skeleton className='h-[200px] w-full' />
-                    <Skeleton className='h-[100px] w-full' />
-                  </div>
-                ) : modelsError ? (
-                  <Alert variant='destructive'>
-                    <AlertCircle className='h-4 w-4' />
-                    <AlertDescription>
-                      Failed to load models for testing. Please try refreshing
-                      the page.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <ModelTester models={models} />
-                )}
-              </TabsContent>
-
-              <TabsContent value='test-api' className='space-y-4'>
-                <div className='text-muted-foreground text-sm'>
-                  Comprehensive testing of all OpenAI API endpoints including
-                  chat completions, embeddings, image generation, audio
-                  synthesis, and model listing through the secure proxy
-                  (resolves CORS and Docker network issues). Models can be
-                  tested with or without API keys configured.
-                </div>
-
-                {isLoadingModels ? (
-                  <div className='space-y-4'>
-                    <Skeleton className='h-[300px] w-full' />
-                    <Skeleton className='h-[200px] w-full' />
-                  </div>
-                ) : modelsError ? (
-                  <Alert variant='destructive'>
-                    <AlertCircle className='h-4 w-4' />
-                    <AlertDescription>
-                      Failed to load models for API testing. Please try
-                      refreshing the page.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <ApiEndpointTester models={models} />
-                )}
-              </TabsContent>
-            </Tabs>
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+          <TabsContent value='test-api' className='mt-0 space-y-3'>
+            <div className='space-y-1'>
+              <h3 className='text-base font-semibold'>
+                OpenAI Endpoint Testing
+              </h3>
+              <p className='text-muted-foreground text-sm'>
+                Validate chat, embeddings, image, audio, and model-listing
+                endpoints through the secure proxy.
+              </p>
+            </div>
+            {isLoadingModels ? (
+              <div className='space-y-4'>
+                <Skeleton className='h-[320px] w-full' />
+                <Skeleton className='h-[220px] w-full' />
+              </div>
+            ) : modelsError ? (
+              <Alert variant='destructive'>
+                <AlertCircle className='h-4 w-4' />
+                <AlertDescription>
+                  Failed to load models for API testing. Please try refreshing
+                  the page.
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <ApiEndpointTester models={models} />
+            )}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </AppPageShell>
   );
 }
diff --git a/ui/app/page.tsx b/ui/app/page.tsx
index ba5dff37..12573d62 100644
--- a/ui/app/page.tsx
+++ b/ui/app/page.tsx
@@ -1,17 +1,41 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { format } from 'date-fns';
 import { useQuery } from '@tanstack/react-query';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { CalendarIcon, RefreshCw } from 'lucide-react';
+import type { DateRange } from 'react-day-picker';
 import { UsageMetricsChart } from '@/components/usage-metrics-chart';
 import { UsageSummaryCards } from '@/components/usage-summary-cards';
 import { ErrorDetailsTable } from '@/components/error-details-table';
 import { RevenueByModelTable } from '@/components/revenue-by-model-table';
 import { DashboardBalanceSummary } from '@/components/dashboard-balance-summary';
-import { AdminService } from '@/lib/api/services/admin';
+import {
+  AdminService,
+  type UsageMetricData,
+  type UsageSummary,
+} from '@/lib/api/services/admin';
 import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Calendar } from '@/components/ui/calendar';
+import { Badge } from '@/components/ui/badge';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -19,16 +43,404 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { RefreshCw } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
 import { useCurrencyStore } from '@/lib/stores/currency';
 import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
 import { CheatSheet } from '@/components/landing/cheat-sheet';
 import { ConfigurationService } from '@/lib/api/services/configuration';
+import { AppPageShell } from '@/components/app-page-shell';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+
+type ChartDatum = Record<string, unknown> & { timestamp: string };
+
+type ChartKeyConfig = {
+  key: string;
+  name: string;
+  color: string;
+};
+
+type ChartConfig = {
+  id: string;
+  title: string;
+  mobileTitle?: string;
+  description: string;
+  data: ChartDatum[];
+  dataKeys: ChartKeyConfig[];
+  metricType: 'currency' | 'count';
+};
+
+const TIME_RANGE_PRESETS = [
+  { value: '24h', label: 'Last 24 Hours', hours: 24 },
+  { value: '7d', label: 'Last 7 Days', hours: 7 * 24 },
+  { value: '30d', label: 'Last 30 Days', hours: 30 * 24 },
+  { value: '3m', label: 'Last 3 Months', hours: 90 * 24 },
+  { value: '12m', label: 'Last 12 Months', hours: 365 * 24 },
+] as const;
+
+type TimeRangePresetValue = (typeof TIME_RANGE_PRESETS)[number]['value'];
+
+const DEFAULT_TIME_RANGE_PRESET = TIME_RANGE_PRESETS[0];
+
+function normalizeDateRange(range: DateRange): DateRange {
+  if (!range.from || !range.to) {
+    return range;
+  }
+
+  if (range.from.getTime() <= range.to.getTime()) {
+    return range;
+  }
+
+  return {
+    from: range.to,
+    to: range.from,
+  };
+}
+
+function getRangeHours(range?: DateRange): number | null {
+  if (!range?.from || !range.to) {
+    return null;
+  }
+
+  const normalized = normalizeDateRange(range);
+  const fromTime = normalized.from?.getTime();
+  const toTime = normalized.to?.getTime();
+
+  if (fromTime === undefined || toTime === undefined) {
+    return null;
+  }
+
+  const diffMs = toTime - fromTime;
+  const diffHours = Math.ceil(diffMs / (1000 * 60 * 60));
+
+  return Math.max(1, diffHours);
+}
+
+function formatDateRangeLabel(range?: DateRange): string {
+  if (!range?.from && !range?.to) {
+    return 'Custom range';
+  }
+
+  if (range.from && !range.to) {
+    return `${format(range.from, 'MMM d, yyyy')} - ...`;
+  }
+
+  if (!range.from || !range.to) {
+    return 'Custom range';
+  }
+
+  const normalized = normalizeDateRange(range);
+  const from = normalized.from;
+  const to = normalized.to;
+
+  if (!from || !to) {
+    return 'Custom range';
+  }
+
+  const sameDay = format(from, 'yyyy-MM-dd') === format(to, 'yyyy-MM-dd');
+
+  if (sameDay) {
+    return format(from, 'MMM d, yyyy');
+  }
+
+  return `${format(from, 'MMM d')} - ${format(to, 'MMM d, yyyy')}`;
+}
+
+function formatCompactDateRangeLabel(range?: DateRange): string {
+  if (!range?.from || !range.to) {
+    return 'Custom range';
+  }
+
+  const normalized = normalizeDateRange(range);
+  const from = normalized.from;
+  const to = normalized.to;
+
+  if (!from || !to) {
+    return 'Custom range';
+  }
+
+  const sameMonth = format(from, 'yyyy-MM') === format(to, 'yyyy-MM');
+  if (sameMonth) {
+    return `${format(from, 'MMM d')} - ${format(to, 'd')}`;
+  }
+
+  const sameYear = format(from, 'yyyy') === format(to, 'yyyy');
+  if (sameYear) {
+    return `${format(from, 'MMM d')} - ${format(to, 'MMM d')}`;
+  }
+
+  return `${format(from, 'MMM d, yyyy')} - ${format(to, 'MMM d, yyyy')}`;
+}
+
+function getAutoIntervalMinutes(hours: number): number {
+  const totalMinutes = Math.max(60, Math.ceil(hours * 60));
+  const targetPoints = 96;
+  const idealInterval = Math.ceil(totalMinutes / targetPoints);
+  const allowedIntervals = [5, 15, 30, 60, 120, 180, 240, 360, 480, 720, 1440];
+
+  return (
+    allowedIntervals.find((intervalMinutes) => intervalMinutes >= idealInterval) ??
+    allowedIntervals[allowedIntervals.length - 1]
+  );
+}
+
+function SectionLoading({ label }: { label: string }) {
+  if (label === 'summary') {
+    return (
+      <div className='grid grid-cols-1 gap-2.5 px-1 min-[380px]:grid-cols-2 sm:gap-4 sm:px-0 xl:grid-cols-4'>
+        {Array.from({ length: 12 }).map((_, index) => (
+          <Card key={`summary-skeleton-${index}`}>
+            <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-1 sm:pb-2'>
+              <Skeleton
+                className={cn(
+                  'h-3.5',
+                  index % 4 === 0 && 'w-20',
+                  index % 4 === 1 && 'w-24',
+                  index % 4 === 2 && 'w-28',
+                  index % 4 === 3 && 'w-32'
+                )}
+              />
+              <Skeleton className='size-6 rounded-full sm:size-8' />
+            </CardHeader>
+            <CardContent className='space-y-2 pt-0'>
+              <Skeleton className='h-7 w-24 sm:h-8 sm:w-28' />
+              <Skeleton
+                className={cn(
+                  'h-3',
+                  index % 3 === 0 && 'w-12',
+                  index % 3 === 1 && 'w-16',
+                  index % 3 === 2 && 'w-20'
+                )}
+              />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  if (label === 'metrics') {
+    return (
+      <Card>
+        <CardHeader className='space-y-3 sm:space-y-4'>
+          <div className='flex gap-2 overflow-x-auto pb-1'>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <Skeleton
+                key={`metrics-tab-skeleton-${index}`}
+                className={cn('h-7 rounded-md', index === 0 ? 'w-28' : 'w-20')}
+              />
+            ))}
+          </div>
+          <div className='flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between'>
+            <div className='min-w-0 space-y-2'>
+              <Skeleton className='h-5 w-44 max-w-full sm:h-6' />
+              <Skeleton className='h-3.5 w-72 max-w-full' />
+            </div>
+            <Skeleton className='hidden h-8 w-8 shrink-0 rounded-md sm:block' />
+          </div>
+        </CardHeader>
+        <CardContent className='space-y-3 sm:space-y-4'>
+          <div className='flex gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:overflow-visible sm:pb-0'>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <div
+                key={`metrics-chip-skeleton-${index}`}
+                className='bg-muted/30 border-border/60 flex h-8 shrink-0 items-center gap-2 rounded-full border px-3'
+              >
+                <Skeleton className='size-2 rounded-full' />
+                <Skeleton className='h-3 w-16 sm:w-20' />
+                <Skeleton className='h-3 w-10 sm:w-12' />
+              </div>
+            ))}
+          </div>
+          <div className='border-border/60 bg-muted/10 relative h-[260px] w-full overflow-hidden rounded-md border p-4 sm:h-[340px]'>
+            <div className='space-y-3'>
+              {Array.from({ length: 3 }).map((_, index) => (
+                <Skeleton
+                  key={`metrics-gridline-skeleton-${index}`}
+                  className='h-[1px] w-full'
+                />
+              ))}
+            </div>
+            <div className='absolute inset-x-4 bottom-4 flex items-end gap-2'>
+              {Array.from({ length: 10 }).map((_, index) => (
+                <Skeleton
+                  key={`metrics-bar-skeleton-${index}`}
+                  className={cn(
+                    'w-full max-w-[26px] rounded-sm',
+                    index % 5 === 0 && 'h-16',
+                    index % 5 === 1 && 'h-24',
+                    index % 5 === 2 && 'h-12',
+                    index % 5 === 3 && 'h-28',
+                    index % 5 === 4 && 'h-20'
+                  )}
+                />
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (label === 'revenue by model') {
+    return (
+      <Card>
+        <CardHeader className='space-y-2'>
+          <Skeleton className='h-5 w-40' />
+          <Skeleton className='h-3.5 w-60 max-w-full' />
+        </CardHeader>
+        <CardContent className='space-y-4'>
+          <div className='overflow-x-auto'>
+            <div className='min-w-[680px] space-y-3 sm:min-w-[860px]'>
+              <div className='grid grid-cols-9 gap-3 border-b pb-3'>
+                {Array.from({ length: 9 }).map((_, index) => (
+                  <Skeleton
+                    key={`revenue-header-skeleton-${index}`}
+                    className={cn(
+                      'h-3.5',
+                      index === 0 && 'w-20',
+                      index > 0 && index < 5 && 'w-14 justify-self-end',
+                      index === 5 && 'w-24',
+                      index > 5 && 'w-16 justify-self-end'
+                    )}
+                  />
+                ))}
+              </div>
+              {Array.from({ length: 5 }).map((_, rowIndex) => (
+                <div
+                  key={`revenue-row-skeleton-${rowIndex}`}
+                  className='grid grid-cols-9 items-center gap-3 py-2'
+                >
+                  <Skeleton className='h-4 w-28' />
+                  <Skeleton className='h-4 w-12 justify-self-end' />
+                  <Skeleton className='h-4 w-12 justify-self-end' />
+                  <Skeleton className='h-4 w-10 justify-self-end' />
+                  <Skeleton className='h-4 w-16 justify-self-end' />
+                  <div className='flex items-center gap-2'>
+                    <Skeleton className='h-2.5 flex-1' />
+                    <Skeleton className='h-3 w-8' />
+                  </div>
+                  <Skeleton className='h-4 w-14 justify-self-end' />
+                  <Skeleton className='h-4 w-16 justify-self-end' />
+                  <Skeleton className='h-4 w-16 justify-self-end' />
+                </div>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (label === 'errors') {
+    return (
+      <Card>
+        <CardHeader className='space-y-2'>
+          <Skeleton className='h-5 w-40' />
+          <Skeleton className='h-3.5 w-60 max-w-full' />
+        </CardHeader>
+        <CardContent>
+          <div className='max-h-[420px] max-w-full overflow-y-auto'>
+            <div className='min-w-[640px] space-y-3 sm:min-w-[760px]'>
+              <div className='grid grid-cols-5 gap-3 border-b pb-3'>
+                <Skeleton className='h-3.5 w-20' />
+                <Skeleton className='h-3.5 w-12' />
+                <Skeleton className='h-3.5 w-16' />
+                <Skeleton className='h-3.5 w-16' />
+                <Skeleton className='h-3.5 w-16' />
+              </div>
+              {Array.from({ length: 6 }).map((_, rowIndex) => (
+                <div
+                  key={`errors-row-skeleton-${rowIndex}`}
+                  className='grid grid-cols-5 items-center gap-3 py-2'
+                >
+                  <Skeleton className='h-4 w-28' />
+                  <Skeleton className='h-5 w-16 rounded-full' />
+                  <Skeleton className='h-4 w-full' />
+                  <Skeleton className='h-4 w-24' />
+                  <Skeleton className='h-4 w-24' />
+                </div>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className='space-y-3 py-6'>
+        <Skeleton className='h-4 w-36' />
+        <Skeleton className='h-24 w-full' />
+      </CardContent>
+    </Card>
+  );
+}
+
+function DashboardInsights({ summary }: { summary?: UsageSummary }) {
+  if (!summary) {
+    return null;
+  }
+
+  const errorTypes = Object.entries(summary.error_types || {}).sort(
+    ([, a], [, b]) => b - a
+  );
+
+  const hasModels = summary.unique_models.length > 0;
+  const hasErrorTypes = errorTypes.length > 0;
+
+  if (!hasModels && !hasErrorTypes) {
+    return null;
+  }
+
+  return (
+    <div className='grid gap-6 lg:grid-cols-2'>
+      {hasModels && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Active Models</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className='flex flex-wrap gap-2'>
+              {summary.unique_models.map((model) => (
+                <Badge key={model} variant='secondary'>
+                  {model}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      {hasErrorTypes && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Error Types Distribution</CardTitle>
+          </CardHeader>
+          <CardContent className='space-y-2'>
+            {errorTypes.map(([type, count]) => (
+              <div key={type} className='flex items-center justify-between'>
+                <span className='text-sm font-medium'>{type}</span>
+                <span className='text-muted-foreground text-sm'>{count}</span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
 
 export default function DashboardPage() {
-  const [timeRange, setTimeRange] = useState('24');
-  const [interval, setInterval] = useState('15');
+  const [selectedPreset, setSelectedPreset] =
+    useState<TimeRangePresetValue>('24h');
+  const [customRange, setCustomRange] = useState<DateRange>();
+  const [pendingCustomRange, setPendingCustomRange] = useState<DateRange>();
+  const [isCustomRangeActive, setIsCustomRangeActive] = useState(false);
+  const [isCustomRangePickerOpen, setIsCustomRangePickerOpen] = useState(false);
+  const [isManualRefreshing, setIsManualRefreshing] = useState(false);
+  const [activeChartId, setActiveChartId] = useState('revenue');
+  const isMobile = useIsMobile();
   const { displayUnit } = useCurrencyStore();
   const [isAuthenticated, setIsAuthenticated] = useState(() => {
     if (typeof window === 'undefined') {
@@ -63,15 +475,21 @@ export default function DashboardPage() {
   });
 
   const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+  const activePreset =
+    TIME_RANGE_PRESETS.find((option) => option.value === selectedPreset) ??
+    DEFAULT_TIME_RANGE_PRESET;
+  const customRangeHours = getRangeHours(customRange);
+  const queryHours =
+    isCustomRangeActive && customRangeHours ? customRangeHours : activePreset.hours;
+  const autoInterval = getAutoIntervalMinutes(queryHours);
 
   const {
     data: metricsData,
     isLoading: metricsLoading,
     refetch: refetchMetrics,
   } = useQuery({
-    queryKey: ['usage-metrics', interval, timeRange],
-    queryFn: () =>
-      AdminService.getUsageMetrics(parseInt(interval), parseInt(timeRange)),
+    queryKey: ['usage-metrics', autoInterval, queryHours],
+    queryFn: () => AdminService.getUsageMetrics(autoInterval, queryHours),
     enabled: isAuthenticated,
     refetchInterval: 60_000,
     staleTime: 30_000,
@@ -82,8 +500,8 @@ export default function DashboardPage() {
     isLoading: summaryLoading,
     refetch: refetchSummary,
   } = useQuery({
-    queryKey: ['usage-summary', timeRange],
-    queryFn: () => AdminService.getUsageSummary(parseInt(timeRange)),
+    queryKey: ['usage-summary', queryHours],
+    queryFn: () => AdminService.getUsageSummary(queryHours),
     enabled: isAuthenticated,
     refetchInterval: 60_000,
     staleTime: 30_000,
@@ -94,8 +512,8 @@ export default function DashboardPage() {
     isLoading: errorLoading,
     refetch: refetchErrors,
   } = useQuery({
-    queryKey: ['usage-errors', timeRange],
-    queryFn: () => AdminService.getErrorDetails(parseInt(timeRange), 100),
+    queryKey: ['usage-errors', queryHours],
+    queryFn: () => AdminService.getErrorDetails(queryHours, 100),
     enabled: isAuthenticated,
     refetchInterval: 60_000,
     staleTime: 30_000,
@@ -106,277 +524,378 @@ export default function DashboardPage() {
     isLoading: revenueByModelLoading,
     refetch: refetchRevenueByModel,
   } = useQuery({
-    queryKey: ['revenue-by-model', timeRange],
-    queryFn: () => AdminService.getRevenueByModel(parseInt(timeRange), 20),
+    queryKey: ['revenue-by-model', queryHours],
+    queryFn: () => AdminService.getRevenueByModel(queryHours, 20),
     enabled: isAuthenticated,
     refetchInterval: 60_000,
     staleTime: 30_000,
   });
 
+  const chartConfigs = useMemo<ChartConfig[]>(() => {
+    if (!metricsData || metricsData.metrics.length === 0) {
+      return [];
+    }
+
+    const metricPoints = metricsData.metrics as ChartDatum[];
+    const revenuePoints = metricsData.metrics.map((metric: UsageMetricData) => ({
+      ...metric,
+      revenue_sats: metric.revenue_msats / 1000,
+      refunds_sats: metric.refunds_msats / 1000,
+      net_revenue_sats: (metric.revenue_msats - metric.refunds_msats) / 1000,
+    })) as ChartDatum[];
+
+    return [
+      {
+        id: 'revenue',
+        title: 'Revenue Over Time (sats)',
+        mobileTitle: 'Revenue',
+        description: 'Track gross revenue, refunds, and net revenue trends.',
+        data: revenuePoints,
+        metricType: 'currency',
+        dataKeys: [
+          {
+            key: 'revenue_sats',
+            name: 'Revenue',
+            color: 'var(--chart-1)',
+          },
+          {
+            key: 'net_revenue_sats',
+            name: 'Net Revenue',
+            color: 'var(--chart-2)',
+          },
+          {
+            key: 'refunds_sats',
+            name: 'Refunds',
+            color: 'var(--chart-5)',
+          },
+        ],
+      },
+      {
+        id: 'requests',
+        title: 'Request Volume',
+        mobileTitle: 'Requests',
+        description: 'Understand traffic and completion reliability over time.',
+        data: metricPoints,
+        metricType: 'count',
+        dataKeys: [
+          {
+            key: 'total_requests',
+            name: 'Total Requests',
+            color: 'var(--chart-1)',
+          },
+          {
+            key: 'successful_chat_completions',
+            name: 'Successful',
+            color: 'var(--chart-2)',
+          },
+          {
+            key: 'failed_requests',
+            name: 'Failed',
+            color: 'var(--chart-5)',
+          },
+        ],
+      },
+      {
+        id: 'errors',
+        title: 'Error Tracking',
+        mobileTitle: 'Errors',
+        description: 'Monitor warnings, handled errors, and upstream failures.',
+        data: metricPoints,
+        metricType: 'count',
+        dataKeys: [
+          {
+            key: 'errors',
+            name: 'Errors',
+            color: 'var(--chart-4)',
+          },
+          {
+            key: 'warnings',
+            name: 'Warnings',
+            color: 'var(--chart-3)',
+          },
+          {
+            key: 'upstream_errors',
+            name: 'Upstream Errors',
+            color: 'var(--chart-5)',
+          },
+        ],
+      },
+      {
+        id: 'payments',
+        title: 'Payment Activity',
+        mobileTitle: 'Payments',
+        description: 'Follow payment processing activity by interval.',
+        data: metricPoints,
+        metricType: 'count',
+        dataKeys: [
+          {
+            key: 'payment_processed',
+            name: 'Payments Processed',
+            color: 'var(--chart-2)',
+          },
+        ],
+      },
+    ];
+  }, [metricsData]);
+
+  useEffect(() => {
+    if (chartConfigs.length === 0) {
+      return;
+    }
+
+    if (!chartConfigs.some((config) => config.id === activeChartId)) {
+      setActiveChartId(chartConfigs[0].id);
+    }
+  }, [chartConfigs, activeChartId]);
+
   if (!isAuthenticated) {
     return <CheatSheet />;
   }
 
-  const handleRefresh = () => {
-    refetchMetrics();
-    refetchSummary();
-    refetchErrors();
-    refetchRevenueByModel();
+  const handleRefresh = async () => {
+    if (isManualRefreshing) {
+      return;
+    }
+
+    setIsManualRefreshing(true);
+    await Promise.allSettled([
+      refetchMetrics(),
+      refetchSummary(),
+      refetchErrors(),
+      refetchRevenueByModel(),
+    ]);
+    setIsManualRefreshing(false);
   };
 
-  return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset className='p-0'>
-        <SiteHeader />
-        <div className='container max-w-7xl px-4 py-8 md:px-6 lg:px-8'>
-          <div className='mb-8'>
-            <h1 className='mb-6 text-3xl font-bold tracking-tight'>
-              Dashboard
-            </h1>
-            <DashboardBalanceSummary
-              displayUnit={displayUnit}
-              usdPerSat={usdPerSat}
-            />
-          </div>
+  const openRangePicker = () => {
+    // Force a fresh selection so the range is only applied
+    // after the user explicitly chooses both start and end.
+    setPendingCustomRange(undefined);
+    setIsCustomRangePickerOpen(true);
+  };
 
-          <div className='mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
-            <div>
-              <h2 className='text-xl font-semibold tracking-tight'>
+  const handleCustomRangePickerChange = (open: boolean) => {
+    if (open) {
+      openRangePicker();
+      return;
+    }
+
+    setIsCustomRangePickerOpen(false);
+  };
+
+  const handleRangeSelectChange = (value: string) => {
+    if (value === 'custom') {
+      // Always require an explicit fresh range selection.
+      openRangePicker();
+      return;
+    }
+
+    const preset = TIME_RANGE_PRESETS.find((option) => option.value === value);
+
+    if (!preset) {
+      return;
+    }
+
+    setSelectedPreset(preset.value);
+    setIsCustomRangeActive(false);
+  };
+
+  const handleCustomRangeSelect = (nextRange: DateRange | undefined) => {
+    if (!nextRange?.from) {
+      setPendingCustomRange(undefined);
+      return;
+    }
+
+    const normalized = normalizeDateRange(nextRange);
+    const from = normalized.from;
+    const to = normalized.to;
+    const hasPreviousStart = Boolean(pendingCustomRange?.from);
+
+    if (!from) {
+      setPendingCustomRange(undefined);
+      return;
+    }
+
+    // DayPicker may emit from===to on the first click in range mode.
+    // Keep waiting until the user explicitly picks a second (end) date.
+    const isSameDay = to ? from.getTime() === to.getTime() : false;
+    if (!hasPreviousStart || !to || isSameDay) {
+      setPendingCustomRange({ from, to: undefined });
+      return;
+    }
+
+    setPendingCustomRange(normalized);
+    setCustomRange(normalized);
+    setIsCustomRangeActive(true);
+    setIsCustomRangePickerOpen(false);
+  };
+
+  const activeChartConfig =
+    chartConfigs.find((config) => config.id === activeChartId) ?? chartConfigs[0];
+  const selectedRangeValue =
+    isCustomRangeActive && customRange?.from && customRange?.to
+      ? 'custom'
+      : selectedPreset;
+  const activeRangeLabel =
+    selectedRangeValue === 'custom'
+      ? formatDateRangeLabel(customRange)
+      : activePreset.label;
+  const compactCustomRangeLabel = formatCompactDateRangeLabel(customRange);
+
+  return (
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='min-w-0 space-y-4 sm:space-y-6'>
+        <section className='space-y-1 px-1'>
+          <h1 className='text-lg font-semibold tracking-tight sm:text-2xl'>Dashboard</h1>
+          <p className='text-muted-foreground text-sm leading-relaxed'>
+            Node balances, request health, and revenue trends.
+          </p>
+        </section>
+
+        <DashboardBalanceSummary displayUnit={displayUnit} usdPerSat={usdPerSat} />
+
+        <section className='space-y-3 rounded-xl border border-border/60 bg-card/35 p-3 sm:p-4'>
+          <div className='space-y-1'>
+            <div className='min-w-0'>
+              <h2 className='text-base leading-snug font-semibold tracking-tight sm:text-lg'>
                 Usage Analytics
               </h2>
-              <p className='text-muted-foreground mt-1 text-sm'>
-                Monitor requests, errors, and revenue over the last {timeRange}{' '}
-                hours
+              <p className='text-muted-foreground text-xs sm:text-sm'>
+                Select a preset or custom date range to analyze traffic and revenue.
+              </p>
+              <p className='text-muted-foreground text-[11px] sm:text-xs'>
+                Showing {activeRangeLabel}.
               </p>
             </div>
-            <div className='flex items-center gap-4'>
-              <Select value={timeRange} onValueChange={setTimeRange}>
-                <SelectTrigger className='w-[180px]'>
-                  <SelectValue placeholder='Select time range' />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='1'>Last Hour</SelectItem>
-                  <SelectItem value='6'>Last 6 Hours</SelectItem>
-                  <SelectItem value='24'>Last 24 Hours</SelectItem>
-                  <SelectItem value='72'>Last 3 Days</SelectItem>
-                  <SelectItem value='168'>Last Week</SelectItem>
-                </SelectContent>
-              </Select>
-              <Select value={interval} onValueChange={setInterval}>
-                <SelectTrigger className='w-[180px]'>
-                  <SelectValue placeholder='Select interval' />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='5'>5 Minutes</SelectItem>
-                  <SelectItem value='15'>15 Minutes</SelectItem>
-                  <SelectItem value='30'>30 Minutes</SelectItem>
-                  <SelectItem value='60'>1 Hour</SelectItem>
-                </SelectContent>
-              </Select>
-              <Button onClick={handleRefresh} variant='outline' size='icon'>
-                <RefreshCw className='h-4 w-4' />
+          </div>
+
+          <div className='space-y-1.5'>
+            <p className='text-muted-foreground text-[11px] font-normal tracking-tight sm:text-xs'>
+              Range
+            </p>
+            <div className='flex flex-col gap-2 sm:flex-row sm:items-center'>
+              <div className='w-full max-w-[20rem] sm:max-w-[22rem]'>
+                <div className='border-input bg-card/30 dark:bg-input/30 flex h-8 w-full min-w-0 items-stretch overflow-hidden rounded-lg border sm:h-9'>
+                  <Popover
+                    open={isCustomRangePickerOpen}
+                    onOpenChange={handleCustomRangePickerChange}
+                  >
+                    <PopoverTrigger asChild>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        size='icon'
+                        id='dashboard-date-range'
+                        className='text-muted-foreground hover:bg-muted/50 hover:text-foreground dark:hover:bg-input/50 h-full w-8 rounded-none border-0 bg-transparent p-0 sm:w-9'
+                        aria-label='Open custom date range'
+                      >
+                        <CalendarIcon className='h-3.5 w-3.5' />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent align='start' className='w-auto overflow-hidden p-0'>
+                      <Calendar
+                        mode='range'
+                        selected={pendingCustomRange}
+                        onSelect={handleCustomRangeSelect}
+                        defaultMonth={pendingCustomRange?.from}
+                        numberOfMonths={isMobile ? 1 : 2}
+                        className='p-3'
+                      />
+                    </PopoverContent>
+                  </Popover>
+
+                  <div className='bg-border/70 w-px' />
+
+                  <Select value={selectedRangeValue} onValueChange={handleRangeSelectChange}>
+                    <SelectTrigger className='h-full w-full min-h-0 rounded-none border-0 !bg-transparent px-3 py-0 text-sm font-normal shadow-none ring-0 hover:!bg-transparent data-[state=open]:!bg-transparent focus-visible:border-transparent focus-visible:ring-0 dark:!bg-transparent dark:hover:!bg-transparent'>
+                      <SelectValue placeholder='Select range' className='text-left' />
+                    </SelectTrigger>
+                    <SelectContent align='start'>
+                      {customRange?.from && customRange?.to && (
+                        <SelectItem value='custom'>{compactCustomRangeLabel}</SelectItem>
+                      )}
+                      {TIME_RANGE_PRESETS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <Button
+                onClick={handleRefresh}
+                variant='outline'
+                disabled={isManualRefreshing}
+                className='h-8 w-full px-2.5 text-xs sm:ml-auto sm:w-auto'
+              >
+                <RefreshCw
+                  className={cn('mr-1 h-3 w-3', isManualRefreshing && 'animate-spin')}
+                />
+                {isManualRefreshing ? 'Refreshing...' : 'Refresh'}
               </Button>
             </div>
           </div>
+        </section>
 
-          <div className='space-y-6'>
-            {summaryLoading ? (
-              <div className='py-8 text-center'>Loading summary...</div>
-            ) : summaryData ? (
-              <UsageSummaryCards summary={summaryData} />
-            ) : null}
+        {metricsLoading ? (
+          <SectionLoading label='metrics' />
+        ) : activeChartConfig ? (
+          <UsageMetricsChart
+            data={activeChartConfig.data}
+            title={activeChartConfig.title}
+            description={activeChartConfig.description}
+            dataKeys={activeChartConfig.dataKeys}
+            metricType={activeChartConfig.metricType}
+            tabs={chartConfigs.map((config) => ({
+              id: config.id,
+              label: isMobile ? config.mobileTitle ?? config.title : config.title,
+            }))}
+            activeTabId={activeChartId}
+            onTabChange={setActiveChartId}
+          />
+        ) : (
+          <Card>
+            <CardContent>
+              <Empty className='border-none py-8'>
+                <EmptyHeader>
+                  <EmptyMedia variant='icon'>
+                    <RefreshCw className='h-4 w-4' />
+                  </EmptyMedia>
+                  <EmptyTitle>No data available</EmptyTitle>
+                  <EmptyDescription>
+                    No metrics data exists for this range yet. Try a broader range.
+                  </EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            </CardContent>
+          </Card>
+        )}
 
-            <div className='grid gap-6 lg:grid-cols-2'>
-              {metricsLoading ? (
-                <div className='col-span-2 py-8 text-center'>
-                  Loading metrics...
-                </div>
-              ) : metricsData && metricsData.metrics.length > 0 ? (
-                <>
-                  <div className='col-span-full'>
-                    <UsageMetricsChart
-                      data={
-                        metricsData.metrics.map((m) => ({
-                          ...m,
-                          revenue_sats: m.revenue_msats / 1000,
-                          refunds_sats: m.refunds_msats / 1000,
-                          net_revenue_sats:
-                            (m.revenue_msats - m.refunds_msats) / 1000,
-                        })) as Array<
-                          Record<string, unknown> & { timestamp: string }
-                        >
-                      }
-                      title='Revenue Over Time (sats)'
-                      dataKeys={[
-                        {
-                          key: 'revenue_sats',
-                          name: 'Revenue',
-                          color: '#10b981',
-                        },
-                        {
-                          key: 'net_revenue_sats',
-                          name: 'Net Revenue',
-                          color: '#059669',
-                        },
-                        {
-                          key: 'refunds_sats',
-                          name: 'Refunds',
-                          color: '#ef4444',
-                        },
-                      ]}
-                    />
-                  </div>
-                  <UsageMetricsChart
-                    data={
-                      metricsData.metrics as Array<
-                        Record<string, unknown> & { timestamp: string }
-                      >
-                    }
-                    title='Request Volume'
-                    dataKeys={[
-                      {
-                        key: 'total_requests',
-                        name: 'Total Requests',
-                        color: '#3b82f6',
-                      },
-                      {
-                        key: 'successful_chat_completions',
-                        name: 'Successful',
-                        color: '#22c55e',
-                      },
-                      {
-                        key: 'failed_requests',
-                        name: 'Failed',
-                        color: '#f43f5e',
-                      },
-                    ]}
-                  />
-                  <UsageMetricsChart
-                    data={
-                      metricsData.metrics as Array<
-                        Record<string, unknown> & { timestamp: string }
-                      >
-                    }
-                    title='Error Tracking'
-                    dataKeys={[
-                      {
-                        key: 'errors',
-                        name: 'Errors',
-                        color: '#f97316',
-                      },
-                      {
-                        key: 'warnings',
-                        name: 'Warnings',
-                        color: '#eab308',
-                      },
-                      {
-                        key: 'upstream_errors',
-                        name: 'Upstream Errors',
-                        color: '#dc2626',
-                      },
-                    ]}
-                  />
-                  <UsageMetricsChart
-                    data={
-                      metricsData.metrics as Array<
-                        Record<string, unknown> & { timestamp: string }
-                      >
-                    }
-                    title='Payment Activity'
-                    dataKeys={[
-                      {
-                        key: 'payment_processed',
-                        name: 'Payments Processed',
-                        color: '#8b5cf6',
-                      },
-                    ]}
-                  />
-                  <div className='space-y-6'>
-                    {summaryData && summaryData.unique_models.length > 0 && (
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>Active Models</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                          <div className='flex flex-wrap gap-2'>
-                            {summaryData.unique_models.map((model) => (
-                              <span
-                                key={model}
-                                className='bg-secondary text-secondary-foreground inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold'
-                              >
-                                {model}
-                              </span>
-                            ))}
-                          </div>
-                        </CardContent>
-                      </Card>
-                    )}
-                    {summaryData &&
-                      summaryData.error_types &&
-                      Object.keys(summaryData.error_types).length > 0 && (
-                        <Card>
-                          <CardHeader>
-                            <CardTitle>Error Types Distribution</CardTitle>
-                          </CardHeader>
-                          <CardContent>
-                            <div className='space-y-2'>
-                              {Object.entries(summaryData.error_types)
-                                .sort(([, a], [, b]) => b - a)
-                                .map(([type, count]) => (
-                                  <div
-                                    key={type}
-                                    className='flex items-center justify-between'
-                                  >
-                                    <span className='text-sm font-medium'>
-                                      {type}
-                                    </span>
-                                    <span className='text-muted-foreground text-sm'>
-                                      {count}
-                                    </span>
-                                  </div>
-                                ))}
-                            </div>
-                          </CardContent>
-                        </Card>
-                      )}
-                  </div>
-                </>
-              ) : (
-                <Card className='col-span-2'>
-                  <CardHeader>
-                    <CardTitle>No Data Available</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className='text-muted-foreground'>
-                      No metrics data found for the selected time range. This
-                      could be because no requests have been logged yet or the
-                      log files are not available.
-                    </p>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
+        {summaryLoading ? (
+          <SectionLoading label='summary' />
+        ) : summaryData ? (
+          <UsageSummaryCards summary={summaryData} />
+        ) : null}
 
-            {revenueByModelLoading ? (
-              <div className='py-8 text-center'>
-                Loading revenue by model...
-              </div>
-            ) : revenueByModelData && revenueByModelData.models.length > 0 ? (
-              <RevenueByModelTable
-                models={revenueByModelData.models}
-                totalRevenue={revenueByModelData.total_revenue_sats}
-              />
-            ) : null}
+        <DashboardInsights summary={summaryData} />
 
-            {errorLoading ? (
-              <div className='py-8 text-center'>Loading errors...</div>
-            ) : errorData ? (
-              <ErrorDetailsTable errors={errorData.errors} />
-            ) : null}
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+        {revenueByModelLoading ? (
+          <SectionLoading label='revenue by model' />
+        ) : revenueByModelData && revenueByModelData.models.length > 0 ? (
+          <RevenueByModelTable
+            models={revenueByModelData.models}
+            totalRevenue={revenueByModelData.total_revenue_sats}
+          />
+        ) : null}
+
+        {errorLoading ? (
+          <SectionLoading label='errors' />
+        ) : errorData ? (
+          <ErrorDetailsTable errors={errorData.errors} />
+        ) : null}
+      </div>
+    </AppPageShell>
   );
 }
diff --git a/ui/app/providers.tsx b/ui/app/providers.tsx
index db29ca68..3ab0fc06 100644
--- a/ui/app/providers.tsx
+++ b/ui/app/providers.tsx
@@ -3,10 +3,11 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useState, type ReactNode } from 'react';
-import { Toaster } from 'sonner';
-import { AuthProvider } from '@/lib/auth/AuthContext';
-import { ProtectedRoute } from '@/lib/auth/ProtectedRoute';
+import { AuthProvider } from '@/lib/auth/auth-context';
+import { ProtectedRoute } from '@/lib/auth/protected-route';
 import { ThemeProvider } from '@/components/theme-provider';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { Toaster } from '@/components/ui/sonner';
 
 interface ProvidersProps {
   children: ReactNode;
@@ -34,12 +35,14 @@ export function Providers({ children }: ProvidersProps) {
         enableSystem
         disableTransitionOnChange
       >
-        <AuthProvider>
-          <ProtectedRoute>
-            {children}
-            <Toaster position='top-right' />
-          </ProtectedRoute>
-        </AuthProvider>
+        <TooltipProvider>
+          <AuthProvider>
+            <ProtectedRoute>
+              {children}
+              <Toaster position='top-right' />
+            </ProtectedRoute>
+          </AuthProvider>
+        </TooltipProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </ThemeProvider>
     </QueryClientProvider>
diff --git a/ui/app/providers/page.tsx b/ui/app/providers/page.tsx
index 2f377011..8a6536f9 100644
--- a/ui/app/providers/page.tsx
+++ b/ui/app/providers/page.tsx
@@ -1,388 +1,42 @@
 'use client';
 
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   AdminService,
+  ProviderModels,
+  ProviderType,
   UpstreamProvider,
   CreateUpstreamProvider,
   UpdateUpstreamProvider,
   AdminModel,
 } from '@/lib/api/services/admin';
-import { AddProviderModelDialog } from '@/components/AddProviderModelDialog';
-import { BatchOverrideDialog } from '@/components/BatchOverrideDialog';
+import { AddProviderModelDialog } from '@/components/add-provider-model-dialog';
+import { BatchOverrideDialog } from '@/components/batch-override-dialog';
+import { ProviderCard } from '@/components/provider-card';
+import { ProviderFormDialogContent } from '@/components/provider-form-dialog-content';
 import { Skeleton } from '@/components/ui/skeleton';
-import {
-  AlertCircle,
-  Plus,
-  Pencil,
-  Trash2,
-  Server,
-  Database,
-  ChevronDown,
-  ChevronUp,
-} from 'lucide-react';
+import { AlertCircle, Plus, Server } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useState, useEffect } from 'react';
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 
-function ProviderBalance({
-  providerId,
-  platformUrl,
-}: {
-  providerId: number;
-  platformUrl?: string | null;
-}) {
-  const [isTopupDialogOpen, setIsTopupDialogOpen] = useState(false);
-  const [topupAmount, setTopupAmount] = useState('');
-  const [topupError, setTopupError] = useState('');
-  const [isHovered, setIsHovered] = useState(false);
-  const [invoiceData, setInvoiceData] = useState<{
-    payment_request: string;
-    invoice_id: string;
-  } | null>(null);
-  const [paymentStatus, setPaymentStatus] = useState<'pending' | 'paid' | null>(
-    null
-  );
-  const queryClient = useQueryClient();
-
-  const {
-    data: balanceData,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ['provider-balance', providerId],
-    queryFn: () => AdminService.getProviderBalance(providerId),
-    refetchInterval: 30000,
-    refetchOnWindowFocus: true,
-    retry: 1,
-  });
-
-  const { data: statusData } = useQuery({
-    queryKey: ['topup-status', providerId, invoiceData?.invoice_id],
-    queryFn: () =>
-      AdminService.checkTopupStatus(providerId, invoiceData!.invoice_id),
-    enabled: !!invoiceData && paymentStatus === 'pending',
-    refetchInterval: 2000,
-  });
-
-  useEffect(() => {
-    if (statusData?.paid === true) {
-      setPaymentStatus('paid');
-      queryClient.invalidateQueries({
-        queryKey: ['provider-balance', providerId],
-      });
-      toast.success('Payment received!', {
-        description: 'Your balance has been updated.',
-      });
-    }
-  }, [statusData, queryClient, providerId]);
-
-  const topupMutation = useMutation({
-    mutationFn: async (amount: number) => {
-      console.log('Calling top-up API with:', { providerId, amount });
-      try {
-        const result = await AdminService.initiateProviderTopup(
-          providerId,
-          amount
-        );
-        console.log('API returned:', result);
-        return result;
-      } catch (err) {
-        console.error('API call failed:', err);
-        throw err;
-      }
-    },
-    onSuccess: (data) => {
-      console.log('Top-up response:', data);
-      console.log('Type of data:', typeof data);
-      console.log('Keys in data:', Object.keys(data || {}));
-
-      if (data?.topup_data?.payment_request && data?.topup_data?.invoice_id) {
-        setInvoiceData({
-          payment_request: data.topup_data.payment_request as string,
-          invoice_id: data.topup_data.invoice_id as string,
-        });
-        setPaymentStatus('pending');
-      } else {
-        console.error('Missing invoice data:', data);
-        console.error('topup_data:', data?.topup_data);
-        toast.error('No invoice returned from provider');
-        setIsTopupDialogOpen(false);
-      }
-    },
-    onError: (error: Error) => {
-      console.error('Top-up mutation error:', error);
-      toast.error(`Failed to initiate top-up: ${error.message}`);
-    },
-  });
-
-  const handleTopup = () => {
-    // If no dialog open logic (which depends on API implementation),
-    // we check if we should redirect or open dialog based on available info
-    // But since this function is called inside the dialog, we might want to change
-    // how the "Top Up" button behaves instead.
-    const amount = parseFloat(topupAmount);
-
-    if (isNaN(amount)) {
-      setTopupError('Please enter a valid amount');
-      return;
-    }
-
-    if (amount < 1 || amount > 500) {
-      setTopupError('Amount must be between $1 and $500');
-      return;
-    }
-
-    topupMutation.mutate(amount);
-  };
-
-  const handleTopUpClick = () => {
-    // Check if the provider supports direct topup (currently only PPQ.AI effectively)
-    // We can infer this if it's NOT OpenRouter or OpenAI, or strictly checking provider capability
-    // For now, we'll try to initiate topup for anyone, but if we know it fails (or isn't implemented),
-    // we should redirect.
-    // However, the prompt asks to redirect if topup is not implemented.
-    // The backend throws 500/400 if not implemented.
-    // A better approach is to check if we have a platform URL and maybe redirect there
-    // if we know it's not supported.
-
-    // BUT, we don't know for sure if it's supported without checking metadata or trying.
-    // Let's rely on the "can_topup" metadata if available, but currently we only have "can_show_balance".
-
-    // Simple heuristic: If platformUrl exists and we suspect no direct topup, redirect?
-    // Actually, let's try to open the dialog, but if it's OpenRouter/OpenAI, maybe we just redirect?
-    // The user specifically mentioned "like in openrouter".
-
-    if (
-      platformUrl &&
-      (platformUrl.includes('openrouter.ai') ||
-        platformUrl.includes('openai.com'))
-    ) {
-      window.open(platformUrl, '_blank');
-      return;
-    }
-
-    setIsTopupDialogOpen(true);
-  };
-
-  const handleCloseDialog = () => {
-    setIsTopupDialogOpen(false);
-    setTopupAmount('');
-    setTopupError('');
-    setInvoiceData(null);
-    setPaymentStatus(null);
-  };
-
-  if (isLoading) {
-    return <Skeleton className='h-9 w-24' />;
-  }
-
-  if (
-    error ||
-    !balanceData?.ok ||
-    balanceData.balance_data === undefined ||
-    balanceData.balance_data === null
-  ) {
-    return null;
-  }
-
-  const balance = balanceData.balance_data;
-  let displayValue = 'N/A';
-
-  if (typeof balance === 'number') {
-    displayValue = `$${balance.toFixed(2)}`;
-  } else if (balance && typeof balance === 'object') {
-    // Legacy support for object response
-    const b = balance as Record<string, unknown>;
-    if (typeof b.balance === 'number') {
-      displayValue = `$${b.balance.toFixed(2)}`;
-    } else if (typeof b.balance === 'string') {
-      displayValue = b.balance;
-    } else if (b.amount !== undefined) {
-      displayValue = `$${Number(b.amount).toFixed(2)}`;
-    }
-  }
-
-  return (
-    <>
-      <Button
-        variant='outline'
-        size='sm'
-        onClick={handleTopUpClick}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        className='w-full font-mono sm:w-auto'
-      >
-        {isHovered ? 'Top Up' : displayValue}
-      </Button>
-
-      <Dialog open={isTopupDialogOpen} onOpenChange={handleCloseDialog}>
-        <DialogContent className='sm:max-w-md'>
-          <DialogHeader>
-            <DialogTitle>
-              {paymentStatus === 'paid'
-                ? 'Payment Confirmed!'
-                : 'Top Up Balance'}
-            </DialogTitle>
-            <DialogDescription>
-              {paymentStatus === 'paid'
-                ? 'Your account balance has been updated.'
-                : invoiceData
-                  ? 'Scan the QR code or copy the Lightning invoice to pay.'
-                  : 'Enter the amount you want to add to your account balance.'}
-            </DialogDescription>
-          </DialogHeader>
-
-          {paymentStatus === 'paid' ? (
-            <div className='flex flex-col items-center gap-4 py-6'>
-              <div className='rounded-full bg-green-100 p-3 dark:bg-green-900'>
-                <svg
-                  className='h-12 w-12 text-green-600 dark:text-green-400'
-                  fill='none'
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  strokeWidth='2'
-                  viewBox='0 0 24 24'
-                  stroke='currentColor'
-                >
-                  <path d='M5 13l4 4L19 7'></path>
-                </svg>
-              </div>
-              <p className='text-center font-semibold'>Top-up successful!</p>
-            </div>
-          ) : invoiceData ? (
-            <div className='flex flex-col items-center gap-4 py-4'>
-              <div className='rounded-lg border-2 border-gray-200 p-2 dark:border-gray-800'>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={`https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=${encodeURIComponent(
-                    invoiceData.payment_request
-                  )}`}
-                  alt='Lightning Invoice QR Code'
-                  className='h-64 w-64'
-                />
-              </div>
-              <div className='w-full space-y-2'>
-                <Label htmlFor='invoice'>Lightning Invoice</Label>
-                <div className='flex gap-2'>
-                  <Input
-                    id='invoice'
-                    value={invoiceData.payment_request}
-                    readOnly
-                    className='font-mono text-xs'
-                  />
-                  <Button
-                    size='sm'
-                    variant='outline'
-                    onClick={() => {
-                      navigator.clipboard.writeText(
-                        invoiceData.payment_request
-                      );
-                      toast.success('Invoice copied to clipboard!');
-                    }}
-                  >
-                    Copy
-                  </Button>
-                </div>
-              </div>
-              {paymentStatus === 'pending' && (
-                <p className='text-muted-foreground text-center text-sm'>
-                  Waiting for payment...
-                </p>
-              )}
-            </div>
-          ) : (
-            <div className='grid gap-4 py-4'>
-              <div className='grid gap-2'>
-                <Label htmlFor='topup_amount'>Amount (USD)</Label>
-                <Input
-                  id='topup_amount'
-                  type='number'
-                  placeholder='Enter amount (1-500)'
-                  value={topupAmount}
-                  onChange={(e) => {
-                    setTopupAmount(e.target.value);
-                    setTopupError('');
-                  }}
-                  min='1'
-                  max='500'
-                  step='0.01'
-                />
-                {topupError && (
-                  <p className='text-sm text-red-600 dark:text-red-400'>
-                    {topupError}
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-
-          <DialogFooter>
-            {paymentStatus === 'paid' ? (
-              <Button onClick={handleCloseDialog} className='w-full'>
-                Done
-              </Button>
-            ) : invoiceData ? (
-              <Button
-                variant='outline'
-                onClick={handleCloseDialog}
-                className='w-full'
-              >
-                Cancel
-              </Button>
-            ) : (
-              <>
-                <Button variant='outline' onClick={handleCloseDialog}>
-                  Cancel
-                </Button>
-                <Button
-                  onClick={handleTopup}
-                  disabled={topupMutation.isPending || !topupAmount}
-                >
-                  {topupMutation.isPending
-                    ? 'Processing...'
-                    : 'Generate Invoice'}
-                </Button>
-              </>
-            )}
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
+const apiKeyDocsLinkClassName =
+  'text-primary text-xs underline-offset-4 hover:underline';
 
 export default function ProvidersPage() {
   const queryClient = useQueryClient();
@@ -409,6 +63,12 @@ export default function ProvidersPage() {
   const [batchOverrideProviderId, setBatchOverrideProviderId] = useState<
     number | null
   >(null);
+  const [providerDeleteTarget, setProviderDeleteTarget] =
+    useState<UpstreamProvider | null>(null);
+  const [modelDeleteTarget, setModelDeleteTarget] = useState<{
+    providerId: number;
+    modelId: string;
+  } | null>(null);
 
   const [formData, setFormData] = useState<CreateUpstreamProvider>({
     provider_type: 'openrouter',
@@ -429,6 +89,11 @@ export default function ProvidersPage() {
     refetchOnWindowFocus: false,
   });
 
+  const providerTypeById = useMemo(
+    () => new Map<string, ProviderType>(providerTypes.map((pt) => [pt.id, pt])),
+    [providerTypes]
+  );
+
   const {
     data: providers = [],
     isLoading,
@@ -439,7 +104,9 @@ export default function ProvidersPage() {
     refetchOnWindowFocus: false,
   });
 
-  const { data: providerModels, isLoading: isLoadingModels } = useQuery({
+  const { data: providerModels, isLoading: isLoadingModels } = useQuery<
+    ProviderModels | null
+  >({
     queryKey: ['provider-models', viewingModels],
     queryFn: () =>
       viewingModels
@@ -579,40 +246,36 @@ export default function ProvidersPage() {
     updateMutation.mutate({ id: editingProvider.id, data: updateData });
   };
 
-  const handleDelete = (id: number) => {
-    if (confirm('Are you sure you want to delete this provider?')) {
-      deleteMutation.mutate(id);
+  const confirmDeleteProvider = () => {
+    if (!providerDeleteTarget) {
+      return;
     }
+
+    deleteMutation.mutate(providerDeleteTarget.id);
+    setProviderDeleteTarget(null);
   };
 
-  const handleDeleteModel = (providerId: number, modelId: string) => {
-    if (confirm('Are you sure you want to delete this model?')) {
-      deleteModelMutation.mutate({ providerId, modelId });
+  const confirmDeleteModel = () => {
+    if (!modelDeleteTarget) {
+      return;
     }
-  };
 
-  const getDefaultBaseUrl = (type: string) => {
-    const providerType = providerTypes.find((pt) => pt.id === type);
-    return providerType?.default_base_url || '';
-  };
-
-  const hasFixedBaseUrl = (type: string) => {
-    const providerType = providerTypes.find((pt) => pt.id === type);
-    return providerType?.fixed_base_url || false;
+    deleteModelMutation.mutate(modelDeleteTarget);
+    setModelDeleteTarget(null);
   };
 
   const getPlatformUrl = (type: string) => {
-    const providerType = providerTypes.find((pt) => pt.id === type);
+    const providerType = providerTypeById.get(type);
     return providerType?.platform_url || null;
   };
 
   const canCreateAccount = (type: string) => {
-    const providerType = providerTypes.find((pt) => pt.id === type);
+    const providerType = providerTypeById.get(type);
     return providerType?.can_create_account || false;
   };
 
   const canShowBalance = (type: string) => {
-    const providerType = providerTypes.find((pt) => pt.id === type);
+    const providerType = providerTypeById.get(type);
     return providerType?.can_show_balance || false;
   };
 
@@ -663,705 +326,204 @@ export default function ProvidersPage() {
   };
 
   return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset>
-        <SiteHeader />
-        <div className='flex flex-1 flex-col'>
-          <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-            <div className='mb-6 flex items-center justify-between'>
-              <div>
-                <h1 className='text-2xl font-bold tracking-tight'>
-                  Upstream Providers
-                </h1>
-                <p className='text-muted-foreground mt-2 text-sm'>
-                  Manage your AI provider connections and credentials
-                </p>
-              </div>
-              <Dialog
-                open={isCreateDialogOpen}
-                onOpenChange={setIsCreateDialogOpen}
-              >
-                <DialogTrigger asChild>
-                  <Button className='flex items-center gap-2'>
-                    <Plus className='h-4 w-4' />
-                    Add Provider
-                  </Button>
-                </DialogTrigger>
-                <DialogContent className='sm:max-w-[500px]'>
-                  <DialogHeader>
-                    <DialogTitle>Add Upstream Provider</DialogTitle>
-                    <DialogDescription>
-                      Configure a new AI provider connection
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className='grid gap-4 py-4'>
-                    <div className='grid gap-2'>
-                      <Label htmlFor='provider_type'>Provider Type</Label>
-                      <Select
-                        value={formData.provider_type}
-                        onValueChange={(value) => {
-                          setFormData((prev) => ({
-                            ...prev,
-                            provider_type: value,
-                            base_url: getDefaultBaseUrl(value),
-                            provider_fee: value === 'openrouter' ? 1.06 : 1.01,
-                          }));
-                        }}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {providerTypes.map((type) => (
-                            <SelectItem key={type.id} value={type.id}>
-                              {type.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className='grid gap-2'>
-                      <Label htmlFor='base_url'>Base URL</Label>
-                      <Input
-                        id='base_url'
-                        value={formData.base_url}
-                        onChange={(e) =>
-                          setFormData({ ...formData, base_url: e.target.value })
-                        }
-                        placeholder='https://api.example.com/v1'
-                        disabled={hasFixedBaseUrl(formData.provider_type)}
-                        className={
-                          hasFixedBaseUrl(formData.provider_type)
-                            ? 'cursor-not-allowed opacity-60'
-                            : ''
-                        }
-                      />
-                    </div>
-                    <div className='grid gap-2'>
-                      <div className='flex items-center justify-between'>
-                        <Label htmlFor='api_key'>API Key</Label>
-                        {canCreateAccount(formData.provider_type) ? (
-                          <Button
-                            type='button'
-                            variant='outline'
-                            size='sm'
-                            onClick={handleCreateAccount}
-                            disabled={isCreatingAccount}
-                            className='h-6 text-xs'
-                          >
-                            {isCreatingAccount
-                              ? 'Creating...'
-                              : 'Create Account'}
-                          </Button>
-                        ) : (
-                          getPlatformUrl(formData.provider_type) && (
-                            <a
-                              href={getPlatformUrl(formData.provider_type)!}
-                              target='_blank'
-                              rel='noopener noreferrer'
-                              className='text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
-                            >
-                              Get Your API Key Here →
-                            </a>
-                          )
-                        )}
-                      </div>
-                      <Input
-                        id='api_key'
-                        type='password'
-                        value={formData.api_key}
-                        onChange={(e) =>
-                          setFormData({ ...formData, api_key: e.target.value })
-                        }
-                        placeholder='sk-...'
-                      />
-                    </div>
-                    {formData.provider_type === 'azure' && (
-                      <div className='grid gap-2'>
-                        <Label htmlFor='api_version'>API Version</Label>
-                        <Input
-                          id='api_version'
-                          value={formData.api_version || ''}
-                          onChange={(e) =>
-                            setFormData({
-                              ...formData,
-                              api_version: e.target.value || null,
-                            })
-                          }
-                          placeholder='2024-02-15-preview'
-                        />
-                      </div>
-                    )}
-                    <div className='flex items-center space-x-2'>
-                      <Switch
-                        id='enabled'
-                        checked={formData.enabled}
-                        onCheckedChange={(checked) =>
-                          setFormData({ ...formData, enabled: checked })
-                        }
-                      />
-                      <Label htmlFor='enabled'>Enabled</Label>
-                    </div>
-                    <div className='grid gap-2'>
-                      <Label htmlFor='provider_fee'>
-                        Provider Fee (Multiplier)
-                      </Label>
-                      <Input
-                        id='provider_fee'
-                        type='number'
-                        step='0.001'
-                        min='1.0'
-                        value={formData.provider_fee || ''}
-                        onChange={(e) =>
-                          setFormData({
-                            ...formData,
-                            provider_fee: e.target.value
-                              ? parseFloat(e.target.value)
-                              : undefined,
-                          })
-                        }
-                        placeholder={getProviderFeePlaceholder(
-                          formData.provider_type
-                        )}
-                      />
-                      <p className='text-muted-foreground text-xs'>
-                        1.01 means +1% e.g. currency exchange, card fees, etc.
-                      </p>
-                    </div>
-                  </div>
-                  <DialogFooter>
-                    <Button
-                      variant='outline'
-                      onClick={() => setIsCreateDialogOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      onClick={handleCreate}
-                      disabled={createMutation.isPending}
-                    >
-                      {createMutation.isPending ? 'Creating...' : 'Create'}
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </div>
-
-            {isLoading ? (
-              <div className='space-y-4'>
-                <Skeleton className='h-[100px] w-full' />
-                <Skeleton className='h-[100px] w-full' />
-              </div>
-            ) : error ? (
-              <Alert variant='destructive'>
-                <AlertCircle className='h-4 w-4' />
-                <AlertDescription>
-                  Failed to load providers. Please try refreshing the page.
-                </AlertDescription>
-              </Alert>
-            ) : providers.length === 0 ? (
-              <Card>
-                <CardContent className='flex flex-col items-center justify-center py-12'>
-                  <Server className='text-muted-foreground mb-4 h-12 w-12' />
-                  <h3 className='mb-2 text-lg font-semibold'>
-                    No providers configured
-                  </h3>
-                  <p className='text-muted-foreground mb-4 text-sm'>
-                    Get started by adding your first upstream provider
-                  </p>
-                  <Button onClick={() => setIsCreateDialogOpen(true)}>
-                    <Plus className='mr-2 h-4 w-4' />
-                    Add Provider
-                  </Button>
-                </CardContent>
-              </Card>
-            ) : (
-              <div className='grid gap-4'>
-                {providers.map((provider) => (
-                  <Card key={provider.id}>
-                    <CardHeader>
-                      <div className='flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between'>
-                        <div className='min-w-0 flex-1'>
-                          <div className='flex flex-col gap-2 sm:flex-row sm:items-center'>
-                            <CardTitle className='truncate text-lg'>
-                              {provider.provider_type}
-                            </CardTitle>
-                            <Badge
-                              variant={
-                                provider.enabled ? 'default' : 'secondary'
-                              }
-                              className='w-fit sm:ml-2'
-                            >
-                              {provider.enabled ? 'Enabled' : 'Disabled'}
-                            </Badge>
-                          </div>
-                          <CardDescription className='mt-1 break-all'>
-                            {provider.base_url}
-                          </CardDescription>
-                        </div>
-                        <div className='flex flex-wrap items-center gap-2'>
-                          {canShowBalance(provider.provider_type) &&
-                            provider.api_key && (
-                              <ProviderBalance
-                                providerId={provider.id}
-                                platformUrl={getPlatformUrl(
-                                  provider.provider_type
-                                )}
-                              />
-                            )}
-                          <Button
-                            variant='outline'
-                            size='sm'
-                            onClick={() => toggleProviderExpansion(provider.id)}
-                            className='w-full sm:w-auto'
-                          >
-                            <Database className='mr-1 h-4 w-4' />
-                            <span className='hidden sm:inline'>Models</span>
-                            {expandedProviders.has(provider.id) ? (
-                              <ChevronUp className='ml-1 h-4 w-4' />
-                            ) : (
-                              <ChevronDown className='ml-1 h-4 w-4' />
-                            )}
-                          </Button>
-                          <Button
-                            variant='outline'
-                            size='sm'
-                            onClick={() => handleEdit(provider)}
-                            className='w-full sm:w-auto'
-                          >
-                            <Pencil className='h-4 w-4' />
-                          </Button>
-                          <Button
-                            variant='outline'
-                            size='sm'
-                            onClick={() => handleDelete(provider.id)}
-                            className='w-full sm:w-auto'
-                          >
-                            <Trash2 className='h-4 w-4' />
-                          </Button>
-                        </div>
-                      </div>
-                    </CardHeader>
-                    <CardContent>
-                      <div className='space-y-4'>
-                        <div className='space-y-2'>
-                          {provider.api_version && (
-                            <div className='flex items-center justify-between text-sm'>
-                              <span className='text-muted-foreground'>
-                                API Version:
-                              </span>
-                              <span className='font-mono'>
-                                {provider.api_version}
-                              </span>
-                            </div>
-                          )}
-                        </div>
-
-                        {expandedProviders.has(provider.id) && (
-                          <div className='mt-4 border-t pt-4'>
-                            {isLoadingModels &&
-                            viewingModels === provider.id ? (
-                              <div className='space-y-2'>
-                                <Skeleton className='h-[40px] w-full' />
-                                <Skeleton className='h-[40px] w-full' />
-                              </div>
-                            ) : providerModels &&
-                              viewingModels === provider.id ? (
-                              <Tabs
-                                defaultValue={
-                                  providerModels.remote_models.length > 0
-                                    ? 'provided'
-                                    : 'custom'
-                                }
-                                className='w-full'
-                              >
-                                <TabsList className='grid w-full grid-cols-2'>
-                                  <TabsTrigger
-                                    value='provided'
-                                    className='text-xs sm:text-sm'
-                                  >
-                                    <span className='hidden sm:inline'>
-                                      Provided Models
-                                    </span>
-                                    <span className='sm:hidden'>Provided</span>
-                                    <Badge
-                                      variant='secondary'
-                                      className='ml-1 text-xs sm:ml-2'
-                                    >
-                                      {providerModels.remote_models.length}
-                                    </Badge>
-                                  </TabsTrigger>
-                                  <TabsTrigger
-                                    value='custom'
-                                    className='text-xs sm:text-sm'
-                                  >
-                                    <span className='hidden sm:inline'>
-                                      Custom Models
-                                    </span>
-                                    <span className='sm:hidden'>Custom</span>
-                                    <Badge
-                                      variant='secondary'
-                                      className='ml-1 text-xs sm:ml-2'
-                                    >
-                                      {providerModels.db_models.length}
-                                    </Badge>
-                                  </TabsTrigger>
-                                </TabsList>
-                                <TabsContent
-                                  value='custom'
-                                  className='mt-4 space-y-2'
-                                >
-                                  <div className='flex items-center justify-between'>
-                                    {providerModels.db_models.length > 0 && (
-                                      <div className='text-muted-foreground text-sm'>
-                                        Custom models override or extend the
-                                        provider&apos;s catalog.
-                                      </div>
-                                    )}
-                                    <div className='flex gap-2'>
-                                      <Button
-                                        variant='outline'
-                                        size='sm'
-                                        onClick={() =>
-                                          handleBatchOverride(provider.id)
-                                        }
-                                      >
-                                        <Database className='mr-2 h-4 w-4' />
-                                        Batch Override
-                                      </Button>
-                                      <Button
-                                        variant='outline'
-                                        size='sm'
-                                        onClick={() =>
-                                          handleAddModel(provider.id)
-                                        }
-                                      >
-                                        <Plus className='mr-2 h-4 w-4' />
-                                        Add Custom Model
-                                      </Button>
-                                    </div>
-                                  </div>
-                                  {providerModels.db_models.length === 0 ? (
-                                    <div className='text-muted-foreground py-4 text-center text-sm'>
-                                      No custom models configured
-                                    </div>
-                                  ) : (
-                                    <div className='space-y-2'>
-                                      {providerModels.db_models.map((model) => (
-                                        <div
-                                          key={model.id}
-                                          className='hover:bg-accent flex flex-col gap-2 rounded-lg border p-3 transition-colors sm:flex-row sm:items-center sm:justify-between'
-                                        >
-                                          <div className='min-w-0 flex-1'>
-                                            <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
-                                              <span className='truncate font-mono text-sm font-medium'>
-                                                {model.id}
-                                              </span>
-                                              <Badge
-                                                variant={
-                                                  model.enabled
-                                                    ? 'default'
-                                                    : 'secondary'
-                                                }
-                                                className='w-fit text-xs'
-                                              >
-                                                {model.enabled
-                                                  ? 'Enabled'
-                                                  : 'Disabled'}
-                                              </Badge>
-                                            </div>
-                                            <div className='text-muted-foreground mt-1 text-xs break-words'>
-                                              {model.description || model.name}
-                                            </div>
-                                          </div>
-                                          <div className='flex items-center gap-2'>
-                                            <div className='text-muted-foreground text-xs whitespace-nowrap'>
-                                              {model.context_length?.toLocaleString()}{' '}
-                                              tokens
-                                            </div>
-                                            <Button
-                                              variant='ghost'
-                                              size='icon'
-                                              className='h-8 w-8'
-                                              onClick={() =>
-                                                handleEditModel(
-                                                  provider.id,
-                                                  model
-                                                )
-                                              }
-                                            >
-                                              <Pencil className='h-4 w-4' />
-                                            </Button>
-                                            <Button
-                                              variant='ghost'
-                                              size='icon'
-                                              className='text-destructive hover:text-destructive h-8 w-8'
-                                              onClick={() =>
-                                                handleDeleteModel(
-                                                  provider.id,
-                                                  model.id
-                                                )
-                                              }
-                                              disabled={
-                                                deleteModelMutation.isPending
-                                              }
-                                            >
-                                              <Trash2 className='h-4 w-4' />
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  )}
-                                </TabsContent>
-                                <TabsContent
-                                  value='provided'
-                                  className='mt-4 space-y-2'
-                                >
-                                  {providerModels.remote_models.length > 0 ? (
-                                    <>
-                                      <div className='text-muted-foreground mb-3 text-sm'>
-                                        Models automatically discovered from the
-                                        provider&apos;s catalog.
-                                      </div>
-                                      <div className='space-y-2'>
-                                        {providerModels.remote_models.map(
-                                          (model) => (
-                                            <div
-                                              key={model.id}
-                                              className='hover:bg-accent flex flex-col gap-2 rounded-lg border p-3 transition-colors sm:flex-row sm:items-center sm:justify-between'
-                                            >
-                                              <div className='min-w-0 flex-1'>
-                                                <div className='truncate font-mono text-sm font-medium'>
-                                                  {model.id}
-                                                </div>
-                                                <div className='text-muted-foreground mt-1 text-xs break-words'>
-                                                  {model.description ||
-                                                    model.name}
-                                                </div>
-                                              </div>
-                                              <div className='flex items-center gap-2'>
-                                                <div className='text-muted-foreground text-xs whitespace-nowrap'>
-                                                  {model.context_length?.toLocaleString()}{' '}
-                                                  tokens
-                                                </div>
-                                                <Button
-                                                  variant='outline'
-                                                  size='sm'
-                                                  className='h-7 text-xs'
-                                                  onClick={() =>
-                                                    handleOverrideModel(
-                                                      provider.id,
-                                                      model
-                                                    )
-                                                  }
-                                                >
-                                                  <Plus className='mr-1 h-3 w-3' />
-                                                  Override
-                                                </Button>
-                                              </div>
-                                            </div>
-                                          )
-                                        )}
-                                      </div>
-                                    </>
-                                  ) : (
-                                    <div className='text-muted-foreground py-4 text-center text-sm'>
-                                      No provided models available
-                                    </div>
-                                  )}
-                                </TabsContent>
-                              </Tabs>
-                            ) : null}
-                          </div>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='@container/main flex flex-col gap-4 md:gap-8'>
+        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+          <PageHeader
+            title='Upstream Providers'
+            description='Manage your AI provider connections and credentials.'
+            actions={
+              <DialogTrigger asChild>
+                <Button className='flex items-center gap-2'>
+                  <Plus className='h-4 w-4' />
+                  Add Provider
+                </Button>
+              </DialogTrigger>
+            }
+          />
+          <ProviderFormDialogContent
+            mode='create'
+            title='Add Upstream Provider'
+            description='Configure a new AI provider connection.'
+            submitLabel='Create'
+            submittingLabel='Creating...'
+            formData={formData}
+            setFormData={setFormData}
+            providerTypes={providerTypes}
+            providerFeePlaceholder={getProviderFeePlaceholder(
+              formData.provider_type
             )}
-          </div>
-        </div>
-
-        <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-          <DialogContent className='sm:max-w-[500px]'>
-            <DialogHeader>
-              <DialogTitle>Edit Upstream Provider</DialogTitle>
-              <DialogDescription>
-                Update provider configuration
-              </DialogDescription>
-            </DialogHeader>
-            <div className='grid gap-4 py-4'>
-              <div className='grid gap-2'>
-                <Label htmlFor='edit_provider_type'>Provider Type</Label>
-                <Select
-                  value={formData.provider_type}
-                  onValueChange={(value) => {
-                    setFormData((prev) => ({
-                      ...prev,
-                      provider_type: value,
-                      base_url: getDefaultBaseUrl(value),
-                      provider_fee: value === 'openrouter' ? 1.06 : 1.01,
-                    }));
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {providerTypes.map((type) => (
-                      <SelectItem key={type.id} value={type.id}>
-                        {type.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className='grid gap-2'>
-                <Label htmlFor='edit_base_url'>Base URL</Label>
-                <Input
-                  id='edit_base_url'
-                  value={formData.base_url}
-                  onChange={(e) =>
-                    setFormData({ ...formData, base_url: e.target.value })
-                  }
-                  placeholder='https://api.example.com/v1'
-                  disabled={hasFixedBaseUrl(formData.provider_type)}
-                  className={
-                    hasFixedBaseUrl(formData.provider_type)
-                      ? 'cursor-not-allowed opacity-60'
-                      : ''
-                  }
-                />
-              </div>
-              <div className='grid gap-2'>
-                <div className='flex items-center justify-between'>
-                  <Label htmlFor='edit_api_key'>
-                    API Key (leave blank to keep current)
-                  </Label>
-                  {getPlatformUrl(formData.provider_type) && (
-                    <a
-                      href={getPlatformUrl(formData.provider_type)!}
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      className='text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
-                    >
-                      Get Your API Key Here →
-                    </a>
-                  )}
-                </div>
-                <Input
-                  id='edit_api_key'
-                  type='password'
-                  value={formData.api_key}
-                  onChange={(e) =>
-                    setFormData({ ...formData, api_key: e.target.value })
-                  }
-                  placeholder='Leave blank to keep current'
-                />
-              </div>
-              {formData.provider_type === 'azure' && (
-                <div className='grid gap-2'>
-                  <Label htmlFor='edit_api_version'>API Version</Label>
-                  <Input
-                    id='edit_api_version'
-                    value={formData.api_version || ''}
-                    onChange={(e) =>
-                      setFormData({
-                        ...formData,
-                        api_version: e.target.value || null,
-                      })
-                    }
-                    placeholder='2024-02-15-preview'
-                  />
-                </div>
-              )}
-              <div className='flex items-center space-x-2'>
-                <Switch
-                  id='edit_enabled'
-                  checked={formData.enabled}
-                  onCheckedChange={(checked) =>
-                    setFormData({ ...formData, enabled: checked })
-                  }
-                />
-                <Label htmlFor='edit_enabled'>Enabled</Label>
-              </div>
-              <div className='grid gap-2'>
-                <Label htmlFor='edit_provider_fee'>
-                  Provider Fee (Multiplier)
-                </Label>
-                <Input
-                  id='edit_provider_fee'
-                  type='number'
-                  step='0.001'
-                  min='1.0'
-                  value={formData.provider_fee || ''}
-                  onChange={(e) =>
-                    setFormData({
-                      ...formData,
-                      provider_fee: e.target.value
-                        ? parseFloat(e.target.value)
-                        : undefined,
-                    })
-                  }
-                  placeholder={getProviderFeePlaceholder(
-                    formData.provider_type
-                  )}
-                />
-                <p className='text-muted-foreground text-xs'>
-                  1.01 means +1% e.g. currency exchange, card fees, etc.
-                </p>
-              </div>
-            </div>
-            <DialogFooter>
-              <Button
-                variant='outline'
-                onClick={() => setIsEditDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleUpdate}
-                disabled={updateMutation.isPending}
-              >
-                {updateMutation.isPending ? 'Updating...' : 'Update'}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
+            docsLinkClassName={apiKeyDocsLinkClassName}
+            canCreateAccount={canCreateAccount(formData.provider_type)}
+            isCreatingAccount={isCreatingAccount}
+            onCreateAccount={handleCreateAccount}
+            onCancel={() => setIsCreateDialogOpen(false)}
+            onSubmit={handleCreate}
+            isSubmitting={createMutation.isPending}
+          />
         </Dialog>
 
-        {modelDialogState.providerId && (
-          <AddProviderModelDialog
-            providerId={modelDialogState.providerId}
-            isOpen={modelDialogState.isOpen}
-            onClose={() =>
-              setModelDialogState((prev) => ({ ...prev, isOpen: false }))
-            }
-            onSuccess={() => {
-              queryClient.invalidateQueries({
-                queryKey: ['provider-models', modelDialogState.providerId],
-              });
-            }}
-            initialData={modelDialogState.initialData}
-            mode={modelDialogState.mode}
-          />
+        {isLoading ? (
+          <div className='space-y-4'>
+            <Skeleton className='h-[100px] w-full' />
+            <Skeleton className='h-[100px] w-full' />
+          </div>
+        ) : error ? (
+          <Alert variant='destructive'>
+            <AlertCircle className='h-4 w-4' />
+            <AlertDescription>
+              Failed to load providers. Please try refreshing the page.
+            </AlertDescription>
+          </Alert>
+        ) : providers.length === 0 ? (
+          <Card>
+            <CardContent className='flex flex-col items-center justify-center py-12'>
+              <Server className='text-muted-foreground mb-4 h-12 w-12' />
+              <h3 className='mb-2 text-lg font-semibold'>No providers configured</h3>
+              <p className='text-muted-foreground mb-4 text-sm'>
+                Get started by adding your first upstream provider
+              </p>
+              <Button onClick={() => setIsCreateDialogOpen(true)}>
+                <Plus className='mr-2 h-4 w-4' />
+                Add Provider
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className='grid gap-3 sm:gap-4'>
+            {providers.map((provider) => (
+              <ProviderCard
+                key={provider.id}
+                provider={provider}
+                isExpanded={expandedProviders.has(provider.id)}
+                canShowBalance={canShowBalance(provider.provider_type)}
+                platformUrl={getPlatformUrl(provider.provider_type)}
+                isModelsLoading={isLoadingModels && viewingModels === provider.id}
+                providerModels={
+                  viewingModels === provider.id ? providerModels ?? null : null
+                }
+                isDeletingModel={deleteModelMutation.isPending}
+                onToggleExpansion={() => toggleProviderExpansion(provider.id)}
+                onEditProvider={() => handleEdit(provider)}
+                onDeleteProvider={() => setProviderDeleteTarget(provider)}
+                onBatchOverride={() => handleBatchOverride(provider.id)}
+                onAddModel={() => handleAddModel(provider.id)}
+                onEditModel={(model) => handleEditModel(provider.id, model)}
+                onDeleteModel={(modelId) =>
+                  setModelDeleteTarget({ providerId: provider.id, modelId })
+                }
+                onOverrideModel={(model) =>
+                  handleOverrideModel(provider.id, model)
+                }
+              />
+            ))}
+          </div>
         )}
+      </div>
 
-        {batchOverrideProviderId && (
-          <BatchOverrideDialog
-            providerId={batchOverrideProviderId}
-            isOpen={!!batchOverrideProviderId}
-            onClose={() => setBatchOverrideProviderId(null)}
-            onSuccess={() => {
-              queryClient.invalidateQueries({
-                queryKey: ['provider-models', batchOverrideProviderId],
-              });
-            }}
-          />
-        )}
-      </SidebarInset>
-    </SidebarProvider>
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <ProviderFormDialogContent
+          mode='edit'
+          title='Edit Upstream Provider'
+          description='Update provider configuration.'
+          submitLabel='Update'
+          submittingLabel='Updating...'
+          formData={formData}
+          setFormData={setFormData}
+          providerTypes={providerTypes}
+          providerFeePlaceholder={getProviderFeePlaceholder(
+            formData.provider_type
+          )}
+          docsLinkClassName={apiKeyDocsLinkClassName}
+          canCreateAccount={false}
+          isCreatingAccount={false}
+          onCreateAccount={handleCreateAccount}
+          onCancel={() => setIsEditDialogOpen(false)}
+          onSubmit={handleUpdate}
+          isSubmitting={updateMutation.isPending}
+        />
+      </Dialog>
+
+      <AlertDialog
+        open={Boolean(providerDeleteTarget)}
+        onOpenChange={(open) => !open && setProviderDeleteTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Provider?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete provider{' '}
+              <span className='font-medium'>
+                {providerDeleteTarget?.provider_type}
+              </span>{' '}
+              and remove its associated configuration.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteProvider}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={Boolean(modelDeleteTarget)}
+        onOpenChange={(open) => !open && setModelDeleteTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Model Override?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This removes the override for model{' '}
+              <span className='font-medium'>{modelDeleteTarget?.modelId}</span>.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteModel}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {modelDialogState.providerId && (
+        <AddProviderModelDialog
+          providerId={modelDialogState.providerId}
+          isOpen={modelDialogState.isOpen}
+          onClose={() =>
+            setModelDialogState((prev) => ({ ...prev, isOpen: false }))
+          }
+          onSuccess={() => {
+            queryClient.invalidateQueries({
+              queryKey: ['provider-models', modelDialogState.providerId],
+            });
+          }}
+          initialData={modelDialogState.initialData}
+          mode={modelDialogState.mode}
+        />
+      )}
+
+      {batchOverrideProviderId && (
+        <BatchOverrideDialog
+          providerId={batchOverrideProviderId}
+          isOpen={!!batchOverrideProviderId}
+          onClose={() => setBatchOverrideProviderId(null)}
+          onSuccess={() => {
+            queryClient.invalidateQueries({
+              queryKey: ['provider-models', batchOverrideProviderId],
+            });
+          }}
+        />
+      )}
+    </AppPageShell>
   );
 }
diff --git a/ui/app/settings/page.tsx b/ui/app/settings/page.tsx
index 373245f7..2e999307 100644
--- a/ui/app/settings/page.tsx
+++ b/ui/app/settings/page.tsx
@@ -4,37 +4,30 @@ import * as React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ServerConfigSettings } from '@/components/settings/server-config-settings';
 import { AdminSettings } from '@/components/settings/admin-settings';
-import { SiteHeader } from '@/components/site-header';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { Toaster } from 'sonner';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 
 export default function SettingsPage() {
   return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset>
-        <SiteHeader />
-        <div className='flex flex-1 flex-col'>
-          <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-            <div className='flex items-center'>
-              <h1 className='text-2xl font-bold tracking-tight'>Settings</h1>
-            </div>
-            <Tabs defaultValue='admin' className='w-full'>
-              <TabsList className='mb-4'>
-                <TabsTrigger value='admin'>Admin Settings</TabsTrigger>
-              </TabsList>
-              <TabsContent value='server'>
-                <ServerConfigSettings />
-              </TabsContent>
-              <TabsContent value='admin'>
-                <AdminSettings />
-              </TabsContent>
-            </Tabs>
-          </div>
-        </div>
-      </SidebarInset>
-      <Toaster />
-    </SidebarProvider>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='Settings'
+          description='Manage admin authentication, service metadata, and upstream forwarding.'
+        />
+        <Tabs defaultValue='admin' className='w-full'>
+          <TabsList variant='line' className='mb-4 w-full'>
+            <TabsTrigger value='admin'>Admin Settings</TabsTrigger>
+            <TabsTrigger value='server'>Server Config</TabsTrigger>
+          </TabsList>
+          <TabsContent value='server'>
+            <ServerConfigSettings />
+          </TabsContent>
+          <TabsContent value='admin'>
+            <AdminSettings />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </AppPageShell>
   );
 }
diff --git a/ui/app/transactions/page.tsx b/ui/app/transactions/page.tsx
deleted file mode 100644
index 973c30bb..00000000
--- a/ui/app/transactions/page.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
-import { useQuery } from '@tanstack/react-query';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  AlertCircle,
-  Copy,
-  RefreshCw,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { toast } from 'sonner';
-import { apiClient } from '@/lib/api/client';
-
-interface Transaction {
-  id: string;
-  created_at: string;
-  token: string;
-  amount: string;
-}
-
-interface PaginatedTransactionsResponse {
-  transactions: Transaction[];
-  total: number;
-  page: number;
-  per_page: number;
-  total_pages: number;
-}
-
-const TransactionService = {
-  getAllTransactions: async (): Promise<Transaction[]> => {
-    try {
-      const response = await apiClient.get<Transaction[]>('/api/transactions');
-      return response || [];
-    } catch (error) {
-      console.error('Failed to fetch transactions:', error);
-      throw new Error('Failed to fetch transactions');
-    }
-  },
-
-  getPaginatedTransactions: async (
-    page: number,
-    perPage: number
-  ): Promise<PaginatedTransactionsResponse> => {
-    try {
-      const response = await apiClient.get<PaginatedTransactionsResponse>(
-        `/api/transactions/paginated/${page}/${perPage}`
-      );
-      return response;
-    } catch (error) {
-      console.error('Failed to fetch paginated transactions:', error);
-      throw new Error('Failed to fetch paginated transactions');
-    }
-  },
-
-  getRecentTransactions: async (limit: number): Promise<Transaction[]> => {
-    try {
-      const response = await apiClient.get<Transaction[]>(
-        `/api/transactions/recent/${limit}`
-      );
-      return response || [];
-    } catch (error) {
-      console.error('Failed to fetch recent transactions:', error);
-      throw new Error('Failed to fetch recent transactions');
-    }
-  },
-};
-
-export default function TransactionsPage() {
-  const [currentPage, setCurrentPage] = useState(1);
-  const perPage = 20;
-
-  // Fetch paginated transactions data
-  const {
-    data: paginationData,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey: ['transactions', currentPage, perPage],
-    queryFn: () =>
-      TransactionService.getPaginatedTransactions(currentPage, perPage),
-    refetchOnWindowFocus: false,
-    retry: 1,
-    staleTime: 30000, // 30 seconds
-  });
-
-  const transactions = paginationData?.transactions || [];
-  const totalPages = paginationData?.total_pages || 0;
-  const total = paginationData?.total || 0;
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString();
-  };
-
-  const formatAmount = (amount: string) => {
-    return `${parseInt(amount).toLocaleString()} msats`;
-  };
-
-  const truncateToken = (token: string) => {
-    if (token.length <= 20) return token;
-    return `${token.slice(0, 10)}...${token.slice(-10)}`;
-  };
-
-  const copyToClipboard = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      toast.success('Token copied to clipboard!');
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
-      toast.error('Failed to copy token');
-    }
-  };
-
-  const goToPage = (page: number) => {
-    if (page >= 1 && page <= totalPages) {
-      setCurrentPage(page);
-    }
-  };
-
-  const goToPrevious = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
-  const goToNext = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
-
-  return (
-    <TooltipProvider>
-      <SidebarProvider>
-        <AppSidebar variant='inset' />
-        <SidebarInset>
-          <SiteHeader />
-          <div className='flex flex-1 flex-col'>
-            <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-              <div className='mb-6 flex items-center justify-between'>
-                <div>
-                  <h1 className='text-2xl font-bold tracking-tight'>
-                    Transaction History
-                  </h1>
-                  <p className='text-muted-foreground text-sm'>
-                    View all Cashu token transactions processed by the system
-                  </p>
-                </div>
-                <Button
-                  onClick={() => refetch()}
-                  variant='outline'
-                  size='sm'
-                  disabled={isLoading}
-                >
-                  <RefreshCw
-                    className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
-                  />
-                  Refresh
-                </Button>
-              </div>
-
-              {isLoading ? (
-                <div className='space-y-4'>
-                  {[...Array(5)].map((_, i) => (
-                    <Skeleton key={i} className='h-[120px] w-full' />
-                  ))}
-                </div>
-              ) : error ? (
-                <Alert variant='destructive'>
-                  <AlertCircle className='h-4 w-4' />
-                  <AlertDescription>
-                    Failed to load transactions.{' '}
-                    {error instanceof Error
-                      ? error.message
-                      : 'Please check if the server is running and try refreshing the page.'}
-                  </AlertDescription>
-                </Alert>
-              ) : transactions.length === 0 ? (
-                <div className='py-8 text-center'>
-                  <p className='text-muted-foreground'>
-                    No transactions found.
-                  </p>
-                </div>
-              ) : (
-                <div className='space-y-4'>
-                  <div className='flex items-center justify-between'>
-                    <div className='text-muted-foreground text-sm'>
-                      Showing {(currentPage - 1) * perPage + 1} to{' '}
-                      {Math.min(currentPage * perPage, total)} of {total}{' '}
-                      transactions
-                    </div>
-                    <div className='text-muted-foreground text-sm'>
-                      Page {currentPage} of {totalPages}
-                    </div>
-                  </div>
-
-                  <div className='rounded-md border'>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className='w-[100px]'>ID</TableHead>
-                          <TableHead>Date & Time</TableHead>
-                          <TableHead>Amount</TableHead>
-                          <TableHead className='w-[400px]'>
-                            Cashu Token
-                          </TableHead>
-                          <TableHead className='w-[60px]'>Actions</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {transactions.map((transaction) => (
-                          <TableRow key={transaction.id}>
-                            <TableCell className='font-mono text-xs'>
-                              {transaction.id.slice(0, 8)}
-                            </TableCell>
-                            <TableCell>
-                              <div className='text-sm'>
-                                {formatDate(transaction.created_at)}
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <Badge variant='secondary'>
-                                {formatAmount(transaction.amount)}
-                              </Badge>
-                            </TableCell>
-                            <TableCell>
-                              <div className='flex items-center gap-2'>
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <p className='max-w-[300px] cursor-pointer truncate rounded px-1 py-0.5 font-mono text-xs hover:bg-gray-100'>
-                                      {truncateToken(transaction.token)}
-                                    </p>
-                                  </TooltipTrigger>
-                                  <TooltipContent className='max-w-md break-all'>
-                                    <p className='font-mono text-xs'>
-                                      {transaction.token}
-                                    </p>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <Button
-                                variant='ghost'
-                                size='sm'
-                                onClick={() =>
-                                  copyToClipboard(transaction.token)
-                                }
-                                className='h-8 w-8 p-0'
-                              >
-                                <Copy className='h-4 w-4' />
-                              </Button>
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </div>
-
-                  {/* Pagination Controls */}
-                  {totalPages > 1 && (
-                    <div className='flex items-center justify-between'>
-                      <div className='text-muted-foreground text-sm'>
-                        Page {currentPage} of {totalPages}
-                      </div>
-                      <div className='flex items-center space-x-2'>
-                        <Button
-                          variant='outline'
-                          size='sm'
-                          onClick={goToPrevious}
-                          disabled={currentPage === 1}
-                        >
-                          <ChevronLeft className='mr-1 h-4 w-4' />
-                          Previous
-                        </Button>
-
-                        {/* Page Numbers */}
-                        <div className='flex items-center space-x-1'>
-                          {Array.from(
-                            { length: Math.min(5, totalPages) },
-                            (_, i) => {
-                              const pageNumber =
-                                currentPage <= 3
-                                  ? i + 1
-                                  : currentPage >= totalPages - 2
-                                    ? totalPages - 4 + i
-                                    : currentPage - 2 + i;
-
-                              if (pageNumber < 1 || pageNumber > totalPages)
-                                return null;
-
-                              return (
-                                <Button
-                                  key={pageNumber}
-                                  variant={
-                                    currentPage === pageNumber
-                                      ? 'default'
-                                      : 'outline'
-                                  }
-                                  size='sm'
-                                  onClick={() => goToPage(pageNumber)}
-                                  className='h-9 w-9 p-0'
-                                >
-                                  {pageNumber}
-                                </Button>
-                              );
-                            }
-                          )}
-                        </div>
-
-                        <Button
-                          variant='outline'
-                          size='sm'
-                          onClick={goToNext}
-                          disabled={currentPage === totalPages}
-                        >
-                          Next
-                          <ChevronRight className='ml-1 h-4 w-4' />
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-    </TooltipProvider>
-  );
-}
diff --git a/ui/app/unauthorized/page.tsx b/ui/app/unauthorized/page.tsx
index 2fe8f4bc..99718acb 100644
--- a/ui/app/unauthorized/page.tsx
+++ b/ui/app/unauthorized/page.tsx
@@ -3,30 +3,30 @@
 import { Button } from '@/components/ui/button';
 import { useRouter } from 'next/navigation';
 import { ShieldAlertIcon } from 'lucide-react';
+import { AuthPageShell } from '@/components/auth-page-shell';
 
 export default function UnauthorizedPage() {
   const router = useRouter();
 
   return (
-    <div className='bg-background flex min-h-screen flex-col items-center justify-center p-4'>
-      <div className='flex max-w-md flex-col items-center space-y-6 text-center'>
-        <ShieldAlertIcon className='text-destructive h-24 w-24' />
-
-        <h1 className='text-4xl font-bold'>Access Denied</h1>
-
-        <p className='text-muted-foreground text-lg'>
-          You don&apos;t have permission to access this page. Please contact
-          your administrator if you believe this is an error.
+    <AuthPageShell
+      title='Access Denied'
+      description="You don't have permission to access this page."
+    >
+      <div className='flex flex-col items-center gap-6'>
+        <ShieldAlertIcon className='text-destructive h-20 w-20' />
+        <p className='text-muted-foreground text-center text-sm'>
+          Contact your administrator if you believe this is an error.
         </p>
-
-        <div className='flex gap-4'>
-          <Button onClick={() => router.push('/')}>Go to Dashboard</Button>
-
-          <Button variant='outline' onClick={() => router.back()}>
+        <div className='flex w-full flex-col gap-3 sm:w-auto sm:flex-row'>
+          <Button onClick={() => router.push('/')} className='w-full sm:w-auto'>
+            Go to Dashboard
+          </Button>
+          <Button variant='outline' onClick={() => router.back()} className='w-full sm:w-auto'>
             Go Back
           </Button>
         </div>
       </div>
-    </div>
+    </AuthPageShell>
   );
 }
diff --git a/ui/components.json b/ui/components.json
index 3d296c4f..14caef54 100644
--- a/ui/components.json
+++ b/ui/components.json
@@ -1,15 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
     "css": "app/globals.css",
-    "baseColor": "stone",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
+  "rtl": false,
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -17,5 +19,5 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {}
 }
diff --git a/ui/components/ApiEndpointTester.tsx b/ui/components/ApiEndpointTester.tsx
deleted file mode 100644
index 1a0cf81e..00000000
--- a/ui/components/ApiEndpointTester.tsx
+++ /dev/null
@@ -1,1675 +0,0 @@
-'use client';
-
-import React, { useState, useRef } from 'react';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { type Model } from '@/lib/api/schemas/models';
-import { ModelService } from '@/lib/api/services/models';
-import { Button } from '@/components/ui/button';
-import { Textarea } from '@/components/ui/textarea';
-import { Label } from '@/components/ui/label';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Badge } from '@/components/ui/badge';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import {
-  Loader2,
-  Send,
-  CheckCircle,
-  XCircle,
-  Info,
-  Key,
-  Globe,
-  FileText,
-  Image as ImageIcon,
-  Mic,
-  List,
-  MicOff,
-  Eye,
-  Volume2,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { Input } from '@/components/ui/input';
-import Image from 'next/image';
-
-interface ApiEndpointTesterProps {
-  models: Model[];
-}
-
-// API Endpoint Types
-const API_ENDPOINTS = {
-  'chat-completions': {
-    name: 'Chat Completions',
-    path: '/chat/completions',
-    icon: FileText,
-    description: 'Test conversational AI with chat completion requests',
-  },
-  'vision-chat': {
-    name: 'Vision Chat (Image + Text)',
-    path: '/chat/completions',
-    icon: Eye,
-    description: 'Analyze images with text prompts using vision models',
-  },
-  embeddings: {
-    name: 'Embeddings',
-    path: '/embeddings',
-    icon: List,
-    description: 'Generate embeddings for text input',
-  },
-  images: {
-    name: 'Image Generation',
-    path: '/images/generations',
-    icon: ImageIcon,
-    description: 'Generate images from text prompts',
-  },
-  'audio-speech': {
-    name: 'Text-to-Speech',
-    path: '/audio/speech',
-    icon: Mic,
-    description: 'Convert text to speech audio',
-  },
-  'audio-transcription': {
-    name: 'Audio Transcription',
-    path: '/audio/transcriptions',
-    icon: Volume2,
-    description: 'Transcribe audio files to text',
-  },
-  models: {
-    name: 'List Models',
-    path: '/model',
-    icon: List,
-    description: 'List all available models from the provider',
-  },
-} as const;
-
-type EndpointType = keyof typeof API_ENDPOINTS;
-
-// Request/Response interfaces for different endpoints
-interface ChatCompletionRequest {
-  model: string;
-  messages: {
-    role: 'system' | 'user' | 'assistant';
-    content:
-      | string
-      | Array<{
-          type: 'text' | 'image_url';
-          text?: string;
-          image_url?: {
-            url: string;
-            detail?: 'low' | 'high' | 'auto';
-          };
-        }>;
-  }[];
-  max_tokens?: number;
-  temperature?: number;
-}
-
-interface EmbeddingRequest {
-  model: string;
-  input: string | string[];
-  encoding_format?: 'float' | 'base64';
-}
-
-interface ImageGenerationRequest {
-  model?: string;
-  prompt: string;
-  n?: number;
-  size?: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792';
-  quality?: 'standard' | 'hd';
-  style?: 'vivid' | 'natural';
-}
-
-interface AudioSpeechRequest {
-  model: string;
-  input: string;
-  voice: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
-  response_format?: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm';
-  speed?: number;
-}
-
-interface AudioTranscriptionRequest {
-  model: string;
-  file: File;
-  prompt?: string;
-  response_format?: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt';
-  temperature?: number;
-  language?: string;
-}
-
-// Response types
-interface ChatCompletionResponse {
-  id: string;
-  object: string;
-  created: number;
-  model: string;
-  choices: {
-    index: number;
-    message: {
-      role: string;
-      content: string;
-    };
-    finish_reason: string;
-  }[];
-  usage?: {
-    prompt_tokens: number;
-    completion_tokens: number;
-    total_tokens: number;
-  };
-}
-
-interface EmbeddingResponse {
-  object: string;
-  data: {
-    object: string;
-    index: number;
-    embedding: number[];
-  }[];
-  model: string;
-  usage: {
-    prompt_tokens: number;
-    total_tokens: number;
-  };
-}
-
-interface ImageGenerationResponse {
-  created: number;
-  data: {
-    url: string;
-    revised_prompt?: string;
-  }[];
-}
-
-interface AudioResponse {
-  type: 'audio';
-  url: string;
-  size: number;
-}
-
-interface AudioTranscriptionResponse {
-  text: string;
-}
-
-interface ModelsListResponse {
-  object: string;
-  data: {
-    id: string;
-    object?: string;
-    created?: number;
-  }[];
-}
-
-type ApiResponse =
-  | ChatCompletionResponse
-  | EmbeddingResponse
-  | ImageGenerationResponse
-  | AudioResponse
-  | AudioTranscriptionResponse
-  | ModelsListResponse;
-
-const DEFAULT_REQUESTS = {
-  'chat-completions': {
-    systemMessage: 'You are a helpful assistant. Please respond concisely.',
-    userMessage:
-      'Hello! Can you tell me what model you are and confirm that you are working correctly?',
-    maxTokens: 150,
-    temperature: 0.7,
-  },
-  'vision-chat': {
-    systemMessage:
-      'You are a helpful assistant that can analyze images. Please describe what you see.',
-    userMessage:
-      'What do you see in this image? Please provide a detailed description.',
-    maxTokens: 300,
-    temperature: 0.7,
-    imageDetail: 'auto' as const,
-  },
-  embeddings: {
-    input: 'The quick brown fox jumps over the lazy dog.',
-    encoding_format: 'float' as const,
-  },
-  images: {
-    prompt: 'A beautiful sunset over a mountain landscape',
-    n: 1,
-    size: '1024x1024' as const,
-    quality: 'standard' as const,
-    style: 'vivid' as const,
-  },
-  'audio-speech': {
-    input: 'Hello, this is a test of the text-to-speech functionality.',
-    voice: 'alloy' as const,
-    response_format: 'mp3' as const,
-    speed: 1.0,
-  },
-  'audio-transcription': {
-    prompt: 'This is a test transcription.',
-    response_format: 'json' as const,
-    temperature: 0.0,
-    language: '',
-  },
-};
-
-export function ApiEndpointTester({ models }: ApiEndpointTesterProps) {
-  const [selectedModelId, setSelectedModelId] = useState<string>('');
-  const [selectedEndpoint, setSelectedEndpoint] =
-    useState<EndpointType>('chat-completions');
-  const [response, setResponse] = useState<ApiResponse | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  // Chat Completions state
-  const [systemMessage, setSystemMessage] = useState(
-    DEFAULT_REQUESTS['chat-completions'].systemMessage
-  );
-  const [userMessage, setUserMessage] = useState(
-    DEFAULT_REQUESTS['chat-completions'].userMessage
-  );
-  const [maxTokens, setMaxTokens] = useState(
-    DEFAULT_REQUESTS['chat-completions'].maxTokens
-  );
-  const [temperature, setTemperature] = useState(
-    DEFAULT_REQUESTS['chat-completions'].temperature
-  );
-
-  // Vision Chat state
-  const [visionSystemMessage, setVisionSystemMessage] = useState(
-    DEFAULT_REQUESTS['vision-chat'].systemMessage
-  );
-  const [visionUserMessage, setVisionUserMessage] = useState(
-    DEFAULT_REQUESTS['vision-chat'].userMessage
-  );
-  const [visionMaxTokens, setVisionMaxTokens] = useState(
-    DEFAULT_REQUESTS['vision-chat'].maxTokens
-  );
-  const [visionTemperature, setVisionTemperature] = useState(
-    DEFAULT_REQUESTS['vision-chat'].temperature
-  );
-  const [imageDetail, setImageDetail] = useState<'low' | 'high' | 'auto'>(
-    DEFAULT_REQUESTS['vision-chat'].imageDetail
-  );
-  const [selectedImage, setSelectedImage] = useState<File | null>(null);
-  const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
-
-  // Voice Recording state
-  const [isRecording, setIsRecording] = useState(false);
-  const [recordedAudio, setRecordedAudio] = useState<File | null>(null);
-  const [recordingUrl, setRecordingUrl] = useState<string | null>(null);
-  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
-    null
-  );
-  const [audioTranscriptionPrompt, setAudioTranscriptionPrompt] = useState(
-    DEFAULT_REQUESTS['audio-transcription'].prompt
-  );
-  const [audioResponseFormat, setAudioResponseFormat] = useState<
-    'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'
-  >(DEFAULT_REQUESTS['audio-transcription'].response_format);
-  const [audioTemperature, setAudioTemperature] = useState(
-    DEFAULT_REQUESTS['audio-transcription'].temperature
-  );
-  const [audioLanguage, setAudioLanguage] = useState(
-    DEFAULT_REQUESTS['audio-transcription'].language
-  );
-
-  // File upload refs
-  const imageInputRef = useRef<HTMLInputElement>(null);
-  const audioInputRef = useRef<HTMLInputElement>(null);
-
-  // Embeddings state
-  const [embeddingInput, setEmbeddingInput] = useState(
-    DEFAULT_REQUESTS.embeddings.input
-  );
-  const [encodingFormat, setEncodingFormat] = useState<'float' | 'base64'>(
-    DEFAULT_REQUESTS.embeddings.encoding_format
-  );
-
-  // Image Generation state
-  const [imagePrompt, setImagePrompt] = useState(
-    DEFAULT_REQUESTS.images.prompt
-  );
-  const [imageCount, setImageCount] = useState(DEFAULT_REQUESTS.images.n);
-  const [imageSize, setImageSize] = useState<
-    '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'
-  >(DEFAULT_REQUESTS.images.size);
-  const [imageQuality, setImageQuality] = useState<'standard' | 'hd'>(
-    DEFAULT_REQUESTS.images.quality
-  );
-  const [imageStyle, setImageStyle] = useState<'vivid' | 'natural'>(
-    DEFAULT_REQUESTS.images.style
-  );
-
-  // Audio Speech state
-  const [speechInput, setSpeechInput] = useState(
-    DEFAULT_REQUESTS['audio-speech'].input
-  );
-  const [speechVoice, setSpeechVoice] = useState<
-    'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer'
-  >(DEFAULT_REQUESTS['audio-speech'].voice);
-  const [speechFormat, setSpeechFormat] = useState<
-    'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'
-  >(DEFAULT_REQUESTS['audio-speech'].response_format);
-  const [speechSpeed, setSpeechSpeed] = useState(
-    DEFAULT_REQUESTS['audio-speech'].speed
-  );
-
-  // Fetch model groups for API key resolution
-  const { data: groups = [] } = useQuery({
-    queryKey: ['model-groups'],
-    queryFn: () => ModelService.getModelGroups(),
-    refetchOnWindowFocus: false,
-  });
-
-  const selectedModel = models.find((model) => model.id === selectedModelId);
-
-  // Image upload handler
-  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      if (file.type.startsWith('image/')) {
-        setSelectedImage(file);
-        const previewUrl = URL.createObjectURL(file);
-        setImagePreviewUrl(previewUrl);
-      } else {
-        toast.error('Please select a valid image file');
-      }
-    }
-  };
-
-  // Audio file upload handler
-  const handleAudioUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      if (file.type.startsWith('audio/')) {
-        setRecordedAudio(file);
-        const audioUrl = URL.createObjectURL(file);
-        setRecordingUrl(audioUrl);
-      } else {
-        toast.error('Please select a valid audio file');
-      }
-    }
-  };
-
-  // Voice recording functions
-  const startRecording = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const recorder = new MediaRecorder(stream);
-      const chunks: BlobPart[] = [];
-
-      recorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          chunks.push(event.data);
-        }
-      };
-
-      recorder.onstop = () => {
-        const blob = new Blob(chunks, { type: 'audio/webm' });
-        const file = new File([blob], 'recording.webm', { type: 'audio/webm' });
-        setRecordedAudio(file);
-        const audioUrl = URL.createObjectURL(blob);
-        setRecordingUrl(audioUrl);
-
-        // Stop all tracks to release microphone
-        stream.getTracks().forEach((track) => track.stop());
-      };
-
-      recorder.start();
-      setMediaRecorder(recorder);
-      setIsRecording(true);
-      toast.success('Recording started');
-    } catch (error) {
-      console.error('Error starting recording:', error);
-      toast.error(
-        'Failed to start recording. Please check microphone permissions.'
-      );
-    }
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorder) {
-      mediaRecorder.stop();
-      setMediaRecorder(null);
-      setIsRecording(false);
-      toast.success('Recording stopped');
-    }
-  };
-
-  // Convert file to base64 for vision API
-  const fileToBase64 = (file: File): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = (error) => reject(error);
-    });
-  };
-
-  // Get effective API key and endpoint URL for the selected model
-  const getModelCredentials = (model: Model) => {
-    const group = groups.find((g) => g.provider === model.provider);
-
-    // Determine API key (individual takes precedence over group)
-    const apiKey = model.api_key || group?.group_api_key;
-
-    // Determine base endpoint URL
-    let baseUrl = model.url;
-
-    // If model URL is relative and group has a base URL, combine them
-    if (model.url.startsWith('/') && group?.group_url) {
-      baseUrl = `${group.group_url.replace(/\/$/, '')}${model.url}`;
-    }
-
-    // Remove any existing endpoint path to get base URL
-    baseUrl = baseUrl.replace(/\/v1\/.*$/, '').replace(/\/$/, '');
-
-    return {
-      apiKey,
-      baseUrl,
-      group,
-    };
-  };
-
-  const buildEndpointUrl = (baseUrl: string, endpointPath: string) => {
-    return `${baseUrl}${endpointPath}`;
-  };
-
-  const buildRequest = async (): Promise<
-    | ChatCompletionRequest
-    | EmbeddingRequest
-    | ImageGenerationRequest
-    | AudioSpeechRequest
-    | AudioTranscriptionRequest
-    | null
-  > => {
-    if (!selectedModel) return null;
-
-    switch (selectedEndpoint) {
-      case 'chat-completions':
-        const messages = [];
-        if (systemMessage.trim()) {
-          messages.push({
-            role: 'system' as const,
-            content: systemMessage.trim(),
-          });
-        }
-        messages.push({ role: 'user' as const, content: userMessage.trim() });
-
-        return {
-          model: selectedModel.name,
-          messages,
-          max_tokens: maxTokens,
-          temperature: temperature,
-        } as ChatCompletionRequest;
-
-      case 'vision-chat':
-        if (!selectedImage) {
-          throw new Error('Please select an image for vision analysis');
-        }
-
-        const imageBase64 = await fileToBase64(selectedImage);
-        const visionMessages = [];
-
-        if (visionSystemMessage.trim()) {
-          visionMessages.push({
-            role: 'system' as const,
-            content: visionSystemMessage.trim(),
-          });
-        }
-
-        visionMessages.push({
-          role: 'user' as const,
-          content: [
-            {
-              type: 'text' as const,
-              text: visionUserMessage.trim(),
-            },
-            {
-              type: 'image_url' as const,
-              image_url: {
-                url: imageBase64,
-                detail: imageDetail,
-              },
-            },
-          ],
-        });
-
-        return {
-          model: selectedModel.name,
-          messages: visionMessages,
-          max_tokens: visionMaxTokens,
-          temperature: visionTemperature,
-        } as ChatCompletionRequest;
-
-      case 'embeddings':
-        return {
-          model: selectedModel.name,
-          input: embeddingInput,
-          encoding_format: encodingFormat,
-        } as EmbeddingRequest;
-
-      case 'images':
-        return {
-          model: selectedModel.name,
-          prompt: imagePrompt,
-          n: imageCount,
-          size: imageSize,
-          quality: imageQuality,
-          style: imageStyle,
-        } as ImageGenerationRequest;
-
-      case 'audio-speech':
-        return {
-          model: selectedModel.name,
-          input: speechInput,
-          voice: speechVoice,
-          response_format: speechFormat,
-          speed: speechSpeed,
-        } as AudioSpeechRequest;
-
-      case 'audio-transcription':
-        if (!recordedAudio) {
-          throw new Error(
-            'Please record or upload an audio file for transcription'
-          );
-        }
-
-        return {
-          model: selectedModel.name,
-          file: recordedAudio,
-          prompt: audioTranscriptionPrompt.trim() || undefined,
-          response_format: audioResponseFormat,
-          temperature: audioTemperature,
-          language: audioLanguage.trim() || undefined,
-        } as AudioTranscriptionRequest;
-
-      case 'models':
-        return null; // No request body needed for models endpoint
-
-      default:
-        return null;
-    }
-  };
-
-  const testEndpointMutation = useMutation({
-    mutationFn: async (
-      requestData:
-        | ChatCompletionRequest
-        | EmbeddingRequest
-        | ImageGenerationRequest
-        | AudioSpeechRequest
-        | AudioTranscriptionRequest
-        | null
-    ) => {
-      if (!selectedModel) {
-        throw new Error('No model selected');
-      }
-
-      setError(null);
-      setResponse(null);
-
-      try {
-        console.log(`Testing endpoint via proxy: ${selectedEndpoint}`);
-        console.log('Request payload:', requestData);
-
-        const response = await ModelService.testModel(
-          selectedModel.id,
-          selectedEndpoint,
-          requestData as unknown as Record<string, unknown>
-        );
-
-        if (!response.success) {
-          throw new Error(response.error || 'Test failed');
-        }
-
-        return response.data as ApiResponse;
-      } catch (err: unknown) {
-        console.error('API endpoint test error via proxy:', err);
-
-        const errorMessage =
-          err instanceof Error
-            ? err.message
-            : 'Failed to test endpoint via proxy';
-        throw new Error(errorMessage);
-      }
-    },
-    onSuccess: (data) => {
-      setResponse(data);
-      toast.success(
-        `${API_ENDPOINTS[selectedEndpoint].name} test completed successfully!`
-      );
-    },
-    onError: (err: Error) => {
-      const errorMessage = err?.message || 'Unknown error occurred';
-      setError(errorMessage);
-      toast.error(
-        `${API_ENDPOINTS[selectedEndpoint].name} test failed: ${errorMessage}`
-      );
-    },
-  });
-
-  const handleTest = async () => {
-    if (!selectedModel) {
-      toast.error('Please select a model to test');
-      return;
-    }
-
-    // Validate required fields based on endpoint
-    if (selectedEndpoint === 'chat-completions' && !userMessage.trim()) {
-      toast.error('Please enter a test message');
-      return;
-    }
-
-    if (selectedEndpoint === 'vision-chat') {
-      if (!visionUserMessage.trim()) {
-        toast.error('Please enter a test message');
-        return;
-      }
-      if (!selectedImage) {
-        toast.error('Please select an image for vision analysis');
-        return;
-      }
-    }
-
-    if (selectedEndpoint === 'embeddings' && !embeddingInput.trim()) {
-      toast.error('Please enter text for embedding');
-      return;
-    }
-
-    if (selectedEndpoint === 'images' && !imagePrompt.trim()) {
-      toast.error('Please enter an image prompt');
-      return;
-    }
-
-    if (selectedEndpoint === 'audio-speech' && !speechInput.trim()) {
-      toast.error('Please enter text for speech synthesis');
-      return;
-    }
-
-    if (selectedEndpoint === 'audio-transcription' && !recordedAudio) {
-      toast.error('Please record or upload an audio file for transcription');
-      return;
-    }
-
-    const requestData = await buildRequest();
-    testEndpointMutation.mutate(requestData);
-  };
-
-  const enabledModels = models.filter((model) => model.isEnabled);
-  const credentials = selectedModel ? getModelCredentials(selectedModel) : null;
-  const endpointUrl = credentials
-    ? buildEndpointUrl(
-        credentials.baseUrl,
-        API_ENDPOINTS[selectedEndpoint].path
-      )
-    : '';
-
-  const renderEndpointForm = () => {
-    switch (selectedEndpoint) {
-      case 'chat-completions':
-        return (
-          <div className='space-y-4'>
-            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-              <div className='space-y-2'>
-                <Label htmlFor='max-tokens'>Max Tokens</Label>
-                <Input
-                  id='max-tokens'
-                  type='number'
-                  min={1}
-                  max={4000}
-                  value={maxTokens}
-                  onChange={(e) =>
-                    setMaxTokens(parseInt(e.target.value) || 150)
-                  }
-                />
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='temperature'>Temperature</Label>
-                <Input
-                  id='temperature'
-                  type='number'
-                  min={0}
-                  max={2}
-                  step={0.1}
-                  value={temperature}
-                  onChange={(e) =>
-                    setTemperature(parseFloat(e.target.value) || 0.7)
-                  }
-                />
-              </div>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='system-message'>System Message (Optional)</Label>
-              <Textarea
-                id='system-message'
-                placeholder='Enter system message...'
-                value={systemMessage}
-                onChange={(e) => setSystemMessage(e.target.value)}
-                rows={2}
-              />
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='user-message'>Test Message</Label>
-              <Textarea
-                id='user-message'
-                placeholder='Enter your test message...'
-                value={userMessage}
-                onChange={(e) => setUserMessage(e.target.value)}
-                rows={3}
-              />
-            </div>
-          </div>
-        );
-
-      case 'vision-chat':
-        return (
-          <div className='space-y-4'>
-            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-              <div className='space-y-2'>
-                <Label htmlFor='vision-max-tokens'>Max Tokens</Label>
-                <Input
-                  id='vision-max-tokens'
-                  type='number'
-                  min={1}
-                  max={4000}
-                  value={visionMaxTokens}
-                  onChange={(e) =>
-                    setVisionMaxTokens(parseInt(e.target.value) || 300)
-                  }
-                />
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='vision-temperature'>Temperature</Label>
-                <Input
-                  id='vision-temperature'
-                  type='number'
-                  min={0}
-                  max={2}
-                  step={0.1}
-                  value={visionTemperature}
-                  onChange={(e) =>
-                    setVisionTemperature(parseFloat(e.target.value) || 0.7)
-                  }
-                />
-              </div>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='vision-system-message'>
-                System Message (Optional)
-              </Label>
-              <Textarea
-                id='vision-system-message'
-                placeholder='Enter system message...'
-                value={visionSystemMessage}
-                onChange={(e) => setVisionSystemMessage(e.target.value)}
-                rows={2}
-              />
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='vision-user-message'>Test Message</Label>
-              <Textarea
-                id='vision-user-message'
-                placeholder='Enter your test message...'
-                value={visionUserMessage}
-                onChange={(e) => setVisionUserMessage(e.target.value)}
-                rows={3}
-              />
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='image-detail'>Image Detail</Label>
-              <Select
-                value={imageDetail}
-                onValueChange={(value: 'low' | 'high' | 'auto') =>
-                  setImageDetail(value)
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='low'>Low</SelectItem>
-                  <SelectItem value='high'>High</SelectItem>
-                  <SelectItem value='auto'>Auto</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='image-upload'>Upload Image (Optional)</Label>
-              <Input
-                type='file'
-                accept='image/*'
-                onChange={handleImageUpload}
-                ref={imageInputRef}
-                className='file:mr-4 file:rounded-full file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100'
-              />
-              {selectedImage && (
-                <div className='mt-2 flex items-center gap-2'>
-                  <ImageIcon className='h-5 w-5 text-blue-500' />
-                  <span className='text-muted-foreground text-sm'>
-                    Selected image: {selectedImage.name}
-                  </span>
-                  <Button
-                    variant='outline'
-                    size='sm'
-                    onClick={() => setSelectedImage(null)}
-                    className='ml-auto'
-                  >
-                    Remove
-                  </Button>
-                </div>
-              )}
-              {imagePreviewUrl && (
-                <div className='relative mt-2 aspect-square w-32 overflow-hidden rounded-md border'>
-                  <Image
-                    src={imagePreviewUrl}
-                    alt='Image preview'
-                    fill
-                    className='object-cover'
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        );
-
-      case 'embeddings':
-        return (
-          <div className='space-y-4'>
-            <div className='space-y-2'>
-              <Label htmlFor='encoding-format'>Encoding Format</Label>
-              <Select
-                value={encodingFormat}
-                onValueChange={(value: 'float' | 'base64') =>
-                  setEncodingFormat(value)
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='float'>Float</SelectItem>
-                  <SelectItem value='base64'>Base64</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='embedding-input'>Text Input</Label>
-              <Textarea
-                id='embedding-input'
-                placeholder='Enter text to generate embeddings for...'
-                value={embeddingInput}
-                onChange={(e) => setEmbeddingInput(e.target.value)}
-                rows={4}
-              />
-            </div>
-          </div>
-        );
-
-      case 'images':
-        return (
-          <div className='space-y-4'>
-            <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
-              <div className='space-y-2'>
-                <Label htmlFor='image-count'>Number of Images</Label>
-                <Input
-                  id='image-count'
-                  type='number'
-                  min={1}
-                  max={10}
-                  value={imageCount}
-                  onChange={(e) => setImageCount(parseInt(e.target.value) || 1)}
-                />
-              </div>
-
-              <div className='space-y-2'>
-                <Label htmlFor='image-size'>Size</Label>
-                <Select
-                  value={imageSize}
-                  onValueChange={(
-                    value:
-                      | '256x256'
-                      | '512x512'
-                      | '1024x1024'
-                      | '1792x1024'
-                      | '1024x1792'
-                  ) => setImageSize(value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value='256x256'>256x256</SelectItem>
-                    <SelectItem value='512x512'>512x512</SelectItem>
-                    <SelectItem value='1024x1024'>1024x1024</SelectItem>
-                    <SelectItem value='1792x1024'>1792x1024</SelectItem>
-                    <SelectItem value='1024x1792'>1024x1792</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className='space-y-2'>
-                <Label htmlFor='image-quality'>Quality</Label>
-                <Select
-                  value={imageQuality}
-                  onValueChange={(value: 'standard' | 'hd') =>
-                    setImageQuality(value)
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value='standard'>Standard</SelectItem>
-                    <SelectItem value='hd'>HD</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='image-style'>Style</Label>
-              <Select
-                value={imageStyle}
-                onValueChange={(value: 'vivid' | 'natural') =>
-                  setImageStyle(value)
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='vivid'>Vivid</SelectItem>
-                  <SelectItem value='natural'>Natural</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='image-prompt'>Image Prompt</Label>
-              <Textarea
-                id='image-prompt'
-                placeholder='Describe the image you want to generate...'
-                value={imagePrompt}
-                onChange={(e) => setImagePrompt(e.target.value)}
-                rows={3}
-              />
-            </div>
-          </div>
-        );
-
-      case 'audio-speech':
-        return (
-          <div className='space-y-4'>
-            <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
-              <div className='space-y-2'>
-                <Label htmlFor='speech-voice'>Voice</Label>
-                <Select
-                  value={speechVoice}
-                  onValueChange={(
-                    value:
-                      | 'alloy'
-                      | 'echo'
-                      | 'fable'
-                      | 'onyx'
-                      | 'nova'
-                      | 'shimmer'
-                  ) => setSpeechVoice(value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value='alloy'>Alloy</SelectItem>
-                    <SelectItem value='echo'>Echo</SelectItem>
-                    <SelectItem value='fable'>Fable</SelectItem>
-                    <SelectItem value='onyx'>Onyx</SelectItem>
-                    <SelectItem value='nova'>Nova</SelectItem>
-                    <SelectItem value='shimmer'>Shimmer</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className='space-y-2'>
-                <Label htmlFor='speech-format'>Response Format</Label>
-                <Select
-                  value={speechFormat}
-                  onValueChange={(
-                    value: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'
-                  ) => setSpeechFormat(value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value='mp3'>MP3</SelectItem>
-                    <SelectItem value='opus'>Opus</SelectItem>
-                    <SelectItem value='aac'>AAC</SelectItem>
-                    <SelectItem value='flac'>FLAC</SelectItem>
-                    <SelectItem value='wav'>WAV</SelectItem>
-                    <SelectItem value='pcm'>PCM</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className='space-y-2'>
-                <Label htmlFor='speech-speed'>Speed</Label>
-                <Input
-                  id='speech-speed'
-                  type='number'
-                  min={0.25}
-                  max={4.0}
-                  step={0.25}
-                  value={speechSpeed}
-                  onChange={(e) =>
-                    setSpeechSpeed(parseFloat(e.target.value) || 1.0)
-                  }
-                />
-              </div>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='speech-input'>Text to Synthesize</Label>
-              <Textarea
-                id='speech-input'
-                placeholder='Enter text to convert to speech...'
-                value={speechInput}
-                onChange={(e) => setSpeechInput(e.target.value)}
-                rows={4}
-              />
-            </div>
-          </div>
-        );
-
-      case 'audio-transcription':
-        return (
-          <div className='space-y-4'>
-            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-              <div className='space-y-2'>
-                <Label htmlFor='audio-transcription-prompt'>
-                  Prompt (Optional)
-                </Label>
-                <Textarea
-                  id='audio-transcription-prompt'
-                  placeholder='Enter a prompt for the transcription...'
-                  value={audioTranscriptionPrompt}
-                  onChange={(e) => setAudioTranscriptionPrompt(e.target.value)}
-                  rows={2}
-                />
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='audio-transcription-temperature'>
-                  Temperature
-                </Label>
-                <Input
-                  id='audio-transcription-temperature'
-                  type='number'
-                  min={0}
-                  max={1}
-                  step={0.1}
-                  value={audioTemperature}
-                  onChange={(e) =>
-                    setAudioTemperature(parseFloat(e.target.value) || 0.0)
-                  }
-                />
-              </div>
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='audio-transcription-language'>
-                Language (Optional)
-              </Label>
-              <Input
-                id='audio-transcription-language'
-                placeholder='e.g., en-US, fr-FR'
-                value={audioLanguage}
-                onChange={(e) => setAudioLanguage(e.target.value)}
-              />
-            </div>
-
-            <div className='space-y-2'>
-              <Label htmlFor='audio-transcription-response-format'>
-                Response Format
-              </Label>
-              <Select
-                value={audioResponseFormat}
-                onValueChange={(
-                  value: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'
-                ) => setAudioResponseFormat(value)}
-              >
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value='json'>JSON</SelectItem>
-                  <SelectItem value='text'>Text</SelectItem>
-                  <SelectItem value='srt'>SRT</SelectItem>
-                  <SelectItem value='verbose_json'>Verbose JSON</SelectItem>
-                  <SelectItem value='vtt'>VTT</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className='space-y-4'>
-              <div className='space-y-2'>
-                <Label>Voice Recording</Label>
-                <div className='flex items-center gap-2'>
-                  <Button
-                    type='button'
-                    variant={isRecording ? 'destructive' : 'default'}
-                    size='sm'
-                    onClick={isRecording ? stopRecording : startRecording}
-                    className='flex items-center gap-2'
-                  >
-                    {isRecording ? (
-                      <>
-                        <MicOff className='h-4 w-4' />
-                        Stop Recording
-                      </>
-                    ) : (
-                      <>
-                        <Mic className='h-4 w-4' />
-                        Start Recording
-                      </>
-                    )}
-                  </Button>
-                  {isRecording && (
-                    <div className='flex items-center gap-2 text-red-600'>
-                      <div className='h-2 w-2 animate-pulse rounded-full bg-red-600' />
-                      <span className='text-sm'>Recording...</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <div className='space-y-2'>
-                <Label htmlFor='audio-transcription-upload'>
-                  Or Upload Audio File
-                </Label>
-                <Input
-                  type='file'
-                  accept='audio/*'
-                  onChange={handleAudioUpload}
-                  ref={audioInputRef}
-                  className='file:mr-4 file:rounded-full file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100'
-                />
-                {recordedAudio && (
-                  <div className='mt-2 flex items-center gap-2'>
-                    <Volume2 className='h-5 w-5 text-blue-500' />
-                    <span className='text-muted-foreground text-sm'>
-                      Selected audio: {recordedAudio.name}
-                    </span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      onClick={() => {
-                        setRecordedAudio(null);
-                        setRecordingUrl(null);
-                      }}
-                      className='ml-auto'
-                    >
-                      Remove
-                    </Button>
-                  </div>
-                )}
-                {recordingUrl && (
-                  <div className='bg-muted mt-2 rounded-md p-4'>
-                    <audio controls src={recordingUrl} className='w-full'>
-                      Your browser does not support the audio element.
-                    </audio>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        );
-
-      case 'models':
-        return (
-          <div className='space-y-4'>
-            <Alert>
-              <List className='h-4 w-4' />
-              <AlertDescription>
-                This endpoint lists all available models from the provider. No
-                additional parameters are required.
-              </AlertDescription>
-            </Alert>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  // Type guard functions
-  const isAudioResponse = (
-    response: ApiResponse
-  ): response is AudioResponse => {
-    return 'type' in response && response.type === 'audio';
-  };
-
-  const isChatCompletionResponse = (
-    response: ApiResponse
-  ): response is ChatCompletionResponse => {
-    return 'choices' in response;
-  };
-
-  const isEmbeddingResponse = (
-    response: ApiResponse
-  ): response is EmbeddingResponse => {
-    return (
-      'data' in response &&
-      Array.isArray(response.data) &&
-      response.data.length > 0 &&
-      'embedding' in response.data[0]
-    );
-  };
-
-  const isImageGenerationResponse = (
-    response: ApiResponse
-  ): response is ImageGenerationResponse => {
-    return (
-      'data' in response &&
-      Array.isArray(response.data) &&
-      response.data.length > 0 &&
-      'url' in response.data[0]
-    );
-  };
-
-  const isModelsListResponse = (
-    response: ApiResponse
-  ): response is ModelsListResponse => {
-    return (
-      'data' in response &&
-      Array.isArray(response.data) &&
-      response.data.length > 0 &&
-      'id' in response.data[0]
-    );
-  };
-
-  const isAudioTranscriptionResponse = (
-    response: ApiResponse
-  ): response is AudioTranscriptionResponse => {
-    return 'text' in response;
-  };
-
-  const renderResponse = () => {
-    if (!response) return null;
-
-    // Handle audio response
-    if (isAudioResponse(response)) {
-      return (
-        <div className='space-y-4'>
-          <div className='space-y-2'>
-            <Label>Generated Audio</Label>
-            <div className='bg-muted rounded-md p-4'>
-              <audio controls src={response.url} className='w-full'>
-                Your browser does not support the audio element.
-              </audio>
-              <p className='text-muted-foreground mt-2 text-sm'>
-                Audio file size: {(response.size / 1024).toFixed(2)} KB
-              </p>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    // Handle audio transcription response
-    if (isAudioTranscriptionResponse(response)) {
-      return (
-        <div className='space-y-4'>
-          <div className='space-y-2'>
-            <Label>Transcription Result</Label>
-            <div className='bg-muted rounded-md p-4'>
-              <p className='text-sm whitespace-pre-wrap'>
-                {response.text || 'No transcription result available'}
-              </p>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    // Handle different response types using type guards
-    if (isChatCompletionResponse(response)) {
-      return (
-        <div className='space-y-4'>
-          <div className='space-y-2'>
-            <Label>Model Response</Label>
-            <div className='bg-muted rounded-md p-4'>
-              <p className='text-sm whitespace-pre-wrap'>
-                {response.choices?.[0]?.message?.content ||
-                  'No content in response'}
-              </p>
-            </div>
-          </div>
-
-          {response.usage && (
-            <div className='space-y-2'>
-              <Label>Usage Statistics</Label>
-              <div className='grid grid-cols-3 gap-4 text-sm'>
-                <div className='bg-muted rounded p-2 text-center'>
-                  <div className='font-semibold'>
-                    {response.usage.prompt_tokens}
-                  </div>
-                  <div className='text-muted-foreground'>Prompt Tokens</div>
-                </div>
-                <div className='bg-muted rounded p-2 text-center'>
-                  <div className='font-semibold'>
-                    {response.usage.completion_tokens}
-                  </div>
-                  <div className='text-muted-foreground'>Completion Tokens</div>
-                </div>
-                <div className='bg-muted rounded p-2 text-center'>
-                  <div className='font-semibold'>
-                    {response.usage.total_tokens}
-                  </div>
-                  <div className='text-muted-foreground'>Total Tokens</div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    if (isEmbeddingResponse(response)) {
-      return (
-        <div className='space-y-4'>
-          <div className='space-y-2'>
-            <Label>Embedding Vector</Label>
-            <div className='bg-muted rounded-md p-4'>
-              <p className='text-muted-foreground mb-2 text-sm'>
-                Generated {response.data?.[0]?.embedding?.length || 0}{' '}
-                dimensional embedding vector
-              </p>
-              <details className='group'>
-                <summary className='hover:text-foreground cursor-pointer text-sm'>
-                  Show first 10 values
-                </summary>
-                <pre className='mt-2 text-xs'>
-                  {JSON.stringify(
-                    response.data?.[0]?.embedding?.slice(0, 10),
-                    null,
-                    2
-                  )}
-                  ...
-                </pre>
-              </details>
-            </div>
-          </div>
-
-          {response.usage && (
-            <div className='space-y-2'>
-              <Label>Usage Statistics</Label>
-              <div className='bg-muted rounded p-2 text-center text-sm'>
-                <div className='font-semibold'>
-                  {response.usage.total_tokens}
-                </div>
-                <div className='text-muted-foreground'>Total Tokens</div>
-              </div>
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    if (isImageGenerationResponse(response)) {
-      return (
-        <div className='space-y-4'>
-          <div className='space-y-2'>
-            <Label>Generated Images</Label>
-            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-              {response.data?.map((image, index: number) => (
-                <div key={index} className='space-y-2'>
-                  <div className='relative aspect-square w-full'>
-                    <Image
-                      src={image.url}
-                      alt={`Generated image ${index + 1}`}
-                      fill
-                      className='rounded-md border object-cover'
-                      unoptimized={true}
-                    />
-                  </div>
-                  {image.revised_prompt && (
-                    <p className='text-muted-foreground text-xs'>
-                      Revised prompt: {image.revised_prompt}
-                    </p>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    if (isModelsListResponse(response)) {
-      return (
-        <div className='space-y-4'>
-          <div className='space-y-2'>
-            <Label>Available Models</Label>
-            <div className='max-h-60 overflow-auto'>
-              <div className='grid gap-2'>
-                {response.data?.map((model) => (
-                  <div key={model.id} className='bg-muted rounded-md p-3'>
-                    <div className='font-medium'>{model.id}</div>
-                    {model.object && (
-                      <div className='text-muted-foreground text-sm'>
-                        Type: {model.object}
-                      </div>
-                    )}
-                    {model.created && (
-                      <div className='text-muted-foreground text-sm'>
-                        Created:{' '}
-                        {new Date(model.created * 1000).toLocaleDateString()}
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <Card className='w-full'>
-      <CardHeader>
-        <CardTitle className='flex items-center gap-2'>
-          <Send className='h-5 w-5' />
-          API Endpoint Tester
-        </CardTitle>
-        <CardDescription>
-          Comprehensive testing of OpenAI-compatible API endpoints through the
-          secure proxy (resolves CORS and network issues)
-        </CardDescription>
-      </CardHeader>
-      <CardContent className='space-y-6'>
-        {/* Model and Endpoint Selection */}
-        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
-          <div className='space-y-2'>
-            <Label htmlFor='model-select'>Select Model</Label>
-            <Select value={selectedModelId} onValueChange={setSelectedModelId}>
-              <SelectTrigger id='model-select'>
-                <SelectValue placeholder='Choose a model to test...' />
-              </SelectTrigger>
-              <SelectContent>
-                {enabledModels.map((model) => (
-                  <SelectItem key={model.id} value={model.id}>
-                    <div className='flex items-center gap-2'>
-                      <span>{model.name}</span>
-                      <Badge variant='outline' className='text-xs'>
-                        {model.provider}
-                      </Badge>
-                      {model.is_free && (
-                        <Badge variant='secondary' className='text-xs'>
-                          Free
-                        </Badge>
-                      )}
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className='space-y-2'>
-            <Label htmlFor='endpoint-select'>API Endpoint</Label>
-            <Select
-              value={selectedEndpoint}
-              onValueChange={(value: EndpointType) =>
-                setSelectedEndpoint(value)
-              }
-            >
-              <SelectTrigger id='endpoint-select'>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {Object.entries(API_ENDPOINTS).map(([key, endpoint]) => {
-                  const Icon = endpoint.icon;
-                  return (
-                    <SelectItem key={key} value={key}>
-                      <div className='flex items-center gap-2'>
-                        <Icon className='h-4 w-4' />
-                        <span>{endpoint.name}</span>
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        {/* Model Information */}
-        {selectedModel && credentials && (
-          <div className='text-muted-foreground bg-muted space-y-2 rounded-md p-3 text-sm'>
-            <div className='flex items-center gap-2'>
-              <Globe className='h-4 w-4' />
-              <span>
-                <strong>Endpoint:</strong> {endpointUrl}
-              </span>
-            </div>
-            <div className='flex items-center gap-2'>
-              <Key className='h-4 w-4' />
-              <span>
-                <strong>API Key:</strong>{' '}
-                {credentials.apiKey
-                  ? `${credentials.apiKey.substring(0, 8)}...`
-                  : 'Not configured'}
-              </span>
-              <Badge
-                variant={credentials.apiKey ? 'default' : 'destructive'}
-                className='text-xs'
-              >
-                {selectedModel.api_key_type || 'Unknown'}
-              </Badge>
-            </div>
-            <div>
-              <span>
-                <strong>Provider:</strong> {selectedModel.provider}
-              </span>
-            </div>
-            <div>
-              <span>
-                <strong>Description:</strong>{' '}
-                {API_ENDPOINTS[selectedEndpoint].description}
-              </span>
-            </div>
-            {!credentials.apiKey && (
-              <Alert variant='default' className='mt-2'>
-                <Info className='h-4 w-4' />
-                <AlertDescription>
-                  No API key configured for this model. Testing may still work
-                  if the model is free or if authentication is handled
-                  elsewhere. For models requiring authentication, please add an
-                  API key to the model or its provider group.
-                </AlertDescription>
-              </Alert>
-            )}
-          </div>
-        )}
-
-        {/* Endpoint-specific form */}
-        {renderEndpointForm()}
-
-        {/* Test Button */}
-        <Button
-          onClick={handleTest}
-          disabled={!selectedModelId || testEndpointMutation.isPending}
-          className='w-full'
-        >
-          {testEndpointMutation.isPending ? (
-            <>
-              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-              Testing {API_ENDPOINTS[selectedEndpoint].name}...
-            </>
-          ) : (
-            <>
-              <Send className='mr-2 h-4 w-4' />
-              Test {API_ENDPOINTS[selectedEndpoint].name}
-            </>
-          )}
-        </Button>
-
-        {/* Results */}
-        {error && (
-          <Alert variant='destructive'>
-            <XCircle className='h-4 w-4' />
-            <AlertDescription>
-              <strong>Test Failed:</strong> {error}
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {response && (
-          <Alert>
-            <CheckCircle className='h-4 w-4' />
-            <AlertDescription>
-              <strong>Test Successful!</strong>{' '}
-              {API_ENDPOINTS[selectedEndpoint].name} endpoint responded
-              correctly.
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {response && renderResponse()}
-
-        {response && (
-          <div className='space-y-2'>
-            <Label>Raw Response</Label>
-            <details className='group'>
-              <summary className='text-muted-foreground hover:text-foreground cursor-pointer text-sm'>
-                <Info className='mr-1 inline h-4 w-4' />
-                Show detailed response data
-              </summary>
-              <pre className='bg-muted mt-2 max-h-60 overflow-auto rounded-md p-4 text-xs'>
-                {JSON.stringify(response, null, 2)}
-              </pre>
-            </details>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/ui/components/ModelSelector.tsx b/ui/components/ModelSelector.tsx
deleted file mode 100644
index 2a5f68b1..00000000
--- a/ui/components/ModelSelector.tsx
+++ /dev/null
@@ -1,1464 +0,0 @@
-'use client';
-
-import React, { useState, useMemo } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { type Model, type GroupSettings } from '@/lib/api/schemas/models';
-import {
-  AdminService,
-  type AdminModelGroup,
-  type AdminModel,
-} from '@/lib/api/services/admin';
-type ModelGroup = AdminModelGroup;
-import { AddProviderModelDialog } from '@/components/AddProviderModelDialog';
-import { EditGroupForm } from '@/components/EditGroupForm';
-import { CollectModelsDialog } from '@/components/CollectModelsDialog';
-import { formatCost } from '@/lib/services/costValidation';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from '@/components/ui/dropdown-menu';
-import {
-  Cpu,
-  Zap,
-  Edit3,
-  Users,
-  MoreVertical,
-  Key,
-  Globe,
-  RefreshCw,
-  Trash2,
-  AlertTriangle,
-  CheckSquare,
-  Square,
-  Ban,
-  CheckCircle,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { cn } from '@/lib/utils';
-import {
-  sortModels,
-  groupAndSortModelsByProvider,
-} from '@/lib/utils/modelSort';
-
-interface ModelSelectorProps {
-  filterProvider?: string;
-  groupData?: ModelGroup;
-  showProviderActions?: boolean;
-  filteredModels?: Model[];
-  showDeleteAllButton?: boolean;
-}
-
-export function ModelSelector({
-  filterProvider,
-  groupData,
-  filteredModels: propFilteredModels,
-  showDeleteAllButton = false,
-}: ModelSelectorProps) {
-  const [selectedModelId, setSelectedModelId] = useState<string>('');
-  const [, setHoveredModelId] = useState<string | null>(null);
-  const [editingGroup, setEditingGroup] = useState<{
-    provider: string;
-    models: Model[];
-    groupData: ModelGroup;
-  } | null>(null);
-  const [isCollectDialogOpen, setIsCollectDialogOpen] = useState(false);
-  const [modelDialogState, setModelDialogState] = useState<{
-    isOpen: boolean;
-    providerId: number | null;
-    mode: 'create' | 'edit' | 'override';
-    initialData?: AdminModel | null;
-  }>({
-    isOpen: false,
-    providerId: null,
-    mode: 'create',
-    initialData: null,
-  });
-
-  // Bulk selection state
-  const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set());
-  const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
-  const [deleteAllDialogOpen, setDeleteAllDialogOpen] = useState(false);
-  const [
-    bulkApplyGroupSettingsDialogOpen,
-    setBulkApplyGroupSettingsDialogOpen,
-  ] = useState(false);
-
-  // Search and filter state
-  const [filteredModels] = useState<Model[]>([]);
-
-  const queryClient = useQueryClient();
-
-  // Fetch models and groups
-  const {
-    data: modelsData,
-    isLoading: isLoadingModels,
-    error: modelsError,
-    refetch: refetchModels,
-  } = useQuery({
-    queryKey: ['models-with-providers'],
-    queryFn: () => AdminService.getModelsWithProviders(),
-    refetchOnWindowFocus: false,
-  });
-
-  const { models = [], groups = [] } = modelsData || {};
-
-  // Filter models by provider if specified
-  const providerFilteredModels = useMemo(() => {
-    if (!filterProvider) return models;
-    return models.filter((model) => model.provider === filterProvider);
-  }, [models, filterProvider]);
-
-  // Bulk deletion mutations
-  const bulkDeleteMutation = useMutation({
-    mutationFn: async (modelIds: string[]) => {
-      const selectedModelsList = models.filter((m) => modelIds.includes(m.id));
-      const modelsByProvider = selectedModelsList.reduce<
-        Record<string, Model[]>
-      >((acc, model) => {
-        const providerId = model.provider_id || 'unknown';
-        if (!acc[providerId]) {
-          acc[providerId] = [];
-        }
-        acc[providerId].push(model);
-        return acc;
-      }, {});
-
-      let totalDeleted = 0;
-      for (const [providerId, providerModels] of Object.entries(
-        modelsByProvider
-      )) {
-        if (providerId === 'unknown') {
-          continue;
-        }
-        const modelFullNames = providerModels.map((m) => m.id);
-        const result = await AdminService.deleteModels(
-          modelFullNames,
-          providerId
-        );
-        totalDeleted += result.deleted_count;
-      }
-
-      return { deleted_count: totalDeleted, message: 'Models deleted' };
-    },
-    onSuccess: (data) => {
-      toast.success(
-        `Successfully deleted ${data.deleted_count} model overrides`
-      );
-      setSelectedModels(new Set());
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(`Failed to delete model overrides: ${error.message}`);
-    },
-  });
-
-  // Bulk soft deletion mutations (disable models)
-  const bulkSoftDeleteMutation = useMutation({
-    mutationFn: async (modelIds: string[]) => {
-      const selectedModelsList = models.filter((m) => modelIds.includes(m.id));
-      const modelsByProvider = selectedModelsList.reduce<
-        Record<string, Model[]>
-      >((acc, model) => {
-        const providerId = model.provider_id || 'unknown';
-        if (!acc[providerId]) {
-          acc[providerId] = [];
-        }
-        acc[providerId].push(model);
-        return acc;
-      }, {});
-
-      let totalDisabled = 0;
-      for (const [providerId, providerModels] of Object.entries(
-        modelsByProvider
-      )) {
-        if (providerId === 'unknown') {
-          continue;
-        }
-
-        for (const model of providerModels) {
-          const providerIdNum = parseInt(providerId);
-          try {
-            const existingModel = await AdminService.getProviderModel(
-              providerIdNum,
-              model.id
-            );
-            await AdminService.updateProviderModel(providerIdNum, model.id, {
-              ...existingModel,
-              enabled: false,
-            });
-            totalDisabled++;
-          } catch (fetchError: unknown) {
-            const error = fetchError as { message?: string; status?: number };
-            if (error.message?.includes('404') || error.status === 404) {
-              const newOverride = {
-                id: model.id,
-                name: model.name,
-                description: model.description || '',
-                created: Math.floor(Date.now() / 1000),
-                context_length: model.contextLength || 4096,
-                architecture: {
-                  modality: model.modelType || 'text',
-                  input_modalities: [model.modelType || 'text'],
-                  output_modalities: [model.modelType || 'text'],
-                  tokenizer: '',
-                  instruct_type: null,
-                },
-                pricing: {
-                  prompt: model.input_cost,
-                  completion: model.output_cost,
-                  request: 0,
-                  image: 0,
-                  web_search: 0,
-                  internal_reasoning: 0,
-                },
-                per_request_limits: null,
-                top_provider: null,
-                upstream_provider_id: providerIdNum,
-                enabled: false,
-              };
-              await AdminService.createProviderModel(
-                providerIdNum,
-                newOverride
-              );
-              totalDisabled++;
-            }
-          }
-        }
-      }
-
-      return { deleted_count: totalDisabled, message: 'Models disabled' };
-    },
-    onSuccess: (data) => {
-      toast.success(`Successfully disabled ${data.deleted_count} models`);
-      setSelectedModels(new Set());
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(`Failed to disable models: ${error.message}`);
-    },
-  });
-
-  // Bulk apply group settings mutation
-  const bulkApplyGroupSettingsMutation = useMutation({
-    mutationFn: async (modelIds: string[]) => {
-      if (!groupData) throw new Error('No group data available');
-
-      const updates: { api_key?: string; url?: string } = {};
-
-      // Set api_key to empty string to remove individual API keys (will use group key)
-      updates.api_key = '';
-
-      // Use group URL if available, otherwise use default
-      if (groupData.group_url) {
-        updates.url = groupData.group_url;
-      }
-
-      return AdminService.bulkUpdateModels(modelIds, updates);
-    },
-    onSuccess: (data) => {
-      toast.success(
-        `Successfully applied group settings to ${data.updated_count} models`
-      );
-      if (data.errors.length > 0) {
-        toast.warning(`${data.errors.length} models had errors during update`);
-        console.warn('Bulk update errors:', data.errors);
-      }
-      setSelectedModels(new Set());
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(`Failed to apply group settings: ${error.message}`);
-    },
-  });
-
-  const deleteAllMutation = useMutation({
-    mutationFn: () => AdminService.deleteAllModels(),
-    onSuccess: (data) => {
-      toast.success(
-        `Successfully permanently deleted ${data.deleted_count} models`
-      );
-      setSelectedModels(new Set());
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(`Failed to permanently delete all models: ${error.message}`);
-    },
-  });
-
-  const deleteByProviderMutation = useMutation({
-    mutationFn: (providerId: string) =>
-      AdminService.deleteModelsByProvider(providerId),
-    onSuccess: (data) => {
-      toast.success(
-        `Successfully permanently deleted ${data.deleted_count} models from provider`
-      );
-      setSelectedModels(new Set());
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(
-        `Failed to permanently delete provider models: ${error.message}`
-      );
-    },
-  });
-
-  // Restore model mutation (enable model)
-  const restoreMutation = useMutation({
-    mutationFn: async (modelId: string) => {
-      const model = models.find((m) => m.id === modelId);
-      if (!model) {
-        throw new Error('Model not found');
-      }
-
-      if (!model.provider_id) {
-        throw new Error('Provider ID not available for this model');
-      }
-
-      const providerId = parseInt(model.provider_id);
-      const existingModel = await AdminService.getProviderModel(
-        providerId,
-        model.id
-      );
-
-      await AdminService.updateProviderModel(providerId, model.id, {
-        ...existingModel,
-        enabled: true,
-      });
-
-      return { restored_count: 1 };
-    },
-    onSuccess: () => {
-      toast.success('Model enabled successfully');
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(`Failed to enable model: ${error.message}`);
-    },
-  });
-
-  // Bulk restore mutation (enable models)
-  const bulkRestoreMutation = useMutation({
-    mutationFn: async (modelIds: string[]) => {
-      const selectedModelsList = models.filter((m) => modelIds.includes(m.id));
-      const modelsByProvider = selectedModelsList.reduce<
-        Record<string, Model[]>
-      >((acc, model) => {
-        const providerId = model.provider_id || 'unknown';
-        if (!acc[providerId]) {
-          acc[providerId] = [];
-        }
-        acc[providerId].push(model);
-        return acc;
-      }, {});
-
-      let totalEnabled = 0;
-      for (const [providerId, providerModels] of Object.entries(
-        modelsByProvider
-      )) {
-        if (providerId === 'unknown') {
-          continue;
-        }
-
-        for (const model of providerModels) {
-          const providerIdNum = parseInt(providerId);
-          try {
-            const existingModel = await AdminService.getProviderModel(
-              providerIdNum,
-              model.id
-            );
-            await AdminService.updateProviderModel(providerIdNum, model.id, {
-              ...existingModel,
-              enabled: true,
-            });
-            totalEnabled++;
-          } catch (error) {
-            console.error(`Failed to enable model ${model.full_name}:`, error);
-          }
-        }
-      }
-
-      return { restored_count: totalEnabled, message: 'Models enabled' };
-    },
-    onSuccess: (data) => {
-      toast.success(`Successfully enabled ${data.restored_count} models`);
-      setSelectedModels(new Set());
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    },
-    onError: (error) => {
-      toast.error(`Failed to enable models: ${error.message}`);
-    },
-  });
-
-  // Group models by provider for better organization (only if not filtering)
-  const groupedModels = useMemo(() => {
-    const modelsToGroup =
-      propFilteredModels && propFilteredModels.length > 0
-        ? propFilteredModels
-        : filteredModels.length > 0
-          ? filteredModels
-          : providerFilteredModels;
-
-    if (filterProvider) {
-      const sortedModels = sortModels(modelsToGroup);
-      return { [filterProvider]: sortedModels };
-    }
-
-    if (!modelsToGroup) return {};
-
-    return groupAndSortModelsByProvider(modelsToGroup);
-  }, [
-    providerFilteredModels,
-    filteredModels,
-    propFilteredModels,
-    filterProvider,
-  ]);
-
-  // Create a map of provider names to group data
-  const groupDataMap = useMemo(() => {
-    return new Map(groups.map((group) => [group.provider, group]));
-  }, [groups]);
-
-  // Group settings for compatibility
-  const groupSettings = useMemo(() => {
-    const settings: Record<
-      string,
-      { group_api_key?: string; group_url?: string }
-    > = {};
-    groups.forEach((group) => {
-      settings[group.provider] = {
-        group_api_key: group.group_api_key,
-        group_url: group.group_url,
-      };
-    });
-    return settings;
-  }, [groups]);
-
-  // Utility function to get effective API key for a model
-  const getEffectiveApiKey = (model: Model): string | undefined => {
-    if (model.api_key) {
-      return model.api_key; // Individual key takes precedence
-    }
-    return groupSettings[model.provider]?.group_api_key; // Fallback to group key
-  };
-
-  // Utility function to check if model has truly individual settings different from group
-  const hasIndividualSettings = (model: Model): boolean => {
-    const groupData = groupDataMap.get(model.provider);
-
-    // Check if API key is different from group
-    const hasIndividualApiKey = !!(
-      model.api_key &&
-      typeof model.api_key === 'string' &&
-      model.api_key !== groupData?.group_api_key
-    );
-
-    // Check if URL is different from group (excluding relative paths like "/v1/chat/completions")
-    const hasIndividualUrl = !!(
-      model.url &&
-      typeof model.url === 'string' &&
-      !model.url.startsWith('/') &&
-      model.url !== groupData?.group_url
-    );
-
-    return hasIndividualApiKey || hasIndividualUrl;
-  };
-
-  const handleAddModelClick = (providerId: number) => {
-    setModelDialogState({
-      isOpen: true,
-      providerId,
-      mode: 'create',
-      initialData: null,
-    });
-  };
-
-  const handleEditModelClick = (model: Model) => {
-    if (!model.provider_id) {
-      toast.error('Provider ID missing for model');
-      return;
-    }
-    const providerId = parseInt(model.provider_id);
-
-    // Construct AdminModel from Model
-    const adminModel: AdminModel = {
-      id: model.id,
-      name: model.name,
-      description: model.description || '',
-      created: new Date(model.createdAt).getTime() / 1000,
-      context_length: model.contextLength || 0,
-      architecture: {
-        modality: model.modelType,
-        input_modalities: [model.modelType],
-        output_modalities: [model.modelType],
-        tokenizer: '',
-        instruct_type: null,
-      },
-      pricing: {
-        prompt: model.input_cost,
-        completion: model.output_cost,
-        request: model.min_cost_per_request,
-        image: 0,
-        web_search: 0,
-        internal_reasoning: 0,
-      },
-      per_request_limits: null,
-      top_provider: null,
-      upstream_provider_id: providerId,
-      enabled: model.isEnabled,
-      alias_ids: model.alias_ids || null,
-    };
-
-    setModelDialogState({
-      isOpen: true,
-      providerId,
-      mode: 'edit',
-      initialData: adminModel,
-    });
-  };
-
-  const handleOverrideModelClick = (model: Model) => {
-    if (!model.provider_id) {
-      toast.error('Provider ID missing for model');
-      return;
-    }
-    const providerId = parseInt(model.provider_id);
-
-    // Construct AdminModel from Model
-    const adminModel: AdminModel = {
-      id: model.id,
-      name: model.name,
-      description: model.description || '',
-      created: new Date(model.createdAt).getTime() / 1000,
-      context_length: model.contextLength || 0,
-      architecture: {
-        modality: model.modelType,
-        input_modalities: [model.modelType],
-        output_modalities: [model.modelType],
-        tokenizer: '',
-        instruct_type: null,
-      },
-      pricing: {
-        prompt: model.input_cost,
-        completion: model.output_cost,
-        request: model.min_cost_per_request,
-        image: 0,
-        web_search: 0,
-        internal_reasoning: 0,
-      },
-      per_request_limits: null,
-      top_provider: null,
-      upstream_provider_id: providerId,
-      enabled: model.isEnabled,
-      alias_ids: model.alias_ids || null,
-    };
-
-    setModelDialogState({
-      isOpen: true,
-      providerId,
-      mode: 'override',
-      initialData: adminModel,
-    });
-  };
-
-  // Handle model update
-  const handleModelUpdate = async () => {
-    await refetchModels();
-  };
-
-  // Handle group update
-  const handleGroupUpdate = async (
-    oldProvider: string,
-    updatedData: GroupSettings
-  ) => {
-    try {
-      const groupData = groupDataMap.get(oldProvider);
-      if (groupData) {
-        await AdminService.updateModelGroup(groupData.id, {
-          provider: updatedData.provider,
-          group_api_key: updatedData.group_api_key || undefined,
-          group_url: updatedData.group_url || undefined,
-        });
-        await refetchModels();
-        setEditingGroup(null);
-        toast.success('Group updated successfully!');
-      }
-    } catch (error) {
-      console.error('Error updating group:', error);
-      toast.error('Failed to update group. Please try again.');
-    }
-  };
-
-  // Handle model collection success
-  const handleCollectSuccess = async () => {
-    await refetchModels();
-    setIsCollectDialogOpen(false);
-  };
-
-  // Handle provider-specific refresh using group credentials
-  const handleProviderRefresh = async (provider: string) => {
-    const groupData = groupDataMap.get(provider);
-    if (!groupData?.id) {
-      toast.error('No group configuration found for this provider');
-      return;
-    }
-
-    try {
-      const response = await AdminService.refreshModels({
-        provider_id: groupData.id,
-      });
-
-      toast.info(response.message);
-      await refetchModels();
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    } catch (error: unknown) {
-      console.error('Error refreshing provider models:', error);
-      const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error';
-      toast.error(`Failed to refresh ${provider} models: ${errorMessage}`);
-    }
-  };
-
-  const getModelTypeIcon = (modelType: string) => {
-    switch (modelType.toLowerCase()) {
-      case 'text':
-        return <Cpu className='h-4 w-4' />;
-      case 'embedding':
-        return <Zap className='h-4 w-4' />;
-      case 'image':
-        return <Globe className='h-4 w-4' />;
-      default:
-        return <Cpu className='h-4 w-4' />;
-    }
-  };
-
-  const getModelTypeColor = (modelType: string) => {
-    switch (modelType.toLowerCase()) {
-      case 'text':
-        return 'bg-blue-100 text-blue-800';
-      case 'embedding':
-        return 'bg-purple-100 text-purple-800';
-      case 'image':
-        return 'bg-green-100 text-green-800';
-      case 'audio':
-        return 'bg-orange-100 text-orange-800';
-      case 'multimodal':
-        return 'bg-pink-100 text-pink-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  // Bulk selection utilities
-  const toggleModelSelection = (modelId: string) => {
-    const newSelected = new Set(selectedModels);
-    if (newSelected.has(modelId)) {
-      newSelected.delete(modelId);
-    } else {
-      newSelected.add(modelId);
-    }
-    setSelectedModels(newSelected);
-  };
-
-  const selectAllModels = () => {
-    const modelsToSelect =
-      propFilteredModels && propFilteredModels.length > 0
-        ? propFilteredModels
-        : filteredModels.length > 0
-          ? filteredModels
-          : providerFilteredModels;
-    setSelectedModels(new Set(modelsToSelect.map((m) => m.id)));
-  };
-
-  const deselectAllModels = () => {
-    setSelectedModels(new Set());
-  };
-
-  const selectProviderModels = (provider: string) => {
-    const modelsToFilter =
-      propFilteredModels && propFilteredModels.length > 0
-        ? propFilteredModels
-        : filteredModels.length > 0
-          ? filteredModels
-          : providerFilteredModels;
-    const providerModelIds = modelsToFilter
-      .filter((m) => m.provider === provider)
-      .map((m) => m.id);
-    const newSelected = new Set(selectedModels);
-    providerModelIds.forEach((id) => newSelected.add(id));
-    setSelectedModels(newSelected);
-  };
-
-  // Bulk operation handlers
-  const handleBulkDelete = () => {
-    setBulkDeleteDialogOpen(true);
-  };
-
-  const confirmBulkDelete = () => {
-    bulkDeleteMutation.mutate(Array.from(selectedModels));
-    setBulkDeleteDialogOpen(false);
-  };
-
-  const handleBulkSoftDelete = () => {
-    bulkSoftDeleteMutation.mutate(Array.from(selectedModels));
-  };
-
-  const confirmBulkApplyGroupSettings = () => {
-    bulkApplyGroupSettingsMutation.mutate(Array.from(selectedModels));
-    setBulkApplyGroupSettingsDialogOpen(false);
-  };
-
-  const handleDeleteAll = () => {
-    setDeleteAllDialogOpen(true);
-  };
-
-  const confirmDeleteAll = () => {
-    deleteAllMutation.mutate();
-    setDeleteAllDialogOpen(false);
-  };
-
-  const handleDeleteByProvider = (provider: string) => {
-    const group = groupDataMap.get(provider);
-    if (group?.id) {
-      deleteByProviderMutation.mutate(group.id);
-    }
-  };
-
-  // Individual model deletion handler
-  const handleDeleteModel = async (modelId: string) => {
-    const model = models.find((m) => m.id === modelId);
-    if (!model) {
-      toast.error('Model not found');
-      return;
-    }
-
-    if (!model.provider_id) {
-      toast.error('Provider ID not available for this model');
-      return;
-    }
-
-    try {
-      const providerId = parseInt(model.provider_id);
-      await AdminService.deleteProviderModel(providerId, model.full_name);
-      toast.success('Model override deleted successfully');
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    } catch (error: unknown) {
-      const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error';
-      toast.error(`Failed to delete model override: ${errorMessage}`);
-    }
-  };
-
-  // Individual model soft deletion handler (disable model)
-  const handleSoftDeleteModel = async (modelId: string) => {
-    const model = models.find((m) => m.id === modelId);
-    if (!model) {
-      toast.error('Model not found');
-      return;
-    }
-
-    if (!model.provider_id) {
-      toast.error('Provider ID not available for this model');
-      return;
-    }
-
-    try {
-      const providerId = parseInt(model.provider_id);
-
-      try {
-        const existingModel = await AdminService.getProviderModel(
-          providerId,
-          model.id
-        );
-
-        await AdminService.updateProviderModel(providerId, model.full_name, {
-          ...existingModel,
-          enabled: false,
-        });
-        toast.success('Model disabled successfully');
-      } catch (fetchError: unknown) {
-        const error = fetchError as { message?: string; status?: number };
-        if (error.message?.includes('404') || error.status === 404) {
-          const newOverride = {
-            id: model.id,
-            name: model.name,
-            description: model.description || '',
-            created: Math.floor(Date.now() / 1000),
-            context_length: model.contextLength || 4096,
-            architecture: {
-              modality: model.modelType || 'text',
-              input_modalities: [model.modelType || 'text'],
-              output_modalities: [model.modelType || 'text'],
-              tokenizer: '',
-              instruct_type: null,
-            },
-            pricing: {
-              prompt: model.input_cost,
-              completion: model.output_cost,
-              request: 0,
-              image: 0,
-              web_search: 0,
-              internal_reasoning: 0,
-            },
-            per_request_limits: null,
-            top_provider: null,
-            upstream_provider_id: providerId,
-            enabled: false,
-          };
-
-          await AdminService.createProviderModel(providerId, newOverride);
-          toast.success('Model disabled successfully');
-        } else {
-          throw fetchError;
-        }
-      }
-
-      queryClient.invalidateQueries({ queryKey: ['models-with-providers'] });
-      queryClient.invalidateQueries({ queryKey: ['all-provider-models'] });
-      queryClient.invalidateQueries({ queryKey: ['upstream-providers'] });
-    } catch (error: unknown) {
-      const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error';
-      toast.error(`Failed to disable model: ${errorMessage}`);
-    }
-  };
-
-  if (isLoadingModels) {
-    return (
-      <div className='grid gap-4'>
-        <Skeleton className='h-[200px]' />
-        <Skeleton className='h-[200px]' />
-      </div>
-    );
-  }
-
-  if (modelsError) {
-    return (
-      <div className='rounded-lg border border-red-200 bg-red-50 p-4'>
-        <p className='text-sm text-red-800'>
-          Error loading models. Please try again later.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className='grid gap-6'>
-      <div className='flex flex-wrap items-center gap-2'>
-        <Button onClick={selectAllModels}>
-          <CheckSquare className='mr-2 h-4 w-4' />
-          Select All Models
-        </Button>
-        <Button onClick={deselectAllModels}>
-          <Square className='mr-2 h-4 w-4' />
-          Deselect All
-        </Button>
-        {showDeleteAllButton && (
-          <Button
-            onClick={handleDeleteAll}
-            className='text-destructive focus:text-destructive'
-          >
-            <AlertTriangle className='mr-2 h-4 w-4' />
-            Delete All Overrides Permanently
-          </Button>
-        )}
-        {/* Model Management Actions */}
-        {groupData && (
-          <Button
-            onClick={() => handleAddModelClick(parseInt(groupData.id))}
-            className='gap-2'
-            variant='outline'
-          >
-            <CheckSquare className='h-4 w-4' />
-            Add Custom Model
-          </Button>
-        )}
-        {/*
-        <Button
-          onClick={() => setIsCollectDialogOpen(true)}
-          variant='outline'
-          className='gap-2'
-        >
-          Collect Models
-        </Button>
-        */}
-
-        {/* Bulk selection actions */}
-        {selectedModels.size > 0 && (
-          <>
-            <div className='bg-border h-6 w-px' />
-            <span className='text-muted-foreground text-sm'>
-              {selectedModels.size} selected
-            </span>
-
-            {(() => {
-              const modelsToFilter =
-                propFilteredModels && propFilteredModels.length > 0
-                  ? propFilteredModels
-                  : filteredModels.length > 0
-                    ? filteredModels
-                    : providerFilteredModels;
-              const selectedSoftDeletedModels = modelsToFilter.filter(
-                (m) => selectedModels.has(m.id) && m.soft_deleted
-              );
-              return (
-                selectedSoftDeletedModels.length > 0 && (
-                  <Button
-                    onClick={() =>
-                      bulkRestoreMutation.mutate(
-                        selectedSoftDeletedModels.map((m) => m.id)
-                      )
-                    }
-                    variant='outline'
-                    size='sm'
-                    className='gap-2 border-green-300 text-green-600 hover:border-green-400 hover:text-green-700'
-                    disabled={bulkRestoreMutation.isPending}
-                  >
-                    <CheckCircle className='h-4 w-4' />
-                    Enable Selected ({selectedSoftDeletedModels.length})
-                  </Button>
-                )
-              );
-            })()}
-
-            <Button
-              onClick={handleBulkDelete}
-              variant='destructive'
-              size='sm'
-              className='gap-2'
-              disabled={bulkDeleteMutation.isPending}
-            >
-              <Trash2 className='h-4 w-4' />
-              Delete Selected Overrides
-            </Button>
-            <Button
-              onClick={handleBulkSoftDelete}
-              variant='outline'
-              size='sm'
-              className='gap-2 border-orange-300 text-orange-600 hover:border-orange-400 hover:text-orange-700'
-              disabled={bulkSoftDeleteMutation.isPending}
-            >
-              <Ban className='h-4 w-4' />
-              Disable Selected
-            </Button>
-          </>
-        )}
-      </div>
-
-      {/* Provider Groups or Filtered Models */}
-      {Object.entries(groupedModels).map(([provider, providerModels]) => {
-        if (filterProvider && provider !== filterProvider) return null;
-
-        const groupData = groupDataMap.get(provider);
-        const allProviderSelected = providerModels.every((m) =>
-          selectedModels.has(m.id)
-        );
-        const someProviderSelected = providerModels.some((m) =>
-          selectedModels.has(m.id)
-        );
-
-        return (
-          <Card key={provider} className='overflow-hidden'>
-            {!filterProvider && (
-              <CardHeader className='pb-3'>
-                <div className='flex items-center justify-between'>
-                  <div className='flex items-center gap-3'>
-                    <Checkbox
-                      checked={allProviderSelected}
-                      ref={(input) => {
-                        if (input && 'indeterminate' in input) {
-                          (input as HTMLInputElement).indeterminate =
-                            someProviderSelected && !allProviderSelected;
-                        }
-                      }}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          selectProviderModels(provider);
-                        } else {
-                          const providerModelIds = providerModels.map(
-                            (m) => m.id
-                          );
-                          const newSelected = new Set(selectedModels);
-                          providerModelIds.forEach((id) =>
-                            newSelected.delete(id)
-                          );
-                          setSelectedModels(newSelected);
-                        }
-                      }}
-                    />
-                    <div>
-                      <CardTitle className='flex items-center gap-2 text-lg'>
-                        <Users className='h-5 w-5' />
-                        {provider}
-                        <span className='text-muted-foreground text-sm font-normal'>
-                          ({providerModels.length} models)
-                        </span>
-                      </CardTitle>
-                      <CardDescription>
-                        {groupData?.group_url ? (
-                          <span className='flex items-center gap-1'>
-                            <Globe className='h-3 w-3' />
-                            {groupData.group_url}
-                          </span>
-                        ) : (
-                          'Using default endpoint'
-                        )}
-                        {groupData?.group_api_key && (
-                          <span className='ml-2 flex items-center gap-1'>
-                            <Key className='h-3 w-3' />
-                            Group API Key
-                          </span>
-                        )}
-                      </CardDescription>
-                    </div>
-                  </div>
-                  <div className='flex items-center gap-2'>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant='ghost' size='sm'>
-                          <MoreVertical className='h-4 w-4' />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align='end'>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            if (groupData) {
-                              setEditingGroup({
-                                provider,
-                                models: providerModels,
-                                groupData,
-                              });
-                            }
-                          }}
-                        >
-                          <Edit3 className='mr-2 h-4 w-4' />
-                          Edit Group
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => selectProviderModels(provider)}
-                        >
-                          <CheckSquare className='mr-2 h-4 w-4' />
-                          Select All
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleProviderRefresh(provider)}
-                        >
-                          <RefreshCw className='mr-2 h-4 w-4' />
-                          Refresh Models
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => handleDeleteByProvider(provider)}
-                          className='text-destructive focus:text-destructive'
-                        >
-                          <Trash2 className='mr-2 h-4 w-4' />
-                          Delete All Models Permanently
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </div>
-              </CardHeader>
-            )}
-            <CardContent className={filterProvider ? 'pt-6' : 'pt-0'}>
-              <div className='grid gap-3 md:grid-cols-2 lg:grid-cols-3'>
-                {providerModels.map((model) => (
-                  <Card
-                    key={model.id}
-                    className={cn(
-                      'relative cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-md',
-                      selectedModels.has(model.id) && 'ring-primary ring-2',
-                      selectedModelId === model.id && 'ring-2 ring-blue-500',
-                      model.soft_deleted &&
-                        'border-red-200 bg-red-50 opacity-75'
-                    )}
-                    onMouseEnter={() => setHoveredModelId(model.id)}
-                    onMouseLeave={() => setHoveredModelId(null)}
-                  >
-                    <CardHeader className='pb-2'>
-                      <div className='flex items-start gap-2 pr-10'>
-                        <Checkbox
-                          checked={selectedModels.has(model.id)}
-                          onCheckedChange={() => toggleModelSelection(model.id)}
-                          onClick={(e) => e.stopPropagation()}
-                          className='mt-1 flex-shrink-0'
-                        />
-                        <div className='flex w-[calc(100%-3rem)] items-start gap-2 overflow-hidden'>
-                          <div className='mt-1 flex-shrink-0'>
-                            {getModelTypeIcon(model.modelType)}
-                          </div>
-                          <div className='w-full overflow-hidden'>
-                            <h3
-                              className={cn(
-                                'overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap',
-                                model.soft_deleted &&
-                                  'text-red-600 line-through'
-                              )}
-                            >
-                              {model.name}
-                            </h3>
-                            {model.full_name !== model.name && (
-                              <p className='text-muted-foreground overflow-hidden text-xs text-ellipsis whitespace-nowrap'>
-                                {model.full_name}
-                              </p>
-                            )}
-                          </div>
-                        </div>
-                        <div className='absolute top-3 right-2'>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant='ghost'
-                                size='sm'
-                                onClick={(e) => e.stopPropagation()}
-                                className='hover:bg-muted/50 dark:hover:bg-muted/80 h-8 w-8 p-0'
-                              >
-                                <MoreVertical className='text-muted-foreground hover:text-foreground h-4 w-4' />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align='end'>
-                              {model.api_key_type !== 'remote' && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleEditModelClick(model);
-                                  }}
-                                >
-                                  <Edit3 className='mr-2 h-4 w-4' />
-                                  Edit Model
-                                </DropdownMenuItem>
-                              )}
-                              {model.api_key_type === 'remote' && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleOverrideModelClick(model);
-                                  }}
-                                >
-                                  <Edit3 className='mr-2 h-4 w-4' />
-                                  Override
-                                </DropdownMenuItem>
-                              )}
-                              <DropdownMenuSeparator />
-                              {model.soft_deleted ? (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    restoreMutation.mutate(model.id);
-                                  }}
-                                  className='text-green-600 focus:text-green-700'
-                                >
-                                  <CheckCircle className='mr-2 h-4 w-4' />
-                                  Enable Model
-                                </DropdownMenuItem>
-                              ) : (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleSoftDeleteModel(model.id);
-                                  }}
-                                  className='text-orange-600 focus:text-orange-700'
-                                >
-                                  <Ban className='mr-2 h-4 w-4' />
-                                  Disable Model
-                                </DropdownMenuItem>
-                              )}
-                              <DropdownMenuItem
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleDeleteModel(model.id);
-                                }}
-                                className='text-destructive focus:text-destructive'
-                              >
-                                <Trash2 className='mr-2 h-4 w-4' />
-                                Delete
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                      </div>
-                    </CardHeader>
-                    <CardContent
-                      className='space-y-2 pt-0'
-                      onClick={() => setSelectedModelId(model.id)}
-                    >
-                      <div className='flex flex-wrap gap-1'>
-                        <span
-                          className={cn(
-                            'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
-                            getModelTypeColor(model.modelType)
-                          )}
-                        >
-                          {model.modelType}
-                        </span>
-                        {model.api_key_type === 'remote' && (
-                          <span className='inline-flex items-center rounded-full border border-blue-200 bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800'>
-                            Remote
-                          </span>
-                        )}
-                        {model.api_key_type !== 'remote' && (
-                          <span className='inline-flex items-center rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800'>
-                            Database
-                          </span>
-                        )}
-                        {model.is_free && (
-                          <span className='inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800'>
-                            Free
-                          </span>
-                        )}
-                        {!getEffectiveApiKey(model) && (
-                          <span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
-                            <Key className='mr-1 h-3 w-3' />
-                            No API Key
-                          </span>
-                        )}
-                        {getEffectiveApiKey(model) &&
-                          !hasIndividualSettings(model) && (
-                            <span className='inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800'>
-                              <Users className='mr-1 h-3 w-3' />
-                              Group Key
-                            </span>
-                          )}
-                        {hasIndividualSettings(model) && (
-                          <span className='inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800'>
-                            <Key className='mr-1 h-3 w-3' />
-                            Individual Key
-                          </span>
-                        )}
-                        {model.soft_deleted && (
-                          <span className='inline-flex items-center rounded-full border border-red-300 bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
-                            <Trash2 className='mr-1 h-3 w-3' />
-                            Disabled
-                          </span>
-                        )}
-                      </div>
-
-                      {!model.is_free && (
-                        <div className='text-muted-foreground space-y-1 text-xs'>
-                          <div className='flex justify-between'>
-                            <span className='truncate'>Input:</span>
-                            <span className='ml-2 truncate'>
-                              {formatCost(model.input_cost)}/1M tokens
-                            </span>
-                          </div>
-                          <div className='flex justify-between'>
-                            <span className='truncate'>Output:</span>
-                            <span className='ml-2 truncate'>
-                              {formatCost(model.output_cost)}/1M tokens
-                            </span>
-                          </div>
-                        </div>
-                      )}
-
-                      {model.description && (
-                        <p className='text-muted-foreground line-clamp-2 overflow-hidden text-xs break-words text-ellipsis'>
-                          {model.description}
-                        </p>
-                      )}
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
-
-      {/* Forms and Dialogs */}
-      {modelDialogState.providerId && (
-        <AddProviderModelDialog
-          providerId={modelDialogState.providerId}
-          isOpen={modelDialogState.isOpen}
-          onClose={() =>
-            setModelDialogState((prev) => ({ ...prev, isOpen: false }))
-          }
-          onSuccess={handleModelUpdate}
-          initialData={modelDialogState.initialData}
-          mode={modelDialogState.mode}
-        />
-      )}
-
-      {editingGroup && (
-        <EditGroupForm
-          provider={editingGroup.provider}
-          models={editingGroup.models}
-          groupSettings={{
-            group_api_key: editingGroup.groupData.group_api_key,
-            group_url: editingGroup.groupData.group_url,
-          }}
-          onGroupUpdate={handleGroupUpdate}
-          onCancel={() => setEditingGroup(null)}
-          isOpen={!!editingGroup}
-        />
-      )}
-
-      <CollectModelsDialog
-        isOpen={isCollectDialogOpen}
-        onClose={() => setIsCollectDialogOpen(false)}
-        onSuccess={handleCollectSuccess}
-      />
-
-      {/* Confirmation Dialogs */}
-      <AlertDialog
-        open={bulkDeleteDialogOpen}
-        onOpenChange={setBulkDeleteDialogOpen}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Permanently Delete Selected Models
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to permanently delete {selectedModels.size}{' '}
-              selected models? This will completely remove them from the
-              database and cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmBulkDelete}
-              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
-            >
-              Delete Models
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      <AlertDialog
-        open={bulkApplyGroupSettingsDialogOpen}
-        onOpenChange={setBulkApplyGroupSettingsDialogOpen}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Apply Group Settings to{' '}
-              {selectedModels.size === filteredModels.length && filterProvider
-                ? `All Models in ${filterProvider}`
-                : 'Selected Models'}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {selectedModels.size === filteredModels.length &&
-              filterProvider ? (
-                <div>
-                  <p>
-                    Are you sure you want to force ALL {selectedModels.size}{' '}
-                    models in the <strong>{filterProvider}</strong> group to use
-                    group settings?
-                  </p>
-                  <p className='mt-2 text-sm text-amber-600'>
-                    <strong>
-                      ⚠️ This will override individual model configurations:
-                    </strong>
-                  </p>
-                </div>
-              ) : (
-                <p>
-                  Are you sure you want to apply the group settings to{' '}
-                  {selectedModels.size} selected models?
-                </p>
-              )}
-              <ul className='mt-2 list-inside list-disc space-y-1 text-sm'>
-                <li>
-                  Remove individual API keys (models will use the group API key)
-                </li>
-                {groupData?.group_url && (
-                  <li>
-                    Set the URL to:{' '}
-                    <code className='rounded bg-gray-100 px-1'>
-                      {groupData.group_url}
-                    </code>
-                  </li>
-                )}
-                <li>Force models to use group configurations</li>
-                {selectedModels.size === filteredModels.length &&
-                  filterProvider && (
-                    <li className='font-medium text-amber-600'>
-                      This will affect ALL models in this provider group
-                    </li>
-                  )}
-              </ul>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmBulkApplyGroupSettings}
-              className='bg-blue-600 text-white hover:bg-blue-700'
-            >
-              {selectedModels.size === filteredModels.length && filterProvider
-                ? `Force All ${selectedModels.size} Models`
-                : 'Apply Group Settings'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      <AlertDialog
-        open={deleteAllDialogOpen}
-        onOpenChange={setDeleteAllDialogOpen}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Permanently Delete All Models</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to permanently delete ALL models? This will
-              completely remove all {models.length} models from the database.
-              This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDeleteAll}
-              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
-            >
-              Delete All Models
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-}
diff --git a/ui/components/AddModelForm.tsx b/ui/components/add-model-form.tsx
similarity index 98%
rename from ui/components/AddModelForm.tsx
rename to ui/components/add-model-form.tsx
index 005fdaab..fc06fd36 100644
--- a/ui/components/AddModelForm.tsx
+++ b/ui/components/add-model-form.tsx
@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { ManualModelSchema, type ManualModel } from '@/lib/api/schemas/models';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -45,9 +46,10 @@ export function AddModelForm({
   isOpen,
 }: AddModelFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  type ManualModelInput = z.input<typeof ManualModelSchema>;
 
-  const form = useForm<ManualModel>({
-    resolver: zodResolver(ManualModelSchema) as any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  const form = useForm<ManualModelInput, unknown, ManualModel>({
+    resolver: zodResolver(ManualModelSchema),
     defaultValues: {
       name: '',
       full_name: '',
diff --git a/ui/components/AddProviderModelDialog.tsx b/ui/components/add-provider-model-dialog.tsx
similarity index 100%
rename from ui/components/AddProviderModelDialog.tsx
rename to ui/components/add-provider-model-dialog.tsx
diff --git a/ui/components/api-endpoint-form.tsx b/ui/components/api-endpoint-form.tsx
new file mode 100644
index 00000000..146c6f1d
--- /dev/null
+++ b/ui/components/api-endpoint-form.tsx
@@ -0,0 +1,648 @@
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Image as ImageIcon, List, Mic, MicOff, Volume2 } from 'lucide-react';
+import type { EndpointType } from '@/components/api-endpoint-types';
+
+interface ApiEndpointFormProps {
+  selectedEndpoint: EndpointType;
+  maxTokens: number;
+  setMaxTokens: Dispatch<SetStateAction<number>>;
+  temperature: number;
+  setTemperature: Dispatch<SetStateAction<number>>;
+  systemMessage: string;
+  setSystemMessage: Dispatch<SetStateAction<string>>;
+  userMessage: string;
+  setUserMessage: Dispatch<SetStateAction<string>>;
+
+  visionMaxTokens: number;
+  setVisionMaxTokens: Dispatch<SetStateAction<number>>;
+  visionTemperature: number;
+  setVisionTemperature: Dispatch<SetStateAction<number>>;
+  visionSystemMessage: string;
+  setVisionSystemMessage: Dispatch<SetStateAction<string>>;
+  visionUserMessage: string;
+  setVisionUserMessage: Dispatch<SetStateAction<string>>;
+  imageDetail: 'low' | 'high' | 'auto';
+  setImageDetail: Dispatch<SetStateAction<'low' | 'high' | 'auto'>>;
+  selectedImage: File | null;
+  imagePreviewUrl: string | null;
+  onImageUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  onRemoveImage: () => void;
+
+  embeddingInput: string;
+  setEmbeddingInput: Dispatch<SetStateAction<string>>;
+  encodingFormat: 'float' | 'base64';
+  setEncodingFormat: Dispatch<SetStateAction<'float' | 'base64'>>;
+
+  imageCount: number;
+  setImageCount: Dispatch<SetStateAction<number>>;
+  imageSize: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792';
+  setImageSize: Dispatch<
+    SetStateAction<'256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'>
+  >;
+  imageQuality: 'standard' | 'hd';
+  setImageQuality: Dispatch<SetStateAction<'standard' | 'hd'>>;
+  imageStyle: 'vivid' | 'natural';
+  setImageStyle: Dispatch<SetStateAction<'vivid' | 'natural'>>;
+  imagePrompt: string;
+  setImagePrompt: Dispatch<SetStateAction<string>>;
+
+  speechVoice: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
+  setSpeechVoice: Dispatch<
+    SetStateAction<'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer'>
+  >;
+  speechFormat: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm';
+  setSpeechFormat: Dispatch<
+    SetStateAction<'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'>
+  >;
+  speechSpeed: number;
+  setSpeechSpeed: Dispatch<SetStateAction<number>>;
+  speechInput: string;
+  setSpeechInput: Dispatch<SetStateAction<string>>;
+
+  audioTranscriptionPrompt: string;
+  setAudioTranscriptionPrompt: Dispatch<SetStateAction<string>>;
+  audioTemperature: number;
+  setAudioTemperature: Dispatch<SetStateAction<number>>;
+  audioLanguage: string;
+  setAudioLanguage: Dispatch<SetStateAction<string>>;
+  audioResponseFormat: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt';
+  setAudioResponseFormat: Dispatch<
+    SetStateAction<'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'>
+  >;
+  isRecording: boolean;
+  onStartRecording: () => void;
+  onStopRecording: () => void;
+  onAudioUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  recordedAudio: File | null;
+  recordingUrl: string | null;
+  onRemoveAudio: () => void;
+}
+
+export function ApiEndpointForm({
+  selectedEndpoint,
+  maxTokens,
+  setMaxTokens,
+  temperature,
+  setTemperature,
+  systemMessage,
+  setSystemMessage,
+  userMessage,
+  setUserMessage,
+  visionMaxTokens,
+  setVisionMaxTokens,
+  visionTemperature,
+  setVisionTemperature,
+  visionSystemMessage,
+  setVisionSystemMessage,
+  visionUserMessage,
+  setVisionUserMessage,
+  imageDetail,
+  setImageDetail,
+  selectedImage,
+  imagePreviewUrl,
+  onImageUpload,
+  onRemoveImage,
+  embeddingInput,
+  setEmbeddingInput,
+  encodingFormat,
+  setEncodingFormat,
+  imageCount,
+  setImageCount,
+  imageSize,
+  setImageSize,
+  imageQuality,
+  setImageQuality,
+  imageStyle,
+  setImageStyle,
+  imagePrompt,
+  setImagePrompt,
+  speechVoice,
+  setSpeechVoice,
+  speechFormat,
+  setSpeechFormat,
+  speechSpeed,
+  setSpeechSpeed,
+  speechInput,
+  setSpeechInput,
+  audioTranscriptionPrompt,
+  setAudioTranscriptionPrompt,
+  audioTemperature,
+  setAudioTemperature,
+  audioLanguage,
+  setAudioLanguage,
+  audioResponseFormat,
+  setAudioResponseFormat,
+  isRecording,
+  onStartRecording,
+  onStopRecording,
+  onAudioUpload,
+  recordedAudio,
+  recordingUrl,
+  onRemoveAudio,
+}: ApiEndpointFormProps) {
+  switch (selectedEndpoint) {
+    case 'chat-completions':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label htmlFor='max-tokens'>Max Tokens</Label>
+              <Input
+                id='max-tokens'
+                type='number'
+                min={1}
+                max={4000}
+                value={maxTokens}
+                onChange={(event) => setMaxTokens(parseInt(event.target.value) || 150)}
+              />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='temperature'>Temperature</Label>
+              <Input
+                id='temperature'
+                type='number'
+                min={0}
+                max={2}
+                step={0.1}
+                value={temperature}
+                onChange={(event) =>
+                  setTemperature(parseFloat(event.target.value) || 0.7)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='system-message'>System Message (Optional)</Label>
+            <Textarea
+              id='system-message'
+              placeholder='Enter system message...'
+              value={systemMessage}
+              onChange={(event) => setSystemMessage(event.target.value)}
+              rows={2}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='user-message'>Test Message</Label>
+            <Textarea
+              id='user-message'
+              placeholder='Enter your test message...'
+              value={userMessage}
+              onChange={(event) => setUserMessage(event.target.value)}
+              rows={3}
+            />
+          </div>
+        </div>
+      );
+
+    case 'vision-chat':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label htmlFor='vision-max-tokens'>Max Tokens</Label>
+              <Input
+                id='vision-max-tokens'
+                type='number'
+                min={1}
+                max={4000}
+                value={visionMaxTokens}
+                onChange={(event) =>
+                  setVisionMaxTokens(parseInt(event.target.value) || 300)
+                }
+              />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='vision-temperature'>Temperature</Label>
+              <Input
+                id='vision-temperature'
+                type='number'
+                min={0}
+                max={2}
+                step={0.1}
+                value={visionTemperature}
+                onChange={(event) =>
+                  setVisionTemperature(parseFloat(event.target.value) || 0.7)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='vision-system-message'>System Message (Optional)</Label>
+            <Textarea
+              id='vision-system-message'
+              placeholder='Enter system message...'
+              value={visionSystemMessage}
+              onChange={(event) => setVisionSystemMessage(event.target.value)}
+              rows={2}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='vision-user-message'>Test Message</Label>
+            <Textarea
+              id='vision-user-message'
+              placeholder='Enter your test message...'
+              value={visionUserMessage}
+              onChange={(event) => setVisionUserMessage(event.target.value)}
+              rows={3}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-detail'>Image Detail</Label>
+            <Select
+              value={imageDetail}
+              onValueChange={(value: 'low' | 'high' | 'auto') => setImageDetail(value)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='low'>Low</SelectItem>
+                <SelectItem value='high'>High</SelectItem>
+                <SelectItem value='auto'>Auto</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-upload'>Upload Image (Optional)</Label>
+            <Input type='file' accept='image/*' onChange={onImageUpload} className='cursor-pointer' />
+            {selectedImage && (
+              <div className='mt-2 flex flex-wrap items-center gap-2'>
+                <ImageIcon className='text-muted-foreground h-5 w-5' />
+                <span className='text-muted-foreground text-sm'>
+                  Selected image: {selectedImage.name}
+                </span>
+                <Button
+                  variant='outline'
+                  size='sm'
+                  onClick={onRemoveImage}
+                  className='ml-0 sm:ml-auto'
+                >
+                  Remove
+                </Button>
+              </div>
+            )}
+            {imagePreviewUrl && (
+              <div className='relative mt-2 aspect-square w-32 overflow-hidden rounded-md border'>
+                <Image src={imagePreviewUrl} alt='Image preview' fill className='object-cover' />
+              </div>
+            )}
+          </div>
+        </div>
+      );
+
+    case 'embeddings':
+      return (
+        <div className='space-y-4'>
+          <div className='space-y-2'>
+            <Label htmlFor='encoding-format'>Encoding Format</Label>
+            <Select
+              value={encodingFormat}
+              onValueChange={(value: 'float' | 'base64') => setEncodingFormat(value)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='float'>Float</SelectItem>
+                <SelectItem value='base64'>Base64</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='embedding-input'>Text Input</Label>
+            <Textarea
+              id='embedding-input'
+              placeholder='Enter text to generate embeddings for...'
+              value={embeddingInput}
+              onChange={(event) => setEmbeddingInput(event.target.value)}
+              rows={4}
+            />
+          </div>
+        </div>
+      );
+
+    case 'images':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+            <div className='space-y-2'>
+              <Label htmlFor='image-count'>Number of Images</Label>
+              <Input
+                id='image-count'
+                type='number'
+                min={1}
+                max={10}
+                value={imageCount}
+                onChange={(event) => setImageCount(parseInt(event.target.value) || 1)}
+              />
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='image-size'>Size</Label>
+              <Select
+                value={imageSize}
+                onValueChange={(
+                  value:
+                    | '256x256'
+                    | '512x512'
+                    | '1024x1024'
+                    | '1792x1024'
+                    | '1024x1792'
+                ) => setImageSize(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='256x256'>256x256</SelectItem>
+                  <SelectItem value='512x512'>512x512</SelectItem>
+                  <SelectItem value='1024x1024'>1024x1024</SelectItem>
+                  <SelectItem value='1792x1024'>1792x1024</SelectItem>
+                  <SelectItem value='1024x1792'>1024x1792</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='image-quality'>Quality</Label>
+              <Select
+                value={imageQuality}
+                onValueChange={(value: 'standard' | 'hd') => setImageQuality(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='standard'>Standard</SelectItem>
+                  <SelectItem value='hd'>HD</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-style'>Style</Label>
+            <Select
+              value={imageStyle}
+              onValueChange={(value: 'vivid' | 'natural') => setImageStyle(value)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='vivid'>Vivid</SelectItem>
+                <SelectItem value='natural'>Natural</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-prompt'>Image Prompt</Label>
+            <Textarea
+              id='image-prompt'
+              placeholder='Describe the image you want to generate...'
+              value={imagePrompt}
+              onChange={(event) => setImagePrompt(event.target.value)}
+              rows={3}
+            />
+          </div>
+        </div>
+      );
+
+    case 'audio-speech':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+            <div className='space-y-2'>
+              <Label htmlFor='speech-voice'>Voice</Label>
+              <Select
+                value={speechVoice}
+                onValueChange={(
+                  value: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer'
+                ) => setSpeechVoice(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='alloy'>Alloy</SelectItem>
+                  <SelectItem value='echo'>Echo</SelectItem>
+                  <SelectItem value='fable'>Fable</SelectItem>
+                  <SelectItem value='onyx'>Onyx</SelectItem>
+                  <SelectItem value='nova'>Nova</SelectItem>
+                  <SelectItem value='shimmer'>Shimmer</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='speech-format'>Response Format</Label>
+              <Select
+                value={speechFormat}
+                onValueChange={(
+                  value: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'
+                ) => setSpeechFormat(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='mp3'>MP3</SelectItem>
+                  <SelectItem value='opus'>Opus</SelectItem>
+                  <SelectItem value='aac'>AAC</SelectItem>
+                  <SelectItem value='flac'>FLAC</SelectItem>
+                  <SelectItem value='wav'>WAV</SelectItem>
+                  <SelectItem value='pcm'>PCM</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='speech-speed'>Speed</Label>
+              <Input
+                id='speech-speed'
+                type='number'
+                min={0.25}
+                max={4.0}
+                step={0.25}
+                value={speechSpeed}
+                onChange={(event) => setSpeechSpeed(parseFloat(event.target.value) || 1.0)}
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='speech-input'>Text to Synthesize</Label>
+            <Textarea
+              id='speech-input'
+              placeholder='Enter text to convert to speech...'
+              value={speechInput}
+              onChange={(event) => setSpeechInput(event.target.value)}
+              rows={4}
+            />
+          </div>
+        </div>
+      );
+
+    case 'audio-transcription':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label htmlFor='audio-transcription-prompt'>Prompt (Optional)</Label>
+              <Textarea
+                id='audio-transcription-prompt'
+                placeholder='Enter a prompt for the transcription...'
+                value={audioTranscriptionPrompt}
+                onChange={(event) => setAudioTranscriptionPrompt(event.target.value)}
+                rows={2}
+              />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='audio-transcription-temperature'>Temperature</Label>
+              <Input
+                id='audio-transcription-temperature'
+                type='number'
+                min={0}
+                max={1}
+                step={0.1}
+                value={audioTemperature}
+                onChange={(event) =>
+                  setAudioTemperature(parseFloat(event.target.value) || 0.0)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='audio-transcription-language'>Language (Optional)</Label>
+            <Input
+              id='audio-transcription-language'
+              placeholder='e.g., en-US, fr-FR'
+              value={audioLanguage}
+              onChange={(event) => setAudioLanguage(event.target.value)}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='audio-transcription-response-format'>Response Format</Label>
+            <Select
+              value={audioResponseFormat}
+              onValueChange={(
+                value: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'
+              ) => setAudioResponseFormat(value)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='json'>JSON</SelectItem>
+                <SelectItem value='text'>Text</SelectItem>
+                <SelectItem value='srt'>SRT</SelectItem>
+                <SelectItem value='verbose_json'>Verbose JSON</SelectItem>
+                <SelectItem value='vtt'>VTT</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-4'>
+            <div className='space-y-2'>
+              <Label>Voice Recording</Label>
+              <div className='flex flex-wrap items-center gap-2'>
+                <Button
+                  type='button'
+                  variant={isRecording ? 'destructive' : 'default'}
+                  size='sm'
+                  onClick={isRecording ? onStopRecording : onStartRecording}
+                  className='flex items-center gap-2'
+                >
+                  {isRecording ? (
+                    <>
+                      <MicOff className='h-4 w-4' />
+                      Stop Recording
+                    </>
+                  ) : (
+                    <>
+                      <Mic className='h-4 w-4' />
+                      Start Recording
+                    </>
+                  )}
+                </Button>
+                {isRecording && (
+                  <Badge variant='destructive' className='gap-1.5'>
+                    <span className='h-2 w-2 animate-pulse rounded-full bg-current' />
+                    Recording...
+                  </Badge>
+                )}
+              </div>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='audio-transcription-upload'>Or Upload Audio File</Label>
+              <Input type='file' accept='audio/*' onChange={onAudioUpload} className='cursor-pointer' />
+              {recordedAudio && (
+                <div className='mt-2 flex flex-wrap items-center gap-2'>
+                  <Volume2 className='text-muted-foreground h-5 w-5' />
+                  <span className='text-muted-foreground text-sm'>
+                    Selected audio: {recordedAudio.name}
+                  </span>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    onClick={onRemoveAudio}
+                    className='ml-0 sm:ml-auto'
+                  >
+                    Remove
+                  </Button>
+                </div>
+              )}
+              {recordingUrl && (
+                <div className='bg-muted mt-2 rounded-md p-4'>
+                  <audio controls src={recordingUrl} className='w-full'>
+                    Your browser does not support the audio element.
+                  </audio>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'models':
+      return (
+        <div className='space-y-4'>
+          <Alert>
+            <List className='h-4 w-4' />
+            <AlertDescription>
+              This endpoint lists all available models from the provider. No
+              additional parameters are required.
+            </AlertDescription>
+          </Alert>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}
diff --git a/ui/components/api-endpoint-response.tsx b/ui/components/api-endpoint-response.tsx
new file mode 100644
index 00000000..30e7ff30
--- /dev/null
+++ b/ui/components/api-endpoint-response.tsx
@@ -0,0 +1,290 @@
+import Image from 'next/image';
+import { Label } from '@/components/ui/label';
+
+export interface ChatCompletionResponse {
+  id: string;
+  object: string;
+  created: number;
+  model: string;
+  choices: {
+    index: number;
+    message: {
+      role: string;
+      content: string;
+    };
+    finish_reason: string;
+  }[];
+  usage?: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+}
+
+export interface EmbeddingResponse {
+  object: string;
+  data: {
+    object: string;
+    index: number;
+    embedding: number[];
+  }[];
+  model: string;
+  usage: {
+    prompt_tokens: number;
+    total_tokens: number;
+  };
+}
+
+export interface ImageGenerationResponse {
+  created: number;
+  data: {
+    url: string;
+    revised_prompt?: string;
+  }[];
+}
+
+export interface AudioResponse {
+  type: 'audio';
+  url: string;
+  size: number;
+}
+
+export interface AudioTranscriptionResponse {
+  text: string;
+}
+
+export interface ModelsListResponse {
+  object: string;
+  data: {
+    id: string;
+    object?: string;
+    created?: number;
+  }[];
+}
+
+export type ApiResponse =
+  | ChatCompletionResponse
+  | EmbeddingResponse
+  | ImageGenerationResponse
+  | AudioResponse
+  | AudioTranscriptionResponse
+  | ModelsListResponse;
+
+const isAudioResponse = (response: ApiResponse): response is AudioResponse => {
+  return 'type' in response && response.type === 'audio';
+};
+
+const isChatCompletionResponse = (
+  response: ApiResponse
+): response is ChatCompletionResponse => {
+  return 'choices' in response;
+};
+
+const isEmbeddingResponse = (
+  response: ApiResponse
+): response is EmbeddingResponse => {
+  return (
+    'data' in response &&
+    Array.isArray(response.data) &&
+    response.data.length > 0 &&
+    'embedding' in response.data[0]
+  );
+};
+
+const isImageGenerationResponse = (
+  response: ApiResponse
+): response is ImageGenerationResponse => {
+  return (
+    'data' in response &&
+    Array.isArray(response.data) &&
+    response.data.length > 0 &&
+    'url' in response.data[0]
+  );
+};
+
+const isModelsListResponse = (
+  response: ApiResponse
+): response is ModelsListResponse => {
+  return (
+    'data' in response &&
+    Array.isArray(response.data) &&
+    response.data.length > 0 &&
+    'id' in response.data[0]
+  );
+};
+
+const isAudioTranscriptionResponse = (
+  response: ApiResponse
+): response is AudioTranscriptionResponse => {
+  return 'text' in response;
+};
+
+export function ApiEndpointResponse({ response }: { response: ApiResponse | null }) {
+  if (!response) {
+    return null;
+  }
+
+  if (isAudioResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Generated Audio</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <audio controls src={response.url} className='w-full'>
+              Your browser does not support the audio element.
+            </audio>
+            <p className='text-muted-foreground mt-2 text-sm'>
+              Audio file size: {(response.size / 1024).toFixed(2)} KB
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isAudioTranscriptionResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Transcription Result</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <p className='text-sm whitespace-pre-wrap'>
+              {response.text || 'No transcription result available'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isChatCompletionResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Model Response</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <p className='text-sm whitespace-pre-wrap'>
+              {response.choices?.[0]?.message?.content || 'No content in response'}
+            </p>
+          </div>
+        </div>
+
+        {response.usage && (
+          <div className='space-y-2'>
+            <Label>Usage Statistics</Label>
+            <div className='grid grid-cols-1 gap-2 text-sm sm:grid-cols-3 sm:gap-4'>
+              <div className='bg-muted rounded p-2 text-center'>
+                <div className='font-semibold'>{response.usage.prompt_tokens}</div>
+                <div className='text-muted-foreground'>Prompt Tokens</div>
+              </div>
+              <div className='bg-muted rounded p-2 text-center'>
+                <div className='font-semibold'>{response.usage.completion_tokens}</div>
+                <div className='text-muted-foreground'>Completion Tokens</div>
+              </div>
+              <div className='bg-muted rounded p-2 text-center'>
+                <div className='font-semibold'>{response.usage.total_tokens}</div>
+                <div className='text-muted-foreground'>Total Tokens</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (isEmbeddingResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Embedding Vector</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <p className='text-muted-foreground mb-2 text-sm'>
+              Generated {response.data?.[0]?.embedding?.length || 0} dimensional
+              embedding vector
+            </p>
+            <details className='group'>
+              <summary className='hover:text-foreground cursor-pointer text-sm'>
+                Show first 10 values
+              </summary>
+              <pre className='mt-2 text-xs'>
+                {JSON.stringify(response.data?.[0]?.embedding?.slice(0, 10), null, 2)}
+                ...
+              </pre>
+            </details>
+          </div>
+        </div>
+
+        {response.usage && (
+          <div className='space-y-2'>
+            <Label>Usage Statistics</Label>
+            <div className='bg-muted rounded p-2 text-center text-sm'>
+              <div className='font-semibold'>{response.usage.total_tokens}</div>
+              <div className='text-muted-foreground'>Total Tokens</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (isImageGenerationResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Generated Images</Label>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            {response.data?.map((image, index: number) => (
+              <div key={index} className='space-y-2'>
+                <div className='relative aspect-square w-full'>
+                  <Image
+                    src={image.url}
+                    alt={`Generated image ${index + 1}`}
+                    fill
+                    className='rounded-md border object-cover'
+                    unoptimized={true}
+                  />
+                </div>
+                {image.revised_prompt && (
+                  <p className='text-muted-foreground text-xs'>
+                    Revised prompt: {image.revised_prompt}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isModelsListResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Available Models</Label>
+          <div className='max-h-60 overflow-auto'>
+            <div className='grid gap-2'>
+              {response.data?.map((model) => (
+                <div key={model.id} className='bg-muted rounded-md p-3'>
+                  <div className='font-medium'>{model.id}</div>
+                  {model.object && (
+                    <div className='text-muted-foreground text-sm'>
+                      Type: {model.object}
+                    </div>
+                  )}
+                  {model.created && (
+                    <div className='text-muted-foreground text-sm'>
+                      Created: {new Date(model.created * 1000).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/ui/components/api-endpoint-tester.tsx b/ui/components/api-endpoint-tester.tsx
new file mode 100644
index 00000000..e312bc28
--- /dev/null
+++ b/ui/components/api-endpoint-tester.tsx
@@ -0,0 +1,729 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { type Model } from '@/lib/api/schemas/models';
+import { ModelService } from '@/lib/api/services/models';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Loader2,
+  Send,
+  CheckCircle,
+  XCircle,
+  Info,
+  Key,
+  Globe,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  ApiEndpointResponse,
+  type ApiResponse,
+} from '@/components/api-endpoint-response';
+import { ApiEndpointForm } from '@/components/api-endpoint-form';
+import {
+  API_ENDPOINTS,
+  DEFAULT_REQUESTS,
+  type EndpointType,
+  type ChatCompletionRequest,
+  type EmbeddingRequest,
+  type ImageGenerationRequest,
+  type AudioSpeechRequest,
+  type AudioTranscriptionRequest,
+  type EndpointRequestData,
+} from '@/components/api-endpoint-types';
+
+interface ApiEndpointTesterProps {
+  models: Model[];
+}
+
+export function ApiEndpointTester({ models }: ApiEndpointTesterProps) {
+  const [selectedModelId, setSelectedModelId] = useState<string>('');
+  const [selectedEndpoint, setSelectedEndpoint] =
+    useState<EndpointType>('chat-completions');
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Chat Completions state
+  const [systemMessage, setSystemMessage] = useState(
+    DEFAULT_REQUESTS['chat-completions'].systemMessage
+  );
+  const [userMessage, setUserMessage] = useState(
+    DEFAULT_REQUESTS['chat-completions'].userMessage
+  );
+  const [maxTokens, setMaxTokens] = useState(
+    DEFAULT_REQUESTS['chat-completions'].maxTokens
+  );
+  const [temperature, setTemperature] = useState(
+    DEFAULT_REQUESTS['chat-completions'].temperature
+  );
+
+  // Vision Chat state
+  const [visionSystemMessage, setVisionSystemMessage] = useState(
+    DEFAULT_REQUESTS['vision-chat'].systemMessage
+  );
+  const [visionUserMessage, setVisionUserMessage] = useState(
+    DEFAULT_REQUESTS['vision-chat'].userMessage
+  );
+  const [visionMaxTokens, setVisionMaxTokens] = useState(
+    DEFAULT_REQUESTS['vision-chat'].maxTokens
+  );
+  const [visionTemperature, setVisionTemperature] = useState(
+    DEFAULT_REQUESTS['vision-chat'].temperature
+  );
+  const [imageDetail, setImageDetail] = useState<'low' | 'high' | 'auto'>(
+    DEFAULT_REQUESTS['vision-chat'].imageDetail
+  );
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
+
+  // Voice Recording state
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordedAudio, setRecordedAudio] = useState<File | null>(null);
+  const [recordingUrl, setRecordingUrl] = useState<string | null>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
+    null
+  );
+  const [audioTranscriptionPrompt, setAudioTranscriptionPrompt] = useState(
+    DEFAULT_REQUESTS['audio-transcription'].prompt
+  );
+  const [audioResponseFormat, setAudioResponseFormat] = useState<
+    'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'
+  >(DEFAULT_REQUESTS['audio-transcription'].response_format);
+  const [audioTemperature, setAudioTemperature] = useState(
+    DEFAULT_REQUESTS['audio-transcription'].temperature
+  );
+  const [audioLanguage, setAudioLanguage] = useState(
+    DEFAULT_REQUESTS['audio-transcription'].language
+  );
+
+  // Embeddings state
+  const [embeddingInput, setEmbeddingInput] = useState(
+    DEFAULT_REQUESTS.embeddings.input
+  );
+  const [encodingFormat, setEncodingFormat] = useState<'float' | 'base64'>(
+    DEFAULT_REQUESTS.embeddings.encoding_format
+  );
+
+  // Image Generation state
+  const [imagePrompt, setImagePrompt] = useState(
+    DEFAULT_REQUESTS.images.prompt
+  );
+  const [imageCount, setImageCount] = useState(DEFAULT_REQUESTS.images.n);
+  const [imageSize, setImageSize] = useState<
+    '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'
+  >(DEFAULT_REQUESTS.images.size);
+  const [imageQuality, setImageQuality] = useState<'standard' | 'hd'>(
+    DEFAULT_REQUESTS.images.quality
+  );
+  const [imageStyle, setImageStyle] = useState<'vivid' | 'natural'>(
+    DEFAULT_REQUESTS.images.style
+  );
+
+  // Audio Speech state
+  const [speechInput, setSpeechInput] = useState(
+    DEFAULT_REQUESTS['audio-speech'].input
+  );
+  const [speechVoice, setSpeechVoice] = useState<
+    'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer'
+  >(DEFAULT_REQUESTS['audio-speech'].voice);
+  const [speechFormat, setSpeechFormat] = useState<
+    'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'
+  >(DEFAULT_REQUESTS['audio-speech'].response_format);
+  const [speechSpeed, setSpeechSpeed] = useState(
+    DEFAULT_REQUESTS['audio-speech'].speed
+  );
+
+  // Fetch model groups for API key resolution
+  const { data: groups = [] } = useQuery({
+    queryKey: ['model-groups'],
+    queryFn: () => ModelService.getModelGroups(),
+    refetchOnWindowFocus: false,
+  });
+
+  const selectedModel = models.find((model) => model.id === selectedModelId);
+
+  // Image upload handler
+  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (file.type.startsWith('image/')) {
+        setSelectedImage(file);
+        const previewUrl = URL.createObjectURL(file);
+        setImagePreviewUrl(previewUrl);
+      } else {
+        toast.error('Please select a valid image file');
+      }
+    }
+  };
+
+  // Audio file upload handler
+  const handleAudioUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (file.type.startsWith('audio/')) {
+        setRecordedAudio(file);
+        const audioUrl = URL.createObjectURL(file);
+        setRecordingUrl(audioUrl);
+      } else {
+        toast.error('Please select a valid audio file');
+      }
+    }
+  };
+
+  // Voice recording functions
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream);
+      const chunks: BlobPart[] = [];
+
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunks.push(event.data);
+        }
+      };
+
+      recorder.onstop = () => {
+        const blob = new Blob(chunks, { type: 'audio/webm' });
+        const file = new File([blob], 'recording.webm', { type: 'audio/webm' });
+        setRecordedAudio(file);
+        const audioUrl = URL.createObjectURL(blob);
+        setRecordingUrl(audioUrl);
+
+        // Stop all tracks to release microphone
+        stream.getTracks().forEach((track) => track.stop());
+      };
+
+      recorder.start();
+      setMediaRecorder(recorder);
+      setIsRecording(true);
+      toast.success('Recording started');
+    } catch {
+      toast.error(
+        'Failed to start recording. Please check microphone permissions.'
+      );
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+      setMediaRecorder(null);
+      setIsRecording(false);
+      toast.success('Recording stopped');
+    }
+  };
+
+  // Convert file to base64 for vision API
+  const fileToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  // Get effective API key and endpoint URL for the selected model
+  const getModelCredentials = (model: Model) => {
+    const group = groups.find((g) => g.provider === model.provider);
+
+    // Determine API key (individual takes precedence over group)
+    const apiKey = model.api_key || group?.group_api_key;
+
+    // Determine base endpoint URL
+    let baseUrl = model.url;
+
+    // If model URL is relative and group has a base URL, combine them
+    if (model.url.startsWith('/') && group?.group_url) {
+      baseUrl = `${group.group_url.replace(/\/$/, '')}${model.url}`;
+    }
+
+    // Remove any existing endpoint path to get base URL
+    baseUrl = baseUrl.replace(/\/v1\/.*$/, '').replace(/\/$/, '');
+
+    return {
+      apiKey,
+      baseUrl,
+      group,
+    };
+  };
+
+  const buildEndpointUrl = (baseUrl: string, endpointPath: string) => {
+    return `${baseUrl}${endpointPath}`;
+  };
+
+  const buildRequest = async (): Promise<EndpointRequestData> => {
+    if (!selectedModel) return null;
+
+    switch (selectedEndpoint) {
+      case 'chat-completions':
+        const messages = [];
+        if (systemMessage.trim()) {
+          messages.push({
+            role: 'system' as const,
+            content: systemMessage.trim(),
+          });
+        }
+        messages.push({ role: 'user' as const, content: userMessage.trim() });
+
+        return {
+          model: selectedModel.name,
+          messages,
+          max_tokens: maxTokens,
+          temperature: temperature,
+        } as ChatCompletionRequest;
+
+      case 'vision-chat':
+        if (!selectedImage) {
+          throw new Error('Please select an image for vision analysis');
+        }
+
+        const imageBase64 = await fileToBase64(selectedImage);
+        const visionMessages = [];
+
+        if (visionSystemMessage.trim()) {
+          visionMessages.push({
+            role: 'system' as const,
+            content: visionSystemMessage.trim(),
+          });
+        }
+
+        visionMessages.push({
+          role: 'user' as const,
+          content: [
+            {
+              type: 'text' as const,
+              text: visionUserMessage.trim(),
+            },
+            {
+              type: 'image_url' as const,
+              image_url: {
+                url: imageBase64,
+                detail: imageDetail,
+              },
+            },
+          ],
+        });
+
+        return {
+          model: selectedModel.name,
+          messages: visionMessages,
+          max_tokens: visionMaxTokens,
+          temperature: visionTemperature,
+        } as ChatCompletionRequest;
+
+      case 'embeddings':
+        return {
+          model: selectedModel.name,
+          input: embeddingInput,
+          encoding_format: encodingFormat,
+        } as EmbeddingRequest;
+
+      case 'images':
+        return {
+          model: selectedModel.name,
+          prompt: imagePrompt,
+          n: imageCount,
+          size: imageSize,
+          quality: imageQuality,
+          style: imageStyle,
+        } as ImageGenerationRequest;
+
+      case 'audio-speech':
+        return {
+          model: selectedModel.name,
+          input: speechInput,
+          voice: speechVoice,
+          response_format: speechFormat,
+          speed: speechSpeed,
+        } as AudioSpeechRequest;
+
+      case 'audio-transcription':
+        if (!recordedAudio) {
+          throw new Error(
+            'Please record or upload an audio file for transcription'
+          );
+        }
+
+        return {
+          model: selectedModel.name,
+          file: recordedAudio,
+          prompt: audioTranscriptionPrompt.trim() || undefined,
+          response_format: audioResponseFormat,
+          temperature: audioTemperature,
+          language: audioLanguage.trim() || undefined,
+        } as AudioTranscriptionRequest;
+
+      case 'models':
+        return null; // No request body needed for models endpoint
+
+      default:
+        return null;
+    }
+  };
+
+  const testEndpointMutation = useMutation({
+    mutationFn: async (requestData: EndpointRequestData) => {
+      if (!selectedModel) {
+        throw new Error('No model selected');
+      }
+
+      setError(null);
+      setResponse(null);
+
+      try {
+        const response = await ModelService.testModel(
+          selectedModel.id,
+          selectedEndpoint,
+          requestData
+        );
+
+        if (!response.success) {
+          throw new Error(response.error || 'Test failed');
+        }
+
+        return response.data as ApiResponse;
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : 'Failed to test endpoint via proxy';
+        throw new Error(errorMessage);
+      }
+    },
+    onSuccess: (data) => {
+      setResponse(data);
+      toast.success(
+        `${API_ENDPOINTS[selectedEndpoint].name} test completed successfully!`
+      );
+    },
+    onError: (err: Error) => {
+      const errorMessage = err?.message || 'Unknown error occurred';
+      setError(errorMessage);
+      toast.error(
+        `${API_ENDPOINTS[selectedEndpoint].name} test failed: ${errorMessage}`
+      );
+    },
+  });
+
+  const handleTest = async () => {
+    if (!selectedModel) {
+      toast.error('Please select a model to test');
+      return;
+    }
+
+    // Validate required fields based on endpoint
+    if (selectedEndpoint === 'chat-completions' && !userMessage.trim()) {
+      toast.error('Please enter a test message');
+      return;
+    }
+
+    if (selectedEndpoint === 'vision-chat') {
+      if (!visionUserMessage.trim()) {
+        toast.error('Please enter a test message');
+        return;
+      }
+      if (!selectedImage) {
+        toast.error('Please select an image for vision analysis');
+        return;
+      }
+    }
+
+    if (selectedEndpoint === 'embeddings' && !embeddingInput.trim()) {
+      toast.error('Please enter text for embedding');
+      return;
+    }
+
+    if (selectedEndpoint === 'images' && !imagePrompt.trim()) {
+      toast.error('Please enter an image prompt');
+      return;
+    }
+
+    if (selectedEndpoint === 'audio-speech' && !speechInput.trim()) {
+      toast.error('Please enter text for speech synthesis');
+      return;
+    }
+
+    if (selectedEndpoint === 'audio-transcription' && !recordedAudio) {
+      toast.error('Please record or upload an audio file for transcription');
+      return;
+    }
+
+    const requestData = await buildRequest();
+    testEndpointMutation.mutate(requestData);
+  };
+
+  const enabledModels = models.filter((model) => model.isEnabled);
+  const credentials = selectedModel ? getModelCredentials(selectedModel) : null;
+  const endpointUrl = credentials
+    ? buildEndpointUrl(
+        credentials.baseUrl,
+        API_ENDPOINTS[selectedEndpoint].path
+      )
+    : '';
+
+  return (
+    <Card className='w-full'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2'>
+          <Send className='h-5 w-5' />
+          API Endpoint Tester
+        </CardTitle>
+        <CardDescription>
+          Comprehensive testing of OpenAI-compatible API endpoints through the
+          secure proxy (resolves CORS and network issues)
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        {/* Model and Endpoint Selection */}
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <div className='space-y-2'>
+            <Label htmlFor='model-select'>Select Model</Label>
+            <Select value={selectedModelId} onValueChange={setSelectedModelId}>
+              <SelectTrigger id='model-select'>
+                <SelectValue placeholder='Choose a model to test...' />
+              </SelectTrigger>
+              <SelectContent>
+                {enabledModels.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    <div className='flex items-center gap-2'>
+                      <span>{model.name}</span>
+                      <Badge variant='outline' className='text-xs'>
+                        {model.provider}
+                      </Badge>
+                      {model.is_free && (
+                        <Badge variant='secondary' className='text-xs'>
+                          Free
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='endpoint-select'>API Endpoint</Label>
+            <Select
+              value={selectedEndpoint}
+              onValueChange={(value: EndpointType) =>
+                setSelectedEndpoint(value)
+              }
+            >
+              <SelectTrigger id='endpoint-select'>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(API_ENDPOINTS).map(([key, endpoint]) => {
+                  const Icon = endpoint.icon;
+                  return (
+                    <SelectItem key={key} value={key}>
+                      <div className='flex items-center gap-2'>
+                        <Icon className='h-4 w-4' />
+                        <span>{endpoint.name}</span>
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Model Information */}
+        {selectedModel && credentials && (
+          <div className='text-muted-foreground bg-muted space-y-2 rounded-md p-3 text-sm'>
+            <div className='flex items-center gap-2'>
+              <Globe className='h-4 w-4' />
+              <span className='break-all'>
+                <strong>Endpoint:</strong> {endpointUrl}
+              </span>
+            </div>
+            <div className='flex items-center gap-2'>
+              <Key className='h-4 w-4' />
+              <span>
+                <strong>API Key:</strong>{' '}
+                {credentials.apiKey
+                  ? `${credentials.apiKey.substring(0, 8)}...`
+                  : 'Not configured'}
+              </span>
+              <Badge
+                variant={credentials.apiKey ? 'default' : 'destructive'}
+                className='text-xs'
+              >
+                {selectedModel.api_key_type || 'Unknown'}
+              </Badge>
+            </div>
+            <div>
+              <span>
+                <strong>Provider:</strong> {selectedModel.provider}
+              </span>
+            </div>
+            <div>
+              <span>
+                <strong>Description:</strong>{' '}
+                {API_ENDPOINTS[selectedEndpoint].description}
+              </span>
+            </div>
+            {!credentials.apiKey && (
+              <Alert variant='default' className='mt-2'>
+                <Info className='h-4 w-4' />
+                <AlertDescription>
+                  No API key configured for this model. Testing may still work
+                  if the model is free or if authentication is handled
+                  elsewhere. For models requiring authentication, please add an
+                  API key to the model or its provider group.
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
+        )}
+
+        <ApiEndpointForm
+          selectedEndpoint={selectedEndpoint}
+          maxTokens={maxTokens}
+          setMaxTokens={setMaxTokens}
+          temperature={temperature}
+          setTemperature={setTemperature}
+          systemMessage={systemMessage}
+          setSystemMessage={setSystemMessage}
+          userMessage={userMessage}
+          setUserMessage={setUserMessage}
+          visionMaxTokens={visionMaxTokens}
+          setVisionMaxTokens={setVisionMaxTokens}
+          visionTemperature={visionTemperature}
+          setVisionTemperature={setVisionTemperature}
+          visionSystemMessage={visionSystemMessage}
+          setVisionSystemMessage={setVisionSystemMessage}
+          visionUserMessage={visionUserMessage}
+          setVisionUserMessage={setVisionUserMessage}
+          imageDetail={imageDetail}
+          setImageDetail={setImageDetail}
+          selectedImage={selectedImage}
+          imagePreviewUrl={imagePreviewUrl}
+          onImageUpload={handleImageUpload}
+          onRemoveImage={() => {
+            setSelectedImage(null);
+            setImagePreviewUrl(null);
+          }}
+          embeddingInput={embeddingInput}
+          setEmbeddingInput={setEmbeddingInput}
+          encodingFormat={encodingFormat}
+          setEncodingFormat={setEncodingFormat}
+          imageCount={imageCount}
+          setImageCount={setImageCount}
+          imageSize={imageSize}
+          setImageSize={setImageSize}
+          imageQuality={imageQuality}
+          setImageQuality={setImageQuality}
+          imageStyle={imageStyle}
+          setImageStyle={setImageStyle}
+          imagePrompt={imagePrompt}
+          setImagePrompt={setImagePrompt}
+          speechVoice={speechVoice}
+          setSpeechVoice={setSpeechVoice}
+          speechFormat={speechFormat}
+          setSpeechFormat={setSpeechFormat}
+          speechSpeed={speechSpeed}
+          setSpeechSpeed={setSpeechSpeed}
+          speechInput={speechInput}
+          setSpeechInput={setSpeechInput}
+          audioTranscriptionPrompt={audioTranscriptionPrompt}
+          setAudioTranscriptionPrompt={setAudioTranscriptionPrompt}
+          audioTemperature={audioTemperature}
+          setAudioTemperature={setAudioTemperature}
+          audioLanguage={audioLanguage}
+          setAudioLanguage={setAudioLanguage}
+          audioResponseFormat={audioResponseFormat}
+          setAudioResponseFormat={setAudioResponseFormat}
+          isRecording={isRecording}
+          onStartRecording={startRecording}
+          onStopRecording={stopRecording}
+          onAudioUpload={handleAudioUpload}
+          recordedAudio={recordedAudio}
+          recordingUrl={recordingUrl}
+          onRemoveAudio={() => {
+            setRecordedAudio(null);
+            setRecordingUrl(null);
+          }}
+        />
+
+        {/* Test Button */}
+        <Button
+          onClick={handleTest}
+          disabled={!selectedModelId || testEndpointMutation.isPending}
+          className='w-full'
+        >
+          {testEndpointMutation.isPending ? (
+            <>
+              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+              Testing {API_ENDPOINTS[selectedEndpoint].name}...
+            </>
+          ) : (
+            <>
+              <Send className='mr-2 h-4 w-4' />
+              Test {API_ENDPOINTS[selectedEndpoint].name}
+            </>
+          )}
+        </Button>
+
+        {/* Results */}
+        {error && (
+          <Alert variant='destructive'>
+            <XCircle className='h-4 w-4' />
+            <AlertDescription>
+              <strong>Test Failed:</strong> {error}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {response && (
+          <Alert>
+            <CheckCircle className='h-4 w-4' />
+            <AlertDescription>
+              <strong>Test Successful!</strong>{' '}
+              {API_ENDPOINTS[selectedEndpoint].name} endpoint responded
+              correctly.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <ApiEndpointResponse response={response} />
+
+        {response && (
+          <div className='space-y-2'>
+            <Label>Raw Response</Label>
+            <details className='group'>
+              <summary className='text-muted-foreground hover:text-foreground cursor-pointer text-sm'>
+                <Info className='mr-1 inline h-4 w-4' />
+                Show detailed response data
+              </summary>
+              <pre className='bg-muted mt-2 max-h-60 overflow-auto rounded-md p-4 text-xs'>
+                {JSON.stringify(response, null, 2)}
+              </pre>
+            </details>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/ui/components/api-endpoint-types.ts b/ui/components/api-endpoint-types.ts
new file mode 100644
index 00000000..9f4239ff
--- /dev/null
+++ b/ui/components/api-endpoint-types.ts
@@ -0,0 +1,156 @@
+import {
+  FileText,
+  Eye,
+  List,
+  Image as ImageIcon,
+  Mic,
+  Volume2,
+} from 'lucide-react';
+
+export const API_ENDPOINTS = {
+  'chat-completions': {
+    name: 'Chat Completions',
+    path: '/chat/completions',
+    icon: FileText,
+    description: 'Test conversational AI with chat completion requests',
+  },
+  'vision-chat': {
+    name: 'Vision Chat (Image + Text)',
+    path: '/chat/completions',
+    icon: Eye,
+    description: 'Analyze images with text prompts using vision models',
+  },
+  embeddings: {
+    name: 'Embeddings',
+    path: '/embeddings',
+    icon: List,
+    description: 'Generate embeddings for text input',
+  },
+  images: {
+    name: 'Image Generation',
+    path: '/images/generations',
+    icon: ImageIcon,
+    description: 'Generate images from text prompts',
+  },
+  'audio-speech': {
+    name: 'Text-to-Speech',
+    path: '/audio/speech',
+    icon: Mic,
+    description: 'Convert text to speech audio',
+  },
+  'audio-transcription': {
+    name: 'Audio Transcription',
+    path: '/audio/transcriptions',
+    icon: Volume2,
+    description: 'Transcribe audio files to text',
+  },
+  models: {
+    name: 'List Models',
+    path: '/model',
+    icon: List,
+    description: 'List all available models from the provider',
+  },
+} as const;
+
+export type EndpointType = keyof typeof API_ENDPOINTS;
+
+export interface ChatCompletionRequest {
+  model: string;
+  messages: {
+    role: 'system' | 'user' | 'assistant';
+    content:
+      | string
+      | Array<{
+          type: 'text' | 'image_url';
+          text?: string;
+          image_url?: {
+            url: string;
+            detail?: 'low' | 'high' | 'auto';
+          };
+        }>;
+  }[];
+  max_tokens?: number;
+  temperature?: number;
+}
+
+export interface EmbeddingRequest {
+  model: string;
+  input: string | string[];
+  encoding_format?: 'float' | 'base64';
+}
+
+export interface ImageGenerationRequest {
+  model?: string;
+  prompt: string;
+  n?: number;
+  size?: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792';
+  quality?: 'standard' | 'hd';
+  style?: 'vivid' | 'natural';
+}
+
+export interface AudioSpeechRequest {
+  model: string;
+  input: string;
+  voice: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
+  response_format?: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm';
+  speed?: number;
+}
+
+export interface AudioTranscriptionRequest {
+  model: string;
+  file: File;
+  prompt?: string;
+  response_format?: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt';
+  temperature?: number;
+  language?: string;
+}
+
+export const DEFAULT_REQUESTS = {
+  'chat-completions': {
+    systemMessage: 'You are a helpful assistant. Please respond concisely.',
+    userMessage:
+      'Hello! Can you tell me what model you are and confirm that you are working correctly?',
+    maxTokens: 150,
+    temperature: 0.7,
+  },
+  'vision-chat': {
+    systemMessage:
+      'You are a helpful assistant that can analyze images. Please describe what you see.',
+    userMessage:
+      'What do you see in this image? Please provide a detailed description.',
+    maxTokens: 300,
+    temperature: 0.7,
+    imageDetail: 'auto' as const,
+  },
+  embeddings: {
+    input: 'The quick brown fox jumps over the lazy dog.',
+    encoding_format: 'float' as const,
+  },
+  images: {
+    prompt: 'A beautiful sunset over a mountain landscape',
+    n: 1,
+    size: '1024x1024' as const,
+    quality: 'standard' as const,
+    style: 'vivid' as const,
+  },
+  'audio-speech': {
+    input: 'Hello, this is a test of the text-to-speech functionality.',
+    voice: 'alloy' as const,
+    response_format: 'mp3' as const,
+    speed: 1.0,
+  },
+  'audio-transcription': {
+    prompt: 'This is a test transcription.',
+    response_format: 'json' as const,
+    temperature: 0.0,
+    language: '',
+  },
+};
+
+export type EndpointRequestData =
+  | ChatCompletionRequest
+  | EmbeddingRequest
+  | ImageGenerationRequest
+  | AudioSpeechRequest
+  | AudioTranscriptionRequest
+  | null;
diff --git a/ui/components/app-page-shell.tsx b/ui/components/app-page-shell.tsx
new file mode 100644
index 00000000..e57ec744
--- /dev/null
+++ b/ui/components/app-page-shell.tsx
@@ -0,0 +1,327 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  DatabaseIcon,
+  FileTextIcon,
+  LayoutDashboardIcon,
+  LogOutIcon,
+  MoreHorizontalIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  ServerIcon,
+  SettingsIcon,
+  WalletIcon,
+} from 'lucide-react';
+import Image from 'next/image';
+import { toast } from 'sonner';
+import { adminLogout } from '@/lib/api/services/auth';
+import { Button } from '@/components/ui/button';
+import { CurrencyToggle } from '@/components/currency-toggle';
+import { ThemeToggle } from '@/components/theme-toggle';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer';
+import { cn } from '@/lib/utils';
+
+interface AppPageShellProps {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+const NAV_ITEMS = [
+  { title: 'Dashboard', url: '/', icon: LayoutDashboardIcon },
+  { title: 'Balances', url: '/balances', icon: WalletIcon },
+  { title: 'Logs', url: '/logs', icon: FileTextIcon },
+  { title: 'Models', url: '/model', icon: DatabaseIcon },
+  { title: 'Providers', url: '/providers', icon: ServerIcon },
+  { title: 'Settings', url: '/settings', icon: SettingsIcon },
+] as const;
+
+const MOBILE_NAV_TAB_WIDTH_CLASS = 'auto-cols-[22%]';
+const MOBILE_NAV_TAB_WIDTH_CLASS_XS = 'max-[359px]:auto-cols-[31%]';
+
+function isActivePath(pathname: string, itemUrl: string): boolean {
+  if (itemUrl === '/') {
+    return pathname === '/';
+  }
+
+  return pathname === itemUrl || pathname.startsWith(`${itemUrl}/`);
+}
+
+export function AppPageShell({
+  children,
+  className,
+  contentClassName,
+}: AppPageShellProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isMobileMoreOpen, setIsMobileMoreOpen] = useState(false);
+
+  const handleLogout = async (): Promise<void> => {
+    try {
+      await adminLogout();
+      toast.success('Logged out successfully');
+      router.push('/login');
+    } catch (error) {
+      console.error('Logout error:', error);
+      toast.error('Failed to logout');
+    }
+  };
+
+  return (
+    <div className='bg-background text-foreground min-h-dvh overflow-x-clip md:h-screen md:overflow-hidden'>
+      <div className='flex min-h-dvh min-w-0 w-full overflow-x-clip md:h-full'>
+        <aside
+          className={cn(
+            'border-border/60 hidden shrink-0 border-r py-5 transition-[width,padding] duration-200 md:flex md:h-full md:flex-col md:overflow-y-auto',
+            isSidebarCollapsed ? 'w-16 px-2' : 'w-60 px-4'
+          )}
+        >
+          <div className={cn('px-1', isSidebarCollapsed && 'px-0')}>
+            <div
+              className={cn(
+                'flex items-center',
+                isSidebarCollapsed ? 'justify-center' : 'justify-start gap-2'
+              )}
+            >
+              {isSidebarCollapsed ? null : (
+                <div className='flex min-w-0 items-center gap-2 overflow-hidden'>
+                  <Image
+                    src='/icon.ico'
+                    alt='Routstr Node'
+                    width={24}
+                    height={24}
+                    className='rounded-sm'
+                  />
+                  <h1 className='text-lg font-semibold tracking-tight'>Routstr Node</h1>
+                </div>
+              )}
+              <Button
+                variant='ghost'
+                size='icon'
+                className={cn(
+                  'text-muted-foreground hover:text-foreground h-8 w-8',
+                  isSidebarCollapsed ? 'mx-auto' : 'ml-auto -mr-1'
+                )}
+                onClick={() => setIsSidebarCollapsed((current) => !current)}
+              >
+                {isSidebarCollapsed ? (
+                  <PanelLeftOpenIcon className='h-4 w-4' />
+                ) : (
+                  <PanelLeftCloseIcon className='h-4 w-4' />
+                )}
+                <span className='sr-only'>
+                  {isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+                </span>
+              </Button>
+            </div>
+          </div>
+
+          <nav
+            className={cn(
+              'mt-5',
+              isSidebarCollapsed
+                ? 'flex flex-col items-center space-y-2'
+                : 'space-y-1.5'
+            )}
+          >
+            {NAV_ITEMS.map((item) => {
+              const Icon = item.icon;
+              const active = isActivePath(pathname, item.url);
+
+              return (
+                <Button
+                  key={item.url}
+                  asChild
+                  variant={active ? 'outline' : 'ghost'}
+                  className={cn(
+                    'h-10 rounded-lg',
+                    isSidebarCollapsed
+                      ? 'mx-auto w-10 justify-center px-0'
+                      : 'w-full justify-start'
+                  )}
+                >
+                  <Link href={item.url}>
+                    <Icon className='h-4 w-4' />
+                    {isSidebarCollapsed ? (
+                      <span className='sr-only'>{item.title}</span>
+                    ) : (
+                      item.title
+                    )}
+                  </Link>
+                </Button>
+              );
+            })}
+          </nav>
+
+          <div
+            className={cn(
+              'mt-auto pt-3',
+              isSidebarCollapsed
+                ? 'flex flex-col items-center space-y-1.5'
+                : 'space-y-2'
+            )}
+          >
+            {isSidebarCollapsed ? (
+              <>
+                <CurrencyToggle
+                  compact
+                  menuSide='right'
+                  menuAlign='start'
+                  className='mx-auto'
+                />
+                <ThemeToggle
+                  compact
+                  menuSide='right'
+                  menuAlign='start'
+                  className='mx-auto'
+                />
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  onClick={handleLogout}
+                  className='text-muted-foreground hover:text-foreground mx-auto h-8 w-10 justify-center px-0'
+                >
+                  <LogOutIcon className='h-4 w-4' />
+                  <span className='sr-only'>Logout</span>
+                </Button>
+              </>
+            ) : (
+              <div className='space-y-1 rounded-lg border border-border/60 bg-card/30 p-1'>
+                <CurrencyToggle
+                  menuSide='right'
+                  menuAlign='start'
+                  className='text-foreground/90 hover:bg-accent/35 h-8 w-full justify-between rounded-md border-border/60 bg-background/25 px-2.5 text-[11px]'
+                />
+                <ThemeToggle
+                  menuSide='right'
+                  menuAlign='start'
+                  className='text-foreground/90 hover:bg-accent/35 h-8 w-full justify-between rounded-md border-border/60 bg-background/25 px-2.5 text-[11px]'
+                />
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  onClick={handleLogout}
+                  className='text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-8 w-full justify-start gap-1.5 rounded-md px-2.5 text-[11px]'
+                >
+                  <LogOutIcon className='h-4 w-4' />
+                  Logout
+                </Button>
+              </div>
+            )}
+          </div>
+        </aside>
+
+        <section className='relative flex min-w-0 w-full flex-1 flex-col overflow-x-clip md:h-full md:min-h-0'>
+          <main
+            className={cn(
+              'pb-mobile-nav min-w-0 w-full flex-1 overflow-x-clip p-3 sm:p-4 md:min-h-0 md:overflow-y-auto md:p-6 md:pb-6',
+              contentClassName,
+              className
+            )}
+          >
+            {children}
+          </main>
+        </section>
+      </div>
+
+      <div className='pointer-events-none fixed inset-x-0 bottom-0 z-40 px-4 pb-[calc(0.35rem+env(safe-area-inset-bottom))] md:hidden'>
+        <nav className='pointer-events-auto mx-auto w-full max-w-[34rem] overflow-x-auto overscroll-x-contain rounded-[1.5rem] border border-border/65 bg-background/80 shadow-[0_-16px_36px_-22px_rgba(0,0,0,0.9)] backdrop-blur-2xl [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden supports-[backdrop-filter]:bg-background/72'>
+          <div
+            className={cn(
+              'grid min-w-full snap-x snap-mandatory grid-flow-col gap-2 p-2.5',
+              MOBILE_NAV_TAB_WIDTH_CLASS,
+              MOBILE_NAV_TAB_WIDTH_CLASS_XS
+            )}
+          >
+            {NAV_ITEMS.map((item) => {
+              const Icon = item.icon;
+              const active = isActivePath(pathname, item.url);
+
+              return (
+                <Button
+                  key={`mobile-bottom-${item.url}`}
+                  asChild
+                  size='sm'
+                  variant={active ? 'outline' : 'ghost'}
+                  className='h-12 w-full snap-start flex-col gap-0.5 rounded-2xl px-2 text-[10px] leading-none'
+                >
+                  <Link href={item.url}>
+                    <Icon className='h-4 w-4' />
+                    <span className='truncate'>{item.title}</span>
+                  </Link>
+                </Button>
+              );
+            })}
+            <Button
+              type='button'
+              size='sm'
+              variant={isMobileMoreOpen ? 'outline' : 'ghost'}
+              className='h-12 w-full snap-start flex-col gap-0.5 rounded-2xl px-2 text-[10px] leading-none'
+              onClick={() => setIsMobileMoreOpen(true)}
+            >
+              <MoreHorizontalIcon className='h-4 w-4' />
+              <span className='truncate'>More</span>
+            </Button>
+          </div>
+        </nav>
+      </div>
+
+      <Drawer open={isMobileMoreOpen} onOpenChange={setIsMobileMoreOpen}>
+        <DrawerContent className='md:hidden'>
+          <DrawerHeader className='px-4 pb-2 text-left'>
+            <DrawerTitle>More</DrawerTitle>
+            <DrawerDescription>Account and appearance settings.</DrawerDescription>
+          </DrawerHeader>
+
+          <div className='space-y-4 px-4 pb-4'>
+            <div className='space-y-2'>
+              <p className='text-muted-foreground text-xs font-semibold uppercase tracking-[0.08em]'>
+                Preferences
+              </p>
+              <div className='grid grid-cols-2 gap-2'>
+                <CurrencyToggle
+                  menuSide='top'
+                  menuAlign='start'
+                  className='h-11 w-full justify-between rounded-lg px-3'
+                />
+                <ThemeToggle
+                  menuSide='top'
+                  menuAlign='end'
+                  className='h-11 w-full justify-between rounded-lg px-3'
+                />
+              </div>
+            </div>
+
+            <div className='space-y-2'>
+              <p className='text-muted-foreground text-xs font-semibold uppercase tracking-[0.08em]'>
+                Account
+              </p>
+              <Button
+                variant='outline'
+                size='sm'
+                onClick={async () => {
+                  setIsMobileMoreOpen(false);
+                  await handleLogout();
+                }}
+                className='h-11 w-full justify-start gap-2 rounded-lg px-3'
+              >
+                <LogOutIcon className='h-4 w-4' />
+                Logout
+              </Button>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  );
+}
diff --git a/ui/components/app-sidebar.tsx b/ui/components/app-sidebar.tsx
index acf5a7b5..27ac4abb 100644
--- a/ui/components/app-sidebar.tsx
+++ b/ui/components/app-sidebar.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import {
+  ExternalLinkIcon,
   FileTextIcon,
   DatabaseIcon,
   LayoutDashboardIcon,
@@ -10,15 +11,18 @@ import {
   WalletIcon,
 } from 'lucide-react';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { NavSecondary } from '@/components/nav-secondary';
 import {
   Sidebar,
   SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
   SidebarHeader,
   SidebarMenu,
-  SidebarMenuItem,
   SidebarMenuButton,
+  SidebarMenuItem,
 } from '@/components/ui/sidebar';
 
 const data = {
@@ -68,29 +72,51 @@ const data = {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar collapsible='offcanvas' {...props}>
-      <SidebarHeader>
+      <SidebarHeader className='px-3 pb-3 pt-4'>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className='data-[slot=sidebar-menu-button]:!p-1.5'
-            >
-              <div className='flex items-center gap-2'>
-                <Image
-                  src='/icon.ico'
-                  alt='Routstr Node'
-                  width={24}
-                  height={24}
-                  className='rounded'
-                />
-                <span className='text-base font-semibold'>Routstr Node</span>
+            <div className='flex items-center gap-2 px-2 py-1'>
+              <Image
+                src='/icon.ico'
+                alt='Routstr Node'
+                width={24}
+                height={24}
+                className='rounded'
+              />
+              <div className='space-y-0.5'>
+                <p className='text-sm font-semibold tracking-tight'>Routstr Node</p>
+                <p className='text-muted-foreground text-[11px]'>
+                  Admin dashboard
+                </p>
               </div>
-            </SidebarMenuButton>
+            </div>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
-      <SidebarContent className='flex-1 overflow-y-auto'>
-        <NavSecondary items={data.navSecondary} className='mt-auto' />
+      <SidebarContent className='flex-1 overflow-y-auto px-2 pb-2'>
+        <NavSecondary items={data.navSecondary} />
+        <SidebarGroup className='mt-auto px-0 pb-0 pt-2'>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild className='h-10 rounded-lg px-3'>
+                  <Link href='https://docs.routstr.com' target='_blank' rel='noreferrer'>
+                    <span>Docs</span>
+                    <ExternalLinkIcon className='ml-auto h-3.5 w-3.5' />
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild className='h-10 rounded-lg px-3'>
+                  <Link href='https://chat.routstr.com' target='_blank' rel='noreferrer'>
+                    <span>Chat App</span>
+                    <ExternalLinkIcon className='ml-auto h-3.5 w-3.5' />
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
       </SidebarContent>
       {/*
       <SidebarFooter>
diff --git a/ui/components/auth-page-shell.tsx b/ui/components/auth-page-shell.tsx
new file mode 100644
index 00000000..baa4a3a7
--- /dev/null
+++ b/ui/components/auth-page-shell.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+interface AuthPageShellProps {
+  title: string;
+  description: string;
+  children: ReactNode;
+}
+
+export function AuthPageShell({
+  title,
+  description,
+  children,
+}: AuthPageShellProps) {
+  return (
+    <div className='bg-background text-foreground flex min-h-dvh items-center justify-center px-4 py-10 sm:py-12'>
+      <Card className='w-full max-w-md'>
+        <CardHeader className='space-y-1 pb-4'>
+          <CardTitle className='text-center text-2xl font-bold'>{title}</CardTitle>
+          <CardDescription className='text-center'>{description}</CardDescription>
+        </CardHeader>
+        <CardContent>{children}</CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/ui/components/BatchOverrideDialog.tsx b/ui/components/batch-override-dialog.tsx
similarity index 98%
rename from ui/components/BatchOverrideDialog.tsx
rename to ui/components/batch-override-dialog.tsx
index 799f4223..577db866 100644
--- a/ui/components/BatchOverrideDialog.tsx
+++ b/ui/components/batch-override-dialog.tsx
@@ -119,7 +119,7 @@ export function BatchOverrideDialog({
             value={jsonInput}
             onChange={(e) => setJsonInput(e.target.value)}
             placeholder={JSON.stringify(sampleJson, null, 2)}
-            className='min-h-[400px] font-mono text-xs'
+            className='min-h-[260px] font-mono text-xs sm:min-h-[400px]'
           />
         </div>
 
diff --git a/ui/components/chart-area-interactive.tsx b/ui/components/chart-area-interactive.tsx
index 5dbee952..f21c7ab3 100644
--- a/ui/components/chart-area-interactive.tsx
+++ b/ui/components/chart-area-interactive.tsx
@@ -125,11 +125,11 @@ const chartConfig = {
   },
   desktop: {
     label: 'Desktop',
-    color: 'hsl(var(--chart-1))',
+    color: 'var(--chart-1)',
   },
   mobile: {
     label: 'Mobile',
-    color: 'hsl(var(--chart-2))',
+    color: 'var(--chart-2)',
   },
 } satisfies ChartConfig;
 
diff --git a/ui/components/child-key-creator.tsx b/ui/components/child-key-creator.tsx
index 97ddae80..1c67b442 100644
--- a/ui/components/child-key-creator.tsx
+++ b/ui/components/child-key-creator.tsx
@@ -12,6 +12,8 @@ import {
 } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
 import {
   Key,
   Copy,
@@ -224,7 +226,7 @@ export function ChildKeyCreator({
             </div>
             {costPerKeyMsats !== undefined && (
               <div className='text-right'>
-                <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
+                <p className='text-muted-foreground text-[0.65rem] tracking-wide'>
                   Unit Cost
                 </p>
                 <p className='text-primary text-sm font-bold'>
@@ -238,9 +240,9 @@ export function ChildKeyCreator({
           <div className='space-y-4'>
             {baseUrl && (
               <div className='space-y-2'>
-                <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+                <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                   Parent API Key
-                </label>
+                </Label>
                 <Input
                   value={activeApiKey}
                   onChange={(e) => handleApiKeyChange(e.target.value)}
@@ -268,9 +270,9 @@ export function ChildKeyCreator({
                   )}
                   <div className='flex flex-col gap-4 sm:flex-row sm:items-end'>
                     <div className='w-full space-y-2 sm:w-32'>
-                      <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+                      <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                         Number of keys
-                      </label>
+                      </Label>
                       <Input
                         type='number'
                         min={1}
@@ -368,12 +370,12 @@ export function ChildKeyCreator({
 
             {newKeys.length > 0 && (
               <div className='mt-6 space-y-4'>
-                <Alert className='border-green-200 bg-green-50 dark:border-green-900/20 dark:bg-green-900/10'>
-                  <AlertTitle className='text-green-800 dark:text-green-400'>
+                <Alert>
+                  <AlertTitle>
                     {newKeys.length} New API Key{newKeys.length > 1 ? 's' : ''}{' '}
                     Generated
                   </AlertTitle>
-                  <AlertDescription className='text-green-700 dark:text-green-500'>
+                  <AlertDescription>
                     Copy {newKeys.length > 1 ? 'these keys' : 'this key'} now.
                     You won&apos;t be able to see them again.
                     {resultInfo && (
@@ -387,14 +389,14 @@ export function ChildKeyCreator({
 
                 <div className='space-y-2'>
                   <div className='flex items-center justify-between'>
-                    <span className='text-muted-foreground text-xs font-medium uppercase'>
+                    <span className='text-muted-foreground text-xs font-medium'>
                       Generated Keys ({newKeys.length})
                     </span>
                     {newKeys.length > 1 && (
                       <Button
                         variant='ghost'
                         size='sm'
-                        className='h-7 text-[10px] uppercase'
+                        className='h-7 text-[10px]'
                         onClick={copyAllToClipboard}
                       >
                         <Copy className='mr-1 h-3 w-3' />
@@ -418,7 +420,7 @@ export function ChildKeyCreator({
                           onClick={() => copyToClipboard(key)}
                         >
                           {copiedKey === key ? (
-                            <Check className='h-3.5 w-3.5 text-green-500' />
+                            <Check className='h-3.5 w-3.5' />
                           ) : (
                             <Copy className='h-3.5 w-3.5 opacity-50 group-hover:opacity-100' />
                           )}
@@ -430,15 +432,15 @@ export function ChildKeyCreator({
 
                 {newKeys.length > 3 && (
                   <div className='space-y-2'>
-                    <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+                    <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                       Bulk Export (All Keys)
-                    </label>
+                    </Label>
                     <div className='relative'>
-                      <textarea
+                      <Textarea
                         readOnly
                         value={newKeys.join('\n')}
                         rows={Math.min(newKeys.length, 6)}
-                        className='bg-muted/30 w-full rounded-md border p-3 font-mono text-[10px] focus:outline-none'
+                        className='bg-muted/30 font-mono text-[10px] leading-relaxed'
                       />
                       <Button
                         size='sm'
@@ -468,9 +470,9 @@ export function ChildKeyCreator({
         <CardContent>
           <div className='space-y-4'>
             <div className='space-y-2'>
-              <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+              <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                 Child API Key
-              </label>
+              </Label>
               <Input
                 value={childKeyToCheck}
                 onChange={(e) => setChildKeyToCheck(e.target.value)}
@@ -531,9 +533,7 @@ export function ChildKeyCreator({
                     <Badge variant='destructive'>Expired</Badge>
                   )}
                   {!keyStatus.is_drained && !keyStatus.is_expired && (
-                    <Badge className='bg-green-600 hover:bg-green-700'>
-                      Active
-                    </Badge>
+                    <Badge>Active</Badge>
                   )}
                 </div>
               </div>
diff --git a/ui/components/CollectModelsDialog.tsx b/ui/components/collect-models-dialog.tsx
similarity index 98%
rename from ui/components/CollectModelsDialog.tsx
rename to ui/components/collect-models-dialog.tsx
index 9d9f8957..57824f78 100644
--- a/ui/components/CollectModelsDialog.tsx
+++ b/ui/components/collect-models-dialog.tsx
@@ -218,11 +218,11 @@ export function CollectModelsDialog({
 
           {!isLoadingModels && selectedProvider && remoteModels.length > 0 && (
             <>
-              <div className='flex items-center justify-between'>
+              <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
                 <div className='text-sm font-medium'>
                   {remoteModels.length} models available
                 </div>
-                <div className='flex gap-2'>
+                <div className='flex flex-wrap gap-2'>
                   <Button
                     variant='outline'
                     size='sm'
diff --git a/ui/components/CostCalculatorDialog.tsx b/ui/components/cost-calculator-dialog.tsx
similarity index 94%
rename from ui/components/CostCalculatorDialog.tsx
rename to ui/components/cost-calculator-dialog.tsx
index ffc56363..df25da0a 100644
--- a/ui/components/CostCalculatorDialog.tsx
+++ b/ui/components/cost-calculator-dialog.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { type Model } from '@/lib/api/schemas/models';
-import { CostCalculator } from '@/components/CostCalculator';
+import { CostCalculator } from '@/components/cost-calculator';
 import {
   Dialog,
   DialogContent,
diff --git a/ui/components/CostCalculator.tsx b/ui/components/cost-calculator.tsx
similarity index 95%
rename from ui/components/CostCalculator.tsx
rename to ui/components/cost-calculator.tsx
index 5a65b5dd..12f14c0b 100644
--- a/ui/components/CostCalculator.tsx
+++ b/ui/components/cost-calculator.tsx
@@ -6,7 +6,7 @@ import {
   calculateRequestCost,
   estimateMinimumTokensForCost,
   formatCost,
-} from '@/lib/services/costValidation';
+} from '@/lib/services/cost-validation';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -109,17 +109,11 @@ export function CostCalculator({ model }: CostCalculatorProps) {
 
       {/* Minimum Cost Alert */}
       {hasMinimumCost && (
-        <Alert
-          className={
-            costCalculation.isMinimumApplied
-              ? 'border-amber-200 bg-amber-50'
-              : 'border-green-200 bg-green-50'
-          }
-        >
+        <Alert variant={costCalculation.isMinimumApplied ? 'destructive' : 'default'}>
           {costCalculation.isMinimumApplied ? (
-            <AlertTriangle className='h-4 w-4 text-amber-600' />
+            <AlertTriangle className='h-4 w-4' />
           ) : (
-            <CheckCircle className='h-4 w-4 text-green-600' />
+            <CheckCircle className='h-4 w-4' />
           )}
           <AlertTitle>
             {costCalculation.isMinimumApplied
diff --git a/ui/components/currency-toggle.tsx b/ui/components/currency-toggle.tsx
index 7fac8437..e674af8c 100644
--- a/ui/components/currency-toggle.tsx
+++ b/ui/components/currency-toggle.tsx
@@ -1,20 +1,45 @@
 'use client';
 
-import { useCurrencyStore } from '@/lib/stores/currency';
-import { useQuery } from '@tanstack/react-query';
-import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
 import { useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ChevronsUpDownIcon, CoinsIcon } from 'lucide-react';
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
 import type { DisplayUnit } from '@/lib/types/units';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { Coins } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
-export function CurrencyToggle() {
+interface CurrencyToggleProps {
+  className?: string;
+  compact?: boolean;
+  menuSide?: 'top' | 'right' | 'bottom' | 'left';
+  menuAlign?: 'start' | 'center' | 'end';
+}
+
+const UNIT_OPTIONS: Array<{ value: DisplayUnit; label: string }> = [
+  { value: 'msat', label: 'mSAT' },
+  { value: 'sat', label: 'sat' },
+  { value: 'usd', label: 'USD' },
+];
+
+function getLabel(unit: DisplayUnit): string {
+  const option = UNIT_OPTIONS.find((item) => item.value === unit);
+  return option?.label ?? unit;
+}
+
+export function CurrencyToggle({
+  className,
+  compact = false,
+  menuSide = 'bottom',
+  menuAlign = 'end',
+}: CurrencyToggleProps) {
   const { displayUnit, setDisplayUnit } = useCurrencyStore();
 
   const { data: btcUsdPrice } = useQuery({
@@ -32,47 +57,53 @@ export function CurrencyToggle() {
     }
   }, [displayUnit, usdPerSat, setDisplayUnit]);
 
-  const getLabel = (unit: DisplayUnit) => {
-    switch (unit) {
-      case 'msat':
-        return 'mSAT';
-      case 'sat':
-        return 'sat';
-      case 'usd':
-        return 'USD';
-      default:
-        return unit;
-    }
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          variant='ghost'
+          variant='outline'
           size='sm'
-          className='h-9 w-9 w-auto gap-2 px-0 px-3 font-normal'
+          className={cn(
+            'border-border/60 bg-background/65 text-muted-foreground hover:text-foreground rounded-md',
+            compact ? 'h-8 w-10 justify-center px-0' : 'h-8 justify-between gap-2',
+            className
+          )}
         >
-          <Coins className='h-4 w-4' />
-          <span className='hidden sm:inline-block'>
-            {getLabel(displayUnit)}
+          <span className='inline-flex min-w-0 items-center gap-1.5'>
+            <CoinsIcon className='h-3.5 w-3.5 shrink-0' />
+            {compact ? null : (
+              <span className='truncate text-[11px] font-medium uppercase'>
+                {getLabel(displayUnit)}
+              </span>
+            )}
           </span>
-          <span className='uppercase sm:hidden'>{displayUnit}</span>
+          {compact ? (
+            <span className='sr-only'>Currency: {getLabel(displayUnit)}</span>
+          ) : (
+            <ChevronsUpDownIcon className='h-3.5 w-3.5 opacity-70' />
+          )}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        <DropdownMenuItem onClick={() => setDisplayUnit('msat')}>
-          Millisatoshis (mSAT)
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setDisplayUnit('sat')}>
-          Satoshis (sat)
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={() => setDisplayUnit('usd')}
-          disabled={!usdPerSat}
+      <DropdownMenuContent side={menuSide} align={menuAlign}>
+        <DropdownMenuRadioGroup
+          value={displayUnit}
+          onValueChange={(value) => {
+            if (value !== 'msat' && value !== 'sat' && value !== 'usd') return;
+            if (value === 'usd' && !usdPerSat) return;
+            setDisplayUnit(value);
+          }}
         >
-          US Dollar (USD)
-        </DropdownMenuItem>
+          {UNIT_OPTIONS.map((option) => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              value={option.value}
+              disabled={option.value === 'usd' && !usdPerSat}
+              className='uppercase'
+            >
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/ui/components/dashboard-balance-summary.tsx b/ui/components/dashboard-balance-summary.tsx
index 9f1521df..3dabc484 100644
--- a/ui/components/dashboard-balance-summary.tsx
+++ b/ui/components/dashboard-balance-summary.tsx
@@ -59,37 +59,38 @@ export function DashboardBalanceSummary({
       title: 'Your Balance',
       value: formatAmount(totals.totalOwner),
       icon: Coins,
-      color: 'text-green-600',
-      bgColor: 'bg-green-100 dark:bg-green-900/20',
+      color: 'text-green-600 dark:text-green-300',
     },
     {
       title: 'Total Wallet',
       value: formatAmount(totals.totalWallet),
       icon: Wallet,
-      color: 'text-blue-600',
-      bgColor: 'bg-blue-100 dark:bg-blue-900/20',
+      color: 'text-blue-600 dark:text-blue-300',
     },
     {
       title: 'User Balance',
       value: formatAmount(totals.totalUser),
       icon: User,
-      color: 'text-purple-600',
-      bgColor: 'bg-purple-100 dark:bg-purple-900/20',
+      color: 'text-purple-600 dark:text-purple-300',
     },
   ];
 
   return (
-    <div className='grid gap-4 md:grid-cols-3'>
+    <div className='grid grid-cols-2 gap-2.5 max-[359px]:grid-cols-1 sm:gap-3 lg:grid-cols-3'>
       {cards.map((card) => (
-        <Card key={card.title}>
-          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-            <CardTitle className='text-sm font-medium'>{card.title}</CardTitle>
-            <div className={`rounded-full p-2 ${card.bgColor}`}>
-              <card.icon className={`h-4 w-4 ${card.color}`} />
+        <Card key={card.title} size='sm' className='min-h-[6.25rem] sm:min-h-[7rem]'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-1'>
+            <CardTitle className='text-muted-foreground text-[11px] font-medium sm:text-sm'>
+              {card.title}
+            </CardTitle>
+            <div className='flex size-6 items-center justify-center sm:size-7'>
+              <card.icon className={`h-3.5 w-3.5 sm:h-4 sm:w-4 ${card.color}`} />
             </div>
           </CardHeader>
-          <CardContent>
-            <div className='text-2xl font-bold'>{card.value}</div>
+          <CardContent className='pt-0'>
+            <div className='break-words text-base font-semibold sm:text-xl'>
+              {card.value}
+            </div>
           </CardContent>
         </Card>
       ))}
diff --git a/ui/components/data-table.tsx b/ui/components/data-table.tsx
index f5c8cdaa..e015a96e 100644
--- a/ui/components/data-table.tsx
+++ b/ui/components/data-table.tsx
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
         className='text-muted-foreground flex gap-1 px-1.5 [&_svg]:size-3'
       >
         {row.original.status === 'Done' ? (
-          <CheckCircle2Icon className='text-green-500 dark:text-green-400' />
+          <CheckCircle2Icon />
         ) : (
           <LoaderIcon />
         )}
diff --git a/ui/components/detailed-wallet-balance.tsx b/ui/components/detailed-wallet-balance.tsx
index 9979b0f4..4ff85911 100644
--- a/ui/components/detailed-wallet-balance.tsx
+++ b/ui/components/detailed-wallet-balance.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Loader2, RefreshCw, AlertCircle, Wallet } from 'lucide-react';
+import { RefreshCw, AlertCircle, Wallet, User, Coins } from 'lucide-react';
 import { WalletService, BalanceDetail } from '@/lib/api/services/wallet';
 import {
   Card,
@@ -12,6 +12,23 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { WithdrawModal } from '@/components/withdraw-modal';
 import { cn } from '@/lib/utils';
 import type { DisplayUnit } from '@/lib/types/units';
@@ -66,18 +83,40 @@ export function DetailedWalletBalance({
     ? calculateTotals(data)
     : { totalWallet: 0, totalUser: 0, totalOwner: 0 };
 
+  const rows = (data ?? [])
+    .filter(
+      (detail) => (detail.wallet_balance && detail.wallet_balance > 0) || detail.error
+    )
+    .map((detail, index) => {
+      const walletMsat = convertToMsat(detail.wallet_balance || 0, detail.unit);
+      const userMsat = convertToMsat(detail.user_balance || 0, detail.unit);
+      const ownerMsat = convertToMsat(detail.owner_balance || 0, detail.unit);
+
+      return {
+        key: `${detail.mint_url}-${detail.unit}-${index}`,
+        detail,
+        walletMsat,
+        userMsat,
+        ownerMsat,
+      };
+    });
+
+  const formatMintLabel = (detail: BalanceDetail) =>
+    `${detail.mint_url.replace('https://', '').replace('http://', '')} • ${detail.unit.toUpperCase()}`;
+
   return (
     <>
       <Card className='h-full w-full shadow-sm'>
         <CardHeader className='pb-4'>
-          <div className='flex items-center justify-between'>
+          <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
             <CardTitle className='text-xl'>Cashu Wallet Balance</CardTitle>
-            <div className='flex gap-2'>
+            <div className='flex w-full gap-2 sm:w-auto'>
               <Button
                 variant='default'
                 size='sm'
                 onClick={() => setWithdrawModalOpen(true)}
                 disabled={isLoading || !data || data.length === 0}
+                className='flex-1 sm:flex-none'
               >
                 <Wallet className='mr-2 h-4 w-4' />
                 Withdraw
@@ -105,171 +144,180 @@ export function DetailedWalletBalance({
         </CardHeader>
         <CardContent>
           {isLoading ? (
-            <div className='flex items-center justify-center py-8'>
-              <Loader2 className='text-primary h-8 w-8 animate-spin' />
+            <div className='space-y-4'>
+              <div className='grid gap-3 md:grid-cols-3'>
+                {Array.from({ length: 3 }).map((_, index) => (
+                  <Card key={`wallet-stat-skeleton-${index}`} className='shadow-none'>
+                    <CardHeader className='space-y-2 pb-1'>
+                      <Skeleton className='h-3.5 w-28' />
+                      <Skeleton className='h-3 w-8' />
+                    </CardHeader>
+                    <CardContent className='pt-0'>
+                      <Skeleton className='h-7 w-24' />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+              <Skeleton className='h-3 w-52' />
+              <div className='space-y-2'>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Skeleton key={`wallet-row-skeleton-${index}`} className='h-11 w-full' />
+                ))}
+              </div>
             </div>
           ) : isError ? (
-            <div className='bg-destructive/10 text-destructive flex items-center space-x-2 rounded-md p-4'>
+            <Alert variant='destructive'>
               <AlertCircle className='h-5 w-5' />
-              <span>Error loading balance: {(error as Error).message}</span>
-            </div>
+              <AlertDescription>
+                Error loading balance: {(error as Error).message}
+              </AlertDescription>
+            </Alert>
           ) : (
             <div className='space-y-6'>
-              <div className='space-y-3'>
-                <div className='flex items-center justify-between'>
-                  <span className='text-muted-foreground text-sm'>
-                    Your Balance (Total)
-                  </span>
-                  <span className='text-2xl font-bold text-green-600'>
-                    {formatAmount(totals.totalOwner)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='text-muted-foreground text-sm'>
-                    Total Wallet
-                  </span>
-                  <span className='text-lg font-semibold'>
-                    {formatAmount(totals.totalWallet)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='text-muted-foreground text-sm'>
-                    User Balance
-                  </span>
-                  <span className='text-lg font-semibold'>
-                    {formatAmount(totals.totalUser)}
-                  </span>
-                </div>
+              <div className='grid gap-3 md:grid-cols-3'>
+                <Card className='shadow-none'>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>Your Balance (Total)</CardTitle>
+                    <span className='inline-flex size-8 items-center justify-center text-green-600 dark:text-green-300'>
+                      <Coins className='h-4 w-4' />
+                    </span>
+                  </CardHeader>
+                  <CardContent>
+                    <p className='text-primary text-2xl font-bold tracking-tight'>
+                      {formatAmount(totals.totalOwner)}
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card className='shadow-none'>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>Total Wallet</CardTitle>
+                    <span className='inline-flex size-8 items-center justify-center text-blue-600 dark:text-blue-300'>
+                      <Wallet className='h-4 w-4' />
+                    </span>
+                  </CardHeader>
+                  <CardContent>
+                    <p className='text-2xl font-bold tracking-tight'>
+                      {formatAmount(totals.totalWallet)}
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card className='shadow-none'>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-sm font-medium'>User Balance</CardTitle>
+                    <span className='inline-flex size-8 items-center justify-center text-purple-600 dark:text-purple-300'>
+                      <User className='h-4 w-4' />
+                    </span>
+                  </CardHeader>
+                  <CardContent>
+                    <p className='text-2xl font-bold tracking-tight'>
+                      {formatAmount(totals.totalUser)}
+                    </p>
+                  </CardContent>
+                </Card>
               </div>
 
               <p className='text-muted-foreground text-xs'>
                 Your balance = Total wallet - User balance
               </p>
 
-              <div className='overflow-hidden rounded-lg border'>
-                {/* Desktop Table Header */}
-                <div className='bg-muted hidden grid-cols-4 gap-2 p-3 text-sm font-semibold md:grid'>
-                  <div>Mint / Unit</div>
-                  <div className='text-right'>Wallet</div>
-                  <div className='text-right'>Users</div>
-                  <div className='text-right'>Owner</div>
-                </div>
-
-                {data && data.length > 0 ? (
-                  data
-                    .filter(
-                      (detail) =>
-                        (detail.wallet_balance && detail.wallet_balance > 0) ||
-                        detail.error
-                    )
-                    .map((detail, index) => {
-                      const walletMsat = convertToMsat(
-                        detail.wallet_balance || 0,
-                        detail.unit
-                      );
-                      const userMsat = convertToMsat(
-                        detail.user_balance || 0,
-                        detail.unit
-                      );
-                      const ownerMsat = convertToMsat(
-                        detail.owner_balance || 0,
-                        detail.unit
-                      );
-
-                      return (
-                        <div
-                          key={index}
-                          className={cn(
-                            'border-t p-3 text-sm',
-                            detail.error && 'bg-destructive/10 text-destructive'
-                          )}
-                        >
-                          {/* Desktop Layout */}
-                          <div className='hidden grid-cols-4 gap-2 md:grid'>
-                            <div className='text-xs break-all'>
-                              {detail.mint_url
-                                .replace('https://', '')
-                                .replace('http://', '')}{' '}
-                              • {detail.unit.toUpperCase()}
-                            </div>
-                            <div className='text-right font-mono'>
-                              {detail.error
-                                ? 'error'
-                                : formatAmount(walletMsat)}
-                            </div>
-                            <div className='text-right font-mono'>
+              {rows.length > 0 ? (
+                <>
+                  <div className='hidden md:block'>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Mint / Unit</TableHead>
+                          <TableHead className='text-right'>Wallet</TableHead>
+                          <TableHead className='text-right'>Users</TableHead>
+                          <TableHead className='text-right'>Owner</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {rows.map(({ key, detail, walletMsat, userMsat, ownerMsat }) => (
+                          <TableRow
+                            key={key}
+                            className={cn(
+                              detail.error && 'bg-destructive/10 text-destructive'
+                            )}
+                          >
+                            <TableCell className='max-w-md font-mono text-xs break-all whitespace-normal'>
+                              {formatMintLabel(detail)}
+                            </TableCell>
+                            <TableCell className='text-right font-mono'>
+                              {detail.error ? 'error' : formatAmount(walletMsat)}
+                            </TableCell>
+                            <TableCell className='text-right font-mono'>
                               {detail.error ? '-' : formatAmount(userMsat)}
-                            </div>
-                            <div
+                            </TableCell>
+                            <TableCell
                               className={cn(
                                 'text-right font-mono',
-                                !detail.error &&
-                                  ownerMsat > 0 &&
-                                  'font-semibold text-green-600'
+                                !detail.error && ownerMsat > 0 && 'text-primary font-semibold'
                               )}
                             >
                               {detail.error ? '-' : formatAmount(ownerMsat)}
-                            </div>
-                          </div>
-
-                          {/* Mobile Layout */}
-                          <div className='space-y-3 md:hidden'>
-                            <div className='space-y-1'>
-                              <span className='text-muted-foreground text-xs font-medium'>
-                                Mint / Unit
-                              </span>
-                              <div className='font-mono text-xs break-all'>
-                                {detail.mint_url
-                                  .replace('https://', '')
-                                  .replace('http://', '')}{' '}
-                                • {detail.unit.toUpperCase()}
-                              </div>
-                            </div>
-                            <div className='grid grid-cols-3 gap-2'>
-                              <div className='space-y-1'>
-                                <div className='text-muted-foreground text-xs font-medium'>
-                                  Wallet
-                                </div>
-                                <div className='truncate font-mono text-sm'>
-                                  {detail.error
-                                    ? 'error'
-                                    : formatAmount(walletMsat)}
-                                </div>
-                              </div>
-                              <div className='space-y-1'>
-                                <div className='text-muted-foreground text-xs font-medium'>
-                                  Users
-                                </div>
-                                <div className='truncate font-mono text-sm'>
-                                  {detail.error ? '-' : formatAmount(userMsat)}
-                                </div>
-                              </div>
-                              <div className='space-y-1'>
-                                <div className='text-muted-foreground text-xs font-medium'>
-                                  Owner
-                                </div>
-                                <div
-                                  className={cn(
-                                    'truncate font-mono text-sm',
-                                    !detail.error &&
-                                      ownerMsat > 0 &&
-                                      'font-semibold text-green-600'
-                                  )}
-                                >
-                                  {detail.error ? '-' : formatAmount(ownerMsat)}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })
-                ) : (
-                  <div className='text-muted-foreground p-4 text-center text-sm'>
-                    No balances to display
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
                   </div>
-                )}
-              </div>
+                  <div className='space-y-2 md:hidden'>
+                    {rows.map(({ key, detail, walletMsat, userMsat, ownerMsat }) => (
+                      <Card
+                        key={`${key}-mobile`}
+                        className={cn(
+                          'shadow-none',
+                          detail.error && 'border-destructive/40 bg-destructive/5'
+                        )}
+                      >
+                        <CardHeader className='p-4 pb-2'>
+                          <CardDescription className='font-mono text-xs break-all'>
+                            {formatMintLabel(detail)}
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent className='grid grid-cols-1 gap-2 p-4 pt-0 sm:grid-cols-3 sm:gap-3'>
+                          <div>
+                            <p className='text-muted-foreground text-xs'>Wallet</p>
+                            <p className='font-mono text-sm'>
+                              {detail.error ? 'error' : formatAmount(walletMsat)}
+                            </p>
+                          </div>
+                          <div>
+                            <p className='text-muted-foreground text-xs'>Users</p>
+                            <p className='font-mono text-sm'>
+                              {detail.error ? '-' : formatAmount(userMsat)}
+                            </p>
+                          </div>
+                          <div>
+                            <p className='text-muted-foreground text-xs'>Owner</p>
+                            <p
+                              className={cn(
+                                'font-mono text-sm',
+                                !detail.error && ownerMsat > 0 && 'text-primary font-semibold'
+                              )}
+                            >
+                              {detail.error ? '-' : formatAmount(ownerMsat)}
+                            </p>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </>
+              ) : (
+                <Empty className='py-6'>
+                  <EmptyHeader>
+                    <EmptyMedia variant='icon'>
+                      <Wallet className='h-4 w-4' />
+                    </EmptyMedia>
+                    <EmptyTitle>No balances to display</EmptyTitle>
+                    <EmptyDescription>
+                      Wallet balances will appear here after funds are available.
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
             </div>
           )}
         </CardContent>
diff --git a/ui/components/EditGroupForm.tsx b/ui/components/edit-group-form.tsx
similarity index 85%
rename from ui/components/EditGroupForm.tsx
rename to ui/components/edit-group-form.tsx
index 8a4ae296..c0a5c549 100644
--- a/ui/components/EditGroupForm.tsx
+++ b/ui/components/edit-group-form.tsx
@@ -27,6 +27,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
 import { Users, Key, Loader2, Globe, AlertTriangle, Info } from 'lucide-react';
 import { toast } from 'sonner';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -122,9 +123,9 @@ export function EditGroupForm({
             <div className='space-y-2 text-sm'>
               <div className='flex justify-between'>
                 <span>Models using group API key:</span>
-                <span className='font-medium text-blue-600'>
+                <Badge variant='secondary' className='tabular-nums'>
                   {modelsWithoutKeys}
-                </span>
+                </Badge>
               </div>
             </div>
           </div>
@@ -138,18 +139,18 @@ export function EditGroupForm({
             <div className='space-y-2 text-sm'>
               <div className='flex justify-between'>
                 <span>Models using group URL:</span>
-                <span className='font-medium text-blue-600'>
+                <Badge variant='secondary' className='tabular-nums'>
                   {modelsUsingGroupUrl}
-                </span>
+                </Badge>
               </div>
               <div className='flex justify-between'>
                 <span>Models with individual URLs:</span>
-                <span className='font-medium text-green-600'>
+                <Badge variant='outline' className='tabular-nums'>
                   {models.length - modelsUsingGroupUrl}
-                </span>
+                </Badge>
               </div>
               {groupSettings?.group_url && (
-                <div className='mt-2 rounded bg-blue-50 p-2 text-xs'>
+                <div className='bg-muted mt-2 rounded p-2 text-xs'>
                   <span className='font-medium'>Current group URL:</span>{' '}
                   {groupSettings.group_url}
                 </div>
@@ -163,26 +164,22 @@ export function EditGroupForm({
             <div className='max-h-32 overflow-y-auto'>
               <div className='flex flex-wrap gap-2'>
                 {models.map((model) => (
-                  <span
+                  <Badge
                     key={model.id}
-                    className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
-                      model.api_key
-                        ? 'bg-green-100 text-green-800'
-                        : 'bg-blue-100 text-blue-800'
-                    }`}
+                    variant={model.api_key ? 'default' : 'secondary'}
+                    className='max-w-full'
                     title={
                       model.api_key
                         ? 'Has individual API key and URL'
                         : 'Uses group API key and URL'
                     }
                   >
-                    {model.name}
-                    {model.api_key && ' 🔑'}
-                    {model.url &&
-                      !model.url.startsWith('/') &&
-                      model.api_key &&
-                      ' 🌐'}
-                  </span>
+                    <span className='truncate'>{model.name}</span>
+                    {model.api_key && <Key className='ml-1 h-3 w-3' />}
+                    {model.url && !model.url.startsWith('/') && model.api_key && (
+                      <Globe className='ml-1 h-3 w-3' />
+                    )}
+                  </Badge>
                 ))}
               </div>
             </div>
@@ -310,28 +307,30 @@ export function EditGroupForm({
               )}
             />
 
-            <div className='rounded-md border border-amber-200 bg-amber-50 p-4'>
-              <p className='text-sm text-amber-800'>
-                <strong>How group settings work:</strong>
-              </p>
-              <ul className='mt-2 list-inside list-disc space-y-1 text-sm text-amber-800'>
-                <li>
-                  Models with individual API keys and URLs will keep their
-                  specific settings
-                </li>
-                <li>
-                  Models without individual settings will use the group defaults
-                </li>
-                <li>
-                  Removing the group URL makes models fall back to the system
-                  default endpoint
-                </li>
-                <li>
-                  You can use &quot;Apply Group Settings&quot; to force models
-                  to use group configurations
-                </li>
-              </ul>
-            </div>
+            <Alert>
+              <Info className='h-4 w-4' />
+              <AlertDescription>
+                <p className='font-medium'>How group settings work:</p>
+                <ul className='mt-2 list-inside list-disc space-y-1 text-sm'>
+                  <li>
+                    Models with individual API keys and URLs will keep their
+                    specific settings
+                  </li>
+                  <li>
+                    Models without individual settings will use the group
+                    defaults
+                  </li>
+                  <li>
+                    Removing the group URL makes models fall back to the system
+                    default endpoint
+                  </li>
+                  <li>
+                    You can use &quot;Apply Group Settings&quot; to force models
+                    to use group configurations
+                  </li>
+                </ul>
+              </AlertDescription>
+            </Alert>
 
             <div className='flex justify-end gap-2 pt-4'>
               <Button
diff --git a/ui/components/EditModelForm.tsx b/ui/components/edit-model-form.tsx
similarity index 76%
rename from ui/components/EditModelForm.tsx
rename to ui/components/edit-model-form.tsx
index 0ac46cb4..70f39409 100644
--- a/ui/components/EditModelForm.tsx
+++ b/ui/components/edit-model-form.tsx
@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { type Model } from '@/lib/api/schemas/models';
-import { AdminService } from '@/lib/api/services/admin';
+import { AdminService, type AdminModel } from '@/lib/api/services/admin';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -32,9 +32,9 @@ import { Switch } from '@/components/ui/switch';
 const EditModelFormSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   description: z.string().optional(),
-  context_length: z.coerce.number().min(0),
-  prompt: z.coerce.number().min(0),
-  completion: z.coerce.number().min(0),
+  context_length: z.number().min(0),
+  prompt: z.number().min(0),
+  completion: z.number().min(0),
   enabled: z.boolean(),
 });
 
@@ -47,6 +47,27 @@ const roundToFiveDecimals = (value: number | undefined | null): number => {
   return Math.round(value * 100000) / 100000;
 };
 
+const toNumber = (value: unknown, fallback = 0): number => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+};
+
+const toStringArray = (value: unknown, fallback: string[]): string[] => {
+  if (!Array.isArray(value)) {
+    return fallback;
+  }
+  const filtered = value.filter((item): item is string => typeof item === 'string');
+  return filtered.length > 0 ? filtered : fallback;
+};
+
 interface EditModelFormProps {
   model: Model;
   providerId?: number;
@@ -82,6 +103,77 @@ interface AdminModelData {
   enabled: boolean;
 }
 
+const normalizeAdminModelData = (
+  adminModel: AdminModel,
+  fallbackModel: Model,
+  providerId: number
+): AdminModelData => {
+  const pricingRecord =
+    adminModel.pricing && typeof adminModel.pricing === 'object'
+      ? (adminModel.pricing as Record<string, unknown>)
+      : {};
+
+  const architectureRecord =
+    adminModel.architecture && typeof adminModel.architecture === 'object'
+      ? (adminModel.architecture as Record<string, unknown>)
+      : {};
+
+  return {
+    id: adminModel.id,
+    name: adminModel.name,
+    description: adminModel.description || '',
+    created: toNumber(adminModel.created, Math.floor(Date.now() / 1000)),
+    context_length: Math.max(
+      0,
+      Math.trunc(toNumber(adminModel.context_length, fallbackModel.contextLength || 4096))
+    ),
+    architecture: {
+      modality:
+        typeof architectureRecord.modality === 'string'
+          ? architectureRecord.modality
+          : fallbackModel.modelType || 'text',
+      input_modalities: toStringArray(architectureRecord.input_modalities, [
+        fallbackModel.modelType || 'text',
+      ]),
+      output_modalities: toStringArray(architectureRecord.output_modalities, [
+        fallbackModel.modelType || 'text',
+      ]),
+      tokenizer:
+        typeof architectureRecord.tokenizer === 'string'
+          ? architectureRecord.tokenizer
+          : '',
+      instruct_type:
+        typeof architectureRecord.instruct_type === 'string'
+          ? architectureRecord.instruct_type
+          : null,
+    },
+    pricing: {
+      prompt: roundToFiveDecimals(toNumber(pricingRecord.prompt, fallbackModel.input_cost)),
+      completion: roundToFiveDecimals(
+        toNumber(pricingRecord.completion, fallbackModel.output_cost)
+      ),
+      request: toNumber(pricingRecord.request, 0),
+      image: toNumber(pricingRecord.image, 0),
+      web_search: toNumber(pricingRecord.web_search, 0),
+      internal_reasoning: toNumber(pricingRecord.internal_reasoning, 0),
+    },
+    per_request_limits:
+      adminModel.per_request_limits === null ||
+      adminModel.per_request_limits === undefined
+        ? adminModel.per_request_limits
+        : null,
+    top_provider:
+      adminModel.top_provider === null || adminModel.top_provider === undefined
+        ? adminModel.top_provider
+        : null,
+    upstream_provider_id:
+      typeof adminModel.upstream_provider_id === 'number'
+        ? adminModel.upstream_provider_id
+        : providerId,
+    enabled: adminModel.enabled !== false,
+  };
+};
+
 export function EditModelForm({
   model,
   providerId,
@@ -114,29 +206,28 @@ export function EditModelForm({
     }
 
     try {
-      console.log('Loading admin model:', {
-        providerId,
-        modelId: model.full_name,
-      });
-
       const adminModel = await AdminService.getProviderModel(
         providerId,
         model.id
       );
 
-      setAdminModelData(adminModel as AdminModelData);
+      const normalizedAdminModel = normalizeAdminModelData(
+        adminModel,
+        model,
+        providerId
+      );
+      setAdminModelData(normalizedAdminModel);
       setIsNewOverride(false);
 
       form.reset({
-        name: adminModel.name,
-        description: adminModel.description || '',
-        context_length: adminModel.context_length,
-        prompt: roundToFiveDecimals(adminModel.pricing.prompt),
-        completion: roundToFiveDecimals(adminModel.pricing.completion),
-        enabled: adminModel.enabled !== false,
+        name: normalizedAdminModel.name,
+        description: normalizedAdminModel.description || '',
+        context_length: normalizedAdminModel.context_length,
+        prompt: normalizedAdminModel.pricing.prompt,
+        completion: normalizedAdminModel.pricing.completion,
+        enabled: normalizedAdminModel.enabled !== false,
       });
-    } catch (error: unknown) {
-      console.log('Model not in database, will create new override:', error);
+    } catch {
       setIsNewOverride(true);
       setAdminModelData({
         id: model.full_name,
@@ -238,11 +329,9 @@ export function EditModelForm({
       };
 
       if (isNewOverride) {
-        console.log('Creating new model override');
         await AdminService.createProviderModel(providerId, payload);
         toast.success('Model override created successfully!');
       } else {
-        console.log('Updating existing model override');
         await AdminService.updateProviderModel(
           providerId,
           adminModelData.id,
@@ -318,7 +407,19 @@ export function EditModelForm({
                         type='number'
                         min='0'
                         placeholder='4096'
-                        {...field}
+                        value={field.value ?? ''}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          field.onChange(
+                            value === '' ? 0 : parseInt(value, 10) || 0
+                          );
+                        }}
+                        onBlur={(e) => {
+                          const value = parseInt(e.target.value, 10);
+                          field.onChange(
+                            Number.isNaN(value) ? 0 : Math.max(0, value)
+                          );
+                        }}
                         className='w-full'
                       />
                     </FormControl>
diff --git a/ui/components/error-details-table.tsx b/ui/components/error-details-table.tsx
index d71b3172..3a630e5b 100644
--- a/ui/components/error-details-table.tsx
+++ b/ui/components/error-details-table.tsx
@@ -38,8 +38,8 @@ export function ErrorDetailsTable({ errors }: ErrorDetailsTableProps) {
         <CardTitle>Recent Errors ({errors.length})</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className='max-h-[400px] overflow-y-auto'>
-          <Table>
+        <div className='max-h-[420px] max-w-full overflow-y-auto'>
+          <Table className='min-w-[640px] sm:min-w-[760px]'>
             <TableHeader>
               <TableRow>
                 <TableHead>Timestamp</TableHead>
diff --git a/ui/components/key-options.tsx b/ui/components/key-options.tsx
index 63969e72..cb63cb26 100644
--- a/ui/components/key-options.tsx
+++ b/ui/components/key-options.tsx
@@ -1,5 +1,13 @@
 import { Zap, Calendar, Shield } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 interface KeyOptionsProps {
   balanceLimit: string;
@@ -24,48 +32,57 @@ export function KeyOptions({
     <div className='grid gap-4 sm:grid-cols-3'>
       {showBalanceLimit && (
         <div className='space-y-2'>
-          <label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
+          <Label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
             <Zap className='h-3 w-3' />
             Balance Limit (mSats)
-          </label>
+          </Label>
           <Input
             type='number'
             placeholder='No limit'
             value={balanceLimit}
             onChange={(e) => setBalanceLimit(e.target.value)}
             className='h-9 text-xs'
+            name='balance_limit_msats'
+            autoComplete='off'
           />
         </div>
       )}
 
       <div className='space-y-2'>
-        <label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
+        <Label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
           <Calendar className='h-3 w-3' />
           Validity Date
-        </label>
+        </Label>
         <Input
           type='date'
           value={validityDate}
           onChange={(e) => setValidityDate(e.target.value)}
           className='h-9 text-xs'
+          name='validity_date'
         />
       </div>
 
       <div className='space-y-2'>
-        <label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
+        <Label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
           <Shield className='h-3 w-3' />
           Reset Policy
-        </label>
-        <select
-          value={balanceLimitReset}
-          onChange={(e) => setBalanceLimitReset(e.target.value)}
-          className='bg-background border-input flex h-9 w-full rounded-md border px-3 py-1 text-xs shadow-sm transition-colors'
+        </Label>
+        <Select
+          value={balanceLimitReset || 'none'}
+          onValueChange={(value) =>
+            setBalanceLimitReset(value === 'none' ? '' : value)
+          }
         >
-          <option value=''>None</option>
-          <option value='daily'>Daily</option>
-          <option value='weekly'>Weekly</option>
-          <option value='monthly'>Monthly</option>
-        </select>
+          <SelectTrigger className='h-9 w-full text-xs'>
+            <SelectValue placeholder='None' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='none'>None</SelectItem>
+            <SelectItem value='daily'>Daily</SelectItem>
+            <SelectItem value='weekly'>Weekly</SelectItem>
+            <SelectItem value='monthly'>Monthly</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
     </div>
   );
diff --git a/ui/components/landing/api-key-manager.tsx b/ui/components/landing/api-key-manager.tsx
index 17287155..d14f173e 100644
--- a/ui/components/landing/api-key-manager.tsx
+++ b/ui/components/landing/api-key-manager.tsx
@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
+import { WalletBalanceStats } from './wallet-balance-stats';
 import type { WalletSnapshot, ChildKeyInfo } from './key-info-details';
 import type { RefundReceipt } from './cashu-payment-workflow';
 
@@ -65,10 +66,6 @@ async function fetchWalletInfo(
   };
 }
 
-function formatMsats(msats: number): string {
-  return new Intl.NumberFormat('en-US').format(msats);
-}
-
 function formatSats(msats: number): string {
   return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
 }
@@ -179,13 +176,13 @@ export function ApiKeyManager({
           <RefreshCcw className='text-primary h-5 w-5' />
           API Key Management
         </CardTitle>
-        <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+        <p className='text-muted-foreground text-xs tracking-wide'>
           Manage your existing API keys and balances
         </p>
       </CardHeader>
       <CardContent className='space-y-6'>
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>Manage existing key</span>
             {walletInfo && (
               <span className='text-primary'>
@@ -226,43 +223,15 @@ export function ApiKeyManager({
 
           {showManageDetails && (
             <div className='space-y-4'>
-              <div className='grid gap-3 sm:grid-cols-2'>
-                <div className='rounded-lg border p-3'>
-                  <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                    Spendable
-                  </p>
-                  <p className='text-xl font-semibold'>
-                    {walletInfo
-                      ? `${formatSats(walletInfo.balanceMsats)} sats`
-                      : '—'}
-                  </p>
-                  {walletInfo && (
-                    <p className='text-muted-foreground text-xs'>
-                      {formatMsats(walletInfo.balanceMsats)} msats
-                    </p>
-                  )}
-                </div>
-                <div className='rounded-lg border p-3'>
-                  <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                    Reserved
-                  </p>
-                  <p className='text-xl font-semibold'>
-                    {walletInfo
-                      ? `${formatSats(walletInfo.reservedMsats)} sats`
-                      : '—'}
-                  </p>
-                  {walletInfo && (
-                    <p className='text-muted-foreground text-xs'>
-                      {formatMsats(walletInfo.reservedMsats)} msats
-                    </p>
-                  )}
-                </div>
-              </div>
+              <WalletBalanceStats
+                balanceMsats={walletInfo?.balanceMsats}
+                reservedMsats={walletInfo?.reservedMsats}
+              />
 
               <Separator />
 
               <div className='space-y-2'>
-                <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+                <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
                   <span>Refund remaining balance</span>
                 </header>
                 <div className='flex flex-wrap gap-2'>
diff --git a/ui/components/landing/cashu-payment-workflow.tsx b/ui/components/landing/cashu-payment-workflow.tsx
index caac7f78..8c09a660 100644
--- a/ui/components/landing/cashu-payment-workflow.tsx
+++ b/ui/components/landing/cashu-payment-workflow.tsx
@@ -9,6 +9,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
 import { KeyOptions } from '@/components/key-options';
+import { WalletBalanceStats } from './wallet-balance-stats';
 import type { ChildKeyInfo, WalletSnapshot } from './key-info-details';
 
 export type RefundReceipt = {
@@ -74,10 +75,6 @@ async function fetchWalletInfo(
   };
 }
 
-function formatMsats(msats: number): string {
-  return new Intl.NumberFormat('en-US').format(msats);
-}
-
 function formatSats(msats: number): string {
   return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
 }
@@ -312,13 +309,13 @@ export function CashuPaymentWorkflow({
           <KeyRound className='text-primary h-5 w-5' />
           API key workflow
         </CardTitle>
-        <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+        <p className='text-muted-foreground text-xs tracking-wide'>
           Sections expand as soon as you interact
         </p>
       </CardHeader>
       <CardContent className='space-y-6'>
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>1 · Create key</span>
             {showCreateDetails && (
               <span className='text-primary'>Cashu token detected</span>
@@ -362,7 +359,7 @@ export function CashuPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>2 · Manage key</span>
             {walletInfo && (
               <span className='text-primary'>
@@ -401,45 +398,17 @@ export function CashuPaymentWorkflow({
             </div>
           </div>
           {showManageDetails && (
-            <div className='grid gap-3 sm:grid-cols-2'>
-              <div className='rounded-lg border p-3'>
-                <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                  Spendable
-                </p>
-                <p className='text-xl font-semibold'>
-                  {walletInfo
-                    ? `${formatSats(walletInfo.balanceMsats)} sats`
-                    : '—'}
-                </p>
-                {walletInfo && (
-                  <p className='text-muted-foreground text-xs'>
-                    {formatMsats(walletInfo.balanceMsats)} msats
-                  </p>
-                )}
-              </div>
-              <div className='rounded-lg border p-3'>
-                <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                  Reserved
-                </p>
-                <p className='text-xl font-semibold'>
-                  {walletInfo
-                    ? `${formatSats(walletInfo.reservedMsats)} sats`
-                    : '—'}
-                </p>
-                {walletInfo && (
-                  <p className='text-muted-foreground text-xs'>
-                    {formatMsats(walletInfo.reservedMsats)} msats
-                  </p>
-                )}
-              </div>
-            </div>
+            <WalletBalanceStats
+              balanceMsats={walletInfo?.balanceMsats}
+              reservedMsats={walletInfo?.reservedMsats}
+            />
           )}
         </section>
 
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>3 · Top up</span>
             {showTopupDetails && (
               <span className={canTopup ? 'text-primary' : 'text-destructive'}>
@@ -482,7 +451,7 @@ export function CashuPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>4 · Refund</span>
           </header>
           <div className='flex flex-wrap gap-2'>
diff --git a/ui/components/landing/cheat-sheet.tsx b/ui/components/landing/cheat-sheet.tsx
index be2e2670..2136e7d5 100644
--- a/ui/components/landing/cheat-sheet.tsx
+++ b/ui/components/landing/cheat-sheet.tsx
@@ -9,6 +9,8 @@ import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ConfigurationService } from '@/lib/api/services/configuration';
 import {
@@ -165,7 +167,7 @@ export function CheatSheet(): JSX.Element {
   const refundToken = refundReceipt?.token ?? null;
 
   return (
-    <div className='from-background via-background to-muted min-h-screen bg-gradient-to-b'>
+    <div className='min-h-screen bg-background'>
       <main className='mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8'>
         <section className='relative space-y-3 text-center md:text-left'>
           <div className='absolute top-0 right-0 hidden md:block'>
@@ -173,7 +175,7 @@ export function CheatSheet(): JSX.Element {
               <a href='/login'>Admin</a>
             </Button>
           </div>
-          <div className='text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.65rem] tracking-wider uppercase'>
+          <div className='text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.65rem] tracking-wider'>
             <Bolt className='text-primary h-4 w-4' />
             Routstr cheat sheet
           </div>
@@ -195,7 +197,7 @@ export function CheatSheet(): JSX.Element {
                   <ShieldCheck className='text-primary h-4 w-4' />
                   Node identity
                 </CardTitle>
-                <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                <p className='text-muted-foreground text-xs tracking-wide'>
                   /v1/info snapshot
                 </p>
               </div>
@@ -212,9 +214,44 @@ export function CheatSheet(): JSX.Element {
             </CardHeader>
             <CardContent className='space-y-4'>
               {isInfoLoading && (
-                <p className='text-muted-foreground text-sm'>
-                  Loading node profile…
-                </p>
+                <div className='space-y-4'>
+                  <div className='space-y-2'>
+                    <Skeleton className='h-8 w-56 max-w-full' />
+                    <Skeleton className='h-4 w-80 max-w-full' />
+                  </div>
+                  <dl className='grid gap-4 sm:grid-cols-2'>
+                    <div className='space-y-2'>
+                      <Skeleton className='h-3 w-16' />
+                      <Skeleton className='h-5 w-24' />
+                    </div>
+                    <div className='space-y-2'>
+                      <Skeleton className='h-3 w-12' />
+                      <Skeleton className='h-5 w-40 max-w-full' />
+                    </div>
+                    <div className='space-y-2 sm:col-span-2'>
+                      <Skeleton className='h-3 w-12' />
+                      <Skeleton className='h-5 w-full max-w-[26rem]' />
+                    </div>
+                    <div className='space-y-2 sm:col-span-2'>
+                      <Skeleton className='h-3 w-10' />
+                      <div className='flex items-center gap-2'>
+                        <Skeleton className='h-5 flex-1 max-w-[28rem]' />
+                        <Skeleton className='h-7 w-7 rounded-md' />
+                      </div>
+                    </div>
+                  </dl>
+                  <div className='space-y-2'>
+                    <Skeleton className='h-3 w-20' />
+                    <div className='flex flex-wrap gap-2'>
+                      {Array.from({ length: 4 }).map((_, index) => (
+                        <Skeleton
+                          key={`mint-skeleton-${index}`}
+                          className='h-6 w-28 rounded-full'
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
               )}
               {isInfoError && !isInfoLoading && (
                 <p className='text-destructive text-sm'>
@@ -231,7 +268,7 @@ export function CheatSheet(): JSX.Element {
                   </div>
                   <dl className='grid gap-4 sm:grid-cols-2'>
                     <div>
-                      <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                      <dt className='text-muted-foreground text-xs tracking-wide'>
                         Version
                       </dt>
                       <dd className='text-base font-medium'>
@@ -239,7 +276,7 @@ export function CheatSheet(): JSX.Element {
                       </dd>
                     </div>
                     <div>
-                      <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                      <dt className='text-muted-foreground text-xs tracking-wide'>
                         HTTP
                       </dt>
                       <dd className='text-base font-medium break-all'>
@@ -248,7 +285,7 @@ export function CheatSheet(): JSX.Element {
                     </div>
                     {nodeInfo.onion_url && (
                       <div className='sm:col-span-2'>
-                        <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                        <dt className='text-muted-foreground text-xs tracking-wide'>
                           Onion
                         </dt>
                         <dd className='text-base font-medium break-all'>
@@ -258,7 +295,7 @@ export function CheatSheet(): JSX.Element {
                     )}
                     {nodeInfo.npub && (
                       <div className='sm:col-span-2'>
-                        <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                        <dt className='text-muted-foreground text-xs tracking-wide'>
                           npub
                         </dt>
                         <dd className='flex items-center gap-2 font-mono text-sm break-all'>
@@ -276,7 +313,7 @@ export function CheatSheet(): JSX.Element {
                     )}
                   </dl>
                   <div className='space-y-2'>
-                    <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                    <p className='text-muted-foreground text-xs tracking-wide'>
                       Cashu mints
                     </p>
                     <div className='flex flex-wrap gap-2'>
@@ -308,7 +345,7 @@ export function CheatSheet(): JSX.Element {
                 <Terminal className='text-primary h-4 w-4' />
                 Quick docs
               </CardTitle>
-              <span className='text-muted-foreground text-xs tracking-wide uppercase'>
+              <span className='text-muted-foreground text-xs tracking-wide'>
                 curl-ready
               </span>
             </CardHeader>
@@ -329,11 +366,12 @@ export function CheatSheet(): JSX.Element {
                   <Copy className='h-4 w-4' />
                 </Button>
               </div>
-              <div className='bg-muted rounded-lg p-4 font-mono text-sm leading-6'>
-                <pre className='break-all whitespace-pre-wrap'>
+              <ScrollArea className='bg-muted w-full rounded-lg border'>
+                <pre className='w-max min-w-full p-4 font-mono text-sm leading-6 whitespace-pre'>
                   {curlSnippet}
                 </pre>
-              </div>
+                <ScrollBar orientation='horizontal' />
+              </ScrollArea>
               <div className='flex gap-2'>
                 <Button
                   variant='secondary'
@@ -398,7 +436,7 @@ export function CheatSheet(): JSX.Element {
                 </CardHeader>
                 <CardContent className='space-y-2'>
                   <div className='bg-muted/30 space-y-2 rounded-lg border p-4'>
-                    <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+                    <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
                       <span>Cashu refund token</span>
                       <Button
                         variant='outline'
diff --git a/ui/components/landing/key-info-details.tsx b/ui/components/landing/key-info-details.tsx
index 95be32ab..d9262a09 100644
--- a/ui/components/landing/key-info-details.tsx
+++ b/ui/components/landing/key-info-details.tsx
@@ -216,7 +216,7 @@ export function KeyInfoDetails({
                 </div>
                 {walletInfo.parentKey && (
                   <div className='space-y-1'>
-                    <span className='text-muted-foreground text-xs tracking-wider uppercase'>
+                    <span className='text-muted-foreground text-xs tracking-wider'>
                       Parent Key
                     </span>
                     <div className='flex items-center gap-2'>
@@ -359,7 +359,7 @@ export function KeyInfoDetails({
                         </div>
                         <div className='grid grid-cols-2 gap-4 text-xs sm:grid-cols-5'>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Requests
                             </p>
                             <p className='font-mono font-medium'>
@@ -367,7 +367,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Spent
                             </p>
                             <p className='font-mono font-medium'>
@@ -375,7 +375,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Limit
                             </p>
                             <p className='font-mono font-medium'>
@@ -385,7 +385,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Policy
                             </p>
                             <p className='font-medium capitalize'>
@@ -393,7 +393,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Expires
                             </p>
                             <p className='font-medium'>
diff --git a/ui/components/landing/lightning-payment-workflow.tsx b/ui/components/landing/lightning-payment-workflow.tsx
index 8b9f9b0c..b113c1bf 100644
--- a/ui/components/landing/lightning-payment-workflow.tsx
+++ b/ui/components/landing/lightning-payment-workflow.tsx
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Separator } from '@/components/ui/separator';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { KeyOptions } from '@/components/key-options';
 import type { WalletSnapshot } from './key-info-details';
 
@@ -35,6 +36,24 @@ interface LightningPaymentWorkflowProps {
   onApiKeyCreated?: (apiKey: string, walletInfo: WalletSnapshot) => void;
 }
 
+interface InvoiceDetailsCardProps {
+  label: string;
+  amountSats: number;
+  bolt11: string;
+  qrCode: string;
+  waiting: boolean;
+  helperText: string;
+  onCopy: () => void;
+}
+
+interface ApiKeyResultAlertProps {
+  title: string;
+  description: string;
+  apiKey: string;
+  onCopy: () => void;
+  onDismiss: () => void;
+}
+
 function formatSats(msats: number): string {
   return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
 }
@@ -56,6 +75,86 @@ async function generateQRCodeSVG(text: string): Promise<string> {
   }
 }
 
+function InvoiceDetailsCard({
+  label,
+  amountSats,
+  bolt11,
+  qrCode,
+  waiting,
+  helperText,
+  onCopy,
+}: InvoiceDetailsCardProps): JSX.Element {
+  return (
+    <Card className='bg-muted/30 shadow-none'>
+      <CardContent className='space-y-3 p-4'>
+        <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
+          <span>
+            {label} ({amountSats} sats)
+          </span>
+          <Button variant='outline' size='sm' className='gap-1 text-xs' onClick={onCopy}>
+            <Copy className='h-3 w-3' />
+            Copy
+          </Button>
+        </div>
+
+        {waiting && (
+          <Alert>
+            <Loader2 className='h-4 w-4 animate-spin' />
+            <AlertDescription>Waiting for payment...</AlertDescription>
+          </Alert>
+        )}
+
+        {qrCode && (
+          <div className='flex justify-center'>
+            <Image
+              src={qrCode}
+              alt='QR Code'
+              className='h-48 w-48'
+              width={192}
+              height={192}
+              unoptimized
+            />
+          </div>
+        )}
+
+        <Textarea value={bolt11} readOnly rows={4} className='font-mono text-xs' />
+
+        <p className='text-muted-foreground text-center text-xs'>{helperText}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ApiKeyResultAlert({
+  title,
+  description,
+  apiKey,
+  onCopy,
+  onDismiss,
+}: ApiKeyResultAlertProps): JSX.Element {
+  return (
+    <Alert>
+      <CheckCircle className='h-4 w-4' />
+      <AlertTitle className='flex items-center justify-between gap-2'>
+        <span>{title}</span>
+        <Button variant='outline' size='sm' className='gap-1 text-xs' onClick={onCopy}>
+          <Copy className='h-3 w-3' />
+          Copy
+        </Button>
+      </AlertTitle>
+      <AlertDescription className='space-y-3'>
+        <Textarea value={apiKey} readOnly rows={2} className='font-mono text-xs' />
+        <div className='flex items-center justify-between gap-2'>
+          <span>{description}</span>
+          <Button variant='ghost' size='sm' className='h-6 px-2 text-xs' onClick={onDismiss}>
+            Dismiss
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 export function LightningPaymentWorkflow({
   baseUrl,
   onApiKeyCreated,
@@ -392,13 +491,13 @@ export function LightningPaymentWorkflow({
           <Zap className='text-primary h-5 w-5' />
           Lightning Payment Workflow
         </CardTitle>
-        <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+        <p className='text-muted-foreground text-xs tracking-wide'>
           Create and manage API keys using Lightning Network payments
         </p>
       </CardHeader>
       <CardContent className='space-y-6'>
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>1 · Create key with Lightning</span>
             {showCreateDetails && (
               <span className='text-primary'>Amount specified</span>
@@ -434,95 +533,25 @@ export function LightningPaymentWorkflow({
               </Button>
 
               {createInvoice && (
-                <div className='bg-muted/30 space-y-3 rounded-lg border p-4'>
-                  <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                    <span>
-                      Lightning Invoice ({createInvoice.amount_sats} sats)
-                    </span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 text-xs'
-                      onClick={() => handleCopy(createInvoice.bolt11)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  {isWaitingPayment && (
-                    <div className='flex items-center justify-center gap-2 rounded-lg border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950'>
-                      <Loader2 className='h-4 w-4 animate-spin text-orange-600' />
-                      <span className='text-sm font-medium text-orange-800 dark:text-orange-200'>
-                        Waiting for payment...
-                      </span>
-                    </div>
-                  )}
-
-                  {createQRCode && (
-                    <div className='flex justify-center'>
-                      <Image
-                        src={createQRCode}
-                        alt='QR Code'
-                        className='h-48 w-48'
-                        width={192}
-                        height={192}
-                        unoptimized
-                      />
-                    </div>
-                  )}
-
-                  <Textarea
-                    value={createInvoice.bolt11}
-                    readOnly
-                    rows={4}
-                    className='font-mono text-xs'
-                  />
-
-                  <p className='text-muted-foreground text-center text-xs'>
-                    Scan QR code or copy invoice. Payment will be detected
-                    automatically.
-                  </p>
-                </div>
+                <InvoiceDetailsCard
+                  label='Lightning Invoice'
+                  amountSats={createInvoice.amount_sats}
+                  bolt11={createInvoice.bolt11}
+                  qrCode={createQRCode}
+                  waiting={isWaitingPayment}
+                  helperText='Scan QR code or copy invoice. Payment will be detected automatically.'
+                  onCopy={() => handleCopy(createInvoice.bolt11)}
+                />
               )}
 
               {createdApiKey && (
-                <div className='space-y-3 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950'>
-                  <div className='flex items-center justify-between text-[0.7rem] tracking-wider text-green-700 uppercase dark:text-green-300'>
-                    <div className='flex items-center gap-2'>
-                      <CheckCircle className='h-4 w-4' />
-                      <span>API Key Created Successfully</span>
-                    </div>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 border-green-300 text-xs hover:bg-green-100 dark:border-green-700 dark:hover:bg-green-900'
-                      onClick={() => handleCopy(createdApiKey)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  <Textarea
-                    value={createdApiKey}
-                    readOnly
-                    rows={2}
-                    className='border-green-200 bg-white font-mono text-xs dark:border-green-800 dark:bg-green-950/50'
-                  />
-
-                  <div className='flex items-center justify-between text-xs text-green-700 dark:text-green-300'>
-                    <span>Your API key is ready to use!</span>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='h-6 px-2 text-xs text-green-700 hover:text-green-800 dark:text-green-300 dark:hover:text-green-200'
-                      onClick={() => setCreatedApiKey('')}
-                    >
-                      Dismiss
-                    </Button>
-                  </div>
-                </div>
+                <ApiKeyResultAlert
+                  title='API Key Created Successfully'
+                  description='Your API key is ready to use!'
+                  apiKey={createdApiKey}
+                  onCopy={() => handleCopy(createdApiKey)}
+                  onDismiss={() => setCreatedApiKey('')}
+                />
               )}
             </div>
           </div>
@@ -531,7 +560,7 @@ export function LightningPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>2 · Top up existing key</span>
             {showTopupDetails && (
               <span className='text-primary'>Ready to create invoice</span>
@@ -567,93 +596,25 @@ export function LightningPaymentWorkflow({
               </Button>
 
               {topupInvoice && (
-                <div className='bg-muted/30 space-y-3 rounded-lg border p-4'>
-                  <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                    <span>Topup Invoice ({topupInvoice.amount_sats} sats)</span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 text-xs'
-                      onClick={() => handleCopy(topupInvoice.bolt11)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  {topupQRCode && (
-                    <div className='flex justify-center'>
-                      <Image
-                        src={topupQRCode}
-                        alt='QR Code'
-                        className='h-48 w-48'
-                        width={192}
-                        height={192}
-                        unoptimized
-                      />
-                    </div>
-                  )}
-
-                  <Textarea
-                    value={topupInvoice.bolt11}
-                    readOnly
-                    rows={4}
-                    className='font-mono text-xs'
-                  />
-
-                  <p className='text-muted-foreground text-center text-xs'>
-                    Scan QR code or copy invoice. Balance will be added
-                    automatically.
-                  </p>
-
-                  {isWaitingTopupPayment && (
-                    <div className='flex items-center justify-center gap-2 rounded-lg border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950'>
-                      <Loader2 className='h-4 w-4 animate-spin text-orange-600' />
-                      <span className='text-sm font-medium text-orange-800 dark:text-orange-200'>
-                        Waiting for payment...
-                      </span>
-                    </div>
-                  )}
-                </div>
+                <InvoiceDetailsCard
+                  label='Topup Invoice'
+                  amountSats={topupInvoice.amount_sats}
+                  bolt11={topupInvoice.bolt11}
+                  qrCode={topupQRCode}
+                  waiting={isWaitingTopupPayment}
+                  helperText='Scan QR code or copy invoice. Balance will be added automatically.'
+                  onCopy={() => handleCopy(topupInvoice.bolt11)}
+                />
               )}
 
               {topupApiKeyResult && (
-                <div className='space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950'>
-                  <div className='flex items-center justify-between text-[0.7rem] tracking-wider text-blue-700 uppercase dark:text-blue-300'>
-                    <div className='flex items-center gap-2'>
-                      <CheckCircle className='h-4 w-4' />
-                      <span>Topup Successful</span>
-                    </div>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 border-blue-300 text-xs hover:bg-blue-100 dark:border-blue-700 dark:hover:bg-blue-900'
-                      onClick={() => handleCopy(topupApiKeyResult)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  <Textarea
-                    value={topupApiKeyResult}
-                    readOnly
-                    rows={2}
-                    className='border-blue-200 bg-white font-mono text-xs dark:border-blue-800 dark:bg-blue-950/50'
-                  />
-
-                  <div className='flex items-center justify-between text-xs text-blue-700 dark:text-blue-300'>
-                    <span>Balance has been added to your API key!</span>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='h-6 px-2 text-xs text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200'
-                      onClick={() => setTopupApiKeyResult('')}
-                    >
-                      Dismiss
-                    </Button>
-                  </div>
-                </div>
+                <ApiKeyResultAlert
+                  title='Topup Successful'
+                  description='Balance has been added to your API key!'
+                  apiKey={topupApiKeyResult}
+                  onCopy={() => handleCopy(topupApiKeyResult)}
+                  onDismiss={() => setTopupApiKeyResult('')}
+                />
               )}
             </div>
           )}
@@ -662,7 +623,7 @@ export function LightningPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>3 · Recover from invoice</span>
             {showRecoverDetails && (
               <span className='text-primary'>Invoice provided</span>
@@ -693,42 +654,13 @@ export function LightningPaymentWorkflow({
           )}
 
           {recoveredApiKey && (
-            <div className='space-y-3 rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-950'>
-              <div className='flex items-center justify-between text-[0.7rem] tracking-wider text-purple-700 uppercase dark:text-purple-300'>
-                <div className='flex items-center gap-2'>
-                  <CheckCircle className='h-4 w-4' />
-                  <span>API Key Recovered</span>
-                </div>
-                <Button
-                  variant='outline'
-                  size='sm'
-                  className='gap-1 border-purple-300 text-xs hover:bg-purple-100 dark:border-purple-700 dark:hover:bg-purple-900'
-                  onClick={() => handleCopy(recoveredApiKey)}
-                >
-                  <Copy className='h-3 w-3' />
-                  Copy
-                </Button>
-              </div>
-
-              <Textarea
-                value={recoveredApiKey}
-                readOnly
-                rows={2}
-                className='border-purple-200 bg-white font-mono text-xs dark:border-purple-800 dark:bg-purple-950/50'
-              />
-
-              <div className='flex items-center justify-between text-xs text-purple-700 dark:text-purple-300'>
-                <span>Your recovered API key is ready to use!</span>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-6 px-2 text-xs text-purple-700 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-200'
-                  onClick={() => setRecoveredApiKey('')}
-                >
-                  Dismiss
-                </Button>
-              </div>
-            </div>
+            <ApiKeyResultAlert
+              title='API Key Recovered'
+              description='Your recovered API key is ready to use!'
+              apiKey={recoveredApiKey}
+              onCopy={() => handleCopy(recoveredApiKey)}
+              onDismiss={() => setRecoveredApiKey('')}
+            />
           )}
         </section>
       </CardContent>
diff --git a/ui/components/landing/wallet-balance-stats.tsx b/ui/components/landing/wallet-balance-stats.tsx
new file mode 100644
index 00000000..dd940118
--- /dev/null
+++ b/ui/components/landing/wallet-balance-stats.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
+
+interface WalletBalanceStatsProps {
+  balanceMsats?: number;
+  reservedMsats?: number;
+}
+
+function formatMsats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(msats);
+}
+
+function formatSats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
+}
+
+function WalletMetricCard({
+  label,
+  valueMsats,
+}: {
+  label: string;
+  valueMsats?: number;
+}) {
+  const hasValue = typeof valueMsats === 'number';
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader className='p-3 pb-2'>
+        <CardDescription className='text-[0.65rem] tracking-wide'>
+          {label}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='px-3 pb-3 pt-0'>
+        <p className='text-xl font-semibold tabular-nums'>
+          {hasValue ? `${formatSats(valueMsats)} sats` : '-'}
+        </p>
+        {hasValue && (
+          <p className='text-muted-foreground text-xs tabular-nums'>
+            {formatMsats(valueMsats)} msats
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function WalletBalanceStats({
+  balanceMsats,
+  reservedMsats,
+}: WalletBalanceStatsProps) {
+  return (
+    <div className='grid gap-3 sm:grid-cols-2'>
+      <WalletMetricCard label='Spendable' valueMsats={balanceMsats} />
+      <WalletMetricCard label='Reserved' valueMsats={reservedMsats} />
+    </div>
+  );
+}
diff --git a/ui/components/model-item-card.tsx b/ui/components/model-item-card.tsx
new file mode 100644
index 00000000..9a581c58
--- /dev/null
+++ b/ui/components/model-item-card.tsx
@@ -0,0 +1,232 @@
+import type { Model } from '@/lib/api/schemas/models';
+import { formatCost } from '@/lib/services/cost-validation';
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Ban, CheckCircle, Edit3, MoreVertical, Trash2 } from 'lucide-react';
+
+interface ModelItemCardProps {
+  model: Model;
+  isSelected: boolean;
+  hasEffectiveApiKey: boolean;
+  hasIndividualSettings: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onToggleSelection: () => void;
+  onEdit: () => void;
+  onOverride: () => void;
+  onDisable: () => void;
+  onEnable: () => void;
+  onDelete: () => void;
+}
+
+export function ModelItemCard({
+  model,
+  isSelected,
+  hasEffectiveApiKey,
+  hasIndividualSettings,
+  onHoverStart,
+  onHoverEnd,
+  onToggleSelection,
+  onEdit,
+  onOverride,
+  onDisable,
+  onEnable,
+  onDelete,
+}: ModelItemCardProps) {
+  const modelSourceLabel =
+    model.api_key_type === 'remote' ? 'Remote' : 'Database';
+  const keySourceLabel = !hasEffectiveApiKey
+    ? 'No API key'
+    : hasIndividualSettings
+      ? 'Individual key'
+      : 'Group key';
+  const pricingLabel = model.is_free
+    ? 'Free'
+    : `Input ${formatCost(model.input_cost)} · Output ${formatCost(model.output_cost)}`;
+
+  return (
+    <Card
+      className={cn(
+        'relative overflow-hidden rounded-none border-0 bg-transparent py-0 shadow-none ring-0 transition-colors duration-150',
+        'hover:bg-muted/25',
+        isSelected && 'bg-primary/12',
+        model.soft_deleted && 'bg-muted/20 opacity-80'
+      )}
+      onMouseEnter={onHoverStart}
+      onMouseLeave={onHoverEnd}
+    >
+      <div className='flex items-center gap-2 px-2 py-1'>
+        <div>
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={onToggleSelection}
+            onClick={(event) => event.stopPropagation()}
+            className='border-border/90 data-checked:ring-primary/40 size-4 flex-shrink-0 data-checked:ring-2'
+          />
+        </div>
+
+        <div className='min-w-0 flex-1 px-0.5 text-left'>
+          <div className='grid min-w-0 items-center gap-x-3 gap-y-1 md:grid-cols-[minmax(170px,1fr)_72px_78px_92px_120px] lg:grid-cols-[minmax(170px,1fr)_72px_78px_92px_120px_240px]'>
+            <div className='min-w-0'>
+              <h3
+                className={cn(
+                  'min-w-0 truncate text-sm font-medium',
+                  model.soft_deleted && 'text-muted-foreground'
+                )}
+              >
+                {model.name}
+              </h3>
+            </div>
+
+            <div className='hidden md:block'>
+              <Badge
+                variant={model.soft_deleted ? 'secondary' : 'outline'}
+                className={cn(
+                  'h-5 w-[64px] justify-center px-1 text-[10px] leading-none',
+                  model.soft_deleted
+                    ? 'text-muted-foreground'
+                    : 'border-emerald-500/35 bg-emerald-500/10 text-emerald-500 dark:text-emerald-400'
+                )}
+              >
+                {model.soft_deleted ? 'Disabled' : 'Enabled'}
+              </Badge>
+            </div>
+
+            <span className='text-muted-foreground hidden text-xs capitalize md:block'>
+              {model.modelType}
+            </span>
+            <span className='text-muted-foreground hidden text-xs md:block'>
+              {modelSourceLabel}
+            </span>
+            <span
+              className={cn(
+                'text-muted-foreground hidden text-xs md:block',
+                !hasEffectiveApiKey && 'text-destructive'
+              )}
+            >
+              {keySourceLabel}
+            </span>
+            <span className='text-muted-foreground hidden truncate text-xs whitespace-nowrap lg:block'>
+              {pricingLabel}
+            </span>
+          </div>
+
+          <div className='text-muted-foreground mt-0.5 space-y-0.5 text-xs md:hidden'>
+            <div className='flex min-w-0 items-center gap-1.5'>
+              <Badge
+                variant={model.soft_deleted ? 'secondary' : 'outline'}
+                className={cn(
+                  'h-5 shrink-0 px-1 text-[10px] leading-none',
+                  model.soft_deleted
+                    ? 'text-muted-foreground'
+                    : 'border-emerald-500/35 bg-emerald-500/10 text-emerald-500 dark:text-emerald-400'
+                )}
+              >
+                {model.soft_deleted ? 'Disabled' : 'Enabled'}
+              </Badge>
+              <span className='opacity-50'>•</span>
+              <span className='capitalize'>{model.modelType}</span>
+              <span className='opacity-50'>•</span>
+              <span>{modelSourceLabel}</span>
+            </div>
+            <div className='flex min-w-0 items-center gap-1.5'>
+              <span
+                className={cn(
+                  'min-w-0 flex-1 truncate',
+                  !hasEffectiveApiKey && 'text-destructive'
+                )}
+              >
+                {keySourceLabel}
+              </span>
+              <span className='opacity-50'>•</span>
+              <span className='min-w-0 flex-1 truncate'>{pricingLabel}</span>
+            </div>
+          </div>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant='ghost'
+              size='icon-xs'
+              onClick={(event) => event.stopPropagation()}
+              className='hover:bg-muted/50 dark:hover:bg-muted/80 h-7 w-7 shrink-0 md:h-6 md:w-6'
+              aria-label={`Model actions for ${model.name}`}
+              title={`Model actions for ${model.name}`}
+            >
+              <MoreVertical className='text-muted-foreground hover:text-foreground h-4 w-4' />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='end' className='w-52'>
+            {model.api_key_type !== 'remote' && (
+              <DropdownMenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onEdit();
+                }}
+              >
+                <Edit3 className='mr-2 h-4 w-4' />
+                Edit Model
+              </DropdownMenuItem>
+            )}
+            {model.api_key_type === 'remote' && (
+              <DropdownMenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onOverride();
+                }}
+              >
+                <Edit3 className='mr-2 h-4 w-4' />
+                Override
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            {model.soft_deleted ? (
+              <DropdownMenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onEnable();
+                }}
+                className='text-foreground'
+              >
+                <CheckCircle className='mr-2 h-4 w-4' />
+                Enable Model
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onDisable();
+                }}
+                className='text-foreground'
+              >
+                <Ban className='mr-2 h-4 w-4' />
+                Disable Model
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem
+              onClick={(event) => {
+                event.stopPropagation();
+                onDelete();
+              }}
+              className='text-destructive focus:text-destructive'
+            >
+              <Trash2 className='mr-2 h-4 w-4' />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </Card>
+  );
+}
diff --git a/ui/components/model-provider-section.tsx b/ui/components/model-provider-section.tsx
new file mode 100644
index 00000000..2fab7064
--- /dev/null
+++ b/ui/components/model-provider-section.tsx
@@ -0,0 +1,214 @@
+import type { Model } from '@/lib/api/schemas/models';
+import type { AdminModelGroup } from '@/lib/api/services/admin';
+import { ModelItemCard } from '@/components/model-item-card';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  CheckSquare,
+  Edit3,
+  Globe,
+  Key,
+  MoreVertical,
+  RefreshCw,
+  Users,
+} from 'lucide-react';
+
+interface ModelProviderSectionProps {
+  provider: string;
+  providerModels: Model[];
+  filterProvider?: string;
+  groupData?: AdminModelGroup;
+  selectedModels: Set<string>;
+  onSelectProviderModels: () => void;
+  onDeselectProviderModels: () => void;
+  onEditGroup: () => void;
+  onRefreshProviderModels: () => void;
+  onDeleteAllProviderModels: () => void;
+  onModelHover: (modelId: string | null) => void;
+  onModelToggleSelection: (modelId: string) => void;
+  onEditModel: (model: Model) => void;
+  onOverrideModel: (model: Model) => void;
+  onEnableModel: (modelId: string) => void;
+  onDisableModel: (modelId: string) => void;
+  onDeleteModel: (modelId: string) => void;
+  hasEffectiveApiKey: (model: Model) => boolean;
+  hasIndividualSettings: (model: Model) => boolean;
+}
+
+export function ModelProviderSection({
+  provider,
+  providerModels,
+  filterProvider,
+  groupData,
+  selectedModels,
+  onSelectProviderModels,
+  onDeselectProviderModels,
+  onEditGroup,
+  onRefreshProviderModels,
+  onDeleteAllProviderModels,
+  onModelHover,
+  onModelToggleSelection,
+  onEditModel,
+  onOverrideModel,
+  onEnableModel,
+  onDisableModel,
+  onDeleteModel,
+  hasEffectiveApiKey,
+  hasIndividualSettings,
+}: ModelProviderSectionProps) {
+  const allProviderSelected = providerModels.every((model) =>
+    selectedModels.has(model.id)
+  );
+  const someProviderSelected = providerModels.some((model) =>
+    selectedModels.has(model.id)
+  );
+
+  if (filterProvider) {
+    return (
+      <div className='bg-card/35 divide-border/55 border-border/60 divide-y overflow-hidden rounded-lg border'>
+        {providerModels.map((model) => (
+          <ModelItemCard
+            key={model.id}
+            model={model}
+            isSelected={selectedModels.has(model.id)}
+            hasEffectiveApiKey={hasEffectiveApiKey(model)}
+            hasIndividualSettings={hasIndividualSettings(model)}
+            onHoverStart={() => onModelHover(model.id)}
+            onHoverEnd={() => onModelHover(null)}
+            onToggleSelection={() => onModelToggleSelection(model.id)}
+            onEdit={() => onEditModel(model)}
+            onOverride={() => onOverrideModel(model)}
+            onDisable={() => onDisableModel(model.id)}
+            onEnable={() => onEnableModel(model.id)}
+            onDelete={() => onDeleteModel(model.id)}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <Card className='overflow-hidden'>
+      <CardHeader className='px-3 pb-2.5 sm:px-6 sm:pb-3'>
+        <div className='flex items-start justify-between gap-2 sm:gap-3'>
+          <div className='flex min-w-0 items-start gap-2.5 sm:gap-3'>
+            <Checkbox
+              checked={
+                allProviderSelected
+                  ? true
+                  : someProviderSelected
+                    ? 'indeterminate'
+                    : false
+              }
+              onCheckedChange={(checked) => {
+                if (checked === true) {
+                  onSelectProviderModels();
+                  return;
+                }
+
+                onDeselectProviderModels();
+              }}
+              className='border-border/90 data-checked:ring-primary/35 mt-0.5 size-4 data-checked:ring-2 sm:mt-1 sm:size-5'
+              aria-label={`Select models for provider ${provider}`}
+            />
+            <div className='min-w-0'>
+              <CardTitle className='flex items-center gap-1.5 text-base sm:gap-2 sm:text-lg'>
+                <Users className='h-5 w-5' />
+                <span className='truncate'>{provider}</span>
+                <span className='text-muted-foreground text-sm font-normal'>
+                  ({providerModels.length} models)
+                </span>
+              </CardTitle>
+              <CardDescription className='mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs sm:text-sm'>
+                {groupData?.group_url ? (
+                  <span className='inline-flex items-center gap-1 break-all'>
+                    <Globe className='h-3 w-3' />
+                    {groupData.group_url}
+                  </span>
+                ) : (
+                  'Using default endpoint'
+                )}
+                {groupData?.group_api_key && (
+                  <span className='flex items-center gap-1'>
+                    <Key className='h-3 w-3' />
+                    Group API Key
+                  </span>
+                )}
+              </CardDescription>
+            </div>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant='ghost'
+                size='icon'
+                className='h-7 w-7 sm:h-8 sm:w-8'
+                aria-label={`Provider actions for ${provider}`}
+                title={`Provider actions for ${provider}`}
+              >
+                <MoreVertical className='h-4 w-4' />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end' className='w-64 sm:w-72'>
+              <DropdownMenuItem onClick={onEditGroup}>
+                <Edit3 className='mr-2 h-4 w-4' />
+                Edit Group
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={onSelectProviderModels}>
+                <CheckSquare className='mr-2 h-4 w-4' />
+                Select All
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={onRefreshProviderModels}>
+                <RefreshCw className='mr-2 h-4 w-4' />
+                Refresh Models
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={onDeleteAllProviderModels}
+                className='text-muted-foreground focus:text-foreground'
+              >
+                Delete all overrides
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardHeader>
+
+      <CardContent className='px-3 pt-0 pb-3 sm:px-6 sm:pb-6'>
+        <div className='bg-card/35 divide-border/55 border-border/60 divide-y overflow-hidden rounded-lg border'>
+          {providerModels.map((model) => (
+            <ModelItemCard
+              key={model.id}
+              model={model}
+              isSelected={selectedModels.has(model.id)}
+              hasEffectiveApiKey={hasEffectiveApiKey(model)}
+              hasIndividualSettings={hasIndividualSettings(model)}
+              onHoverStart={() => onModelHover(model.id)}
+              onHoverEnd={() => onModelHover(null)}
+              onToggleSelection={() => onModelToggleSelection(model.id)}
+              onEdit={() => onEditModel(model)}
+              onOverride={() => onOverrideModel(model)}
+              onDisable={() => onDisableModel(model.id)}
+              onEnable={() => onEnableModel(model.id)}
+              onDelete={() => onDeleteModel(model.id)}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/ui/components/ModelSearchFilter.tsx b/ui/components/model-search-filter.tsx
similarity index 70%
rename from ui/components/ModelSearchFilter.tsx
rename to ui/components/model-search-filter.tsx
index d8a6e4b7..c4756829 100644
--- a/ui/components/ModelSearchFilter.tsx
+++ b/ui/components/model-search-filter.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useMemo } from 'react';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import {
   Select,
   SelectContent,
@@ -97,17 +98,22 @@ export function ModelSearchFilter({
 
   const hasActiveFilters =
     searchQuery.trim() !== '' || sortOption !== 'name-asc';
+  const searchInputId = 'model-search-filter-input';
 
   return (
     <div
       className={cn(
-        'flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-3',
+        'flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center',
         className
       )}
     >
-      <div className='relative flex-1'>
+      <div className='relative w-full min-w-0 flex-1'>
+        <Label htmlFor={searchInputId} className='sr-only'>
+          Search models
+        </Label>
         <Search className='text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2' />
         <Input
+          id={searchInputId}
           placeholder='Search models by name, provider, or description...'
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
@@ -115,32 +121,36 @@ export function ModelSearchFilter({
         />
       </div>
 
-      <div className='flex items-center gap-2'>
-        <Select
-          value={sortOption}
-          onValueChange={(value: SortOption) => setSortOption(value)}
-        >
-          <SelectTrigger className='w-full sm:w-[180px]'>
-            <Filter className='mr-2 h-4 w-4' />
-            <SelectValue placeholder='Sort by' />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value='name-asc'>Name (A-Z)</SelectItem>
-            <SelectItem value='name-desc'>Name (Z-A)</SelectItem>
-            <SelectItem value='price-asc'>Price (Low to High)</SelectItem>
-            <SelectItem value='price-desc'>Price (High to Low)</SelectItem>
-          </SelectContent>
-        </Select>
+      <div className='flex items-center gap-2 sm:shrink-0'>
+        <div className='min-w-0 flex-1 sm:flex-none'>
+          <Select
+            value={sortOption}
+            onValueChange={(value: SortOption) => setSortOption(value)}
+          >
+            <SelectTrigger className='h-8 w-full sm:w-[170px]'>
+              <Filter className='mr-2 h-4 w-4' />
+              <SelectValue placeholder='Sort by' />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value='name-asc'>Name (A-Z)</SelectItem>
+              <SelectItem value='name-desc'>Name (Z-A)</SelectItem>
+              <SelectItem value='price-asc'>Price (Low to High)</SelectItem>
+              <SelectItem value='price-desc'>Price (High to Low)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
         {hasActiveFilters && (
           <Button
-            variant='outline'
-            size='icon'
+            variant='ghost'
+            size='sm'
             onClick={clearFilters}
-            className='h-9 w-9'
+            className='h-8 shrink-0 px-2 sm:size-8 sm:px-0'
+            aria-label='Clear model filters'
             title='Clear filters'
           >
-            <X className='h-4 w-4' />
+            <X className='hidden h-4 w-4 sm:block' />
+            <span className='text-xs sm:hidden'>Clear</span>
           </Button>
         )}
       </div>
diff --git a/ui/components/model-selector.tsx b/ui/components/model-selector.tsx
new file mode 100644
index 00000000..c082c465
--- /dev/null
+++ b/ui/components/model-selector.tsx
@@ -0,0 +1,1006 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { type Model, type GroupSettings } from '@/lib/api/schemas/models';
+import {
+  AdminService,
+  type AdminModelGroup,
+  type AdminModel,
+} from '@/lib/api/services/admin';
+type ModelGroup = AdminModelGroup;
+import { AddProviderModelDialog } from '@/components/add-provider-model-dialog';
+import { EditGroupForm } from '@/components/edit-group-form';
+import { ModelProviderSection } from '@/components/model-provider-section';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Trash2, Ban, CheckCircle, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  sortModels,
+  groupAndSortModelsByProvider,
+} from '@/lib/utils/model-sort';
+
+interface ModelSelectorProps {
+  filterProvider?: string;
+  groupData?: ModelGroup;
+  filteredModels?: Model[];
+  showDeleteAllButton?: boolean;
+}
+
+const modelQueryKeys = [
+  ['models-with-providers'],
+  ['all-provider-models'],
+  ['upstream-providers'],
+] as const;
+
+const toAdminModelFromModel = (
+  model: Model,
+  providerId: number,
+  enabled: boolean
+): AdminModel => {
+  const createdAt = Date.parse(model.createdAt);
+  const created = Number.isNaN(createdAt)
+    ? Math.floor(Date.now() / 1000)
+    : Math.floor(createdAt / 1000);
+
+  return {
+    id: model.id,
+    name: model.name,
+    description: model.description || '',
+    created,
+    context_length: model.contextLength || 4096,
+    architecture: {
+      modality: model.modelType || 'text',
+      input_modalities: [model.modelType || 'text'],
+      output_modalities: [model.modelType || 'text'],
+      tokenizer: '',
+      instruct_type: null,
+    },
+    pricing: {
+      prompt: model.input_cost,
+      completion: model.output_cost,
+      request: model.min_cost_per_request,
+      image: 0,
+      web_search: 0,
+      internal_reasoning: 0,
+    },
+    per_request_limits: null,
+    top_provider: null,
+    upstream_provider_id: providerId,
+    enabled,
+    alias_ids: model.alias_ids || null,
+  };
+};
+
+const groupModelsByProviderId = (selectedModelsList: Model[]) =>
+  selectedModelsList.reduce<Record<string, Model[]>>((acc, model) => {
+    const providerId = model.provider_id || 'unknown';
+    if (!acc[providerId]) {
+      acc[providerId] = [];
+    }
+    acc[providerId].push(model);
+    return acc;
+  }, {});
+
+const isOverrideModel = (model: Model): boolean =>
+  model.api_key_type !== 'remote' && Boolean(model.provider_id);
+
+export function ModelSelector({
+  filterProvider,
+  groupData,
+  filteredModels: propFilteredModels,
+  showDeleteAllButton = false,
+}: ModelSelectorProps) {
+  const [, setHoveredModelId] = useState<string | null>(null);
+  const [editingGroup, setEditingGroup] = useState<{
+    provider: string;
+    models: Model[];
+    groupData: ModelGroup;
+  } | null>(null);
+  const [modelDialogState, setModelDialogState] = useState<{
+    isOpen: boolean;
+    providerId: number | null;
+    mode: 'create' | 'edit' | 'override';
+    initialData?: AdminModel | null;
+  }>({
+    isOpen: false,
+    providerId: null,
+    mode: 'create',
+    initialData: null,
+  });
+
+  // Bulk selection state
+  const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set());
+  const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
+  const [deleteAllDialogOpen, setDeleteAllDialogOpen] = useState(false);
+
+  const queryClient = useQueryClient();
+
+  // Fetch models and groups
+  const {
+    data: modelsData,
+    isLoading: isLoadingModels,
+    error: modelsError,
+    refetch: refetchModels,
+  } = useQuery({
+    queryKey: ['models-with-providers'],
+    queryFn: () => AdminService.getModelsWithProviders(),
+    refetchOnWindowFocus: false,
+  });
+
+  const { models = [], groups = [] } = modelsData || {};
+  const allOverrideModels = useMemo(
+    () => models.filter(isOverrideModel),
+    [models]
+  );
+
+  // Filter models by provider if specified
+  const providerFilteredModels = useMemo(() => {
+    if (!filterProvider) return models;
+    return models.filter((model) => model.provider === filterProvider);
+  }, [models, filterProvider]);
+
+  const visibleModels = useMemo(
+    () =>
+      propFilteredModels !== undefined
+        ? propFilteredModels
+        : providerFilteredModels,
+    [propFilteredModels, providerFilteredModels]
+  );
+
+  React.useEffect(() => {
+    setSelectedModels((current) => {
+      if (current.size === 0) {
+        return current;
+      }
+
+      const visibleIds = new Set(visibleModels.map((model) => model.id));
+      const next = new Set(
+        Array.from(current).filter((modelId) => visibleIds.has(modelId))
+      );
+
+      return next.size === current.size ? current : next;
+    });
+  }, [visibleModels]);
+
+  const invalidateModelCaches = () => {
+    modelQueryKeys.forEach((queryKey) => {
+      queryClient.invalidateQueries({ queryKey });
+    });
+  };
+
+  // Bulk deletion mutations
+  const bulkDeleteMutation = useMutation({
+    mutationFn: async (modelIds: string[]) => {
+      const selectedModelsList = models.filter((m) => modelIds.includes(m.id));
+      const modelsByProvider = groupModelsByProviderId(selectedModelsList);
+
+      let totalDeleted = 0;
+      for (const [providerId, providerModels] of Object.entries(
+        modelsByProvider
+      )) {
+        if (providerId === 'unknown') {
+          continue;
+        }
+        const modelFullNames = providerModels.map((m) => m.id);
+        const result = await AdminService.deleteModels(
+          modelFullNames,
+          providerId
+        );
+        totalDeleted += result.deleted_count;
+      }
+
+      return { deleted_count: totalDeleted, message: 'Models deleted' };
+    },
+    onSuccess: (data) => {
+      toast.success(
+        `Successfully deleted ${data.deleted_count} model overrides`
+      );
+      setSelectedModels(new Set());
+      invalidateModelCaches();
+    },
+    onError: (error) => {
+      toast.error(`Failed to delete model overrides: ${error.message}`);
+    },
+  });
+
+  // Bulk soft deletion mutations (disable models)
+  const bulkSoftDeleteMutation = useMutation({
+    mutationFn: async (modelIds: string[]) => {
+      const selectedModelsList = models.filter((m) => modelIds.includes(m.id));
+      const modelsByProvider = groupModelsByProviderId(selectedModelsList);
+
+      let totalDisabled = 0;
+      for (const [providerId, providerModels] of Object.entries(
+        modelsByProvider
+      )) {
+        if (providerId === 'unknown') {
+          continue;
+        }
+
+        for (const model of providerModels) {
+          const providerIdNum = parseInt(providerId);
+          try {
+            const existingModel = await AdminService.getProviderModel(
+              providerIdNum,
+              model.id
+            );
+            await AdminService.updateProviderModel(providerIdNum, model.id, {
+              ...existingModel,
+              enabled: false,
+            });
+            totalDisabled++;
+          } catch (fetchError: unknown) {
+            const error = fetchError as { message?: string; status?: number };
+            if (error.message?.includes('404') || error.status === 404) {
+              const newOverride = toAdminModelFromModel(
+                model,
+                providerIdNum,
+                false
+              );
+              await AdminService.createProviderModel(
+                providerIdNum,
+                newOverride
+              );
+              totalDisabled++;
+            }
+          }
+        }
+      }
+
+      return { deleted_count: totalDisabled, message: 'Models disabled' };
+    },
+    onSuccess: (data) => {
+      toast.success(`Successfully disabled ${data.deleted_count} models`);
+      setSelectedModels(new Set());
+      invalidateModelCaches();
+    },
+    onError: (error) => {
+      toast.error(`Failed to disable models: ${error.message}`);
+    },
+  });
+
+  const deleteAllOverridesMutation = useMutation({
+    mutationFn: async () => {
+      const modelsByProvider = groupModelsByProviderId(allOverrideModels);
+      let totalDeleted = 0;
+
+      for (const [providerId, providerModels] of Object.entries(
+        modelsByProvider
+      )) {
+        if (providerId === 'unknown' || providerModels.length === 0) {
+          continue;
+        }
+
+        const result = await AdminService.deleteModels(
+          providerModels.map((model) => model.id),
+          providerId
+        );
+        totalDeleted += result.deleted_count;
+      }
+
+      return {
+        deleted_count: totalDeleted,
+        message: 'Model overrides deleted',
+      };
+    },
+    onSuccess: (data) => {
+      toast.success(
+        `Successfully permanently deleted ${data.deleted_count} model overrides`
+      );
+      setSelectedModels(new Set());
+      invalidateModelCaches();
+    },
+    onError: (error) => {
+      toast.error(
+        `Failed to permanently delete all model overrides: ${error.message}`
+      );
+    },
+  });
+
+  const deleteOverridesByProviderMutation = useMutation({
+    mutationFn: async ({
+      providerId,
+      modelIds,
+    }: {
+      providerId: string;
+      modelIds: string[];
+    }) => {
+      if (modelIds.length === 0) {
+        return {
+          deleted_count: 0,
+          message: 'No model overrides to delete',
+        };
+      }
+      return AdminService.deleteModels(modelIds, providerId);
+    },
+    onSuccess: (data) => {
+      toast.success(
+        `Successfully permanently deleted ${data.deleted_count} model overrides from provider`
+      );
+      setSelectedModels(new Set());
+      invalidateModelCaches();
+    },
+    onError: (error) => {
+      toast.error(
+        `Failed to permanently delete provider overrides: ${error.message}`
+      );
+    },
+  });
+
+  // Restore model mutation (enable model)
+  const restoreMutation = useMutation({
+    mutationFn: async (modelId: string) => {
+      const model = models.find((m) => m.id === modelId);
+      if (!model) {
+        throw new Error('Model not found');
+      }
+
+      if (!model.provider_id) {
+        throw new Error('Provider ID not available for this model');
+      }
+
+      const providerId = parseInt(model.provider_id);
+      const existingModel = await AdminService.getProviderModel(
+        providerId,
+        model.id
+      );
+
+      await AdminService.updateProviderModel(providerId, model.id, {
+        ...existingModel,
+        enabled: true,
+      });
+
+      return { restored_count: 1 };
+    },
+    onSuccess: () => {
+      toast.success('Model enabled successfully');
+      invalidateModelCaches();
+    },
+    onError: (error) => {
+      toast.error(`Failed to enable model: ${error.message}`);
+    },
+  });
+
+  // Bulk restore mutation (enable models)
+  const bulkRestoreMutation = useMutation({
+    mutationFn: async (modelIds: string[]) => {
+      const selectedModelsList = models.filter((m) => modelIds.includes(m.id));
+      const modelsByProvider = groupModelsByProviderId(selectedModelsList);
+
+      let totalEnabled = 0;
+      for (const [providerId, providerModels] of Object.entries(
+        modelsByProvider
+      )) {
+        if (providerId === 'unknown') {
+          continue;
+        }
+
+        for (const model of providerModels) {
+          const providerIdNum = parseInt(providerId);
+          try {
+            const existingModel = await AdminService.getProviderModel(
+              providerIdNum,
+              model.id
+            );
+            await AdminService.updateProviderModel(providerIdNum, model.id, {
+              ...existingModel,
+              enabled: true,
+            });
+            totalEnabled++;
+          } catch {
+            toast.error(`Failed to enable model ${model.full_name}`);
+          }
+        }
+      }
+
+      return { restored_count: totalEnabled, message: 'Models enabled' };
+    },
+    onSuccess: (data) => {
+      toast.success(`Successfully enabled ${data.restored_count} models`);
+      setSelectedModels(new Set());
+      invalidateModelCaches();
+    },
+    onError: (error) => {
+      toast.error(`Failed to enable models: ${error.message}`);
+    },
+  });
+
+  // Group models by provider for better organization (only if not filtering)
+  const groupedModels = useMemo(() => {
+    if (filterProvider) {
+      const sortedModels = sortModels(visibleModels);
+      return sortedModels.length > 0 ? { [filterProvider]: sortedModels } : {};
+    }
+
+    if (!visibleModels) return {};
+
+    return groupAndSortModelsByProvider(visibleModels);
+  }, [visibleModels, filterProvider]);
+
+  // Create a map of provider names to group data
+  const groupDataMap = useMemo(() => {
+    return new Map(groups.map((group) => [group.provider, group]));
+  }, [groups]);
+
+  // Group settings for compatibility
+  const groupSettings = useMemo(() => {
+    const settings: Record<
+      string,
+      { group_api_key?: string; group_url?: string }
+    > = {};
+    groups.forEach((group) => {
+      settings[group.provider] = {
+        group_api_key: group.group_api_key,
+        group_url: group.group_url,
+      };
+    });
+    return settings;
+  }, [groups]);
+
+  // Utility function to get effective API key for a model
+  const getEffectiveApiKey = (model: Model): string | undefined => {
+    if (model.api_key) {
+      return model.api_key; // Individual key takes precedence
+    }
+    return groupSettings[model.provider]?.group_api_key; // Fallback to group key
+  };
+
+  // Utility function to check if model has truly individual settings different from group
+  const hasIndividualSettings = (model: Model): boolean => {
+    const groupData = groupDataMap.get(model.provider);
+
+    // Check if API key is different from group
+    const hasIndividualApiKey = !!(
+      model.api_key &&
+      typeof model.api_key === 'string' &&
+      model.api_key !== groupData?.group_api_key
+    );
+
+    // Check if URL is different from group (excluding relative paths like "/v1/chat/completions")
+    const hasIndividualUrl = !!(
+      model.url &&
+      typeof model.url === 'string' &&
+      !model.url.startsWith('/') &&
+      model.url !== groupData?.group_url
+    );
+
+    return hasIndividualApiKey || hasIndividualUrl;
+  };
+
+  const handleAddModelClick = (providerId: number) => {
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'create',
+      initialData: null,
+    });
+  };
+
+  const handleEditModelClick = (model: Model) => {
+    if (!model.provider_id) {
+      toast.error('Provider ID missing for model');
+      return;
+    }
+    const providerId = parseInt(model.provider_id);
+
+    const adminModel = toAdminModelFromModel(
+      model,
+      providerId,
+      model.isEnabled
+    );
+
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'edit',
+      initialData: adminModel,
+    });
+  };
+
+  const handleOverrideModelClick = (model: Model) => {
+    if (!model.provider_id) {
+      toast.error('Provider ID missing for model');
+      return;
+    }
+    const providerId = parseInt(model.provider_id);
+
+    const adminModel = toAdminModelFromModel(
+      model,
+      providerId,
+      model.isEnabled
+    );
+
+    setModelDialogState({
+      isOpen: true,
+      providerId,
+      mode: 'override',
+      initialData: adminModel,
+    });
+  };
+
+  // Handle model update
+  const handleModelUpdate = async () => {
+    await refetchModels();
+  };
+
+  // Handle group update
+  const handleGroupUpdate = async (
+    oldProvider: string,
+    updatedData: GroupSettings
+  ) => {
+    try {
+      const groupData = groupDataMap.get(oldProvider);
+      if (groupData) {
+        await AdminService.updateModelGroup(groupData.id, {
+          provider: updatedData.provider,
+          group_api_key: updatedData.group_api_key || undefined,
+          group_url: updatedData.group_url || undefined,
+        });
+        await refetchModels();
+        setEditingGroup(null);
+        toast.success('Group updated successfully!');
+      }
+    } catch {
+      toast.error('Failed to update group. Please try again.');
+    }
+  };
+
+  // Handle provider-specific refresh using group credentials
+  const handleProviderRefresh = async (provider: string) => {
+    const groupData = groupDataMap.get(provider);
+    if (!groupData?.id) {
+      toast.error('No group configuration found for this provider');
+      return;
+    }
+
+    try {
+      const response = await AdminService.refreshModels({
+        provider_id: groupData.id,
+      });
+
+      toast.info(response.message);
+      await refetchModels();
+      invalidateModelCaches();
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to refresh ${provider} models: ${errorMessage}`);
+    }
+  };
+
+  // Bulk selection utilities
+  const toggleModelSelection = (modelId: string) => {
+    const newSelected = new Set(selectedModels);
+    if (newSelected.has(modelId)) {
+      newSelected.delete(modelId);
+    } else {
+      newSelected.add(modelId);
+    }
+    setSelectedModels(newSelected);
+  };
+
+  const selectAllModels = () => {
+    setSelectedModels(new Set(visibleModels.map((model) => model.id)));
+  };
+
+  const deselectAllModels = () => {
+    setSelectedModels(new Set());
+  };
+
+  const allVisibleModelsSelected =
+    visibleModels.length > 0 &&
+    visibleModels.every((model) => selectedModels.has(model.id));
+  const someVisibleModelsSelected =
+    !allVisibleModelsSelected && selectedModels.size > 0;
+  const selectedSoftDeletedModelIds = visibleModels
+    .filter((model) => selectedModels.has(model.id) && model.soft_deleted)
+    .map((model) => model.id);
+
+  const selectProviderModels = (provider: string) => {
+    const providerModelIds = visibleModels
+      .filter((m) => m.provider === provider)
+      .map((m) => m.id);
+    const newSelected = new Set(selectedModels);
+    providerModelIds.forEach((id) => newSelected.add(id));
+    setSelectedModels(newSelected);
+  };
+
+  // Bulk operation handlers
+  const handleBulkDelete = () => {
+    setBulkDeleteDialogOpen(true);
+  };
+
+  const confirmBulkDelete = () => {
+    bulkDeleteMutation.mutate(Array.from(selectedModels));
+    setBulkDeleteDialogOpen(false);
+  };
+
+  const handleBulkSoftDelete = () => {
+    bulkSoftDeleteMutation.mutate(Array.from(selectedModels));
+  };
+
+  const handleDeleteAll = () => {
+    if (allOverrideModels.length === 0) {
+      toast.info('No model overrides to delete');
+      return;
+    }
+    setDeleteAllDialogOpen(true);
+  };
+
+  const confirmDeleteAll = () => {
+    deleteAllOverridesMutation.mutate();
+    setDeleteAllDialogOpen(false);
+  };
+
+  const handleDeleteByProvider = (provider: string) => {
+    const group = groupDataMap.get(provider);
+    if (!group?.id) {
+      toast.error('No provider configuration found');
+      return;
+    }
+
+    const providerOverrideIds = models
+      .filter(
+        (model) => model.provider_id === group.id && isOverrideModel(model)
+      )
+      .map((model) => model.id);
+
+    if (providerOverrideIds.length === 0) {
+      toast.info('No model overrides to delete for this provider');
+      return;
+    }
+
+    deleteOverridesByProviderMutation.mutate({
+      providerId: group.id,
+      modelIds: providerOverrideIds,
+    });
+  };
+
+  // Individual model deletion handler
+  const handleDeleteModel = async (modelId: string) => {
+    const model = models.find((m) => m.id === modelId);
+    if (!model) {
+      toast.error('Model not found');
+      return;
+    }
+
+    if (!model.provider_id) {
+      toast.error('Provider ID not available for this model');
+      return;
+    }
+
+    try {
+      const providerId = parseInt(model.provider_id);
+      await AdminService.deleteProviderModel(providerId, model.id);
+      toast.success('Model override deleted successfully');
+      invalidateModelCaches();
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to delete model override: ${errorMessage}`);
+    }
+  };
+
+  // Individual model soft deletion handler (disable model)
+  const handleSoftDeleteModel = async (modelId: string) => {
+    const model = models.find((m) => m.id === modelId);
+    if (!model) {
+      toast.error('Model not found');
+      return;
+    }
+
+    if (!model.provider_id) {
+      toast.error('Provider ID not available for this model');
+      return;
+    }
+
+    try {
+      const providerId = parseInt(model.provider_id);
+
+      try {
+        const existingModel = await AdminService.getProviderModel(
+          providerId,
+          model.id
+        );
+
+        await AdminService.updateProviderModel(providerId, model.id, {
+          ...existingModel,
+          enabled: false,
+        });
+        toast.success('Model disabled successfully');
+      } catch (fetchError: unknown) {
+        const error = fetchError as { message?: string; status?: number };
+        if (error.message?.includes('404') || error.status === 404) {
+          const newOverride = toAdminModelFromModel(model, providerId, false);
+
+          await AdminService.createProviderModel(providerId, newOverride);
+          toast.success('Model disabled successfully');
+        } else {
+          throw fetchError;
+        }
+      }
+
+      invalidateModelCaches();
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to disable model: ${errorMessage}`);
+    }
+  };
+
+  if (isLoadingModels) {
+    return (
+      <div className='grid gap-4'>
+        <Skeleton className='h-[200px]' />
+        <Skeleton className='h-[200px]' />
+      </div>
+    );
+  }
+
+  if (modelsError) {
+    return (
+      <Alert variant='destructive'>
+        <AlertDescription>
+          Error loading models. Please try again later.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className='grid gap-3 sm:gap-4'>
+      <div className='flex flex-col gap-2.5'>
+        <div className='flex flex-col gap-2.5 xl:flex-row xl:items-center xl:justify-between'>
+          <div className='flex flex-wrap items-center gap-1'>
+            <label className='inline-flex h-7 cursor-pointer items-center gap-2 px-1 text-xs font-medium select-none sm:h-8 sm:px-1.5 sm:text-sm'>
+              <Checkbox
+                checked={
+                  allVisibleModelsSelected
+                    ? true
+                    : someVisibleModelsSelected
+                      ? 'indeterminate'
+                      : false
+                }
+                onCheckedChange={(checked) => {
+                  if (checked === true) {
+                    selectAllModels();
+                    return;
+                  }
+
+                  deselectAllModels();
+                }}
+                className='border-border/90 data-checked:ring-primary/35 size-5 data-checked:ring-2'
+                aria-label='Select all visible models'
+              />
+              <span>Select all</span>
+            </label>
+
+            {groupData && (
+              <Button
+                onClick={() => handleAddModelClick(parseInt(groupData.id))}
+                variant='ghost'
+                size='sm'
+                className='h-7 gap-1.5 px-2 text-xs sm:h-7 sm:px-2.5 sm:text-[0.8rem]'
+              >
+                <Plus className='h-4 w-4' />
+                Add model
+              </Button>
+            )}
+
+            {showDeleteAllButton && (
+              <Button
+                onClick={handleDeleteAll}
+                variant='ghost'
+                size='sm'
+                className='text-muted-foreground hover:text-foreground h-7 px-2 text-xs sm:h-7 sm:px-2.5 sm:text-[0.8rem]'
+                aria-label='Delete all overrides'
+                disabled={
+                  allOverrideModels.length === 0 ||
+                  deleteAllOverridesMutation.isPending
+                }
+              >
+                Delete all overrides
+              </Button>
+            )}
+          </div>
+
+          {selectedModels.size > 0 && (
+            <div className='-mx-1 flex items-center gap-1.5 overflow-x-auto px-1 pb-1 sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 sm:pb-0'>
+              <span className='text-muted-foreground shrink-0 text-xs sm:text-sm'>
+                {selectedModels.size} selected
+              </span>
+
+              {selectedSoftDeletedModelIds.length > 0 && (
+                <Button
+                  onClick={() =>
+                    bulkRestoreMutation.mutate(selectedSoftDeletedModelIds)
+                  }
+                  variant='outline'
+                  size='sm'
+                  className='shrink-0 gap-1.5'
+                  disabled={bulkRestoreMutation.isPending}
+                >
+                  <CheckCircle className='h-4 w-4' />
+                  Enable ({selectedSoftDeletedModelIds.length})
+                </Button>
+              )}
+
+              <Button
+                onClick={handleBulkSoftDelete}
+                variant='outline'
+                size='sm'
+                className='shrink-0 gap-1.5'
+                disabled={bulkSoftDeleteMutation.isPending}
+              >
+                <Ban className='h-4 w-4' />
+                Disable
+              </Button>
+
+              <Button
+                onClick={handleBulkDelete}
+                variant='outline'
+                size='sm'
+                className='border-destructive/30 text-destructive hover:bg-destructive/10 hover:text-destructive shrink-0 gap-1.5'
+                disabled={bulkDeleteMutation.isPending}
+              >
+                <Trash2 className='h-4 w-4' />
+                Delete
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {Object.keys(groupedModels).length === 0 ? (
+        <div className='border-border/40 rounded-lg border border-dashed p-4 text-center sm:p-5'>
+          <p className='text-muted-foreground text-sm'>
+            Try broadening your search or switch to a different provider scope.
+          </p>
+        </div>
+      ) : null}
+
+      {/* Provider Groups or Filtered Models */}
+      {Object.entries(groupedModels).map(([provider, providerModels]) => {
+        if (filterProvider && provider !== filterProvider) return null;
+
+        const groupData = groupDataMap.get(provider);
+
+        return (
+          <ModelProviderSection
+            key={provider}
+            provider={provider}
+            providerModels={providerModels}
+            filterProvider={filterProvider}
+            groupData={groupData}
+            selectedModels={selectedModels}
+            onSelectProviderModels={() => selectProviderModels(provider)}
+            onDeselectProviderModels={() => {
+              const providerModelIds = providerModels.map((model) => model.id);
+              const newSelected = new Set(selectedModels);
+              providerModelIds.forEach((id) => newSelected.delete(id));
+              setSelectedModels(newSelected);
+            }}
+            onEditGroup={() => {
+              if (groupData) {
+                setEditingGroup({
+                  provider,
+                  models: providerModels,
+                  groupData,
+                });
+              }
+            }}
+            onRefreshProviderModels={() => handleProviderRefresh(provider)}
+            onDeleteAllProviderModels={() => handleDeleteByProvider(provider)}
+            onModelHover={setHoveredModelId}
+            onModelToggleSelection={toggleModelSelection}
+            onEditModel={handleEditModelClick}
+            onOverrideModel={handleOverrideModelClick}
+            onEnableModel={(modelId) => restoreMutation.mutate(modelId)}
+            onDisableModel={handleSoftDeleteModel}
+            onDeleteModel={handleDeleteModel}
+            hasEffectiveApiKey={(model) => Boolean(getEffectiveApiKey(model))}
+            hasIndividualSettings={hasIndividualSettings}
+          />
+        );
+      })}
+
+      {/* Forms and Dialogs */}
+      {modelDialogState.providerId && (
+        <AddProviderModelDialog
+          providerId={modelDialogState.providerId}
+          isOpen={modelDialogState.isOpen}
+          onClose={() =>
+            setModelDialogState((prev) => ({ ...prev, isOpen: false }))
+          }
+          onSuccess={handleModelUpdate}
+          initialData={modelDialogState.initialData}
+          mode={modelDialogState.mode}
+        />
+      )}
+
+      {editingGroup && (
+        <EditGroupForm
+          provider={editingGroup.provider}
+          models={editingGroup.models}
+          groupSettings={{
+            group_api_key: editingGroup.groupData.group_api_key,
+            group_url: editingGroup.groupData.group_url,
+          }}
+          onGroupUpdate={handleGroupUpdate}
+          onCancel={() => setEditingGroup(null)}
+          isOpen={!!editingGroup}
+        />
+      )}
+
+      {/* Confirmation Dialogs */}
+      <AlertDialog
+        open={bulkDeleteDialogOpen}
+        onOpenChange={setBulkDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Permanently Delete Selected Models
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to permanently delete {selectedModels.size}{' '}
+              selected models? This will completely remove them from the
+              database and cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmBulkDelete}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
+              Delete Models
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={deleteAllDialogOpen}
+        onOpenChange={setDeleteAllDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Permanently Delete All Model Overrides
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to permanently delete ALL model overrides?
+              This will remove {allOverrideModels.length} override entries from
+              the database while keeping provider catalog models. This action
+              cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteAll}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
+              Delete All Overrides
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/ui/components/ModelTester.tsx b/ui/components/model-tester.tsx
similarity index 96%
rename from ui/components/ModelTester.tsx
rename to ui/components/model-tester.tsx
index 870ee030..d978422d 100644
--- a/ui/components/ModelTester.tsx
+++ b/ui/components/model-tester.tsx
@@ -6,6 +6,7 @@ import { type Model } from '@/lib/api/schemas/models';
 import { ModelService } from '@/lib/api/services/models';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
   Card,
@@ -131,13 +132,10 @@ export function ModelTester({ models }: ModelTesterProps) {
       setResponse(null);
 
       try {
-        console.log(`Testing model via proxy: ${selectedModel.name}`);
-        console.log('Request payload:', request);
-
         const response = await ModelService.testModel(
           selectedModel.id,
           'chat-completions',
-          request as unknown as Record<string, unknown>
+          request
         );
 
         if (!response.success) {
@@ -245,7 +243,7 @@ export function ModelTester({ models }: ModelTesterProps) {
             <div className='text-muted-foreground bg-muted space-y-2 rounded-md p-3 text-sm'>
               <div className='flex items-center gap-2'>
                 <Globe className='h-4 w-4' />
-                <span>
+                <span className='break-all'>
                   <strong>Endpoint:</strong> {credentials.endpointUrl}
                 </span>
               </div>
@@ -301,19 +299,19 @@ export function ModelTester({ models }: ModelTesterProps) {
         <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
           <div className='space-y-2'>
             <Label htmlFor='max-tokens'>Max Tokens</Label>
-            <input
+            <Input
               id='max-tokens'
               type='number'
               min={1}
               max={4000}
               value={maxTokens}
               onChange={(e) => setMaxTokens(parseInt(e.target.value) || 150)}
-              className='border-input bg-background w-full rounded-md border px-3 py-2 text-sm'
+              name='max_tokens'
             />
           </div>
           <div className='space-y-2'>
             <Label htmlFor='temperature'>Temperature</Label>
-            <input
+            <Input
               id='temperature'
               type='number'
               min={0}
@@ -323,7 +321,7 @@ export function ModelTester({ models }: ModelTesterProps) {
               onChange={(e) =>
                 setTemperature(parseFloat(e.target.value) || 0.7)
               }
-              className='border-input bg-background w-full rounded-md border px-3 py-2 text-sm'
+              name='temperature'
             />
           </div>
         </div>
@@ -406,7 +404,7 @@ export function ModelTester({ models }: ModelTesterProps) {
             {response.usage && (
               <div className='space-y-2'>
                 <Label>Usage Statistics</Label>
-                <div className='grid grid-cols-3 gap-4 text-sm'>
+                <div className='grid grid-cols-1 gap-2 text-sm sm:grid-cols-3 sm:gap-4'>
                   <div className='bg-muted rounded p-2 text-center'>
                     <div className='font-semibold'>
                       {response.usage.prompt_tokens}
diff --git a/ui/components/nav-main.tsx b/ui/components/nav-main.tsx
index 09121532..9b2ac51a 100644
--- a/ui/components/nav-main.tsx
+++ b/ui/components/nav-main.tsx
@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import { type LucideIcon } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 
 import {
   SidebarGroup,
@@ -20,13 +21,24 @@ export function NavMain({
     icon: LucideIcon;
   }[];
 }) {
+  const pathname = usePathname();
+
   return (
-    <SidebarGroup>
+    <SidebarGroup className='px-0'>
       <SidebarGroupContent>
-        <SidebarMenu>
+        <SidebarMenu className='gap-1.5'>
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton tooltip={item.title} asChild>
+              <SidebarMenuButton
+                tooltip={item.title}
+                asChild
+                className='h-11 rounded-xl px-3 text-[0.95rem]'
+                isActive={
+                  item.url === '/'
+                    ? pathname === '/'
+                    : pathname === item.url || pathname.startsWith(`${item.url}/`)
+                }
+              >
                 <Link href={item.url}>
                   <item.icon />
                   <span>{item.title}</span>
diff --git a/ui/components/nav-secondary.tsx b/ui/components/nav-secondary.tsx
index 13c4eed6..1bfbb166 100644
--- a/ui/components/nav-secondary.tsx
+++ b/ui/components/nav-secondary.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import Link from 'next/link';
 import { LucideIcon } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 
 import {
   SidebarGroup,
@@ -11,9 +12,11 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@/components/ui/sidebar';
+import { cn } from '@/lib/utils';
 
 export function NavSecondary({
   items,
+  className,
   ...props
 }: {
   items: {
@@ -22,13 +25,24 @@ export function NavSecondary({
     icon: LucideIcon;
   }[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  const pathname = usePathname();
+
   return (
-    <SidebarGroup {...props}>
+    <SidebarGroup className={cn('px-0', className)} {...props}>
       <SidebarGroupContent>
-        <SidebarMenu>
+        <SidebarMenu className='gap-1.5'>
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild tooltip={item.title}>
+              <SidebarMenuButton
+                asChild
+                tooltip={item.title}
+                className='h-11 rounded-xl px-3 text-[0.95rem]'
+                isActive={
+                  item.url === '/'
+                    ? pathname === '/'
+                    : pathname === item.url || pathname.startsWith(`${item.url}/`)
+                }
+              >
                 <Link href={item.url}>
                   <item.icon />
                   <span>{item.title}</span>
diff --git a/ui/components/nav-user.tsx b/ui/components/nav-user.tsx
index 2f22f33b..754490bc 100644
--- a/ui/components/nav-user.tsx
+++ b/ui/components/nav-user.tsx
@@ -24,7 +24,7 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from '@/components/ui/sidebar';
-import { useAuth } from '@/lib/auth/AuthContext';
+import { useAuth } from '@/lib/auth/auth-context';
 import { useRouter } from 'next/navigation';
 
 type NavUserProps = {
diff --git a/ui/components/page-header.tsx b/ui/components/page-header.tsx
new file mode 100644
index 00000000..f4d69b56
--- /dev/null
+++ b/ui/components/page-header.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  icon,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between',
+        className
+      )}
+    >
+      <div className='min-w-0 space-y-1'>
+        <div className='flex items-center gap-2'>
+          {icon ? <span className='text-muted-foreground shrink-0'>{icon}</span> : null}
+          <h2 className='text-xl font-semibold tracking-tight sm:text-2xl'>{title}</h2>
+        </div>
+        {description ? (
+          <p className='text-muted-foreground text-sm leading-relaxed'>{description}</p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className='flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end [&>*]:w-full sm:[&>*]:w-auto'>
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/ui/components/provider-balance.tsx b/ui/components/provider-balance.tsx
new file mode 100644
index 00000000..8d669f56
--- /dev/null
+++ b/ui/components/provider-balance.tsx
@@ -0,0 +1,291 @@
+'use client';
+
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CheckCircle2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { AdminService } from '@/lib/api/services/admin';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface ProviderBalanceProps {
+  providerId: number;
+  platformUrl?: string | null;
+}
+
+export function ProviderBalance({ providerId, platformUrl }: ProviderBalanceProps) {
+  const [isTopupDialogOpen, setIsTopupDialogOpen] = useState(false);
+  const [topupAmount, setTopupAmount] = useState('');
+  const [topupError, setTopupError] = useState('');
+  const [isHovered, setIsHovered] = useState(false);
+  const [invoiceData, setInvoiceData] = useState<{
+    payment_request: string;
+    invoice_id: string;
+  } | null>(null);
+  const [paymentStatus, setPaymentStatus] = useState<'pending' | 'paid' | null>(
+    null
+  );
+  const queryClient = useQueryClient();
+
+  const {
+    data: balanceData,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['provider-balance', providerId],
+    queryFn: () => AdminService.getProviderBalance(providerId),
+    refetchInterval: 30000,
+    refetchOnWindowFocus: true,
+    retry: 1,
+  });
+
+  const { data: statusData } = useQuery({
+    queryKey: ['topup-status', providerId, invoiceData?.invoice_id],
+    queryFn: () =>
+      AdminService.checkTopupStatus(providerId, invoiceData!.invoice_id),
+    enabled: !!invoiceData && paymentStatus === 'pending',
+    refetchInterval: 2000,
+  });
+
+  useEffect(() => {
+    if (statusData?.paid === true) {
+      setPaymentStatus('paid');
+      queryClient.invalidateQueries({
+        queryKey: ['provider-balance', providerId],
+      });
+      toast.success('Payment received!', {
+        description: 'Your balance has been updated.',
+      });
+    }
+  }, [statusData, queryClient, providerId]);
+
+  const topupMutation = useMutation({
+    mutationFn: async (amount: number) => {
+      const result = await AdminService.initiateProviderTopup(providerId, amount);
+      return result;
+    },
+    onSuccess: (data) => {
+      if (data?.topup_data?.payment_request && data?.topup_data?.invoice_id) {
+        setInvoiceData({
+          payment_request: data.topup_data.payment_request as string,
+          invoice_id: data.topup_data.invoice_id as string,
+        });
+        setPaymentStatus('pending');
+      } else {
+        toast.error('No invoice returned from provider');
+        setIsTopupDialogOpen(false);
+      }
+    },
+    onError: (error: Error) => {
+      toast.error(`Failed to initiate top-up: ${error.message}`);
+    },
+  });
+
+  const handleTopup = () => {
+    const amount = parseFloat(topupAmount);
+
+    if (isNaN(amount)) {
+      setTopupError('Please enter a valid amount');
+      return;
+    }
+
+    if (amount < 1 || amount > 500) {
+      setTopupError('Amount must be between $1 and $500');
+      return;
+    }
+
+    topupMutation.mutate(amount);
+  };
+
+  const handleTopUpClick = () => {
+    if (
+      platformUrl &&
+      (platformUrl.includes('openrouter.ai') || platformUrl.includes('openai.com'))
+    ) {
+      window.open(platformUrl, '_blank');
+      return;
+    }
+
+    setIsTopupDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsTopupDialogOpen(false);
+    setTopupAmount('');
+    setTopupError('');
+    setInvoiceData(null);
+    setPaymentStatus(null);
+  };
+
+  if (isLoading) {
+    return <Skeleton className='h-9 w-24' />;
+  }
+
+  if (
+    error ||
+    !balanceData?.ok ||
+    balanceData.balance_data === undefined ||
+    balanceData.balance_data === null
+  ) {
+    return null;
+  }
+
+  const balance = balanceData.balance_data;
+  let displayValue = 'N/A';
+
+  if (typeof balance === 'number') {
+    displayValue = `$${balance.toFixed(2)}`;
+  } else if (balance && typeof balance === 'object') {
+    const b = balance as Record<string, unknown>;
+    if (typeof b.balance === 'number') {
+      displayValue = `$${b.balance.toFixed(2)}`;
+    } else if (typeof b.balance === 'string') {
+      displayValue = b.balance;
+    } else if (b.amount !== undefined) {
+      displayValue = `$${Number(b.amount).toFixed(2)}`;
+    }
+  }
+
+  return (
+    <>
+      <Button
+        variant='outline'
+        size='sm'
+        onClick={handleTopUpClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className='w-full font-mono sm:w-auto'
+      >
+        {isHovered ? 'Top Up' : displayValue}
+      </Button>
+
+      <Dialog open={isTopupDialogOpen} onOpenChange={handleCloseDialog}>
+        <DialogContent className='sm:max-w-md'>
+          <DialogHeader>
+            <DialogTitle>
+              {paymentStatus === 'paid' ? 'Payment Confirmed!' : 'Top Up Balance'}
+            </DialogTitle>
+            <DialogDescription>
+              {paymentStatus === 'paid'
+                ? 'Your account balance has been updated.'
+                : invoiceData
+                  ? 'Scan the QR code or copy the Lightning invoice to pay.'
+                  : 'Enter the amount you want to add to your account balance.'}
+            </DialogDescription>
+          </DialogHeader>
+
+          {paymentStatus === 'paid' ? (
+            <div className='flex flex-col items-center gap-4 py-6'>
+              <Badge className='gap-1.5 px-3 py-1'>
+                <CheckCircle2 className='h-4 w-4' />
+                Top-up Successful
+              </Badge>
+              <p className='text-muted-foreground text-center text-sm'>
+                Your provider balance has been updated.
+              </p>
+            </div>
+          ) : invoiceData ? (
+            <div className='flex flex-col items-center gap-4 py-4'>
+              <div className='rounded-lg border p-2'>
+                <Image
+                  src={`https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=${encodeURIComponent(
+                    invoiceData.payment_request
+                  )}`}
+                  alt='Lightning invoice QR code'
+                  width={256}
+                  height={256}
+                  className='h-56 w-56 sm:h-64 sm:w-64'
+                  unoptimized
+                />
+              </div>
+              <div className='w-full space-y-2'>
+                <Label htmlFor='invoice'>Lightning Invoice</Label>
+                <div className='flex flex-col gap-2 sm:flex-row'>
+                  <Input
+                    id='invoice'
+                    value={invoiceData.payment_request}
+                    readOnly
+                    className='font-mono text-xs'
+                  />
+                  <Button
+                    size='sm'
+                    variant='outline'
+                    onClick={() => {
+                      navigator.clipboard.writeText(invoiceData.payment_request);
+                      toast.success('Invoice copied to clipboard!');
+                    }}
+                    className='w-full sm:w-auto'
+                  >
+                    Copy
+                  </Button>
+                </div>
+              </div>
+              {paymentStatus === 'pending' && (
+                <p className='text-muted-foreground text-center text-sm'>
+                  Waiting for payment...
+                </p>
+              )}
+            </div>
+          ) : (
+            <div className='grid gap-4 py-4'>
+              <div className='grid gap-2'>
+                <Label htmlFor='topup_amount'>Amount (USD)</Label>
+                <Input
+                  id='topup_amount'
+                  type='number'
+                  placeholder='Enter amount (1-500)'
+                  value={topupAmount}
+                  onChange={(e) => {
+                    setTopupAmount(e.target.value);
+                    setTopupError('');
+                  }}
+                  min='1'
+                  max='500'
+                  step='0.01'
+                />
+                {topupError && <p className='text-destructive text-sm'>{topupError}</p>}
+              </div>
+            </div>
+          )}
+
+          <DialogFooter>
+            {paymentStatus === 'paid' ? (
+              <Button onClick={handleCloseDialog} className='w-full'>
+                Done
+              </Button>
+            ) : invoiceData ? (
+              <Button variant='outline' onClick={handleCloseDialog} className='w-full'>
+                Cancel
+              </Button>
+            ) : (
+              <>
+                <Button variant='outline' onClick={handleCloseDialog} className='w-full sm:w-auto'>
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleTopup}
+                  disabled={topupMutation.isPending || !topupAmount}
+                  className='w-full sm:w-auto'
+                >
+                  {topupMutation.isPending ? 'Processing...' : 'Generate Invoice'}
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/ui/components/provider-card.tsx b/ui/components/provider-card.tsx
new file mode 100644
index 00000000..12d6917c
--- /dev/null
+++ b/ui/components/provider-card.tsx
@@ -0,0 +1,153 @@
+import type {
+  AdminModel,
+  ProviderModels,
+  UpstreamProvider,
+} from '@/lib/api/services/admin';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { ChevronDown, ChevronUp, Database, Pencil, Trash2 } from 'lucide-react';
+import { ProviderBalance } from '@/components/provider-balance';
+import { ProviderModelsPanel } from '@/components/provider-models-panel';
+
+interface ProviderCardProps {
+  provider: UpstreamProvider;
+  isExpanded: boolean;
+  canShowBalance: boolean;
+  platformUrl: string | null;
+  isModelsLoading: boolean;
+  providerModels: ProviderModels | null;
+  isDeletingModel: boolean;
+  onToggleExpansion: () => void;
+  onEditProvider: () => void;
+  onDeleteProvider: () => void;
+  onBatchOverride: () => void;
+  onAddModel: () => void;
+  onEditModel: (model: AdminModel) => void;
+  onDeleteModel: (modelId: string) => void;
+  onOverrideModel: (model: AdminModel) => void;
+}
+
+export function ProviderCard({
+  provider,
+  isExpanded,
+  canShowBalance,
+  platformUrl,
+  isModelsLoading,
+  providerModels,
+  isDeletingModel,
+  onToggleExpansion,
+  onEditProvider,
+  onDeleteProvider,
+  onBatchOverride,
+  onAddModel,
+  onEditModel,
+  onDeleteModel,
+  onOverrideModel,
+}: ProviderCardProps) {
+  const hasDetails = Boolean(provider.api_version) || isExpanded;
+
+  return (
+    <Card size='sm' className='border-border/70 bg-card/55'>
+      <CardHeader className='pb-2'>
+        <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+          <div className='min-w-0 flex-1'>
+            <div className='flex flex-col gap-2 sm:flex-row sm:items-center'>
+              <CardTitle className='truncate text-base sm:text-lg'>
+                {provider.provider_type}
+              </CardTitle>
+              <Badge
+                variant={provider.enabled ? 'default' : 'secondary'}
+                className='w-fit sm:ml-2'
+              >
+                {provider.enabled ? 'Enabled' : 'Disabled'}
+              </Badge>
+            </div>
+            <CardDescription className='mt-1 break-all text-xs sm:text-sm'>
+              {provider.base_url}
+            </CardDescription>
+          </div>
+
+          <div className='grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:justify-end'>
+            {canShowBalance && provider.api_key && (
+              <div className='col-span-2 sm:col-auto'>
+                <ProviderBalance providerId={provider.id} platformUrl={platformUrl} />
+              </div>
+            )}
+
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onToggleExpansion}
+              className='col-span-2 h-9 justify-between px-3 sm:col-auto sm:h-8 sm:justify-center'
+            >
+              <span className='inline-flex items-center gap-1.5'>
+                <Database className='h-4 w-4' />
+                <span>Models</span>
+              </span>
+              {isExpanded ? (
+                <ChevronUp className='h-4 w-4' />
+              ) : (
+                <ChevronDown className='h-4 w-4' />
+              )}
+            </Button>
+
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onEditProvider}
+              className='h-9 justify-center gap-1.5 px-3 sm:h-8'
+            >
+              <Pencil className='h-4 w-4' />
+              <span>Edit</span>
+            </Button>
+
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onDeleteProvider}
+              className='text-destructive hover:text-destructive h-9 justify-center gap-1.5 px-3 sm:h-8'
+            >
+              <Trash2 className='h-4 w-4' />
+              <span>Delete</span>
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+
+      {hasDetails ? (
+        <CardContent className='pt-1'>
+          <div className='space-y-3'>
+            {provider.api_version && (
+              <div className='flex flex-col gap-1 text-sm sm:flex-row sm:items-center sm:justify-between'>
+                <span className='text-muted-foreground'>API Version:</span>
+                <span className='font-mono break-all'>{provider.api_version}</span>
+              </div>
+            )}
+
+            {isExpanded && (
+              <div className='mt-3 border-t pt-3'>
+                <ProviderModelsPanel
+                  isLoading={isModelsLoading}
+                  providerModels={providerModels}
+                  onBatchOverride={onBatchOverride}
+                  onAddModel={onAddModel}
+                  onEditModel={onEditModel}
+                  onDeleteModel={onDeleteModel}
+                  onOverrideModel={onOverrideModel}
+                  isDeletingModel={isDeletingModel}
+                />
+              </div>
+            )}
+          </div>
+        </CardContent>
+      ) : null}
+    </Card>
+  );
+}
diff --git a/ui/components/provider-form-dialog-content.tsx b/ui/components/provider-form-dialog-content.tsx
new file mode 100644
index 00000000..96464f0c
--- /dev/null
+++ b/ui/components/provider-form-dialog-content.tsx
@@ -0,0 +1,77 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { CreateUpstreamProvider, ProviderType } from '@/lib/api/services/admin';
+import { Button } from '@/components/ui/button';
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ProviderFormFields } from '@/components/provider-form-fields';
+
+interface ProviderFormDialogContentProps {
+  mode: 'create' | 'edit';
+  title: string;
+  description: string;
+  submitLabel: string;
+  submittingLabel: string;
+  formData: CreateUpstreamProvider;
+  setFormData: Dispatch<SetStateAction<CreateUpstreamProvider>>;
+  providerTypes: ProviderType[];
+  providerFeePlaceholder: string;
+  docsLinkClassName: string;
+  canCreateAccount: boolean;
+  isCreatingAccount: boolean;
+  onCreateAccount: () => void;
+  onCancel: () => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+}
+
+export function ProviderFormDialogContent({
+  mode,
+  title,
+  description,
+  submitLabel,
+  submittingLabel,
+  formData,
+  setFormData,
+  providerTypes,
+  providerFeePlaceholder,
+  docsLinkClassName,
+  canCreateAccount,
+  isCreatingAccount,
+  onCreateAccount,
+  onCancel,
+  onSubmit,
+  isSubmitting,
+}: ProviderFormDialogContentProps) {
+  return (
+    <DialogContent className='max-h-[90vh] overflow-y-auto sm:max-w-[500px]'>
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <ProviderFormFields
+        mode={mode}
+        formData={formData}
+        setFormData={setFormData}
+        providerTypes={providerTypes}
+        providerFeePlaceholder={providerFeePlaceholder}
+        docsLinkClassName={docsLinkClassName}
+        canCreateAccount={canCreateAccount}
+        isCreatingAccount={isCreatingAccount}
+        onCreateAccount={onCreateAccount}
+      />
+      <DialogFooter>
+        <Button variant='outline' onClick={onCancel} className='w-full sm:w-auto'>
+          Cancel
+        </Button>
+        <Button onClick={onSubmit} disabled={isSubmitting} className='w-full sm:w-auto'>
+          {isSubmitting ? submittingLabel : submitLabel}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
diff --git a/ui/components/provider-form-fields.tsx b/ui/components/provider-form-fields.tsx
new file mode 100644
index 00000000..7cffe923
--- /dev/null
+++ b/ui/components/provider-form-fields.tsx
@@ -0,0 +1,194 @@
+'use client';
+
+import type { Dispatch, SetStateAction } from 'react';
+import type { CreateUpstreamProvider, ProviderType } from '@/lib/api/services/admin';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+
+interface ProviderFormFieldsProps {
+  mode: 'create' | 'edit';
+  formData: CreateUpstreamProvider;
+  setFormData: Dispatch<SetStateAction<CreateUpstreamProvider>>;
+  providerTypes: ProviderType[];
+  providerFeePlaceholder: string;
+  docsLinkClassName: string;
+  canCreateAccount: boolean;
+  isCreatingAccount: boolean;
+  onCreateAccount: () => void;
+}
+
+export function ProviderFormFields({
+  mode,
+  formData,
+  setFormData,
+  providerTypes,
+  providerFeePlaceholder,
+  docsLinkClassName,
+  canCreateAccount,
+  isCreatingAccount,
+  onCreateAccount,
+}: ProviderFormFieldsProps) {
+  const idPrefix = mode === 'edit' ? 'edit_' : '';
+  const providerType = providerTypes.find((pt) => pt.id === formData.provider_type);
+  const hasFixedBaseUrl = providerType?.fixed_base_url || false;
+  const platformUrl = providerType?.platform_url || null;
+  const isGenericType = (type: ProviderType) => type.id.toLowerCase() === 'generic';
+  const nonGenericTypes = providerTypes.filter((type) => !isGenericType(type));
+  const genericType = providerTypes.find((type) => isGenericType(type));
+  const apiKeyLabel =
+    mode === 'edit' ? 'API Key (leave blank to keep current)' : 'API Key';
+  const apiKeyPlaceholder =
+    mode === 'edit' ? 'Leave blank to keep current' : 'sk-...';
+
+  return (
+    <div className='grid gap-4 py-4'>
+      <div className='grid gap-2'>
+        <Label htmlFor={`${idPrefix}provider_type`}>Provider Type</Label>
+        <Select
+          value={formData.provider_type}
+          onValueChange={(value) => {
+            const selectedType = providerTypes.find((pt) => pt.id === value);
+            setFormData((prev) => ({
+              ...prev,
+              provider_type: value,
+              base_url: selectedType?.default_base_url || '',
+              provider_fee: value === 'openrouter' ? 1.06 : 1.01,
+            }));
+          }}
+        >
+          <SelectTrigger id={`${idPrefix}provider_type`}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {nonGenericTypes.map((type) => (
+              <SelectItem key={type.id} value={type.id}>
+                {type.name}
+              </SelectItem>
+            ))}
+            {genericType ? (
+              <>
+                {nonGenericTypes.length > 0 ? (
+                  <SelectSeparator className='my-1.5 opacity-70' />
+                ) : null}
+                <SelectItem value={genericType.id} className='font-medium'>
+                  Custom
+                </SelectItem>
+              </>
+            ) : null}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className='grid gap-2'>
+        <Label htmlFor={`${idPrefix}base_url`}>Base URL</Label>
+        <Input
+          id={`${idPrefix}base_url`}
+          value={formData.base_url}
+          onChange={(e) =>
+            setFormData((prev) => ({ ...prev, base_url: e.target.value }))
+          }
+          placeholder='https://api.example.com/v1'
+          disabled={hasFixedBaseUrl}
+          className={hasFixedBaseUrl ? 'cursor-not-allowed opacity-60' : ''}
+        />
+      </div>
+
+      <div className='grid gap-2'>
+        <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
+          <Label htmlFor={`${idPrefix}api_key`}>{apiKeyLabel}</Label>
+          {mode === 'create' && canCreateAccount ? (
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={onCreateAccount}
+              disabled={isCreatingAccount}
+              className='h-6 w-full text-xs sm:w-auto'
+            >
+              {isCreatingAccount ? 'Creating...' : 'Create Account'}
+            </Button>
+          ) : (
+            platformUrl && (
+              <a
+                href={platformUrl}
+                target='_blank'
+                rel='noopener noreferrer'
+                className={`${docsLinkClassName} break-all`}
+              >
+                Get Your API Key Here →
+              </a>
+            )
+          )}
+        </div>
+        <Input
+          id={`${idPrefix}api_key`}
+          type='password'
+          value={formData.api_key}
+          onChange={(e) =>
+            setFormData((prev) => ({ ...prev, api_key: e.target.value }))
+          }
+          placeholder={apiKeyPlaceholder}
+        />
+      </div>
+
+      {formData.provider_type === 'azure' && (
+        <div className='grid gap-2'>
+          <Label htmlFor={`${idPrefix}api_version`}>API Version</Label>
+          <Input
+            id={`${idPrefix}api_version`}
+            value={formData.api_version || ''}
+            onChange={(e) =>
+              setFormData((prev) => ({
+                ...prev,
+                api_version: e.target.value || null,
+              }))
+            }
+            placeholder='2024-02-15-preview'
+          />
+        </div>
+      )}
+
+      <div className='flex items-center space-x-2'>
+        <Switch
+          id={`${idPrefix}enabled`}
+          checked={formData.enabled}
+          onCheckedChange={(checked) =>
+            setFormData((prev) => ({ ...prev, enabled: checked }))
+          }
+        />
+        <Label htmlFor={`${idPrefix}enabled`}>Enabled</Label>
+      </div>
+
+      <div className='grid gap-2'>
+        <Label htmlFor={`${idPrefix}provider_fee`}>Provider Fee (Multiplier)</Label>
+        <Input
+          id={`${idPrefix}provider_fee`}
+          type='number'
+          step='0.001'
+          min='1.0'
+          value={formData.provider_fee || ''}
+          onChange={(e) =>
+            setFormData((prev) => ({
+              ...prev,
+              provider_fee: e.target.value ? parseFloat(e.target.value) : undefined,
+            }))
+          }
+          placeholder={providerFeePlaceholder}
+        />
+        <p className='text-muted-foreground text-xs'>
+          1.01 means +1% e.g. currency exchange, card fees, etc.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/components/provider-model-row.tsx b/ui/components/provider-model-row.tsx
new file mode 100644
index 00000000..4aedfd53
--- /dev/null
+++ b/ui/components/provider-model-row.tsx
@@ -0,0 +1,46 @@
+import { Badge } from '@/components/ui/badge';
+import type { AdminModel } from '@/lib/api/services/admin';
+import type { ReactNode } from 'react';
+
+interface ProviderModelRowProps {
+  model: AdminModel;
+  showEnabledState?: boolean;
+  actions?: ReactNode;
+}
+
+export function ProviderModelRow({
+  model,
+  showEnabledState = false,
+  actions,
+}: ProviderModelRowProps) {
+  return (
+    <div className='hover:bg-accent flex flex-col gap-2 rounded-lg border p-3 transition-colors sm:flex-row sm:items-center sm:justify-between'>
+      <div className='min-w-0 flex-1'>
+        <div className='flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2'>
+          <span className='truncate font-mono text-sm font-medium'>
+            {model.id}
+          </span>
+          {showEnabledState && (
+            <Badge
+              variant={model.enabled ? 'default' : 'secondary'}
+              className='w-fit text-xs'
+            >
+              {model.enabled ? 'Enabled' : 'Disabled'}
+            </Badge>
+          )}
+        </div>
+        <div className='text-muted-foreground mt-1 text-xs break-words'>
+          {model.description || model.name}
+        </div>
+      </div>
+      <div className='flex flex-wrap items-center gap-2 sm:flex-nowrap'>
+        <span className='text-muted-foreground text-xs'>
+          {model.context_length
+            ? `${model.context_length.toLocaleString()} tokens`
+            : '-'}
+        </span>
+        {actions}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/components/provider-models-panel.tsx b/ui/components/provider-models-panel.tsx
new file mode 100644
index 00000000..38a337ab
--- /dev/null
+++ b/ui/components/provider-models-panel.tsx
@@ -0,0 +1,166 @@
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Database, Pencil, Plus, Trash2 } from 'lucide-react';
+import type { AdminModel, ProviderModels } from '@/lib/api/services/admin';
+import { ProviderModelRow } from '@/components/provider-model-row';
+
+interface ProviderModelsPanelProps {
+  isLoading: boolean;
+  providerModels: ProviderModels | null;
+  onBatchOverride: () => void;
+  onAddModel: () => void;
+  onEditModel: (model: AdminModel) => void;
+  onDeleteModel: (modelId: string) => void;
+  onOverrideModel: (model: AdminModel) => void;
+  isDeletingModel: boolean;
+}
+
+export function ProviderModelsPanel({
+  isLoading,
+  providerModels,
+  onBatchOverride,
+  onAddModel,
+  onEditModel,
+  onDeleteModel,
+  onOverrideModel,
+  isDeletingModel,
+}: ProviderModelsPanelProps) {
+  if (isLoading) {
+    return (
+      <div className='space-y-2'>
+        <Skeleton className='h-[40px] w-full' />
+        <Skeleton className='h-[40px] w-full' />
+      </div>
+    );
+  }
+
+  if (!providerModels) {
+    return null;
+  }
+
+  return (
+    <Tabs
+      defaultValue={providerModels.remote_models.length > 0 ? 'provided' : 'custom'}
+      className='w-full'
+    >
+      <TabsList className='grid w-full grid-cols-2'>
+        <TabsTrigger value='provided' className='text-xs sm:text-sm'>
+          <span className='hidden sm:inline'>Provided Models</span>
+          <span className='sm:hidden'>Provided</span>
+          <Badge variant='secondary' className='ml-1 text-xs sm:ml-2'>
+            {providerModels.remote_models.length}
+          </Badge>
+        </TabsTrigger>
+        <TabsTrigger value='custom' className='text-xs sm:text-sm'>
+          <span className='hidden sm:inline'>Custom Models</span>
+          <span className='sm:hidden'>Custom</span>
+          <Badge variant='secondary' className='ml-1 text-xs sm:ml-2'>
+            {providerModels.db_models.length}
+          </Badge>
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='custom' className='mt-4 space-y-2'>
+        <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+          {providerModels.db_models.length > 0 && (
+            <p className='text-muted-foreground text-sm'>
+              Custom models override or extend the provider&apos;s catalog.
+            </p>
+          )}
+          <div className='flex w-full flex-wrap gap-2 sm:w-auto sm:justify-end'>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onBatchOverride}
+              className='w-full sm:w-auto'
+            >
+              <Database className='mr-2 h-4 w-4' />
+              Batch Override
+            </Button>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={onAddModel}
+              className='w-full sm:w-auto'
+            >
+              <Plus className='mr-2 h-4 w-4' />
+              Add Custom Model
+            </Button>
+          </div>
+        </div>
+
+        {providerModels.db_models.length === 0 ? (
+          <div className='text-muted-foreground py-4 text-center text-sm'>
+            No custom models configured
+          </div>
+        ) : (
+          <div className='space-y-2'>
+            {providerModels.db_models.map((model) => (
+              <ProviderModelRow
+                key={model.id}
+                model={model}
+                showEnabledState
+                actions={
+                  <>
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='h-8 w-8'
+                      onClick={() => onEditModel(model)}
+                    >
+                      <Pencil className='h-4 w-4' />
+                    </Button>
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='text-destructive hover:text-destructive h-8 w-8'
+                      onClick={() => onDeleteModel(model.id)}
+                      disabled={isDeletingModel}
+                    >
+                      <Trash2 className='h-4 w-4' />
+                    </Button>
+                  </>
+                }
+              />
+            ))}
+          </div>
+        )}
+      </TabsContent>
+
+      <TabsContent value='provided' className='mt-4 space-y-2'>
+        {providerModels.remote_models.length > 0 ? (
+          <>
+            <p className='text-muted-foreground mb-3 text-sm'>
+              Models automatically discovered from the provider&apos;s catalog.
+            </p>
+            <div className='space-y-2'>
+              {providerModels.remote_models.map((model) => (
+                <ProviderModelRow
+                  key={model.id}
+                  model={model}
+                  actions={
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      className='h-7 w-full text-xs sm:w-auto'
+                      onClick={() => onOverrideModel(model)}
+                    >
+                      <Plus className='mr-1 h-3 w-3' />
+                      Override
+                    </Button>
+                  }
+                />
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className='text-muted-foreground py-4 text-center text-sm'>
+            No provided models available
+          </div>
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/ui/components/revenue-by-model-table.tsx b/ui/components/revenue-by-model-table.tsx
index bea8e28b..fd8f1962 100644
--- a/ui/components/revenue-by-model-table.tsx
+++ b/ui/components/revenue-by-model-table.tsx
@@ -49,7 +49,7 @@ export function RevenueByModelTable({
         </p>
       </CardHeader>
       <CardContent>
-        <Table>
+        <Table className='min-w-[680px] sm:min-w-[860px]'>
           <TableHeader>
             <TableRow>
               <TableHead>Model</TableHead>
@@ -57,7 +57,7 @@ export function RevenueByModelTable({
               <TableHead className='text-right'>Successful</TableHead>
               <TableHead className='text-right'>Failed</TableHead>
               <TableHead className='text-right'>Revenue</TableHead>
-              <TableHead className='w-[100px]'>Share</TableHead>
+              <TableHead className='w-[140px]'>Share</TableHead>
               <TableHead className='text-right'>Refunds</TableHead>
               <TableHead className='text-right'>Net Revenue</TableHead>
               <TableHead className='text-right'>Avg/Request</TableHead>
@@ -76,19 +76,17 @@ export function RevenueByModelTable({
             ) : (
               models.map((model) => {
                 const share =
-                  totalRevenue > 0
-                    ? (model.revenue_sats / totalRevenue) * 100
-                    : 0;
+                  totalRevenue > 0 ? (model.revenue_sats / totalRevenue) * 100 : 0;
                 return (
                   <TableRow key={model.model}>
                     <TableCell className='font-medium'>{model.model}</TableCell>
                     <TableCell className='text-right font-mono'>
                       {model.requests}
                     </TableCell>
-                    <TableCell className='text-right font-mono text-green-600'>
+                    <TableCell className='text-right font-mono tabular-nums'>
                       {model.successful}
                     </TableCell>
-                    <TableCell className='text-right font-mono text-red-600'>
+                    <TableCell className='text-destructive text-right font-mono tabular-nums'>
                       {model.failed}
                     </TableCell>
                     <TableCell className='text-right font-mono'>
@@ -102,13 +100,13 @@ export function RevenueByModelTable({
                         </span>
                       </div>
                     </TableCell>
-                    <TableCell className='text-right font-mono text-red-500'>
+                    <TableCell className='text-destructive text-right font-mono tabular-nums'>
                       {formatAmount(model.refunds_sats)}
                     </TableCell>
-                    <TableCell className='text-right font-mono font-semibold'>
+                    <TableCell className='text-right font-mono font-semibold tabular-nums'>
                       {formatAmount(model.net_revenue_sats)}
                     </TableCell>
-                    <TableCell className='text-muted-foreground text-right font-mono'>
+                    <TableCell className='text-muted-foreground text-right font-mono tabular-nums'>
                       {formatAmount(model.avg_revenue_per_request)}
                     </TableCell>
                   </TableRow>
diff --git a/ui/components/settings/admin-settings.tsx b/ui/components/settings/admin-settings.tsx
index dd8468db..7fc2ddfc 100644
--- a/ui/components/settings/admin-settings.tsx
+++ b/ui/components/settings/admin-settings.tsx
@@ -16,7 +16,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { AlertCircle, Save, RefreshCw, Eye, EyeOff } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { AlertCircle, Eye, EyeOff } from 'lucide-react';
 import { toast } from 'sonner';
 import { Switch } from '@/components/ui/switch';
 
@@ -63,6 +64,7 @@ interface PasswordData {
 
 export function AdminSettings() {
   const [settings, setSettings] = useState<SettingsData>({});
+  const [initialSettings, setInitialSettings] = useState<SettingsData>({});
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string>('');
@@ -87,11 +89,11 @@ export function AdminSettings() {
       setError('');
       const data = await AdminService.getSettings();
       setSettings(data as SettingsData);
+      setInitialSettings(data as SettingsData);
     } catch (err) {
       const message =
         err instanceof Error ? err.message : 'Failed to load settings';
       setError(message);
-      toast.error(message);
     } finally {
       setLoading(false);
     }
@@ -104,6 +106,7 @@ export function AdminSettings() {
 
       const updatedData = await AdminService.updateSettings(settings);
       setSettings(updatedData as SettingsData);
+      setInitialSettings(updatedData as SettingsData);
       toast.success('Settings saved successfully');
     } catch (err) {
       const message =
@@ -154,6 +157,15 @@ export function AdminSettings() {
     }
   };
 
+  const clearPasswordForm = () => {
+    setPasswordData({
+      current_password: '',
+      new_password: '',
+      confirm_password: '',
+    });
+    setPasswordError('');
+  };
+
   const handleInputChange = (field: string, value: unknown) => {
     setSettings((prev) => ({
       ...prev,
@@ -206,7 +218,7 @@ export function AdminSettings() {
     return (
       <div key={field} className='space-y-2'>
         <Label htmlFor={field}>{label}</Label>
-        <div className='flex gap-2'>
+        <div className='flex flex-col gap-2 sm:flex-row'>
           <Input
             id={field}
             type={showSecrets ? 'text' : 'password'}
@@ -315,23 +327,109 @@ export function AdminSettings() {
     );
   };
 
+  const normalizeForCompare = (value: unknown): unknown => {
+    if (value === null || value === undefined) {
+      return '';
+    }
+
+    if (Array.isArray(value)) {
+      return value;
+    }
+
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+
+    return value;
+  };
+
+  const areValuesEqual = (a: unknown, b: unknown): boolean => {
+    const normalizedA = normalizeForCompare(a);
+    const normalizedB = normalizeForCompare(b);
+
+    if (Array.isArray(normalizedA) && Array.isArray(normalizedB)) {
+      return JSON.stringify(normalizedA) === JSON.stringify(normalizedB);
+    }
+
+    return normalizedA === normalizedB;
+  };
+
+  const hasFieldChanged = (key: string): boolean =>
+    !areValuesEqual(settings[key], initialSettings[key]);
+
+  const basicInfoChanged = ['name', 'description', 'http_url', 'onion_url'].some(
+    hasFieldChanged
+  );
+  const nostrChanged = ['npub', 'nsec'].some(hasFieldChanged);
+  const cashuMintsChanged = hasFieldChanged('cashu_mints');
+  const relaysChanged = hasFieldChanged('relays');
+  const advancedKeys = Object.keys(settings).filter(
+    (key) => !HANDLED_KEYS.includes(key) && !IGNORED_KEYS.includes(key)
+  );
+  const advancedChanged = advancedKeys.some(hasFieldChanged);
+  const hasPasswordChanges = Boolean(
+    passwordData.current_password ||
+      passwordData.new_password ||
+      passwordData.confirm_password
+  );
+
+  const resetFields = (keys: string[]) => {
+    setSettings((prev) => {
+      const next = { ...prev };
+      keys.forEach((key) => {
+        next[key] = initialSettings[key];
+      });
+      return next;
+    });
+  };
+
+  const resetBasicInfo = () =>
+    resetFields(['name', 'description', 'http_url', 'onion_url']);
+  const resetNostr = () => resetFields(['npub', 'nsec']);
+  const resetCashuMints = () => {
+    resetFields(['cashu_mints']);
+    setNewMint('');
+  };
+  const resetRelays = () => {
+    resetFields(['relays']);
+    setNewRelay('');
+  };
+  const resetAdvanced = () => resetFields(advancedKeys);
+
   if (loading) {
     return (
-      <div className='flex items-center justify-center py-8'>
-        <div className='text-muted-foreground'>Loading settings...</div>
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Skeleton className='h-7 w-48' />
+          <Skeleton className='h-4 w-64 max-w-full' />
+        </div>
+        <Card>
+          <CardHeader className='space-y-2'>
+            <Skeleton className='h-5 w-40' />
+            <Skeleton className='h-4 w-72 max-w-full' />
+          </CardHeader>
+          <CardContent className='space-y-3'>
+            <Skeleton className='h-10 w-full' />
+            <Skeleton className='h-20 w-full' />
+            <Skeleton className='h-10 w-full' />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className='space-y-2'>
+            <Skeleton className='h-5 w-36' />
+            <Skeleton className='h-4 w-64 max-w-full' />
+          </CardHeader>
+          <CardContent className='space-y-3'>
+            <Skeleton className='h-10 w-full' />
+            <Skeleton className='h-10 w-full' />
+          </CardContent>
+        </Card>
       </div>
     );
   }
 
   return (
     <>
-      <div className='mb-6'>
-        <h2 className='text-xl font-semibold tracking-tight'>Admin Settings</h2>
-        <p className='text-muted-foreground'>
-          Configure your Routstr node settings
-        </p>
-      </div>
-
       {error && (
         <Alert variant='destructive' className='mb-6'>
           <AlertCircle className='h-4 w-4' />
@@ -389,6 +487,22 @@ export function AdminSettings() {
               />
             </div>
           </CardContent>
+          {basicInfoChanged ? (
+            <CardFooter className='justify-start'>
+              <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center'>
+                <Button
+                  variant='outline'
+                  onClick={resetBasicInfo}
+                  disabled={loading || saving}
+                >
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={loading || saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </CardFooter>
+          ) : null}
         </Card>
 
         {/* Nostr Configuration */}
@@ -411,6 +525,22 @@ export function AdminSettings() {
             </div>
             {renderSecretField('nsec', 'Private Key (nsec)', 'nsec1...')}
           </CardContent>
+          {nostrChanged ? (
+            <CardFooter className='justify-start'>
+              <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center'>
+                <Button
+                  variant='outline'
+                  onClick={resetNostr}
+                  disabled={loading || saving}
+                >
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={loading || saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </CardFooter>
+          ) : null}
         </Card>
 
         {/* Cashu Mints */}
@@ -424,14 +554,14 @@ export function AdminSettings() {
           <CardContent className='space-y-4'>
             <div className='space-y-2'>
               <Label htmlFor='newMint'>Add Mint URL</Label>
-              <div className='flex gap-2'>
+              <div className='flex flex-col gap-2 sm:flex-row'>
                 <Input
                   id='newMint'
                   value={newMint}
                   onChange={(e) => setNewMint(e.target.value)}
                   placeholder='https://mint.example.com'
                 />
-                <Button onClick={addMint} disabled={!newMint.trim()}>
+                <Button onClick={addMint} disabled={!newMint.trim()} className='sm:w-auto'>
                   Add Mint
                 </Button>
               </div>
@@ -444,13 +574,14 @@ export function AdminSettings() {
                   {settings.cashu_mints.map((mint, index) => (
                     <div
                       key={index}
-                      className='flex items-center gap-2 rounded border p-2'
+                      className='flex flex-col gap-2 rounded border p-2 sm:flex-row sm:items-center'
                     >
                       <span className='flex-1 text-sm'>{mint}</span>
                       <Button
                         variant='outline'
                         size='sm'
                         onClick={() => removeMint(index)}
+                        className='w-full sm:w-auto'
                       >
                         Remove
                       </Button>
@@ -460,6 +591,22 @@ export function AdminSettings() {
               </div>
             )}
           </CardContent>
+          {cashuMintsChanged ? (
+            <CardFooter className='justify-start'>
+              <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center'>
+                <Button
+                  variant='outline'
+                  onClick={resetCashuMints}
+                  disabled={loading || saving}
+                >
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={loading || saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </CardFooter>
+          ) : null}
         </Card>
 
         {/* Relays */}
@@ -473,14 +620,14 @@ export function AdminSettings() {
           <CardContent className='space-y-4'>
             <div className='space-y-2'>
               <Label htmlFor='newRelay'>Add Relay URL</Label>
-              <div className='flex gap-2'>
+              <div className='flex flex-col gap-2 sm:flex-row'>
                 <Input
                   id='newRelay'
                   value={newRelay}
                   onChange={(e) => setNewRelay(e.target.value)}
                   placeholder='wss://relay.example.com'
                 />
-                <Button onClick={addRelay} disabled={!newRelay.trim()}>
+                <Button onClick={addRelay} disabled={!newRelay.trim()} className='sm:w-auto'>
                   Add Relay
                 </Button>
               </div>
@@ -493,13 +640,14 @@ export function AdminSettings() {
                   {settings.relays.map((relay, index) => (
                     <div
                       key={index}
-                      className='flex items-center gap-2 rounded border p-2'
+                      className='flex flex-col gap-2 rounded border p-2 sm:flex-row sm:items-center'
                     >
                       <span className='flex-1 text-sm'>{relay}</span>
                       <Button
                         variant='outline'
                         size='sm'
                         onClick={() => removeRelay(index)}
+                        className='w-full sm:w-auto'
                       >
                         Remove
                       </Button>
@@ -509,6 +657,22 @@ export function AdminSettings() {
               </div>
             )}
           </CardContent>
+          {relaysChanged ? (
+            <CardFooter className='justify-start'>
+              <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center'>
+                <Button
+                  variant='outline'
+                  onClick={resetRelays}
+                  disabled={loading || saving}
+                >
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={loading || saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </CardFooter>
+          ) : null}
         </Card>
 
         {/* Other Settings */}
@@ -527,23 +691,22 @@ export function AdminSettings() {
               )
               .map((key) => renderDynamicField(key, settings[key]))}
           </CardContent>
-        </Card>
-
-        <Card className='mt-6'>
-          <CardFooter className='flex justify-between'>
-            <Button
-              variant='outline'
-              onClick={loadSettings}
-              disabled={loading || saving}
-            >
-              <RefreshCw className='mr-2 h-4 w-4' />
-              Reload
-            </Button>
-            <Button onClick={handleSave} disabled={loading || saving}>
-              <Save className='mr-2 h-4 w-4' />
-              {saving ? 'Saving...' : 'Save Settings'}
-            </Button>
-          </CardFooter>
+          {advancedChanged ? (
+            <CardFooter className='justify-start'>
+              <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center'>
+                <Button
+                  variant='outline'
+                  onClick={resetAdvanced}
+                  disabled={loading || saving}
+                >
+                  Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={loading || saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </CardFooter>
+          ) : null}
         </Card>
 
         {/* Password Change */}
@@ -610,20 +773,30 @@ export function AdminSettings() {
               />
             </div>
           </CardContent>
-          <CardFooter>
-            <Button
-              onClick={handlePasswordUpdate}
-              disabled={
-                passwordSaving ||
-                !passwordData.current_password ||
-                !passwordData.new_password ||
-                !passwordData.confirm_password
-              }
-            >
-              <Save className='mr-2 h-4 w-4' />
-              {passwordSaving ? 'Updating...' : 'Update Password'}
-            </Button>
-          </CardFooter>
+          {hasPasswordChanges ? (
+            <CardFooter className='justify-start'>
+              <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center'>
+                <Button
+                  variant='outline'
+                  onClick={clearPasswordForm}
+                  disabled={passwordSaving}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handlePasswordUpdate}
+                  disabled={
+                    passwordSaving ||
+                    !passwordData.current_password ||
+                    !passwordData.new_password ||
+                    !passwordData.confirm_password
+                  }
+                >
+                  {passwordSaving ? 'Saving...' : 'Save'}
+                </Button>
+              </div>
+            </CardFooter>
+          ) : null}
         </Card>
       </div>
     </>
diff --git a/ui/components/settings/server-config-settings.tsx b/ui/components/settings/server-config-settings.tsx
index 2c94dffd..eb0ce8ba 100644
--- a/ui/components/settings/server-config-settings.tsx
+++ b/ui/components/settings/server-config-settings.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { ConfigurationService } from '@/lib/api/services/configuration';
-import { useConfiguration } from '@/lib/hooks/useConfiguration';
+import { useConfiguration } from '@/lib/hooks/use-configuration';
 import {
   Card,
   CardContent,
@@ -16,7 +16,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import { CheckCircle, XCircle, AlertCircle, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 
 export function ServerConfigSettings() {
@@ -70,29 +70,29 @@ export function ServerConfigSettings() {
   const renderStatusBadge = () => {
     if (connectionStatus === 'idle') {
       return (
-        <Badge variant='outline' className='flex items-center gap-1'>
-          <AlertCircle className='h-4 w-4 text-yellow-500' />
+        <Badge variant='secondary' className='flex items-center gap-1'>
+          <AlertCircle className='h-4 w-4' />
           Not tested
         </Badge>
       );
     } else if (connectionStatus === 'testing') {
       return (
         <Badge variant='outline' className='flex items-center gap-1'>
-          <AlertCircle className='h-4 w-4 animate-pulse text-blue-500' />
+          <Loader2 className='h-4 w-4 animate-spin' />
           Testing...
         </Badge>
       );
     } else if (connectionStatus === 'success') {
       return (
-        <Badge variant='outline' className='flex items-center gap-1'>
-          <CheckCircle className='h-4 w-4 text-green-500' />
+        <Badge variant='default' className='flex items-center gap-1'>
+          <CheckCircle className='h-4 w-4' />
           Connected
         </Badge>
       );
     } else {
       return (
-        <Badge variant='outline' className='flex items-center gap-1'>
-          <XCircle className='h-4 w-4 text-red-500' />
+        <Badge variant='destructive' className='flex items-center gap-1'>
+          <XCircle className='h-4 w-4' />
           Failed
         </Badge>
       );
@@ -101,47 +101,43 @@ export function ServerConfigSettings() {
 
   return (
     <>
-      <div className='mb-6 flex items-center justify-between'>
-        <h2 className='text-xl font-semibold tracking-tight'>
-          External Server Configuration
-        </h2>
-        {isSyncing && (
-          <Badge variant='outline' className='flex items-center gap-1'>
-            <AlertCircle className='h-4 w-4 animate-spin text-blue-500' />
-            Syncing...
-          </Badge>
-        )}
-      </div>
-
       <Card>
         <CardHeader>
-          <div className='flex items-center justify-between'>
-            <div>
+          <div className='flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between'>
+            <div className='min-w-0'>
               <CardTitle>Request Forwarding Settings</CardTitle>
               <CardDescription>
                 Configure external server endpoint and authentication for API
                 request forwarding
               </CardDescription>
             </div>
-            {config.enabled && renderStatusBadge()}
+            <div className='flex items-center gap-2'>
+              {isSyncing && (
+                <Badge variant='outline' className='flex items-center gap-1'>
+                  <Loader2 className='h-4 w-4 animate-spin' />
+                  Syncing...
+                </Badge>
+              )}
+              {config.enabled && renderStatusBadge()}
+            </div>
           </div>
         </CardHeader>
         <CardContent className='space-y-4'>
           <div className='space-y-2'>
             <Label htmlFor='server-endpoint'>Server Endpoint URL</Label>
-            <div className='relative'>
+            <div className='relative flex flex-col gap-2 sm:block'>
               <Input
                 id='server-endpoint'
                 placeholder='https://ecash.routstr.info'
                 value={config.endpoint}
                 onChange={(e) => handleConfigChange('endpoint', e.target.value)}
-                className='pr-24'
+                className='sm:pr-24'
               />
               <Button
                 type='button'
                 variant='ghost'
                 size='sm'
-                className='absolute top-0 right-0 h-full px-3 py-2 text-xs'
+                className='h-8 w-full px-3 py-2 text-xs sm:absolute sm:top-0 sm:right-0 sm:h-full sm:w-auto'
                 onClick={() =>
                   handleConfigChange('endpoint', 'https://ecash.routstr.info')
                 }
@@ -151,15 +147,18 @@ export function ServerConfigSettings() {
             </div>
           </div>
         </CardContent>
-        <CardFooter className='flex justify-between'>
+        <CardFooter className='flex flex-col gap-2 sm:flex-row sm:justify-between'>
           <Button
             variant='outline'
             onClick={testConnection}
             disabled={!config.endpoint || connectionStatus === 'testing'}
+            className='w-full sm:w-auto'
           >
             Test Connection
           </Button>
-          <Button onClick={saveConfiguration}>Save Configuration</Button>
+          <Button onClick={saveConfiguration} className='w-full sm:w-auto'>
+            Save Configuration
+          </Button>
         </CardFooter>
       </Card>
     </>
diff --git a/ui/components/site-header.tsx b/ui/components/site-header.tsx
index 70cfc485..ffef86ba 100644
--- a/ui/components/site-header.tsx
+++ b/ui/components/site-header.tsx
@@ -4,14 +4,46 @@ import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { Button } from '@/components/ui/button';
 import { LogOut } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { adminLogout } from '@/lib/api/services/auth';
 import { toast } from 'sonner';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { CurrencyToggle } from '@/components/currency-toggle';
 
+const PAGE_META: Record<string, { title: string; description: string }> = {
+  '/': {
+    title: 'Dashboard',
+    description: 'Usage, errors, revenue, and system health.',
+  },
+  '/balances': {
+    title: 'Balances',
+    description: 'Wallet and temporary balance overview.',
+  },
+  '/logs': {
+    title: 'System Logs',
+    description: 'Inspect request and application logs.',
+  },
+  '/model': {
+    title: 'Models',
+    description: 'Manage model catalog and provider mappings.',
+  },
+  '/providers': {
+    title: 'Providers',
+    description: 'Configure upstream providers and model sync.',
+  },
+  '/settings': {
+    title: 'Settings',
+    description: 'Admin, routing, and system-level configuration.',
+  },
+};
+
 export function SiteHeader() {
   const router = useRouter();
+  const pathname = usePathname();
+  const meta = PAGE_META[pathname] ?? {
+    title: 'Routstr Node',
+    description: 'Administration panel',
+  };
 
   const handleLogout = async () => {
     try {
@@ -25,24 +57,28 @@ export function SiteHeader() {
   };
 
   return (
-    <header className='flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12'>
-      <div className='flex w-full items-center justify-between gap-1 px-4 lg:gap-2 lg:px-6'>
-        <div className='flex items-center gap-1 lg:gap-2'>
-          <SidebarTrigger className='-ml-1' />
-          <Separator
-            orientation='vertical'
-            className='mx-2 data-[orientation=vertical]:h-4 lg:hidden'
-          />
-          <h1 className='text-base font-medium lg:hidden'>Routstr Node</h1>
+    <header className='border-border/60 bg-background/80 sticky top-0 z-20 border-b backdrop-blur-xl'>
+      <div className='flex h-16 items-center justify-between gap-3 px-3 sm:px-5 md:px-6'>
+        <div className='flex min-w-0 items-center gap-2'>
+          <SidebarTrigger className='shrink-0 md:-ml-1' />
+          <Separator orientation='vertical' className='hidden h-5 md:block' />
+          <div className='min-w-0'>
+            <h1 className='truncate text-sm font-semibold tracking-tight sm:text-base'>
+              {meta.title}
+            </h1>
+            <p className='text-muted-foreground hidden truncate text-xs sm:block'>
+              {meta.description}
+            </p>
+          </div>
         </div>
-        <div className='flex items-center gap-2'>
+        <div className='flex shrink-0 items-center gap-1.5'>
           <CurrencyToggle />
           <ThemeToggle />
           <Button
-            variant='ghost'
+            variant='outline'
             size='sm'
             onClick={handleLogout}
-            className='gap-2'
+            className='h-8 gap-2 px-2.5 sm:px-3'
           >
             <LogOut className='h-4 w-4' />
             <span className='hidden sm:inline'>Logout</span>
diff --git a/ui/components/temporary-balances.tsx b/ui/components/temporary-balances.tsx
index 7e7927d9..10a0fec2 100644
--- a/ui/components/temporary-balances.tsx
+++ b/ui/components/temporary-balances.tsx
@@ -3,13 +3,13 @@
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import {
-  Loader2,
   RefreshCw,
   AlertCircle,
   Key,
   Clock,
   DollarSign,
   Activity,
+  type LucideIcon,
 } from 'lucide-react';
 import { AdminService, TemporaryBalance } from '@/lib/api/services/admin';
 import {
@@ -20,10 +20,105 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { cn } from '@/lib/utils';
 import type { DisplayUnit } from '@/lib/types/units';
 import { formatFromMsat } from '@/lib/currency';
 
+function TemporaryBalanceStat({
+  icon: Icon,
+  label,
+  value,
+  iconClassName,
+}: {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+  iconClassName: string;
+}) {
+  return (
+    <Card className='shadow-none'>
+      <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+        <CardTitle className='text-sm font-medium'>{label}</CardTitle>
+        <span
+          className={cn(
+            'inline-flex size-8 items-center justify-center rounded-full',
+            iconClassName
+          )}
+        >
+          <Icon className='h-4 w-4' />
+        </span>
+      </CardHeader>
+      <CardContent>
+        <p className='text-2xl font-bold tracking-tight tabular-nums'>{value}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function getTotals(balances: TemporaryBalance[]) {
+  let totalBalance = 0;
+  let totalSpent = 0;
+  let totalRequests = 0;
+
+  balances.forEach((balance) => {
+    if (!balance.parent_key_hash) {
+      totalBalance += balance.balance || 0;
+    }
+    totalSpent += balance.total_spent || 0;
+    totalRequests += balance.total_requests || 0;
+  });
+
+  return { totalBalance, totalSpent, totalRequests };
+}
+
+function buildHierarchicalData(
+  allBalances: TemporaryBalance[],
+  filteredBalances: TemporaryBalance[]
+) {
+  const parents = filteredBalances.filter((item) => !item.parent_key_hash);
+  const result: Array<TemporaryBalance & { isChild?: boolean }> = [];
+
+  parents.forEach((parent) => {
+    result.push(parent);
+
+    const children = allBalances.filter(
+      (item) => item.parent_key_hash === parent.hashed_key
+    );
+
+    children.forEach((child) => {
+      result.push({ ...child, isChild: true });
+    });
+  });
+
+  const orphans = filteredBalances.filter(
+    (item) =>
+      item.parent_key_hash && !result.some((r) => r.hashed_key === item.hashed_key)
+  );
+
+  result.push(...orphans.map((item) => ({ ...item, isChild: true })));
+
+  return result;
+}
+
 export function TemporaryBalances({
   refreshInterval = 10000,
   displayUnit,
@@ -37,9 +132,7 @@ export function TemporaryBalances({
 
   const { data, isLoading, isError, error, isFetching, refetch } = useQuery({
     queryKey: ['temporary-balances'],
-    queryFn: async () => {
-      return AdminService.getTemporaryBalances();
-    },
+    queryFn: async () => AdminService.getTemporaryBalances(),
     refetchInterval: refreshInterval,
   });
 
@@ -54,336 +147,269 @@ export function TemporaryBalances({
       )
     : [];
 
-  const calculateTotals = (balances: TemporaryBalance[]) => {
-    let totalBalance = 0;
-    let totalSpent = 0;
-    let totalRequests = 0;
-
-    balances.forEach((balance) => {
-      // Only count parents for total balance to avoid double counting
-      // since child keys use parent balance
-      if (!balance.parent_key_hash) {
-        totalBalance += balance.balance || 0;
-      }
-      totalSpent += balance.total_spent || 0;
-      totalRequests += balance.total_requests || 0;
-    });
-
-    return { totalBalance, totalSpent, totalRequests };
-  };
-
   const totals = data
-    ? calculateTotals(data)
+    ? getTotals(data)
     : { totalBalance: 0, totalSpent: 0, totalRequests: 0 };
 
-  // Group parents and children
-  const hierarchicalData = (() => {
-    if (!data) return [];
-
-    const parents = filteredData.filter((item) => !item.parent_key_hash);
-    const result: (TemporaryBalance & { isChild?: boolean })[] = [];
-
-    parents.forEach((parent) => {
-      result.push(parent);
-      const children = data.filter(
-        (item) => item.parent_key_hash === parent.hashed_key
-      );
-      children.forEach((child) => {
-        result.push({ ...child, isChild: true });
-      });
-    });
-
-    // Add children whose parents didn't match the search or aren't in the list
-    const orphans = filteredData.filter(
-      (item) =>
-        item.parent_key_hash &&
-        !result.some((r) => r.hashed_key === item.hashed_key)
-    );
-    result.push(...orphans.map((o) => ({ ...o, isChild: true })));
-
-    return result;
-  })();
+  const rows = data ? buildHierarchicalData(data, filteredData) : [];
 
   return (
-    <>
-      <Card className='h-full w-full shadow-sm'>
-        <CardHeader className='pb-4'>
-          <div className='flex items-center justify-between'>
-            <CardTitle className='flex items-center gap-2 text-xl'>
-              <Key className='h-5 w-5' />
-              Temporary Balances
-            </CardTitle>
-            <div className='flex flex-col gap-2 sm:flex-row sm:gap-2'>
-              <div className='relative flex-1 sm:flex-initial'>
-                <input
-                  type='text'
-                  placeholder='Search by key or address...'
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className='focus:ring-primary/20 w-full rounded-md border py-2 pr-3 pl-8 text-sm focus:ring-2 focus:outline-none sm:w-64'
-                />
-                <Key className='text-muted-foreground absolute top-2.5 left-2 h-4 w-4' />
-              </div>
-              <Button
-                variant='ghost'
-                size='icon'
-                onClick={() => refetch()}
-                disabled={isLoading || isFetching}
-                className='h-8 w-8'
-              >
-                <RefreshCw
-                  className={cn(
-                    'h-4 w-4',
-                    (isFetching || isLoading) && 'animate-spin'
-                  )}
-                />
-                <span className='sr-only'>Refresh temporary balances</span>
-              </Button>
+    <Card className='h-full w-full shadow-sm'>
+      <CardHeader className='pb-4'>
+        <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+          <CardTitle className='flex items-center gap-2 text-xl'>
+            <Key className='h-5 w-5' />
+            Temporary Balances
+          </CardTitle>
+          <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row'>
+            <div className='relative flex-1 sm:flex-initial'>
+              <Input
+                type='text'
+                placeholder='Search by key or address...'
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className='pr-3 pl-8 sm:w-64'
+                name='temporary_balance_search'
+                autoComplete='off'
+              />
+              <Key className='text-muted-foreground absolute top-2.5 left-2 h-4 w-4' />
+            </div>
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={() => refetch()}
+              disabled={isLoading || isFetching}
+              className='h-8 w-full sm:w-8'
+            >
+              <RefreshCw
+                className={cn('h-4 w-4', (isFetching || isLoading) && 'animate-spin')}
+              />
+              <span className='sr-only'>Refresh temporary balances</span>
+            </Button>
+          </div>
+        </div>
+        <CardDescription>
+          API keys with their current balances and usage statistics
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className='space-y-4'>
+            <div className='grid gap-3 md:grid-cols-3'>
+              {Array.from({ length: 3 }).map((_, index) => (
+                <Card key={`temp-stat-skeleton-${index}`} className='shadow-none'>
+                  <CardHeader className='space-y-2 pb-1'>
+                    <Skeleton className='h-3.5 w-24' />
+                    <Skeleton className='h-3 w-8' />
+                  </CardHeader>
+                  <CardContent className='pt-0'>
+                    <Skeleton className='h-7 w-24' />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+            <div className='space-y-2'>
+              {Array.from({ length: 6 }).map((_, index) => (
+                <Skeleton key={`temp-row-skeleton-${index}`} className='h-11 w-full' />
+              ))}
             </div>
           </div>
-          <CardDescription>
-            API keys with their current balances and usage statistics
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className='flex items-center justify-center py-8'>
-              <Loader2 className='text-primary h-8 w-8 animate-spin' />
+        ) : isError ? (
+          <Alert variant='destructive'>
+            <AlertCircle className='h-5 w-5' />
+            <AlertDescription>
+              Error loading temporary balances: {(error as Error).message}
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <div className='space-y-6'>
+            <div className='grid gap-3 md:grid-cols-3'>
+              <TemporaryBalanceStat
+                icon={DollarSign}
+                label='Total Balance'
+                value={formatBalance(totals.totalBalance)}
+                iconClassName='text-green-600 dark:text-green-300'
+              />
+              <TemporaryBalanceStat
+                icon={Activity}
+                label='Total Spent'
+                value={formatBalance(totals.totalSpent)}
+                iconClassName='text-blue-600 dark:text-blue-300'
+              />
+              <TemporaryBalanceStat
+                icon={Key}
+                label='Total Requests'
+                value={totals.totalRequests.toLocaleString()}
+                iconClassName='text-purple-600 dark:text-purple-300'
+              />
             </div>
-          ) : isError ? (
-            <div className='bg-destructive/10 text-destructive flex items-center space-x-2 rounded-md p-4'>
-              <AlertCircle className='h-5 w-5' />
-              <span>
-                Error loading temporary balances: {(error as Error).message}
-              </span>
-            </div>
-          ) : (
-            <div className='space-y-6'>
-              {/* Summary Cards */}
-              <div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-3'>
-                <div className='rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4'>
-                  <div className='flex items-center justify-between'>
-                    <div className='flex items-center gap-2'>
-                      <DollarSign className='h-5 w-5 text-blue-600' />
-                      <span className='text-sm font-medium text-blue-800'>
-                        Total Balance
-                      </span>
-                    </div>
-                  </div>
-                  <div className='mt-2 text-2xl font-bold text-blue-900'>
-                    {formatBalance(totals.totalBalance)}
-                  </div>
-                </div>
-                <div className='rounded-lg border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4'>
-                  <div className='flex items-center justify-between'>
-                    <div className='flex items-center gap-2'>
-                      <Activity className='h-5 w-5 text-green-600' />
-                      <span className='text-sm font-medium text-green-800'>
-                        Total Spent
-                      </span>
-                    </div>
-                  </div>
-                  <div className='mt-2 text-2xl font-bold text-green-900'>
-                    {formatBalance(totals.totalSpent)}
-                  </div>
-                </div>
-                <div className='rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-4'>
-                  <div className='flex items-center justify-between'>
-                    <div className='flex items-center gap-2'>
-                      <Key className='h-5 w-5 text-purple-600' />
-                      <span className='text-sm font-medium text-purple-800'>
-                        Total Requests
-                      </span>
-                    </div>
-                  </div>
-                  <div className='mt-2 text-2xl font-bold text-purple-900'>
-                    {totals.totalRequests.toLocaleString()}
-                  </div>
-                </div>
-              </div>
 
-              {/* Table */}
-              <div className='overflow-hidden rounded-lg border'>
-                {/* Desktop Table Header */}
-                <div className='bg-muted hidden grid-cols-6 gap-2 p-3 text-sm font-semibold md:grid'>
-                  <div>Hashed Key</div>
-                  <div className='text-right'>Balance</div>
-                  <div className='text-right'>Total Spent</div>
-                  <div className='text-right'>Total Requests</div>
-                  <div>Refund Address</div>
-                  <div className='text-right'>Expiry Time</div>
+            {rows.length > 0 ? (
+              <>
+                <div className='hidden md:block'>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Hashed Key</TableHead>
+                        <TableHead className='text-right'>Balance</TableHead>
+                        <TableHead className='text-right'>Total Spent</TableHead>
+                        <TableHead className='text-right'>Total Requests</TableHead>
+                        <TableHead>Refund Address</TableHead>
+                        <TableHead className='text-right'>Expiry Time</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {rows.map((balance, index) => (
+                        <TableRow
+                          key={`${balance.hashed_key}-${balance.parent_key_hash ?? 'root'}-${index}`}
+                          className={cn(
+                            balance.balance === 0 && !balance.isChild && 'opacity-60',
+                            balance.isChild && 'bg-muted/30'
+                          )}
+                        >
+                          <TableCell className='max-w-[16rem] font-mono text-xs break-all whitespace-normal'>
+                            <div className='flex items-center gap-2'>
+                              {balance.isChild && (
+                                <Badge variant='outline' className='h-4 px-1 text-[10px] uppercase'>
+                                  Child
+                                </Badge>
+                              )}
+                              <span>{balance.hashed_key}</span>
+                            </div>
+                          </TableCell>
+                          <TableCell className='text-right font-mono'>
+                            {balance.isChild ? (
+                              <span className='text-muted-foreground italic'>(Parent)</span>
+                            ) : (
+                              formatBalance(balance.balance)
+                            )}
+                          </TableCell>
+                          <TableCell className='text-right font-mono'>
+                            {formatBalance(balance.total_spent)}
+                          </TableCell>
+                          <TableCell className='text-right font-mono'>
+                            {balance.total_requests.toLocaleString()}
+                          </TableCell>
+                          <TableCell className='max-w-[14rem] font-mono text-xs break-all whitespace-normal'>
+                            {balance.refund_address || '-'}
+                          </TableCell>
+                          <TableCell className='text-right font-mono text-xs'>
+                            {balance.key_expiry_time ? (
+                              <div className='inline-flex items-center justify-end gap-1'>
+                                <Clock className='h-3 w-3' />
+                                <span>
+                                  {new Date(balance.key_expiry_time * 1000).toLocaleDateString()}
+                                </span>
+                              </div>
+                            ) : (
+                              '-'
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
                 </div>
 
-                {hierarchicalData.length > 0 ? (
-                  hierarchicalData.map((balance, index) => (
-                    <div
-                      key={index}
+                <div className='space-y-2 md:hidden'>
+                  {rows.map((balance, index) => (
+                    <Card
+                      key={`${balance.hashed_key}-${balance.parent_key_hash ?? 'root'}-mobile-${index}`}
                       className={cn(
-                        'hover:bg-muted/50 border-t p-3 text-sm transition-colors',
-                        balance.balance === 0 &&
-                          !balance.isChild &&
-                          'opacity-60',
-                        balance.isChild &&
-                          'ml-4 border-l-2 border-l-blue-200 bg-blue-50/30'
+                        'shadow-none',
+                        balance.balance === 0 && !balance.isChild && 'opacity-80',
+                        balance.isChild && 'bg-muted/30'
                       )}
                     >
-                      {/* Desktop Layout */}
-                      <div className='hidden grid-cols-6 gap-2 md:grid'>
-                        <div className='flex max-w-48 items-center gap-2 truncate font-mono text-xs break-all'>
+                      <CardHeader className='p-4 pb-2'>
+                        <div className='flex items-center justify-between gap-2'>
+                          <CardDescription className='font-mono text-xs break-all'>
+                            {balance.hashed_key}
+                          </CardDescription>
                           {balance.isChild && (
-                            <span className='rounded bg-blue-100 px-1 py-0.5 text-[10px] font-bold text-blue-700 uppercase'>
+                            <Badge variant='outline' className='h-4 px-1.5 text-[10px] uppercase'>
                               Child
-                            </span>
-                          )}
-                          {balance.hashed_key}
-                        </div>
-                        <div className='text-right font-mono'>
-                          {balance.isChild ? (
-                            <span className='text-muted-foreground italic'>
-                              (Parent)
-                            </span>
-                          ) : (
-                            formatBalance(balance.balance)
+                            </Badge>
                           )}
                         </div>
-                        <div className='text-right font-mono'>
-                          {formatBalance(balance.total_spent)}
+                      </CardHeader>
+                      <CardContent className='grid grid-cols-2 gap-3 p-4 pt-0'>
+                        <div>
+                          <p className='text-muted-foreground text-xs'>Balance</p>
+                          <p className='font-mono text-sm'>
+                            {balance.isChild ? '(Uses Parent)' : formatBalance(balance.balance)}
+                          </p>
                         </div>
-                        <div className='text-right font-mono'>
-                          {balance.total_requests.toLocaleString()}
+                        <div>
+                          <p className='text-muted-foreground text-xs'>Spent</p>
+                          <p className='font-mono text-sm'>
+                            {formatBalance(balance.total_spent)}
+                          </p>
                         </div>
-                        <div className='max-w-32 truncate font-mono text-xs break-all'>
-                          {balance.refund_address || '-'}
+                        <div>
+                          <p className='text-muted-foreground text-xs'>Requests</p>
+                          <p className='font-mono text-sm'>
+                            {balance.total_requests.toLocaleString()}
+                          </p>
                         </div>
-                        <div className='text-right font-mono text-xs'>
-                          {balance.key_expiry_time ? (
-                            <div className='flex items-center justify-end gap-1'>
-                              <Clock className='h-3 w-3' />
-                              <span>
-                                {new Date(
-                                  balance.key_expiry_time * 1000
-                                ).toLocaleDateString()}
+                        <div>
+                          <p className='text-muted-foreground text-xs'>Expires</p>
+                          <p className='font-mono text-xs'>
+                            {balance.key_expiry_time ? (
+                              <span className='inline-flex items-center gap-1'>
+                                <Clock className='h-3 w-3' />
+                                {new Date(balance.key_expiry_time * 1000).toLocaleDateString()}
                               </span>
-                            </div>
-                          ) : (
-                            '-'
-                          )}
+                            ) : (
+                              '-'
+                            )}
+                          </p>
                         </div>
-                      </div>
-
-                      {/* Mobile Layout */}
-                      <div className='space-y-3 md:hidden'>
-                        <div className='flex items-center justify-between'>
-                          <div className='space-y-1'>
-                            <span className='text-muted-foreground text-xs font-medium'>
-                              {balance.isChild ? 'Child Key' : 'Key'}
-                            </span>
-                            <div className='font-mono text-xs break-all'>
-                              {balance.hashed_key}
-                            </div>
-                          </div>
-                          {balance.isChild && (
-                            <span className='rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-bold text-blue-700 uppercase'>
-                              Child
-                            </span>
-                          )}
-                        </div>
-
-                        <div className='grid grid-cols-2 gap-3'>
-                          <div className='space-y-1'>
-                            <div className='text-muted-foreground text-xs font-medium'>
-                              Balance
-                            </div>
-                            <div className='truncate font-mono text-sm'>
-                              {balance.isChild ? (
-                                <span className='text-muted-foreground text-xs italic'>
-                                  (Uses Parent)
-                                </span>
-                              ) : (
-                                formatBalance(balance.balance)
-                              )}
-                            </div>
-                          </div>
-                          <div className='space-y-1'>
-                            <div className='text-muted-foreground text-xs font-medium'>
-                              Spent
-                            </div>
-                            <div className='truncate font-mono text-sm'>
-                              {formatBalance(balance.total_spent)}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className='grid grid-cols-2 gap-3'>
-                          <div className='space-y-1'>
-                            <div className='text-muted-foreground text-xs font-medium'>
-                              Requests
-                            </div>
-                            <div className='truncate font-mono text-sm'>
-                              {balance.total_requests.toLocaleString()}
-                            </div>
-                          </div>
-                          <div className='space-y-1'>
-                            <div className='text-muted-foreground text-xs font-medium'>
-                              Expires
-                            </div>
-                            <div className='font-mono text-xs'>
-                              {balance.key_expiry_time ? (
-                                <div className='flex items-center gap-1'>
-                                  <Clock className='h-3 w-3 flex-shrink-0' />
-                                  <span className='truncate'>
-                                    {new Date(
-                                      balance.key_expiry_time * 1000
-                                    ).toLocaleDateString()}
-                                  </span>
-                                </div>
-                              ) : (
-                                '-'
-                              )}
-                            </div>
-                          </div>
-                        </div>
-
                         {balance.refund_address && (
-                          <div className='space-y-1 border-t pt-2'>
-                            <div className='text-muted-foreground text-xs font-medium'>
-                              Refund Address
-                            </div>
-                            <div className='font-mono text-xs break-all'>
+                          <div className='col-span-2'>
+                            <p className='text-muted-foreground text-xs'>Refund Address</p>
+                            <p className='font-mono text-xs break-all'>
                               {balance.refund_address}
-                            </div>
+                            </p>
                           </div>
                         )}
-                      </div>
-                    </div>
-                  ))
-                ) : (
-                  <div className='text-muted-foreground p-8 text-center text-sm'>
-                    {searchTerm ? (
-                      <div className='flex flex-col items-center gap-2'>
-                        <AlertCircle className='h-8 w-8' />
-                        <span>No temporary balances match your search</span>
-                      </div>
-                    ) : (
-                      <div className='flex flex-col items-center gap-2'>
-                        <Key className='h-8 w-8' />
-                        <span>No temporary balances found</span>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              {data && data.length > 0 && (
-                <div className='text-muted-foreground mt-4 text-xs'>
-                  Showing {filteredData.length} of {data.length} temporary
-                  balances
+                      </CardContent>
+                    </Card>
+                  ))}
                 </div>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </>
+              </>
+            ) : (
+              <Empty className='py-8'>
+                <EmptyHeader>
+                  <EmptyMedia variant='icon'>
+                    {searchTerm ? (
+                      <AlertCircle className='h-4 w-4' />
+                    ) : (
+                      <Key className='h-4 w-4' />
+                    )}
+                  </EmptyMedia>
+                  <EmptyTitle>
+                    {searchTerm
+                      ? 'No temporary balances match your search'
+                      : 'No temporary balances found'}
+                  </EmptyTitle>
+                  <EmptyDescription>
+                    {searchTerm
+                      ? 'Try a different key hash or refund address.'
+                      : 'Temporary balances will appear here once API keys are used.'}
+                  </EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            )}
+
+            {data && data.length > 0 && (
+              <p className='text-muted-foreground text-xs'>
+                Showing {filteredData.length} of {data.length} temporary balances
+              </p>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
   );
 }
diff --git a/ui/components/theme-toggle.tsx b/ui/components/theme-toggle.tsx
index 1008e0f4..bcc77ebb 100644
--- a/ui/components/theme-toggle.tsx
+++ b/ui/components/theme-toggle.tsx
@@ -1,24 +1,111 @@
 'use client';
 
-import * as React from 'react';
-import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { ChevronsUpDownIcon, Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
-
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 
-export function ThemeToggle() {
+interface ThemeToggleProps {
+  className?: string;
+  compact?: boolean;
+  menuSide?: 'top' | 'right' | 'bottom' | 'left';
+  menuAlign?: 'start' | 'center' | 'end';
+}
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+const THEME_OPTIONS: Array<{ value: ThemeMode; label: string; icon: typeof Sun }> = [
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'system', label: 'System', icon: Monitor },
+];
+
+function isThemeMode(value: string | undefined): value is ThemeMode {
+  return value === 'light' || value === 'dark' || value === 'system';
+}
+
+function getThemeOption(theme: ThemeMode) {
+  return THEME_OPTIONS.find((option) => option.value === theme) ?? THEME_OPTIONS[2];
+}
+
+export function ThemeToggle({
+  className,
+  compact = false,
+  menuSide = 'bottom',
+  menuAlign = 'end',
+}: ThemeToggleProps) {
   const { setTheme, theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [fallbackTheme, setFallbackTheme] = useState<ThemeMode>('system');
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (isThemeMode(theme)) {
+      setFallbackTheme(theme);
+    }
+  }, [theme]);
+
+  const activeTheme = mounted && isThemeMode(theme) ? theme : fallbackTheme;
+  const activeOption = getThemeOption(activeTheme);
+  const ActiveIcon = activeOption.icon;
 
   return (
-    <Button
-      variant='ghost'
-      size='sm'
-      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-      className='gap-2'
-    >
-      <Sun className='h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
-      <Moon className='h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />
-      <span className='sr-only'>Toggle theme</span>
-    </Button>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='outline'
+          size='sm'
+          className={cn(
+            'border-border/60 bg-background/65 text-muted-foreground hover:text-foreground rounded-md',
+            compact ? 'h-8 w-10 justify-center px-0' : 'h-8 justify-between gap-2',
+            className
+          )}
+          disabled={!mounted}
+        >
+          <span className='inline-flex min-w-0 items-center gap-1.5'>
+            <ActiveIcon className='h-3.5 w-3.5 shrink-0' />
+            {compact ? null : (
+              <span className='truncate text-[11px] font-medium'>{activeOption.label}</span>
+            )}
+          </span>
+          {compact ? (
+            <span className='sr-only'>Theme: {activeOption.label}</span>
+          ) : (
+            <ChevronsUpDownIcon className='h-3.5 w-3.5 opacity-70' />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side={menuSide} align={menuAlign}>
+        <DropdownMenuRadioGroup
+          value={activeTheme}
+          onValueChange={(value) => {
+            if (!isThemeMode(value)) return;
+            setTheme(value);
+          }}
+        >
+          {THEME_OPTIONS.map((option) => {
+            const Icon = option.icon;
+
+            return (
+              <DropdownMenuRadioItem key={option.value} value={option.value}>
+                <Icon className='h-3.5 w-3.5' />
+                {option.label}
+              </DropdownMenuRadioItem>
+            );
+          })}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
diff --git a/ui/components/ui/ModalShell.tsx b/ui/components/ui/ModalShell.tsx
new file mode 100644
index 00000000..4779b0ab
--- /dev/null
+++ b/ui/components/ui/ModalShell.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface ModalShellProps {
+  open: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  overlayClassName?: string;
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+  closeOnOverlayClick?: boolean;
+  closeOnAnyClick?: boolean;
+  stopPropagation?: boolean;
+  contentRole?: React.AriaRole;
+  contentAriaLabel?: string;
+}
+
+export const ModalShell: React.FC<ModalShellProps> = ({
+  open,
+  onClose,
+  children,
+  overlayClassName,
+  contentClassName,
+  contentStyle,
+  closeOnOverlayClick = false,
+  closeOnAnyClick = false,
+  stopPropagation,
+  contentRole = "dialog",
+  contentAriaLabel,
+}) => {
+  if (!open) return null;
+
+  const shouldStopPropagation = stopPropagation ?? !closeOnAnyClick;
+
+  const handleOverlayMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!onClose) return;
+    if (closeOnAnyClick) {
+      onClose();
+      return;
+    }
+    if (closeOnOverlayClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className={cn("fixed inset-0 flex items-center justify-center", overlayClassName)}
+      onMouseDown={handleOverlayMouseDown}
+    >
+      <div
+        className={contentClassName}
+        role={contentRole}
+        aria-modal="true"
+        aria-label={contentAriaLabel}
+        style={contentStyle}
+        onMouseDown={
+          shouldStopPropagation ? (event) => event.stopPropagation() : undefined
+        }
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/ui/components/ui/SettingsDialog.tsx b/ui/components/ui/SettingsDialog.tsx
new file mode 100644
index 00000000..b41195d6
--- /dev/null
+++ b/ui/components/ui/SettingsDialog.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer";
+import { ModalShell } from "@/components/ui/ModalShell";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+
+interface SettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  isMobile?: boolean;
+  title?: string;
+}
+
+export default function SettingsDialog({
+  open,
+  onOpenChange,
+  children,
+  isMobile: propIsMobile,
+  title = "Dialog",
+}: SettingsDialogProps) {
+  const mediaQueryIsMobile = useMediaQuery("(max-width: 640px)");
+  const isMobile = propIsMobile ?? mediaQueryIsMobile;
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerContent className="p-4">
+          <DrawerTitle className="sr-only">{title}</DrawerTitle>
+          {children}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <ModalShell
+      open={open}
+      onClose={() => onOpenChange(false)}
+      overlayClassName="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4"
+      contentClassName="bg-card border border-border rounded-lg p-6 w-full max-w-md"
+      closeOnOverlayClick
+      contentAriaLabel={title}
+    >
+      {children}
+    </ModalShell>
+  );
+}
diff --git a/ui/components/ui/accordion.tsx b/ui/components/ui/accordion.tsx
new file mode 100644
index 00000000..83270c27
--- /dev/null
+++ b/ui/components/ui/accordion.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+      {...props}
+    >
+      <div
+        className={cn(
+          "pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/ui/components/ui/alert-dialog.tsx b/ui/components/ui/alert-dialog.tsx
index f394a017..e0e5b00c 100644
--- a/ui/components/ui/alert-dialog.tsx
+++ b/ui/components/ui/alert-dialog.tsx
@@ -1,31 +1,31 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
-import { buttonVariants } from '@/components/ui/button';
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 
 function AlertDialog({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />;
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 }
 
 function AlertDialogTrigger({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
   return (
-    <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
-  );
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
 }
 
 function AlertDialogPortal({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
   return (
-    <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
-  );
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
 }
 
 function AlertDialogOverlay({
@@ -34,62 +34,76 @@ function AlertDialogOverlay({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
   return (
     <AlertDialogPrimitive.Overlay
-      data-slot='alert-dialog-overlay'
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
+      data-slot="alert-dialog-overlay"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDialogContent({
   className,
+  size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Content
-        data-slot='alert-dialog-content'
+        data-slot="alert-dialog-content"
+        data-size={size}
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
           className
         )}
         {...props}
       />
     </AlertDialogPortal>
-  );
+  )
 }
 
 function AlertDialogHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='alert-dialog-header'
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      data-slot="alert-dialog-header"
+      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDialogFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='alert-dialog-footer'
+      data-slot="alert-dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
     />
-  );
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+      {...props}
+    />
+  )
 }
 
 function AlertDialogTitle({
@@ -98,11 +112,11 @@ function AlertDialogTitle({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
   return (
     <AlertDialogPrimitive.Title
-      data-slot='alert-dialog-title'
-      className={cn('text-lg font-semibold', className)}
+      data-slot="alert-dialog-title"
+      className={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDialogDescription({
@@ -111,47 +125,60 @@ function AlertDialogDescription({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
   return (
     <AlertDialogPrimitive.Description
-      data-slot='alert-dialog-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDialogAction({
   className,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
   return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  );
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
 }
 
 function AlertDialogCancel({
   className,
+  variant = "outline",
+  size = "default",
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
   return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: 'outline' }), className)}
-      {...props}
-    />
-  );
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
 }
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-};
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/ui/components/ui/alert.tsx b/ui/components/ui/alert.tsx
index 28405cc3..8a657545 100644
--- a/ui/components/ui/alert.tsx
+++ b/ui/components/ui/alert.tsx
@@ -1,66 +1,72 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
-      },
+const alertVariants = cva("grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
     },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
 
 function Alert({
   className,
   variant,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
   return (
     <div
-      data-slot='alert'
-      role='alert'
+      data-slot="alert"
+      role="alert"
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  );
+  )
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='alert-title'
+      data-slot="alert-title"
       className={cn(
-        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='alert-description'
+      data-slot="alert-description"
       className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Alert, AlertTitle, AlertDescription };
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/ui/components/ui/aspect-ratio.tsx b/ui/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..57e38fa9
--- /dev/null
+++ b/ui/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/ui/components/ui/avatar.tsx b/ui/components/ui/avatar.tsx
index 9f7051c5..5ef47cd7 100644
--- a/ui/components/ui/avatar.tsx
+++ b/ui/components/ui/avatar.tsx
@@ -1,24 +1,28 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Avatar({
   className,
+  size = "default",
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
   return (
     <AvatarPrimitive.Root
-      data-slot='avatar'
+      data-slot="avatar"
+      data-size={size}
       className={cn(
-        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarImage({
@@ -27,11 +31,14 @@ function AvatarImage({
 }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
   return (
     <AvatarPrimitive.Image
-      data-slot='avatar-image'
-      className={cn('aspect-square size-full', className)}
+      data-slot="avatar-image"
+      className={cn(
+        "rounded-full aspect-square size-full object-cover",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarFallback({
@@ -40,14 +47,63 @@ function AvatarFallback({
 }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
   return (
     <AvatarPrimitive.Fallback
-      data-slot='avatar-fallback'
+      data-slot="avatar-fallback"
       className={cn(
-        'bg-muted flex size-full items-center justify-center rounded-full',
+        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Avatar, AvatarImage, AvatarFallback };
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/ui/components/ui/badge.tsx b/ui/components/ui/badge.tsx
index 141e6662..086ee433 100644
--- a/ui/components/ui/badge.tsx
+++ b/ui/components/ui/badge.tsx
@@ -1,41 +1,45 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
   {
     variants: {
       variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-        success:
-          'border-transparent bg-green-500 text-white hover:bg-green-500/80',
-        warning:
-          'border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80',
-        error: 'border-transparent bg-red-500 text-white hover:bg-red-500/80',
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   }
-);
+)
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
 
-function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }
diff --git a/ui/components/ui/breadcrumb.tsx b/ui/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..f1e7a951
--- /dev/null
+++ b/ui/components/ui/breadcrumb.tsx
@@ -0,0 +1,122 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("gap-1 inline-flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "size-5 [&>svg]:size-4 flex items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/ui/components/ui/button-group.tsx b/ui/components/ui/button-group.tsx
new file mode 100644
index 00000000..6c9f9d2f
--- /dev/null
+++ b/ui/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/ui/components/ui/button.tsx b/ui/components/ui/button.tsx
index bac00480..7205ea96 100644
--- a/ui/components/ui/button.tsx
+++ b/ui/components/ui/button.tsx
@@ -1,59 +1,60 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   }
-);
+)
 
 function Button({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> &
+}: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+    asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
-      data-slot='button'
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/ui/components/ui/calendar.tsx b/ui/components/ui/calendar.tsx
index 3cdae570..5fb07ccf 100644
--- a/ui/components/ui/calendar.tsx
+++ b/ui/components/ui/calendar.tsx
@@ -1,72 +1,222 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { DayPicker } from 'react-day-picker';
+import * as React from "react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from "react-day-picker"
 
-import { cn } from '@/lib/utils';
-import { buttonVariants } from '@/components/ui/button';
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
   ...props
-}: CalendarProps) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn('p-3', className)}
+      className={cn(
+        "p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-        month: 'space-y-4',
-        caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
-        nav: 'space-x-1 flex items-center',
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
         button_previous: cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1'
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
         ),
         button_next: cn(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1'
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
         ),
-        month_grid: 'w-full border-collapse space-y-1',
-        weekdays: 'flex',
-        weekday:
-          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
-        week: 'flex w-full mt-2',
         day: cn(
-          buttonVariants({ variant: 'ghost' }),
-          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
         ),
-        day_button: 'h-9 w-9 p-0 font-normal',
-        range_end: 'day-range-end',
-        selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        today: 'bg-accent text-accent-foreground',
-        outside:
-          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        disabled: 'text-muted-foreground opacity-50',
-        range_middle:
-          'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        hidden: 'invisible',
+        range_start: cn(
+          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
+          defaultClassNames.range_end
+        ),
+        today: cn(
+          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        Chevron: ({ orientation }) => {
-          if (orientation === 'left') {
-            return <ChevronLeft className='h-4 w-4' />;
-          }
-          return <ChevronRight className='h-4 w-4' />;
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
         },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
       }}
       {...props}
     />
-  );
+  )
 }
-Calendar.displayName = 'Calendar';
 
-export { Calendar };
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/ui/components/ui/card.tsx b/ui/components/ui/card.tsx
index cf7fc71c..84bfaa4d 100644
--- a/ui/components/ui/card.tsx
+++ b/ui/components/ui/card.tsx
@@ -1,84 +1,86 @@
-import * as React from 'react';
+import * as React from "react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
   return (
     <div
-      data-slot='card'
+      data-slot="card"
+      data-size={size}
+      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='card-header'
+      data-slot="card-title"
+      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='card-title'
-      className={cn('leading-none font-semibold', className)}
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
       {...props}
     />
-  );
+  )
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='card-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="card-footer"
+      className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
       {...props}
     />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='card-action'
-      className={cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='card-content'
-      className={cn('px-6', className)}
-      {...props}
-    />
-  );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot='card-footer'
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
-      {...props}
-    />
-  );
+  )
 }
 
 export {
@@ -89,4 +91,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-};
+}
diff --git a/ui/components/ui/carousel.tsx b/ui/components/ui/carousel.tsx
index b4b89e35..1c712940 100644
--- a/ui/components/ui/carousel.tsx
+++ b/ui/components/ui/carousel.tsx
@@ -1,108 +1,108 @@
-'use client';
+"use client"
 
-import * as React from 'react';
+import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
-} from 'embla-carousel-react';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
+} from "embla-carousel-react"
 
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
 
 type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: 'horizontal' | 'vertical';
-  setApi?: (api: CarouselApi) => void;
-};
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+  const context = React.useContext(CarouselContext)
 
   if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />');
+    throw new Error("useCarousel must be used within a <Carousel />")
   }
 
-  return context;
+  return context
 }
 
 function Carousel({
-  orientation = 'horizontal',
+  orientation = "horizontal",
   opts,
   setApi,
   plugins,
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps) {
+}: React.ComponentProps<"div"> & CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
+      axis: orientation === "horizontal" ? "x" : "y",
     },
     plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
 
   const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return;
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
 
   const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
+    api?.scrollPrev()
+  }, [api])
 
   const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
+    api?.scrollNext()
+  }, [api])
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        scrollNext();
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
       }
     },
     [scrollPrev, scrollNext]
-  );
+  )
 
   React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
 
   React.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on('reInit', onSelect);
-    api.on('select', onSelect);
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
 
     return () => {
-      api?.off('select', onSelect);
-    };
-  }, [api, onSelect]);
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
 
   return (
     <CarouselContext.Provider
@@ -111,7 +111,7 @@ function Carousel({
         api: api,
         opts,
         orientation:
-          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -120,115 +120,115 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
-        role='region'
-        aria-roledescription='carousel'
-        data-slot='carousel'
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
         {...props}
       >
         {children}
       </div>
     </CarouselContext.Provider>
-  );
+  )
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
-  const { carouselRef, orientation } = useCarousel();
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
 
   return (
     <div
       ref={carouselRef}
-      className='overflow-hidden'
-      data-slot='carousel-content'
+      className="overflow-hidden"
+      data-slot="carousel-content"
     >
       <div
         className={cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
           className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const { orientation } = useCarousel();
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
 
   return (
     <div
-      role='group'
-      aria-roledescription='slide'
-      data-slot='carousel-item'
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
       className={cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CarouselPrevious({
   className,
-  variant = 'outline',
-  size = 'icon',
+  variant = "outline",
+  size = "icon-sm",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
-      data-slot='carousel-previous'
+      data-slot="carousel-previous"
       variant={variant}
       size={size}
       className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -left-12 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        "rounded-full absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft />
-      <span className='sr-only'>Previous slide</span>
+      <ChevronLeftIcon />
+      <span className="sr-only">Previous slide</span>
     </Button>
-  );
+  )
 }
 
 function CarouselNext({
   className,
-  variant = 'outline',
-  size = 'icon',
+  variant = "outline",
+  size = "icon-sm",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
-      data-slot='carousel-next'
+      data-slot="carousel-next"
       variant={variant}
       size={size}
       className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -right-12 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        "rounded-full absolute touch-manipulation",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight />
-      <span className='sr-only'>Next slide</span>
+      <ChevronRightIcon />
+      <span className="sr-only">Next slide</span>
     </Button>
-  );
+  )
 }
 
 export {
@@ -238,4 +238,5 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-};
+  useCarousel,
+}
diff --git a/ui/components/ui/chart.tsx b/ui/components/ui/chart.tsx
index 3babe064..1b783013 100644
--- a/ui/components/ui/chart.tsx
+++ b/ui/components/ui/chart.tsx
@@ -1,37 +1,37 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as RechartsPrimitive from 'recharts';
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: '', dark: '.dark' } as const;
+const THEMES = { light: "", dark: ".dark" } as const
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
+    label?: React.ReactNode
+    icon?: React.ComponentType
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
+  )
+}
 
 type ChartContextProps = {
-  config: ChartConfig;
-};
+  config: ChartConfig
+}
 
-const ChartContext = React.createContext<ChartContextProps | null>(null);
+const ChartContext = React.createContext<ChartContextProps | null>(null)
 
 function useChart() {
-  const context = React.useContext(ChartContext);
+  const context = React.useContext(ChartContext)
 
   if (!context) {
-    throw new Error('useChart must be used within a <ChartContainer />');
+    throw new Error("useChart must be used within a <ChartContainer />")
   }
 
-  return context;
+  return context
 }
 
 function ChartContainer({
@@ -40,19 +40,19 @@ function ChartContainer({
   children,
   config,
   ...props
-}: React.ComponentProps<'div'> & {
-  config: ChartConfig;
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
   children: React.ComponentProps<
     typeof RechartsPrimitive.ResponsiveContainer
-  >['children'];
+  >["children"]
 }) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 
   return (
     <ChartContext.Provider value={{ config }}>
       <div
-        data-slot='chart'
+        data-slot="chart"
         data-chart={chartId}
         className={cn(
           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
@@ -66,16 +66,16 @@ function ChartContainer({
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  );
+  )
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
     ([, config]) => config.theme || config.color
-  );
+  )
 
   if (!colorConfig.length) {
-    return null;
+    return null
   }
 
   return (
@@ -89,26 +89,28 @@ ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
   })
-  .join('\n')}
+  .join("\n")}
 }
 `
           )
-          .join('\n'),
+          .join("\n"),
       }}
     />
-  );
-};
+  )
+}
 
-const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltip = RechartsPrimitive.Tooltip
+type ChartValueType = number | string | ReadonlyArray<number | string>
+type ChartNameType = number | string
 
 function ChartTooltipContent({
   active,
   payload,
   className,
-  indicator = 'dot',
+  indicator = "dot",
   hideLabel = false,
   hideIndicator = false,
   label,
@@ -118,42 +120,42 @@ function ChartTooltipContent({
   color,
   nameKey,
   labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: 'line' | 'dot' | 'dashed';
-    nameKey?: string;
-    labelKey?: string;
+}: Partial<RechartsPrimitive.TooltipContentProps<ChartValueType, ChartNameType>> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
   }) {
-  const { config } = useChart();
+  const { config } = useChart()
 
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
-      return null;
+      return null
     }
 
-    const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
     const value =
-      !labelKey && typeof label === 'string'
+      !labelKey && typeof label === "string"
         ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label;
+        : itemConfig?.label
 
     if (labelFormatter) {
       return (
-        <div className={cn('font-medium', labelClassName)}>
+        <div className={cn("font-medium", labelClassName)}>
           {labelFormatter(value, payload)}
         </div>
-      );
+      )
     }
 
     if (!value) {
-      return null;
+      return null
     }
 
-    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
   }, [
     label,
     labelFormatter,
@@ -162,185 +164,192 @@ function ChartTooltipContent({
     labelClassName,
     config,
     labelKey,
-  ]);
+  ])
 
   if (!active || !payload?.length) {
-    return null;
+    return null
   }
 
-  const nestLabel = payload.length === 1 && indicator !== 'dot';
+  const nestLabel = payload.length === 1 && indicator !== "dot"
 
   return (
     <div
-      className={cn(
-        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
-        className
-      )}
+      className={cn("border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start", className)}
     >
       {!nestLabel ? tooltipLabel : null}
-      <div className='grid gap-1.5'>
-        {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || 'value'}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color;
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+            const rawValue = item.value
+            const numericValue =
+              typeof rawValue === "number" ? rawValue : Number(rawValue)
+            const displayValue = Number.isFinite(numericValue)
+              ? numericValue.toLocaleString()
+              : "-"
 
-          return (
-            <div
-              key={item.dataKey}
-              className={cn(
-                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
-                indicator === 'dot' && 'items-center'
-              )}
-            >
-              {formatter && item?.value !== undefined && item.name ? (
-                formatter(item.value, item.name, item, index, item.payload)
-              ) : (
-                <>
-                  {itemConfig?.icon ? (
-                    <itemConfig.icon />
-                  ) : (
-                    !hideIndicator && (
-                      <div
-                        className={cn(
-                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
-                          {
-                            'h-2.5 w-2.5': indicator === 'dot',
-                            'w-1': indicator === 'line',
-                            'w-0 border-[1.5px] border-dashed bg-transparent':
-                              indicator === 'dashed',
-                            'my-0.5': nestLabel && indicator === 'dashed',
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
                           }
-                        )}
-                        style={
-                          {
-                            '--color-bg': indicatorColor,
-                            '--color-border': indicatorColor,
-                          } as React.CSSProperties
-                        }
-                      />
-                    )
-                  )}
-                  <div
-                    className={cn(
-                      'flex flex-1 justify-between leading-none',
-                      nestLabel ? 'items-end' : 'items-center'
+                        />
+                      )
                     )}
-                  >
-                    <div className='grid gap-1.5'>
-                      {nestLabel ? tooltipLabel : null}
-                      <span className='text-muted-foreground'>
-                        {itemConfig?.label || item.name}
+                    <div
+                      className={cn(
+                        "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto] gap-x-4 leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid min-w-0 gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground truncate pr-1">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      <span className="text-foreground ml-1 text-right font-mono font-medium tabular-nums">
+                        {displayValue}
                       </span>
                     </div>
-                    {item.value && (
-                      <span className='text-foreground font-mono font-medium tabular-nums'>
-                        {item.value.toLocaleString()}
-                      </span>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })}
+                  </>
+                )}
+              </div>
+            )
+          })}
       </div>
     </div>
-  );
+  )
 }
 
-const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegend = RechartsPrimitive.Legend
 
 function ChartLegendContent({
   className,
   hideIcon = false,
   payload,
-  verticalAlign = 'bottom',
+  verticalAlign = "bottom",
   nameKey,
-}: React.ComponentProps<'div'> &
-  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-    hideIcon?: boolean;
-    nameKey?: string;
+}: React.ComponentProps<"div"> &
+  Pick<
+    RechartsPrimitive.DefaultLegendContentProps,
+    "payload" | "verticalAlign"
+  > & {
+    hideIcon?: boolean
+    nameKey?: string
   }) {
-  const { config } = useChart();
+  const { config } = useChart()
 
   if (!payload?.length) {
-    return null;
+    return null
   }
 
   return (
     <div
       className={cn(
-        'flex items-center justify-center gap-4',
-        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
         className
       )}
     >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || 'value'}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
-            )}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className='h-2 w-2 shrink-0 rounded-[2px]'
-                style={{
-                  backgroundColor: item.color,
-                }}
-              />
-            )}
-            {itemConfig?.label}
-          </div>
-        );
-      })}
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
     </div>
-  );
+  )
 }
 
-// Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
   config: ChartConfig,
   payload: unknown,
   key: string
 ) {
-  if (typeof payload !== 'object' || payload === null) {
-    return undefined;
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
   }
 
   const payloadPayload =
-    'payload' in payload &&
-    typeof payload.payload === 'object' &&
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
     payload.payload !== null
       ? payload.payload
-      : undefined;
+      : undefined
 
-  let configLabelKey: string = key;
+  let configLabelKey: string = key
 
   if (
     key in payload &&
-    typeof payload[key as keyof typeof payload] === 'string'
+    typeof payload[key as keyof typeof payload] === "string"
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
+    configLabelKey = payload[key as keyof typeof payload] as string
   } else if (
     payloadPayload &&
     key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
-    ] as string;
+    ] as string
   }
 
   return configLabelKey in config
     ? config[configLabelKey]
-    : config[key as keyof typeof config];
+    : config[key as keyof typeof config]
 }
 
 export {
@@ -350,4 +359,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-};
+}
diff --git a/ui/components/ui/checkbox.tsx b/ui/components/ui/checkbox.tsx
index ef320f99..dfd3673d 100644
--- a/ui/components/ui/checkbox.tsx
+++ b/ui/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from 'lucide-react';
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
 
 function Checkbox({
   className,
@@ -12,21 +12,22 @@ function Checkbox({
 }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
-      data-slot='checkbox'
+      data-slot="checkbox"
       className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     >
       <CheckboxPrimitive.Indicator
-        data-slot='checkbox-indicator'
-        className='flex items-center justify-center text-current transition-none'
+        data-slot="checkbox-indicator"
+        className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
       >
-        <CheckIcon className='size-3.5' />
+        <CheckIcon
+        />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  );
+  )
 }
 
-export { Checkbox };
+export { Checkbox }
diff --git a/ui/components/ui/collapsible.tsx b/ui/components/ui/collapsible.tsx
index 3ed0ecd2..2f7a4e7f 100644
--- a/ui/components/ui/collapsible.tsx
+++ b/ui/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-'use client';
+"use client"
 
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
 
 function Collapsible({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />;
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
 }
 
 function CollapsibleTrigger({
@@ -13,10 +13,10 @@ function CollapsibleTrigger({
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
   return (
     <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot='collapsible-trigger'
+      data-slot="collapsible-trigger"
       {...props}
     />
-  );
+  )
 }
 
 function CollapsibleContent({
@@ -24,10 +24,10 @@ function CollapsibleContent({
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
   return (
     <CollapsiblePrimitive.CollapsibleContent
-      data-slot='collapsible-content'
+      data-slot="collapsible-content"
       {...props}
     />
-  );
+  )
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/ui/components/ui/combobox.tsx b/ui/components/ui/combobox.tsx
new file mode 100644
index 00000000..e0b9cc5e
--- /dev/null
+++ b/ui/components/ui/combobox.tsx
@@ -0,0 +1,294 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn(
+        "min-w-16 flex-1 outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/ui/components/ui/command.tsx b/ui/components/ui/command.tsx
index 1ab1a6b4..c4da4908 100644
--- a/ui/components/ui/command.tsx
+++ b/ui/components/ui/command.tsx
@@ -1,17 +1,9 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-import { SearchIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 function Command({
   className,
@@ -19,9 +11,9 @@ function Command({
 }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
-      data-slot='command'
+      data-slot="command"
       className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
         className
       )}
       {...props}
@@ -29,44 +21,20 @@ function Command({
   );
 }
 
-function CommandDialog({
-  title = 'Command Palette',
-  description = 'Search for a command to run...',
-  children,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className='sr-only'>
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className='overflow-hidden p-0'>
-        <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
 function CommandInput({
   className,
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div
-      data-slot='command-input-wrapper'
-      className='flex h-9 items-center gap-2 border-b px-3'
+      data-slot="command-input-wrapper"
+      className="flex items-center border-b border-border px-2.5"
     >
-      <SearchIcon className='size-4 shrink-0 opacity-50' />
+      <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
       <CommandPrimitive.Input
-        data-slot='command-input'
+        data-slot="command-input"
         className={cn(
-          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          "flex h-9 w-full rounded-md bg-transparent py-2 pl-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
@@ -81,11 +49,8 @@ function CommandList({
 }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
-      data-slot='command-list'
-      className={cn(
-        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
-        className
-      )}
+      data-slot="command-list"
+      className={cn("max-h-72 overflow-y-auto overflow-x-hidden", className)}
       {...props}
     />
   );
@@ -96,8 +61,8 @@ function CommandEmpty({
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
-      data-slot='command-empty'
-      className='py-6 text-center text-sm'
+      data-slot="command-empty"
+      className="py-6 text-center text-sm text-muted-foreground"
       {...props}
     />
   );
@@ -109,9 +74,25 @@ function CommandGroup({
 }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
-      data-slot='command-group'
+      data-slot="command-group"
       className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-xs",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
         className
       )}
       {...props}
@@ -125,40 +106,8 @@ function CommandSeparator({
 }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
-      data-slot='command-separator'
-      className={cn('bg-border -mx-1 h-px', className)}
-      {...props}
-    />
-  );
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot='command-item'
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot='command-shortcut'
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className
-      )}
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
   );
@@ -166,12 +115,10 @@ function CommandShortcut({
 
 export {
   Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandShortcut,
+  CommandList,
   CommandSeparator,
 };
diff --git a/ui/components/ui/context-menu.tsx b/ui/components/ui/context-menu.tsx
index bdc77df7..01a2b77c 100644
--- a/ui/components/ui/context-menu.tsx
+++ b/ui/components/ui/context-menu.tsx
@@ -1,45 +1,50 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
 
 function ContextMenu({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot='context-menu' {...props} />;
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
 }
 
 function ContextMenuTrigger({
+  className,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
   return (
-    <ContextMenuPrimitive.Trigger data-slot='context-menu-trigger' {...props} />
-  );
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
 }
 
 function ContextMenuGroup({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
   return (
-    <ContextMenuPrimitive.Group data-slot='context-menu-group' {...props} />
-  );
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
 }
 
 function ContextMenuPortal({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
   return (
-    <ContextMenuPrimitive.Portal data-slot='context-menu-portal' {...props} />
-  );
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
 }
 
 function ContextMenuSub({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot='context-menu-sub' {...props} />;
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
 }
 
 function ContextMenuRadioGroup({
@@ -47,10 +52,50 @@ function ContextMenuRadioGroup({
 }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
   return (
     <ContextMenuPrimitive.RadioGroup
-      data-slot='context-menu-radio-group'
+      data-slot="context-menu-radio-group"
       {...props}
     />
-  );
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto", className )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
 }
 
 function ContextMenuSubTrigger({
@@ -59,22 +104,22 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <ContextMenuPrimitive.SubTrigger
-      data-slot='context-menu-sub-trigger'
+      data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className='ml-auto' />
+      <ChevronRightIcon className="ml-auto" />
     </ContextMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
 function ContextMenuSubContent({
@@ -83,105 +128,71 @@ function ContextMenuSubContent({
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
   return (
     <ContextMenuPrimitive.SubContent
-      data-slot='context-menu-sub-content'
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className
-      )}
+      data-slot="context-menu-sub-content"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden", className )}
       {...props}
     />
-  );
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot='context-menu-content'
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot='context-menu-item'
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  );
+  )
 }
 
 function ContextMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.CheckboxItem
-      data-slot='context-menu-checkbox-item'
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+      <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className='size-4' />
+          <CheckIcon
+          />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
     </ContextMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function ContextMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.RadioItem
-      data-slot='context-menu-radio-item'
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+      <span className="absolute right-2 pointer-events-none">
         <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className='size-2 fill-current' />
+          <CheckIcon
+          />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
       {children}
     </ContextMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function ContextMenuLabel({
@@ -189,19 +200,16 @@ function ContextMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <ContextMenuPrimitive.Label
-      data-slot='context-menu-label'
+      data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
-        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className
-      )}
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
       {...props}
     />
-  );
+  )
 }
 
 function ContextMenuSeparator({
@@ -210,27 +218,24 @@ function ContextMenuSeparator({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
   return (
     <ContextMenuPrimitive.Separator
-      data-slot='context-menu-separator'
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function ContextMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot='context-menu-shortcut'
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className
-      )}
+      data-slot="context-menu-shortcut"
+      className={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -249,4 +254,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-};
+}
diff --git a/ui/components/ui/dialog.tsx b/ui/components/ui/dialog.tsx
index 39ccdc05..6d1009d5 100644
--- a/ui/components/ui/dialog.tsx
+++ b/ui/components/ui/dialog.tsx
@@ -1,44 +1,111 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
-import { cn } from '@/lib/utils';
+const MOBILE_DIALOG_QUERY = "(max-width: 767px)";
+const DialogMobileContext = React.createContext(false);
+
+function useDialogMobileMode(): boolean {
+  return React.useContext(DialogMobileContext);
+}
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+  const isMobile = useMediaQuery(MOBILE_DIALOG_QUERY);
+  const { children, ...rootProps } = props;
+
+  return (
+    <DialogMobileContext.Provider value={isMobile}>
+      {isMobile ? (
+        <DrawerPrimitive.Root
+          data-slot="dialog"
+          {...(rootProps as React.ComponentProps<typeof DrawerPrimitive.Root>)}
+        >
+          {children}
+        </DrawerPrimitive.Root>
+      ) : (
+        <DialogPrimitive.Root data-slot="dialog" {...rootProps}>
+          {children}
+        </DialogPrimitive.Root>
+      )}
+    </DialogMobileContext.Provider>
+  );
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+  const isMobile = useDialogMobileMode();
+  if (isMobile) {
+    return (
+      <DrawerPrimitive.Trigger
+        data-slot="dialog-trigger"
+        {...(props as React.ComponentProps<typeof DrawerPrimitive.Trigger>)}
+      />
+    );
+  }
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+  const isMobile = useDialogMobileMode();
+  if (isMobile) {
+    return (
+      <DrawerPrimitive.Portal
+        data-slot="dialog-portal"
+        {...(props as React.ComponentProps<typeof DrawerPrimitive.Portal>)}
+      />
+    );
+  }
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+  const isMobile = useDialogMobileMode();
+  if (isMobile) {
+    return (
+      <DrawerPrimitive.Close
+        data-slot="dialog-close"
+        {...(props as React.ComponentProps<typeof DrawerPrimitive.Close>)}
+      />
+    );
+  }
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  const isMobile = useDialogMobileMode();
+  if (isMobile) {
+    return (
+      <DrawerPrimitive.Overlay
+        data-slot="dialog-overlay"
+        className={cn(
+          "fixed inset-0 z-50 bg-black/70 data-closed:animate-out data-open:animate-in data-closed:fade-out-0 data-open:fade-in-0",
+          className
+        )}
+        {...(props as React.ComponentProps<typeof DrawerPrimitive.Overlay>)}
+      />
+    );
+  }
+
   return (
     <DialogPrimitive.Overlay
-      data-slot='dialog-overlay'
+      data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        "fixed inset-0 z-50 bg-black/70 data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -49,47 +116,83 @@ function DialogOverlay({
 function DialogContent({
   className,
   children,
+  showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  const isMobile = useDialogMobileMode();
+
+  if (isMobile) {
+    return (
+      <DialogPortal data-slot="dialog-portal">
+        <DialogOverlay />
+        <DrawerPrimitive.Content
+          data-slot="dialog-content"
+          className={cn(
+            "fixed inset-x-0 bottom-0 z-50 grid max-h-[90vh] w-full gap-4 rounded-t-xl border-t border-border bg-card p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] shadow-lg data-closed:animate-out data-open:animate-in data-closed:slide-out-to-bottom data-open:slide-in-from-bottom",
+            className
+          )}
+          {...(props as React.ComponentProps<typeof DrawerPrimitive.Content>)}
+        >
+          <div
+            className="bg-muted mx-auto -mt-1 mb-1 h-1 w-12 rounded-full"
+            aria-hidden="true"
+          />
+          {children}
+          {showCloseButton ? (
+            <DrawerPrimitive.Close
+              className="absolute top-3 right-3 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none"
+              aria-label="Close"
+            >
+              <X className="h-4 w-4" />
+            </DrawerPrimitive.Close>
+          ) : null}
+        </DrawerPrimitive.Content>
+      </DialogPortal>
+    );
+  }
+
   return (
-    <DialogPortal data-slot='dialog-portal'>
+    <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
-        data-slot='dialog-content'
+        data-slot="dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 rounded-lg data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className='sr-only'>Close</span>
-        </DialogPrimitive.Close>
+        {showCloseButton ? (
+          <DialogPrimitive.Close
+            className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" />
+          </DialogPrimitive.Close>
+        ) : null}
       </DialogPrimitive.Content>
     </DialogPortal>
   );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='dialog-header'
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)}
       {...props}
     />
   );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='dialog-footer'
-      className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        className
-      )}
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
   );
@@ -99,10 +202,21 @@ function DialogTitle({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  const isMobile = useDialogMobileMode();
+  if (isMobile) {
+    return (
+      <DrawerPrimitive.Title
+        data-slot="dialog-title"
+        className={cn("text-lg leading-none font-semibold", className)}
+        {...(props as React.ComponentProps<typeof DrawerPrimitive.Title>)}
+      />
+    );
+  }
+
   return (
     <DialogPrimitive.Title
-      data-slot='dialog-title'
-      className={cn('text-lg leading-none font-semibold', className)}
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
   );
@@ -112,10 +226,21 @@ function DialogDescription({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  const isMobile = useDialogMobileMode();
+  if (isMobile) {
+    return (
+      <DrawerPrimitive.Description
+        data-slot="dialog-description"
+        className={cn("text-sm text-muted-foreground", className)}
+        {...(props as React.ComponentProps<typeof DrawerPrimitive.Description>)}
+      />
+    );
+  }
+
   return (
     <DialogPrimitive.Description
-      data-slot='dialog-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   );
@@ -123,13 +248,13 @@ function DialogDescription({
 
 export {
   Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
   DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
 };
diff --git a/ui/components/ui/direction.tsx b/ui/components/ui/direction.tsx
new file mode 100644
index 00000000..22e16577
--- /dev/null
+++ b/ui/components/ui/direction.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Direction } from "radix-ui"
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>
+      {children}
+    </Direction.DirectionProvider>
+  )
+}
+
+const useDirection = Direction.useDirection
+
+export { DirectionProvider, useDirection }
diff --git a/ui/components/ui/drawer.tsx b/ui/components/ui/drawer.tsx
new file mode 100644
index 00000000..c1e3e11d
--- /dev/null
+++ b/ui/components/ui/drawer.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=bottom]:pb-[calc(0.5rem+env(safe-area-inset-bottom))] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mt-4 h-1 w-[100px] rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/ui/components/ui/dropdown-menu.tsx b/ui/components/ui/dropdown-menu.tsx
index a1ce09b3..0ce8aeb7 100644
--- a/ui/components/ui/dropdown-menu.tsx
+++ b/ui/components/ui/dropdown-menu.tsx
@@ -1,23 +1,23 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />;
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
 function DropdownMenuPortal({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
-    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
-  );
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
 }
 
 function DropdownMenuTrigger({
@@ -25,87 +25,94 @@ function DropdownMenuTrigger({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
   return (
     <DropdownMenuPrimitive.Trigger
-      data-slot='dropdown-menu-trigger'
+      data-slot="dropdown-menu-trigger"
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuContent({
   className,
+  align = "start",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
-        data-slot='dropdown-menu-content'
+        data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className
-        )}
+        align={align}
+        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
 function DropdownMenuGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
-    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
-  );
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
+  inset?: boolean
+  variant?: "default" | "destructive"
 }) {
   return (
     <DropdownMenuPrimitive.Item
-      data-slot='dropdown-menu-item'
+      data-slot="dropdown-menu-item"
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
-      data-slot='dropdown-menu-checkbox-item'
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+      <span
+        className="absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className='size-4' />
+          <CheckIcon
+          />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function DropdownMenuRadioGroup({
@@ -113,34 +120,42 @@ function DropdownMenuRadioGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
   return (
     <DropdownMenuPrimitive.RadioGroup
-      data-slot='dropdown-menu-radio-group'
+      data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuPrimitive.RadioItem
-      data-slot='dropdown-menu-radio-item'
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+      <span
+        className="absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
         <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className='size-2 fill-current' />
+          <CheckIcon
+          />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuLabel({
@@ -148,19 +163,16 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.Label
-      data-slot='dropdown-menu-label'
+      data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className
-      )}
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSeparator({
@@ -169,33 +181,30 @@ function DropdownMenuSeparator({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
-      data-slot='dropdown-menu-separator'
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot='dropdown-menu-shortcut'
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className
-      )}
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />;
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -204,22 +213,22 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
-      data-slot='dropdown-menu-sub-trigger'
+      data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className='ml-auto size-4' />
+      <ChevronRightIcon className="ml-auto" />
     </DropdownMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
 function DropdownMenuSubContent({
@@ -228,14 +237,11 @@ function DropdownMenuSubContent({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
   return (
     <DropdownMenuPrimitive.SubContent
-      data-slot='dropdown-menu-sub-content'
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className
-      )}
+      data-slot="dropdown-menu-sub-content"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden", className )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -254,4 +260,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-};
+}
diff --git a/ui/components/ui/empty.tsx b/ui/components/ui/empty.tsx
new file mode 100644
index 00000000..6a0a31b9
--- /dev/null
+++ b/ui/components/ui/empty.tsx
@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "gap-2 flex max-w-sm flex-col items-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/ui/components/ui/field.tsx b/ui/components/ui/field.tsx
new file mode 100644
index 00000000..52a4492b
--- /dev/null
+++ b/ui/components/ui/field.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
+  variants: {
+    orientation: {
+      vertical:
+        "flex-col *:w-full [&>.sr-only]:w-auto",
+      horizontal:
+        "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      responsive:
+        "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/ui/components/ui/hover-card.tsx b/ui/components/ui/hover-card.tsx
index 56b9740e..4ecc37ef 100644
--- a/ui/components/ui/hover-card.tsx
+++ b/ui/components/ui/hover-card.tsx
@@ -1,44 +1,44 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function HoverCard({
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot='hover-card' {...props} />;
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
 }
 
 function HoverCardTrigger({
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
   return (
-    <HoverCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />
-  );
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
 }
 
 function HoverCardContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
   return (
-    <HoverCardPrimitive.Portal data-slot='hover-card-portal'>
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
       <HoverCardPrimitive.Content
-        data-slot='hover-card-content'
+        data-slot="hover-card-content"
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden",
           className
         )}
         {...props}
       />
     </HoverCardPrimitive.Portal>
-  );
+  )
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/ui/components/ui/input-group.tsx b/ui/components/ui/input-group.tsx
new file mode 100644
index 00000000..3bae418b
--- /dev/null
+++ b/ui/components/ui/input-group.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "gap-2 text-sm shadow-none flex items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/ui/components/ui/input-otp.tsx b/ui/components/ui/input-otp.tsx
index 8433be75..5a25298c 100644
--- a/ui/components/ui/input-otp.tsx
+++ b/ui/components/ui/input-otp.tsx
@@ -1,77 +1,87 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { OTPInput, OTPInputContext } from 'input-otp';
-import { MinusIcon } from 'lucide-react';
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { MinusIcon } from "lucide-react"
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
+  containerClassName?: string
 }) {
   return (
     <OTPInput
-      data-slot='input-otp'
+      data-slot="input-otp"
       containerClassName={cn(
-        'flex items-center gap-2 has-disabled:opacity-50',
+        "cn-input-otp flex items-center has-disabled:opacity-50",
         containerClassName
       )}
-      className={cn('disabled:cursor-not-allowed', className)}
+      spellCheck={false}
+      className={cn(
+        "disabled:cursor-not-allowed",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='input-otp-group'
-      className={cn('flex items-center', className)}
+      data-slot="input-otp-group"
+      className={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3 flex items-center", className)}
       {...props}
     />
-  );
+  )
 }
 
 function InputOTPSlot({
   index,
   className,
   ...props
-}: React.ComponentProps<'div'> & {
-  index: number;
+}: React.ComponentProps<"div"> & {
+  index: number
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
 
   return (
     <div
-      data-slot='input-otp-slot'
+      data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10",
         className
       )}
       {...props}
     >
       {char}
       {hasFakeCaret && (
-        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='animate-caret-blink bg-foreground h-4 w-px duration-1000' />
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
         </div>
       )}
     </div>
-  );
+  )
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
   return (
-    <div data-slot='input-otp-separator' role='separator' {...props}>
-      <MinusIcon />
+    <div
+      data-slot="input-otp-separator"
+      className="[&_svg:not([class*='size-'])]:size-4 flex items-center"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon
+      />
     </div>
-  );
+  )
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/ui/components/ui/input.tsx b/ui/components/ui/input.tsx
index b4217a43..d591c47f 100644
--- a/ui/components/ui/input.tsx
+++ b/ui/components/ui/input.tsx
@@ -1,21 +1,19 @@
-import * as React from 'react';
+import * as React from "react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
-      data-slot='input'
+      data-slot="input"
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Input };
+export { Input }
diff --git a/ui/components/ui/item.tsx b/ui/components/ui/item.tsx
new file mode 100644
index 00000000..5d028ca0
--- /dev/null
+++ b/ui/components/ui/item.tsx
@@ -0,0 +1,195 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50 border-transparent",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("gap-2 flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "gap-2 flex basis-full items-center justify-between",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "gap-2 flex basis-full items-center justify-between",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/ui/components/ui/kbd.tsx b/ui/components/ui/kbd.tsx
new file mode 100644
index 00000000..4329a9a0
--- /dev/null
+++ b/ui/components/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("gap-1 inline-flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/ui/components/ui/label.tsx b/ui/components/ui/label.tsx
index c9c13deb..fc657940 100644
--- a/ui/components/ui/label.tsx
+++ b/ui/components/ui/label.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Label({
   className,
@@ -11,14 +11,14 @@ function Label({
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
-      data-slot='label'
+      data-slot="label"
       className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Label };
+export { Label }
diff --git a/ui/components/ui/menubar.tsx b/ui/components/ui/menubar.tsx
index c9a91b21..d10108c5 100644
--- a/ui/components/ui/menubar.tsx
+++ b/ui/components/ui/menubar.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function Menubar({
   className,
@@ -12,40 +12,37 @@ function Menubar({
 }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
   return (
     <MenubarPrimitive.Root
-      data-slot='menubar'
-      className={cn(
-        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
-        className
-      )}
+      data-slot="menubar"
+      className={cn("bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarMenu({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot='menubar-menu' {...props} />;
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
 }
 
 function MenubarGroup({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot='menubar-group' {...props} />;
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
 }
 
 function MenubarPortal({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot='menubar-portal' {...props} />;
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
 }
 
 function MenubarRadioGroup({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
   return (
-    <MenubarPrimitive.RadioGroup data-slot='menubar-radio-group' {...props} />
-  );
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
 }
 
 function MenubarTrigger({
@@ -54,19 +51,19 @@ function MenubarTrigger({
 }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
   return (
     <MenubarPrimitive.Trigger
-      data-slot='menubar-trigger'
+      data-slot="menubar-trigger"
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        "hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarContent({
   className,
-  align = 'start',
+  align = "start",
   alignOffset = -4,
   sideOffset = 8,
   ...props
@@ -74,91 +71,98 @@ function MenubarContent({
   return (
     <MenubarPortal>
       <MenubarPrimitive.Content
-        data-slot='menubar-content'
+        data-slot="menubar-content"
         align={align}
         alignOffset={alignOffset}
         sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
-          className
-        )}
+        className={cn("bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden", className )}
         {...props}
       />
     </MenubarPortal>
-  );
+  )
 }
 
 function MenubarItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
+  inset?: boolean
+  variant?: "default" | "destructive"
 }) {
   return (
     <MenubarPrimitive.Item
-      data-slot='menubar-item'
+      data-slot="menubar-item"
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <MenubarPrimitive.CheckboxItem
-      data-slot='menubar-checkbox-item'
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+      <span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className='size-4' />
+          <CheckIcon
+          />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
     </MenubarPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function MenubarRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <MenubarPrimitive.RadioItem
-      data-slot='menubar-radio-item'
+      data-slot="menubar-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
+      <span className="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
         <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className='size-2 fill-current' />
+          <CheckIcon
+          />
         </MenubarPrimitive.ItemIndicator>
       </span>
       {children}
     </MenubarPrimitive.RadioItem>
-  );
+  )
 }
 
 function MenubarLabel({
@@ -166,19 +170,16 @@ function MenubarLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenubarPrimitive.Label
-      data-slot='menubar-label'
+      data-slot="menubar-label"
       data-inset={inset}
-      className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className
-      )}
+      className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarSeparator({
@@ -187,33 +188,30 @@ function MenubarSeparator({
 }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
   return (
     <MenubarPrimitive.Separator
-      data-slot='menubar-separator'
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot='menubar-shortcut'
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className
-      )}
+      data-slot="menubar-shortcut"
+      className={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarSub({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot='menubar-sub' {...props} />;
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
 }
 
 function MenubarSubTrigger({
@@ -222,22 +220,22 @@ function MenubarSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenubarPrimitive.SubTrigger
-      data-slot='menubar-sub-trigger'
+      data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className='ml-auto h-4 w-4' />
+      <ChevronRightIcon className="ml-auto size-4" />
     </MenubarPrimitive.SubTrigger>
-  );
+  )
 }
 
 function MenubarSubContent({
@@ -246,14 +244,11 @@ function MenubarSubContent({
 }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
   return (
     <MenubarPrimitive.SubContent
-      data-slot='menubar-sub-content'
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className
-      )}
+      data-slot="menubar-sub-content"
+      className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100 z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden", className )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -273,4 +268,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-};
+}
diff --git a/ui/components/ui/native-select.tsx b/ui/components/ui/native-select.tsx
new file mode 100644
index 00000000..e5eebd7c
--- /dev/null
+++ b/ui/components/ui/native-select.tsx
@@ -0,0 +1,52 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default"
+}
+
+function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className
+      )}
+      data-slot="native-select-wrapper"
+      data-size={size}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+        {...props}
+      />
+      <ChevronDownIcon className="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none" aria-hidden="true" data-slot="native-select-icon" />
+    </div>
+  )
+}
+
+function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
+  return <option data-slot="native-select-option" {...props} />
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/ui/components/ui/navigation-menu.tsx b/ui/components/ui/navigation-menu.tsx
index 60bf833b..c6b42a12 100644
--- a/ui/components/ui/navigation-menu.tsx
+++ b/ui/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from 'class-variance-authority';
-import { ChevronDownIcon } from 'lucide-react';
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
 
 function NavigationMenu({
   className,
@@ -11,14 +11,14 @@ function NavigationMenu({
   viewport = true,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean;
+  viewport?: boolean
 }) {
   return (
     <NavigationMenuPrimitive.Root
-      data-slot='navigation-menu'
+      data-slot="navigation-menu"
       data-viewport={viewport}
       className={cn(
-        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className
       )}
       {...props}
@@ -26,7 +26,7 @@ function NavigationMenu({
       {children}
       {viewport && <NavigationMenuViewport />}
     </NavigationMenuPrimitive.Root>
-  );
+  )
 }
 
 function NavigationMenuList({
@@ -35,14 +35,14 @@ function NavigationMenuList({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
   return (
     <NavigationMenuPrimitive.List
-      data-slot='navigation-menu-list'
+      data-slot="navigation-menu-list"
       className={cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
+        "gap-0 group flex flex-1 list-none items-center justify-center",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function NavigationMenuItem({
@@ -51,16 +51,16 @@ function NavigationMenuItem({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
   return (
     <NavigationMenuPrimitive.Item
-      data-slot='navigation-menu-item'
-      className={cn('relative', className)}
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
       {...props}
     />
-  );
+  )
 }
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1'
-);
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+)
 
 function NavigationMenuTrigger({
   className,
@@ -69,17 +69,14 @@ function NavigationMenuTrigger({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
   return (
     <NavigationMenuPrimitive.Trigger
-      data-slot='navigation-menu-trigger'
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
       {...props}
     >
-      {children}{' '}
-      <ChevronDownIcon
-        className='relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180'
-        aria-hidden='true'
-      />
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
     </NavigationMenuPrimitive.Trigger>
-  );
+  )
 }
 
 function NavigationMenuContent({
@@ -88,15 +85,14 @@ function NavigationMenuContent({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
   return (
     <NavigationMenuPrimitive.Content
-      data-slot='navigation-menu-content'
+      data-slot="navigation-menu-content"
       className={cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function NavigationMenuViewport({
@@ -106,19 +102,19 @@ function NavigationMenuViewport({
   return (
     <div
       className={cn(
-        'absolute top-full left-0 isolate z-50 flex justify-center'
+        "absolute top-full left-0 isolate z-50 flex justify-center"
       )}
     >
       <NavigationMenuPrimitive.Viewport
-        data-slot='navigation-menu-viewport'
+        data-slot="navigation-menu-viewport"
         className={cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)",
           className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
 function NavigationMenuLink({
@@ -127,14 +123,11 @@ function NavigationMenuLink({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
   return (
     <NavigationMenuPrimitive.Link
-      data-slot='navigation-menu-link'
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
+      data-slot="navigation-menu-link"
+      className={cn("data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4", className)}
       {...props}
     />
-  );
+  )
 }
 
 function NavigationMenuIndicator({
@@ -143,16 +136,16 @@ function NavigationMenuIndicator({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
   return (
     <NavigationMenuPrimitive.Indicator
-      data-slot='navigation-menu-indicator'
+      data-slot="navigation-menu-indicator"
       className={cn(
-        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
         className
       )}
       {...props}
     >
-      <div className='bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md' />
+      <div className="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
     </NavigationMenuPrimitive.Indicator>
-  );
+  )
 }
 
 export {
@@ -165,4 +158,4 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
-};
+}
diff --git a/ui/components/ui/pagination.tsx b/ui/components/ui/pagination.tsx
new file mode 100644
index 00000000..1e78dbad
--- /dev/null
+++ b/ui/components/ui/pagination.tsx
@@ -0,0 +1,134 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn(
+        "mx-auto flex w-full justify-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("gap-0.5 flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      asChild
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+    >
+      <a
+        aria-current={isActive ? "page" : undefined}
+        data-slot="pagination-link"
+        data-active={isActive}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">
+        {text}
+      </span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "size-8 [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/ui/components/ui/popover.tsx b/ui/components/ui/popover.tsx
index cac1834a..fde45a5e 100644
--- a/ui/components/ui/popover.tsx
+++ b/ui/components/ui/popover.tsx
@@ -1,36 +1,35 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-
-import { cn } from '@/lib/utils';
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cn } from "@/lib/utils";
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
-        data-slot='popover-content'
+        data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          "bg-popover text-popover-foreground ring-foreground/10 border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-lg border p-4 shadow-md ring-1 outline-none",
           className
         )}
         {...props}
@@ -39,10 +38,4 @@ function PopoverContent({
   );
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/ui/components/ui/progress.tsx b/ui/components/ui/progress.tsx
index fb12f813..d73312cf 100644
--- a/ui/components/ui/progress.tsx
+++ b/ui/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Progress({
   className,
@@ -12,20 +12,20 @@ function Progress({
 }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
-      data-slot='progress'
+      data-slot="progress"
       className={cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        "bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden",
         className
       )}
       {...props}
     >
       <ProgressPrimitive.Indicator
-        data-slot='progress-indicator'
-        className='bg-primary h-full w-full flex-1 transition-all'
+        data-slot="progress-indicator"
+        className="bg-primary size-full flex-1 transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  );
+  )
 }
 
-export { Progress };
+export { Progress }
diff --git a/ui/components/ui/radio-group.tsx b/ui/components/ui/radio-group.tsx
index 11796150..a2bf5a89 100644
--- a/ui/components/ui/radio-group.tsx
+++ b/ui/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { CircleIcon } from 'lucide-react';
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+import { CircleIcon } from "lucide-react";
 
 function RadioGroup({
   className,
@@ -12,8 +12,8 @@ function RadioGroup({
 }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
   return (
     <RadioGroupPrimitive.Root
-      data-slot='radio-group'
-      className={cn('grid gap-3', className)}
+      data-slot="radio-group"
+      className={cn("grid gap-2 w-full", className)}
       {...props}
     />
   );
@@ -25,18 +25,18 @@ function RadioGroupItem({
 }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
   return (
     <RadioGroupPrimitive.Item
-      data-slot='radio-group-item'
+      data-slot="radio-group-item"
       className={cn(
-        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
       )}
       {...props}
     >
       <RadioGroupPrimitive.Indicator
-        data-slot='radio-group-indicator'
-        className='relative flex items-center justify-center'
+        data-slot="radio-group-indicator"
+        className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
       >
-        <CircleIcon className='fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2' />
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
diff --git a/ui/components/ui/resizable.tsx b/ui/components/ui/resizable.tsx
index 0449f74a..693f0e43 100644
--- a/ui/components/ui/resizable.tsx
+++ b/ui/components/ui/resizable.tsx
@@ -1,56 +1,51 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { GripVerticalIcon } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
+import type { ComponentProps } from "react"
+import * as ResizablePrimitive from "react-resizable-panels"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: ComponentProps<typeof ResizablePrimitive.Group>) {
   return (
-    <ResizablePrimitive.PanelGroup
-      data-slot='resizable-panel-group'
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
       className={cn(
-        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot='resizable-panel' {...props} />;
+function ResizablePanel({ ...props }: ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
 }
 
 function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
+}: ComponentProps<typeof ResizablePrimitive.Separator> & {
+  withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot='resizable-handle'
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
       className={cn(
-        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className='bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border'>
-          <GripVerticalIcon className='size-2.5' />
-        </div>
+        <div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
       )}
-    </ResizablePrimitive.PanelResizeHandle>
-  );
+    </ResizablePrimitive.Separator>
+  )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/ui/components/ui/scroll-area.tsx b/ui/components/ui/scroll-area.tsx
index 9f69926b..358697b9 100644
--- a/ui/components/ui/scroll-area.tsx
+++ b/ui/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function ScrollArea({
   className,
@@ -12,47 +12,44 @@ function ScrollArea({
 }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
   return (
     <ScrollAreaPrimitive.Root
-      data-slot='scroll-area'
-      className={cn('relative', className)}
+      data-slot="scroll-area"
+      className={cn("relative", className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
-        data-slot='scroll-area-viewport'
-        className='focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1'
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  );
+  )
 }
 
 function ScrollBar({
   className,
-  orientation = 'vertical',
+  orientation = "vertical",
   ...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
   return (
     <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot='scroll-area-scrollbar'
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
       orientation={orientation}
       className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent',
+        "data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
         className
       )}
       {...props}
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot='scroll-area-thumb'
-        className='bg-border relative flex-1 rounded-full'
+        data-slot="scroll-area-thumb"
+        className="rounded-full bg-border relative flex-1"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
+  )
 }
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }
diff --git a/ui/components/ui/searchable-select.tsx b/ui/components/ui/searchable-select.tsx
new file mode 100644
index 00000000..6102005d
--- /dev/null
+++ b/ui/components/ui/searchable-select.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+export type SearchableSelectOption = {
+  value: string;
+  label: string;
+  keywords?: string[];
+};
+
+interface SearchableSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: SearchableSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function SearchableSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select option",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No option found.",
+  disabled = false,
+  className,
+}: SearchableSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = useMemo(
+    () => options.find((option) => option.value === value) || null,
+    [options, value]
+  );
+  const displayLabel = selectedOption?.label || value || placeholder;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal",
+            !selectedOption && !value ? "text-muted-foreground" : "",
+            className
+          )}
+          type="button"
+        >
+          <span className="truncate">{displayLabel}</span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  keywords={option.keywords}
+                  onSelect={() => {
+                    onValueChange(option.value);
+                    setOpen(false);
+                  }}
+                >
+                  <span className="truncate">{option.label}</span>
+                  <Check
+                    className={cn(
+                      "ml-auto h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/ui/components/ui/select.tsx b/ui/components/ui/select.tsx
index 3cd3c75e..e22c2815 100644
--- a/ui/components/ui/select.tsx
+++ b/ui/components/ui/select.tsx
@@ -1,80 +1,85 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot='select' {...props} />;
+  return <SelectPrimitive.Root data-slot="select" {...props} />
 }
 
 function SelectGroup({
+  className,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot='select-group' {...props} />;
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
 }
 
 function SelectValue({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot='select-value' {...props} />;
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
 }
 
 function SelectTrigger({
   className,
-  size = 'default',
+  size = "default",
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: 'sm' | 'default';
+  size?: "sm" | "default"
 }) {
   return (
     <SelectPrimitive.Trigger
-      data-slot='select-trigger'
+      data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className='size-4 opacity-50' />
+        <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  );
+  )
 }
 
 function SelectContent({
   className,
   children,
-  position = 'popper',
+  position = "item-aligned",
+  align = "center",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        data-slot='select-content'
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className
-        )}
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
         position={position}
+        align={align}
         {...props}
       >
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
+          data-position={position}
           className={cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
           )}
         >
           {children}
@@ -82,7 +87,7 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  );
+  )
 }
 
 function SelectLabel({
@@ -91,11 +96,11 @@ function SelectLabel({
 }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
-      data-slot='select-label'
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SelectItem({
@@ -105,21 +110,21 @@ function SelectItem({
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
-      data-slot='select-item'
+      data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
     >
-      <span className='absolute right-2 flex size-3.5 items-center justify-center'>
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <CheckIcon className='size-4' />
+          <CheckIcon className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  );
+  )
 }
 
 function SelectSeparator({
@@ -128,11 +133,11 @@ function SelectSeparator({
 }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
   return (
     <SelectPrimitive.Separator
-      data-slot='select-separator'
-      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      data-slot="select-separator"
+      className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SelectScrollUpButton({
@@ -141,16 +146,14 @@ function SelectScrollUpButton({
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
   return (
     <SelectPrimitive.ScrollUpButton
-      data-slot='select-scroll-up-button'
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className
-      )}
+      data-slot="select-scroll-up-button"
+      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
       {...props}
     >
-      <ChevronUpIcon className='size-4' />
+      <ChevronUpIcon
+      />
     </SelectPrimitive.ScrollUpButton>
-  );
+  )
 }
 
 function SelectScrollDownButton({
@@ -159,16 +162,14 @@ function SelectScrollDownButton({
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
   return (
     <SelectPrimitive.ScrollDownButton
-      data-slot='select-scroll-down-button'
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className
-      )}
+      data-slot="select-scroll-down-button"
+      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
       {...props}
     >
-      <ChevronDownIcon className='size-4' />
+      <ChevronDownIcon
+      />
     </SelectPrimitive.ScrollDownButton>
-  );
+  )
 }
 
 export {
@@ -182,4 +183,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-};
+}
diff --git a/ui/components/ui/separator.tsx b/ui/components/ui/separator.tsx
index b40a9868..2e55690e 100644
--- a/ui/components/ui/separator.tsx
+++ b/ui/components/ui/separator.tsx
@@ -1,23 +1,22 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-
-import { cn } from '@/lib/utils';
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cn } from "@/lib/utils";
 
 function Separator({
   className,
-  orientation = 'horizontal',
+  orientation = "horizontal",
   decorative = true,
   ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
   return (
     <SeparatorPrimitive.Root
-      data-slot='separator-root'
+      data-slot="separator-root"
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       )}
       {...props}
diff --git a/ui/components/ui/sheet.tsx b/ui/components/ui/sheet.tsx
index 7c8e0d3d..f973fa78 100644
--- a/ui/components/ui/sheet.tsx
+++ b/ui/components/ui/sheet.tsx
@@ -1,31 +1,32 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot='sheet' {...props} />;
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot='sheet-trigger' {...props} />;
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot='sheet-close' {...props} />;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot='sheet-portal' {...props} />;
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({
@@ -34,71 +35,65 @@ function SheetOverlay({
 }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
   return (
     <SheetPrimitive.Overlay
-      data-slot='sheet-overlay'
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
+      data-slot="sheet-overlay"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetContent({
   className,
   children,
-  side = 'right',
+  side = "right",
+  showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
 }) {
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
-        data-slot='sheet-content'
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className
-        )}
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn("bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className)}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none'>
-          <XIcon className='size-4' />
-          <span className='sr-only'>Close</span>
-        </SheetPrimitive.Close>
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
-  );
+  )
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sheet-header'
-      className={cn('flex flex-col gap-1.5 p-4', className)}
+      data-slot="sheet-header"
+      className={cn("gap-0.5 p-4 flex flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sheet-footer'
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      data-slot="sheet-footer"
+      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetTitle({
@@ -107,11 +102,11 @@ function SheetTitle({
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
-      data-slot='sheet-title'
-      className={cn('text-foreground font-semibold', className)}
+      data-slot="sheet-title"
+      className={cn("text-foreground text-base font-medium", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetDescription({
@@ -120,11 +115,11 @@ function SheetDescription({
 }: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
     <SheetPrimitive.Description
-      data-slot='sheet-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -136,4 +131,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-};
+}
diff --git a/ui/components/ui/sidebar.tsx b/ui/components/ui/sidebar.tsx
index 92e818fb..4c7a8495 100644
--- a/ui/components/ui/sidebar.tsx
+++ b/ui/components/ui/sidebar.tsx
@@ -1,56 +1,55 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { VariantProps, cva } from 'class-variance-authority';
-import { PanelLeftIcon } from 'lucide-react';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip';
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContextProps = {
-  state: 'expanded' | 'collapsed';
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
-  toggleSidebar: () => void;
-};
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext);
+  const context = React.useContext(SidebarContext)
   if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.');
+    throw new Error("useSidebar must be used within a SidebarProvider.")
   }
 
-  return context;
+  return context
 }
 
 function SidebarProvider({
@@ -61,37 +60,37 @@ function SidebarProvider({
   style,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 }) {
-  const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React.useState(false);
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen);
-  const open = openProp ?? _open;
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value;
+      const openState = typeof value === "function" ? value(open) : value
       if (setOpenProp) {
-        setOpenProp(openState);
+        setOpenProp(openState)
       } else {
-        _setOpen(openState);
+        _setOpen(openState)
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
     },
     [setOpenProp, open]
-  );
+  )
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-  }, [isMobile, setOpen, setOpenMobile]);
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -100,18 +99,18 @@ function SidebarProvider({
         event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
         (event.metaKey || event.ctrlKey)
       ) {
-        event.preventDefault();
-        toggleSidebar();
+        event.preventDefault()
+        toggleSidebar()
       }
-    };
+    }
 
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [toggleSidebar]);
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? 'expanded' : 'collapsed';
+  const state = open ? "expanded" : "collapsed"
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -124,135 +123,131 @@ function SidebarProvider({
       toggleSidebar,
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  );
+  )
 
   return (
     <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot='sidebar-wrapper'
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  );
-}
-
-function Sidebar({
-  side = 'left',
-  variant = 'sidebar',
-  collapsible = 'offcanvas',
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  side?: 'left' | 'right';
-  variant?: 'sidebar' | 'floating' | 'inset';
-  collapsible?: 'offcanvas' | 'icon' | 'none';
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-
-  if (collapsible === 'none') {
-    return (
       <div
-        data-slot='sidebar'
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
         className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
           className
         )}
         {...props}
       >
         {children}
       </div>
-    );
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
   }
 
   if (isMobile) {
     return (
       <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
         <SheetContent
-          data-sidebar='sidebar'
-          data-slot='sidebar'
-          data-mobile='true'
-          className='bg-sidebar text-sidebar-foreground fixed z-50 w-(--sidebar-width) p-0 [&>button]:hidden'
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
           side={side}
         >
-          <SheetHeader className='sr-only'>
+          <SheetHeader className="sr-only">
             <SheetTitle>Sidebar</SheetTitle>
             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
           </SheetHeader>
-          <div className='flex h-full w-full flex-col overflow-y-auto'>
-            {children}
-          </div>
+          <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    );
+    )
   }
 
   return (
     <div
-      className='group peer text-sidebar-foreground hidden md:block'
+      className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
-      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
       data-side={side}
-      data-slot='sidebar'
+      data-slot="sidebar"
     >
       {/* This is what handles the sidebar gap on desktop */}
       <div
-        data-slot='sidebar-gap'
+        data-slot="sidebar-gap"
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          'group-data-[side=right]:rotate-180',
-          variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+          "transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
         )}
       />
       <div
-        data-slot='sidebar-container'
+        data-slot="sidebar-container"
+        data-side={side}
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-          side === 'left'
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
           // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className
         )}
         {...props}
       >
         <div
-          data-sidebar='sidebar'
-          data-slot='sidebar-inner'
-          className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
         >
           {children}
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 function SidebarTrigger({
@@ -260,65 +255,63 @@ function SidebarTrigger({
   onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar } = useSidebar()
 
   return (
     <Button
-      data-sidebar='trigger'
-      data-slot='sidebar-trigger'
-      variant='ghost'
-      size='icon'
-      className={cn('size-7', className)}
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
       onClick={(event) => {
-        onClick?.(event);
-        toggleSidebar();
+        onClick?.(event)
+        toggleSidebar()
       }}
       {...props}
     >
       <PanelLeftIcon />
-      <span className='sr-only'>Toggle Sidebar</span>
+      <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  );
+  )
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
-  const { toggleSidebar } = useSidebar();
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
 
   return (
     <button
-      data-sidebar='rail'
-      data-slot='sidebar-rail'
-      aria-label='Toggle Sidebar'
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
-      title='Toggle Sidebar'
+      title="Toggle Sidebar"
       className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
-      data-slot='sidebar-inset'
+      data-slot="sidebar-inset"
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-        'overflow-x-hidden',
+        "bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarInput({
@@ -327,34 +320,34 @@ function SidebarInput({
 }: React.ComponentProps<typeof Input>) {
   return (
     <Input
-      data-slot='sidebar-input'
-      data-sidebar='input'
-      className={cn('bg-background h-8 w-full shadow-none', className)}
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sidebar-header'
-      data-sidebar='header'
-      className={cn('flex flex-col gap-2 p-2', className)}
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("gap-2 p-2 flex flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sidebar-footer'
-      data-sidebar='footer'
-      className={cn('flex flex-col gap-2 p-2', className)}
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("gap-2 p-2 flex flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarSeparator({
@@ -363,189 +356,187 @@ function SidebarSeparator({
 }: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
-      data-slot='sidebar-separator'
-      data-sidebar='separator'
-      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sidebar-content'
-      data-sidebar='content'
+      data-slot="sidebar-content"
+      data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        "no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sidebar-group'
-      data-sidebar='group'
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn(
+        "p-2 relative flex w-full min-w-0 flex-col",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarGroupLabel({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div';
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
 
   return (
     <Comp
-      data-slot='sidebar-group-label'
-      data-sidebar='group-label'
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
       className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        "text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarGroupAction({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'button';
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
-      data-slot='sidebar-group-action'
-      data-sidebar='group-action'
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'group-data-[collapsible=icon]:hidden',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarGroupContent({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sidebar-group-content'
-      data-sidebar='group-content'
-      className={cn('w-full text-sm', className)}
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("text-sm w-full", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
-      data-slot='sidebar-menu'
-      data-sidebar='menu'
-      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("gap-0 flex w-full min-w-0 flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
-      data-slot='sidebar-menu-item'
-      data-sidebar='menu-item'
-      className={cn('group/menu-item relative', className)}
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
       {...props}
     />
-  );
+  )
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-[active=true]:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   }
-);
+)
 
 function SidebarMenuButton({
   asChild = false,
   isActive = false,
-  variant = 'default',
-  size = 'default',
+  variant = "default",
+  size = "default",
   tooltip,
   className,
   ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean;
-  isActive?: boolean;
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : 'button';
-  const { isMobile, state } = useSidebar();
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
 
   const button = (
     <Comp
-      data-slot='sidebar-menu-button'
-      data-sidebar='menu-button'
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
       data-size={size}
-      data-active={isActive}
+      data-active={isActive ? "true" : undefined}
       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
       {...props}
     />
-  );
+  )
 
   if (!tooltip) {
-    return button;
+    return button
   }
 
-  if (typeof tooltip === 'string') {
+  if (typeof tooltip === "string") {
     tooltip = {
       children: tooltip,
-    };
+    }
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent
-        side='right'
-        align='center'
-        hidden={state !== 'collapsed' || isMobile}
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
         {...tooltip}
       />
     </Tooltip>
-  );
+  )
 }
 
 function SidebarMenuAction({
@@ -553,152 +544,133 @@ function SidebarMenuAction({
   asChild = false,
   showOnHover = false,
   ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean;
-  showOnHover?: boolean;
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
 }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
-      data-slot='sidebar-menu-action'
-      data-sidebar='menu-action'
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
         showOnHover &&
-          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='sidebar-menu-badge'
-      data-sidebar='menu-badge'
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
       className={cn(
-        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
+        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
-}: React.ComponentProps<'div'> & {
-  showIcon?: boolean;
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
 }) {
   // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
 
   return (
     <div
-      data-slot='sidebar-menu-skeleton'
-      data-sidebar='menu-skeleton'
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
       {...props}
     >
       {showIcon && (
         <Skeleton
-          className='size-4 rounded-md'
-          data-sidebar='menu-skeleton-icon'
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
         />
       )}
       <Skeleton
-        className='h-4 max-w-(--skeleton-width) flex-1'
-        data-sidebar='menu-skeleton-text'
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
         style={
           {
-            '--skeleton-width': width,
+            "--skeleton-width": width,
           } as React.CSSProperties
         }
       />
     </div>
-  );
+  )
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
-      data-slot='sidebar-menu-sub'
-      data-sidebar='menu-sub'
-      className={cn(
-        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-        'group-data-[collapsible=icon]:hidden',
-        className
-      )}
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn("border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarMenuSubItem({
   className,
   ...props
-}: React.ComponentProps<'li'>) {
+}: React.ComponentProps<"li">) {
   return (
     <li
-      data-slot='sidebar-menu-sub-item'
-      data-sidebar='menu-sub-item'
-      className={cn('group/menu-sub-item relative', className)}
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarMenuSubButton({
   asChild = false,
-  size = 'md',
+  size = "md",
   isActive = false,
   className,
   ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean;
-  size?: 'sm' | 'md';
-  isActive?: boolean;
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
 }) {
-  const Comp = asChild ? Slot : 'a';
+  const Comp = asChild ? Slot.Root : "a"
 
   return (
     <Comp
-      data-slot='sidebar-menu-sub-button'
-      data-sidebar='menu-sub-button'
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
       data-size={size}
-      data-active={isActive}
+      data-active={isActive ? "true" : undefined}
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === 'sm' && 'text-xs',
-        size === 'md' && 'text-sm',
-        'group-data-[collapsible=icon]:hidden',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -726,4 +698,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-};
+}
diff --git a/ui/components/ui/skeleton.tsx b/ui/components/ui/skeleton.tsx
index a9344b2d..41bcbf94 100644
--- a/ui/components/ui/skeleton.tsx
+++ b/ui/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot='skeleton'
-      className={cn('bg-accent animate-pulse rounded-md', className)}
+      data-slot="skeleton"
+      className={cn("bg-muted rounded-md animate-pulse", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }
diff --git a/ui/components/ui/slider.tsx b/ui/components/ui/slider.tsx
new file mode 100644
index 00000000..7861e1cc
--- /dev/null
+++ b/ui/components/ui/slider.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="bg-muted rounded-full data-horizontal:h-1 data-vertical:w-1 relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/ui/components/ui/sonner.tsx b/ui/components/ui/sonner.tsx
index a3612b55..6c82e1e6 100644
--- a/ui/components/ui/sonner.tsx
+++ b/ui/components/ui/sonner.tsx
@@ -1,25 +1,68 @@
-'use client';
+"use client"
 
-import { useTheme } from 'next-themes';
-import { Toaster as Sonner, ToasterProps } from 'sonner';
+import type { CSSProperties } from "react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+type SonnerTheme = NonNullable<ToasterProps["theme"]>
+
+function normalizeTheme(theme: string | undefined): SonnerTheme {
+  if (theme === "light" || theme === "dark" || theme === "system") {
+    return theme
+  }
+  return "system"
+}
+
+function resolveSystemTheme(theme: string | undefined): Exclude<SonnerTheme, "system"> {
+  return theme === "light" ? "light" : "dark"
+}
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
+  const { theme = "system", resolvedTheme } = useTheme()
+  const normalizedTheme = normalizeTheme(theme)
+  const toasterTheme: ToasterProps["theme"] =
+    normalizedTheme === "system"
+      ? resolveSystemTheme(resolvedTheme)
+      : normalizedTheme
 
   return (
     <Sonner
-      theme={theme as ToasterProps['theme']}
-      className='toaster group'
+      theme={toasterTheme}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
       style={
         {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-        } as React.CSSProperties
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as CSSProperties
       }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
       {...props}
     />
-  );
-};
+  )
+}
 
-export { Toaster };
+export { Toaster }
diff --git a/ui/components/ui/spinner.tsx b/ui/components/ui/spinner.tsx
new file mode 100644
index 00000000..91f6a63c
--- /dev/null
+++ b/ui/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils"
+import { Loader2Icon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
+  )
+}
+
+export { Spinner }
diff --git a/ui/components/ui/switch.tsx b/ui/components/ui/switch.tsx
index 6138de71..db3b6b1c 100644
--- a/ui/components/ui/switch.tsx
+++ b/ui/components/ui/switch.tsx
@@ -1,31 +1,33 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Switch({
   className,
+  size = "default",
   ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
   return (
     <SwitchPrimitive.Root
-      data-slot='switch'
+      data-slot="switch"
+      data-size={size}
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-full border border-border/70 bg-muted/85 data-[state=checked]:border-primary/35 data-[state=checked]:bg-primary focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
-        data-slot='switch-thumb'
-        className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
-        )}
+        data-slot="switch-thumb"
+        className="rounded-full border border-border/45 bg-background data-[state=checked]:bg-primary-foreground group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0 pointer-events-none block ring-0 shadow-[0_1px_2px_rgba(0,0,0,0.28)] transition-[transform,background-color,border-color]"
       />
     </SwitchPrimitive.Root>
-  );
+  )
 }
 
-export { Switch };
+export { Switch }
diff --git a/ui/components/ui/table.tsx b/ui/components/ui/table.tsx
index e73dbbe2..6b715c3d 100644
--- a/ui/components/ui/table.tsx
+++ b/ui/components/ui/table.tsx
@@ -1,107 +1,92 @@
-'use client';
+"use client"
 
-import * as React from 'react';
+import * as React from "react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
-    <div
-      data-slot='table-container'
-      className='relative w-full overflow-x-auto'
-    >
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
       <table
-        data-slot='table'
-        className={cn('w-full caption-bottom text-sm', className)}
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
         {...props}
       />
     </div>
-  );
+  )
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
-      data-slot='table-header'
-      className={cn('[&_tr]:border-b', className)}
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
       {...props}
     />
-  );
+  )
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
   return (
     <tbody
-      data-slot='table-body'
-      className={cn('[&_tr:last-child]:border-0', className)}
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
       {...props}
     />
-  );
+  )
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
   return (
     <tfoot
-      data-slot='table-footer'
-      className={cn(
-        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
-        className
-      )}
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
       {...props}
     />
-  );
+  )
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
   return (
     <tr
-      data-slot='table-row'
-      className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
-        className
-      )}
+      data-slot="table-row"
+      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
       {...props}
     />
-  );
+  )
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
   return (
     <th
-      data-slot='table-head'
-      className={cn(
-        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className
-      )}
+      data-slot="table-head"
+      className={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
       {...props}
     />
-  );
+  )
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
   return (
     <td
-      data-slot='table-cell'
-      className={cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className
-      )}
+      data-slot="table-cell"
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
       {...props}
     />
-  );
+  )
 }
 
 function TableCaption({
   className,
   ...props
-}: React.ComponentProps<'caption'>) {
+}: React.ComponentProps<"caption">) {
   return (
     <caption
-      data-slot='table-caption'
-      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -113,4 +98,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-};
+}
diff --git a/ui/components/ui/tabs.tsx b/ui/components/ui/tabs.tsx
index bdf7a020..980b8e9e 100644
--- a/ui/components/ui/tabs.tsx
+++ b/ui/components/ui/tabs.tsx
@@ -1,37 +1,58 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function Tabs({
   className,
+  orientation = "horizontal",
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
-      data-slot='tabs'
-      className={cn('flex flex-col gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot='tabs-list'
+      data-slot="tabs"
+      data-orientation={orientation}
       className={cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        "group/tabs flex w-full flex-col gap-2 data-[orientation=vertical]:flex-row",
         className
       )}
       {...props}
     />
-  );
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "h-auto w-full justify-start gap-1 border-b bg-transparent p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
 }
 
 function TabsTrigger({
@@ -40,14 +61,16 @@ function TabsTrigger({
 }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
-      data-slot='tabs-trigger'
+      data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-[state=active]:bg-background group-data-[variant=default]/tabs-list:data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=default]/tabs-list:dark:data-[state=active]:border-input group-data-[variant=default]/tabs-list:dark:data-[state=active]:bg-input/30 group-data-[variant=default]/tabs-list:dark:data-[state=active]:text-foreground group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "group-data-[variant=line]/tabs-list:h-10 group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-x-0 group-data-[variant=line]/tabs-list:border-t-0 group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-b-transparent group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:px-3 group-data-[variant=line]/tabs-list:pb-2.5 group-data-[variant=line]/tabs-list:pt-2 group-data-[variant=line]/tabs-list:data-[state=active]:border-b-foreground group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:dark:data-[state=active]:border-b-foreground",
+        "group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TabsContent({
@@ -56,11 +79,11 @@ function TabsContent({
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
-      data-slot='tabs-content'
-      className={cn('flex-1 outline-none', className)}
+      data-slot="tabs-content"
+      className={cn("text-sm flex-1 outline-none", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/ui/components/ui/textarea.tsx b/ui/components/ui/textarea.tsx
index 7fc5c315..7235828d 100644
--- a/ui/components/ui/textarea.tsx
+++ b/ui/components/ui/textarea.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
+import * as React from "react"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
-      data-slot='textarea'
+      data-slot="textarea"
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        "dark:bg-input/30 border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-2 focus-visible:ring-inset aria-invalid:ring-2 aria-invalid:ring-inset md:text-sm box-border disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Textarea };
+export { Textarea }
diff --git a/ui/components/ui/toggle-group.tsx b/ui/components/ui/toggle-group.tsx
index 1fb778e6..f0fe7a89 100644
--- a/ui/components/ui/toggle-group.tsx
+++ b/ui/components/ui/toggle-group.tsx
@@ -1,73 +1,89 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
-import { toggleVariants } from '@/components/ui/toggle';
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }
 >({
-  size: 'default',
-  variant: 'default',
-});
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+})
 
 function ToggleGroup({
   className,
   variant,
   size,
+  spacing = 0,
+  orientation = "horizontal",
   children,
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: "horizontal" | "vertical"
+  }) {
   return (
     <ToggleGroupPrimitive.Root
-      data-slot='toggle-group'
+      data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        "rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
-  );
+  )
 }
 
 function ToggleGroupItem({
   className,
   children,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
   VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
+  const context = React.useContext(ToggleGroupContext)
 
   return (
     <ToggleGroupPrimitive.Item
-      data-slot='toggle-group-item'
+      data-slot="toggle-group-item"
       data-variant={context.variant || variant}
       data-size={context.size || size}
+      data-spacing={context.spacing}
       className={cn(
+        "group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
         className
       )}
       {...props}
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  );
+  )
 }
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem }
diff --git a/ui/components/ui/toggle.tsx b/ui/components/ui/toggle.tsx
index a1ebdef0..9f782a87 100644
--- a/ui/components/ui/toggle.tsx
+++ b/ui/components/ui/toggle.tsx
@@ -1,47 +1,46 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+        default: "bg-transparent",
+        outline: "border-input hover:bg-muted border bg-transparent",
       },
       size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   }
-);
+)
 
 function Toggle({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   ...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> &
   VariantProps<typeof toggleVariants>) {
   return (
     <TogglePrimitive.Root
-      data-slot='toggle'
+      data-slot="toggle"
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }
diff --git a/ui/components/ui/tooltip.tsx b/ui/components/ui/tooltip.tsx
index 590f3833..0b46ee56 100644
--- a/ui/components/ui/tooltip.tsx
+++ b/ui/components/ui/tooltip.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function TooltipProvider({
   delayDuration = 0,
@@ -11,27 +11,23 @@ function TooltipProvider({
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (
     <TooltipPrimitive.Provider
-      data-slot='tooltip-provider'
+      data-slot="tooltip-provider"
       delayDuration={delayDuration}
       {...props}
     />
-  );
+  )
 }
 
 function Tooltip({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot='tooltip' {...props} />
-    </TooltipProvider>
-  );
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }
 
 function TooltipTrigger({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
@@ -43,19 +39,19 @@ function TooltipContent({
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
-        data-slot='tooltip-content'
+        data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className='bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]' />
+        <TooltipPrimitive.Arrow className="size-2.5 rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  );
+  )
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/ui/components/usage-metrics-chart.tsx b/ui/components/usage-metrics-chart.tsx
index 3239f549..605c3f2d 100644
--- a/ui/components/usage-metrics-chart.tsx
+++ b/ui/components/usage-metrics-chart.tsx
@@ -1,118 +1,341 @@
 'use client';
 
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ExpandIcon, Minimize2Icon } from 'lucide-react';
 import {
   Area,
   AreaChart,
-  ResponsiveContainer,
-  Tooltip,
   XAxis,
   YAxis,
-  Legend,
   CartesianGrid,
 } from 'recharts';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface UsageMetricsChartProps {
   data: Array<Record<string, unknown> & { timestamp: string }>;
   title: string;
+  description?: string;
   dataKeys: Array<{
     key: string;
     name: string;
     color: string;
   }>;
+  metricType?: 'currency' | 'count';
+  tabs?: Array<{ id: string; label: string }>;
+  activeTabId?: string;
+  onTabChange?: (tabId: string) => void;
 }
 
 export function UsageMetricsChart({
   data,
   title,
+  description,
   dataKeys,
+  metricType = 'count',
+  tabs,
+  activeTabId,
+  onTabChange,
 }: UsageMetricsChartProps) {
-  const formattedData = data.map((item) => ({
-    ...item,
-    time: new Date(item.timestamp).toLocaleTimeString([], {
+  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isMobile = useIsMobile();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const compactNumber = useMemo(
+    () =>
+      new Intl.NumberFormat('en-US', {
+        notation: 'compact',
+        maximumFractionDigits: 1,
+      }),
+    []
+  );
+
+  const hasMultipleDays = useMemo(() => {
+    const daySet = new Set(
+      data.map((item) => new Date(item.timestamp).toDateString())
+    );
+    return daySet.size > 1;
+  }, [data]);
+
+  const formatAxisTick = (timestamp: string): string => {
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    if (hasMultipleDays) {
+      return date.toLocaleString([], {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+      });
+    }
+
+    return date.toLocaleTimeString([], {
       hour: '2-digit',
       minute: '2-digit',
-    }),
-  }));
+    });
+  };
+
+  const formatMetricValue = (value: number): string => {
+    const formatted = compactNumber.format(value);
+    return metricType === 'currency' ? `${formatted} sats` : formatted;
+  };
+
+  const metricChips = dataKeys.map((dataKey) => {
+    const numericValue = data.reduce((sum, point) => {
+      const rawValue = point?.[dataKey.key];
+      const value = typeof rawValue === 'number' ? rawValue : Number(rawValue || 0);
+      return Number.isFinite(value) ? sum + value : sum;
+    }, 0);
+
+    return {
+      ...dataKey,
+      value: Number.isFinite(numericValue) ? numericValue : 0,
+    };
+  });
+
+  const visibleDataKeys = dataKeys.filter(
+    (dataKey) => !hiddenSeries.has(dataKey.key)
+  );
+
+  const toggleSeries = (key: string) => {
+    setHiddenSeries((current) => {
+      const next = new Set(current);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  const chartConfig = dataKeys.reduce<ChartConfig>((acc, keyConfig) => {
+    acc[keyConfig.key] = {
+      label: keyConfig.name,
+      color: keyConfig.color,
+    };
+    return acc;
+  }, {});
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  const toggleFullscreen = async () => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    try {
+      if (document.fullscreenElement === containerRef.current) {
+        await document.exitFullscreen();
+      } else {
+        await containerRef.current.requestFullscreen();
+      }
+    } catch (error) {
+      console.error('Failed to toggle fullscreen analytics chart', error);
+    }
+  };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ResponsiveContainer width='100%' height={300}>
-          <AreaChart data={formattedData}>
-            <defs>
-              {dataKeys.map((dataKey) => (
-                <linearGradient
-                  key={dataKey.key}
-                  id={`color${dataKey.key}`}
-                  x1='0'
-                  y1='0'
-                  x2='0'
-                  y2='1'
+    <div ref={containerRef}>
+      <Card className={cn(isFullscreen && 'h-full rounded-none border-0 ring-0')}>
+        <CardHeader className='space-y-3 sm:space-y-4'>
+          {tabs && activeTabId && onTabChange ? (
+            <Tabs value={activeTabId} onValueChange={onTabChange} className='w-full'>
+              <TabsList
+                variant='line'
+                className='max-w-full overflow-x-auto whitespace-nowrap border-b-0 pb-1'
+              >
+                {tabs.map((tab) => (
+                  <TabsTrigger key={tab.id} value={tab.id}>
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          ) : null}
+          <div className='flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between'>
+            <div className='min-w-0'>
+              <CardTitle className='text-base sm:text-lg'>{title}</CardTitle>
+              {description ? (
+                <p className='text-muted-foreground mt-1 text-xs sm:text-sm'>
+                  {description}
+                </p>
+              ) : null}
+            </div>
+            <Button
+              type='button'
+              variant='outline'
+              size='icon'
+              className='hidden h-8 w-8 shrink-0 sm:inline-flex'
+              onClick={toggleFullscreen}
+            >
+              {isFullscreen ? (
+                <Minimize2Icon className='h-4 w-4' />
+              ) : (
+                <ExpandIcon className='h-4 w-4' />
+              )}
+              <span className='sr-only'>
+                {isFullscreen ? 'Exit fullscreen chart' : 'Enter fullscreen chart'}
+              </span>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className='space-y-3 sm:space-y-4'>
+          <div className='flex gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:overflow-visible sm:pb-0'>
+            {metricChips.map((metric) => {
+              const hidden = hiddenSeries.has(metric.key);
+
+              return (
+                <Button
+                  key={metric.key}
+                  type='button'
+                  size='sm'
+                  variant={hidden ? 'ghost' : 'secondary'}
+                  className={cn(
+                    'h-8 shrink-0 rounded-full px-3 text-xs transition-colors sm:text-sm',
+                    hidden
+                      ? 'text-muted-foreground/55 hover:text-muted-foreground/70 hover:bg-muted/25'
+                      : 'text-foreground'
+                  )}
+                  onClick={() => toggleSeries(metric.key)}
                 >
-                  <stop
-                    offset='5%'
-                    stopColor={dataKey.color}
-                    stopOpacity={0.3}
+                  <span
+                    className={cn('size-2 rounded-full', hidden && 'opacity-35')}
+                    style={{ backgroundColor: metric.color }}
                   />
-                  <stop
-                    offset='95%'
-                    stopColor={dataKey.color}
-                    stopOpacity={0}
-                  />
-                </linearGradient>
-              ))}
-            </defs>
-            <CartesianGrid strokeDasharray='3 3' className='stroke-muted/30' />
-            <XAxis
-              dataKey='time'
-              className='text-xs'
-              tick={{ fill: 'hsl(var(--muted-foreground))' }}
-              tickLine={false}
-              axisLine={false}
-              minTickGap={32}
-            />
-            <YAxis
-              className='text-xs'
-              tick={{ fill: 'hsl(var(--muted-foreground))' }}
-              tickLine={false}
-              axisLine={false}
-              width={40}
-            />
-            <Tooltip
-              contentStyle={{
-                backgroundColor: 'hsl(var(--background))',
-                border: '1px solid hsl(var(--border))',
-                borderRadius: '8px',
-                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
-              }}
-              itemStyle={{ fontSize: '12px' }}
-              labelStyle={{
-                fontSize: '12px',
-                color: 'hsl(var(--muted-foreground))',
-                marginBottom: '8px',
-              }}
-            />
-            <Legend wrapperStyle={{ fontSize: '12px', paddingTop: '16px' }} />
-            {dataKeys.map((dataKey) => (
-              <Area
-                key={dataKey.key}
-                type='monotone'
-                dataKey={dataKey.key}
-                stroke={dataKey.color}
-                fillOpacity={1}
-                fill={`url(#color${dataKey.key})`}
-                name={dataKey.name}
-                strokeWidth={2}
-                animationDuration={1000}
+                  <span className='max-w-[9rem] truncate sm:max-w-none'>
+                    {metric.name}
+                  </span>
+                  <span
+                    className={cn(
+                      'text-xs',
+                      hidden ? 'text-muted-foreground/45' : 'text-muted-foreground'
+                    )}
+                  >
+                    {formatMetricValue(metric.value)}
+                  </span>
+                </Button>
+              );
+            })}
+          </div>
+
+          <ChartContainer
+            className={cn(
+              'aspect-auto w-full',
+              isFullscreen
+                ? 'h-[calc(100vh-220px)] min-h-[340px] sm:h-[calc(100vh-260px)] sm:min-h-[420px]'
+                : 'h-[260px] sm:h-[340px]'
+            )}
+            config={chartConfig}
+          >
+            <AreaChart
+              data={data}
+              margin={{ top: 8, right: isMobile ? 0 : 12, left: 0, bottom: 0 }}
+            >
+              <defs>
+                {dataKeys.map((dataKey) => (
+                  <linearGradient
+                    key={dataKey.key}
+                    id={`color${dataKey.key}`}
+                    x1='0'
+                    y1='0'
+                    x2='0'
+                    y2='1'
+                  >
+                    <stop
+                      offset='5%'
+                      stopColor={dataKey.color}
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset='95%'
+                      stopColor={dataKey.color}
+                      stopOpacity={0}
+                    />
+                  </linearGradient>
+                ))}
+              </defs>
+              <CartesianGrid
+                vertical={false}
+                strokeDasharray='3 3'
+                className='stroke-muted/30'
               />
-            ))}
-          </AreaChart>
-        </ResponsiveContainer>
-      </CardContent>
-    </Card>
+              <XAxis
+                dataKey='timestamp'
+                className='text-xs'
+                tick={{ fill: 'var(--muted-foreground)' }}
+                tickFormatter={formatAxisTick}
+                tickLine={false}
+                axisLine={false}
+                minTickGap={isMobile ? 20 : 32}
+              />
+              <YAxis
+                className='text-xs'
+                tick={{ fill: 'var(--muted-foreground)' }}
+                tickFormatter={(value) =>
+                  compactNumber.format(
+                    typeof value === 'number' ? value : Number(value || 0)
+                  )
+                }
+                tickLine={false}
+                axisLine={false}
+                width={isMobile ? 40 : 48}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    labelFormatter={(label) =>
+                      new Date(String(label)).toLocaleString()
+                    }
+                  />
+                }
+              />
+              {visibleDataKeys.map((dataKey) => (
+                <Area
+                  key={dataKey.key}
+                  type='monotone'
+                  dataKey={dataKey.key}
+                  stroke={dataKey.color}
+                  fillOpacity={1}
+                  fill={`url(#color${dataKey.key})`}
+                  name={dataKey.name}
+                  strokeWidth={2}
+                  connectNulls
+                  animationDuration={1000}
+                />
+              ))}
+            </AreaChart>
+          </ChartContainer>
+          {visibleDataKeys.length === 0 ? (
+            <p className='text-muted-foreground text-sm'>
+              Select at least one metric to display the chart.
+            </p>
+          ) : null}
+        </CardContent>
+      </Card>
+    </div>
   );
 }
diff --git a/ui/components/usage-summary-cards.tsx b/ui/components/usage-summary-cards.tsx
index 08b0b07a..4dca6ccb 100644
--- a/ui/components/usage-summary-cards.tsx
+++ b/ui/components/usage-summary-cards.tsx
@@ -41,90 +41,92 @@ export function UsageSummaryCards({ summary }: UsageSummaryCardsProps) {
       title: 'Total Requests',
       value: summary.total_requests.toLocaleString(),
       icon: Activity,
-      color: 'text-blue-500',
+      iconClassName: 'text-blue-600 dark:text-blue-300',
     },
     {
       title: 'Successful Completions',
       value: summary.successful_chat_completions.toLocaleString(),
       icon: CheckCircle2,
-      color: 'text-green-500',
+      iconClassName: 'text-emerald-600 dark:text-emerald-300',
     },
     {
       title: 'Revenue',
       value: formatAmount(summary.revenue_msats),
       icon: Coins,
-      color: 'text-green-600',
+      iconClassName: 'text-amber-600 dark:text-amber-300',
     },
     {
       title: 'Net Revenue',
       value: formatAmount(summary.net_revenue_msats),
       icon: DollarSign,
-      color: 'text-emerald-600',
+      iconClassName: 'text-lime-600 dark:text-lime-300',
     },
     {
       title: 'Refunds',
       value: formatAmount(summary.refunds_msats),
       icon: TrendingDown,
-      color: 'text-red-500',
+      iconClassName: 'text-rose-600 dark:text-rose-300',
     },
     {
       title: 'Avg Revenue/Request',
       value: formatAmount(summary.avg_revenue_per_request_msats),
       icon: CreditCard,
-      color: 'text-cyan-500',
+      iconClassName: 'text-violet-600 dark:text-violet-300',
     },
     {
       title: 'Success Rate',
       value: `${summary.success_rate.toFixed(1)}%`,
       icon: TrendingUp,
-      color: 'text-emerald-500',
+      iconClassName: 'text-teal-600 dark:text-teal-300',
     },
     {
       title: 'Refund Rate',
       value: `${summary.refund_rate.toFixed(1)}%`,
       icon: XCircle,
-      color: 'text-orange-500',
+      iconClassName: 'text-fuchsia-600 dark:text-fuchsia-300',
     },
     {
       title: 'Failed Requests',
       value: summary.failed_requests.toLocaleString(),
       icon: XCircle,
-      color: 'text-red-400',
+      iconClassName: 'text-red-600 dark:text-red-300',
     },
     {
       title: 'Errors',
       value: summary.total_errors.toLocaleString(),
       icon: AlertTriangle,
-      color: 'text-orange-500',
+      iconClassName: 'text-orange-600 dark:text-orange-300',
     },
     {
       title: 'Unique Models',
       value: summary.unique_models_count.toLocaleString(),
       icon: Database,
-      color: 'text-purple-500',
+      iconClassName: 'text-cyan-600 dark:text-cyan-300',
     },
     {
       title: 'Upstream Errors',
       value: summary.upstream_errors.toLocaleString(),
       icon: AlertTriangle,
-      color: 'text-yellow-500',
+      iconClassName: 'text-pink-600 dark:text-pink-300',
     },
   ];
 
   return (
-    <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-4'>
+    <div className='grid grid-cols-1 gap-2.5 px-1 min-[380px]:grid-cols-2 sm:gap-4 sm:px-0 xl:grid-cols-4'>
       {cards.map((card) => (
-        <Card key={card.title} className='hover:bg-muted/50 transition-colors'>
-          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-            <CardTitle className='text-muted-foreground text-sm font-medium'>
+        <Card key={card.title} className='hover:bg-muted/40 transition-colors'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-1 sm:pb-2'>
+            <CardTitle className='text-muted-foreground text-xs font-medium sm:text-sm'>
               {card.title}
             </CardTitle>
-            <div className={`bg-secondary rounded-full p-2`}>
-              <card.icon className={`h-4 w-4 ${card.color}`} />
-            </div>
+            <span
+              className={`inline-flex size-6 items-center justify-center sm:size-8 ${card.iconClassName}`}
+            >
+              <card.icon className='h-3.5 w-3.5 sm:h-4 sm:w-4' />
+            </span>
           </CardHeader>
-          <CardContent>
-            <div className='text-2xl font-bold tracking-tight'>
+          <CardContent className='pt-0'>
+            <div className='break-words text-lg font-semibold tracking-tight sm:text-2xl'>
               {card.value}
             </div>
           </CardContent>
diff --git a/ui/components/withdraw-modal.tsx b/ui/components/withdraw-modal.tsx
index fab5abc1..aa09107c 100644
--- a/ui/components/withdraw-modal.tsx
+++ b/ui/components/withdraw-modal.tsx
@@ -13,6 +13,8 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import {
   Select,
   SelectContent,
@@ -108,22 +110,24 @@ export function WithdrawModal({
           </DialogHeader>
 
           <div className='space-y-4'>
-            <div className='rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950'>
-              <div className='mb-2 flex items-center gap-2'>
-                <CheckCircle className='h-5 w-5 text-green-600' />
-                <span className='font-semibold text-green-900 dark:text-green-100'>
-                  Withdrawal Token
-                </span>
-              </div>
-              <div className='rounded-md bg-gray-900 p-3 font-mono text-xs break-all text-green-400'>
-                {withdrawnToken}
-              </div>
-            </div>
+            <Alert>
+              <CheckCircle className='h-5 w-5' />
+              <AlertTitle>Withdrawal Token</AlertTitle>
+              <AlertDescription>
+                Save this token now. It represents your withdrawn balance.
+              </AlertDescription>
+            </Alert>
+            <Textarea
+              readOnly
+              value={withdrawnToken}
+              className='font-mono text-xs leading-relaxed'
+              rows={6}
+            />
 
-            <div className='flex gap-2'>
+            <div className='flex flex-col gap-2 sm:flex-row'>
               <Button
                 onClick={handleCopyToken}
-                className='flex-1'
+                className='w-full flex-1'
                 variant={copiedToken ? 'outline' : 'default'}
               >
                 {copiedToken ? (
@@ -138,7 +142,7 @@ export function WithdrawModal({
                   </>
                 )}
               </Button>
-              <Button onClick={() => onOpenChange(false)} variant='outline'>
+              <Button onClick={() => onOpenChange(false)} variant='outline' className='w-full sm:w-auto'>
                 Close
               </Button>
             </div>
@@ -213,25 +217,26 @@ export function WithdrawModal({
           </div>
 
           {showWarning && (
-            <div className='bg-destructive/10 text-destructive flex items-start gap-2 rounded-md p-3 text-sm'>
-              <AlertCircle className='mt-0.5 h-5 w-5 flex-shrink-0' />
-              <span>
-                Warning: Withdrawing more than your balance will use user funds!
-              </span>
-            </div>
+            <Alert variant='destructive'>
+              <AlertCircle className='h-5 w-5' />
+              <AlertDescription>
+                Warning: Withdrawing more than your balance will use user
+                funds.
+              </AlertDescription>
+            </Alert>
           )}
 
           {withdrawMutation.isError && (
-            <div className='bg-destructive/10 text-destructive flex items-start gap-2 rounded-md p-3 text-sm'>
-              <AlertCircle className='mt-0.5 h-5 w-5 flex-shrink-0' />
-              <span>
+            <Alert variant='destructive'>
+              <AlertCircle className='h-5 w-5' />
+              <AlertDescription>
                 {(withdrawMutation.error as Error).message ||
                   'Failed to withdraw'}
-              </span>
-            </div>
+              </AlertDescription>
+            </Alert>
           )}
 
-          <div className='flex gap-2'>
+          <div className='flex flex-col gap-2 sm:flex-row'>
             <Button
               onClick={() => withdrawMutation.mutate()}
               disabled={
@@ -249,6 +254,7 @@ export function WithdrawModal({
               onClick={() => onOpenChange(false)}
               variant='outline'
               disabled={withdrawMutation.isPending}
+              className='w-full sm:w-auto'
             >
               Cancel
             </Button>
diff --git a/ui/eslint.config.mjs b/ui/eslint.config.mjs
index 7f86eca7..9127aac7 100644
--- a/ui/eslint.config.mjs
+++ b/ui/eslint.config.mjs
@@ -1,16 +1,20 @@
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-import { FlatCompat } from '@eslint/eslintrc';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals"
+import nextTypescript from "eslint-config-next/typescript"
 
 const eslintConfig = [
-  ...compat.extends('next/core-web-vitals', 'next/typescript'),
-];
+  ...nextCoreWebVitals,
+  ...nextTypescript,
+  {
+    rules: {
+      "react-hooks/set-state-in-effect": "off",
+      "react-hooks/incompatible-library": "off",
+    },
+    settings: {
+      react: {
+        version: "19.2",
+      },
+    },
+  },
+]
 
-export default eslintConfig;
+export default eslintConfig
diff --git a/ui/hooks/use-mobile.ts b/ui/hooks/use-mobile.ts
index 6be5f6c1..2b0fe1df 100644
--- a/ui/hooks/use-mobile.ts
+++ b/ui/hooks/use-mobile.ts
@@ -1,21 +1,19 @@
-import * as React from 'react';
+import * as React from "react"
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined
-  );
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener('change', onChange);
-  }, []);
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
 
-  return !!isMobile;
+  return !!isMobile
 }
diff --git a/ui/hooks/useMediaQuery.ts b/ui/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..f8299605
--- /dev/null
+++ b/ui/hooks/useMediaQuery.ts
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    mediaQuery.addEventListener("change", listener);
+    return () => mediaQuery.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}
diff --git a/ui/lib/api/client.ts b/ui/lib/api/client.ts
index 01239c21..f2bd1295 100644
--- a/ui/lib/api/client.ts
+++ b/ui/lib/api/client.ts
@@ -13,12 +13,12 @@ class ApiClient {
   private handleAuthError(error: unknown): void {
     if (axios.isAxiosError(error)) {
       const axiosError = error as AxiosError;
-      if (
-        axiosError.response?.status === 401 ||
-        axiosError.response?.status === 403
-      ) {
+      if (axiosError.response?.status === 401) {
         ConfigurationService.clearToken();
-        if (typeof window !== 'undefined') {
+        if (
+          typeof window !== 'undefined' &&
+          window.location.pathname !== '/login'
+        ) {
           window.location.href = '/login';
         }
       }
@@ -36,7 +36,6 @@ class ApiClient {
     };
 
     try {
-      console.log(`Making GET request to ${this.getBaseUrl()}${endpoint}`);
       const response: AxiosResponse<T> = await axios.get<T>(
         `${this.getBaseUrl()}${endpoint}`,
         config
@@ -55,20 +54,11 @@ class ApiClient {
     };
 
     try {
-      console.log(
-        `Making POST request to ${this.getBaseUrl()}${endpoint}`,
-        data
-      );
       const response: AxiosResponse<T> = await axios.post<T>(
         `${this.getBaseUrl()}${endpoint}`,
         data,
         config
       );
-      console.log(`POST response from ${endpoint}:`, {
-        status: response.status,
-        data: response.data,
-        headers: response.headers,
-      });
       return response.data;
     } catch (error) {
       this.handleAuthError(error);
@@ -84,10 +74,6 @@ class ApiClient {
     };
 
     try {
-      console.log(
-        `Making PUT request to ${this.getBaseUrl()}${endpoint}`,
-        data
-      );
       const response: AxiosResponse<T> = await axios.put<T>(
         `${this.getBaseUrl()}${endpoint}`,
         data,
@@ -108,10 +94,6 @@ class ApiClient {
     };
 
     try {
-      console.log(
-        `Making PATCH request to ${this.getBaseUrl()}${endpoint}`,
-        data
-      );
       const response: AxiosResponse<T> = await axios.patch<T>(
         `${this.getBaseUrl()}${endpoint}`,
         data,
@@ -132,7 +114,6 @@ class ApiClient {
     };
 
     try {
-      console.log(`Making DELETE request to ${this.getBaseUrl()}${endpoint}`);
       const response: AxiosResponse<T> = await axios.delete<T>(
         `${this.getBaseUrl()}${endpoint}`,
         config
diff --git a/ui/lib/api/schemas/models.ts b/ui/lib/api/schemas/models.ts
index 622811d1..f053abf8 100644
--- a/ui/lib/api/schemas/models.ts
+++ b/ui/lib/api/schemas/models.ts
@@ -36,7 +36,7 @@ export const ModelSchema = z.object({
 
 // Schema for a model with additional provider-specific settings
 export const ModelWithSettingsSchema = ModelSchema.extend({
-  settings: z.record(z.unknown()).optional(),
+  settings: z.record(z.string(), z.unknown()).optional(),
   pricing: z
     .object({
       inputCostPer1kTokens: z.number().optional(),
@@ -54,7 +54,7 @@ export const CreateModelSchema = ModelSchema.omit({
   has_own_api_key: true,
   api_key_type: true,
 }).extend({
-  settings: z.record(z.unknown()).optional(),
+  settings: z.record(z.string(), z.unknown()).optional(),
 });
 
 // Schema for updating an existing model
@@ -85,10 +85,7 @@ export const ManualModelSchema = z
       .min(0)
       .optional()
       .transform((val) => (val === 0 ? undefined : val)),
-  })
-  .transform((data) => ({
-    ...data,
-  }));
+  });
 
 // Schema for group settings
 export const GroupSettingsSchema = z.object({
@@ -119,7 +116,7 @@ export const ModelListResponseSchema = z.object({
 export const ModelTestRequestSchema = z.object({
   modelId: z.string(),
   input: z.string(),
-  parameters: z.record(z.unknown()).optional(),
+  parameters: z.record(z.string(), z.unknown()).optional(),
 });
 
 // Schema for model testing response
diff --git a/ui/lib/api/services/admin.ts b/ui/lib/api/services/admin.ts
index 790143c8..17bf47da 100644
--- a/ui/lib/api/services/admin.ts
+++ b/ui/lib/api/services/admin.ts
@@ -63,10 +63,12 @@ export const AdminModelSchema = z.object({
   description: z.string(),
   created: z.number(),
   context_length: z.number(),
-  architecture: AdminModelArchitectureSchema.or(z.record(z.any())),
-  pricing: AdminModelPricingSchema.or(z.record(z.any())),
-  per_request_limits: z.record(z.any()).nullable().optional(),
-  top_provider: z.record(z.any()).nullable().optional(),
+  architecture: AdminModelArchitectureSchema.or(
+    z.record(z.string(), z.unknown())
+  ),
+  pricing: AdminModelPricingSchema.or(z.record(z.string(), z.unknown())),
+  per_request_limits: z.record(z.string(), z.unknown()).nullable().optional(),
+  top_provider: z.record(z.string(), z.unknown()).nullable().optional(),
   upstream_provider_id: z.union([z.string(), z.number()]).nullable().optional(),
   canonical_slug: z.string().nullable().optional(),
   alias_ids: z.array(z.string()).nullable().optional(),
@@ -327,10 +329,6 @@ export class AdminService {
       ...data,
       pricing: this.convertPricingToPerToken(data.pricing),
     };
-    console.log('Creating provider model - pricing conversion:', {
-      original: data.pricing,
-      converted: payload.pricing,
-    });
     const model = await apiClient.post<AdminModel>(
       `/admin/api/upstream-providers/${providerId}/models`,
       payload
@@ -390,14 +388,11 @@ export class AdminService {
     modelId: string,
     data: AdminModel
   ): Promise<AdminModel> {
+    void modelId;
     const payload = {
       ...data,
       pricing: this.convertPricingToPerToken(data.pricing),
     };
-    console.log('Updating provider model - pricing conversion:', {
-      original: data.pricing,
-      converted: payload.pricing,
-    });
     // Use the same POST endpoint for both create and update (upsert)
     const model = await apiClient.post<AdminModel>(
       `/admin/api/upstream-providers/${providerId}/models`,
@@ -418,14 +413,6 @@ export class AdminService {
     );
   }
 
-  static async deleteAllProviderModels(
-    providerId: number
-  ): Promise<{ ok: boolean; deleted: number }> {
-    return await apiClient.delete<{ ok: boolean; deleted: number }>(
-      `/admin/api/upstream-providers/${providerId}/models`
-    );
-  }
-
   static async getModelsWithProviders(): Promise<{
     models: AdminModelAsModel[];
     groups: AdminModelGroup[];
@@ -718,13 +705,12 @@ export class AdminService {
     if (!providerId) {
       throw new Error('provider_id is required for bulk updates');
     }
+    void updates;
 
     const errors: string[] = [];
     let updated_count = 0;
     const providerIdNum = parseInt(providerId);
 
-    console.log('Bulk update not implemented, ignoring updates:', updates);
-
     for (const id of modelIds) {
       try {
         const model = await this.getProviderModel(providerIdNum, id);
@@ -745,34 +731,6 @@ export class AdminService {
     };
   }
 
-  static async deleteAllModels(): Promise<{
-    deleted_count: number;
-    message: string;
-  }> {
-    const providers = await this.getUpstreamProviders();
-    let totalDeleted = 0;
-
-    for (const provider of providers) {
-      const result = await this.deleteAllProviderModels(provider.id);
-      totalDeleted += result.deleted;
-    }
-
-    return {
-      deleted_count: totalDeleted,
-      message: 'All models deleted successfully',
-    };
-  }
-
-  static async deleteModelsByProvider(
-    providerId: string
-  ): Promise<{ deleted_count: number; message: string }> {
-    const result = await this.deleteAllProviderModels(parseInt(providerId));
-    return {
-      deleted_count: result.deleted,
-      message: 'Provider models deleted successfully',
-    };
-  }
-
   static async restoreModels(
     modelIds: string[],
     providerId?: string
@@ -801,10 +759,7 @@ export class AdminService {
   static async refreshModels(data: {
     provider_id: string;
   }): Promise<{ message: string }> {
-    console.log(
-      'Refresh models not implemented for admin API, ignoring data:',
-      data
-    );
+    void data;
     return { message: 'Refresh not implemented for admin API' };
   }
 
diff --git a/ui/lib/api/services/api.ts b/ui/lib/api/services/api.ts
index 62039900..6804d6b1 100644
--- a/ui/lib/api/services/api.ts
+++ b/ui/lib/api/services/api.ts
@@ -20,11 +20,28 @@ interface NostrEvent {
   tags: string[][];
 }
 
-// Define the Nostr interface for the window object
-interface NostrWindow extends Window {
-  nostr: {
-    signEvent: (event: NostrEvent) => Promise<NostrEvent>;
-  };
+interface NostrProvider {
+  signEvent: (event: NostrEvent) => Promise<NostrEvent>;
+}
+
+type WindowWithNostr = Window & {
+  nostr?: NostrProvider;
+};
+
+function getNostrProvider(): NostrProvider {
+  if (typeof window === 'undefined') {
+    throw new Error('Nostr provider is unavailable on the server');
+  }
+
+  const windowWithNostr = window as WindowWithNostr;
+  if (
+    !windowWithNostr.nostr ||
+    typeof windowWithNostr.nostr.signEvent !== 'function'
+  ) {
+    throw new Error('Nostr provider is unavailable');
+  }
+
+  return windowWithNostr.nostr;
 }
 
 export default function api<Request, Response>({
@@ -42,9 +59,8 @@ export default function api<Request, Response>({
     requestSchema.parse(requestData);
 
     async function apiCall() {
-      const auth_event = await (
-        window as unknown as NostrWindow
-      ).nostr.signEvent({
+      const nostr = getNostrProvider();
+      const auth_event = await nostr.signEvent({
         kind: 27235,
         created_at: Math.floor(new Date().getTime() / 1000),
         content: 'application/json',
@@ -66,13 +82,6 @@ export default function api<Request, Response>({
       });
 
       if (process.env.NODE_ENV === PRODUCTION) {
-        responseSchema.safeParseAsync(response.data).then((result) => {
-          if (!result.success) {
-            console.log('failed to validate result', path);
-            // TODO: Send error to sentry or other error reporting service
-          }
-        });
-
         return response.data as Response;
       }
 
diff --git a/ui/lib/api/services/configuration.ts b/ui/lib/api/services/configuration.ts
index b3bfd19a..fcb8b6df 100644
--- a/ui/lib/api/services/configuration.ts
+++ b/ui/lib/api/services/configuration.ts
@@ -63,7 +63,6 @@ export class ConfigurationService {
   static getLocalBaseUrl(): string {
     const envBaseUrl = process.env.NEXT_PUBLIC_API_URL;
 
-    console.log(envBaseUrl);
     if (envBaseUrl && envBaseUrl.trim()) {
       return envBaseUrl;
     }
@@ -138,18 +137,13 @@ export class ConfigurationService {
 
     try {
       if (typeof window !== 'undefined') {
-        const adminToken = localStorage.getItem('admin_token');
-        const tokenExpiry = localStorage.getItem('admin_token_expiry');
-
-        if (adminToken && tokenExpiry) {
-          const expiryTime = parseInt(tokenExpiry, 10);
-          if (Date.now() < expiryTime) {
-            headers['Authorization'] = `Bearer ${adminToken}`;
+        if (this.isTokenValid()) {
+          const adminToken = localStorage.getItem('admin_token');
+          if (!adminToken) {
             return headers;
-          } else {
-            localStorage.removeItem('admin_token');
-            localStorage.removeItem('admin_token_expiry');
           }
+          headers['Authorization'] = `Bearer ${adminToken}`;
+          return headers;
         }
       }
     } catch (error) {
@@ -169,15 +163,30 @@ export class ConfigurationService {
       return false;
     }
 
-    const adminToken = localStorage.getItem('admin_token');
-    const tokenExpiry = localStorage.getItem('admin_token_expiry');
+    try {
+      const adminToken = localStorage.getItem('admin_token');
+      if (!adminToken) {
+        return false;
+      }
 
-    if (!adminToken || !tokenExpiry) {
+      const expiryRaw = localStorage.getItem('admin_token_expiry');
+      if (!expiryRaw) {
+        this.clearToken();
+        return false;
+      }
+
+      const expiryTime = Number.parseInt(expiryRaw, 10);
+      if (!Number.isFinite(expiryTime) || Date.now() >= expiryTime) {
+        this.clearToken();
+        return false;
+      }
+
+      return true;
+    } catch (error) {
+      console.warn('Error validating admin token:', error);
+      this.clearToken();
       return false;
     }
-
-    const expiryTime = parseInt(tokenExpiry, 10);
-    return Date.now() < expiryTime;
   }
 
   static clearToken(): void {
@@ -194,7 +203,10 @@ export class ConfigurationService {
       return;
     }
 
-    const expiryTime = Date.now() + expiresIn * 1000;
+    const safeExpiresIn = Number.isFinite(expiresIn)
+      ? Math.max(0, Math.floor(expiresIn))
+      : 0;
+    const expiryTime = Date.now() + safeExpiresIn * 1000;
     localStorage.setItem('admin_token', token);
     localStorage.setItem('admin_token_expiry', String(expiryTime));
   }
diff --git a/ui/lib/api/services/models.ts b/ui/lib/api/services/models.ts
index 98f54c63..87359cd3 100644
--- a/ui/lib/api/services/models.ts
+++ b/ui/lib/api/services/models.ts
@@ -36,7 +36,7 @@ export const CollectModelsRequestSchema = z.object({
 export const CollectModelsResponseSchema = z.object({
   collected_count: z.number(),
   skipped_count: z.number(),
-  models: z.array(z.any()),
+  models: z.array(z.unknown()),
   errors: z.array(z.string()),
 });
 
@@ -90,10 +90,10 @@ export const EnhancedOpenAIModelSchema = z.object({
   created: z.number(),
   description: z.string().optional(),
   context_length: z.number().optional(),
-  architecture: z.any().optional(),
-  pricing: z.any().optional(),
-  top_provider: z.any().optional(),
-  per_request_limits: z.any().optional(),
+  architecture: z.unknown().optional(),
+  pricing: z.unknown().optional(),
+  top_provider: z.unknown().optional(),
+  per_request_limits: z.unknown().optional(),
   supported_parameters: z.array(z.string()).optional(),
   provider_url: z.string(),
   provider_name: z.string().optional(),
@@ -124,7 +124,7 @@ export const BackendModelSchema = z.object({
   provider_id: z.string().optional(),
   provider: z.string().optional(),
   soft_deleted: z.boolean().optional(),
-  architecture: z.any().optional(),
+  architecture: z.unknown().optional(),
   model_type: z.string().optional(),
   description: z.string().optional(),
   context_length: z.number().optional(),
@@ -486,7 +486,7 @@ export class ModelService {
   static async testModel(
     modelId: string,
     endpointType: string,
-    requestData: Record<string, unknown>
+    requestData: unknown
   ): Promise<{
     success: boolean;
     data?: unknown;
diff --git a/ui/lib/auth/AuthContext.tsx b/ui/lib/auth/auth-context.tsx
similarity index 100%
rename from ui/lib/auth/AuthContext.tsx
rename to ui/lib/auth/auth-context.tsx
diff --git a/ui/lib/auth/ProtectedRoute.tsx b/ui/lib/auth/protected-route.tsx
similarity index 100%
rename from ui/lib/auth/ProtectedRoute.tsx
rename to ui/lib/auth/protected-route.tsx
diff --git a/ui/lib/hooks/useConfiguration.ts b/ui/lib/hooks/use-configuration.ts
similarity index 100%
rename from ui/lib/hooks/useConfiguration.ts
rename to ui/lib/hooks/use-configuration.ts
diff --git a/ui/lib/hooks/useModels.ts b/ui/lib/hooks/use-models.ts
similarity index 100%
rename from ui/lib/hooks/useModels.ts
rename to ui/lib/hooks/use-models.ts
diff --git a/ui/lib/hooks/useUsers.ts b/ui/lib/hooks/use-users.ts
similarity index 100%
rename from ui/lib/hooks/useUsers.ts
rename to ui/lib/hooks/use-users.ts
diff --git a/ui/lib/services/__tests__/costValidation.test.ts b/ui/lib/services/__tests__/cost-validation.test.ts
similarity index 99%
rename from ui/lib/services/__tests__/costValidation.test.ts
rename to ui/lib/services/__tests__/cost-validation.test.ts
index fdca5b44..1416c055 100644
--- a/ui/lib/services/__tests__/costValidation.test.ts
+++ b/ui/lib/services/__tests__/cost-validation.test.ts
@@ -4,7 +4,7 @@ import {
   estimateMinimumTokensForCost,
   formatCost,
   formatCostBreakdown,
-} from '../costValidation';
+} from '../cost-validation';
 import { type Model } from '../../api/schemas/models';
 
 // Mock model for testing
diff --git a/ui/lib/services/costValidation.ts b/ui/lib/services/cost-validation.ts
similarity index 100%
rename from ui/lib/services/costValidation.ts
rename to ui/lib/services/cost-validation.ts
diff --git a/ui/lib/utils/log-level.ts b/ui/lib/utils/log-level.ts
new file mode 100644
index 00000000..cc7a1560
--- /dev/null
+++ b/ui/lib/utils/log-level.ts
@@ -0,0 +1,21 @@
+export type LogLevelBadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'outline'
+  | 'destructive';
+
+export function getLogLevelBadgeVariant(level: string): LogLevelBadgeVariant {
+  switch (level.toUpperCase()) {
+    case 'INFO':
+      return 'default';
+    case 'WARNING':
+      return 'secondary';
+    case 'ERROR':
+    case 'CRITICAL':
+      return 'destructive';
+    case 'TRACE':
+    case 'DEBUG':
+    default:
+      return 'outline';
+  }
+}
diff --git a/ui/lib/utils/modelSort.ts b/ui/lib/utils/model-sort.ts
similarity index 100%
rename from ui/lib/utils/modelSort.ts
rename to ui/lib/utils/model-sort.ts
diff --git a/ui/package.json b/ui/package.json
index fb5e1dd2..84d0779f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -7,82 +7,85 @@
     "build": "next build",
     "export": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "format-check": "prettier --check --ignore-path .gitignore .",
     "format-fix": "prettier --write --ignore-path .gitignore ."
   },
   "dependencies": {
+    "@base-ui/react": "^1.2.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.0.1",
-    "@radix-ui/react-alert-dialog": "^1.1.10",
-    "@radix-ui/react-avatar": "^1.1.6",
-    "@radix-ui/react-checkbox": "^1.2.2",
-    "@radix-ui/react-collapsible": "^1.1.7",
-    "@radix-ui/react-context-menu": "^2.2.10",
-    "@radix-ui/react-dialog": "^1.1.10",
-    "@radix-ui/react-dropdown-menu": "^2.1.10",
-    "@radix-ui/react-hover-card": "^1.1.10",
-    "@radix-ui/react-label": "^2.1.4",
-    "@radix-ui/react-menubar": "^1.1.10",
-    "@radix-ui/react-navigation-menu": "^1.2.9",
-    "@radix-ui/react-popover": "^1.1.10",
-    "@radix-ui/react-progress": "^1.1.4",
-    "@radix-ui/react-radio-group": "^1.3.2",
-    "@radix-ui/react-scroll-area": "^1.2.5",
-    "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-separator": "^1.1.4",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-switch": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.1.7",
-    "@radix-ui/react-toast": "^1.2.11",
-    "@radix-ui/react-toggle": "^1.1.6",
-    "@radix-ui/react-toggle-group": "^1.1.6",
-    "@radix-ui/react-tooltip": "^1.2.3",
-    "@tanstack/react-query": "^5.90.16",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-table": "^8.21.3",
-    "axios": "^1.13.2",
+    "axios": "^1.13.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.562.0",
-    "next": "15.5.9",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
     "next-themes": "^0.4.6",
     "qrcode": "^1.5.4",
     "qrcode.react": "^4.2.0",
-    "react": "^19.0.0",
-    "react-day-picker": "^9.6.7",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.55.0",
-    "react-resizable-panels": "^2.1.7",
-    "recharts": "^2.15.3",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.2.0",
-    "tw-animate-css": "^1.2.5",
-    "zod": "^3.24.3",
-    "zustand": "^5.0.3"
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.13.2",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.2",
+    "react-resizable-panels": "^4.6.5",
+    "recharts": "^3.7.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@tanstack/react-query-devtools": "^5.91.2",
-    "@types/node": "^20",
+    "@tailwindcss/postcss": "^4.2.0",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "@types/node": "^25.3.0",
     "@types/qrcode": "^1.5.6",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9.25.0",
-    "eslint-config-next": "15.5.9",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^10.0.1",
+    "eslint-config-next": "16.1.6",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5"
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "^4.2.0",
+    "typescript": "^5.9.3"
   }
 }
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index addcf15e..8a8769e3 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -1,835 +1,1025 @@
-lockfileVersion: '9.0'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-importers:
-  .:
-    dependencies:
-      '@dnd-kit/core':
-        specifier: ^6.3.1
-        version: 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@dnd-kit/modifiers':
-        specifier: ^9.0.0
-        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
-      '@dnd-kit/sortable':
-        specifier: ^10.0.0
-        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
-      '@dnd-kit/utilities':
-        specifier: ^3.2.2
-        version: 3.2.2(react@19.2.0)
-      '@hookform/resolvers':
-        specifier: ^5.0.1
-        version: 5.2.2(react-hook-form@7.65.0(react@19.2.0))
-      '@radix-ui/react-alert-dialog':
-        specifier: ^1.1.10
-        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-avatar':
-        specifier: ^1.1.6
-        version: 1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.2.2
-        version: 1.3.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-collapsible':
-        specifier: ^1.1.7
-        version: 1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-context-menu':
-        specifier: ^2.2.10
-        version: 2.2.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.10
-        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.10
-        version: 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-hover-card':
-        specifier: ^1.1.10
-        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.4
-        version: 2.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-menubar':
-        specifier: ^1.1.10
-        version: 1.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-navigation-menu':
-        specifier: ^1.2.9
-        version: 1.2.14(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-popover':
-        specifier: ^1.1.10
-        version: 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-progress':
-        specifier: ^1.1.4
-        version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.2
-        version: 1.3.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-scroll-area':
-        specifier: ^1.2.5
-        version: 1.2.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-select':
-        specifier: ^2.2.2
-        version: 2.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.4
-        version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.2.0
-        version: 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.2.2
-        version: 1.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.7
-        version: 1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toast':
-        specifier: ^1.2.11
-        version: 1.2.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle':
-        specifier: ^1.1.6
-        version: 1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle-group':
-        specifier: ^1.1.6
-        version: 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.2.3
-        version: 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@tanstack/react-query':
-        specifier: ^5.90.16
-        version: 5.90.16(react@19.2.0)
-      '@tanstack/react-table':
-        specifier: ^8.21.3
-        version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      axios:
-        specifier: ^1.13.2
-        version: 1.13.2
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      cmdk:
-        specifier: ^1.1.1
-        version: 1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      date-fns:
-        specifier: ^4.1.0
-        version: 4.1.0
-      embla-carousel-react:
-        specifier: ^8.6.0
-        version: 8.6.0(react@19.2.0)
-      input-otp:
-        specifier: ^1.4.2
-        version: 1.4.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      lucide-react:
-        specifier: ^0.562.0
-        version: 0.562.0(react@19.2.0)
-      next:
-        specifier: 15.5.9
-        version: 15.5.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      next-themes:
-        specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      qrcode:
-        specifier: ^1.5.4
-        version: 1.5.4
-      qrcode.react:
-        specifier: ^4.2.0
-        version: 4.2.0(react@19.2.0)
-      react:
-        specifier: ^19.0.0
-        version: 19.2.0
-      react-day-picker:
-        specifier: ^9.6.7
-        version: 9.11.1(react@19.2.0)
-      react-dom:
-        specifier: ^19.0.0
-        version: 19.2.0(react@19.2.0)
-      react-hook-form:
-        specifier: ^7.55.0
-        version: 7.65.0(react@19.2.0)
-      react-resizable-panels:
-        specifier: ^2.1.7
-        version: 2.1.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      recharts:
-        specifier: ^2.15.3
-        version: 2.15.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      sonner:
-        specifier: ^2.0.3
-        version: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      tailwind-merge:
-        specifier: ^3.2.0
-        version: 3.3.1
-      tw-animate-css:
-        specifier: ^1.2.5
-        version: 1.4.0
-      zod:
-        specifier: ^3.24.3
-        version: 3.25.76
-      zustand:
-        specifier: ^5.0.3
-        version: 5.0.8(@types/react@19.2.2)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
-    devDependencies:
-      '@eslint/eslintrc':
-        specifier: ^3.3.3
-        version: 3.3.3
-      '@tailwindcss/postcss':
-        specifier: ^4.1.18
-        version: 4.1.18
-      '@tanstack/react-query-devtools':
-        specifier: ^5.91.2
-        version: 5.91.2(@tanstack/react-query@5.90.16(react@19.2.0))(react@19.2.0)
-      '@types/node':
-        specifier: ^20
-        version: 20.19.22
-      '@types/qrcode':
-        specifier: ^1.5.6
-        version: 1.5.6
-      '@types/react':
-        specifier: ^19
-        version: 19.2.2
-      '@types/react-dom':
-        specifier: ^19
-        version: 19.2.2(@types/react@19.2.2)
-      eslint:
-        specifier: ^9.25.0
-        version: 9.38.0(jiti@2.6.1)
-      eslint-config-next:
-        specifier: 15.5.9
-        version: 15.5.9(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint-config-prettier:
-        specifier: ^10.1.2
-        version: 10.1.8(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-prettier:
-        specifier: ^5.2.6
-        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.38.0(jiti@2.6.1)))(eslint@9.38.0(jiti@2.6.1))(prettier@3.6.2)
-      eslint-plugin-react:
-        specifier: ^7.37.5
-        version: 7.37.5(eslint@9.38.0(jiti@2.6.1))
-      prettier:
-        specifier: ^3.5.3
-        version: 3.6.2
-      prettier-plugin-tailwindcss:
-        specifier: ^0.6.11
-        version: 0.6.14(prettier@3.6.2)
-      tailwindcss:
-        specifier: ^4.1.18
-        version: 4.1.18
-      typescript:
-        specifier: ^5
-        version: 5.9.3
+dependencies:
+  '@base-ui/react':
+    specifier: ^1.2.0
+    version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@dnd-kit/core':
+    specifier: ^6.3.1
+    version: 6.3.1(react-dom@19.2.4)(react@19.2.4)
+  '@dnd-kit/modifiers':
+    specifier: ^9.0.0
+    version: 9.0.0(@dnd-kit/core@6.3.1)(react@19.2.4)
+  '@dnd-kit/sortable':
+    specifier: ^10.0.0
+    version: 10.0.0(@dnd-kit/core@6.3.1)(react@19.2.4)
+  '@dnd-kit/utilities':
+    specifier: ^3.2.2
+    version: 3.2.2(react@19.2.4)
+  '@hookform/resolvers':
+    specifier: ^5.2.2
+    version: 5.2.2(react-hook-form@7.71.2)
+  '@radix-ui/react-alert-dialog':
+    specifier: ^1.1.15
+    version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-avatar':
+    specifier: ^1.1.11
+    version: 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-checkbox':
+    specifier: ^1.3.3
+    version: 1.3.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-collapsible':
+    specifier: ^1.1.12
+    version: 1.1.12(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-context-menu':
+    specifier: ^2.2.16
+    version: 2.2.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-dialog':
+    specifier: ^1.1.15
+    version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-dropdown-menu':
+    specifier: ^2.1.16
+    version: 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-hover-card':
+    specifier: ^1.1.15
+    version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-label':
+    specifier: ^2.1.8
+    version: 2.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-menubar':
+    specifier: ^1.1.16
+    version: 1.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-navigation-menu':
+    specifier: ^1.2.14
+    version: 1.2.14(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-popover':
+    specifier: ^1.1.15
+    version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-progress':
+    specifier: ^1.1.8
+    version: 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-radio-group':
+    specifier: ^1.3.8
+    version: 1.3.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-scroll-area':
+    specifier: ^1.2.10
+    version: 1.2.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-select':
+    specifier: ^2.2.6
+    version: 2.2.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-separator':
+    specifier: ^1.1.8
+    version: 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-slot':
+    specifier: ^1.2.4
+    version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+  '@radix-ui/react-switch':
+    specifier: ^1.2.6
+    version: 1.2.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-tabs':
+    specifier: ^1.1.13
+    version: 1.1.13(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-toast':
+    specifier: ^1.2.15
+    version: 1.2.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-toggle':
+    specifier: ^1.1.10
+    version: 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-toggle-group':
+    specifier: ^1.1.11
+    version: 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@radix-ui/react-tooltip':
+    specifier: ^1.2.8
+    version: 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  '@tanstack/react-query':
+    specifier: ^5.90.21
+    version: 5.90.21(react@19.2.4)
+  '@tanstack/react-table':
+    specifier: ^8.21.3
+    version: 8.21.3(react-dom@19.2.4)(react@19.2.4)
+  axios:
+    specifier: ^1.13.5
+    version: 1.13.5
+  class-variance-authority:
+    specifier: ^0.7.1
+    version: 0.7.1
+  clsx:
+    specifier: ^2.1.1
+    version: 2.1.1
+  cmdk:
+    specifier: ^1.1.1
+    version: 1.1.1(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  date-fns:
+    specifier: ^4.1.0
+    version: 4.1.0
+  embla-carousel-react:
+    specifier: ^8.6.0
+    version: 8.6.0(react@19.2.4)
+  input-otp:
+    specifier: ^1.4.2
+    version: 1.4.2(react-dom@19.2.4)(react@19.2.4)
+  lucide-react:
+    specifier: ^0.575.0
+    version: 0.575.0(react@19.2.4)
+  next:
+    specifier: 16.1.6
+    version: 16.1.6(@babel/core@7.29.0)(react-dom@19.2.4)(react@19.2.4)
+  next-themes:
+    specifier: ^0.4.6
+    version: 0.4.6(react-dom@19.2.4)(react@19.2.4)
+  qrcode:
+    specifier: ^1.5.4
+    version: 1.5.4
+  qrcode.react:
+    specifier: ^4.2.0
+    version: 4.2.0(react@19.2.4)
+  radix-ui:
+    specifier: ^1.4.3
+    version: 1.4.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  react:
+    specifier: ^19.2.4
+    version: 19.2.4
+  react-day-picker:
+    specifier: ^9.13.2
+    version: 9.13.2(react@19.2.4)
+  react-dom:
+    specifier: ^19.2.4
+    version: 19.2.4(react@19.2.4)
+  react-hook-form:
+    specifier: ^7.71.2
+    version: 7.71.2(react@19.2.4)
+  react-resizable-panels:
+    specifier: ^4.6.5
+    version: 4.6.5(react-dom@19.2.4)(react@19.2.4)
+  recharts:
+    specifier: ^3.7.0
+    version: 3.7.0(@types/react@19.2.14)(react-dom@19.2.4)(react-is@19.2.4)(react@19.2.4)(redux@5.0.1)
+  sonner:
+    specifier: ^2.0.7
+    version: 2.0.7(react-dom@19.2.4)(react@19.2.4)
+  tailwind-merge:
+    specifier: ^3.5.0
+    version: 3.5.0
+  tw-animate-css:
+    specifier: ^1.4.0
+    version: 1.4.0
+  vaul:
+    specifier: ^1.1.2
+    version: 1.1.2(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+  zod:
+    specifier: ^4.3.6
+    version: 4.3.6
+  zustand:
+    specifier: ^5.0.11
+    version: 5.0.11(@types/react@19.2.14)(react@19.2.4)
+
+devDependencies:
+  '@eslint/eslintrc':
+    specifier: ^3.3.3
+    version: 3.3.3
+  '@tailwindcss/postcss':
+    specifier: ^4.2.0
+    version: 4.2.0
+  '@tanstack/react-query-devtools':
+    specifier: ^5.91.3
+    version: 5.91.3(@tanstack/react-query@5.90.21)(react@19.2.4)
+  '@types/node':
+    specifier: ^25.3.0
+    version: 25.3.0
+  '@types/qrcode':
+    specifier: ^1.5.6
+    version: 1.5.6
+  '@types/react':
+    specifier: ^19.2.14
+    version: 19.2.14
+  '@types/react-dom':
+    specifier: ^19.2.3
+    version: 19.2.3(@types/react@19.2.14)
+  eslint:
+    specifier: ^10.0.1
+    version: 10.0.1
+  eslint-config-next:
+    specifier: 16.1.6
+    version: 16.1.6(@typescript-eslint/parser@8.56.0)(eslint@10.0.1)(typescript@5.9.3)
+  eslint-config-prettier:
+    specifier: ^10.1.8
+    version: 10.1.8(eslint@10.0.1)
+  eslint-plugin-prettier:
+    specifier: ^5.5.5
+    version: 5.5.5(eslint-config-prettier@10.1.8)(eslint@10.0.1)(prettier@3.8.1)
+  eslint-plugin-react:
+    specifier: ^7.37.5
+    version: 7.37.5(eslint@10.0.1)
+  prettier:
+    specifier: ^3.8.1
+    version: 3.8.1
+  prettier-plugin-tailwindcss:
+    specifier: ^0.7.2
+    version: 0.7.2(prettier@3.8.1)
+  tailwindcss:
+    specifier: ^4.2.0
+    version: 4.2.0
+  typescript:
+    specifier: ^5.9.3
+    version: 5.9.3
 
 packages:
-  '@alloc/quick-lru@5.2.0':
-    resolution:
-      {
-        integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==,
-      }
-    engines: { node: '>=10' }
 
-  '@babel/runtime@7.28.4':
-    resolution:
-      {
-        integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==,
-      }
-    engines: { node: '>=6.9.0' }
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: true
 
-  '@date-fns/tz@1.4.1':
-    resolution:
-      {
-        integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==,
-      }
+  /@babel/code-frame@7.29.0:
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@dnd-kit/accessibility@3.1.1':
-    resolution:
-      {
-        integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==,
-      }
+  /@babel/compat-data@7.29.0:
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/core@7.29.0:
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/generator@7.29.1:
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  /@babel/helper-compilation-targets@7.28.6:
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  /@babel/helper-globals@7.28.0:
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-module-imports@7.28.6:
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0):
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/helper-string-parser@7.27.1:
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.28.5:
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.27.1:
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helpers@7.28.6:
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  /@babel/parser@7.29.0:
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.29.0
+
+  /@babel/runtime@7.28.6:
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/template@7.28.6:
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  /@babel/traverse@7.29.0:
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  /@babel/types@7.29.0:
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  /@base-ui/react@1.2.0(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@base-ui/utils': 0.2.5(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.4)(react@19.2.4)
+      '@floating-ui/utils': 0.2.10
+      '@types/react': 19.2.14
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tabbable: 6.4.0
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    dev: false
+
+  /@base-ui/utils@0.2.5(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@floating-ui/utils': 0.2.10
+      '@types/react': 19.2.14
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      reselect: 5.1.1
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    dev: false
+
+  /@date-fns/tz@1.4.1:
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+    dev: false
+
+  /@dnd-kit/accessibility@3.1.1(react@19.2.4):
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
       react: '>=16.8.0'
+    dependencies:
+      react: 19.2.4
+      tslib: 2.8.1
+    dev: false
 
-  '@dnd-kit/core@6.3.1':
-    resolution:
-      {
-        integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==,
-      }
+  /@dnd-kit/core@6.3.1(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.4)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tslib: 2.8.1
+    dev: false
 
-  '@dnd-kit/modifiers@9.0.0':
-    resolution:
-      {
-        integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==,
-      }
+  /@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1)(react@19.2.4):
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
     peerDependencies:
       '@dnd-kit/core': ^6.3.0
       react: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.4)(react@19.2.4)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.4)
+      react: 19.2.4
+      tslib: 2.8.1
+    dev: false
 
-  '@dnd-kit/sortable@10.0.0':
-    resolution:
-      {
-        integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==,
-      }
+  /@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1)(react@19.2.4):
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
     peerDependencies:
       '@dnd-kit/core': ^6.3.0
       react: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.4)(react@19.2.4)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.4)
+      react: 19.2.4
+      tslib: 2.8.1
+    dev: false
 
-  '@dnd-kit/utilities@3.2.2':
-    resolution:
-      {
-        integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==,
-      }
+  /@dnd-kit/utilities@3.2.2(react@19.2.4):
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
     peerDependencies:
       react: '>=16.8.0'
+    dependencies:
+      react: 19.2.4
+      tslib: 2.8.1
+    dev: false
 
-  '@emnapi/core@1.8.1':
-    resolution:
-      {
-        integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==,
-      }
+  /@emnapi/core@1.8.1:
+    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    dev: true
+    optional: true
 
-  '@emnapi/runtime@1.8.1':
-    resolution:
-      {
-        integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==,
-      }
+  /@emnapi/runtime@1.8.1:
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    optional: true
 
-  '@emnapi/wasi-threads@1.1.0':
-    resolution:
-      {
-        integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==,
-      }
+  /@emnapi/wasi-threads@1.1.0:
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
 
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution:
-      {
-        integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==,
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+  /@eslint-community/eslint-utils@4.9.1(eslint@10.0.1):
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 10.0.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
 
-  '@eslint-community/eslint-utils@4.9.1':
-    resolution:
-      {
-        integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==,
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  /@eslint-community/regexpp@4.12.2:
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
 
-  '@eslint-community/regexpp@4.12.1':
-    resolution:
-      {
-        integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==,
-      }
-    engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
+  /@eslint/config-array@0.23.2:
+    resolution: {integrity: sha512-YF+fE6LV4v5MGWRGj7G404/OZzGNepVF8fxk7jqmqo3lrza7a0uUcDnROGRBG1WFC1omYUS/Wp1f42i0M+3Q3A==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@eslint/object-schema': 3.0.2
+      debug: 4.4.3
+      minimatch: 10.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@eslint-community/regexpp@4.12.2':
-    resolution:
-      {
-        integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==,
-      }
-    engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
+  /@eslint/config-helpers@0.5.2:
+    resolution: {integrity: sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@eslint/core': 1.1.0
+    dev: true
 
-  '@eslint/config-array@0.21.1':
-    resolution:
-      {
-        integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@eslint/core@1.1.0:
+    resolution: {integrity: sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@types/json-schema': 7.0.15
+    dev: true
 
-  '@eslint/config-helpers@0.4.1':
-    resolution:
-      {
-        integrity: sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@eslint/eslintrc@3.3.3:
+    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      ajv: 6.14.0
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.3
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@eslint/core@0.16.0':
-    resolution:
-      {
-        integrity: sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@eslint/object-schema@3.0.2:
+    resolution: {integrity: sha512-HOy56KJt48Bx8KmJ+XGQNSUMT/6dZee/M54XyUyuvTvPXJmsERRvBchsUVx1UMe1WwIH49XLAczNC7V2INsuUw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dev: true
 
-  '@eslint/eslintrc@3.3.3':
-    resolution:
-      {
-        integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@eslint/plugin-kit@0.6.0:
+    resolution: {integrity: sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@eslint/core': 1.1.0
+      levn: 0.4.1
+    dev: true
 
-  '@eslint/js@9.38.0':
-    resolution:
-      {
-        integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@floating-ui/core@1.7.4:
+    resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+    dev: false
 
-  '@eslint/object-schema@2.1.7':
-    resolution:
-      {
-        integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@floating-ui/dom@1.7.5:
+    resolution: {integrity: sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==}
+    dependencies:
+      '@floating-ui/core': 1.7.4
+      '@floating-ui/utils': 0.2.10
+    dev: false
 
-  '@eslint/plugin-kit@0.4.0':
-    resolution:
-      {
-        integrity: sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
-
-  '@floating-ui/core@1.7.3':
-    resolution:
-      {
-        integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==,
-      }
-
-  '@floating-ui/dom@1.7.4':
-    resolution:
-      {
-        integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==,
-      }
-
-  '@floating-ui/react-dom@2.1.6':
-    resolution:
-      {
-        integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==,
-      }
+  /@floating-ui/react-dom@2.1.7(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.7.5
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@floating-ui/utils@0.2.10':
-    resolution:
-      {
-        integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==,
-      }
+  /@floating-ui/utils@0.2.10:
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+    dev: false
 
-  '@hookform/resolvers@5.2.2':
-    resolution:
-      {
-        integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==,
-      }
+  /@hookform/resolvers@5.2.2(react-hook-form@7.71.2):
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
     peerDependencies:
       react-hook-form: ^7.55.0
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.71.2(react@19.2.4)
+    dev: false
 
-  '@humanfs/core@0.19.1':
-    resolution:
-      {
-        integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==,
-      }
-    engines: { node: '>=18.18.0' }
+  /@humanfs/core@0.19.1:
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+    dev: true
 
-  '@humanfs/node@0.16.7':
-    resolution:
-      {
-        integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==,
-      }
-    engines: { node: '>=18.18.0' }
+  /@humanfs/node@0.16.7:
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+    dev: true
 
-  '@humanwhocodes/module-importer@1.0.1':
-    resolution:
-      {
-        integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==,
-      }
-    engines: { node: '>=12.22' }
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
 
-  '@humanwhocodes/retry@0.4.3':
-    resolution:
-      {
-        integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==,
-      }
-    engines: { node: '>=18.18' }
+  /@humanwhocodes/retry@0.4.3:
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+    dev: true
 
-  '@img/colour@1.0.0':
-    resolution:
-      {
-        integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==,
-      }
-    engines: { node: '>=18' }
+  /@img/colour@1.0.0:
+    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+    engines: {node: '>=18'}
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-darwin-arm64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-darwin-arm64@0.34.5:
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-darwin-x64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-darwin-x64@0.34.5:
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==,
-      }
+  /@img/sharp-libvips-darwin-arm64@1.2.4:
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==,
-      }
+  /@img/sharp-libvips-darwin-x64@1.2.4:
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==,
-      }
+  /@img/sharp-libvips-linux-arm64@1.2.4:
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    resolution:
-      {
-        integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==,
-      }
+  /@img/sharp-libvips-linux-arm@1.2.4:
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==,
-      }
+  /@img/sharp-libvips-linux-ppc64@1.2.4:
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==,
-      }
+  /@img/sharp-libvips-linux-riscv64@1.2.4:
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    resolution:
-      {
-        integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==,
-      }
+  /@img/sharp-libvips-linux-s390x@1.2.4:
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==,
-      }
+  /@img/sharp-libvips-linux-x64@1.2.4:
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==,
-      }
+  /@img/sharp-libvips-linuxmusl-arm64@1.2.4:
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    resolution:
-      {
-        integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==,
-      }
+  /@img/sharp-libvips-linuxmusl-x64@1.2.4:
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-linux-arm64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linux-arm64@0.34.5:
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linux-arm@0.34.5':
-    resolution:
-      {
-        integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linux-arm@0.34.5:
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linux-ppc64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linux-ppc64@0.34.5:
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linux-riscv64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linux-riscv64@0.34.5:
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linux-s390x@0.34.5':
-    resolution:
-      {
-        integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linux-s390x@0.34.5:
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linux-x64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linux-x64@0.34.5:
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linuxmusl-arm64@0.34.5:
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-linuxmusl-x64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-linuxmusl-x64@0.34.5:
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    dev: false
+    optional: true
 
-  '@img/sharp-wasm32@0.34.5':
-    resolution:
-      {
-        integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-wasm32@0.34.5:
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@emnapi/runtime': 1.8.1
+    dev: false
+    optional: true
 
-  '@img/sharp-win32-arm64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-win32-arm64@0.34.5:
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-win32-ia32@0.34.5':
-    resolution:
-      {
-        integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-win32-ia32@0.34.5:
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@img/sharp-win32-x64@0.34.5':
-    resolution:
-      {
-        integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
+  /@img/sharp-win32-x64@0.34.5:
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution:
-      {
-        integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==,
-      }
+  /@jridgewell/gen-mapping@0.3.13:
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
 
-  '@jridgewell/remapping@2.3.5':
-    resolution:
-      {
-        integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==,
-      }
+  /@jridgewell/remapping@2.3.5:
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution:
-      {
-        integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==,
-      }
-    engines: { node: '>=6.0.0' }
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
 
-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution:
-      {
-        integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==,
-      }
+  /@jridgewell/sourcemap-codec@1.5.5:
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution:
-      {
-        integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==,
-      }
+  /@jridgewell/trace-mapping@0.3.31:
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@napi-rs/wasm-runtime@0.2.12':
-    resolution:
-      {
-        integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==,
-      }
+  /@napi-rs/wasm-runtime@0.2.12:
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+    requiresBuild: true
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    dev: true
+    optional: true
 
-  '@next/env@15.5.9':
-    resolution:
-      {
-        integrity: sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==,
-      }
+  /@next/env@16.1.6:
+    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
+    dev: false
 
-  '@next/eslint-plugin-next@15.5.9':
-    resolution:
-      {
-        integrity: sha512-kUzXx0iFiXw27cQAViE1yKWnz/nF8JzRmwgMRTMh8qMY90crNsdXJRh2e+R0vBpFR3kk1yvAR7wev7+fCCb79Q==,
-      }
+  /@next/eslint-plugin-next@16.1.6:
+    resolution: {integrity: sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==}
+    dependencies:
+      fast-glob: 3.3.1
+    dev: true
 
-  '@next/swc-darwin-arm64@15.5.7':
-    resolution:
-      {
-        integrity: sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-darwin-arm64@16.1.6:
+    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-darwin-x64@15.5.7':
-    resolution:
-      {
-        integrity: sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-darwin-x64@16.1.6:
+    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-linux-arm64-gnu@15.5.7':
-    resolution:
-      {
-        integrity: sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-linux-arm64-gnu@16.1.6:
+    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-linux-arm64-musl@15.5.7':
-    resolution:
-      {
-        integrity: sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-linux-arm64-musl@16.1.6:
+    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-linux-x64-gnu@15.5.7':
-    resolution:
-      {
-        integrity: sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-linux-x64-gnu@16.1.6:
+    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-linux-x64-musl@15.5.7':
-    resolution:
-      {
-        integrity: sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-linux-x64-musl@16.1.6:
+    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-win32-arm64-msvc@15.5.7':
-    resolution:
-      {
-        integrity: sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-win32-arm64-msvc@16.1.6:
+    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@next/swc-win32-x64-msvc@15.5.7':
-    resolution:
-      {
-        integrity: sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==,
-      }
-    engines: { node: '>= 10' }
+  /@next/swc-win32-x64-msvc@16.1.6:
+    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
 
-  '@nodelib/fs.scandir@2.1.5':
-    resolution:
-      {
-        integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==,
-      }
-    engines: { node: '>= 8' }
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
 
-  '@nodelib/fs.stat@2.0.5':
-    resolution:
-      {
-        integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==,
-      }
-    engines: { node: '>= 8' }
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
 
-  '@nodelib/fs.walk@1.2.8':
-    resolution:
-      {
-        integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==,
-      }
-    engines: { node: '>= 8' }
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+    dev: true
 
-  '@nolyfill/is-core-module@1.0.39':
-    resolution:
-      {
-        integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==,
-      }
-    engines: { node: '>=12.4.0' }
+  /@nolyfill/is-core-module@1.0.39:
+    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
+    engines: {node: '>=12.4.0'}
+    dev: true
 
-  '@pkgr/core@0.2.9':
-    resolution:
-      {
-        integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==,
-      }
-    engines: { node: ^12.20.0 || ^14.18.0 || >=16.0.0 }
+  /@pkgr/core@0.2.9:
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dev: true
 
-  '@radix-ui/number@1.1.1':
-    resolution:
-      {
-        integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==,
-      }
+  /@radix-ui/number@1.1.1:
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+    dev: false
 
-  '@radix-ui/primitive@1.1.3':
-    resolution:
-      {
-        integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==,
-      }
+  /@radix-ui/primitive@1.1.3:
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+    dev: false
 
-  '@radix-ui/react-alert-dialog@1.1.15':
-    resolution:
-      {
-        integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==,
-      }
+  /@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -840,12 +1030,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-arrow@1.1.7':
-    resolution:
-      {
-        integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==,
-      }
+  /@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -856,12 +1050,24 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-avatar@1.1.10':
-    resolution:
-      {
-        integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==,
-      }
+  /@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -872,12 +1078,21 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-checkbox@1.3.3':
-    resolution:
-      {
-        integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==,
-      }
+  /@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -888,12 +1103,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-collapsible@1.1.12':
-    resolution:
-      {
-        integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==,
-      }
+  /@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -904,12 +1123,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-collection@1.1.7':
-    resolution:
-      {
-        integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==,
-      }
+  /@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -920,24 +1143,20 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution:
-      {
-        integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context-menu@2.2.16':
-    resolution:
-      {
-        integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==,
-      }
+  /@radix-ui/react-avatar@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -948,24 +1167,20 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-context@1.1.2':
-    resolution:
-      {
-        integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dialog@1.1.15':
-    resolution:
-      {
-        integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==,
-      }
+  /@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -976,24 +1191,23 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-direction@1.1.1':
-    resolution:
-      {
-        integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dismissable-layer@1.1.11':
-    resolution:
-      {
-        integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==,
-      }
+  /@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1004,12 +1218,23 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-dropdown-menu@2.1.16':
-    resolution:
-      {
-        integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==,
-      }
+  /@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1020,24 +1245,32 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-focus-guards@1.1.3':
-    resolution:
-      {
-        integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==,
-      }
+  /@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
 
-  '@radix-ui/react-focus-scope@1.1.7':
-    resolution:
-      {
-        integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==,
-      }
+  /@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1048,12 +1281,47 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-hover-card@1.1.15':
-    resolution:
-      {
-        integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==,
-      }
+  /@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-context@1.1.3(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1064,24 +1332,42 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-id@1.1.1':
-    resolution:
-      {
-        integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==,
-      }
+  /@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
 
-  '@radix-ui/react-label@2.1.7':
-    resolution:
-      {
-        integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==,
-      }
+  /@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1092,12 +1378,20 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-menu@2.1.16':
-    resolution:
-      {
-        integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==,
-      }
+  /@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1108,12 +1402,35 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-menubar@1.1.16':
-    resolution:
-      {
-        integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==,
-      }
+  /@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1124,12 +1441,18 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-navigation-menu@1.2.14':
-    resolution:
-      {
-        integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==,
-      }
+  /@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1140,12 +1463,21 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-popover@1.1.15':
-    resolution:
-      {
-        integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==,
-      }
+  /@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1156,12 +1488,38 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-popper@1.2.8':
-    resolution:
-      {
-        integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==,
-      }
+  /@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1172,12 +1530,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-portal@1.1.9':
-    resolution:
-      {
-        integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==,
-      }
+  /@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1188,12 +1550,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-presence@1.1.5':
-    resolution:
-      {
-        integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==,
-      }
+  /@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1204,12 +1570,33 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-primitive@2.1.3':
-    resolution:
-      {
-        integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==,
-      }
+  /@radix-ui/react-menubar@1.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1220,12 +1607,25 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-progress@1.1.7':
-    resolution:
-      {
-        integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==,
-      }
+  /@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1236,12 +1636,29 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-radio-group@1.3.8':
-    resolution:
-      {
-        integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==,
-      }
+  /@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1252,12 +1669,27 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-roving-focus@1.1.11':
-    resolution:
-      {
-        integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==,
-      }
+  /@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1268,12 +1700,23 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-scroll-area@1.2.10':
-    resolution:
-      {
-        integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==,
-      }
+  /@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1284,12 +1727,30 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-select@2.2.6':
-    resolution:
-      {
-        integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==,
-      }
+  /@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1300,12 +1761,25 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/rect': 1.1.1
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-separator@1.1.7':
-    resolution:
-      {
-        integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==,
-      }
+  /@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1316,24 +1790,17 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-slot@1.2.3':
-    resolution:
-      {
-        integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-switch@1.2.6':
-    resolution:
-      {
-        integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==,
-      }
+  /@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1344,12 +1811,17 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-tabs@1.1.13':
-    resolution:
-      {
-        integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==,
-      }
+  /@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1360,12 +1832,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-toast@1.2.15':
-    resolution:
-      {
-        integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==,
-      }
+  /@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1376,12 +1852,16 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-toggle-group@1.1.11':
-    resolution:
-      {
-        integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==,
-      }
+  /@radix-ui/react-progress@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1392,12 +1872,17 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-toggle@1.1.10':
-    resolution:
-      {
-        integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==,
-      }
+  /@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1408,12 +1893,17 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-tooltip@1.2.8':
-    resolution:
-      {
-        integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==,
-      }
+  /@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1424,120 +1914,25 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/react-use-callback-ref@1.1.1':
-    resolution:
-      {
-        integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.2':
-    resolution:
-      {
-        integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.2':
-    resolution:
-      {
-        integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.1.1':
-    resolution:
-      {
-        integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-is-hydrated@0.1.0':
-    resolution:
-      {
-        integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution:
-      {
-        integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-previous@1.1.1':
-    resolution:
-      {
-        integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.1':
-    resolution:
-      {
-        integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.1':
-    resolution:
-      {
-        integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.3':
-    resolution:
-      {
-        integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==,
-      }
+  /@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
@@ -1548,131 +1943,664 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@radix-ui/rect@1.1.1':
-    resolution:
-      {
-        integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==,
-      }
+  /@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@rtsao/scc@1.1.0':
-    resolution:
-      {
-        integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==,
-      }
+  /@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    dev: false
 
-  '@rushstack/eslint-patch@1.15.0':
-    resolution:
-      {
-        integrity: sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==,
-      }
+  /@radix-ui/react-separator@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@standard-schema/utils@0.3.0':
-    resolution:
-      {
-        integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==,
-      }
+  /@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@swc/helpers@0.5.15':
-    resolution:
-      {
-        integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==,
-      }
+  /@radix-ui/react-slider@1.3.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@tailwindcss/node@4.1.18':
-    resolution:
-      {
-        integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==,
-      }
+  /@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
 
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    resolution:
-      {
-        integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==,
-      }
-    engines: { node: '>= 10' }
+  /@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-toast@1.2.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-toolbar@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    dev: false
+
+  /@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-previous@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
+
+  /@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /@radix-ui/rect@1.1.1:
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+    dev: false
+
+  /@reduxjs/toolkit@2.11.2(react-redux@9.2.0)(react@19.2.4):
+    resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@standard-schema/utils': 0.3.0
+      immer: 11.1.4
+      react: 19.2.4
+      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1)
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    dev: false
+
+  /@rtsao/scc@1.1.0:
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+    dev: true
+
+  /@standard-schema/spec@1.1.0:
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+    dev: false
+
+  /@standard-schema/utils@0.3.0:
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+    dev: false
+
+  /@swc/helpers@0.5.15:
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
+  /@tailwindcss/node@4.2.0:
+    resolution: {integrity: sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==}
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.0
+    dev: true
+
+  /@tailwindcss/oxide-android-arm64@4.2.0:
+    resolution: {integrity: sha512-F0QkHAVaW/JNBWl4CEKWdZ9PMb0khw5DCELAOnu+RtjAfx5Zgw+gqCHFvqg3AirU1IAd181fwOtJQ5I8Yx5wtw==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    resolution:
-      {
-        integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-darwin-arm64@4.2.0:
+    resolution: {integrity: sha512-I0QylkXsBsJMZ4nkUNSR04p6+UptjcwhcVo3Zu828ikiEqHjVmQL9RuQ6uT/cVIiKpvtVA25msu/eRV97JeNSA==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    resolution:
-      {
-        integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-darwin-x64@4.2.0:
+    resolution: {integrity: sha512-6TmQIn4p09PBrmnkvbYQ0wbZhLtbaksCDx7Y7R3FYYx0yxNA7xg5KP7dowmQ3d2JVdabIHvs3Hx4K3d5uCf8xg==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    resolution:
-      {
-        integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-freebsd-x64@4.2.0:
+    resolution: {integrity: sha512-qBudxDvAa2QwGlq9y7VIzhTvp2mLJ6nD/G8/tI70DCDoneaUeLWBJaPcbfzqRIWraj+o969aDQKvKW9dvkUizw==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    resolution:
-      {
-        integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-linux-arm-gnueabihf@4.2.0:
+    resolution: {integrity: sha512-7XKkitpy5NIjFZNUQPeUyNJNJn1CJeV7rmMR+exHfTuOsg8rxIO9eNV5TSEnqRcaOK77zQpsyUkBWmPy8FgdSg==}
+    engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    resolution:
-      {
-        integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-linux-arm64-gnu@4.2.0:
+    resolution: {integrity: sha512-Mff5a5Q3WoQR01pGU1gr29hHM1N93xYrKkGXfPw/aRtK4bOc331Ho4Tgfsm5WDGvpevqMpdlkCojT3qlCQbCpA==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    resolution:
-      {
-        integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-linux-arm64-musl@4.2.0:
+    resolution: {integrity: sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    resolution:
-      {
-        integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-linux-x64-gnu@4.2.0:
+    resolution: {integrity: sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    resolution:
-      {
-        integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-linux-x64-musl@4.2.0:
+    resolution: {integrity: sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    resolution:
-      {
-        integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==,
-      }
-    engines: { node: '>=14.0.0' }
+  /@tailwindcss/oxide-wasm32-wasi@4.2.0:
+    resolution: {integrity: sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==}
+    engines: {node: '>=14.0.0'}
     cpu: [wasm32]
+    requiresBuild: true
+    dev: true
+    optional: true
     bundledDependencies:
       - '@napi-rs/wasm-runtime'
       - '@emnapi/core'
@@ -1681,1094 +2609,1245 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    resolution:
-      {
-        integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-win32-arm64-msvc@4.2.0:
+    resolution: {integrity: sha512-2UU/15y1sWDEDNJXxEIrfWKC2Yb4YgIW5Xz2fKFqGzFWfoMHWFlfa1EJlGO2Xzjkq/tvSarh9ZTjvbxqWvLLXA==}
+    engines: {node: '>= 20'}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    resolution:
-      {
-        integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide-win32-x64-msvc@4.2.0:
+    resolution: {integrity: sha512-CrFadmFoc+z76EV6LPG1jx6XceDsaCG3lFhyLNo/bV9ByPrE+FnBPckXQVP4XRkN76h3Fjt/a+5Er/oA/nCBvQ==}
+    engines: {node: '>= 20'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@tailwindcss/oxide@4.1.18':
-    resolution:
-      {
-        integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==,
-      }
-    engines: { node: '>= 10' }
+  /@tailwindcss/oxide@4.2.0:
+    resolution: {integrity: sha512-AZqQzADaj742oqn2xjl5JbIOzZB/DGCYF/7bpvhA8KvjUj9HJkag6bBuwZvH1ps6dfgxNHyuJVlzSr2VpMgdTQ==}
+    engines: {node: '>= 20'}
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.0
+      '@tailwindcss/oxide-darwin-arm64': 4.2.0
+      '@tailwindcss/oxide-darwin-x64': 4.2.0
+      '@tailwindcss/oxide-freebsd-x64': 4.2.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.0
+    dev: true
 
-  '@tailwindcss/postcss@4.1.18':
-    resolution:
-      {
-        integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==,
-      }
+  /@tailwindcss/postcss@4.2.0:
+    resolution: {integrity: sha512-u6YBacGpOm/ixPfKqfgrJEjMfrYmPD7gEFRoygS/hnQaRtV0VCBdpkx5Ouw9pnaLRwwlgGCuJw8xLpaR0hOrQg==}
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.0
+      '@tailwindcss/oxide': 4.2.0
+      postcss: 8.5.6
+      tailwindcss: 4.2.0
+    dev: true
 
-  '@tanstack/query-core@5.90.16':
-    resolution:
-      {
-        integrity: sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww==,
-      }
+  /@tanstack/query-core@5.90.20:
+    resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
 
-  '@tanstack/query-devtools@5.92.0':
-    resolution:
-      {
-        integrity: sha512-N8D27KH1vEpVacvZgJL27xC6yPFUy0Zkezn5gnB3L3gRCxlDeSuiya7fKge8Y91uMTnC8aSxBQhcK6ocY7alpQ==,
-      }
+  /@tanstack/query-devtools@5.93.0:
+    resolution: {integrity: sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==}
+    dev: true
 
-  '@tanstack/react-query-devtools@5.91.2':
-    resolution:
-      {
-        integrity: sha512-ZJ1503ay5fFeEYFUdo7LMNFzZryi6B0Cacrgr2h1JRkvikK1khgIq6Nq2EcblqEdIlgB/r7XDW8f8DQ89RuUgg==,
-      }
+  /@tanstack/react-query-devtools@5.91.3(@tanstack/react-query@5.90.21)(react@19.2.4):
+    resolution: {integrity: sha512-nlahjMtd/J1h7IzOOfqeyDh5LNfG0eULwlltPEonYy0QL+nqrBB+nyzJfULV+moL7sZyxc2sHdNJki+vLA9BSA==}
     peerDependencies:
-      '@tanstack/react-query': ^5.90.14
+      '@tanstack/react-query': ^5.90.20
       react: ^18 || ^19
+    dependencies:
+      '@tanstack/query-devtools': 5.93.0
+      '@tanstack/react-query': 5.90.21(react@19.2.4)
+      react: 19.2.4
+    dev: true
 
-  '@tanstack/react-query@5.90.16':
-    resolution:
-      {
-        integrity: sha512-bpMGOmV4OPmif7TNMteU/Ehf/hoC0Kf98PDc0F4BZkFrEapRMEqI/V6YS0lyzwSV6PQpY1y4xxArUIfBW5LVxQ==,
-      }
+  /@tanstack/react-query@5.90.21(react@19.2.4):
+    resolution: {integrity: sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg==}
     peerDependencies:
       react: ^18 || ^19
+    dependencies:
+      '@tanstack/query-core': 5.90.20
+      react: 19.2.4
 
-  '@tanstack/react-table@8.21.3':
-    resolution:
-      {
-        integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==,
-      }
-    engines: { node: '>=12' }
+  /@tanstack/react-table@8.21.3(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
     peerDependencies:
       react: '>=16.8'
       react-dom: '>=16.8'
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  '@tanstack/table-core@8.21.3':
-    resolution:
-      {
-        integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==,
-      }
-    engines: { node: '>=12' }
+  /@tanstack/table-core@8.21.3:
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+    dev: false
 
-  '@tybys/wasm-util@0.10.1':
-    resolution:
-      {
-        integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==,
-      }
+  /@tybys/wasm-util@0.10.1:
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+    requiresBuild: true
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+    optional: true
 
-  '@types/d3-array@3.2.2':
-    resolution:
-      {
-        integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==,
-      }
+  /@types/d3-array@3.2.2:
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+    dev: false
 
-  '@types/d3-color@3.1.3':
-    resolution:
-      {
-        integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==,
-      }
+  /@types/d3-color@3.1.3:
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+    dev: false
 
-  '@types/d3-ease@3.0.2':
-    resolution:
-      {
-        integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==,
-      }
+  /@types/d3-ease@3.0.2:
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+    dev: false
 
-  '@types/d3-interpolate@3.0.4':
-    resolution:
-      {
-        integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==,
-      }
+  /@types/d3-interpolate@3.0.4:
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+    dependencies:
+      '@types/d3-color': 3.1.3
+    dev: false
 
-  '@types/d3-path@3.1.1':
-    resolution:
-      {
-        integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==,
-      }
+  /@types/d3-path@3.1.1:
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+    dev: false
 
-  '@types/d3-scale@4.0.9':
-    resolution:
-      {
-        integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==,
-      }
+  /@types/d3-scale@4.0.9:
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+    dependencies:
+      '@types/d3-time': 3.0.4
+    dev: false
 
-  '@types/d3-shape@3.1.7':
-    resolution:
-      {
-        integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==,
-      }
+  /@types/d3-shape@3.1.8:
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+    dependencies:
+      '@types/d3-path': 3.1.1
+    dev: false
 
-  '@types/d3-time@3.0.4':
-    resolution:
-      {
-        integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==,
-      }
+  /@types/d3-time@3.0.4:
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+    dev: false
 
-  '@types/d3-timer@3.0.2':
-    resolution:
-      {
-        integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==,
-      }
+  /@types/d3-timer@3.0.2:
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+    dev: false
 
-  '@types/estree@1.0.8':
-    resolution:
-      {
-        integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==,
-      }
+  /@types/esrecurse@4.3.1:
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+    dev: true
 
-  '@types/json-schema@7.0.15':
-    resolution:
-      {
-        integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==,
-      }
+  /@types/estree@1.0.8:
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+    dev: true
 
-  '@types/json5@0.0.29':
-    resolution:
-      {
-        integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==,
-      }
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
 
-  '@types/node@20.19.22':
-    resolution:
-      {
-        integrity: sha512-hRnu+5qggKDSyWHlnmThnUqg62l29Aj/6vcYgUaSFL9oc7DVjeWEQN3PRgdSc6F8d9QRMWkf36CLMch1Do/+RQ==,
-      }
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
 
-  '@types/qrcode@1.5.6':
-    resolution:
-      {
-        integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==,
-      }
+  /@types/node@25.3.0:
+    resolution: {integrity: sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==}
+    dependencies:
+      undici-types: 7.18.2
+    dev: true
 
-  '@types/react-dom@19.2.2':
-    resolution:
-      {
-        integrity: sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==,
-      }
+  /@types/qrcode@1.5.6:
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
+    dependencies:
+      '@types/node': 25.3.0
+    dev: true
+
+  /@types/react-dom@19.2.3(@types/react@19.2.14):
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
       '@types/react': ^19.2.0
+    dependencies:
+      '@types/react': 19.2.14
 
-  '@types/react@19.2.2':
-    resolution:
-      {
-        integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==,
-      }
+  /@types/react@19.2.14:
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+    dependencies:
+      csstype: 3.2.3
 
-  '@typescript-eslint/eslint-plugin@8.52.0':
-    resolution:
-      {
-        integrity: sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@types/use-sync-external-store@0.0.6:
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+    dev: false
+
+  /@typescript-eslint/eslint-plugin@8.56.0(@typescript-eslint/parser@8.56.0)(eslint@10.0.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.52.0
-      eslint: ^8.57.0 || ^9.0.0
+      '@typescript-eslint/parser': ^8.56.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/type-utils': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      eslint: 10.0.1
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@typescript-eslint/parser@8.52.0':
-    resolution:
-      {
-        integrity: sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/parser@8.56.0(eslint@10.0.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      debug: 4.4.3
+      eslint: 10.0.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@typescript-eslint/project-service@8.52.0':
-    resolution:
-      {
-        integrity: sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/project-service@8.56.0(typescript@5.9.3):
+    resolution: {integrity: sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.0
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@typescript-eslint/scope-manager@8.52.0':
-    resolution:
-      {
-        integrity: sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/scope-manager@8.56.0:
+    resolution: {integrity: sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/visitor-keys': 8.56.0
+    dev: true
 
-  '@typescript-eslint/tsconfig-utils@8.52.0':
-    resolution:
-      {
-        integrity: sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/tsconfig-utils@8.56.0(typescript@5.9.3):
+    resolution: {integrity: sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      typescript: 5.9.3
+    dev: true
 
-  '@typescript-eslint/type-utils@8.52.0':
-    resolution:
-      {
-        integrity: sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/type-utils@8.56.0(eslint@10.0.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 10.0.1
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@typescript-eslint/types@8.52.0':
-    resolution:
-      {
-        integrity: sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/types@8.56.0:
+    resolution: {integrity: sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
 
-  '@typescript-eslint/typescript-estree@8.52.0':
-    resolution:
-      {
-        integrity: sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/typescript-estree@8.56.0(typescript@5.9.3):
+    resolution: {integrity: sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/project-service': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/visitor-keys': 8.56.0
+      debug: 4.4.3
+      minimatch: 9.0.6
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@typescript-eslint/utils@8.52.0':
-    resolution:
-      {
-        integrity: sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/utils@8.56.0(eslint@10.0.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.1)
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      eslint: 10.0.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  '@typescript-eslint/visitor-keys@8.52.0':
-    resolution:
-      {
-        integrity: sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /@typescript-eslint/visitor-keys@8.56.0:
+    resolution: {integrity: sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      eslint-visitor-keys: 5.0.1
+    dev: true
 
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    resolution:
-      {
-        integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==,
-      }
+  /@unrs/resolver-binding-android-arm-eabi@1.11.1:
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
     cpu: [arm]
     os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    resolution:
-      {
-        integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==,
-      }
+  /@unrs/resolver-binding-android-arm64@1.11.1:
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
     cpu: [arm64]
     os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    resolution:
-      {
-        integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==,
-      }
+  /@unrs/resolver-binding-darwin-arm64@1.11.1:
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    resolution:
-      {
-        integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==,
-      }
+  /@unrs/resolver-binding-darwin-x64@1.11.1:
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    resolution:
-      {
-        integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==,
-      }
+  /@unrs/resolver-binding-freebsd-x64@1.11.1:
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
     cpu: [x64]
     os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    resolution:
-      {
-        integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==,
-      }
+  /@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1:
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    resolution:
-      {
-        integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==,
-      }
+  /@unrs/resolver-binding-linux-arm-musleabihf@1.11.1:
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    resolution:
-      {
-        integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==,
-      }
+  /@unrs/resolver-binding-linux-arm64-gnu@1.11.1:
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    resolution:
-      {
-        integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==,
-      }
+  /@unrs/resolver-binding-linux-arm64-musl@1.11.1:
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    resolution:
-      {
-        integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==,
-      }
+  /@unrs/resolver-binding-linux-ppc64-gnu@1.11.1:
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    resolution:
-      {
-        integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==,
-      }
+  /@unrs/resolver-binding-linux-riscv64-gnu@1.11.1:
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    resolution:
-      {
-        integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==,
-      }
+  /@unrs/resolver-binding-linux-riscv64-musl@1.11.1:
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    resolution:
-      {
-        integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==,
-      }
+  /@unrs/resolver-binding-linux-s390x-gnu@1.11.1:
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    resolution:
-      {
-        integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==,
-      }
+  /@unrs/resolver-binding-linux-x64-gnu@1.11.1:
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    resolution:
-      {
-        integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==,
-      }
+  /@unrs/resolver-binding-linux-x64-musl@1.11.1:
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
-    resolution:
-      {
-        integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==,
-      }
-    engines: { node: '>=14.0.0' }
+  /@unrs/resolver-binding-wasm32-wasi@1.11.1:
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
     cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    resolution:
-      {
-        integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==,
-      }
+  /@unrs/resolver-binding-win32-arm64-msvc@1.11.1:
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    resolution:
-      {
-        integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==,
-      }
+  /@unrs/resolver-binding-win32-ia32-msvc@1.11.1:
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
     cpu: [ia32]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    resolution:
-      {
-        integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==,
-      }
+  /@unrs/resolver-binding-win32-x64-msvc@1.11.1:
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  acorn-jsx@5.3.2:
-    resolution:
-      {
-        integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==,
-      }
+  /acorn-jsx@5.3.2(acorn@8.16.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.16.0
+    dev: true
 
-  acorn@8.15.0:
-    resolution:
-      {
-        integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==,
-      }
-    engines: { node: '>=0.4.0' }
+  /acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: false
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
+  /aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+    dev: true
+
+  /array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+    dev: true
+
+  /array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+    dev: true
+
+  /array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+    dev: true
+
+  /array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-shim-unscopables: 1.1.0
+    dev: true
+
+  /array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-shim-unscopables: 1.1.0
+    dev: true
+
+  /array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+    dev: true
+
+  /arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+    dev: true
+
+  /ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+    dev: true
+
+  /async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      possible-typed-array-names: 1.1.0
+    dev: true
+
+  /axe-core@4.11.1:
+    resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /axios@1.13.5:
+    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
+  /axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+    dev: true
+
+  /baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
-  ajv@6.12.6:
-    resolution:
-      {
-        integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==,
-      }
+  /brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
 
-  ansi-regex@5.0.1:
-    resolution:
-      {
-        integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==,
-      }
-    engines: { node: '>=8' }
+  /brace-expansion@5.0.3:
+    resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
+    engines: {node: 18 || 20 || >=22}
+    dependencies:
+      balanced-match: 4.0.4
+    dev: true
 
-  ansi-styles@4.3.0:
-    resolution:
-      {
-        integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==,
-      }
-    engines: { node: '>=8' }
+  /braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.1.1
+    dev: true
 
-  argparse@2.0.1:
-    resolution:
-      {
-        integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==,
-      }
+  /browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001772
+      electron-to-chromium: 1.5.302
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
-  aria-hidden@1.2.6:
-    resolution:
-      {
-        integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==,
-      }
-    engines: { node: '>=10' }
+  /call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
 
-  aria-query@5.3.2:
-    resolution:
-      {
-        integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==,
-      }
-    engines: { node: '>= 0.4' }
+  /call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+    dev: true
 
-  array-buffer-byte-length@1.0.2:
-    resolution:
-      {
-        integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==,
-      }
-    engines: { node: '>= 0.4' }
+  /call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+    dev: true
 
-  array-includes@3.1.9:
-    resolution:
-      {
-        integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+    dev: true
 
-  array.prototype.findlast@1.2.5:
-    resolution:
-      {
-        integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+    dev: false
 
-  array.prototype.findlastindex@1.2.6:
-    resolution:
-      {
-        integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /caniuse-lite@1.0.30001772:
+    resolution: {integrity: sha512-mIwLZICj+ntVTw4BT2zfp+yu/AqV6GMKfJVJMx3MwPxs+uk/uj2GLl2dH8LQbjiLDX66amCga5nKFyDgRR43kg==}
 
-  array.prototype.flat@1.3.3:
-    resolution:
-      {
-        integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==,
-      }
-    engines: { node: '>= 0.4' }
+  /class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+    dependencies:
+      clsx: 2.1.1
+    dev: false
 
-  array.prototype.flatmap@1.3.3:
-    resolution:
-      {
-        integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==,
-      }
-    engines: { node: '>= 0.4' }
+  /client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
 
-  array.prototype.tosorted@1.1.4:
-    resolution:
-      {
-        integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==,
-      }
-    engines: { node: '>= 0.4' }
+  /cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+    dev: false
 
-  arraybuffer.prototype.slice@1.0.4:
-    resolution:
-      {
-        integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+    dev: false
 
-  ast-types-flow@0.0.8:
-    resolution:
-      {
-        integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==,
-      }
-
-  async-function@1.0.0:
-    resolution:
-      {
-        integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  asynckit@0.4.0:
-    resolution:
-      {
-        integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==,
-      }
-
-  available-typed-arrays@1.0.7:
-    resolution:
-      {
-        integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  axe-core@4.11.0:
-    resolution:
-      {
-        integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==,
-      }
-    engines: { node: '>=4' }
-
-  axios@1.13.2:
-    resolution:
-      {
-        integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==,
-      }
-
-  axobject-query@4.1.0:
-    resolution:
-      {
-        integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  balanced-match@1.0.2:
-    resolution:
-      {
-        integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==,
-      }
-
-  brace-expansion@1.1.12:
-    resolution:
-      {
-        integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==,
-      }
-
-  brace-expansion@2.0.2:
-    resolution:
-      {
-        integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==,
-      }
-
-  braces@3.0.3:
-    resolution:
-      {
-        integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==,
-      }
-    engines: { node: '>=8' }
-
-  call-bind-apply-helpers@1.0.2:
-    resolution:
-      {
-        integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  call-bind@1.0.8:
-    resolution:
-      {
-        integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==,
-      }
-    engines: { node: '>= 0.4' }
-
-  call-bound@1.0.4:
-    resolution:
-      {
-        integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  callsites@3.1.0:
-    resolution:
-      {
-        integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==,
-      }
-    engines: { node: '>=6' }
-
-  camelcase@5.3.1:
-    resolution:
-      {
-        integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==,
-      }
-    engines: { node: '>=6' }
-
-  caniuse-lite@1.0.30001762:
-    resolution:
-      {
-        integrity: sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==,
-      }
-
-  chalk@4.1.2:
-    resolution:
-      {
-        integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==,
-      }
-    engines: { node: '>=10' }
-
-  class-variance-authority@0.7.1:
-    resolution:
-      {
-        integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==,
-      }
-
-  client-only@0.0.1:
-    resolution:
-      {
-        integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==,
-      }
-
-  cliui@6.0.0:
-    resolution:
-      {
-        integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==,
-      }
-
-  clsx@2.1.1:
-    resolution:
-      {
-        integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==,
-      }
-    engines: { node: '>=6' }
-
-  cmdk@1.1.1:
-    resolution:
-      {
-        integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==,
-      }
+  /cmdk@1.1.1(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
 
-  color-convert@2.0.1:
-    resolution:
-      {
-        integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==,
-      }
-    engines: { node: '>=7.0.0' }
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: false
 
-  color-name@1.1.4:
-    resolution:
-      {
-        integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==,
-      }
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: false
 
-  combined-stream@1.0.8:
-    resolution:
-      {
-        integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==,
-      }
-    engines: { node: '>= 0.8' }
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
 
-  concat-map@0.0.1:
-    resolution:
-      {
-        integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==,
-      }
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
 
-  cross-spawn@7.0.6:
-    resolution:
-      {
-        integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==,
-      }
-    engines: { node: '>= 8' }
+  /convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  csstype@3.1.3:
-    resolution:
-      {
-        integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==,
-      }
+  /cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
 
-  d3-array@3.2.4:
-    resolution:
-      {
-        integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==,
-      }
-    engines: { node: '>=12' }
+  /csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  d3-color@3.1.0:
-    resolution:
-      {
-        integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==,
-      }
-    engines: { node: '>=12' }
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
 
-  d3-ease@3.0.1:
-    resolution:
-      {
-        integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==,
-      }
-    engines: { node: '>=12' }
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
 
-  d3-format@3.1.0:
-    resolution:
-      {
-        integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==,
-      }
-    engines: { node: '>=12' }
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
 
-  d3-interpolate@3.0.1:
-    resolution:
-      {
-        integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==,
-      }
-    engines: { node: '>=12' }
+  /d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+    dev: false
 
-  d3-path@3.1.0:
-    resolution:
-      {
-        integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==,
-      }
-    engines: { node: '>=12' }
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
 
-  d3-scale@4.0.2:
-    resolution:
-      {
-        integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==,
-      }
-    engines: { node: '>=12' }
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
 
-  d3-shape@3.2.0:
-    resolution:
-      {
-        integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==,
-      }
-    engines: { node: '>=12' }
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
 
-  d3-time-format@4.1.0:
-    resolution:
-      {
-        integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==,
-      }
-    engines: { node: '>=12' }
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
 
-  d3-time@3.1.0:
-    resolution:
-      {
-        integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==,
-      }
-    engines: { node: '>=12' }
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
 
-  d3-timer@3.0.1:
-    resolution:
-      {
-        integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==,
-      }
-    engines: { node: '>=12' }
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
 
-  damerau-levenshtein@1.0.8:
-    resolution:
-      {
-        integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==,
-      }
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
 
-  data-view-buffer@1.0.2:
-    resolution:
-      {
-        integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+    dev: true
 
-  data-view-byte-length@1.0.2:
-    resolution:
-      {
-        integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+    dev: true
 
-  data-view-byte-offset@1.0.1:
-    resolution:
-      {
-        integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+    dev: true
 
-  date-fns-jalali@4.1.0-0:
-    resolution:
-      {
-        integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==,
-      }
+  /data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+    dev: true
 
-  date-fns@4.1.0:
-    resolution:
-      {
-        integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==,
-      }
+  /date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+    dev: false
 
-  debug@3.2.7:
-    resolution:
-      {
-        integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==,
-      }
+  /date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+    dev: false
+
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
       supports-color:
         optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
 
-  debug@4.4.3:
-    resolution:
-      {
-        integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==,
-      }
-    engines: { node: '>=6.0' }
+  /debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
       supports-color:
         optional: true
+    dependencies:
+      ms: 2.1.3
 
-  decamelize@1.2.0:
-    resolution:
-      {
-        integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==,
-      }
-    engines: { node: '>=0.10.0' }
+  /decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
 
-  decimal.js-light@2.5.1:
-    resolution:
-      {
-        integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==,
-      }
+  /decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+    dev: false
 
-  deep-is@0.1.4:
-    resolution:
-      {
-        integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==,
-      }
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
 
-  define-data-property@1.1.4:
-    resolution:
-      {
-        integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==,
-      }
-    engines: { node: '>= 0.4' }
+  /define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+    dev: true
 
-  define-properties@1.2.1:
-    resolution:
-      {
-        integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==,
-      }
-    engines: { node: '>= 0.4' }
+  /define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+    dev: true
 
-  delayed-stream@1.0.0:
-    resolution:
-      {
-        integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==,
-      }
-    engines: { node: '>=0.4.0' }
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
 
-  detect-libc@2.1.2:
-    resolution:
-      {
-        integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==,
-      }
-    engines: { node: '>=8' }
+  /detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution:
-      {
-        integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==,
-      }
+  /detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
 
-  dijkstrajs@1.0.3:
-    resolution:
-      {
-        integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==,
-      }
+  /dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+    dev: false
 
-  doctrine@2.1.0:
-    resolution:
-      {
-        integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==,
-      }
-    engines: { node: '>=0.10.0' }
+  /doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
 
-  dom-helpers@5.2.1:
-    resolution:
-      {
-        integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==,
-      }
+  /dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
 
-  dunder-proto@1.0.1:
-    resolution:
-      {
-        integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==,
-      }
-    engines: { node: '>= 0.4' }
+  /electron-to-chromium@1.5.302:
+    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
 
-  embla-carousel-react@8.6.0:
-    resolution:
-      {
-        integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==,
-      }
+  /embla-carousel-react@8.6.0(react@19.2.4):
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.2.4
+    dev: false
 
-  embla-carousel-reactive-utils@8.6.0:
-    resolution:
-      {
-        integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==,
-      }
+  /embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
     peerDependencies:
       embla-carousel: 8.6.0
+    dependencies:
+      embla-carousel: 8.6.0
+    dev: false
 
-  embla-carousel@8.6.0:
-    resolution:
-      {
-        integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==,
-      }
+  /embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+    dev: false
 
-  emoji-regex@8.0.0:
-    resolution:
-      {
-        integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==,
-      }
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: false
 
-  emoji-regex@9.2.2:
-    resolution:
-      {
-        integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==,
-      }
+  /emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    dev: true
 
-  enhanced-resolve@5.18.4:
-    resolution:
-      {
-        integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==,
-      }
-    engines: { node: '>=10.13.0' }
+  /enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+    dev: true
 
-  es-abstract@1.24.0:
-    resolution:
-      {
-        integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-abstract@1.24.1:
+    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.20
+    dev: true
 
-  es-abstract@1.24.1:
-    resolution:
-      {
-        integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
 
-  es-define-property@1.0.1:
-    resolution:
-      {
-        integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
 
-  es-errors@1.3.0:
-    resolution:
-      {
-        integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-iterator-helpers@1.2.2:
+    resolution: {integrity: sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.1.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+    dev: true
 
-  es-iterator-helpers@1.2.1:
-    resolution:
-      {
-        integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
 
-  es-object-atoms@1.1.1:
-    resolution:
-      {
-        integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
 
-  es-set-tostringtag@2.1.0:
-    resolution:
-      {
-        integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
 
-  es-shim-unscopables@1.1.0:
-    resolution:
-      {
-        integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+    dev: true
 
-  es-to-primitive@1.3.0:
-    resolution:
-      {
-        integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==,
-      }
-    engines: { node: '>= 0.4' }
+  /es-toolkit@1.44.0:
+    resolution: {integrity: sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==}
+    dev: false
 
-  escape-string-regexp@4.0.0:
-    resolution:
-      {
-        integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==,
-      }
-    engines: { node: '>=10' }
+  /escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
 
-  eslint-config-next@15.5.9:
-    resolution:
-      {
-        integrity: sha512-852JYI3NkFNzW8CqsMhI0K2CDRxTObdZ2jQJj5CtpEaOkYHn13107tHpNuD/h0WRpU4FAbCdUaxQsrfBtNK9Kw==,
-      }
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-config-next@16.1.6(@typescript-eslint/parser@8.56.0)(eslint@10.0.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-vKq40io2B0XtkkNDYyleATwblNt8xuh3FWp8SpSz3pt7P01OkBFlKsJZ2mWt5WsCySlDQLckb1zMY9yE9Qy0LA==}
     peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
+      eslint: '>=9.0.0'
       typescript: '>=3.3.1'
     peerDependenciesMeta:
       typescript:
         optional: true
+    dependencies:
+      '@next/eslint-plugin-next': 16.1.6
+      eslint: 10.0.1
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.0)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.1)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@10.0.1)
+      eslint-plugin-react: 7.37.5(eslint@10.0.1)
+      eslint-plugin-react-hooks: 7.0.1(eslint@10.0.1)
+      globals: 16.4.0
+      typescript: 5.9.3
+      typescript-eslint: 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - supports-color
+    dev: true
 
-  eslint-config-prettier@10.1.8:
-    resolution:
-      {
-        integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==,
-      }
+  /eslint-config-prettier@10.1.8(eslint@10.0.1):
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
+    dependencies:
+      eslint: 10.0.1
+    dev: true
 
-  eslint-import-resolver-node@0.3.9:
-    resolution:
-      {
-        integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==,
-      }
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  eslint-import-resolver-typescript@3.10.1:
-    resolution:
-      {
-        integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==,
-      }
-    engines: { node: ^14.18.0 || >=16.0.0 }
+  /eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.1):
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
       eslint-plugin-import: '*'
@@ -2778,13 +3857,23 @@ packages:
         optional: true
       eslint-plugin-import-x:
         optional: true
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.3
+      eslint: 10.0.1
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.0)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.1)
+      get-tsconfig: 4.13.6
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.15
+      unrs-resolver: 1.11.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  eslint-module-utils@2.12.1:
-    resolution:
-      {
-        integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==,
-      }
-    engines: { node: '>=4' }
+  /eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.1):
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
       eslint: '*'
@@ -2802,35 +3891,80 @@ packages:
         optional: true
       eslint-import-resolver-webpack:
         optional: true
+    dependencies:
+      '@typescript-eslint/parser': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      debug: 3.2.7
+      eslint: 10.0.1
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.1)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  eslint-plugin-import@2.32.0:
-    resolution:
-      {
-        integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==,
-      }
-    engines: { node: '>=4' }
+  /eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.0)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.1):
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
     peerDependenciesMeta:
       '@typescript-eslint/parser':
         optional: true
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      '@typescript-eslint/parser': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 10.0.1
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.1)
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.3
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
 
-  eslint-plugin-jsx-a11y@6.10.2:
-    resolution:
-      {
-        integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==,
-      }
-    engines: { node: '>=4.0' }
+  /eslint-plugin-jsx-a11y@6.10.2(eslint@10.0.1):
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.11.1
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 10.0.1
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.3
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+    dev: true
 
-  eslint-plugin-prettier@5.5.4:
-    resolution:
-      {
-        integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==,
-      }
-    engines: { node: ^14.18.0 || >=16.0.0 }
+  /eslint-plugin-prettier@5.5.5(eslint-config-prettier@10.1.8)(eslint@10.0.1)(prettier@3.8.1):
+    resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       '@types/eslint': '>=8.0.0'
       eslint: '>=8.0.0'
@@ -2841,965 +3975,1036 @@ packages:
         optional: true
       eslint-config-prettier:
         optional: true
+    dependencies:
+      eslint: 10.0.1
+      eslint-config-prettier: 10.1.8(eslint@10.0.1)
+      prettier: 3.8.1
+      prettier-linter-helpers: 1.0.1
+      synckit: 0.11.12
+    dev: true
 
-  eslint-plugin-react-hooks@5.2.0:
-    resolution:
-      {
-        integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==,
-      }
-    engines: { node: '>=10' }
+  /eslint-plugin-react-hooks@7.0.1(eslint@10.0.1):
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      eslint: 10.0.1
+      hermes-parser: 0.25.1
+      zod: 4.3.6
+      zod-validation-error: 4.0.2(zod@4.3.6)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  eslint-plugin-react@7.37.5:
-    resolution:
-      {
-        integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==,
-      }
-    engines: { node: '>=4' }
+  /eslint-plugin-react@7.37.5(eslint@10.0.1):
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.2
+      eslint: 10.0.1
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.3
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.6
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+    dev: true
 
-  eslint-scope@8.4.0:
-    resolution:
-      {
-        integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /eslint-scope@9.1.1:
+    resolution: {integrity: sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
 
-  eslint-visitor-keys@3.4.3:
-    resolution:
-      {
-        integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==,
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
 
-  eslint-visitor-keys@4.2.1:
-    resolution:
-      {
-        integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
 
-  eslint@9.38.0:
-    resolution:
-      {
-        integrity: sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dev: true
+
+  /eslint@10.0.1:
+    resolution: {integrity: sha512-20MV9SUdeN6Jd84xESsKhRly+/vxI+hwvpBMA93s+9dAcjdCuCojn4IqUGS3lvVaqjVYGYHSRMCpeFtF2rQYxQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     hasBin: true
     peerDependencies:
       jiti: '*'
     peerDependenciesMeta:
       jiti:
         optional: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.1)
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.2
+      '@eslint/config-helpers': 0.5.2
+      '@eslint/core': 1.1.0
+      '@eslint/plugin-kit': 0.6.0
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.14.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 9.1.1
+      eslint-visitor-keys: 5.0.1
+      espree: 11.1.1
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      minimatch: 10.2.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  espree@10.4.0:
-    resolution:
-      {
-        integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==,
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+  /espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 4.2.1
+    dev: true
 
-  esquery@1.6.0:
-    resolution:
-      {
-        integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==,
-      }
-    engines: { node: '>=0.10' }
+  /espree@11.1.1:
+    resolution: {integrity: sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.1
+    dev: true
 
-  esrecurse@4.3.0:
-    resolution:
-      {
-        integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==,
-      }
-    engines: { node: '>=4.0' }
+  /esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
 
-  estraverse@5.3.0:
-    resolution:
-      {
-        integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==,
-      }
-    engines: { node: '>=4.0' }
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
 
-  esutils@2.0.3:
-    resolution:
-      {
-        integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==,
-      }
-    engines: { node: '>=0.10.0' }
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
 
-  eventemitter3@4.0.7:
-    resolution:
-      {
-        integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==,
-      }
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
-  fast-deep-equal@3.1.3:
-    resolution:
-      {
-        integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==,
-      }
+  /eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+    dev: false
 
-  fast-diff@1.3.0:
-    resolution:
-      {
-        integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==,
-      }
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
 
-  fast-equals@5.3.2:
-    resolution:
-      {
-        integrity: sha512-6rxyATwPCkaFIL3JLqw8qXqMpIZ942pTX/tbQFkRsDGblS8tNGtlUauA/+mt6RUfqn/4MoEr+WDkYoIQbibWuQ==,
-      }
-    engines: { node: '>=6.0.0' }
+  /fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: true
 
-  fast-glob@3.3.1:
-    resolution:
-      {
-        integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==,
-      }
-    engines: { node: '>=8.6.0' }
+  /fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+    dev: true
 
-  fast-json-stable-stringify@2.1.0:
-    resolution:
-      {
-        integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==,
-      }
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
 
-  fast-levenshtein@2.0.6:
-    resolution:
-      {
-        integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==,
-      }
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
 
-  fastq@1.20.1:
-    resolution:
-      {
-        integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==,
-      }
+  /fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+    dependencies:
+      reusify: 1.1.0
+    dev: true
 
-  fdir@6.5.0:
-    resolution:
-      {
-        integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==,
-      }
-    engines: { node: '>=12.0.0' }
+  /fdir@6.5.0(picomatch@4.0.3):
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
       picomatch:
         optional: true
+    dependencies:
+      picomatch: 4.0.3
+    dev: true
 
-  file-entry-cache@8.0.0:
-    resolution:
-      {
-        integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==,
-      }
-    engines: { node: '>=16.0.0' }
+  /file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      flat-cache: 4.0.1
+    dev: true
 
-  fill-range@7.1.1:
-    resolution:
-      {
-        integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==,
-      }
-    engines: { node: '>=8' }
+  /fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
 
-  find-up@4.1.0:
-    resolution:
-      {
-        integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==,
-      }
-    engines: { node: '>=8' }
+  /find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+    dev: false
 
-  find-up@5.0.0:
-    resolution:
-      {
-        integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==,
-      }
-    engines: { node: '>=10' }
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
 
-  flat-cache@4.0.1:
-    resolution:
-      {
-        integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==,
-      }
-    engines: { node: '>=16' }
+  /flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+    dev: true
 
-  flatted@3.3.3:
-    resolution:
-      {
-        integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==,
-      }
+  /flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+    dev: true
 
-  follow-redirects@1.15.11:
-    resolution:
-      {
-        integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==,
-      }
-    engines: { node: '>=4.0' }
+  /follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
     peerDependenciesMeta:
       debug:
         optional: true
+    dev: false
 
-  for-each@0.3.5:
-    resolution:
-      {
-        integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==,
-      }
-    engines: { node: '>= 0.4' }
+  /for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
 
-  form-data@4.0.4:
-    resolution:
-      {
-        integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==,
-      }
-    engines: { node: '>= 6' }
+  /form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+    dev: false
 
-  function-bind@1.1.2:
-    resolution:
-      {
-        integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==,
-      }
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  function.prototype.name@1.1.8:
-    resolution:
-      {
-        integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==,
-      }
-    engines: { node: '>= 0.4' }
+  /function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+    dev: true
 
-  functions-have-names@1.2.3:
-    resolution:
-      {
-        integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==,
-      }
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: true
 
-  generator-function@2.0.1:
-    resolution:
-      {
-        integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==,
-      }
-    engines: { node: '>= 0.4' }
+  /generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  get-caller-file@2.0.5:
-    resolution:
-      {
-        integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==,
-      }
-    engines: { node: 6.* || 8.* || >= 10.* }
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
 
-  get-intrinsic@1.3.0:
-    resolution:
-      {
-        integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: false
 
-  get-nonce@1.0.1:
-    resolution:
-      {
-        integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==,
-      }
-    engines: { node: '>=6' }
+  /get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
 
-  get-proto@1.0.1:
-    resolution:
-      {
-        integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==,
-      }
-    engines: { node: '>= 0.4' }
+  /get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
 
-  get-symbol-description@1.1.0:
-    resolution:
-      {
-        integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==,
-      }
-    engines: { node: '>= 0.4' }
+  /get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
 
-  get-tsconfig@4.13.0:
-    resolution:
-      {
-        integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==,
-      }
+  /get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+    dev: true
 
-  glob-parent@5.1.2:
-    resolution:
-      {
-        integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==,
-      }
-    engines: { node: '>= 6' }
+  /get-tsconfig@4.13.6:
+    resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
 
-  glob-parent@6.0.2:
-    resolution:
-      {
-        integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==,
-      }
-    engines: { node: '>=10.13.0' }
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
 
-  globals@14.0.0:
-    resolution:
-      {
-        integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==,
-      }
-    engines: { node: '>=18' }
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
 
-  globalthis@1.0.4:
-    resolution:
-      {
-        integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+    dev: true
 
-  gopd@1.2.0:
-    resolution:
-      {
-        integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==,
-      }
-    engines: { node: '>= 0.4' }
+  /globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+    dev: true
 
-  graceful-fs@4.2.11:
-    resolution:
-      {
-        integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==,
-      }
+  /globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+    dev: true
 
-  has-bigints@1.1.0:
-    resolution:
-      {
-        integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==,
-      }
-    engines: { node: '>= 0.4' }
+  /gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
 
-  has-flag@4.0.0:
-    resolution:
-      {
-        integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==,
-      }
-    engines: { node: '>=8' }
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    dev: true
 
-  has-property-descriptors@1.0.2:
-    resolution:
-      {
-        integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==,
-      }
+  /has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  has-proto@1.2.0:
-    resolution:
-      {
-        integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+    dependencies:
+      es-define-property: 1.0.1
+    dev: true
 
-  has-symbols@1.1.0:
-    resolution:
-      {
-        integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+    dev: true
 
-  has-tostringtag@1.0.2:
-    resolution:
-      {
-        integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==,
-      }
-    engines: { node: '>= 0.4' }
+  /has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
 
-  hasown@2.0.2:
-    resolution:
-      {
-        integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.1.0
 
-  ignore@5.3.2:
-    resolution:
-      {
-        integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==,
-      }
-    engines: { node: '>= 4' }
+  /hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
 
-  ignore@7.0.5:
-    resolution:
-      {
-        integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==,
-      }
-    engines: { node: '>= 4' }
+  /hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+    dev: true
 
-  import-fresh@3.3.1:
-    resolution:
-      {
-        integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==,
-      }
-    engines: { node: '>=6' }
+  /hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+    dependencies:
+      hermes-estree: 0.25.1
+    dev: true
 
-  imurmurhash@0.1.4:
-    resolution:
-      {
-        integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==,
-      }
-    engines: { node: '>=0.8.19' }
+  /ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+    dev: true
 
-  input-otp@1.4.2:
-    resolution:
-      {
-        integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==,
-      }
+  /ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /immer@10.2.0:
+    resolution: {integrity: sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==}
+    dev: false
+
+  /immer@11.1.4:
+    resolution: {integrity: sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==}
+    dev: false
+
+  /import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+    dev: true
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /input-otp@1.4.2(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  internal-slot@1.1.0:
-    resolution:
-      {
-        integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==,
-      }
-    engines: { node: '>= 0.4' }
+  /internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+    dev: true
 
-  internmap@2.0.3:
-    resolution:
-      {
-        integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==,
-      }
-    engines: { node: '>=12' }
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
 
-  is-array-buffer@3.0.5:
-    resolution:
-      {
-        integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+    dev: true
 
-  is-async-function@2.1.1:
-    resolution:
-      {
-        integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+    dev: true
 
-  is-bigint@1.1.0:
-    resolution:
-      {
-        integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-bigints: 1.1.0
+    dev: true
 
-  is-boolean-object@1.2.2:
-    resolution:
-      {
-        integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
 
-  is-bun-module@2.0.0:
-    resolution:
-      {
-        integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==,
-      }
+  /is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+    dependencies:
+      semver: 7.7.4
+    dev: true
 
-  is-callable@1.2.7:
-    resolution:
-      {
-        integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  is-core-module@2.16.1:
-    resolution:
-      {
-        integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
 
-  is-data-view@1.0.2:
-    resolution:
-      {
-        integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+    dev: true
 
-  is-date-object@1.1.0:
-    resolution:
-      {
-        integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
 
-  is-extglob@2.1.1:
-    resolution:
-      {
-        integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==,
-      }
-    engines: { node: '>=0.10.0' }
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
-  is-finalizationregistry@1.1.1:
-    resolution:
-      {
-        integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+    dev: true
 
-  is-fullwidth-code-point@3.0.0:
-    resolution:
-      {
-        integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==,
-      }
-    engines: { node: '>=8' }
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: false
 
-  is-generator-function@1.1.2:
-    resolution:
-      {
-        integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+    dev: true
 
-  is-glob@4.0.3:
-    resolution:
-      {
-        integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==,
-      }
-    engines: { node: '>=0.10.0' }
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
 
-  is-map@2.0.3:
-    resolution:
-      {
-        integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  is-negative-zero@2.0.3:
-    resolution:
-      {
-        integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  is-number-object@1.1.1:
-    resolution:
-      {
-        integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
 
-  is-number@7.0.0:
-    resolution:
-      {
-        integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==,
-      }
-    engines: { node: '>=0.12.0' }
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
 
-  is-regex@1.2.1:
-    resolution:
-      {
-        integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+    dev: true
 
-  is-set@2.0.3:
-    resolution:
-      {
-        integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  is-shared-array-buffer@1.0.4:
-    resolution:
-      {
-        integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+    dev: true
 
-  is-string@1.1.1:
-    resolution:
-      {
-        integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
 
-  is-symbol@1.1.1:
-    resolution:
-      {
-        integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+    dev: true
 
-  is-typed-array@1.1.15:
-    resolution:
-      {
-        integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      which-typed-array: 1.1.20
+    dev: true
 
-  is-weakmap@2.0.2:
-    resolution:
-      {
-        integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  is-weakref@1.1.1:
-    resolution:
-      {
-        integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+    dev: true
 
-  is-weakset@2.0.4:
-    resolution:
-      {
-        integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+    dev: true
 
-  isarray@2.0.5:
-    resolution:
-      {
-        integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==,
-      }
+  /isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: true
 
-  isexe@2.0.0:
-    resolution:
-      {
-        integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==,
-      }
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
 
-  iterator.prototype@1.1.5:
-    resolution:
-      {
-        integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==,
-      }
-    engines: { node: '>= 0.4' }
+  /iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
+    dev: true
 
-  jiti@2.6.1:
-    resolution:
-      {
-        integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==,
-      }
+  /jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+    dev: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  /js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
     hasBin: true
 
-  js-tokens@4.0.0:
-    resolution:
-      {
-        integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==,
-      }
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
 
-  js-yaml@4.1.1:
-    resolution:
-      {
-        integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==,
-      }
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
     hasBin: true
 
-  json-buffer@3.0.1:
-    resolution:
-      {
-        integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==,
-      }
+  /jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
+    dev: true
 
-  json-schema-traverse@0.4.1:
-    resolution:
-      {
-        integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==,
-      }
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
 
-  json-stable-stringify-without-jsonify@1.0.1:
-    resolution:
-      {
-        integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==,
-      }
+  /language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+    dev: true
 
-  json5@1.0.2:
-    resolution:
-      {
-        integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==,
-      }
-    hasBin: true
+  /language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      language-subtag-registry: 0.3.23
+    dev: true
 
-  jsx-ast-utils@3.3.5:
-    resolution:
-      {
-        integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==,
-      }
-    engines: { node: '>=4.0' }
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
 
-  keyv@4.5.4:
-    resolution:
-      {
-        integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==,
-      }
-
-  language-subtag-registry@0.3.23:
-    resolution:
-      {
-        integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==,
-      }
-
-  language-tags@1.0.9:
-    resolution:
-      {
-        integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==,
-      }
-    engines: { node: '>=0.10' }
-
-  levn@0.4.1:
-    resolution:
-      {
-        integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==,
-      }
-    engines: { node: '>= 0.8.0' }
-
-  lightningcss-android-arm64@1.30.2:
-    resolution:
-      {
-        integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-darwin-arm64@1.30.2:
-    resolution:
-      {
-        integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-darwin-x64@1.30.2:
-    resolution:
-      {
-        integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-freebsd-x64@1.30.2:
-    resolution:
-      {
-        integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    resolution:
-      {
-        integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-linux-arm64-gnu@1.30.2:
-    resolution:
-      {
-        integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-linux-arm64-musl@1.30.2:
-    resolution:
-      {
-        integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-linux-x64-gnu@1.30.2:
-    resolution:
-      {
-        integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-linux-x64-musl@1.30.2:
-    resolution:
-      {
-        integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-win32-arm64-msvc@1.30.2:
-    resolution:
-      {
-        integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss-win32-x64-msvc@1.30.2:
-    resolution:
-      {
-        integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  lightningcss@1.30.2:
-    resolution:
-      {
-        integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==,
-      }
-    engines: { node: '>= 12.0.0' }
+  /lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+    dev: true
 
-  locate-path@5.0.0:
-    resolution:
-      {
-        integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==,
-      }
-    engines: { node: '>=8' }
+  /locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+    dev: false
 
-  locate-path@6.0.0:
-    resolution:
-      {
-        integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==,
-      }
-    engines: { node: '>=10' }
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
 
-  lodash.merge@4.6.2:
-    resolution:
-      {
-        integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==,
-      }
-
-  lodash@4.17.21:
-    resolution:
-      {
-        integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==,
-      }
-
-  loose-envify@1.4.0:
-    resolution:
-      {
-        integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==,
-      }
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: true
 
-  lucide-react@0.562.0:
-    resolution:
-      {
-        integrity: sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==,
-      }
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+
+  /lucide-react@0.575.0(react@19.2.4):
+    resolution: {integrity: sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==}
     peerDependencies:
       react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      react: 19.2.4
+    dev: false
 
-  magic-string@0.30.21:
-    resolution:
-      {
-        integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==,
-      }
+  /magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+    dev: true
 
-  math-intrinsics@1.1.0:
-    resolution:
-      {
-        integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==,
-      }
-    engines: { node: '>= 0.4' }
+  /math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
 
-  merge2@1.4.1:
-    resolution:
-      {
-        integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==,
-      }
-    engines: { node: '>= 8' }
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
 
-  micromatch@4.0.8:
-    resolution:
-      {
-        integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==,
-      }
-    engines: { node: '>=8.6' }
+  /micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+    dev: true
 
-  mime-db@1.52.0:
-    resolution:
-      {
-        integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==,
-      }
-    engines: { node: '>= 0.6' }
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
 
-  mime-types@2.1.35:
-    resolution:
-      {
-        integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==,
-      }
-    engines: { node: '>= 0.6' }
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
 
-  minimatch@3.1.2:
-    resolution:
-      {
-        integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==,
-      }
+  /minimatch@10.2.2:
+    resolution: {integrity: sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==}
+    engines: {node: 18 || 20 || >=22}
+    dependencies:
+      brace-expansion: 5.0.3
+    dev: true
 
-  minimatch@9.0.5:
-    resolution:
-      {
-        integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==,
-      }
-    engines: { node: '>=16 || 14 >=14.17' }
+  /minimatch@3.1.3:
+    resolution: {integrity: sha512-M2GCs7Vk83NxkUyQV1bkABc4yxgz9kILhHImZiBPAZ9ybuvCb0/H7lEl5XvIg3g+9d4eNotkZA5IWwYl0tibaA==}
+    dependencies:
+      brace-expansion: 1.1.12
+    dev: true
 
-  minimist@1.2.8:
-    resolution:
-      {
-        integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==,
-      }
+  /minimatch@9.0.6:
+    resolution: {integrity: sha512-kQAVowdR33euIqeA0+VZTDqU+qo1IeVY+hrKYtZMio3Pg0P0vuh/kwRylLUddJhB6pf3q/botcOvRtx4IN1wqQ==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 5.0.3
+    dev: true
 
-  ms@2.1.3:
-    resolution:
-      {
-        integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==,
-      }
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: true
 
-  nanoid@3.3.11:
-    resolution:
-      {
-        integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==,
-      }
-    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  /nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  napi-postinstall@0.3.4:
-    resolution:
-      {
-        integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==,
-      }
-    engines: { node: ^12.20.0 || ^14.18.0 || >=16.0.0 }
+  /napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     hasBin: true
+    dev: true
 
-  natural-compare@1.4.0:
-    resolution:
-      {
-        integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==,
-      }
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
 
-  next-themes@0.4.6:
-    resolution:
-      {
-        integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==,
-      }
+  /next-themes@0.4.6(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  next@15.5.9:
-    resolution:
-      {
-        integrity: sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==,
-      }
-    engines: { node: ^18.18.0 || ^19.8.0 || >= 20.0.0 }
+  /next@16.1.6(@babel/core@7.29.0)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
+    engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -3817,207 +5022,239 @@ packages:
         optional: true
       sass:
         optional: true
+    dependencies:
+      '@next/env': 16.1.6
+      '@swc/helpers': 0.5.15
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001772
+      postcss: 8.4.31
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      styled-jsx: 5.1.6(@babel/core@7.29.0)(react@19.2.4)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 16.1.6
+      '@next/swc-darwin-x64': 16.1.6
+      '@next/swc-linux-arm64-gnu': 16.1.6
+      '@next/swc-linux-arm64-musl': 16.1.6
+      '@next/swc-linux-x64-gnu': 16.1.6
+      '@next/swc-linux-x64-musl': 16.1.6
+      '@next/swc-win32-arm64-msvc': 16.1.6
+      '@next/swc-win32-x64-msvc': 16.1.6
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
 
-  object-assign@4.1.1:
-    resolution:
-      {
-        integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==,
-      }
-    engines: { node: '>=0.10.0' }
+  /node-exports-info@1.6.0:
+    resolution: {integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array.prototype.flatmap: 1.3.3
+      es-errors: 1.3.0
+      object.entries: 1.1.9
+      semver: 6.3.1
+    dev: true
 
-  object-inspect@1.13.4:
-    resolution:
-      {
-        integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==,
-      }
-    engines: { node: '>= 0.4' }
+  /node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
-  object-keys@1.1.1:
-    resolution:
-      {
-        integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==,
-      }
-    engines: { node: '>= 0.4' }
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
-  object.assign@4.1.7:
-    resolution:
-      {
-        integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==,
-      }
-    engines: { node: '>= 0.4' }
+  /object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  object.entries@1.1.9:
-    resolution:
-      {
-        integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==,
-      }
-    engines: { node: '>= 0.4' }
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  object.fromentries@2.0.8:
-    resolution:
-      {
-        integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+    dev: true
 
-  object.groupby@1.0.3:
-    resolution:
-      {
-        integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==,
-      }
-    engines: { node: '>= 0.4' }
+  /object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+    dev: true
 
-  object.values@1.2.1:
-    resolution:
-      {
-        integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==,
-      }
-    engines: { node: '>= 0.4' }
+  /object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+    dev: true
 
-  optionator@0.9.4:
-    resolution:
-      {
-        integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==,
-      }
-    engines: { node: '>= 0.8.0' }
+  /object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+    dev: true
 
-  own-keys@1.0.1:
-    resolution:
-      {
-        integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==,
-      }
-    engines: { node: '>= 0.4' }
+  /object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+    dev: true
 
-  p-limit@2.3.0:
-    resolution:
-      {
-        integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==,
-      }
-    engines: { node: '>=6' }
+  /optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+    dev: true
 
-  p-limit@3.1.0:
-    resolution:
-      {
-        integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==,
-      }
-    engines: { node: '>=10' }
+  /own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+    dev: true
 
-  p-locate@4.1.0:
-    resolution:
-      {
-        integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==,
-      }
-    engines: { node: '>=8' }
+  /p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+    dev: false
 
-  p-locate@5.0.0:
-    resolution:
-      {
-        integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==,
-      }
-    engines: { node: '>=10' }
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
 
-  p-try@2.2.0:
-    resolution:
-      {
-        integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==,
-      }
-    engines: { node: '>=6' }
+  /p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: false
 
-  parent-module@1.0.1:
-    resolution:
-      {
-        integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==,
-      }
-    engines: { node: '>=6' }
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
 
-  path-exists@4.0.0:
-    resolution:
-      {
-        integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==,
-      }
-    engines: { node: '>=8' }
+  /p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+    dev: false
 
-  path-key@3.1.1:
-    resolution:
-      {
-        integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==,
-      }
-    engines: { node: '>=8' }
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+    dev: true
 
-  path-parse@1.0.7:
-    resolution:
-      {
-        integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==,
-      }
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
 
-  picocolors@1.1.1:
-    resolution:
-      {
-        integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==,
-      }
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
 
-  picomatch@2.3.1:
-    resolution:
-      {
-        integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==,
-      }
-    engines: { node: '>=8.6' }
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
 
-  picomatch@4.0.3:
-    resolution:
-      {
-        integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==,
-      }
-    engines: { node: '>=12' }
+  /picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  pngjs@5.0.0:
-    resolution:
-      {
-        integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==,
-      }
-    engines: { node: '>=10.13.0' }
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
 
-  possible-typed-array-names@1.1.0:
-    resolution:
-      {
-        integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==,
-      }
-    engines: { node: '>= 0.4' }
+  /picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+    dev: true
 
-  postcss@8.4.31:
-    resolution:
-      {
-        integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==,
-      }
-    engines: { node: ^10 || ^12 || >=14 }
+  /pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+    dev: false
 
-  postcss@8.5.6:
-    resolution:
-      {
-        integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==,
-      }
-    engines: { node: ^10 || ^12 || >=14 }
+  /possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  prelude-ls@1.2.1:
-    resolution:
-      {
-        integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==,
-      }
-    engines: { node: '>= 0.8.0' }
+  /postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+    dev: false
 
-  prettier-linter-helpers@1.0.0:
-    resolution:
-      {
-        integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==,
-      }
-    engines: { node: '>=6.0.0' }
+  /postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+    dev: true
 
-  prettier-plugin-tailwindcss@0.6.14:
-    resolution:
-      {
-        integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==,
-      }
-    engines: { node: '>=14.21.3' }
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier-linter-helpers@1.0.1:
+    resolution: {integrity: sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.3.0
+    dev: true
+
+  /prettier-plugin-tailwindcss@0.7.2(prettier@3.8.1):
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
       '@prettier/plugin-hermes': '*'
@@ -4029,14 +5266,12 @@ packages:
       prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
       prettier-plugin-jsdoc: '*'
       prettier-plugin-marko: '*'
       prettier-plugin-multiline-arrays: '*'
       prettier-plugin-organize-attributes: '*'
       prettier-plugin-organize-imports: '*'
       prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
       prettier-plugin-svelte: '*'
     peerDependenciesMeta:
       '@ianvs/prettier-plugin-sort-imports':
@@ -4057,8 +5292,6 @@ packages:
         optional: true
       prettier-plugin-css-order:
         optional: true
-      prettier-plugin-import-sort:
-        optional: true
       prettier-plugin-jsdoc:
         optional: true
       prettier-plugin-marko:
@@ -4071,3460 +5304,309 @@ packages:
         optional: true
       prettier-plugin-sort-imports:
         optional: true
-      prettier-plugin-style-order:
-        optional: true
       prettier-plugin-svelte:
         optional: true
+    dependencies:
+      prettier: 3.8.1
+    dev: true
 
-  prettier@3.6.2:
-    resolution:
-      {
-        integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==,
-      }
-    engines: { node: '>=14' }
+  /prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
     hasBin: true
+    dev: true
 
-  prop-types@15.8.1:
-    resolution:
-      {
-        integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==,
-      }
-
-  proxy-from-env@1.1.0:
-    resolution:
-      {
-        integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==,
-      }
-
-  punycode@2.3.1:
-    resolution:
-      {
-        integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==,
-      }
-    engines: { node: '>=6' }
-
-  qrcode.react@4.2.0:
-    resolution:
-      {
-        integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==,
-      }
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  qrcode@1.5.4:
-    resolution:
-      {
-        integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==,
-      }
-    engines: { node: '>=10.13.0' }
-    hasBin: true
-
-  queue-microtask@1.2.3:
-    resolution:
-      {
-        integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==,
-      }
-
-  react-day-picker@9.11.1:
-    resolution:
-      {
-        integrity: sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==,
-      }
-    engines: { node: '>=18' }
-    peerDependencies:
-      react: '>=16.8.0'
-
-  react-dom@19.2.0:
-    resolution:
-      {
-        integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==,
-      }
-    peerDependencies:
-      react: ^19.2.0
-
-  react-hook-form@7.65.0:
-    resolution:
-      {
-        integrity: sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==,
-      }
-    engines: { node: '>=18.0.0' }
-    peerDependencies:
-      react: ^16.8.0 || ^17 || ^18 || ^19
-
-  react-is@16.13.1:
-    resolution:
-      {
-        integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==,
-      }
-
-  react-is@18.3.1:
-    resolution:
-      {
-        integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==,
-      }
-
-  react-remove-scroll-bar@2.3.8:
-    resolution:
-      {
-        integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==,
-      }
-    engines: { node: '>=10' }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.7.1:
-    resolution:
-      {
-        integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==,
-      }
-    engines: { node: '>=10' }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-resizable-panels@2.1.9:
-    resolution:
-      {
-        integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==,
-      }
-    peerDependencies:
-      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
-  react-smooth@4.0.4:
-    resolution:
-      {
-        integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==,
-      }
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  react-style-singleton@2.2.3:
-    resolution:
-      {
-        integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==,
-      }
-    engines: { node: '>=10' }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-transition-group@4.4.5:
-    resolution:
-      {
-        integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==,
-      }
-    peerDependencies:
-      react: '>=16.6.0'
-      react-dom: '>=16.6.0'
-
-  react@19.2.0:
-    resolution:
-      {
-        integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==,
-      }
-    engines: { node: '>=0.10.0' }
-
-  recharts-scale@0.4.5:
-    resolution:
-      {
-        integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==,
-      }
-
-  recharts@2.15.4:
-    resolution:
-      {
-        integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==,
-      }
-    engines: { node: '>=14' }
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  reflect.getprototypeof@1.0.10:
-    resolution:
-      {
-        integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  regexp.prototype.flags@1.5.4:
-    resolution:
-      {
-        integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  require-directory@2.1.1:
-    resolution:
-      {
-        integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==,
-      }
-    engines: { node: '>=0.10.0' }
-
-  require-main-filename@2.0.0:
-    resolution:
-      {
-        integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==,
-      }
-
-  resolve-from@4.0.0:
-    resolution:
-      {
-        integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==,
-      }
-    engines: { node: '>=4' }
-
-  resolve-pkg-maps@1.0.0:
-    resolution:
-      {
-        integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==,
-      }
-
-  resolve@1.22.11:
-    resolution:
-      {
-        integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==,
-      }
-    engines: { node: '>= 0.4' }
-    hasBin: true
-
-  resolve@2.0.0-next.5:
-    resolution:
-      {
-        integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==,
-      }
-    hasBin: true
-
-  reusify@1.1.0:
-    resolution:
-      {
-        integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==,
-      }
-    engines: { iojs: '>=1.0.0', node: '>=0.10.0' }
-
-  run-parallel@1.2.0:
-    resolution:
-      {
-        integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==,
-      }
-
-  safe-array-concat@1.1.3:
-    resolution:
-      {
-        integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==,
-      }
-    engines: { node: '>=0.4' }
-
-  safe-push-apply@1.0.0:
-    resolution:
-      {
-        integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  safe-regex-test@1.1.0:
-    resolution:
-      {
-        integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  scheduler@0.27.0:
-    resolution:
-      {
-        integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==,
-      }
-
-  semver@6.3.1:
-    resolution:
-      {
-        integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==,
-      }
-    hasBin: true
-
-  semver@7.7.3:
-    resolution:
-      {
-        integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==,
-      }
-    engines: { node: '>=10' }
-    hasBin: true
-
-  set-blocking@2.0.0:
-    resolution:
-      {
-        integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==,
-      }
-
-  set-function-length@1.2.2:
-    resolution:
-      {
-        integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  set-function-name@2.0.2:
-    resolution:
-      {
-        integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  set-proto@1.0.0:
-    resolution:
-      {
-        integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  sharp@0.34.5:
-    resolution:
-      {
-        integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==,
-      }
-    engines: { node: ^18.17.0 || ^20.3.0 || >=21.0.0 }
-
-  shebang-command@2.0.0:
-    resolution:
-      {
-        integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==,
-      }
-    engines: { node: '>=8' }
-
-  shebang-regex@3.0.0:
-    resolution:
-      {
-        integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==,
-      }
-    engines: { node: '>=8' }
-
-  side-channel-list@1.0.0:
-    resolution:
-      {
-        integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  side-channel-map@1.0.1:
-    resolution:
-      {
-        integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  side-channel-weakmap@1.0.2:
-    resolution:
-      {
-        integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==,
-      }
-    engines: { node: '>= 0.4' }
-
-  side-channel@1.1.0:
-    resolution:
-      {
-        integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  sonner@2.0.7:
-    resolution:
-      {
-        integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==,
-      }
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-
-  source-map-js@1.2.1:
-    resolution:
-      {
-        integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==,
-      }
-    engines: { node: '>=0.10.0' }
-
-  stable-hash@0.0.5:
-    resolution:
-      {
-        integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==,
-      }
-
-  stop-iteration-iterator@1.1.0:
-    resolution:
-      {
-        integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  string-width@4.2.3:
-    resolution:
-      {
-        integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==,
-      }
-    engines: { node: '>=8' }
-
-  string.prototype.includes@2.0.1:
-    resolution:
-      {
-        integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  string.prototype.matchall@4.0.12:
-    resolution:
-      {
-        integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  string.prototype.repeat@1.0.0:
-    resolution:
-      {
-        integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==,
-      }
-
-  string.prototype.trim@1.2.10:
-    resolution:
-      {
-        integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  string.prototype.trimend@1.0.9:
-    resolution:
-      {
-        integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  string.prototype.trimstart@1.0.8:
-    resolution:
-      {
-        integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  strip-ansi@6.0.1:
-    resolution:
-      {
-        integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==,
-      }
-    engines: { node: '>=8' }
-
-  strip-bom@3.0.0:
-    resolution:
-      {
-        integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==,
-      }
-    engines: { node: '>=4' }
-
-  strip-json-comments@3.1.1:
-    resolution:
-      {
-        integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==,
-      }
-    engines: { node: '>=8' }
-
-  styled-jsx@5.1.6:
-    resolution:
-      {
-        integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==,
-      }
-    engines: { node: '>= 12.0.0' }
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-
-  supports-color@7.2.0:
-    resolution:
-      {
-        integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==,
-      }
-    engines: { node: '>=8' }
-
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution:
-      {
-        integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==,
-      }
-    engines: { node: '>= 0.4' }
-
-  synckit@0.11.11:
-    resolution:
-      {
-        integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==,
-      }
-    engines: { node: ^14.18.0 || >=16.0.0 }
-
-  tailwind-merge@3.3.1:
-    resolution:
-      {
-        integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==,
-      }
-
-  tailwindcss@4.1.18:
-    resolution:
-      {
-        integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==,
-      }
-
-  tapable@2.3.0:
-    resolution:
-      {
-        integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==,
-      }
-    engines: { node: '>=6' }
-
-  tiny-invariant@1.3.3:
-    resolution:
-      {
-        integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==,
-      }
-
-  tinyglobby@0.2.15:
-    resolution:
-      {
-        integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==,
-      }
-    engines: { node: '>=12.0.0' }
-
-  to-regex-range@5.0.1:
-    resolution:
-      {
-        integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==,
-      }
-    engines: { node: '>=8.0' }
-
-  ts-api-utils@2.4.0:
-    resolution:
-      {
-        integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==,
-      }
-    engines: { node: '>=18.12' }
-    peerDependencies:
-      typescript: '>=4.8.4'
-
-  tsconfig-paths@3.15.0:
-    resolution:
-      {
-        integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==,
-      }
-
-  tslib@2.8.1:
-    resolution:
-      {
-        integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==,
-      }
-
-  tw-animate-css@1.4.0:
-    resolution:
-      {
-        integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==,
-      }
-
-  type-check@0.4.0:
-    resolution:
-      {
-        integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==,
-      }
-    engines: { node: '>= 0.8.0' }
-
-  typed-array-buffer@1.0.3:
-    resolution:
-      {
-        integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  typed-array-byte-length@1.0.3:
-    resolution:
-      {
-        integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  typed-array-byte-offset@1.0.4:
-    resolution:
-      {
-        integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==,
-      }
-    engines: { node: '>= 0.4' }
-
-  typed-array-length@1.0.7:
-    resolution:
-      {
-        integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  typescript@5.9.3:
-    resolution:
-      {
-        integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==,
-      }
-    engines: { node: '>=14.17' }
-    hasBin: true
-
-  unbox-primitive@1.1.0:
-    resolution:
-      {
-        integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  undici-types@6.21.0:
-    resolution:
-      {
-        integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==,
-      }
-
-  unrs-resolver@1.11.1:
-    resolution:
-      {
-        integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==,
-      }
-
-  uri-js@4.4.1:
-    resolution:
-      {
-        integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==,
-      }
-
-  use-callback-ref@1.3.3:
-    resolution:
-      {
-        integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==,
-      }
-    engines: { node: '>=10' }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.3:
-    resolution:
-      {
-        integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==,
-      }
-    engines: { node: '>=10' }
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sync-external-store@1.6.0:
-    resolution:
-      {
-        integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==,
-      }
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  victory-vendor@36.9.2:
-    resolution:
-      {
-        integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==,
-      }
-
-  which-boxed-primitive@1.1.1:
-    resolution:
-      {
-        integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  which-builtin-type@1.2.1:
-    resolution:
-      {
-        integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==,
-      }
-    engines: { node: '>= 0.4' }
-
-  which-collection@1.0.2:
-    resolution:
-      {
-        integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  which-module@2.0.1:
-    resolution:
-      {
-        integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==,
-      }
-
-  which-typed-array@1.1.19:
-    resolution:
-      {
-        integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==,
-      }
-    engines: { node: '>= 0.4' }
-
-  which@2.0.2:
-    resolution:
-      {
-        integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==,
-      }
-    engines: { node: '>= 8' }
-    hasBin: true
-
-  word-wrap@1.2.5:
-    resolution:
-      {
-        integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==,
-      }
-    engines: { node: '>=0.10.0' }
-
-  wrap-ansi@6.2.0:
-    resolution:
-      {
-        integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==,
-      }
-    engines: { node: '>=8' }
-
-  y18n@4.0.3:
-    resolution:
-      {
-        integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==,
-      }
-
-  yargs-parser@18.1.3:
-    resolution:
-      {
-        integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==,
-      }
-    engines: { node: '>=6' }
-
-  yargs@15.4.1:
-    resolution:
-      {
-        integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==,
-      }
-    engines: { node: '>=8' }
-
-  yocto-queue@0.1.0:
-    resolution:
-      {
-        integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==,
-      }
-    engines: { node: '>=10' }
-
-  zod@3.25.76:
-    resolution:
-      {
-        integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==,
-      }
-
-  zustand@5.0.8:
-    resolution:
-      {
-        integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==,
-      }
-    engines: { node: '>=12.20.0' }
-    peerDependencies:
-      '@types/react': '>=18.0.0'
-      immer: '>=9.0.6'
-      react: '>=18.0.0'
-      use-sync-external-store: '>=1.2.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      immer:
-        optional: true
-      react:
-        optional: true
-      use-sync-external-store:
-        optional: true
-
-snapshots:
-  '@alloc/quick-lru@5.2.0': {}
-
-  '@babel/runtime@7.28.4': {}
-
-  '@date-fns/tz@1.4.1': {}
-
-  '@dnd-kit/accessibility@3.1.1(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-      tslib: 2.8.1
-
-  '@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@dnd-kit/accessibility': 3.1.1(react@19.2.0)
-      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      tslib: 2.8.1
-
-  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
-      react: 19.2.0
-      tslib: 2.8.1
-
-  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
-      react: 19.2.0
-      tslib: 2.8.1
-
-  '@dnd-kit/utilities@3.2.2(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-      tslib: 2.8.1
-
-  '@emnapi/core@1.8.1':
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/runtime@1.8.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/wasi-threads@1.1.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.38.0(jiti@2.6.1))':
-    dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/eslint-utils@4.9.1(eslint@9.38.0(jiti@2.6.1))':
-    dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.12.1': {}
-
-  '@eslint-community/regexpp@4.12.2': {}
-
-  '@eslint/config-array@0.21.1':
-    dependencies:
-      '@eslint/object-schema': 2.1.7
-      debug: 4.4.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/config-helpers@0.4.1':
-    dependencies:
-      '@eslint/core': 0.16.0
-
-  '@eslint/core@0.16.0':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
-  '@eslint/eslintrc@3.3.3':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.3
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.1
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@9.38.0': {}
-
-  '@eslint/object-schema@2.1.7': {}
-
-  '@eslint/plugin-kit@0.4.0':
-    dependencies:
-      '@eslint/core': 0.16.0
-      levn: 0.4.1
-
-  '@floating-ui/core@1.7.3':
-    dependencies:
-      '@floating-ui/utils': 0.2.10
-
-  '@floating-ui/dom@1.7.4':
-    dependencies:
-      '@floating-ui/core': 1.7.3
-      '@floating-ui/utils': 0.2.10
-
-  '@floating-ui/react-dom@2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@floating-ui/dom': 1.7.4
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
-  '@floating-ui/utils@0.2.10': {}
-
-  '@hookform/resolvers@5.2.2(react-hook-form@7.65.0(react@19.2.0))':
-    dependencies:
-      '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.65.0(react@19.2.0)
-
-  '@humanfs/core@0.19.1': {}
-
-  '@humanfs/node@0.16.7':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.4.3
-
-  '@humanwhocodes/module-importer@1.0.1': {}
-
-  '@humanwhocodes/retry@0.4.3': {}
-
-  '@img/colour@1.0.0':
-    optional: true
-
-  '@img/sharp-darwin-arm64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-    optional: true
-
-  '@img/sharp-darwin-x64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.4
-    optional: true
-
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    optional: true
-
-  '@img/sharp-linux-arm64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-arm@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-ppc64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-riscv64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-s390x@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-x64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.4
-    optional: true
-
-  '@img/sharp-linuxmusl-arm64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-    optional: true
-
-  '@img/sharp-linuxmusl-x64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-    optional: true
-
-  '@img/sharp-wasm32@0.34.5':
-    dependencies:
-      '@emnapi/runtime': 1.8.1
-    optional: true
-
-  '@img/sharp-win32-arm64@0.34.5':
-    optional: true
-
-  '@img/sharp-win32-ia32@0.34.5':
-    optional: true
-
-  '@img/sharp-win32-x64@0.34.5':
-    optional: true
-
-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/remapping@2.3.5':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  '@napi-rs/wasm-runtime@0.2.12':
-    dependencies:
-      '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
-      '@tybys/wasm-util': 0.10.1
-    optional: true
-
-  '@next/env@15.5.9': {}
-
-  '@next/eslint-plugin-next@15.5.9':
-    dependencies:
-      fast-glob: 3.3.1
-
-  '@next/swc-darwin-arm64@15.5.7':
-    optional: true
-
-  '@next/swc-darwin-x64@15.5.7':
-    optional: true
-
-  '@next/swc-linux-arm64-gnu@15.5.7':
-    optional: true
-
-  '@next/swc-linux-arm64-musl@15.5.7':
-    optional: true
-
-  '@next/swc-linux-x64-gnu@15.5.7':
-    optional: true
-
-  '@next/swc-linux-x64-musl@15.5.7':
-    optional: true
-
-  '@next/swc-win32-arm64-msvc@15.5.7':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@15.5.7':
-    optional: true
-
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.20.1
-
-  '@nolyfill/is-core-module@1.0.39': {}
-
-  '@pkgr/core@0.2.9': {}
-
-  '@radix-ui/number@1.1.1': {}
-
-  '@radix-ui/primitive@1.1.3': {}
-
-  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-menubar@1.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.1(@types/react@19.2.2)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-toast@1.2.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-      use-sync-external-store: 1.6.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/rect': 1.1.1
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.2)(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      react: 19.2.0
-    optionalDependencies:
-      '@types/react': 19.2.2
-
-  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
-      '@types/react-dom': 19.2.2(@types/react@19.2.2)
-
-  '@radix-ui/rect@1.1.1': {}
-
-  '@rtsao/scc@1.1.0': {}
-
-  '@rushstack/eslint-patch@1.15.0': {}
-
-  '@standard-schema/utils@0.3.0': {}
-
-  '@swc/helpers@0.5.15':
-    dependencies:
-      tslib: 2.8.1
-
-  '@tailwindcss/node@4.1.18':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.4
-      jiti: 2.6.1
-      lightningcss: 1.30.2
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.18
-
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide@4.1.18':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-x64': 4.1.18
-      '@tailwindcss/oxide-freebsd-x64': 4.1.18
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
-
-  '@tailwindcss/postcss@4.1.18':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.18
-      '@tailwindcss/oxide': 4.1.18
-      postcss: 8.5.6
-      tailwindcss: 4.1.18
-
-  '@tanstack/query-core@5.90.16': {}
-
-  '@tanstack/query-devtools@5.92.0': {}
-
-  '@tanstack/react-query-devtools@5.91.2(@tanstack/react-query@5.90.16(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@tanstack/query-devtools': 5.92.0
-      '@tanstack/react-query': 5.90.16(react@19.2.0)
-      react: 19.2.0
-
-  '@tanstack/react-query@5.90.16(react@19.2.0)':
-    dependencies:
-      '@tanstack/query-core': 5.90.16
-      react: 19.2.0
-
-  '@tanstack/react-table@8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@tanstack/table-core': 8.21.3
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
-  '@tanstack/table-core@8.21.3': {}
-
-  '@tybys/wasm-util@0.10.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@types/d3-array@3.2.2': {}
-
-  '@types/d3-color@3.1.3': {}
-
-  '@types/d3-ease@3.0.2': {}
-
-  '@types/d3-interpolate@3.0.4':
-    dependencies:
-      '@types/d3-color': 3.1.3
-
-  '@types/d3-path@3.1.1': {}
-
-  '@types/d3-scale@4.0.9':
-    dependencies:
-      '@types/d3-time': 3.0.4
-
-  '@types/d3-shape@3.1.7':
-    dependencies:
-      '@types/d3-path': 3.1.1
-
-  '@types/d3-time@3.0.4': {}
-
-  '@types/d3-timer@3.0.2': {}
-
-  '@types/estree@1.0.8': {}
-
-  '@types/json-schema@7.0.15': {}
-
-  '@types/json5@0.0.29': {}
-
-  '@types/node@20.19.22':
-    dependencies:
-      undici-types: 6.21.0
-
-  '@types/qrcode@1.5.6':
-    dependencies:
-      '@types/node': 20.19.22
-
-  '@types/react-dom@19.2.2(@types/react@19.2.2)':
-    dependencies:
-      '@types/react': 19.2.2
-
-  '@types/react@19.2.2':
-    dependencies:
-      csstype: 3.1.3
-
-  '@typescript-eslint/eslint-plugin@8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.52.0
-      '@typescript-eslint/type-utils': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.52.0
-      eslint: 9.38.0(jiti@2.6.1)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.52.0
-      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.52.0
-      debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.52.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.52.0
-      debug: 4.4.3
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/scope-manager@8.52.0':
-    dependencies:
-      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/visitor-keys': 8.52.0
-
-  '@typescript-eslint/tsconfig-utils@8.52.0(typescript@5.9.3)':
-    dependencies:
-      typescript: 5.9.3
-
-  '@typescript-eslint/type-utils@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.52.0': {}
-
-  '@typescript-eslint/typescript-estree@8.52.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/visitor-keys': 8.52.0
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.38.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.52.0
-      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/visitor-keys@8.52.0':
-    dependencies:
-      '@typescript-eslint/types': 8.52.0
-      eslint-visitor-keys: 4.2.1
-
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
-
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    optional: true
-
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    optional: true
-
-  acorn-jsx@5.3.2(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
-
-  acorn@8.15.0: {}
-
-  ajv@6.12.6:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
-
-  ansi-regex@5.0.1: {}
-
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
-  argparse@2.0.1: {}
-
-  aria-hidden@1.2.6:
-    dependencies:
-      tslib: 2.8.1
-
-  aria-query@5.3.2: {}
-
-  array-buffer-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      is-array-buffer: 3.0.5
-
-  array-includes@3.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
-
-  array.prototype.findlast@1.2.5:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.findlastindex@1.2.6:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flat@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flatmap@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.tosorted@1.1.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.1.0
-
-  arraybuffer.prototype.slice@1.0.4:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.5
-
-  ast-types-flow@0.0.8: {}
-
-  async-function@1.0.0: {}
-
-  asynckit@0.4.0: {}
-
-  available-typed-arrays@1.0.7:
-    dependencies:
-      possible-typed-array-names: 1.1.0
-
-  axe-core@4.11.0: {}
-
-  axios@1.13.2:
-    dependencies:
-      follow-redirects: 1.15.11
-      form-data: 4.0.4
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
-  axobject-query@4.1.0: {}
-
-  balanced-match@1.0.2: {}
-
-  brace-expansion@1.1.12:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
-
-  brace-expansion@2.0.2:
-    dependencies:
-      balanced-match: 1.0.2
-
-  braces@3.0.3:
-    dependencies:
-      fill-range: 7.1.1
-
-  call-bind-apply-helpers@1.0.2:
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-
-  call-bind@1.0.8:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      get-intrinsic: 1.3.0
-      set-function-length: 1.2.2
-
-  call-bound@1.0.4:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
-
-  callsites@3.1.0: {}
-
-  camelcase@5.3.1: {}
-
-  caniuse-lite@1.0.30001762: {}
-
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
-
-  client-only@0.0.1: {}
-
-  cliui@6.0.0:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-
-  clsx@2.1.1: {}
-
-  cmdk@1.1.1(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.2)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
-
-  color-name@1.1.4: {}
-
-  combined-stream@1.0.8:
-    dependencies:
-      delayed-stream: 1.0.0
-
-  concat-map@0.0.1: {}
-
-  cross-spawn@7.0.6:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
-  csstype@3.1.3: {}
-
-  d3-array@3.2.4:
-    dependencies:
-      internmap: 2.0.3
-
-  d3-color@3.1.0: {}
-
-  d3-ease@3.0.1: {}
-
-  d3-format@3.1.0: {}
-
-  d3-interpolate@3.0.1:
-    dependencies:
-      d3-color: 3.1.0
-
-  d3-path@3.1.0: {}
-
-  d3-scale@4.0.2:
-    dependencies:
-      d3-array: 3.2.4
-      d3-format: 3.1.0
-      d3-interpolate: 3.0.1
-      d3-time: 3.1.0
-      d3-time-format: 4.1.0
-
-  d3-shape@3.2.0:
-    dependencies:
-      d3-path: 3.1.0
-
-  d3-time-format@4.1.0:
-    dependencies:
-      d3-time: 3.1.0
-
-  d3-time@3.1.0:
-    dependencies:
-      d3-array: 3.2.4
-
-  d3-timer@3.0.1: {}
-
-  damerau-levenshtein@1.0.8: {}
-
-  data-view-buffer@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-offset@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  date-fns-jalali@4.1.0-0: {}
-
-  date-fns@4.1.0: {}
-
-  debug@3.2.7:
-    dependencies:
-      ms: 2.1.3
-
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
-
-  decamelize@1.2.0: {}
-
-  decimal.js-light@2.5.1: {}
-
-  deep-is@0.1.4: {}
-
-  define-data-property@1.1.4:
-    dependencies:
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      gopd: 1.2.0
-
-  define-properties@1.2.1:
-    dependencies:
-      define-data-property: 1.1.4
-      has-property-descriptors: 1.0.2
-      object-keys: 1.1.1
-
-  delayed-stream@1.0.0: {}
-
-  detect-libc@2.1.2: {}
-
-  detect-node-es@1.1.0: {}
-
-  dijkstrajs@1.0.3: {}
-
-  doctrine@2.1.0:
-    dependencies:
-      esutils: 2.0.3
-
-  dom-helpers@5.2.1:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      csstype: 3.1.3
-
-  dunder-proto@1.0.1:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-errors: 1.3.0
-      gopd: 1.2.0
-
-  embla-carousel-react@8.6.0(react@19.2.0):
-    dependencies:
-      embla-carousel: 8.6.0
-      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
-      react: 19.2.0
-
-  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
-    dependencies:
-      embla-carousel: 8.6.0
-
-  embla-carousel@8.6.0: {}
-
-  emoji-regex@8.0.0: {}
-
-  emoji-regex@9.2.2: {}
-
-  enhanced-resolve@5.18.4:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
-
-  es-abstract@1.24.0:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-negative-zero: 2.0.3
-      is-regex: 1.2.1
-      is-set: 2.0.3
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      stop-iteration-iterator: 1.1.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
-
-  es-abstract@1.24.1:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-negative-zero: 2.0.3
-      is-regex: 1.2.1
-      is-set: 2.0.3
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      stop-iteration-iterator: 1.1.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
-
-  es-define-property@1.0.1: {}
-
-  es-errors@1.3.0: {}
-
-  es-iterator-helpers@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.1.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      iterator.prototype: 1.1.5
-      safe-array-concat: 1.1.3
-
-  es-object-atoms@1.1.1:
-    dependencies:
-      es-errors: 1.3.0
-
-  es-set-tostringtag@2.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
-  es-shim-unscopables@1.1.0:
-    dependencies:
-      hasown: 2.0.2
-
-  es-to-primitive@1.3.0:
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.1.0
-      is-symbol: 1.1.1
-
-  escape-string-regexp@4.0.0: {}
-
-  eslint-config-next@15.5.9(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
-    dependencies:
-      '@next/eslint-plugin-next': 15.5.9
-      '@rushstack/eslint-patch': 1.15.0
-      '@typescript-eslint/eslint-plugin': 8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-react: 7.37.5(eslint@9.38.0(jiti@2.6.1))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.38.0(jiti@2.6.1))
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
-  eslint-config-prettier@10.1.8(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
-
-  eslint-import-resolver-node@0.3.9:
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.16.1
-      resolve: 1.22.11
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
-      get-tsconfig: 4.13.0
-      is-bun-module: 2.0.0
-      stable-hash: 0.0.5
-      tinyglobby: 0.2.15
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.38.0(jiti@2.6.1))
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1))
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.52.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.11.0
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 9.38.0(jiti@2.6.1)
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
-  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.38.0(jiti@2.6.1)))(eslint@9.38.0(jiti@2.6.1))(prettier@3.6.2):
-    dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
-      prettier: 3.6.2
-      prettier-linter-helpers: 1.0.0
-      synckit: 0.11.11
-    optionalDependencies:
-      eslint-config-prettier: 10.1.8(eslint@9.38.0(jiti@2.6.1))
-
-  eslint-plugin-react-hooks@5.2.0(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
-
-  eslint-plugin-react@7.37.5(eslint@9.38.0(jiti@2.6.1)):
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.38.0(jiti@2.6.1)
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.0
-
-  eslint-scope@8.4.0:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
-  eslint-visitor-keys@3.4.3: {}
-
-  eslint-visitor-keys@4.2.1: {}
-
-  eslint@9.38.0(jiti@2.6.1):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.1
-      '@eslint/core': 0.16.0
-      '@eslint/eslintrc': 3.3.3
-      '@eslint/js': 9.38.0
-      '@eslint/plugin-kit': 0.4.0
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      esquery: 1.6.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    optionalDependencies:
-      jiti: 2.6.1
-    transitivePeerDependencies:
-      - supports-color
-
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 4.2.1
-
-  esquery@1.6.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  esrecurse@4.3.0:
-    dependencies:
-      estraverse: 5.3.0
-
-  estraverse@5.3.0: {}
-
-  esutils@2.0.3: {}
-
-  eventemitter3@4.0.7: {}
-
-  fast-deep-equal@3.1.3: {}
-
-  fast-diff@1.3.0: {}
-
-  fast-equals@5.3.2: {}
-
-  fast-glob@3.3.1:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
-  fast-json-stable-stringify@2.1.0: {}
-
-  fast-levenshtein@2.0.6: {}
-
-  fastq@1.20.1:
-    dependencies:
-      reusify: 1.1.0
-
-  fdir@6.5.0(picomatch@4.0.3):
-    optionalDependencies:
-      picomatch: 4.0.3
-
-  file-entry-cache@8.0.0:
-    dependencies:
-      flat-cache: 4.0.1
-
-  fill-range@7.1.1:
-    dependencies:
-      to-regex-range: 5.0.1
-
-  find-up@4.1.0:
-    dependencies:
-      locate-path: 5.0.0
-      path-exists: 4.0.0
-
-  find-up@5.0.0:
-    dependencies:
-      locate-path: 6.0.0
-      path-exists: 4.0.0
-
-  flat-cache@4.0.1:
-    dependencies:
-      flatted: 3.3.3
-      keyv: 4.5.4
-
-  flatted@3.3.3: {}
-
-  follow-redirects@1.15.11: {}
-
-  for-each@0.3.5:
-    dependencies:
-      is-callable: 1.2.7
-
-  form-data@4.0.4:
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      es-set-tostringtag: 2.1.0
-      hasown: 2.0.2
-      mime-types: 2.1.35
-
-  function-bind@1.1.2: {}
-
-  function.prototype.name@1.1.8:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      functions-have-names: 1.2.3
-      hasown: 2.0.2
-      is-callable: 1.2.7
-
-  functions-have-names@1.2.3: {}
-
-  generator-function@2.0.1: {}
-
-  get-caller-file@2.0.5: {}
-
-  get-intrinsic@1.3.0:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      function-bind: 1.1.2
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      math-intrinsics: 1.1.0
-
-  get-nonce@1.0.1: {}
-
-  get-proto@1.0.1:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
-
-  get-symbol-description@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-
-  get-tsconfig@4.13.0:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
-  glob-parent@5.1.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  globals@14.0.0: {}
-
-  globalthis@1.0.4:
-    dependencies:
-      define-properties: 1.2.1
-      gopd: 1.2.0
-
-  gopd@1.2.0: {}
-
-  graceful-fs@4.2.11: {}
-
-  has-bigints@1.1.0: {}
-
-  has-flag@4.0.0: {}
-
-  has-property-descriptors@1.0.2:
-    dependencies:
-      es-define-property: 1.0.1
-
-  has-proto@1.2.0:
-    dependencies:
-      dunder-proto: 1.0.1
-
-  has-symbols@1.1.0: {}
-
-  has-tostringtag@1.0.2:
-    dependencies:
-      has-symbols: 1.1.0
-
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
-  ignore@5.3.2: {}
-
-  ignore@7.0.5: {}
-
-  import-fresh@3.3.1:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
-  imurmurhash@0.1.4: {}
-
-  input-otp@1.4.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
-  internal-slot@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.2
-      side-channel: 1.1.0
-
-  internmap@2.0.3: {}
-
-  is-array-buffer@3.0.5:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
-  is-async-function@2.1.1:
-    dependencies:
-      async-function: 1.0.0
-      call-bound: 1.0.4
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
-
-  is-bigint@1.1.0:
-    dependencies:
-      has-bigints: 1.1.0
-
-  is-boolean-object@1.2.2:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-bun-module@2.0.0:
-    dependencies:
-      semver: 7.7.3
-
-  is-callable@1.2.7: {}
-
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
-  is-data-view@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      is-typed-array: 1.1.15
-
-  is-date-object@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-extglob@2.1.1: {}
-
-  is-finalizationregistry@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-fullwidth-code-point@3.0.0: {}
-
-  is-generator-function@1.1.2:
-    dependencies:
-      call-bound: 1.0.4
-      generator-function: 2.0.1
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
-
-  is-glob@4.0.3:
-    dependencies:
-      is-extglob: 2.1.1
-
-  is-map@2.0.3: {}
-
-  is-negative-zero@2.0.3: {}
-
-  is-number-object@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-number@7.0.0: {}
-
-  is-regex@1.2.1:
-    dependencies:
-      call-bound: 1.0.4
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-
-  is-set@2.0.3: {}
-
-  is-shared-array-buffer@1.0.4:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-string@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-symbol@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-symbols: 1.1.0
-      safe-regex-test: 1.1.0
-
-  is-typed-array@1.1.15:
-    dependencies:
-      which-typed-array: 1.1.19
-
-  is-weakmap@2.0.2: {}
-
-  is-weakref@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-weakset@2.0.4:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
-  isarray@2.0.5: {}
-
-  isexe@2.0.0: {}
-
-  iterator.prototype@1.1.5:
-    dependencies:
-      define-data-property: 1.1.4
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      has-symbols: 1.1.0
-      set-function-name: 2.0.2
-
-  jiti@2.6.1: {}
-
-  js-tokens@4.0.0: {}
-
-  js-yaml@4.1.1:
-    dependencies:
-      argparse: 2.0.1
-
-  json-buffer@3.0.1: {}
-
-  json-schema-traverse@0.4.1: {}
-
-  json-stable-stringify-without-jsonify@1.0.1: {}
-
-  json5@1.0.2:
-    dependencies:
-      minimist: 1.2.8
-
-  jsx-ast-utils@3.3.5:
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.flat: 1.3.3
-      object.assign: 4.1.7
-      object.values: 1.2.1
-
-  keyv@4.5.4:
-    dependencies:
-      json-buffer: 3.0.1
-
-  language-subtag-registry@0.3.23: {}
-
-  language-tags@1.0.9:
-    dependencies:
-      language-subtag-registry: 0.3.23
-
-  levn@0.4.1:
-    dependencies:
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-
-  lightningcss-android-arm64@1.30.2:
-    optional: true
-
-  lightningcss-darwin-arm64@1.30.2:
-    optional: true
-
-  lightningcss-darwin-x64@1.30.2:
-    optional: true
-
-  lightningcss-freebsd-x64@1.30.2:
-    optional: true
-
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    optional: true
-
-  lightningcss-linux-arm64-gnu@1.30.2:
-    optional: true
-
-  lightningcss-linux-arm64-musl@1.30.2:
-    optional: true
-
-  lightningcss-linux-x64-gnu@1.30.2:
-    optional: true
-
-  lightningcss-linux-x64-musl@1.30.2:
-    optional: true
-
-  lightningcss-win32-arm64-msvc@1.30.2:
-    optional: true
-
-  lightningcss-win32-x64-msvc@1.30.2:
-    optional: true
-
-  lightningcss@1.30.2:
-    dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      lightningcss-android-arm64: 1.30.2
-      lightningcss-darwin-arm64: 1.30.2
-      lightningcss-darwin-x64: 1.30.2
-      lightningcss-freebsd-x64: 1.30.2
-      lightningcss-linux-arm-gnueabihf: 1.30.2
-      lightningcss-linux-arm64-gnu: 1.30.2
-      lightningcss-linux-arm64-musl: 1.30.2
-      lightningcss-linux-x64-gnu: 1.30.2
-      lightningcss-linux-x64-musl: 1.30.2
-      lightningcss-win32-arm64-msvc: 1.30.2
-      lightningcss-win32-x64-msvc: 1.30.2
-
-  locate-path@5.0.0:
-    dependencies:
-      p-locate: 4.1.0
-
-  locate-path@6.0.0:
-    dependencies:
-      p-locate: 5.0.0
-
-  lodash.merge@4.6.2: {}
-
-  lodash@4.17.21: {}
-
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-
-  lucide-react@0.562.0(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-
-  magic-string@0.30.21:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
-  math-intrinsics@1.1.0: {}
-
-  merge2@1.4.1: {}
-
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
-
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
-  minimatch@3.1.2:
-    dependencies:
-      brace-expansion: 1.1.12
-
-  minimatch@9.0.5:
-    dependencies:
-      brace-expansion: 2.0.2
-
-  minimist@1.2.8: {}
-
-  ms@2.1.3: {}
-
-  nanoid@3.3.11: {}
-
-  napi-postinstall@0.3.4: {}
-
-  natural-compare@1.4.0: {}
-
-  next-themes@0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
-  next@15.5.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@next/env': 15.5.9
-      '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001762
-      postcss: 8.4.31
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      styled-jsx: 5.1.6(react@19.2.0)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 15.5.7
-      '@next/swc-darwin-x64': 15.5.7
-      '@next/swc-linux-arm64-gnu': 15.5.7
-      '@next/swc-linux-arm64-musl': 15.5.7
-      '@next/swc-linux-x64-gnu': 15.5.7
-      '@next/swc-linux-x64-musl': 15.5.7
-      '@next/swc-win32-arm64-msvc': 15.5.7
-      '@next/swc-win32-x64-msvc': 15.5.7
-      sharp: 0.34.5
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
-  object-assign@4.1.1: {}
-
-  object-inspect@1.13.4: {}
-
-  object-keys@1.1.1: {}
-
-  object.assign@4.1.7:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-      has-symbols: 1.1.0
-      object-keys: 1.1.1
-
-  object.entries@1.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  object.fromentries@2.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-
-  object.groupby@1.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-
-  object.values@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  optionator@0.9.4:
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.4.1
-      prelude-ls: 1.2.1
-      type-check: 0.4.0
-      word-wrap: 1.2.5
-
-  own-keys@1.0.1:
-    dependencies:
-      get-intrinsic: 1.3.0
-      object-keys: 1.1.1
-      safe-push-apply: 1.0.0
-
-  p-limit@2.3.0:
-    dependencies:
-      p-try: 2.2.0
-
-  p-limit@3.1.0:
-    dependencies:
-      yocto-queue: 0.1.0
-
-  p-locate@4.1.0:
-    dependencies:
-      p-limit: 2.3.0
-
-  p-locate@5.0.0:
-    dependencies:
-      p-limit: 3.1.0
-
-  p-try@2.2.0: {}
-
-  parent-module@1.0.1:
-    dependencies:
-      callsites: 3.1.0
-
-  path-exists@4.0.0: {}
-
-  path-key@3.1.1: {}
-
-  path-parse@1.0.7: {}
-
-  picocolors@1.1.1: {}
-
-  picomatch@2.3.1: {}
-
-  picomatch@4.0.3: {}
-
-  pngjs@5.0.0: {}
-
-  possible-typed-array-names@1.1.0: {}
-
-  postcss@8.4.31:
-    dependencies:
-      nanoid: 3.3.11
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  postcss@8.5.6:
-    dependencies:
-      nanoid: 3.3.11
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
-  prelude-ls@1.2.1: {}
-
-  prettier-linter-helpers@1.0.0:
-    dependencies:
-      fast-diff: 1.3.0
-
-  prettier-plugin-tailwindcss@0.6.14(prettier@3.6.2):
-    dependencies:
-      prettier: 3.6.2
-
-  prettier@3.6.2: {}
-
-  prop-types@15.8.1:
+  /prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
+    dev: true
 
-  proxy-from-env@1.1.0: {}
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
 
-  punycode@2.3.1: {}
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+    dev: true
 
-  qrcode.react@4.2.0(react@19.2.0):
+  /qrcode.react@4.2.0(react@19.2.4):
+    resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
-      react: 19.2.0
+      react: 19.2.4
+    dev: false
 
-  qrcode@1.5.4:
+  /qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
     dependencies:
       dijkstrajs: 1.0.3
       pngjs: 5.0.0
       yargs: 15.4.1
+    dev: false
 
-  queue-microtask@1.2.3: {}
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: true
 
-  react-day-picker@9.11.1(react@19.2.0):
+  /radix-ui@1.4.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
+
+  /react-day-picker@9.13.2(react@19.2.4):
+    resolution: {integrity: sha512-IMPiXfXVIAuR5Yk58DDPBC8QKClrhdXV+Tr/alBrwrHUw0qDDYB1m5zPNuTnnPIr/gmJ4ChMxmtqPdxm8+R4Eg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
     dependencies:
       '@date-fns/tz': 1.4.1
       date-fns: 4.1.0
       date-fns-jalali: 4.1.0-0
-      react: 19.2.0
+      react: 19.2.4
+    dev: false
 
-  react-dom@19.2.0(react@19.2.0):
+  /react-dom@19.2.4(react@19.2.4):
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
     dependencies:
-      react: 19.2.0
+      react: 19.2.4
       scheduler: 0.27.0
+    dev: false
 
-  react-hook-form@7.65.0(react@19.2.0):
+  /react-hook-form@7.71.2(react@19.2.4):
+    resolution: {integrity: sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
     dependencies:
-      react: 19.2.0
+      react: 19.2.4
+    dev: false
 
-  react-is@16.13.1: {}
+  /react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: true
 
-  react-is@18.3.1: {}
+  /react-is@19.2.4:
+    resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
+    dev: false
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.2)(react@19.2.0):
+  /react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1):
+    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
     dependencies:
-      react: 19.2.0
-      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.0)
+      '@types/react': 19.2.14
+      '@types/use-sync-external-store': 0.0.6
+      react: 19.2.4
+      redux: 5.0.1
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    dev: false
+
+  /react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
       tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.2
+    dev: false
 
-  react-remove-scroll@2.7.1(@types/react@19.2.2)(react@19.2.0):
+  /react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
     dependencies:
-      react: 19.2.0
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.2)(react@19.2.0)
-      react-style-singleton: 2.2.3(@types/react@19.2.2)(react@19.2.0)
+      '@types/react': 19.2.14
+      react: 19.2.4
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.4)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.2)(react@19.2.0)
-      use-sidecar: 1.1.3(@types/react@19.2.2)(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.2
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
+    dev: false
 
-  react-resizable-panels@2.1.9(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  /react-resizable-panels@4.6.5(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-pmQP6qv9KmsesNMvWVNvVfVJAwYSOWWbAOAtrPR8Cre20+j1NWIlyft0btjtDQE+OepXmI6g3VPrCXQY0oD7+Q==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
     dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  react-smooth@4.0.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      fast-equals: 5.3.2
-      prop-types: 15.8.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-transition-group: 4.4.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-
-  react-style-singleton@2.2.3(@types/react@19.2.2)(react@19.2.0):
+  /react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
     dependencies:
+      '@types/react': 19.2.14
       get-nonce: 1.0.1
-      react: 19.2.0
+      react: 19.2.4
       tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.2
+    dev: false
 
-  react-transition-group@4.4.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@babel/runtime': 7.28.4
-      dom-helpers: 5.2.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-
-  react@19.2.0: {}
-
-  recharts-scale@0.4.5:
-    dependencies:
-      decimal.js-light: 2.5.1
-
-  recharts@2.15.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  /react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  /recharts@3.7.0(@types/react@19.2.14)(react-dom@19.2.4)(react-is@19.2.4)(react@19.2.4)(redux@5.0.1):
+    resolution: {integrity: sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
+      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0)(react@19.2.4)
       clsx: 2.1.1
-      eventemitter3: 4.0.7
-      lodash: 4.17.21
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-is: 18.3.1
-      react-smooth: 4.0.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      recharts-scale: 0.4.5
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.44.0
+      eventemitter3: 5.0.4
+      immer: 10.2.0
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-is: 19.2.4
+      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1)
+      reselect: 5.1.1
       tiny-invariant: 1.3.3
-      victory-vendor: 36.9.2
+      use-sync-external-store: 1.6.0(react@19.2.4)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+    dev: false
 
-  reflect.getprototypeof@1.0.10:
+  /redux-thunk@3.1.0(redux@5.0.1):
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+    dependencies:
+      redux: 5.0.1
+    dev: false
+
+  /redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+    dev: false
+
+  /reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
+    dev: true
 
-  regexp.prototype.flags@1.5.4:
+  /regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
@@ -7532,61 +5614,112 @@ snapshots:
       get-proto: 1.0.1
       gopd: 1.2.0
       set-function-name: 2.0.2
+    dev: true
 
-  require-directory@2.1.1: {}
+  /require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
 
-  require-main-filename@2.0.0: {}
+  /require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+    dev: false
 
-  resolve-from@4.0.0: {}
+  /reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+    dev: false
 
-  resolve-pkg-maps@1.0.0: {}
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+    dev: true
 
-  resolve@1.22.11:
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
+  /resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: true
 
-  resolve@2.0.0-next.5:
+  /resolve@2.0.0-next.6:
+    resolution: {integrity: sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
     dependencies:
+      es-errors: 1.3.0
       is-core-module: 2.16.1
+      node-exports-info: 1.6.0
+      object-keys: 1.1.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: true
 
-  reusify@1.1.0: {}
+  /reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
 
-  run-parallel@1.2.0:
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
+    dev: true
 
-  safe-array-concat@1.1.3:
+  /safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
       has-symbols: 1.1.0
       isarray: 2.0.5
+    dev: true
 
-  safe-push-apply@1.0.0:
+  /safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
       isarray: 2.0.5
+    dev: true
 
-  safe-regex-test@1.1.0:
+  /safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       is-regex: 1.2.1
+    dev: true
 
-  scheduler@0.27.0: {}
+  /scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+    dev: false
 
-  semver@6.3.1: {}
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
 
-  semver@7.7.3: {}
+  /semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
 
-  set-blocking@2.0.0: {}
+  /set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+    dev: false
 
-  set-function-length@1.2.2:
+  /set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       define-data-property: 1.1.4
       es-errors: 1.3.0
@@ -7594,25 +5727,35 @@ snapshots:
       get-intrinsic: 1.3.0
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
+    dev: true
 
-  set-function-name@2.0.2:
+  /set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
       define-data-property: 1.1.4
       es-errors: 1.3.0
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
+    dev: true
 
-  set-proto@1.0.0:
+  /set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       dunder-proto: 1.0.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
+    dev: true
 
-  sharp@0.34.5:
+  /sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    requiresBuild: true
     dependencies:
       '@img/colour': 1.0.0
       detect-libc: 2.1.2
-      semver: 7.7.3
+      semver: 7.7.4
     optionalDependencies:
       '@img/sharp-darwin-arm64': 0.34.5
       '@img/sharp-darwin-x64': 0.34.5
@@ -7638,74 +5781,113 @@ snapshots:
       '@img/sharp-win32-arm64': 0.34.5
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
+    dev: false
     optional: true
 
-  shebang-command@2.0.0:
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
+    dev: true
 
-  shebang-regex@3.0.0: {}
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
 
-  side-channel-list@1.0.0:
+  /side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
+    dev: true
 
-  side-channel-map@1.0.1:
+  /side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       object-inspect: 1.13.4
+    dev: true
 
-  side-channel-weakmap@1.0.2:
+  /side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       object-inspect: 1.13.4
       side-channel-map: 1.0.1
+    dev: true
 
-  side-channel@1.1.0:
+  /side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
       side-channel-list: 1.0.0
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
+    dev: true
 
-  sonner@2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  /sonner@2.0.7(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    dev: false
 
-  source-map-js@1.2.1: {}
+  /source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
 
-  stable-hash@0.0.5: {}
+  /stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+    dev: true
 
-  stop-iteration-iterator@1.1.0:
+  /stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
+    dev: true
 
-  string-width@4.2.3:
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
     dependencies:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
+    dev: false
 
-  string.prototype.includes@2.0.1:
+  /string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
       es-abstract: 1.24.1
+    dev: true
 
-  string.prototype.matchall@4.0.12:
+  /string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -7715,109 +5897,185 @@ snapshots:
       regexp.prototype.flags: 1.5.4
       set-function-name: 2.0.2
       side-channel: 1.1.0
+    dev: true
 
-  string.prototype.repeat@1.0.0:
+  /string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
+    dev: true
 
-  string.prototype.trim@1.2.10:
+  /string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-data-property: 1.1.4
       define-properties: 1.2.1
-      es-abstract: 1.24.0
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
       has-property-descriptors: 1.0.2
+    dev: true
 
-  string.prototype.trimend@1.0.9:
+  /string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
+    dev: true
 
-  string.prototype.trimstart@1.0.8:
+  /string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
+    dev: true
 
-  strip-ansi@6.0.1:
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
+    dev: false
 
-  strip-bom@3.0.0: {}
+  /strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
 
-  strip-json-comments@3.1.1: {}
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
 
-  styled-jsx@5.1.6(react@19.2.0):
+  /styled-jsx@5.1.6(@babel/core@7.29.0)(react@19.2.4):
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
     dependencies:
+      '@babel/core': 7.29.0
       client-only: 0.0.1
-      react: 19.2.0
+      react: 19.2.4
+    dev: false
 
-  supports-color@7.2.0:
-    dependencies:
-      has-flag: 4.0.0
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
 
-  supports-preserve-symlinks-flag@1.0.0: {}
-
-  synckit@0.11.11:
+  /synckit@0.11.12:
+    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
       '@pkgr/core': 0.2.9
+    dev: true
 
-  tailwind-merge@3.3.1: {}
+  /tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+    dev: false
 
-  tailwindcss@4.1.18: {}
+  /tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+    dev: false
 
-  tapable@2.3.0: {}
+  /tailwindcss@4.2.0:
+    resolution: {integrity: sha512-yYzTZ4++b7fNYxFfpnberEEKu43w44aqDMNM9MHMmcKuCH7lL8jJ4yJ7LGHv7rSwiqM0nkiobF9I6cLlpS2P7Q==}
+    dev: true
 
-  tiny-invariant@1.3.3: {}
+  /tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+    dev: true
 
-  tinyglobby@0.2.15:
+  /tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+    dev: false
+
+  /tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
+    dev: true
 
-  to-regex-range@5.0.1:
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
+    dev: true
 
-  ts-api-utils@2.4.0(typescript@5.9.3):
+  /ts-api-utils@2.4.0(typescript@5.9.3):
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
     dependencies:
       typescript: 5.9.3
+    dev: true
 
-  tsconfig-paths@3.15.0:
+  /tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
     dependencies:
       '@types/json5': 0.0.29
       json5: 1.0.2
       minimist: 1.2.8
       strip-bom: 3.0.0
+    dev: true
 
-  tslib@2.8.1: {}
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tw-animate-css@1.4.0: {}
+  /tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+    dev: false
 
-  type-check@0.4.0:
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
     dependencies:
       prelude-ls: 1.2.1
+    dev: true
 
-  typed-array-buffer@1.0.3:
+  /typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       is-typed-array: 1.1.15
+    dev: true
 
-  typed-array-byte-length@1.0.3:
+  /typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       for-each: 0.3.5
       gopd: 1.2.0
       has-proto: 1.2.0
       is-typed-array: 1.1.15
+    dev: true
 
-  typed-array-byte-offset@1.0.4:
+  /typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
@@ -7826,8 +6084,11 @@ snapshots:
       has-proto: 1.2.0
       is-typed-array: 1.1.15
       reflect.getprototypeof: 1.0.10
+    dev: true
 
-  typed-array-length@1.0.7:
+  /typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.8
       for-each: 0.3.5
@@ -7835,19 +6096,48 @@ snapshots:
       is-typed-array: 1.1.15
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
+    dev: true
 
-  typescript@5.9.3: {}
+  /typescript-eslint@8.56.0(eslint@10.0.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.56.0(@typescript-eslint/parser@8.56.0)(eslint@10.0.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.0(eslint@10.0.1)(typescript@5.9.3)
+      eslint: 10.0.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
 
-  unbox-primitive@1.1.0:
+  /typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bound: 1.0.4
       has-bigints: 1.1.0
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
+    dev: true
 
-  undici-types@6.21.0: {}
+  /undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+    dev: true
 
-  unrs-resolver@1.11.1:
+  /unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+    requiresBuild: true
     dependencies:
       napi-postinstall: 0.3.4
     optionalDependencies:
@@ -7870,37 +6160,85 @@ snapshots:
       '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
       '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
       '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+    dev: true
 
-  uri-js@4.4.1:
+  /update-browserslist-db@1.2.3(browserslist@4.28.1):
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
       punycode: 2.3.1
+    dev: true
 
-  use-callback-ref@1.3.3(@types/react@19.2.2)(react@19.2.0):
+  /use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
     dependencies:
-      react: 19.2.0
+      '@types/react': 19.2.14
+      react: 19.2.4
       tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.2
+    dev: false
 
-  use-sidecar@1.1.3(@types/react@19.2.2)(react@19.2.0):
+  /use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
     dependencies:
+      '@types/react': 19.2.14
       detect-node-es: 1.1.0
-      react: 19.2.0
+      react: 19.2.4
       tslib: 2.8.1
-    optionalDependencies:
-      '@types/react': 19.2.2
+    dev: false
 
-  use-sync-external-store@1.6.0(react@19.2.0):
+  /use-sync-external-store@1.6.0(react@19.2.4):
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     dependencies:
-      react: 19.2.0
+      react: 19.2.4
+    dev: false
 
-  victory-vendor@36.9.2:
+  /vaul@1.1.2(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4):
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.14)(react-dom@19.2.4)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
+
+  /victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
     dependencies:
       '@types/d3-array': 3.2.2
       '@types/d3-ease': 3.0.2
       '@types/d3-interpolate': 3.0.4
       '@types/d3-scale': 4.0.9
-      '@types/d3-shape': 3.1.7
+      '@types/d3-shape': 3.1.8
       '@types/d3-time': 3.0.4
       '@types/d3-timer': 3.0.2
       d3-array: 3.2.4
@@ -7910,16 +6248,22 @@ snapshots:
       d3-shape: 3.2.0
       d3-time: 3.1.0
       d3-timer: 3.0.1
+    dev: false
 
-  which-boxed-primitive@1.1.1:
+  /which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
     dependencies:
       is-bigint: 1.1.0
       is-boolean-object: 1.2.2
       is-number-object: 1.1.1
       is-string: 1.1.1
       is-symbol: 1.1.1
+    dev: true
 
-  which-builtin-type@1.2.1:
+  /which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
     dependencies:
       call-bound: 1.0.4
       function.prototype.name: 1.1.8
@@ -7933,18 +6277,26 @@ snapshots:
       isarray: 2.0.5
       which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.19
+      which-typed-array: 1.1.20
+    dev: true
 
-  which-collection@1.0.2:
+  /which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
     dependencies:
       is-map: 2.0.3
       is-set: 2.0.3
       is-weakmap: 2.0.2
       is-weakset: 2.0.4
+    dev: true
 
-  which-module@2.0.1: {}
+  /which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+    dev: false
 
-  which-typed-array@1.1.19:
+  /which-typed-array@1.1.20:
+    resolution: {integrity: sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==}
+    engines: {node: '>= 0.4'}
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
@@ -7953,27 +6305,48 @@ snapshots:
       get-proto: 1.0.1
       gopd: 1.2.0
       has-tostringtag: 1.0.2
+    dev: true
 
-  which@2.0.2:
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
     dependencies:
       isexe: 2.0.0
+    dev: true
 
-  word-wrap@1.2.5: {}
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
 
-  wrap-ansi@6.2.0:
+  /wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
     dependencies:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
+    dev: false
 
-  y18n@4.0.3: {}
+  /y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+    dev: false
 
-  yargs-parser@18.1.3:
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  /yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
     dependencies:
       camelcase: 5.3.1
       decamelize: 1.2.0
+    dev: false
 
-  yargs@15.4.1:
+  /yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
     dependencies:
       cliui: 6.0.0
       decamelize: 1.2.0
@@ -7986,13 +6359,43 @@ snapshots:
       which-module: 2.0.1
       y18n: 4.0.3
       yargs-parser: 18.1.3
+    dev: false
 
-  yocto-queue@0.1.0: {}
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
 
-  zod@3.25.76: {}
+  /zod-validation-error@4.0.2(zod@4.3.6):
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+    dependencies:
+      zod: 4.3.6
+    dev: true
 
-  zustand@5.0.8(@types/react@19.2.2)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0)):
-    optionalDependencies:
-      '@types/react': 19.2.2
-      react: 19.2.0
-      use-sync-external-store: 1.6.0(react@19.2.0)
+  /zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+
+  /zustand@5.0.11(@types/react@19.2.14)(react@19.2.4):
+    resolution: {integrity: sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+    dependencies:
+      '@types/react': 19.2.14
+      react: 19.2.4
+    dev: false
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 4b73c4bc..e7ff3a26 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,7 +23,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
   "include": [
@@ -29,5 +35,7 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }