diff --git a/web/.prettierrc.json b/web/.prettierrc.json
index 77bffdbb..533feb9a 100644
--- a/web/.prettierrc.json
+++ b/web/.prettierrc.json
@@ -1,10 +1,14 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "useTabs": false,
-  "trailingComma": "es5",
-  "printWidth": 80,
-  "arrowParens": "avoid",
-  "endOfLine": "lf"
+  "trailingComma": "all",
+  "printWidth": 100,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "proseWrap": "preserve",
+  "bracketSameLine": false
 }
diff --git a/web/src/components/cooldown-details-dialog.tsx b/web/src/components/cooldown-details-dialog.tsx
index ce498522..f411534c 100644
--- a/web/src/components/cooldown-details-dialog.tsx
+++ b/web/src/components/cooldown-details-dialog.tsx
@@ -1,10 +1,7 @@
-import { useEffect, useState, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { TFunction } from 'i18next'
-import {
-  Dialog,
-  DialogContent,
-} from '@/components/ui/dialog'
+import { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 import {
   Snowflake,
   Clock,
@@ -18,32 +15,38 @@ import {
   Thermometer,
   Calendar,
   Activity,
-} from 'lucide-react'
-import type { Cooldown } from '@/lib/transport/types'
-import { useCooldowns } from '@/hooks/use-cooldowns'
+} from 'lucide-react';
+import type { Cooldown } from '@/lib/transport/types';
+import { useCooldowns } from '@/hooks/use-cooldowns';
 
 interface CooldownDetailsDialogProps {
-  cooldown: Cooldown | null
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onClear: () => void
-  isClearing: boolean
-  onDisable: () => void
-  isDisabling: boolean
+  cooldown: Cooldown | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClear: () => void;
+  isClearing: boolean;
+  onDisable: () => void;
+  isDisabling: boolean;
 }
 
 // Reason 信息和图标 - 使用翻译
 const getReasonInfo = (t: TFunction) => ({
   server_error: {
     label: t('provider.reasons.serverError'),
-    description: t('provider.reasons.serverErrorDesc', '上游服务器返回 5xx 错误，系统自动进入冷却保护'),
+    description: t(
+      'provider.reasons.serverErrorDesc',
+      '上游服务器返回 5xx 错误，系统自动进入冷却保护',
+    ),
     icon: Server,
     color: 'text-red-400',
     bgColor: 'bg-red-400/10 border-red-400/20',
   },
   network_error: {
     label: t('provider.reasons.networkError'),
-    description: t('provider.reasons.networkErrorDesc', '无法连接到上游服务器，可能是网络故障或服务器宕机'),
+    description: t(
+      'provider.reasons.networkErrorDesc',
+      '无法连接到上游服务器，可能是网络故障或服务器宕机',
+    ),
     icon: Wifi,
     color: 'text-amber-400',
     bgColor: 'bg-amber-400/10 border-amber-400/20',
@@ -76,7 +79,7 @@ const getReasonInfo = (t: TFunction) => ({
     color: 'text-muted-foreground',
     bgColor: 'bg-muted border-border',
   },
-})
+});
 
 export function CooldownDetailsDialog({
   cooldown,
@@ -87,38 +90,38 @@ export function CooldownDetailsDialog({
   onDisable,
   isDisabling,
 }: CooldownDetailsDialogProps) {
-  const { t, i18n } = useTranslation()
-  const REASON_INFO = getReasonInfo(t)
+  const { t, i18n } = useTranslation();
+  const REASON_INFO = getReasonInfo(t);
   // 获取 formatRemaining 函数用于实时倒计时
-  const { formatRemaining } = useCooldowns()
+  const { formatRemaining } = useCooldowns();
 
   // 计算初始倒计时值
   const getInitialCountdown = useCallback(() => {
-    return cooldown ? formatRemaining(cooldown) : ''
-  }, [cooldown, formatRemaining])
+    return cooldown ? formatRemaining(cooldown) : '';
+  }, [cooldown, formatRemaining]);
 
   // 实时倒计时状态
-  const [liveCountdown, setLiveCountdown] = useState<string>(getInitialCountdown)
+  const [liveCountdown, setLiveCountdown] = useState<string>(getInitialCountdown);
 
   // 每秒更新倒计时
   useEffect(() => {
-    if (!cooldown) return
+    if (!cooldown) return;
 
     // 每秒更新
     const interval = setInterval(() => {
-      setLiveCountdown(formatRemaining(cooldown))
-    }, 1000)
+      setLiveCountdown(formatRemaining(cooldown));
+    }, 1000);
 
-    return () => clearInterval(interval)
-  }, [cooldown, formatRemaining])
+    return () => clearInterval(interval);
+  }, [cooldown, formatRemaining]);
 
-  if (!cooldown) return null
+  if (!cooldown) return null;
 
-  const reasonInfo = REASON_INFO[cooldown.reason] || REASON_INFO.unknown
-  const Icon = reasonInfo.icon
+  const reasonInfo = REASON_INFO[cooldown.reason] || REASON_INFO.unknown;
+  const Icon = reasonInfo.icon;
 
   const formatUntilTime = (until: string) => {
-    const date = new Date(until)
+    const date = new Date(until);
     return date.toLocaleString(i18n.resolvedLanguage ?? i18n.language, {
       month: '2-digit',
       day: '2-digit',
@@ -126,11 +129,11 @@ export function CooldownDetailsDialog({
       minute: '2-digit',
       second: '2-digit',
       hour12: false,
-    })
-  }
+    });
+  };
 
-  const untilDateStr = formatUntilTime(cooldown.untilTime)
-  const [datePart, timePart] = untilDateStr.split(' ')
+  const untilDateStr = formatUntilTime(cooldown.untilTime);
+  const [datePart, timePart] = untilDateStr.split(' ');
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -149,15 +152,10 @@ export function CooldownDetailsDialog({
 
           <div className="flex flex-col items-center text-center space-y-3">
             <div className="p-3 rounded-2xl bg-cyan-500/10 border border-cyan-400/20 shadow-[0_0_15px_-3px_rgba(6,182,212,0.2)]">
-              <Snowflake
-                size={28}
-                className="text-cyan-400 animate-spin-slow"
-              />
+              <Snowflake size={28} className="text-cyan-400 animate-spin-slow" />
             </div>
             <div>
-              <h2 className="text-xl font-bold text-text-primary">
-                {t('cooldown.title')}
-              </h2>
+              <h2 className="text-xl font-bold text-text-primary">{t('cooldown.title')}</h2>
               <p className="text-xs text-cyan-500/80 font-medium uppercase tracking-wider mt-1">
                 Frozen Protocol Active
               </p>
@@ -193,9 +191,7 @@ export function CooldownDetailsDialog({
                 <Icon size={20} />
               </div>
               <div>
-                <h3 className={`text-sm font-bold ${reasonInfo.color} mb-1`}>
-                  {reasonInfo.label}
-                </h3>
+                <h3 className={`text-sm font-bold ${reasonInfo.color} mb-1`}>{reasonInfo.label}</h3>
                 <p className="text-xs text-muted-foreground leading-relaxed">
                   {reasonInfo.description}
                 </p>
@@ -210,9 +206,7 @@ export function CooldownDetailsDialog({
               <div className="absolute inset-0 bg-cyan-400/5 opacity-50 group-hover:opacity-100 transition-opacity" />
               <div className="relative flex items-center gap-1.5 text-cyan-500 mb-1">
                 <Thermometer size={14} />
-                <span className="text-[10px] font-bold uppercase tracking-widest">
-                  Remaining
-                </span>
+                <span className="text-[10px] font-bold uppercase tracking-widest">Remaining</span>
               </div>
               <div className="relative font-mono text-4xl font-bold text-cyan-400 tracking-widest tabular-nums drop-shadow-[0_0_8px_rgba(34,211,238,0.3)]">
                 {liveCountdown}
@@ -224,18 +218,14 @@ export function CooldownDetailsDialog({
               <span className="text-[10px] text-muted-foreground uppercase tracking-wider font-bold flex items-center gap-1.5">
                 <Clock size={10} /> Resume
               </span>
-              <div className="font-mono text-sm font-semibold text-foreground">
-                {timePart}
-              </div>
+              <div className="font-mono text-sm font-semibold text-foreground">{timePart}</div>
             </div>
 
             <div className="p-3 rounded-xl bg-muted border border-border flex flex-col items-center justify-center gap-1">
               <span className="text-[10px] text-muted-foreground uppercase tracking-wider font-bold flex items-center gap-1.5">
                 <Calendar size={10} /> Date
               </span>
-              <div className="font-mono text-sm font-semibold text-foreground">
-                {datePart}
-              </div>
+              <div className="font-mono text-sm font-semibold text-foreground">{datePart}</div>
             </div>
           </div>
 
@@ -251,9 +241,7 @@ export function CooldownDetailsDialog({
                 {isClearing ? (
                   <>
                     <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                    <span className="text-sm font-bold text-white">
-                      Thawing...
-                    </span>
+                    <span className="text-sm font-bold text-white">Thawing...</span>
                   </>
                 ) : (
                   <>
@@ -290,5 +278,5 @@ export function CooldownDetailsDialog({
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/web/src/components/force-project-dialog.tsx b/web/src/components/force-project-dialog.tsx
index ef0a1cae..c92b818e 100644
--- a/web/src/components/force-project-dialog.tsx
+++ b/web/src/components/force-project-dialog.tsx
@@ -4,10 +4,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-} from '@/components/ui/dialog';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { FolderOpen, AlertCircle, Loader2, Clock, X } from 'lucide-react';
 import { useProjects, useUpdateSessionProject, useRejectSession } from '@/hooks/queries';
 import type { NewSessionPendingEvent } from '@/lib/transport/types';
@@ -16,85 +13,81 @@ import { getClientName, getClientColor } from '@/components/icons/client-icons';
 import { useTranslation } from 'react-i18next';
 
 interface ForceProjectDialogProps {
-  event: NewSessionPendingEvent | null
-  onClose: () => void
-  timeoutSeconds: number
+  event: NewSessionPendingEvent | null;
+  onClose: () => void;
+  timeoutSeconds: number;
 }
 
-export function ForceProjectDialog({
-  event,
-  onClose,
-  timeoutSeconds,
-}: ForceProjectDialogProps) {
-  const { t } = useTranslation()
-  const { data: projects, isLoading } = useProjects()
-  const updateSessionProject = useUpdateSessionProject()
-  const rejectSession = useRejectSession()
-  const [selectedProjectId, setSelectedProjectId] = useState<number>(0)
-  const [remainingTime, setRemainingTime] = useState(timeoutSeconds)
-  const [eventId, setEventId] = useState<string | null>(null)
+export function ForceProjectDialog({ event, onClose, timeoutSeconds }: ForceProjectDialogProps) {
+  const { t } = useTranslation();
+  const { data: projects, isLoading } = useProjects();
+  const updateSessionProject = useUpdateSessionProject();
+  const rejectSession = useRejectSession();
+  const [selectedProjectId, setSelectedProjectId] = useState<number>(0);
+  const [remainingTime, setRemainingTime] = useState(timeoutSeconds);
+  const [eventId, setEventId] = useState<string | null>(null);
 
   // Reset state when event changes
   useEffect(() => {
     if (event && event.sessionID !== eventId) {
-      setEventId(event.sessionID)
-      setSelectedProjectId(0)
-      setRemainingTime(timeoutSeconds)
+      setEventId(event.sessionID);
+      setSelectedProjectId(0);
+      setRemainingTime(timeoutSeconds);
     }
-  }, [event, eventId, timeoutSeconds])
+  }, [event, eventId, timeoutSeconds]);
 
   // Countdown timer
   useEffect(() => {
-    if (!event) return
+    if (!event) return;
 
     const interval = setInterval(() => {
-      setRemainingTime(prev => {
+      setRemainingTime((prev) => {
         if (prev <= 1) {
-          clearInterval(interval)
-          return 0
+          clearInterval(interval);
+          return 0;
         }
-        return prev - 1
-      })
-    }, 1000)
+        return prev - 1;
+      });
+    }, 1000);
 
-    return () => clearInterval(interval)
-  }, [event])
+    return () => clearInterval(interval);
+  }, [event]);
 
   // 超时后关闭弹窗
   useEffect(() => {
     if (remainingTime === 0 && event) {
-      onClose()
+      onClose();
     }
-  }, [remainingTime, event, onClose])
+  }, [remainingTime, event, onClose]);
 
   const handleConfirm = async () => {
-    if (!event || selectedProjectId === 0) return
+    if (!event || selectedProjectId === 0) return;
 
     try {
       await updateSessionProject.mutateAsync({
         sessionID: event.sessionID,
         projectID: selectedProjectId,
-      })
-      onClose()
+      });
+      onClose();
     } catch (error) {
-      console.error('Failed to bind project:', error)
+      console.error('Failed to bind project:', error);
     }
-  }
+  };
 
   const handleReject = async () => {
-    if (!event) return
+    if (!event) return;
 
     try {
-      await rejectSession.mutateAsync(event.sessionID)
-      onClose()
+      await rejectSession.mutateAsync(event.sessionID);
+      onClose();
     } catch (error) {
-      console.error('Failed to reject session:', error)
+      console.error('Failed to reject session:', error);
     }
-  }
+  };
 
-  if (!event) return null
+  if (!event) return null;
 
-  const clientColor = getClientColor(event.clientType)
+  const clientColor = getClientColor(event.clientType);
 
   return (
     <Dialog open={!!event} onOpenChange={(open) => !open && onClose()}>
@@ -148,19 +141,19 @@ export function ForceProjectDialog({
               'relative overflow-hidden rounded-xl border p-5 flex flex-col items-center justify-center group',
               remainingTime <= 10
                 ? 'bg-linear-to-br from-red-950/30 to-transparent border-red-500/20'
-                : 'bg-linear-to-br from-amber-950/30 to-transparent border-amber-500/20'
+                : 'bg-linear-to-br from-amber-950/30 to-transparent border-amber-500/20',
             )}
           >
             <div
               className={cn(
                 'absolute inset-0 opacity-50 group-hover:opacity-100 transition-opacity',
-                remainingTime <= 10 ? 'bg-red-400/5' : 'bg-amber-400/5'
+                remainingTime <= 10 ? 'bg-red-400/5' : 'bg-amber-400/5',
               )}
             />
             <div
               className={cn(
                 'relative flex items-center gap-1.5 mb-1',
-                remainingTime <= 10 ? 'text-red-500' : 'text-amber-500'
+                remainingTime <= 10 ? 'text-red-500' : 'text-amber-500',
               )}
             >
               <Clock size={14} />
@@ -173,7 +166,7 @@ export function ForceProjectDialog({
                 'relative font-mono text-4xl font-bold tracking-widest tabular-nums',
                 remainingTime <= 10
                   ? 'text-red-400 drop-shadow-[0_0_8px_rgba(248,113,113,0.3)]'
-                  : 'text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.3)]'
+                  : 'text-amber-400 drop-shadow-[0_0_8px_rgba(251,191,36,0.3)]',
               )}
             >
               {remainingTime}s
@@ -192,7 +185,7 @@ export function ForceProjectDialog({
               </label>
               {projects && projects.length > 0 ? (
                 <div className="flex flex-wrap gap-2">
-                  {projects.map(project => (
+                  {projects.map((project) => (
                     <button
                       key={project.id}
                       type="button"
@@ -201,7 +194,7 @@ export function ForceProjectDialog({
                         'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all',
                         selectedProjectId === project.id
                           ? 'border-amber-500 bg-amber-500 text-white shadow-lg shadow-amber-500/25'
-                          : 'border-border bg-muted text-foreground hover:bg-accent hover:border-amber-500/50'
+                          : 'border-border bg-muted text-foreground hover:bg-accent hover:border-amber-500/50',
                       )}
                     >
                       <FolderOpen size={14} />
@@ -223,9 +216,7 @@ export function ForceProjectDialog({
               {/* Reject Button */}
               <button
                 onClick={handleReject}
-                disabled={
-                  rejectSession.isPending || updateSessionProject.isPending
-                }
+                disabled={rejectSession.isPending || updateSessionProject.isPending}
                 className="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl border border-red-500/30 bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:border-red-500/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {rejectSession.isPending ? (
@@ -256,9 +247,7 @@ export function ForceProjectDialog({
                   {updateSessionProject.isPending ? (
                     <>
                       <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                      <span className="text-sm font-bold text-white">
-                        绑定中...
-                      </span>
+                      <span className="text-sm font-bold text-white">绑定中...</span>
                     </>
                   ) : (
                     <>
diff --git a/web/src/components/layout/app-layout.tsx b/web/src/components/layout/app-layout.tsx
index 0d446b29..00eb09b6 100644
--- a/web/src/components/layout/app-layout.tsx
+++ b/web/src/components/layout/app-layout.tsx
@@ -1,20 +1,20 @@
-import { Outlet } from 'react-router-dom'
-import { SidebarNav } from './sidebar-nav'
-import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
-import { ForceProjectDialog } from '@/components/force-project-dialog'
-import { usePendingSession } from '@/hooks/use-pending-session'
-import { useSettings } from '@/hooks/queries'
+import { Outlet } from 'react-router-dom';
+import { AppSidebar } from './app-sidebar';
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar';
+import { ForceProjectDialog } from '@/components/force-project-dialog';
+import { usePendingSession } from '@/hooks/use-pending-session';
+import { useSettings } from '@/hooks/queries';
 
 export function AppLayout() {
-  const { pendingSession, clearPendingSession } = usePendingSession()
-  const { data: settings } = useSettings()
+  const { pendingSession, clearPendingSession } = usePendingSession();
+  const { data: settings } = useSettings();
 
-  const forceProjectEnabled = settings?.force_project_binding === 'true'
-  const timeoutSeconds = parseInt(settings?.force_project_timeout || '30', 10)
+  const forceProjectEnabled = settings?.force_project_binding === 'true';
+  const timeoutSeconds = parseInt(settings?.force_project_timeout || '30', 10);
 
   return (
     <SidebarProvider>
-      <SidebarNav />
+      <AppSidebar />
       <SidebarInset>
         {/* Mobile header with sidebar trigger */}
         <header className="flex h-12 items-center gap-2 border-b px-4 md:hidden">
@@ -34,5 +34,5 @@ export function AppLayout() {
         />
       )}
     </SidebarProvider>
-  )
+  );
 }
diff --git a/web/src/components/layout/app-sidebar/client-routes-items.tsx b/web/src/components/layout/app-sidebar/client-routes-items.tsx
new file mode 100644
index 00000000..9542ae6b
--- /dev/null
+++ b/web/src/components/layout/app-sidebar/client-routes-items.tsx
@@ -0,0 +1,69 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+  ClientIcon,
+  allClientTypes,
+  getClientName,
+  getClientColor,
+} from '@/components/icons/client-icons';
+import { StreamingBadge } from '@/components/ui/streaming-badge';
+import { useStreamingRequests } from '@/hooks/use-streaming';
+import type { ClientType } from '@/lib/transport';
+import { SidebarMenuButton, SidebarMenuItem, SidebarMenuBadge } from '@/components/ui/sidebar';
+
+function ClientNavItem({
+  clientType,
+  streamingCount
+}: {
+  clientType: ClientType;
+  streamingCount: number;
+}) {
+  const location = useLocation();
+  const color = getClientColor(clientType);
+  const clientName = getClientName(clientType);
+  const isActive = location.pathname === `/routes/${clientType}`;
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        render={<NavLink to={`/routes/${clientType}`} />}
+        isActive={isActive}
+        tooltip={clientName}
+        className="relative overflow-hidden"
+      >
+        {/* Marquee 背景动画 (仅在有 streaming 请求且未激活时显示) */}
+        {streamingCount > 0 && !isActive && (
+          <div
+            className="absolute inset-0 animate-marquee pointer-events-none opacity-50"
+            style={{ backgroundColor: color }}
+          />
+        )}
+        <ClientIcon type={clientType} size={18} className="relative z-10" />
+        <span className="relative z-10">{clientName}</span>
+      </SidebarMenuButton>
+      {streamingCount > 0 && (
+        <SidebarMenuBadge>
+          <StreamingBadge count={streamingCount} color={color} />
+        </SidebarMenuBadge>
+      )}
+    </SidebarMenuItem>
+  );
+}
+
+/**
+ * Renders all client route items dynamically
+ */
+export function ClientRoutesItems() {
+  const { countsByClient } = useStreamingRequests();
+
+  return (
+    <>
+      {allClientTypes.map((clientType) => (
+        <ClientNavItem
+          key={clientType}
+          clientType={clientType}
+          streamingCount={countsByClient.get(clientType) || 0}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/web/src/components/layout/app-sidebar/index.tsx b/web/src/components/layout/app-sidebar/index.tsx
new file mode 100644
index 00000000..7a6293ad
--- /dev/null
+++ b/web/src/components/layout/app-sidebar/index.tsx
@@ -0,0 +1,42 @@
+import { useProxyStatus } from '@/hooks/queries';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarTrigger,
+} from '@/components/ui/sidebar';
+import { NavProxyStatus } from '../nav-proxy-status';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { SidebarRenderer } from './sidebar-renderer';
+import { sidebarConfig } from './sidebar-config';
+
+export function AppSidebar() {
+  const { data: proxyStatus } = useProxyStatus();
+  const versionDisplay = proxyStatus?.version ?? '...';
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <NavProxyStatus />
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarRenderer config={sidebarConfig} />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <p className="text-caption text-muted-foreground group-data-[collapsible=icon]:hidden mb-2">
+          {versionDisplay}
+        </p>
+        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-stretch">
+          <SidebarTrigger />
+          <ThemeToggle />
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+// Alias for backwards compatibility
+export { AppSidebar as SidebarNav };
diff --git a/web/src/components/layout/app-sidebar/requests-nav-item.tsx b/web/src/components/layout/app-sidebar/requests-nav-item.tsx
new file mode 100644
index 00000000..e6a7d23d
--- /dev/null
+++ b/web/src/components/layout/app-sidebar/requests-nav-item.tsx
@@ -0,0 +1,44 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Activity } from 'lucide-react';
+import { StreamingBadge } from '@/components/ui/streaming-badge';
+import { useStreamingRequests } from '@/hooks/use-streaming';
+import { SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+
+/**
+ * Requests navigation item with streaming badge and marquee animation
+ */
+export function RequestsNavItem() {
+  const location = useLocation();
+  const { total } = useStreamingRequests();
+  const { t } = useTranslation();
+  const isActive =
+    location.pathname === '/requests' || location.pathname.startsWith('/requests/');
+  const color = 'var(--color-success)'; // emerald-500
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        render={<NavLink to="/requests" />}
+        isActive={isActive}
+        tooltip={t('requests.title')}
+        className="relative"
+      >
+        {/* Marquee 背景动画 (仅在有 streaming 请求且未激活时显示) */}
+        {total > 0 && !isActive && (
+          <div
+            className="absolute inset-0 animate-marquee pointer-events-none opacity-40"
+            style={{ backgroundColor: color }}
+          />
+        )}
+        <Activity className="relative z-10" />
+        <span className="relative z-10">{t('requests.title')}</span>
+      </SidebarMenuButton>
+      {total > 0 && (
+        <SidebarMenuBadge>
+          <StreamingBadge count={total} color={color} />
+        </SidebarMenuBadge>
+      )}
+    </SidebarMenuItem>
+  );
+}
diff --git a/web/src/components/layout/app-sidebar/sidebar-config.tsx b/web/src/components/layout/app-sidebar/sidebar-config.tsx
new file mode 100644
index 00000000..f83aa979
--- /dev/null
+++ b/web/src/components/layout/app-sidebar/sidebar-config.tsx
@@ -0,0 +1,128 @@
+import {
+  LayoutDashboard,
+  Server,
+  FolderKanban,
+  Users,
+  RefreshCw,
+  Terminal,
+  Settings,
+  Key,
+  Zap,
+  BarChart3,
+} from 'lucide-react';
+import type { SidebarConfig } from '@/types/sidebar';
+import { RequestsNavItem } from './requests-nav-item';
+import { ClientRoutesItems } from './client-routes-items';
+
+/**
+ * Unified sidebar configuration
+ * All menu items are defined here in a single source of truth
+ */
+export const sidebarConfig: SidebarConfig = {
+  sections: [
+    {
+      key: 'main',
+      items: [
+        {
+          type: 'standard',
+          key: 'dashboard',
+          to: '/',
+          icon: LayoutDashboard,
+          labelKey: 'nav.dashboard',
+          activeMatch: 'exact',
+        },
+        {
+          type: 'standard',
+          key: 'console',
+          to: '/console',
+          icon: Terminal,
+          labelKey: 'nav.console',
+        },
+        {
+          type: 'standard',
+          key: 'stats',
+          to: '/stats',
+          icon: BarChart3,
+          labelKey: 'nav.stats',
+        },
+        {
+          type: 'custom',
+          key: 'requests',
+          component: RequestsNavItem,
+        },
+      ],
+    },
+    {
+      key: 'routes',
+      titleKey: 'nav.routes',
+      items: [
+        {
+          type: 'dynamic-section',
+          key: 'client-routes',
+          generator: () => <ClientRoutesItems />,
+        },
+      ],
+    },
+    {
+      key: 'management',
+      titleKey: 'nav.management',
+      items: [
+        {
+          type: 'standard',
+          key: 'providers',
+          to: '/providers',
+          icon: Server,
+          labelKey: 'nav.providers',
+        },
+        {
+          type: 'standard',
+          key: 'projects',
+          to: '/projects',
+          icon: FolderKanban,
+          labelKey: 'nav.projects',
+        },
+        {
+          type: 'standard',
+          key: 'sessions',
+          to: '/sessions',
+          icon: Users,
+          labelKey: 'nav.sessions',
+        },
+        {
+          type: 'standard',
+          key: 'api-tokens',
+          to: '/api-tokens',
+          icon: Key,
+          labelKey: 'nav.apiTokens',
+        },
+      ],
+    },
+    {
+      key: 'config',
+      titleKey: 'nav.config',
+      items: [
+        {
+          type: 'standard',
+          key: 'model-mappings',
+          to: '/model-mappings',
+          icon: Zap,
+          labelKey: 'nav.modelMappings',
+        },
+        {
+          type: 'standard',
+          key: 'retry-configs',
+          to: '/retry-configs',
+          icon: RefreshCw,
+          labelKey: 'nav.retryConfigs',
+        },
+        {
+          type: 'standard',
+          key: 'settings',
+          to: '/settings',
+          icon: Settings,
+          labelKey: 'nav.settings',
+        },
+      ],
+    },
+  ],
+};
diff --git a/web/src/components/layout/app-sidebar/sidebar-renderer.tsx b/web/src/components/layout/app-sidebar/sidebar-renderer.tsx
new file mode 100644
index 00000000..a503f841
--- /dev/null
+++ b/web/src/components/layout/app-sidebar/sidebar-renderer.tsx
@@ -0,0 +1,83 @@
+import { Fragment } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import type { SidebarConfig, MenuItem } from '@/types/sidebar';
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+
+interface SidebarRendererProps {
+  config: SidebarConfig;
+}
+
+/**
+ * Renders a single menu item based on its type
+ */
+function MenuItemRenderer({ item }: { item: MenuItem }) {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  switch (item.type) {
+    case 'standard': {
+      const Icon = item.icon;
+      const isActive =
+        item.activeMatch === 'exact'
+          ? location.pathname === item.to
+          : location.pathname.startsWith(item.to);
+
+      return (
+        <SidebarMenuItem key={item.key}>
+          <SidebarMenuButton
+            render={<NavLink to={item.to} />}
+            isActive={isActive}
+            tooltip={t(item.labelKey)}
+          >
+            <Icon />
+            <span>{t(item.labelKey)}</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      );
+    }
+
+    case 'custom': {
+      const Component = item.component;
+      return <Component key={item.key} />;
+    }
+
+    case 'dynamic-section': {
+      return <Fragment key={item.key}>{item.generator()}</Fragment>;
+    }
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Unified sidebar renderer that handles all menu item types
+ */
+export function SidebarRenderer({ config }: SidebarRendererProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {config.sections.map((section) => (
+        <SidebarGroup key={section.key}>
+          {section.titleKey && <SidebarGroupLabel>{t(section.titleKey)}</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {section.items.map((item) => (
+                <MenuItemRenderer key={item.key} item={item} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ))}
+    </>
+  );
+}
diff --git a/web/src/components/layout/header.tsx b/web/src/components/layout/header.tsx
index ca5acdc9..96026abc 100644
--- a/web/src/components/layout/header.tsx
+++ b/web/src/components/layout/header.tsx
@@ -1,22 +1,18 @@
-import { Moon, Sun } from 'lucide-react'
-import { Button } from '@/components/ui'
-import { useTheme } from '@/components/theme-provider'
-import { useTranslation } from 'react-i18next'
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui';
+import { useTheme } from '@/components/theme-provider';
+import { useTranslation } from 'react-i18next';
 
 export function Header() {
-  const { t } = useTranslation()
-  const { theme, toggleTheme } = useTheme()
+  const { t } = useTranslation();
+  const { theme, toggleTheme } = useTheme();
 
   return (
     <header className="flex h-14 items-center justify-between border-b border-border bg-surface-primary px-6">
       <h1 className="text-lg font-semibold">{t('app.title')}</h1>
       <Button variant="ghost" size="sm" onClick={toggleTheme}>
-        {theme === 'dark' ? (
-          <Sun className="h-4 w-4" />
-        ) : (
-          <Moon className="h-4 w-4" />
-        )}
+        {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
       </Button>
     </header>
-  )
+  );
 }
diff --git a/web/src/components/layout/index.ts b/web/src/components/layout/index.ts
index 93ba7284..cf6b938c 100644
--- a/web/src/components/layout/index.ts
+++ b/web/src/components/layout/index.ts
@@ -1,7 +1,7 @@
 export { AppLayout } from './app-layout';
-export { SidebarNav } from './sidebar-nav';
+export { SidebarNav } from './app-sidebar';
 export { PageHeader } from './page-header';
-export { NavMain } from './nav-main';
-export { NavRoutes } from './nav-routes';
-export { NavManagement } from './nav-management';
 export { NavProxyStatus } from './nav-proxy-status';
+export { SidebarRenderer } from './app-sidebar/sidebar-renderer';
+export { RequestsNavItem } from './app-sidebar/requests-nav-item';
+export { ClientRoutesItems } from './app-sidebar/client-routes-items';
diff --git a/web/src/components/layout/nav-main.tsx b/web/src/components/layout/nav-main.tsx
deleted file mode 100644
index 277b40d2..00000000
--- a/web/src/components/layout/nav-main.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { NavLink, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import type { LucideIcon } from 'lucide-react'
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from '@/components/ui/sidebar'
-
-interface NavItem {
-  to: string
-  icon: LucideIcon
-  labelKey: string
-}
-
-interface NavMainProps {
-  items: NavItem[]
-  children?: React.ReactNode
-}
-
-export function NavMain({ items, children }: NavMainProps) {
-  const location = useLocation()
-  const { t } = useTranslation()
-
-  return (
-    <SidebarGroup>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map(item => {
-            const Icon = item.icon
-            const isActive =
-              item.to === '/'
-                ? location.pathname === '/'
-                : location.pathname.startsWith(item.to)
-
-            return (
-              <SidebarMenuItem key={item.to}>
-                <SidebarMenuButton
-                  render={<NavLink to={item.to} />}
-                  isActive={isActive}
-                  tooltip={t(item.labelKey)}
-                >
-                  <Icon />
-                  <span>{t(item.labelKey)}</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            )
-          })}
-          {children}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}
diff --git a/web/src/components/layout/nav-management.tsx b/web/src/components/layout/nav-management.tsx
deleted file mode 100644
index eb3f140c..00000000
--- a/web/src/components/layout/nav-management.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { NavLink, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import type { LucideIcon } from 'lucide-react'
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from '@/components/ui/sidebar'
-
-interface NavItem {
-  to: string
-  icon: LucideIcon
-  labelKey: string
-}
-
-interface NavManagementProps {
-  items: NavItem[]
-  title?: string
-}
-
-export function NavManagement({ items, title }: NavManagementProps) {
-  const location = useLocation()
-  const { t } = useTranslation()
-
-  return (
-    <SidebarGroup>
-      {title && <SidebarGroupLabel>{title}</SidebarGroupLabel>}
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map(item => {
-            const Icon = item.icon
-            const isActive = location.pathname.startsWith(item.to)
-
-            return (
-              <SidebarMenuItem key={item.to}>
-                <SidebarMenuButton
-                  render={<NavLink to={item.to} />}
-                  isActive={isActive}
-                  tooltip={t(item.labelKey)}
-                >
-                  <Icon />
-                  <span>{t(item.labelKey)}</span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            )
-          })}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}
diff --git a/web/src/components/layout/nav-proxy-status.tsx b/web/src/components/layout/nav-proxy-status.tsx
index 1a563cfd..ac025ed3 100644
--- a/web/src/components/layout/nav-proxy-status.tsx
+++ b/web/src/components/layout/nav-proxy-status.tsx
@@ -1,34 +1,30 @@
-import { useState } from 'react'
-import { Radio, Check, Copy } from 'lucide-react'
-import { useProxyStatus } from '@/hooks/queries'
-import { useSidebar } from '@/components/ui/sidebar'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { Button } from '../ui'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react';
+import { Radio, Check, Copy } from 'lucide-react';
+import { useProxyStatus } from '@/hooks/queries';
+import { useSidebar } from '@/components/ui/sidebar';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Button } from '../ui';
+import { useTranslation } from 'react-i18next';
 
 export function NavProxyStatus() {
-  const { t } = useTranslation()
-  const { data: proxyStatus } = useProxyStatus()
-  const { state } = useSidebar()
-  const [copied, setCopied] = useState(false)
+  const { t } = useTranslation();
+  const { data: proxyStatus } = useProxyStatus();
+  const { state } = useSidebar();
+  const [copied, setCopied] = useState(false);
 
-  const proxyAddress = proxyStatus?.address ?? '...'
-  const fullUrl = `http://${proxyAddress}`
-  const isCollapsed = state === 'collapsed'
+  const proxyAddress = proxyStatus?.address ?? '...';
+  const fullUrl = `http://${proxyAddress}`;
+  const isCollapsed = state === 'collapsed';
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(fullUrl)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      await navigator.clipboard.writeText(fullUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy:', err)
+      console.error('Failed to copy:', err);
     }
-  }
+  };
 
   if (isCollapsed) {
     return (
@@ -60,7 +56,7 @@ export function NavProxyStatus() {
           </div>
         </TooltipContent>
       </Tooltip>
-    )
+    );
   }
 
   return (
@@ -75,17 +71,13 @@ export function NavProxyStatus() {
       </div>
       <div className="flex flex-col items-start flex-1 min-w-0">
         <span className="text-caption text-text-muted">{t('proxy.listeningOn')}</span>
-        <span className="font-mono font-medium text-text-primary  truncate">
-          {proxyAddress}
-        </span>
+        <span className="font-mono font-medium text-text-primary  truncate">{proxyAddress}</span>
       </div>
       <div className="shrink-0 text-muted-foreground relative w-4 h-4">
         <Copy
           size={14}
           className={`absolute inset-0 transition-all ${
-            copied
-              ? 'scale-0 opacity-0'
-              : 'scale-100 opacity-0 group-hover:opacity-100'
+            copied ? 'scale-0 opacity-0' : 'scale-100 opacity-0 group-hover:opacity-100'
           }`}
         />
         <Check
@@ -96,5 +88,5 @@ export function NavProxyStatus() {
         />
       </div>
     </Button>
-  )
+  );
 }
diff --git a/web/src/components/layout/nav-routes.tsx b/web/src/components/layout/nav-routes.tsx
deleted file mode 100644
index 15b9015b..00000000
--- a/web/src/components/layout/nav-routes.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { NavLink, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import {
-  ClientIcon,
-  allClientTypes,
-  getClientName,
-  getClientColor,
-} from '@/components/icons/client-icons'
-import { StreamingBadge } from '@/components/ui/streaming-badge'
-import { useStreamingRequests } from '@/hooks/use-streaming'
-import type { ClientType } from '@/lib/transport'
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuBadge,
-} from '@/components/ui/sidebar'
-
-function ClientNavItem({ clientType }: { clientType: ClientType }) {
-  const location = useLocation()
-  const { countsByClient } = useStreamingRequests()
-  const streamingCount = countsByClient.get(clientType) || 0
-  const color = getClientColor(clientType)
-  const clientName = getClientName(clientType)
-  const isActive = location.pathname === `/routes/${clientType}`
-
-  return (
-    <SidebarMenuItem>
-      <SidebarMenuButton
-        render={<NavLink to={`/routes/${clientType}`} />}
-        isActive={isActive}
-        tooltip={clientName}
-        className="relative overflow-hidden"
-      >
-        {/* Marquee 背景动画 (仅在有 streaming 请求且未激活时显示) */}
-        {streamingCount > 0 && !isActive && (
-          <div
-            className="absolute inset-0 animate-marquee pointer-events-none opacity-50"
-            style={{ backgroundColor: color }}
-          />
-        )}
-        <ClientIcon type={clientType} size={18} className="relative z-10" />
-        <span className="relative z-10">{clientName}</span>
-      </SidebarMenuButton>
-      {streamingCount > 0 && (
-        <SidebarMenuBadge>
-          <StreamingBadge count={streamingCount} color={color} />
-        </SidebarMenuBadge>
-      )}
-    </SidebarMenuItem>
-  )
-}
-
-export function NavRoutes() {
-  const { t } = useTranslation()
-
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>{t('nav.routes')}</SidebarGroupLabel>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {allClientTypes.map(clientType => (
-            <ClientNavItem key={clientType} clientType={clientType} />
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}
diff --git a/web/src/components/layout/page-header.tsx b/web/src/components/layout/page-header.tsx
index 16f49155..fae508fd 100644
--- a/web/src/components/layout/page-header.tsx
+++ b/web/src/components/layout/page-header.tsx
@@ -1,13 +1,13 @@
-import type { LucideIcon } from 'lucide-react'
-import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
 
 interface PageHeaderProps {
-  icon?: LucideIcon
-  iconClassName?: string
-  title: string
-  description?: string
-  actions?: ReactNode
-  children?: ReactNode
+  icon?: LucideIcon;
+  iconClassName?: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children?: ReactNode;
 }
 
 export function PageHeader({
@@ -27,12 +27,8 @@ export function PageHeader({
           </div>
         )}
         <div>
-          <h1 className="text-lg font-semibold text-foreground leading-tight">
-            {title}
-          </h1>
-          {description && (
-            <p className="text-xs text-muted-foreground">{description}</p>
-          )}
+          <h1 className="text-lg font-semibold text-foreground leading-tight">{title}</h1>
+          {description && <p className="text-xs text-muted-foreground">{description}</p>}
         </div>
       </div>
       {(actions || children) && (
@@ -42,5 +38,5 @@ export function PageHeader({
         </div>
       )}
     </header>
-  )
+  );
 }
diff --git a/web/src/components/layout/sidebar-nav.tsx b/web/src/components/layout/sidebar-nav.tsx
deleted file mode 100644
index d14c87d7..00000000
--- a/web/src/components/layout/sidebar-nav.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { NavLink, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import {
-  LayoutDashboard,
-  Activity,
-  Server,
-  FolderKanban,
-  Users,
-  RefreshCw,
-  Terminal,
-  Settings,
-  Key,
-  Zap,
-  BarChart3,
-} from 'lucide-react'
-import { StreamingBadge } from '@/components/ui/streaming-badge'
-import { useStreamingRequests } from '@/hooks/use-streaming'
-import { useProxyStatus } from '@/hooks/queries'
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarTrigger,
-} from '@/components/ui/sidebar'
-import { NavMain } from './nav-main'
-import { NavRoutes } from './nav-routes'
-import { NavManagement } from './nav-management'
-import { NavProxyStatus } from './nav-proxy-status'
-import { ThemeToggle } from '@/components/theme-toggle'
-
-const mainNavItems = [
-  { to: '/', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
-  { to: '/console', icon: Terminal, labelKey: 'nav.console' },
-  { to: '/stats', icon: BarChart3, labelKey: 'nav.stats' },
-]
-
-const managementItems = [
-  { to: '/providers', icon: Server, labelKey: 'nav.providers' },
-  { to: '/projects', icon: FolderKanban, labelKey: 'nav.projects' },
-  { to: '/sessions', icon: Users, labelKey: 'nav.sessions' },
-  { to: '/api-tokens', icon: Key, labelKey: 'nav.apiTokens' },
-]
-
-const configItems = [
-  { to: '/model-mappings', icon: Zap, labelKey: 'nav.modelMappings' },
-  { to: '/retry-configs', icon: RefreshCw, labelKey: 'nav.retryConfigs' },
-  { to: '/settings', icon: Settings, labelKey: 'nav.settings' },
-]
-
-/**
- * Requests 导航项 - 带 Streaming Badge
- */
-function RequestsNavItem() {
-  const location = useLocation()
-  const { total } = useStreamingRequests()
-  const { t } = useTranslation()
-  const isActive = location.pathname.startsWith('/requests')
-  const color = 'var(--color-success)' // emerald-500
-
-  return (
-    <SidebarMenuItem>
-      <SidebarMenuButton
-        render={<NavLink to="/requests" />}
-        isActive={isActive}
-        tooltip={t('requests.title')}
-        className="relative"
-      >
-        {/* Marquee 背景动画 (仅在有 streaming 请求且未激活时显示) */}
-        {total > 0 && !isActive && (
-          <div
-            className="absolute inset-0 animate-marquee pointer-events-none opacity-40"
-            style={{ backgroundColor: color }}
-          />
-        )}
-        <Activity className="relative z-10" />
-        <span className="relative z-10">{t('requests.title')}</span>
-      </SidebarMenuButton>
-      {total > 0 && (
-        <SidebarMenuBadge>
-          <StreamingBadge count={total} color={color} />
-        </SidebarMenuBadge>
-      )}
-    </SidebarMenuItem>
-  )
-}
-
-export function SidebarNav() {
-  const { t } = useTranslation()
-  const { data: proxyStatus } = useProxyStatus()
-  const versionDisplay = proxyStatus?.version ?? '...'
-  return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader>
-        <NavProxyStatus />
-      </SidebarHeader>
-
-      <SidebarContent>
-        <NavMain items={mainNavItems}>
-          <RequestsNavItem />
-        </NavMain>
-        <NavRoutes />
-        <NavManagement items={managementItems} title={t('nav.management')} />
-        <NavManagement items={configItems} title={t('nav.config')} />
-      </SidebarContent>
-
-      <SidebarFooter>
-        <p className="text-caption text-muted-foreground group-data-[collapsible=icon]:hidden mb-2">
-          {versionDisplay}
-        </p>
-        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:items-stretch">
-          <SidebarTrigger />
-          <ThemeToggle />
-        </div>
-      </SidebarFooter>
-    </Sidebar>
-  )
-}
diff --git a/web/src/components/provider-details-dialog.tsx b/web/src/components/provider-details-dialog.tsx
index 76ed1b3a..c7de551e 100644
--- a/web/src/components/provider-details-dialog.tsx
+++ b/web/src/components/provider-details-dialog.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { TFunction } from 'i18next'
+import { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
 import {
   Snowflake,
   Clock,
@@ -20,59 +20,58 @@ import {
   CheckCircle2,
   XCircle,
   Trash2,
-} from 'lucide-react'
-import type {
-  Cooldown,
-  ProviderStats,
-  ClientType,
-} from '@/lib/transport/types'
-import type { ProviderConfigItem } from '@/pages/client-routes/types'
-import { useCooldowns } from '@/hooks/use-cooldowns'
-import { Button, Switch } from '@/components/ui'
-import { getProviderColor, type ProviderType } from '@/lib/theme'
-import { cn } from '@/lib/utils'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+} from 'lucide-react';
+import type { Cooldown, ProviderStats, ClientType } from '@/lib/transport/types';
+import type { ProviderConfigItem } from '@/pages/client-routes/types';
+import { useCooldowns } from '@/hooks/use-cooldowns';
+import { Button, Switch } from '@/components/ui';
+import { getProviderColor, type ProviderType } from '@/lib/theme';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 interface ProviderDetailsDialogProps {
-  item: ProviderConfigItem | null
-  clientType: ClientType
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  stats?: ProviderStats
-  cooldown?: Cooldown | null
-  streamingCount: number
-  onToggle: () => void
-  isToggling: boolean
-  onDelete?: () => void
-  onClearCooldown?: () => void
-  isClearingCooldown?: boolean
+  item: ProviderConfigItem | null;
+  clientType: ClientType;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  stats?: ProviderStats;
+  cooldown?: Cooldown | null;
+  streamingCount: number;
+  onToggle: () => void;
+  isToggling: boolean;
+  onDelete?: () => void;
+  onClearCooldown?: () => void;
+  isClearingCooldown?: boolean;
 }
 
 // Reason 信息和图标 - 使用翻译
 const getReasonInfo = (t: TFunction) => ({
   server_error: {
     label: t('provider.reasons.serverError'),
-    description: t('provider.reasons.serverErrorDesc', '上游服务器返回 5xx 错误，系统自动进入冷却保护'),
+    description: t(
+      'provider.reasons.serverErrorDesc',
+      '上游服务器返回 5xx 错误，系统自动进入冷却保护',
+    ),
     icon: Server,
     color: 'text-rose-500 dark:text-rose-400',
-    bgColor:
-      'bg-rose-500/10 dark:bg-rose-500/15 border-rose-500/30 dark:border-rose-500/25',
+    bgColor: 'bg-rose-500/10 dark:bg-rose-500/15 border-rose-500/30 dark:border-rose-500/25',
   },
   network_error: {
     label: t('provider.reasons.networkError'),
-    description: t('provider.reasons.networkErrorDesc', '无法连接到上游服务器，可能是网络故障或服务器宕机'),
+    description: t(
+      'provider.reasons.networkErrorDesc',
+      '无法连接到上游服务器，可能是网络故障或服务器宕机',
+    ),
     icon: Wifi,
     color: 'text-amber-600 dark:text-amber-400',
-    bgColor:
-      'bg-amber-500/10 dark:bg-amber-500/15 border-amber-500/30 dark:border-amber-500/25',
+    bgColor: 'bg-amber-500/10 dark:bg-amber-500/15 border-amber-500/30 dark:border-amber-500/25',
   },
   quota_exhausted: {
     label: t('provider.reasons.quotaExhausted'),
     description: t('provider.reasons.quotaExhaustedDesc', 'API 配额已用完，等待配额重置'),
     icon: AlertCircle,
     color: 'text-rose-500 dark:text-rose-400',
-    bgColor:
-      'bg-rose-500/10 dark:bg-rose-500/15 border-rose-500/30 dark:border-rose-500/25',
+    bgColor: 'bg-rose-500/10 dark:bg-rose-500/15 border-rose-500/30 dark:border-rose-500/25',
   },
   rate_limit_exceeded: {
     label: t('provider.reasons.rateLimitExceeded'),
@@ -97,37 +96,37 @@ const getReasonInfo = (t: TFunction) => ({
     color: 'text-muted-foreground',
     bgColor: 'bg-muted/50 border-border',
   },
-})
+});
 
 // 格式化 Token 数量
 function formatTokens(count: number): string {
   if (count >= 1_000_000) {
-    return `${(count / 1_000_000).toFixed(1)}M`
+    return `${(count / 1_000_000).toFixed(1)}M`;
   }
   if (count >= 1_000) {
-    return `${(count / 1_000).toFixed(1)}K`
+    return `${(count / 1_000).toFixed(1)}K`;
   }
-  return count.toString()
+  return count.toString();
 }
 
 // 格式化成本 (微美元 → 美元)
 function formatCost(microUsd: number): string {
-  const usd = microUsd / 1_000_000
+  const usd = microUsd / 1_000_000;
   if (usd >= 1) {
-    return `$${usd.toFixed(2)}`
+    return `$${usd.toFixed(2)}`;
   }
   if (usd >= 0.01) {
-    return `$${usd.toFixed(3)}`
+    return `$${usd.toFixed(3)}`;
   }
-  return `$${usd.toFixed(4)}`
+  return `$${usd.toFixed(4)}`;
 }
 
 // 计算缓存利用率
 function calcCacheRate(stats: ProviderStats): number {
-  const cacheTotal = stats.totalCacheRead + stats.totalCacheWrite
-  const total = stats.totalInputTokens + stats.totalOutputTokens + cacheTotal
-  if (total === 0) return 0
-  return (cacheTotal / total) * 100
+  const cacheTotal = stats.totalCacheRead + stats.totalCacheWrite;
+  const total = stats.totalInputTokens + stats.totalOutputTokens + cacheTotal;
+  if (total === 0) return 0;
+  return (cacheTotal / total) * 100;
 }
 
 export function ProviderDetailsDialog({
@@ -144,36 +143,36 @@ export function ProviderDetailsDialog({
   onClearCooldown,
   isClearingCooldown,
 }: ProviderDetailsDialogProps) {
-  const { t, i18n } = useTranslation()
-  const REASON_INFO = getReasonInfo(t)
-  const { formatRemaining } = useCooldowns()
+  const { t, i18n } = useTranslation();
+  const REASON_INFO = getReasonInfo(t);
+  const { formatRemaining } = useCooldowns();
 
   // 计算初始倒计时值
   const getInitialCountdown = useCallback(() => {
-    return cooldown ? formatRemaining(cooldown) : ''
-  }, [cooldown, formatRemaining])
+    return cooldown ? formatRemaining(cooldown) : '';
+  }, [cooldown, formatRemaining]);
 
-  const [liveCountdown, setLiveCountdown] = useState<string>(getInitialCountdown)
+  const [liveCountdown, setLiveCountdown] = useState<string>(getInitialCountdown);
 
   // 每秒更新倒计时
   useEffect(() => {
-    if (!cooldown) return
+    if (!cooldown) return;
 
     const interval = setInterval(() => {
-      setLiveCountdown(formatRemaining(cooldown))
-    }, 1000)
+      setLiveCountdown(formatRemaining(cooldown));
+    }, 1000);
 
-    return () => clearInterval(interval)
-  }, [cooldown, formatRemaining])
+    return () => clearInterval(interval);
+  }, [cooldown, formatRemaining]);
 
-  if (!item) return null
+  if (!item) return null;
 
-  const { provider, enabled, route, isNative } = item
-  const color = getProviderColor(provider.type as ProviderType)
-  const isInCooldown = !!cooldown
+  const { provider, enabled, route, isNative } = item;
+  const color = getProviderColor(provider.type as ProviderType);
+  const isInCooldown = !!cooldown;
 
   const formatUntilTime = (until: string) => {
-    const date = new Date(until)
+    const date = new Date(until);
     return date.toLocaleString(i18n.resolvedLanguage ?? i18n.language, {
       month: '2-digit',
       day: '2-digit',
@@ -181,14 +180,14 @@ export function ProviderDetailsDialog({
       minute: '2-digit',
       second: '2-digit',
       hour12: false,
-    })
-  }
+    });
+  };
 
   const endpoint =
     provider.config?.custom?.clientBaseURL?.[clientType] ||
     provider.config?.custom?.baseURL ||
     provider.config?.antigravity?.endpoint ||
-    t('provider.defaultEndpoint')
+    t('provider.defaultEndpoint');
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -210,18 +209,12 @@ export function ProviderDetailsDialog({
               <span
                 className={cn(
                   'text-xs font-bold',
-                  enabled
-                    ? 'text-emerald-600 dark:text-emerald-400'
-                    : 'text-muted-foreground'
+                  enabled ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground',
                 )}
               >
                 {enabled ? t('provider.status.on') : t('provider.status.off')}
               </span>
-              <Switch
-                checked={enabled}
-                onCheckedChange={onToggle}
-                disabled={isToggling}
-              />
+              <Switch checked={enabled} onCheckedChange={onToggle} disabled={isToggling} />
             </div>
             <div className="w-px h-6 bg-border" />
             <Button
@@ -241,7 +234,7 @@ export function ProviderDetailsDialog({
                 'relative w-14 h-14 lg:w-16 lg:h-16 rounded-2xl flex items-center justify-center border shadow-lg',
                 isInCooldown
                   ? 'bg-cyan-500/10 dark:bg-cyan-950/40 border-cyan-500/40 dark:border-cyan-500/30'
-                  : 'bg-muted border-border'
+                  : 'bg-muted border-border',
               )}
               style={!isInCooldown ? { color } : {}}
             >
@@ -250,7 +243,7 @@ export function ProviderDetailsDialog({
                   'text-2xl lg:text-3xl font-black',
                   isInCooldown
                     ? 'text-cyan-400 dark:text-cyan-300 opacity-20 scale-150 blur-[1px]'
-                    : ''
+                    : '',
                 )}
               >
                 {provider.name.charAt(0).toUpperCase()}
@@ -314,9 +307,7 @@ export function ProviderDetailsDialog({
                     <div className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1">
                       Client Type
                     </div>
-                    <div className="text-xs text-foreground font-semibold">
-                      {clientType}
-                    </div>
+                    <div className="text-xs text-foreground font-semibold">{clientType}</div>
                   </div>
                   {route && (
                     <div>
@@ -399,17 +390,15 @@ export function ProviderDetailsDialog({
                         >
                           {(() => {
                             const Icon =
-                              REASON_INFO[cooldown.reason]?.icon ||
-                              REASON_INFO.unknown.icon
-                            return <Icon size={18} />
+                              REASON_INFO[cooldown.reason]?.icon || REASON_INFO.unknown.icon;
+                            return <Icon size={18} />;
                           })()}
                         </div>
                         <div>
                           <h3
                             className={`text-sm font-bold ${REASON_INFO[cooldown.reason]?.color || REASON_INFO.unknown.color} mb-1`}
                           >
-                            {REASON_INFO[cooldown.reason]?.label ||
-                              REASON_INFO.unknown.label}
+                            {REASON_INFO[cooldown.reason]?.label || REASON_INFO.unknown.label}
                           </h3>
                           <p className="text-xs text-muted-foreground leading-relaxed">
                             {REASON_INFO[cooldown.reason]?.description ||
@@ -432,13 +421,13 @@ export function ProviderDetailsDialog({
                         {liveCountdown}
                       </div>
                       {(() => {
-                        const untilDateStr = formatUntilTime(cooldown.untilTime)
+                        const untilDateStr = formatUntilTime(cooldown.untilTime);
                         return (
                           <div className="relative mt-2 text-[10px] text-teal-600/70 dark:text-teal-400/70 font-mono flex items-center gap-2">
                             <Clock size={10} />
                             {untilDateStr}
                           </div>
-                        )
+                        );
                       })()}
                     </div>
                   </div>
@@ -449,9 +438,7 @@ export function ProviderDetailsDialog({
               <div className="space-y-3">
                 <div className="flex items-center gap-2 text-muted-foreground">
                   <TrendingUp size={14} />
-                  <span className="text-xs font-bold uppercase tracking-wider">
-                    Statistics
-                  </span>
+                  <span className="text-xs font-bold uppercase tracking-wider">Statistics</span>
                 </div>
 
                 {stats && stats.totalRequests > 0 ? (
@@ -459,19 +446,14 @@ export function ProviderDetailsDialog({
                     {/* Requests */}
                     <div className="p-3 rounded-lg bg-linear-to-br from-slate-50 to-slate-100/50 dark:from-slate-900/50 dark:to-slate-800/30 border border-slate-200 dark:border-slate-700/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <Hash
-                          size={12}
-                          className="text-slate-500 dark:text-slate-400"
-                        />
+                        <Hash size={12} className="text-slate-500 dark:text-slate-400" />
                         <span className="text-[9px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wider">
                           Requests
                         </span>
                       </div>
                       <div className="space-y-1">
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-slate-600 dark:text-slate-400">
-                            Total
-                          </span>
+                          <span className="text-slate-600 dark:text-slate-400">Total</span>
                           <span className="font-mono font-bold text-slate-900 dark:text-slate-100">
                             {stats.totalRequests}
                           </span>
@@ -498,10 +480,7 @@ export function ProviderDetailsDialog({
                     {/* Success Rate */}
                     <div className="p-3 rounded-lg bg-linear-to-br from-emerald-50 to-emerald-100/50 dark:from-emerald-950/30 dark:to-emerald-900/20 border border-emerald-200 dark:border-emerald-800/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <Activity
-                          size={12}
-                          className="text-emerald-600 dark:text-emerald-400"
-                        />
+                        <Activity size={12} className="text-emerald-600 dark:text-emerald-400" />
                         <span className="text-[9px] font-bold text-emerald-700 dark:text-emerald-400 uppercase tracking-wider">
                           Success Rate
                         </span>
@@ -514,7 +493,7 @@ export function ProviderDetailsDialog({
                               ? 'text-emerald-600 dark:text-emerald-400'
                               : stats.successRate >= 90
                                 ? 'text-blue-600 dark:text-blue-400'
-                                : 'text-amber-600 dark:text-amber-400'
+                                : 'text-amber-600 dark:text-amber-400',
                           )}
                         >
                           {Math.round(stats.successRate)}%
@@ -525,39 +504,28 @@ export function ProviderDetailsDialog({
                     {/* Tokens */}
                     <div className="p-3 rounded-lg bg-linear-to-br from-blue-50 to-blue-100/50 dark:from-blue-950/30 dark:to-blue-900/20 border border-blue-200 dark:border-blue-800/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <Zap
-                          size={12}
-                          className="text-blue-600 dark:text-blue-400"
-                        />
+                        <Zap size={12} className="text-blue-600 dark:text-blue-400" />
                         <span className="text-[9px] font-bold text-blue-700 dark:text-blue-400 uppercase tracking-wider">
                           Tokens
                         </span>
                       </div>
                       <div className="space-y-1">
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-blue-600 dark:text-blue-400">
-                            In
-                          </span>
+                          <span className="text-blue-600 dark:text-blue-400">In</span>
                           <span className="font-mono font-bold text-blue-700 dark:text-blue-300">
                             {formatTokens(stats.totalInputTokens)}
                           </span>
                         </div>
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-purple-600 dark:text-purple-400">
-                            Out
-                          </span>
+                          <span className="text-purple-600 dark:text-purple-400">Out</span>
                           <span className="font-mono font-bold text-purple-700 dark:text-purple-300">
                             {formatTokens(stats.totalOutputTokens)}
                           </span>
                         </div>
                         <div className="flex items-center justify-between text-xs">
-                          <span className="text-cyan-600 dark:text-cyan-400">
-                            Cache
-                          </span>
+                          <span className="text-cyan-600 dark:text-cyan-400">Cache</span>
                           <span className="font-mono font-bold text-cyan-700 dark:text-cyan-300">
-                            {formatTokens(
-                              stats.totalCacheRead + stats.totalCacheWrite
-                            )}
+                            {formatTokens(stats.totalCacheRead + stats.totalCacheWrite)}
                           </span>
                         </div>
                       </div>
@@ -566,10 +534,7 @@ export function ProviderDetailsDialog({
                     {/* Cost */}
                     <div className="p-3 rounded-lg bg-linear-to-br from-purple-50 to-purple-100/50 dark:from-purple-950/30 dark:to-purple-900/20 border border-purple-200 dark:border-purple-800/50 shadow-sm hover:shadow-md transition-shadow">
                       <div className="flex items-center gap-1.5 mb-2">
-                        <DollarSign
-                          size={12}
-                          className="text-purple-600 dark:text-purple-400"
-                        />
+                        <DollarSign size={12} className="text-purple-600 dark:text-purple-400" />
                         <span className="text-[9px] font-bold text-purple-700 dark:text-purple-400 uppercase tracking-wider">
                           Cost
                         </span>
@@ -598,5 +563,5 @@ export function ProviderDetailsDialog({
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/web/src/components/routes/ClientTypeRoutesContent.tsx b/web/src/components/routes/ClientTypeRoutesContent.tsx
index 91d5bb69..473170a7 100644
--- a/web/src/components/routes/ClientTypeRoutesContent.tsx
+++ b/web/src/components/routes/ClientTypeRoutesContent.tsx
@@ -3,8 +3,8 @@
  * Used by both global routes and project routes
  */
 
-import { useState, useMemo } from 'react'
-import { Plus, RefreshCw, Zap } from 'lucide-react'
+import { useState, useMemo } from 'react';
+import { Plus, RefreshCw, Zap } from 'lucide-react';
 import {
   DndContext,
   closestCenter,
@@ -15,13 +15,13 @@ import {
   type DragEndEvent,
   type DragStartEvent,
   DragOverlay,
-} from '@dnd-kit/core'
+} from '@dnd-kit/core';
 import {
   arrayMove,
   SortableContext,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
+} from '@dnd-kit/sortable';
 import {
   useRoutes,
   useProviders,
@@ -31,31 +31,28 @@ import {
   useUpdateRoutePositions,
   useProviderStats,
   routeKeys,
-} from '@/hooks/queries'
-import { useQueryClient } from '@tanstack/react-query'
-import { useStreamingRequests } from '@/hooks/use-streaming'
-import { getClientName, getClientColor } from '@/components/icons/client-icons'
-import { getProviderColor, type ProviderType } from '@/lib/theme'
-import type { ClientType, Provider } from '@/lib/transport'
+} from '@/hooks/queries';
+import { useQueryClient } from '@tanstack/react-query';
+import { useStreamingRequests } from '@/hooks/use-streaming';
+import { getClientName, getClientColor } from '@/components/icons/client-icons';
+import { getProviderColor, type ProviderType } from '@/lib/theme';
+import type { ClientType, Provider } from '@/lib/transport';
 import {
   SortableProviderRow,
   ProviderRowContent,
-} from '@/pages/client-routes/components/provider-row'
-import type { ProviderConfigItem } from '@/pages/client-routes/types'
-import { Button } from '../ui'
+} from '@/pages/client-routes/components/provider-row';
+import type { ProviderConfigItem } from '@/pages/client-routes/types';
+import { Button } from '../ui';
 
 interface ClientTypeRoutesContentProps {
-  clientType: ClientType
-  projectID: number // 0 for global routes
+  clientType: ClientType;
+  projectID: number; // 0 for global routes
 }
 
-export function ClientTypeRoutesContent({
-  clientType,
-  projectID,
-}: ClientTypeRoutesContentProps) {
-  const [activeId, setActiveId] = useState<string | null>(null)
-  const { data: providerStats = {} } = useProviderStats(clientType, projectID)
-  const queryClient = useQueryClient()
+export function ClientTypeRoutesContent({ clientType, projectID }: ClientTypeRoutesContentProps) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const { data: providerStats = {} } = useProviderStats(clientType, projectID);
+  const queryClient = useQueryClient();
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -65,75 +62,65 @@ export function ClientTypeRoutesContent({
     }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
-  )
+    }),
+  );
 
-  const { data: allRoutes, isLoading: routesLoading } = useRoutes()
-  const { data: providers = [], isLoading: providersLoading } = useProviders()
-  const { countsByProviderAndClient } = useStreamingRequests()
+  const { data: allRoutes, isLoading: routesLoading } = useRoutes();
+  const { data: providers = [], isLoading: providersLoading } = useProviders();
+  const { countsByProviderAndClient } = useStreamingRequests();
 
-  const createRoute = useCreateRoute()
-  const toggleRoute = useToggleRoute()
-  const deleteRoute = useDeleteRoute()
-  const updatePositions = useUpdateRoutePositions()
+  const createRoute = useCreateRoute();
+  const toggleRoute = useToggleRoute();
+  const deleteRoute = useDeleteRoute();
+  const updatePositions = useUpdateRoutePositions();
 
-  const loading = routesLoading || providersLoading
+  const loading = routesLoading || providersLoading;
 
   // Get routes for this clientType and projectID
   const clientRoutes = useMemo(() => {
-    return (
-      allRoutes?.filter(
-        r => r.clientType === clientType && r.projectID === projectID
-      ) || []
-    )
-  }, [allRoutes, clientType, projectID])
+    return allRoutes?.filter((r) => r.clientType === clientType && r.projectID === projectID) || [];
+  }, [allRoutes, clientType, projectID]);
 
   // Build provider config items
   const items = useMemo((): ProviderConfigItem[] => {
-    const allItems = providers.map(provider => {
-      const route =
-        clientRoutes.find(r => Number(r.providerID) === Number(provider.id)) ||
-        null
-      const isNative = (provider.supportedClientTypes || []).includes(
-        clientType
-      )
+    const allItems = providers.map((provider) => {
+      const route = clientRoutes.find((r) => Number(r.providerID) === Number(provider.id)) || null;
+      const isNative = (provider.supportedClientTypes || []).includes(clientType);
       return {
         id: `${clientType}-provider-${provider.id}`,
         provider,
         route,
         enabled: route?.isEnabled ?? false,
         isNative,
-      }
-    })
+      };
+    });
 
     // Only show providers that have routes
-    const filteredItems = allItems.filter(item => item.route)
+    const filteredItems = allItems.filter((item) => item.route);
 
     return filteredItems.sort((a, b) => {
-      if (a.route && b.route) return a.route.position - b.route.position
-      if (a.route && !b.route) return -1
-      if (!a.route && b.route) return 1
-      if (a.isNative && !b.isNative) return -1
-      if (!a.isNative && b.isNative) return 1
-      return a.provider.name.localeCompare(b.provider.name)
-    })
-  }, [providers, clientRoutes, clientType])
+      if (a.route && b.route) return a.route.position - b.route.position;
+      if (a.route && !b.route) return -1;
+      if (!a.route && b.route) return 1;
+      if (a.isNative && !b.isNative) return -1;
+      if (!a.isNative && b.isNative) return 1;
+      return a.provider.name.localeCompare(b.provider.name);
+    });
+  }, [providers, clientRoutes, clientType]);
 
   // Get available providers (without routes yet)
   const availableProviders = useMemo((): Provider[] => {
-    return providers.filter(p => {
-      const hasRoute = clientRoutes.some(
-        r => Number(r.providerID) === Number(p.id)
-      )
-      return !hasRoute
-    })
-  }, [providers, clientRoutes])
+    return providers.filter((p) => {
+      const hasRoute = clientRoutes.some((r) => Number(r.providerID) === Number(p.id));
+      return !hasRoute;
+    });
+  }, [providers, clientRoutes]);
 
-  const activeItem = activeId ? items.find(item => item.id === activeId) : null
+  const activeItem = activeId ? items.find((item) => item.id === activeId) : null;
 
   const handleToggle = (item: ProviderConfigItem) => {
     if (item.route) {
-      toggleRoute.mutate(item.route.id)
+      toggleRoute.mutate(item.route.id);
     } else {
       createRoute.mutate({
         isEnabled: true,
@@ -143,9 +130,9 @@ export function ClientTypeRoutesContent({
         providerID: item.provider.id,
         position: items.length + 1,
         retryConfigID: 0,
-      })
+      });
     }
-  }
+  };
 
   const handleAddRoute = (provider: Provider, isNative: boolean) => {
     createRoute.mutate({
@@ -156,69 +143,69 @@ export function ClientTypeRoutesContent({
       providerID: provider.id,
       position: items.length + 1,
       retryConfigID: 0,
-    })
-  }
+    });
+  };
 
   const handleDeleteRoute = (routeId: number) => {
-    deleteRoute.mutate(routeId)
-  }
+    deleteRoute.mutate(routeId);
+  };
 
   const handleDragStart = (event: DragStartEvent) => {
-    setActiveId(event.active.id as string)
-  }
+    setActiveId(event.active.id as string);
+  };
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
-    setActiveId(null)
+    const { active, over } = event;
+    setActiveId(null);
 
-    if (!over || active.id === over.id) return
+    if (!over || active.id === over.id) return;
 
-    const oldIndex = items.findIndex(item => item.id === active.id)
-    const newIndex = items.findIndex(item => item.id === over.id)
+    const oldIndex = items.findIndex((item) => item.id === active.id);
+    const newIndex = items.findIndex((item) => item.id === over.id);
 
-    if (oldIndex === -1 || newIndex === -1) return
+    if (oldIndex === -1 || newIndex === -1) return;
 
-    const newItems = arrayMove(items, oldIndex, newIndex)
+    const newItems = arrayMove(items, oldIndex, newIndex);
 
     // Update positions for all items
-    const updates: Record<number, number> = {}
+    const updates: Record<number, number> = {};
     newItems.forEach((item, i) => {
       if (item.route) {
-        updates[item.route.id] = i + 1
+        updates[item.route.id] = i + 1;
       }
-    })
+    });
 
     if (Object.keys(updates).length > 0) {
       // 乐观更新：立即更新本地缓存
       queryClient.setQueryData(routeKeys.list(), (oldRoutes: typeof allRoutes) => {
-        if (!oldRoutes) return oldRoutes
-        return oldRoutes.map(route => {
-          const newPosition = updates[route.id]
+        if (!oldRoutes) return oldRoutes;
+        return oldRoutes.map((route) => {
+          const newPosition = updates[route.id];
           if (newPosition !== undefined) {
-            return { ...route, position: newPosition }
+            return { ...route, position: newPosition };
           }
-          return route
-        })
-      })
+          return route;
+        });
+      });
 
       // 发送 API 请求
       updatePositions.mutate(updates, {
         onError: () => {
           // 失败时回滚：重新获取服务器数据
-          queryClient.invalidateQueries({ queryKey: routeKeys.list() })
+          queryClient.invalidateQueries({ queryKey: routeKeys.list() });
         },
-      })
+      });
     }
-  }
+  };
 
-  const color = getClientColor(clientType)
+  const color = getClientColor(clientType);
 
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full p-12">
         <div className="text-muted-foreground">Loading...</div>
       </div>
-    )
+    );
   }
 
   return (
@@ -234,7 +221,7 @@ export function ClientTypeRoutesContent({
               onDragEnd={handleDragEnd}
             >
               <SortableContext
-                items={items.map(item => item.id)}
+                items={items.map((item) => item.id)}
                 strategy={verticalListSortingStrategy}
               >
                 <div className="space-y-2">
@@ -245,20 +232,12 @@ export function ClientTypeRoutesContent({
                       index={index}
                       clientType={clientType}
                       streamingCount={
-                        countsByProviderAndClient.get(
-                          `${item.provider.id}:${clientType}`
-                        ) || 0
+                        countsByProviderAndClient.get(`${item.provider.id}:${clientType}`) || 0
                       }
                       stats={providerStats[item.provider.id]}
-                      isToggling={
-                        toggleRoute.isPending || createRoute.isPending
-                      }
+                      isToggling={toggleRoute.isPending || createRoute.isPending}
                       onToggle={() => handleToggle(item)}
-                      onDelete={
-                        item.route
-                          ? () => handleDeleteRoute(item.route!.id)
-                          : undefined
-                      }
+                      onDelete={item.route ? () => handleDeleteRoute(item.route!.id) : undefined}
                     />
                   ))}
                 </div>
@@ -268,12 +247,10 @@ export function ClientTypeRoutesContent({
                 {activeItem && (
                   <ProviderRowContent
                     item={activeItem}
-                    index={items.findIndex(i => i.id === activeItem.id)}
+                    index={items.findIndex((i) => i.id === activeItem.id)}
                     clientType={clientType}
                     streamingCount={
-                      countsByProviderAndClient.get(
-                        `${activeItem.provider.id}:${clientType}`
-                      ) || 0
+                      countsByProviderAndClient.get(`${activeItem.provider.id}:${clientType}`) || 0
                     }
                     stats={providerStats[activeItem.provider.id]}
                     isToggling={false}
@@ -285,12 +262,8 @@ export function ClientTypeRoutesContent({
             </DndContext>
           ) : (
             <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-              <p className="text-body">
-                No routes configured for {getClientName(clientType)}
-              </p>
-              <p className="text-caption mt-sm">
-                Add a route below to get started
-              </p>
+              <p className="text-body">No routes configured for {getClientName(clientType)}</p>
+              <p className="text-caption mt-sm">Add a route below to get started</p>
             </div>
           )}
 
@@ -304,13 +277,9 @@ export function ClientTypeRoutesContent({
                 </span>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                {availableProviders.map(provider => {
-                  const isNative = (
-                    provider.supportedClientTypes || []
-                  ).includes(clientType)
-                  const providerColor = getProviderColor(
-                    provider.type as ProviderType
-                  )
+                {availableProviders.map((provider) => {
+                  const isNative = (provider.supportedClientTypes || []).includes(clientType);
+                  const providerColor = getProviderColor(provider.type as ProviderType);
                   return (
                     <Button
                       key={provider.id}
@@ -342,10 +311,7 @@ export function ClientTypeRoutesContent({
                             </span>
                             {isNative ? (
                               <span className="flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-bold bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 whitespace-nowrap">
-                                <Zap
-                                  size={10}
-                                  className="fill-current opacity-30"
-                                />
+                                <Zap size={10} className="fill-current opacity-30" />
                                 NATIVE
                               </span>
                             ) : (
@@ -365,7 +331,7 @@ export function ClientTypeRoutesContent({
                         className="opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300 shrink-0"
                       />
                     </Button>
-                  )
+                  );
                 })}
               </div>
             </div>
@@ -373,5 +339,5 @@ export function ClientTypeRoutesContent({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/components/theme-provider.tsx b/web/src/components/theme-provider.tsx
index f60ba51f..c2c13993 100644
--- a/web/src/components/theme-provider.tsx
+++ b/web/src/components/theme-provider.tsx
@@ -1,26 +1,26 @@
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = 'dark' | 'light' | 'system'
+type Theme = 'dark' | 'light' | 'system';
 
 type ThemeProviderProps = {
-  children: React.ReactNode
-  defaultTheme?: Theme
-  storageKey?: string
-}
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
 
 type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-  toggleTheme: () => void
-}
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+};
 
 const initialState: ThemeProviderState = {
   theme: 'system',
   setTheme: () => null,
   toggleTheme: () => null,
-}
+};
 
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
@@ -29,52 +29,50 @@ export function ThemeProvider({
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  )
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
 
   useEffect(() => {
-    const root = window.document.documentElement
+    const root = window.document.documentElement;
 
-    root.classList.remove('light', 'dark')
+    root.classList.remove('light', 'dark');
 
     if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
-        : 'light'
+        : 'light';
 
-      root.classList.add(systemTheme)
-      return
+      root.classList.add(systemTheme);
+      return;
     }
 
-    root.classList.add(theme)
-  }, [theme])
+    root.classList.add(theme);
+  }, [theme]);
 
   const value = {
     theme,
     setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme)
-      setTheme(theme)
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
     },
     toggleTheme: () => {
-      const newTheme = theme === 'dark' ? 'light' : 'dark'
-      localStorage.setItem(storageKey, newTheme)
-      setTheme(newTheme)
+      const newTheme = theme === 'dark' ? 'light' : 'dark';
+      localStorage.setItem(storageKey, newTheme);
+      setTheme(newTheme);
     },
-  }
+  };
 
   return (
     <ThemeProviderContext.Provider {...props} value={value}>
       {children}
     </ThemeProviderContext.Provider>
-  )
+  );
 }
 
 export const useTheme = () => {
-  const context = useContext(ThemeProviderContext)
+  const context = useContext(ThemeProviderContext);
 
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider')
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
 
-  return context
-}
+  return context;
+};
diff --git a/web/src/components/theme-toggle.tsx b/web/src/components/theme-toggle.tsx
index 36f87be1..f42fcfcb 100644
--- a/web/src/components/theme-toggle.tsx
+++ b/web/src/components/theme-toggle.tsx
@@ -1,15 +1,15 @@
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from '@/components/theme-provider'
-import { Button } from '@/components/ui/button'
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '@/components/theme-provider';
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+} from '@/components/ui/dropdown-menu';
 
 export function ThemeToggle() {
-  const { setTheme } = useTheme()
+  const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>
@@ -23,16 +23,10 @@ export function ThemeToggle() {
         }
       ></DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          System
-        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }
diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx
index 99741a68..b6ba7fcf 100644
--- a/web/src/components/ui/alert-dialog.tsx
+++ b/web/src/components/ui/alert-dialog.tsx
@@ -1,49 +1,42 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
 function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
-function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
   return (
     <AlertDialogPrimitive.Backdrop
       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 isolate z-50",
-        className
+        '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 isolate z-50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
   className,
-  size = "default",
+  size = 'default',
   ...props
 }: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
+  size?: 'default' | 'sm';
 }) {
   return (
     <AlertDialogPortal>
@@ -52,55 +45,52 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         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 bg-background ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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
+          '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-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       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-6 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)}
+      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-6 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">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "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
+        '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">) {
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-media"
-      className={cn("bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className)}
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -110,10 +100,13 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+      className={cn(
+        'text-lg 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({
@@ -123,32 +116,26 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       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)}
+      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,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
 }
 
 function AlertDialogCancel({
   className,
-  variant = "outline",
-  size = "default",
+  variant = 'outline',
+  size = 'default',
   ...props
 }: AlertDialogPrimitive.Close.Props &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
   return (
     <AlertDialogPrimitive.Close
       data-slot="alert-dialog-cancel"
@@ -156,7 +143,7 @@ function AlertDialogCancel({
       render={<Button variant={variant} size={size} />}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -172,4 +159,4 @@ export {
   AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-}
+};
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index 62e217a9..222b9be7 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -1,8 +1,8 @@
-import { mergeProps } from '@base-ui/react/merge-props'
-import { useRender } from '@base-ui/react/use-render'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
   '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 transition-colors overflow-hidden group/badge',
@@ -10,29 +10,24 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        secondary:
-          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/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',
+        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',
         info: 'bg-blue-400/10 text-blue-400 border-blue-400/20 [a]:hover:bg-blue-400/20',
         success:
           'bg-emerald-400/10 text-emerald-400 border-emerald-400/20 [a]:hover:bg-emerald-400/20',
-        warning:
-          'bg-amber-400/10 text-amber-400 border-amber-400/20 [a]:hover:bg-amber-400/20',
-        danger:
-          'bg-red-400/10 text-red-400 border-red-400/20 [a]:hover:bg-red-400/20',
+        warning: 'bg-amber-400/10 text-amber-400 border-amber-400/20 [a]:hover:bg-amber-400/20',
+        danger: 'bg-red-400/10 text-red-400 border-red-400/20 [a]:hover:bg-red-400/20',
       },
     },
     defaultVariants: {
       variant: 'default',
     },
-  }
-)
+  },
+);
 
 function Badge({
   className,
@@ -46,14 +41,14 @@ function Badge({
       {
         className: cn(badgeVariants({ className, variant })),
       },
-      props
+      props,
     ),
     render,
     state: {
       slot: 'badge',
       variant,
     },
-  })
+  });
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 54666d0b..3da1a9ca 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -1,7 +1,7 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
   "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-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_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 cursor-pointer shadow-xs",
@@ -37,8 +37,8 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -52,7 +52,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index b42f62ca..a7b7a02b 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 function Card({
   className,
@@ -13,11 +13,11 @@ function Card({
       data-size={size}
       className={cn(
         'ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
@@ -26,11 +26,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="card-header"
       className={cn(
         'gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
@@ -39,11 +39,11 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="card-title"
       className={cn(
         'text-base leading-normal font-medium group-data-[size=sm]/card:text-sm',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
@@ -53,20 +53,17 @@ function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn('text-muted-foreground text-sm', 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
-      )}
+      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'>) {
@@ -76,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn('px-6 group-data-[size=sm]/card:px-4', className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
@@ -85,19 +82,11 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="card-footer"
       className={cn(
         'rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
index f278fb98..3b424ed7 100644
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -1,27 +1,23 @@
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+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 { 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"
+} from '@/components/ui/input-group';
+import { ChevronDownIcon, XIcon, CheckIcon } from 'lucide-react';
 
-const Combobox = ComboboxPrimitive.Root
+const Combobox = ComboboxPrimitive.Root;
 
 function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
 }
 
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
@@ -31,7 +27,7 @@ function ComboboxTrigger({
       {children}
       <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
     </ComboboxPrimitive.Trigger>
-  )
+  );
 }
 
 function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
@@ -44,7 +40,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
     >
       <XIcon className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
-  )
+  );
 }
 
 function ComboboxInput({
@@ -55,15 +51,12 @@ function ComboboxInput({
   showClear = false,
   ...props
 }: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
+  showTrigger?: boolean;
+  showClear?: boolean;
 }) {
   return (
-    <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
+    <InputGroup className={cn('w-auto', className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
       <InputGroupAddon align="inline-end">
         {showTrigger && (
           <InputGroupButton
@@ -79,21 +72,21 @@ function ComboboxInput({
       </InputGroupAddon>
       {children}
     </InputGroup>
-  )
+  );
 }
 
 function ComboboxContent({
   className,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 6,
-  align = "start",
+  align = 'start',
   alignOffset = 0,
   anchor,
   ...props
 }: ComboboxPrimitive.Popup.Props &
   Pick<
     ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
   >) {
   return (
     <ComboboxPrimitive.Portal>
@@ -108,12 +101,15 @@ function ComboboxContent({
         <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 max-h-72 min-w-36 overflow-hidden rounded-md 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 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 )}
+          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 max-h-72 min-w-36 overflow-hidden rounded-md 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 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) {
@@ -121,102 +117,93 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
     <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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
-        className
+        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.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-sm py-1.5 pr-8 pl-2 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
+        className,
       )}
       {...props}
     >
       {children}
       <ComboboxPrimitive.ItemIndicator
-        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
+        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}
-    />
-  )
+    <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
+  );
 }
 
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.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)}
+      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} />
-  )
+  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)}
+      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) {
+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)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxChips({
   className,
   ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.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-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5", className)}
+      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-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxChip({
@@ -225,14 +212,14 @@ function ComboboxChip({
   showRemove = true,
   ...props
 }: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
+  showRemove?: boolean;
 }) {
   return (
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.5))] 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
+        'bg-muted text-foreground flex h-[calc(--spacing(5.5))] 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}
     >
@@ -247,27 +234,21 @@ function ComboboxChip({
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>
-  )
+  );
 }
 
-function ComboboxChipsInput({
-  className,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
+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
-      )}
+      className={cn('min-w-16 flex-1 outline-none', className)}
       {...props}
     />
-  )
+  );
 }
 
 function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
+  return React.useRef<HTMLDivElement | null>(null);
 }
 
 export {
@@ -287,4 +268,4 @@ export {
   ComboboxTrigger,
   ComboboxValue,
   useComboboxAnchor,
-}
+};
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index 6ba6aa01..d2c277f8 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -1,39 +1,39 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { XIcon } from 'lucide-react';
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: DialogPrimitive.Backdrop.Props) {
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
   return (
     <DialogPrimitive.Backdrop
       data-slot="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 isolate z-50", className)}
+      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 isolate z-50',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -42,7 +42,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: DialogPrimitive.Popup.Props & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal>
@@ -50,8 +50,8 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "bg-background 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 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
+          'bg-background 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 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          className,
         )}
         {...props}
       >
@@ -59,32 +59,21 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            render={
-              <Button
-                variant="ghost"
-                className="absolute top-4 right-4"
-                size="icon-sm"
-              />
-            }
+            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
           >
-            <XIcon
-            />
+            <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
     </DialogPortal>
-  )
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
-      data-slot="dialog-header"
-      className={cn("gap-2 flex flex-col", className)}
-      {...props}
-    />
-  )
+    <div data-slot="dialog-header" className={cn('gap-2 flex flex-col', className)} {...props} />
+  );
 }
 
 function DialogFooter({
@@ -92,49 +81,44 @@ function DialogFooter({
   showCloseButton = false,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean;
 }) {
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
-        "gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn('gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
       {...props}
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close render={<Button variant="outline" />}>
-          Close
-        </DialogPrimitive.Close>
+        <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
       )}
     </div>
-  )
+  );
 }
 
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("leading-none font-medium", className)}
+      className={cn('leading-none font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: DialogPrimitive.Description.Props) {
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -148,4 +132,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
index d762ecc1..2f70f744 100644
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -1,33 +1,30 @@
-import * as React from "react"
-import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 
-import { cn } from "@/lib/utils"
-import { ChevronRightIcon, CheckIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { ChevronRightIcon, CheckIcon } from 'lucide-react';
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
 function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
-  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
 }
 
 function DropdownMenuContent({
-  align = "start",
+  align = 'start',
   alignOffset = 0,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 4,
   className,
   ...props
 }: MenuPrimitive.Popup.Props &
-  Pick<
-    MenuPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <MenuPrimitive.Portal>
       <MenuPrimitive.Positioner
@@ -39,16 +36,19 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-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-32 rounded-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className )}
+          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-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+            className,
+          )}
           {...props}
         />
       </MenuPrimitive.Positioner>
     </MenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
 function DropdownMenuLabel({
@@ -56,26 +56,29 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: MenuPrimitive.GroupLabel.Props & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenuPrimitive.GroupLabel
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8", className)}
+      className={cn(
+        'text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: MenuPrimitive.Item.Props & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
 }) {
   return (
     <MenuPrimitive.Item
@@ -84,15 +87,15 @@ function DropdownMenuItem({
       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 not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_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 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -101,7 +104,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: MenuPrimitive.SubmenuTrigger.Props & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenuPrimitive.SubmenuTrigger
@@ -109,20 +112,20 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "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-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto" />
     </MenuPrimitive.SubmenuTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
-  align = "start",
+  align = 'start',
   alignOffset = -3,
-  side = "right",
+  side = 'right',
   sideOffset = 0,
   className,
   ...props
@@ -130,14 +133,17 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuContent
       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-md p-1 shadow-lg ring-1 duration-100 w-auto", className)}
+      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-md p-1 shadow-lg ring-1 duration-100 w-auto',
+        className,
+      )}
       align={align}
       alignOffset={alignOffset}
       side={side}
       sideOffset={sideOffset}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -151,7 +157,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_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
+        className,
       )}
       checked={checked}
       {...props}
@@ -161,35 +167,25 @@ function DropdownMenuCheckboxItem({
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <MenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon
-          />
+          <CheckIcon />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
     </MenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
-  return (
-    <MenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+  return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: MenuPrimitive.RadioItem.Props) {
+function DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
   return (
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_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
+        className,
       )}
       {...props}
     >
@@ -198,39 +194,35 @@ function DropdownMenuRadioItem({
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <MenuPrimitive.RadioItemIndicator>
-          <CheckIcon
-          />
+          <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
       </span>
       {children}
     </MenuPrimitive.RadioItem>
-  )
+  );
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: MenuPrimitive.Separator.Props) {
+function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       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)}
+      className={cn(
+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -249,4 +241,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/web/src/components/ui/field.tsx b/web/src/components/ui/field.tsx
index 56f0eb5e..4997b62e 100644
--- a/web/src/components/ui/field.tsx
+++ b/web/src/components/ui/field.tsx
@@ -1,71 +1,76 @@
-"use client"
+'use client';
 
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+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"
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
 
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
   return (
     <fieldset
       data-slot="field-set"
-      className={cn("gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+      className={cn(
+        'gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLegend({
   className,
-  variant = "legend",
+  variant = 'legend',
   ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
   return (
     <legend
       data-slot="field-legend"
       data-variant={variant}
-      className={cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+      className={cn(
+        'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-group"
       className={cn(
-        "gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
-        className
+        'gap-7 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-3 group/field flex w-full", {
+const fieldVariants = cva('data-[invalid=true]:text-destructive gap-3 group/field flex w-full', {
   variants: {
     orientation: {
-      vertical:
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+      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",
+        '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",
+        '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",
+    orientation: 'vertical',
   },
-})
+});
 
 function Field({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
   return (
     <div
       role="group"
@@ -74,79 +79,76 @@ function Field({
       className={cn(fieldVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-content"
-      className={cn(
-        "gap-1 group/field-content flex flex-1 flex-col leading-snug",
-        className
-      )}
+      className={cn('gap-1 group/field-content flex flex-1 flex-col leading-snug', className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
+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 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
+        'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 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">) {
+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
+        '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">) {
+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-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=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
+}: 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)}
+      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" />
@@ -159,7 +161,7 @@ function FieldSeparator({
         </span>
       )}
     </div>
-  )
+  );
 }
 
 function FieldError({
@@ -167,50 +169,45 @@ function FieldError({
   children,
   errors,
   ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
 
     if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+      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>
-        )}
+        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn('text-destructive text-sm font-normal', className)}
       {...props}
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -224,4 +221,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};
diff --git a/web/src/components/ui/index.ts b/web/src/components/ui/index.ts
index ca20c82e..cf6a7848 100644
--- a/web/src/components/ui/index.ts
+++ b/web/src/components/ui/index.ts
@@ -2,14 +2,7 @@
 export { Button, buttonVariants } from './button';
 
 // Card
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from './card';
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card';
 
 // Table
 export {
diff --git a/web/src/components/ui/input-group.tsx b/web/src/components/ui/input-group.tsx
index 78551a28..fabfafb8 100644
--- a/web/src/components/ui/input-group.tsx
+++ b/web/src/components/ui/input-group.tsx
@@ -1,23 +1,23 @@
-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 { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+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">) {
+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 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
-        className
+        '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 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -25,25 +25,25 @@ const inputGroupAddonVariants = cva(
   {
     variants: {
       align: {
-        "inline-start": "pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first",
-        "inline-end": "pr-2 has-[>button]:mr-[-0.25rem] 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",
+        'inline-start': 'pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end': 'pr-2 has-[>button]:mr-[-0.25rem] 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",
+      align: 'inline-start',
     },
-  }
-)
+  },
+);
 
 function InputGroupAddon({
   className,
-  align = "inline-start",
+  align = 'inline-start',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
   return (
     <div
       role="group"
@@ -51,42 +51,39 @@ function InputGroupAddon({
       data-align={align}
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
+        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)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
+const inputGroupButtonVariants = cva('gap-2 text-sm shadow-none flex items-center', {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: '',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
     },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
 
 function InputGroupButton({
   className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
   ...props
-}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
   VariantProps<typeof inputGroupButtonVariants> & {
-    type?: "button" | "submit" | "reset"
+    type?: 'button' | 'submit' | 'reset';
   }) {
   return (
     <Button
@@ -96,45 +93,45 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
+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 aria-invalid:ring-0 dark:bg-transparent flex-1", className)}
+      className={cn(
+        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
+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 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none", className)}
+      className={cn(
+        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none',
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -144,4 +141,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 1fc04792..a0684190 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -1,20 +1,20 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
 
-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 (
     <InputPrimitive
       type={type}
       data-slot="input"
       className={cn(
-        "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 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] 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
+        '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 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] 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/web/src/components/ui/label.tsx b/web/src/components/ui/label.tsx
index 4bfe963d..a3799550 100644
--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.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 Label({ className, ...props }: React.ComponentProps<"label">) {
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
   return (
     <label
       data-slot="label"
       className={cn(
-        "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
+        '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/web/src/components/ui/model-input.tsx b/web/src/components/ui/model-input.tsx
index 1d81077e..36f33478 100644
--- a/web/src/components/ui/model-input.tsx
+++ b/web/src/components/ui/model-input.tsx
@@ -1,14 +1,9 @@
-import { useState, useMemo, useEffect, useRef } from 'react'
-import { ChevronDown, Search, X } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { ChevronDown, Search, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
 
 // 常见模型列表
 const COMMON_MODELS = [
@@ -18,7 +13,11 @@ const COMMON_MODELS = [
   { id: '*opus*', name: 'All Opus models', provider: 'Claude' },
   { id: '*haiku*', name: 'All Haiku models', provider: 'Claude' },
   // Claude models
-  { id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4', provider: 'Claude' },
+  {
+    id: 'claude-sonnet-4-20250514',
+    name: 'Claude Sonnet 4',
+    provider: 'Claude',
+  },
   { id: 'claude-opus-4-20250514', name: 'Claude Opus 4', provider: 'Claude' },
   {
     id: 'claude-3-5-sonnet-20241022',
@@ -60,71 +59,103 @@ const COMMON_MODELS = [
   { id: 'o1-pro', name: 'o1 Pro', provider: 'OpenAI' },
   { id: 'o3-mini', name: 'o3 Mini', provider: 'OpenAI' },
   // Antigravity supported target models (use these as mapping targets)
-  { id: 'claude-opus-4-5-thinking', name: 'Claude Opus 4.5 Thinking', provider: 'Antigravity' },
-  { id: 'claude-sonnet-4-5', name: 'Claude Sonnet 4.5', provider: 'Antigravity' },
-  { id: 'claude-sonnet-4-5-thinking', name: 'Claude Sonnet 4.5 Thinking', provider: 'Antigravity' },
-  { id: 'gemini-2.5-flash-lite', name: 'Gemini 2.5 Flash Lite', provider: 'Antigravity' },
+  {
+    id: 'claude-opus-4-5-thinking',
+    name: 'Claude Opus 4.5 Thinking',
+    provider: 'Antigravity',
+  },
+  {
+    id: 'claude-sonnet-4-5',
+    name: 'Claude Sonnet 4.5',
+    provider: 'Antigravity',
+  },
+  {
+    id: 'claude-sonnet-4-5-thinking',
+    name: 'Claude Sonnet 4.5 Thinking',
+    provider: 'Antigravity',
+  },
+  {
+    id: 'gemini-2.5-flash-lite',
+    name: 'Gemini 2.5 Flash Lite',
+    provider: 'Antigravity',
+  },
   { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', provider: 'Antigravity' },
-  { id: 'gemini-2.5-flash-thinking', name: 'Gemini 2.5 Flash Thinking', provider: 'Antigravity' },
+  {
+    id: 'gemini-2.5-flash-thinking',
+    name: 'Gemini 2.5 Flash Thinking',
+    provider: 'Antigravity',
+  },
   { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro', provider: 'Antigravity' },
   { id: 'gemini-3-flash', name: 'Gemini 3 Flash', provider: 'Antigravity' },
   { id: 'gemini-3-pro', name: 'Gemini 3 Pro', provider: 'Antigravity' },
   { id: 'gemini-3-pro-low', name: 'Gemini 3 Pro Low', provider: 'Antigravity' },
-  { id: 'gemini-3-pro-high', name: 'Gemini 3 Pro High', provider: 'Antigravity' },
-  { id: 'gemini-3-pro-preview', name: 'Gemini 3 Pro Preview', provider: 'Antigravity' },
-  { id: 'gemini-3-pro-image', name: 'Gemini 3 Pro Image', provider: 'Antigravity' },
+  {
+    id: 'gemini-3-pro-high',
+    name: 'Gemini 3 Pro High',
+    provider: 'Antigravity',
+  },
+  {
+    id: 'gemini-3-pro-preview',
+    name: 'Gemini 3 Pro Preview',
+    provider: 'Antigravity',
+  },
+  {
+    id: 'gemini-3-pro-image',
+    name: 'Gemini 3 Pro Image',
+    provider: 'Antigravity',
+  },
   // Generic wildcard
   { id: '*', name: 'All models (catch-all)', provider: 'Other' },
-] as const
+] as const;
 
-type Model = (typeof COMMON_MODELS)[number]
-type Provider = Model['provider']
+type Model = (typeof COMMON_MODELS)[number];
+type Provider = Model['provider'];
 
 interface ModelInputProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  disabled?: boolean
-  className?: string
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
   /** Filter to only show models from specific providers */
-  providers?: Provider[]
+  providers?: Provider[];
 }
 
 // 简单的模糊匹配函数
 function fuzzyMatch(text: string, pattern: string): boolean {
-  const lowerText = text.toLowerCase()
-  const lowerPattern = pattern.toLowerCase()
+  const lowerText = text.toLowerCase();
+  const lowerPattern = pattern.toLowerCase();
 
   // 先尝试普通包含匹配
-  if (lowerText.includes(lowerPattern)) return true
+  if (lowerText.includes(lowerPattern)) return true;
 
   // 模糊匹配：pattern 中的字符按顺序出现在 text 中
-  let patternIdx = 0
+  let patternIdx = 0;
   for (let i = 0; i < lowerText.length && patternIdx < lowerPattern.length; i++) {
     if (lowerText[i] === lowerPattern[patternIdx]) {
-      patternIdx++
+      patternIdx++;
     }
   }
-  return patternIdx === lowerPattern.length
+  return patternIdx === lowerPattern.length;
 }
 
 // 计算匹配分数（用于排序）
 function matchScore(model: Model, pattern: string): number {
-  const lowerPattern = pattern.toLowerCase()
-  const lowerId = model.id.toLowerCase()
-  const lowerName = model.name.toLowerCase()
+  const lowerPattern = pattern.toLowerCase();
+  const lowerId = model.id.toLowerCase();
+  const lowerName = model.name.toLowerCase();
 
   // 精确匹配得分最高
-  if (lowerId === lowerPattern || lowerName === lowerPattern) return 100
+  if (lowerId === lowerPattern || lowerName === lowerPattern) return 100;
 
   // 前缀匹配次之
-  if (lowerId.startsWith(lowerPattern) || lowerName.startsWith(lowerPattern)) return 80
+  if (lowerId.startsWith(lowerPattern) || lowerName.startsWith(lowerPattern)) return 80;
 
   // 包含匹配
-  if (lowerId.includes(lowerPattern) || lowerName.includes(lowerPattern)) return 60
+  if (lowerId.includes(lowerPattern) || lowerName.includes(lowerPattern)) return 60;
 
   // 模糊匹配得分最低
-  return 40
+  return 40;
 }
 
 export function ModelInput({
@@ -135,112 +166,112 @@ export function ModelInput({
   className,
   providers,
 }: ModelInputProps) {
-  const { t } = useTranslation()
-  const actualPlaceholder = placeholder ?? t('modelInput.selectOrEnter')
-  const [isOpen, setIsOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [focusedIndex, setFocusedIndex] = useState(-1)
-  const focusedRef = useRef<HTMLButtonElement>(null)
+  const { t } = useTranslation();
+  const actualPlaceholder = placeholder ?? t('modelInput.selectOrEnter');
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const focusedRef = useRef<HTMLButtonElement>(null);
 
   // Base models filtered by providers prop
   const baseModels = useMemo(() => {
-    if (!providers || providers.length === 0) return [...COMMON_MODELS]
-    return COMMON_MODELS.filter(model => providers.includes(model.provider))
-  }, [providers])
+    if (!providers || providers.length === 0) return [...COMMON_MODELS];
+    return COMMON_MODELS.filter((model) => providers.includes(model.provider));
+  }, [providers]);
 
   // 过滤和排序模型（支持模糊匹配）
   const filteredModels = useMemo(() => {
-    if (!search.trim()) return baseModels
+    if (!search.trim()) return baseModels;
 
     return baseModels
       .filter(
-        model =>
+        (model) =>
           fuzzyMatch(model.id, search) ||
           fuzzyMatch(model.name, search) ||
-          fuzzyMatch(model.provider, search)
+          fuzzyMatch(model.provider, search),
       )
-      .sort((a, b) => matchScore(b, search) - matchScore(a, search))
-  }, [search, baseModels])
+      .sort((a, b) => matchScore(b, search) - matchScore(a, search));
+  }, [search, baseModels]);
 
   // 重置 focusedIndex 当过滤结果变化时
   useEffect(() => {
-    setFocusedIndex(-1)
-  }, [filteredModels.length])
+    setFocusedIndex(-1);
+  }, [filteredModels.length]);
 
   // 自动滚动到高亮项
   useEffect(() => {
     if (focusedIndex >= 0 && focusedRef.current) {
-      focusedRef.current.scrollIntoView({ block: 'nearest' })
+      focusedRef.current.scrollIntoView({ block: 'nearest' });
     }
-  }, [focusedIndex])
+  }, [focusedIndex]);
 
   // 按 provider 分组
   const groupedModels = useMemo(() => {
     return filteredModels.reduce(
       (acc, model) => {
         if (!acc[model.provider]) {
-          acc[model.provider] = []
+          acc[model.provider] = [];
         }
-        acc[model.provider].push(model)
-        return acc
+        acc[model.provider].push(model);
+        return acc;
       },
-      {} as Record<string, Model[]>
-    )
-  }, [filteredModels])
+      {} as Record<string, Model[]>,
+    );
+  }, [filteredModels]);
 
   const handleOpen = () => {
     if (!disabled) {
-      setSearch(value) // 初始化搜索框为当前值
-      setIsOpen(true)
+      setSearch(value); // 初始化搜索框为当前值
+      setIsOpen(true);
     }
-  }
+  };
 
   const handleSelect = (modelId: string) => {
-    onChange(modelId)
-    setIsOpen(false)
-    setSearch('')
-  }
+    onChange(modelId);
+    setIsOpen(false);
+    setSearch('');
+  };
 
   const handleClear = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    onChange('')
-  }
+    e.stopPropagation();
+    onChange('');
+  };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
-      e.preventDefault()
+      e.preventDefault();
       // 如果有高亮项，选择高亮项；否则使用搜索框内容
       if (focusedIndex >= 0 && focusedIndex < filteredModels.length) {
-        handleSelect(filteredModels[focusedIndex].id)
+        handleSelect(filteredModels[focusedIndex].id);
       } else if (search.trim()) {
-        handleSelect(search.trim())
+        handleSelect(search.trim());
       }
-      return
+      return;
     }
 
     // Tab/Shift+Tab 切换高亮项
     if (e.key === 'Tab' && filteredModels.length > 0) {
-      e.preventDefault()
+      e.preventDefault();
 
       if (e.shiftKey) {
         // Shift+Tab: 上一个
-        setFocusedIndex(prev => (prev <= 0 ? filteredModels.length - 1 : prev - 1))
+        setFocusedIndex((prev) => (prev <= 0 ? filteredModels.length - 1 : prev - 1));
       } else {
         // Tab: 下一个
-        setFocusedIndex(prev => (prev >= filteredModels.length - 1 ? 0 : prev + 1))
+        setFocusedIndex((prev) => (prev >= filteredModels.length - 1 ? 0 : prev + 1));
       }
     }
 
     // 上下箭头也可以切换
     if (e.key === 'ArrowDown' && filteredModels.length > 0) {
-      e.preventDefault()
-      setFocusedIndex(prev => (prev >= filteredModels.length - 1 ? 0 : prev + 1))
+      e.preventDefault();
+      setFocusedIndex((prev) => (prev >= filteredModels.length - 1 ? 0 : prev + 1));
     }
     if (e.key === 'ArrowUp' && filteredModels.length > 0) {
-      e.preventDefault()
-      setFocusedIndex(prev => (prev <= 0 ? filteredModels.length - 1 : prev - 1))
+      e.preventDefault();
+      setFocusedIndex((prev) => (prev <= 0 ? filteredModels.length - 1 : prev - 1));
     }
-  }
+  };
 
   return (
     <>
@@ -256,14 +287,11 @@ export function ModelInput({
           'hover:border-border-hover focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           'transition-colors',
-          className
+          className,
         )}
       >
         <span
-          className={cn(
-            'flex-1 truncate',
-            value ? 'text-foreground' : 'text-muted-foreground'
-          )}
+          className={cn('flex-1 truncate', value ? 'text-foreground' : 'text-muted-foreground')}
         >
           {value || actualPlaceholder}
         </span>
@@ -273,10 +301,7 @@ export function ModelInput({
               role="button"
               tabIndex={0}
               onClick={handleClear}
-              onKeyDown={e =>
-                e.key === 'Enter' &&
-                handleClear(e as unknown as React.MouseEvent)
-              }
+              onKeyDown={(e) => e.key === 'Enter' && handleClear(e as unknown as React.MouseEvent)}
               className="p-0.5 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
             >
               <X size={14} />
@@ -302,7 +327,7 @@ export function ModelInput({
             <Input
               type="text"
               value={search}
-              onChange={e => setSearch(e.target.value)}
+              onChange={(e) => setSearch(e.target.value)}
               onKeyDown={handleKeyDown}
               placeholder={t('modelInput.searchOrEnter')}
               className="pl-9"
@@ -320,9 +345,9 @@ export function ModelInput({
                       {provider}
                     </div>
                     <div className="space-y-1">
-                      {models.map(model => {
-                        const modelIndex = filteredModels.findIndex(m => m.id === model.id)
-                        const isFocused = modelIndex === focusedIndex
+                      {models.map((model) => {
+                        const modelIndex = filteredModels.findIndex((m) => m.id === model.id);
+                        const isFocused = modelIndex === focusedIndex;
                         return (
                           <button
                             key={model.id}
@@ -334,17 +359,15 @@ export function ModelInput({
                               'hover:bg-accent transition-colors',
                               'flex flex-col gap-0.5',
                               value === model.id && 'bg-primary/10 ring-1 ring-primary/20',
-                              isFocused && 'bg-accent ring-1 ring-primary/40'
+                              isFocused && 'bg-accent ring-1 ring-primary/40',
                             )}
                           >
-                            <span className="text-foreground font-medium">
-                              {model.name}
-                            </span>
+                            <span className="text-foreground font-medium">{model.name}</span>
                             <span className="text-xs text-muted-foreground font-mono">
                               {model.id}
                             </span>
                           </button>
-                        )
+                        );
                       })}
                     </div>
                   </div>
@@ -384,5 +407,5 @@ export function ModelInput({
         </DialogContent>
       </Dialog>
     </>
-  )
+  );
 }
diff --git a/web/src/components/ui/resizable.tsx b/web/src/components/ui/resizable.tsx
index 4299fe6e..7af0adf3 100644
--- a/web/src/components/ui/resizable.tsx
+++ b/web/src/components/ui/resizable.tsx
@@ -1,9 +1,9 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import * as ResizablePrimitive from 'react-resizable-panels'
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 function ResizablePanelGroup({
   className,
   ...props
@@ -13,17 +13,15 @@ function ResizablePanelGroup({
       data-slot="resizable-panel-group"
       className={cn(
         'cn-resizable-panel-group flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -31,22 +29,20 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
         'cn-resizable-handle 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',
-        className
+        className,
       )}
       {...props}
     >
-      {withHandle && (
-        <div className="cn-resizable-handle-icon z-10 flex shrink-0" />
-      )}
+      {withHandle && <div className="cn-resizable-handle-icon z-10 flex shrink-0" />}
     </ResizablePrimitive.PanelResizeHandle>
-  )
+  );
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index c0c70e3b..39cb050c 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { Select as SelectPrimitive } from '@base-ui/react/select'
+import * as React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
 
-import { cn } from '@/lib/utils'
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react'
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
@@ -13,7 +13,7 @@ function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
       className={cn('scroll-my-1 p-1', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
@@ -23,7 +23,7 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
       className={cn('flex flex-1 text-left', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectTrigger({
@@ -32,7 +32,7 @@ function SelectTrigger({
   children,
   ...props
 }: SelectPrimitive.Trigger.Props & {
-  size?: 'sm' | 'default'
+  size?: 'sm' | 'default';
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -40,18 +40,16 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "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-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *: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
+        className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon
-        render={
-          <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
-        }
+        render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
       />
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
@@ -82,7 +80,7 @@ function SelectContent({
           data-slot="select-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-36 rounded-md shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
-            className
+            className,
           )}
           {...props}
         >
@@ -92,33 +90,26 @@ function SelectContent({
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
       className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 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
+        className,
       )}
       {...props}
     >
@@ -133,20 +124,17 @@ function SelectItem({
         <CheckIcon className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
       className={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -158,13 +146,13 @@ function SelectScrollUpButton({
       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 top-0 w-full",
-        className
+        className,
       )}
       {...props}
     >
       <ChevronUpIcon />
     </SelectPrimitive.ScrollUpArrow>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -176,13 +164,13 @@ function SelectScrollDownButton({
       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 bottom-0 w-full",
-        className
+        className,
       )}
       {...props}
     >
       <ChevronDownIcon />
     </SelectPrimitive.ScrollDownArrow>
-  )
+  );
 }
 
 export {
@@ -196,4 +184,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
index beca2503..1183ba81 100644
--- a/web/src/components/ui/separator.tsx
+++ b/web/src/components/ui/separator.tsx
@@ -1,25 +1,21 @@
-"use client"
+'use client';
 
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: SeparatorPrimitive.Props) {
+function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
   return (
     <SeparatorPrimitive
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
-        className
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
index 90304a70..7a8e885d 100644
--- a/web/src/components/ui/sheet.tsx
+++ b/web/src/components/ui/sheet.tsx
@@ -1,47 +1,50 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { XIcon } from 'lucide-react';
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
     <SheetPrimitive.Backdrop
       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)}
+      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
 }: SheetPrimitive.Popup.Props & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  showCloseButton?: boolean;
 }) {
   return (
     <SheetPortal>
@@ -49,72 +52,65 @@ function SheetContent({
       <SheetPrimitive.Popup
         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)}
+        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}
         {showCloseButton && (
           <SheetPrimitive.Close
             data-slot="sheet-close"
-            render={
-              <Button
-                variant="ghost"
-                className="absolute top-4 right-4"
-                size="icon-sm"
-              />
-            }
+            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
           >
-            <XIcon
-            />
+            <XIcon />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
         )}
       </SheetPrimitive.Popup>
     </SheetPortal>
-  )
+  );
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn("gap-1.5 p-4 flex flex-col", className)}
+      className={cn('gap-1.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("gap-2 p-4 mt-auto flex flex-col", className)}
+      className={cn('gap-2 p-4 mt-auto flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground font-medium", className)}
+      className={cn('text-foreground font-medium', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SheetDescription({
-  className,
-  ...props
-}: SheetPrimitive.Description.Props) {
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -126,4 +122,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index 8a6daf47..1cfea332 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -1,53 +1,49 @@
-import * as React from 'react'
-import { mergeProps } from '@base-ui/react/merge-props'
-import { useRender } from '@base-ui/react/use-render'
-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 { Separator } from '@/components/ui/separator'
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+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 { Separator } from '@/components/ui/separator';
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from '@/components/ui/sheet'
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { useIsMobile } from '@/hooks/use-mobile'
-import { PanelLeftIcon } from 'lucide-react'
-
-const SIDEBAR_STORAGE_KEY = 'sidebar_state'
-const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { PanelLeftIcon } from 'lucide-react';
+
+const SIDEBAR_STORAGE_KEY = 'sidebar_state';
+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({
@@ -59,65 +55,62 @@ function SidebarProvider({
   children,
   ...props
 }: React.ComponentProps<'div'> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+  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, _setOpen] = React.useState(defaultOpen);
 
   // Load sidebar state from localStorage on mount.
   React.useEffect(() => {
-    const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
+    const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY);
     if (stored !== null) {
-      _setOpen(stored === 'true')
+      _setOpen(stored === 'true');
     }
-  }, [])
+  }, []);
 
-  const open = openProp ?? _open
+  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 saves the sidebar state to localStorage.
-      localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState))
+      localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState));
     },
-    [setOpenProp, open]
-  )
+    [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(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        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>(
     () => ({
@@ -129,8 +122,8 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -145,14 +138,14 @@ function SidebarProvider({
         }
         className={cn(
           'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-          className
+          className,
         )}
         {...props}
       >
         {children}
       </div>
     </SidebarContext.Provider>
-  )
+  );
 }
 
 function Sidebar({
@@ -163,11 +156,11 @@ function Sidebar({
   children,
   ...props
 }: React.ComponentProps<'div'> & {
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offExamples' | 'icon' | 'none'
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offExamples' | 'icon' | 'none';
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === 'none') {
     return (
@@ -175,13 +168,13 @@ function Sidebar({
         data-slot="sidebar"
         className={cn(
           'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-          className
+          className,
         )}
         {...props}
       >
         {children}
       </div>
-    )
+    );
   }
 
   if (isMobile) {
@@ -206,7 +199,7 @@ function Sidebar({
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    )
+    );
   }
 
   return (
@@ -227,7 +220,7 @@ function Sidebar({
           '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)'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
         )}
       />
       <div
@@ -241,7 +234,7 @@ function Sidebar({
           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
+          className,
         )}
         {...props}
       >
@@ -254,15 +247,11 @@ function Sidebar({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -271,20 +260,20 @@ function SidebarTrigger({
       variant="ghost"
       size="icon-sm"
       className={cn(className)}
-      onClick={event => {
-        onClick?.(event)
-        toggleSidebar()
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
       }}
       {...props}
     >
       <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  )
+  );
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <button
@@ -301,11 +290,11 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
         'hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full',
         '[[data-side=left][data-collapsible=offExamples]_&]:-right-2',
         '[[data-side=right][data-collapsible=offExamples]_&]:-left-2',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
@@ -314,17 +303,14 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
       data-slot="sidebar-inset"
       className={cn(
         '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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
   return (
     <Input
       data-slot="sidebar-input"
@@ -332,7 +318,7 @@ function SidebarInput({
       className={cn('bg-background h-8 w-full shadow-none', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
@@ -343,7 +329,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn('gap-2 p-2 flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
@@ -354,13 +340,10 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn('gap-2 p-2 flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="sidebar-separator"
@@ -368,7 +351,7 @@ function SidebarSeparator({
       className={cn('bg-sidebar-border mx-2 w-auto', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
@@ -378,11 +361,11 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
       data-sidebar="content"
       className={cn(
         'no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
@@ -393,7 +376,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
       className={cn('p-2 relative flex w-full min-w-0 flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupLabel({
@@ -407,17 +390,17 @@ function SidebarGroupLabel({
       {
         className: cn(
           '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
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
       slot: 'sidebar-group-label',
       sidebar: 'group-label',
     },
-  })
+  });
 }
 
 function SidebarGroupAction({
@@ -431,23 +414,20 @@ function SidebarGroupAction({
       {
         className: cn(
           '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 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden',
-          className
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
       slot: 'sidebar-group-action',
       sidebar: 'group-action',
     },
-  })
+  });
 }
 
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-group-content"
@@ -455,7 +435,7 @@ function SidebarGroupContent({
       className={cn('text-sm w-full', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
@@ -466,7 +446,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
       className={cn('gap-1 flex w-full min-w-0 flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
@@ -477,7 +457,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
       className={cn('group/menu-item relative', className)}
       {...props}
     />
-  )
+  );
 }
 
 const sidebarMenuButtonVariants = cva(
@@ -499,8 +479,8 @@ const sidebarMenuButtonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
-)
+  },
+);
 
 function SidebarMenuButton({
   render,
@@ -512,17 +492,17 @@ function SidebarMenuButton({
   ...props
 }: useRender.ComponentProps<'button'> &
   React.ComponentProps<'button'> & {
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const { isMobile, state } = useSidebar()
+  const { isMobile, state } = useSidebar();
   const comp = useRender({
     defaultTagName: 'button',
     props: mergeProps<'button'>(
       {
         className: cn(sidebarMenuButtonVariants({ variant, size }), className),
       },
-      props
+      props,
     ),
     render,
     state: {
@@ -531,16 +511,16 @@ function SidebarMenuButton({
       size,
       active: isActive,
     },
-  })
+  });
 
   if (!tooltip) {
-    return comp
+    return comp;
   }
 
   if (typeof tooltip === 'string') {
     tooltip = {
       children: tooltip,
-    }
+    };
   }
 
   return (
@@ -553,7 +533,7 @@ function SidebarMenuButton({
         {...tooltip}
       />
     </Tooltip>
-  )
+  );
 }
 
 function SidebarMenuAction({
@@ -563,7 +543,7 @@ function SidebarMenuAction({
   ...props
 }: useRender.ComponentProps<'button'> &
   React.ComponentProps<'button'> & {
-    showOnHover?: boolean
+    showOnHover?: boolean;
   }) {
   return useRender({
     defaultTagName: 'button',
@@ -573,34 +553,31 @@ function SidebarMenuAction({
           '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/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',
-          className
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
       slot: 'sidebar-menu-action',
       sidebar: 'menu-action',
     },
-  })
+  });
 }
 
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
         'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex 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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSkeleton({
@@ -608,12 +585,12 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }: React.ComponentProps<'div'> & {
-  showIcon?: boolean
+  showIcon?: boolean;
 }) {
   // Random width between 50 to 90%.
   const [width] = React.useState(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  })
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
 
   return (
     <div
@@ -622,12 +599,7 @@ function SidebarMenuSkeleton({
       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"
-        />
-      )}
+      {showIcon && <Skeleton 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"
@@ -638,7 +610,7 @@ function SidebarMenuSkeleton({
         }
       />
     </div>
-  )
+  );
 }
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
@@ -648,17 +620,14 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
       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
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>) {
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
@@ -666,7 +635,7 @@ function SidebarMenuSubItem({
       className={cn('group/menu-sub-item relative', className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubButton({
@@ -677,8 +646,8 @@ function SidebarMenuSubButton({
   ...props
 }: useRender.ComponentProps<'a'> &
   React.ComponentProps<'a'> & {
-    size?: 'sm' | 'md'
-    isActive?: boolean
+    size?: 'sm' | 'md';
+    isActive?: boolean;
   }) {
   return useRender({
     defaultTagName: 'a',
@@ -686,10 +655,10 @@ function SidebarMenuSubButton({
       {
         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 data-active:bg-sidebar-accent data-active: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
+          className,
         ),
       },
-      props
+      props,
     ),
     render,
     state: {
@@ -698,7 +667,7 @@ function SidebarMenuSubButton({
       size,
       active: isActive,
     },
-  })
+  });
 }
 
 export {
@@ -726,4 +695,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-}
+};
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
index 41bcbf94..2baa2a6a 100644
--- a/web/src/components/ui/skeleton.tsx
+++ b/web/src/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-muted rounded-md animate-pulse", className)}
+      className={cn('bg-muted rounded-md animate-pulse', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/web/src/components/ui/streaming-badge.tsx b/web/src/components/ui/streaming-badge.tsx
index d1bd3ed5..9dcdfcde 100644
--- a/web/src/components/ui/streaming-badge.tsx
+++ b/web/src/components/ui/streaming-badge.tsx
@@ -3,18 +3,18 @@
  * 显示实时活动请求数，带延迟消失效果
  */
 
-import { useState, useEffect, useRef } from 'react'
-import { cn } from '@/lib/utils'
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
 
 interface StreamingBadgeProps {
   /** 当前计数 */
-  count: number
+  count: number;
   /** 徽章颜色 (用于边框和发光效果) */
-  color?: string
+  color?: string;
   /** 自定义类名 */
-  className?: string
+  className?: string;
   /** 延迟消失时间 (ms)，默认 1000 */
-  hideDelay?: number
+  hideDelay?: number;
 }
 
 /**
@@ -31,44 +31,44 @@ export function StreamingBadge({
   hideDelay = 1000,
 }: StreamingBadgeProps) {
   // 使用 count 作为初始值，当 count > 0 时直接显示
-  const [displayCount, setDisplayCount] = useState(count > 0 ? count : 0)
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [displayCount, setDisplayCount] = useState(count > 0 ? count : 0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     // 计数 > 0: 立即显示，清除任何待执行的隐藏定时器
     if (count > 0) {
       if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-        timeoutRef.current = null
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
-      setDisplayCount(count)
+      setDisplayCount(count);
     } else if (displayCount > 0) {
       // 计数 = 0: 延迟后隐藏（防止闪烁）
       if (!timeoutRef.current) {
         timeoutRef.current = setTimeout(() => {
-          setDisplayCount(0)
-          timeoutRef.current = null
-        }, hideDelay)
+          setDisplayCount(0);
+          timeoutRef.current = null;
+        }, hideDelay);
       }
     }
 
     return () => {
       if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
+        clearTimeout(timeoutRef.current);
       }
-    }
-  }, [count, hideDelay]) // eslint-disable-line react-hooks/exhaustive-deps
+    };
+  }, [count, hideDelay]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 不显示时返回 null
   if (displayCount === 0) {
-    return null
+    return null;
   }
 
   return (
     <span
       className={cn(
         'px-1 rounded-sm text-xs font-extrabold animate-pulse-soft shadow-md text-center bg-secondary border-2',
-        className
+        className,
       )}
       style={{
         borderColor: color,
@@ -77,5 +77,5 @@ export function StreamingBadge({
     >
       {displayCount}
     </span>
-  )
+  );
 }
diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx
index e25e235a..2bcbf3a3 100644
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@@ -1,13 +1,13 @@
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/utils';
 
 function Switch({
   className,
   size = 'default',
   ...props
 }: SwitchPrimitive.Root.Props & {
-  size?: 'sm' | 'default'
+  size?: 'sm' | 'default';
 }) {
   return (
     <SwitchPrimitive.Root
@@ -15,7 +15,7 @@ function Switch({
       data-size={size}
       className={cn(
         'data-checked:bg-primary data-unchecked:bg-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 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] 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-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
-        className
+        className,
       )}
       {...props}
     >
@@ -24,7 +24,7 @@ function Switch({
         className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
index e9478488..3e9283a9 100644
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -1,99 +1,87 @@
-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">
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn('w-full caption-bottom text-sm', className)}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead 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)}
+      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)}
+      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)}
+      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", className)}
+      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", className)}
+      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index 5260b5b5..3fec598a 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -1,44 +1,37 @@
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}: TabsPrimitive.Root.Props) {
+function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
       data-orientation={orientation}
-      className={cn(
-        "group/tabs flex data-[orientation=horizontal]:flex-col",
-        className
-      )}
+      className={cn('group/tabs flex data-[orientation=horizontal]:flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
   {
     variants: {
       variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
-)
+  },
+);
 
 function TabsList({
   className,
-  variant = "default",
+  variant = 'default',
   ...props
 }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
   return (
@@ -48,7 +41,7 @@ function TabsList({
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
@@ -57,24 +50,24 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
       data-slot="tabs-trigger"
       className={cn(
         "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-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)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=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:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("text-sm flex-1 outline-none min-h-0", className)}
+      className={cn('text-sm flex-1 outline-none min-h-0', className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
index 7056b336..5411a3bc 100644
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/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"
       className={cn(
-        "border-input 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 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'border-input 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 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index 80d5d2b2..5811c01c 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -1,18 +1,9 @@
-import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-function TooltipProvider({
-  delay = 0,
-  ...props
-}: TooltipPrimitive.Provider.Props) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delay={delay}
-      {...props}
-    />
-  )
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
 }
 
 function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
@@ -20,26 +11,23 @@ function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
 function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
   className,
-  side = "top",
+  side = 'top',
   sideOffset = 4,
-  align = "center",
+  align = 'center',
   alignOffset = 0,
   children,
   ...props
 }: TooltipPrimitive.Popup.Props &
-  Pick<
-    TooltipPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Positioner
@@ -52,8 +40,8 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "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-(--transform-origin)",
-            className
+            '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-(--transform-origin)',
+            className,
           )}
           {...props}
         >
@@ -62,7 +50,7 @@ function TooltipContent({
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/web/src/hooks/queries/index.ts b/web/src/hooks/queries/index.ts
index 93828a53..daab8269 100644
--- a/web/src/hooks/queries/index.ts
+++ b/web/src/hooks/queries/index.ts
@@ -40,7 +40,12 @@ export {
 } from './use-routes';
 
 // Session hooks
-export { sessionKeys, useSessions, useUpdateSessionProject, useRejectSession } from './use-sessions';
+export {
+  sessionKeys,
+  useSessions,
+  useUpdateSessionProject,
+  useRejectSession,
+} from './use-sessions';
 
 // RetryConfig hooks
 export {
diff --git a/web/src/hooks/queries/use-proxy.ts b/web/src/hooks/queries/use-proxy.ts
index 04934075..d0b81c08 100644
--- a/web/src/hooks/queries/use-proxy.ts
+++ b/web/src/hooks/queries/use-proxy.ts
@@ -3,13 +3,13 @@
  * 获取代理服务器状态
  */
 
-import { useQuery } from '@tanstack/react-query'
-import { getTransport } from '@/lib/transport'
+import { useQuery } from '@tanstack/react-query';
+import { getTransport } from '@/lib/transport';
 
 export const proxyKeys = {
   all: ['proxy'] as const,
   status: () => [...proxyKeys.all, 'status'] as const,
-}
+};
 
 /**
  * 获取 Proxy 状态
@@ -20,5 +20,5 @@ export function useProxyStatus() {
     queryKey: proxyKeys.status(),
     queryFn: () => getTransport().getProxyStatus(),
     staleTime: Infinity, // Proxy 状态不会变化
-  })
+  });
 }
diff --git a/web/src/hooks/queries/use-requests.ts b/web/src/hooks/queries/use-requests.ts
index 6c8b00a3..c9d0011b 100644
--- a/web/src/hooks/queries/use-requests.ts
+++ b/web/src/hooks/queries/use-requests.ts
@@ -91,14 +91,14 @@ export function useProxyRequestUpdates() {
               items: [updatedRequest, ...old.items],
               firstId: updatedRequest.id,
             };
-          }
+          },
         );
 
         // 新请求时乐观更新 count
         if (isNewRequest) {
           queryClient.setQueryData<number>(['requestsCount'], (old) => (old ?? 0) + 1);
         }
-      }
+      },
     );
 
     // 订阅 ProxyUpstreamAttempt 更新事件
@@ -117,9 +117,9 @@ export function useProxyRequestUpdates() {
               return newList;
             }
             return [...old, updatedAttempt];
-          }
+          },
         );
-      }
+      },
     );
 
     return () => {
diff --git a/web/src/hooks/queries/use-routes.ts b/web/src/hooks/queries/use-routes.ts
index 7f810685..cba50787 100644
--- a/web/src/hooks/queries/use-routes.ts
+++ b/web/src/hooks/queries/use-routes.ts
@@ -77,9 +77,9 @@ export function useToggleRoute() {
     mutationFn: (id: number) => {
       const transport = getTransport();
       // 先获取当前状态，然后切换
-      return transport.getRoute(id).then((route) =>
-        transport.updateRoute(id, { isEnabled: !route.isEnabled })
-      );
+      return transport
+        .getRoute(id)
+        .then((route) => transport.updateRoute(id, { isEnabled: !route.isEnabled }));
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: routeKeys.lists() });
diff --git a/web/src/hooks/queries/use-routing-strategies.ts b/web/src/hooks/queries/use-routing-strategies.ts
index a206ab96..2f9a3101 100644
--- a/web/src/hooks/queries/use-routing-strategies.ts
+++ b/web/src/hooks/queries/use-routing-strategies.ts
@@ -3,7 +3,11 @@
  */
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { getTransport, type RoutingStrategy, type CreateRoutingStrategyData } from '@/lib/transport';
+import {
+  getTransport,
+  type RoutingStrategy,
+  type CreateRoutingStrategyData,
+} from '@/lib/transport';
 
 // Query Keys
 export const routingStrategyKeys = {
@@ -51,7 +55,9 @@ export function useUpdateRoutingStrategy() {
     mutationFn: ({ id, data }: { id: number; data: Partial<RoutingStrategy> }) =>
       getTransport().updateRoutingStrategy(id, data),
     onSuccess: (_, { id }) => {
-      queryClient.invalidateQueries({ queryKey: routingStrategyKeys.detail(id) });
+      queryClient.invalidateQueries({
+        queryKey: routingStrategyKeys.detail(id),
+      });
       queryClient.invalidateQueries({ queryKey: routingStrategyKeys.lists() });
     },
   });
diff --git a/web/src/hooks/queries/use-settings.ts b/web/src/hooks/queries/use-settings.ts
index 01ed6d72..e33b0a61 100644
--- a/web/src/hooks/queries/use-settings.ts
+++ b/web/src/hooks/queries/use-settings.ts
@@ -63,8 +63,7 @@ export function useCreateModelMapping() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (data: ModelMappingInput) =>
-      getTransport().createModelMapping(data),
+    mutationFn: (data: ModelMappingInput) => getTransport().createModelMapping(data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: settingsKeys.modelMappings });
     },
diff --git a/web/src/hooks/use-cooldowns.ts b/web/src/hooks/use-cooldowns.ts
index f71755e7..3cd9f678 100644
--- a/web/src/hooks/use-cooldowns.ts
+++ b/web/src/hooks/use-cooldowns.ts
@@ -51,7 +51,7 @@ export function useCooldowns() {
 
     return () => {
       // Clear all timeouts on cleanup
-      timeouts.forEach(timeout => clearTimeout(timeout));
+      timeouts.forEach((timeout) => clearTimeout(timeout));
     };
   }, [cooldowns, queryClient]);
 
@@ -60,7 +60,9 @@ export function useCooldowns() {
     return cooldowns.find(
       (cd: Cooldown) =>
         cd.providerID === providerId &&
-        (cd.clientType === '' || cd.clientType === 'all' || (clientType && cd.clientType === clientType))
+        (cd.clientType === '' ||
+          cd.clientType === 'all' ||
+          (clientType && cd.clientType === clientType)),
     );
   };
 
@@ -72,7 +74,8 @@ export function useCooldowns() {
   // Helper to get remaining time as seconds
   const getRemainingSeconds = (cooldown: Cooldown) => {
     // Handle both 'untilTime' and 'until' field names for backward compatibility
-    const untilTime = cooldown.untilTime || (cooldown as unknown as Record<string, unknown>).until as string;
+    const untilTime =
+      cooldown.untilTime || ((cooldown as unknown as Record<string, unknown>).until as string);
     if (!untilTime) return 0;
 
     const until = new Date(untilTime);
diff --git a/web/src/hooks/use-mobile.tsx b/web/src/hooks/use-mobile.tsx
index 2b0fe1df..ba553c6f 100644
--- a/web/src/hooks/use-mobile.tsx
+++ b/web/src/hooks/use-mobile.tsx
@@ -1,19 +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/web/src/hooks/use-pending-session.ts b/web/src/hooks/use-pending-session.ts
index 94cc4eba..4b3a555e 100644
--- a/web/src/hooks/use-pending-session.ts
+++ b/web/src/hooks/use-pending-session.ts
@@ -16,7 +16,7 @@ export function usePendingSession() {
       'new_session_pending',
       (event) => {
         setPendingSession(event);
-      }
+      },
     );
 
     const unsubscribeCancelled = transport.subscribe<SessionPendingCancelledEvent>(
@@ -29,7 +29,7 @@ export function usePendingSession() {
           }
           return current;
         });
-      }
+      },
     );
 
     return () => {
diff --git a/web/src/hooks/use-streaming.ts b/web/src/hooks/use-streaming.ts
index 512faea8..927a6fa1 100644
--- a/web/src/hooks/use-streaming.ts
+++ b/web/src/hooks/use-streaming.ts
@@ -59,7 +59,7 @@ export function useStreamingRequests(): StreamingState {
     // 订阅请求更新事件 (连接由 main.tsx 统一管理)
     const unsubscribe = transport.subscribe<ProxyRequest>(
       'proxy_request_update',
-      handleRequestUpdate
+      handleRequestUpdate,
     );
 
     // 订阅 WebSocket 重连事件，清空活动请求列表
@@ -132,7 +132,10 @@ export function useProviderStreamingCount(providerId: number): number {
 /**
  * 获取特定 Provider 在特定 ClientType 下的 streaming 请求数
  */
-export function useProviderClientStreamingCount(providerId: number, clientType: ClientType): number {
+export function useProviderClientStreamingCount(
+  providerId: number,
+  clientType: ClientType,
+): number {
   const { countsByProviderAndClient } = useStreamingRequests();
   return countsByProviderAndClient.get(`${providerId}:${clientType}`) || 0;
 }
diff --git a/web/src/index.css b/web/src/index.css
index 4f7cc141..0664a7d8 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,195 +1,209 @@
-
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/inter";
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+@import '@fontsource-variable/inter';
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-    --background: oklch(1.0000 0 0);
-    --foreground: oklch(0.2644 0 0);
-    --card: oklch(1.0000 0 0);
-    --card-foreground: oklch(0.2644 0 0);
-    --popover: oklch(1.0000 0 0);
-    --popover-foreground: oklch(0.2644 0 0);
-    --primary: oklch(0.3261 0 0);
-    --primary-foreground: oklch(0.9886 0 0);
-    --secondary: oklch(0.9772 0 0);
-    --secondary-foreground: oklch(0.3261 0 0);
-    --muted: oklch(0.9772 0 0);
-    --muted-foreground: oklch(0.6460 0 0);
-    --accent: oklch(0.9772 0 0);
-    --accent-foreground: oklch(0.3261 0 0);
-    --destructive: oklch(0.6201 0.2092 25.7747);
-    --border: oklch(0.9404 0 0);
-    --input: oklch(0.9404 0 0);
-    --ring: oklch(0.7716 0 0);
-    --chart-1: oklch(0.8241 0.1251 84.4866);
-    --chart-2: oklch(0.8006 0.1116 203.6044);
-    --chart-3: oklch(0.4198 0.1693 266.7798);
-    --chart-4: oklch(0.9214 0.0762 125.5777);
-    --chart-5: oklch(0.9151 0.1032 116.1913);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.9886 0 0);
-    --sidebar-foreground: oklch(0.2644 0 0);
-    --sidebar-primary: oklch(0.3261 0 0);
-    --sidebar-primary-foreground: oklch(0.9886 0 0);
-    --sidebar-accent: oklch(0.9772 0 0);
-    --sidebar-accent-foreground: oklch(0.3261 0 0);
-    --sidebar-border: oklch(0.9404 0 0);
-    --sidebar-ring: oklch(0.7716 0 0);
-    --destructive-foreground: oklch(1.0000 0 0);
-    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --shadow-color: hsl(0 0% 0%);
-    --shadow-opacity: 0.1;
-    --shadow-blur: 3px;
-    --shadow-spread: 0px;
-    --shadow-offset-x: 0;
-    --shadow-offset-y: 1px;
-    --letter-spacing: 0em;
-    --spacing: 0.25rem;
-    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-    --tracking-normal: 0em;
-
-    /* Provider 品牌色 (OKLCh 格式) */
-    --provider-anthropic: oklch(0.7324 0.0867 56.4182); /* #D4A574 金棕色 */
-    --provider-openai: oklch(0.6447 0.1234 166.1234); /* #10A37F 绿色 */
-    --provider-deepseek: oklch(0.6234 0.1456 234.5678); /* #4A90D9 蓝色 */
-    --provider-google: oklch(0.6123 0.1567 245.6789); /* #4285F4 蓝色 */
-    --provider-azure: oklch(0.5789 0.1678 234.5678); /* #0089D6 蓝色 */
-    --provider-aws: oklch(0.7456 0.1890 45.6789); /* #FF9900 橙色 */
-    --provider-cohere: oklch(0.6345 0.1678 45.6789); /* #D97706 橙色 */
-    --provider-mistral: oklch(0.6890 0.1789 34.5678); /* #F97316 橙红 */
-    --provider-custom: oklch(0.5789 0.0234 95.6789); /* #8C8C8C 灰色 */
-    --provider-antigravity: oklch(0.7123 0.2345 345.6789); /* #EC4899 粉色 */
-    --provider-kiro: oklch(0.6890 0.1456 195.6789); /* #00BCD4 青色 */
-
-    /* Client 品牌色 (引用 Provider 颜色) */
-    --client-claude: var(--provider-anthropic);
-    --client-openai: var(--provider-openai);
-    --client-codex: var(--provider-openai);
-    --client-gemini: var(--provider-google);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.2644 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2644 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2644 0 0);
+  --primary: oklch(0.3261 0 0);
+  --primary-foreground: oklch(0.9886 0 0);
+  --secondary: oklch(0.9772 0 0);
+  --secondary-foreground: oklch(0.3261 0 0);
+  --muted: oklch(0.9772 0 0);
+  --muted-foreground: oklch(0.646 0 0);
+  --accent: oklch(0.9772 0 0);
+  --accent-foreground: oklch(0.3261 0 0);
+  --destructive: oklch(0.6201 0.2092 25.7747);
+  --border: oklch(0.9404 0 0);
+  --input: oklch(0.9404 0 0);
+  --ring: oklch(0.7716 0 0);
+  --chart-1: oklch(0.8241 0.1251 84.4866);
+  --chart-2: oklch(0.8006 0.1116 203.6044);
+  --chart-3: oklch(0.4198 0.1693 266.7798);
+  --chart-4: oklch(0.9214 0.0762 125.5777);
+  --chart-5: oklch(0.9151 0.1032 116.1913);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.9886 0 0);
+  --sidebar-foreground: oklch(0.2644 0 0);
+  --sidebar-primary: oklch(0.3261 0 0);
+  --sidebar-primary-foreground: oklch(0.9886 0 0);
+  --sidebar-accent: oklch(0.9772 0 0);
+  --sidebar-accent-foreground: oklch(0.3261 0 0);
+  --sidebar-border: oklch(0.9404 0 0);
+  --sidebar-ring: oklch(0.7716 0 0);
+  --destructive-foreground: oklch(1 0 0);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-opacity: 0.1;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0;
+  --shadow-offset-y: 1px;
+  --letter-spacing: 0em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+
+  /* Provider 品牌色 (OKLCh 格式) */
+  --provider-anthropic: oklch(0.7324 0.0867 56.4182); /* #D4A574 金棕色 */
+  --provider-openai: oklch(0.6447 0.1234 166.1234); /* #10A37F 绿色 */
+  --provider-deepseek: oklch(0.6234 0.1456 234.5678); /* #4A90D9 蓝色 */
+  --provider-google: oklch(0.6123 0.1567 245.6789); /* #4285F4 蓝色 */
+  --provider-azure: oklch(0.5789 0.1678 234.5678); /* #0089D6 蓝色 */
+  --provider-aws: oklch(0.7456 0.189 45.6789); /* #FF9900 橙色 */
+  --provider-cohere: oklch(0.6345 0.1678 45.6789); /* #D97706 橙色 */
+  --provider-mistral: oklch(0.689 0.1789 34.5678); /* #F97316 橙红 */
+  --provider-custom: oklch(0.5789 0.0234 95.6789); /* #8C8C8C 灰色 */
+  --provider-antigravity: oklch(0.7123 0.2345 345.6789); /* #EC4899 粉色 */
+  --provider-kiro: oklch(0.689 0.1456 195.6789); /* #00BCD4 青色 */
+
+  /* Client 品牌色 (引用 Provider 颜色) */
+  --client-claude: var(--provider-anthropic);
+  --client-openai: var(--provider-openai);
+  --client-codex: var(--provider-openai);
+  --client-gemini: var(--provider-google);
 }
 
 .dark {
-    --background: oklch(0.1405 0.0044 285.8238);
-    --foreground: oklch(0.9848 0 0);
-    --card: oklch(0.1405 0.0044 285.8238);
-    --card-foreground: oklch(0.9848 0 0);
-    --popover: oklch(0.1405 0.0044 285.8238);
-    --popover-foreground: oklch(0.9848 0 0);
-    --primary: oklch(0.9848 0 0);
-    --primary-foreground: oklch(0.2103 0.0059 285.8835);
-    --secondary: oklch(0.2741 0.0055 286.0329);
-    --secondary-foreground: oklch(0.9848 0 0);
-    --muted: oklch(0.2741 0.0055 286.0329);
-    --muted-foreground: oklch(0.7119 0.0129 286.0684);
-    --accent: oklch(0.2741 0.0055 286.0329);
-    --accent-foreground: oklch(0.9848 0 0);
-    --destructive: oklch(0.3959 0.1331 25.7205);
-    --border: oklch(0.2741 0.0055 286.0329);
-    --input: oklch(0.2741 0.0055 286.0329);
-    --ring: oklch(0.8709 0.0055 286.2853);
-    --chart-1: oklch(0.5292 0.1931 262.1292);
-    --chart-2: oklch(0.6983 0.1337 165.4626);
-    --chart-3: oklch(0.7232 0.1500 60.6307);
-    --chart-4: oklch(0.6192 0.2037 312.7283);
-    --chart-5: oklch(0.6123 0.2093 6.3856);
-    --sidebar: oklch(0.2103 0.0059 285.8835);
-    --sidebar-foreground: oklch(0.9676 0.0013 286.3752);
-    --sidebar-primary: oklch(0.4878 0.2170 264.3876);
-    --sidebar-primary-foreground: oklch(1.0000 0 0);
-    --sidebar-accent: oklch(0.2741 0.0055 286.0329);
-    --sidebar-accent-foreground: oklch(0.9676 0.0013 286.3752);
-    --sidebar-border: oklch(0.2741 0.0055 286.0329);
-    --sidebar-ring: oklch(0.8709 0.0055 286.2853);
-    --destructive-foreground: oklch(0.9710 0.0127 17.3758);
-    --radius: 0.625rem;
-    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --shadow-color: hsl(0 0% 0%);
-    --shadow-opacity: 0.1;
-    --shadow-blur: 3px;
-    --shadow-spread: 0px;
-    --shadow-offset-x: 0;
-    --shadow-offset-y: 1px;
-    --letter-spacing: 0em;
-    --spacing: 0.25rem;
-    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --background: oklch(0.1405 0.0044 285.8238);
+  --foreground: oklch(0.9848 0 0);
+  --card: oklch(0.1405 0.0044 285.8238);
+  --card-foreground: oklch(0.9848 0 0);
+  --popover: oklch(0.1405 0.0044 285.8238);
+  --popover-foreground: oklch(0.9848 0 0);
+  --primary: oklch(0.9848 0 0);
+  --primary-foreground: oklch(0.2103 0.0059 285.8835);
+  --secondary: oklch(0.2741 0.0055 286.0329);
+  --secondary-foreground: oklch(0.9848 0 0);
+  --muted: oklch(0.2741 0.0055 286.0329);
+  --muted-foreground: oklch(0.7119 0.0129 286.0684);
+  --accent: oklch(0.2741 0.0055 286.0329);
+  --accent-foreground: oklch(0.9848 0 0);
+  --destructive: oklch(0.3959 0.1331 25.7205);
+  --border: oklch(0.2741 0.0055 286.0329);
+  --input: oklch(0.2741 0.0055 286.0329);
+  --ring: oklch(0.8709 0.0055 286.2853);
+  --chart-1: oklch(0.5292 0.1931 262.1292);
+  --chart-2: oklch(0.6983 0.1337 165.4626);
+  --chart-3: oklch(0.7232 0.15 60.6307);
+  --chart-4: oklch(0.6192 0.2037 312.7283);
+  --chart-5: oklch(0.6123 0.2093 6.3856);
+  --sidebar: oklch(0.2103 0.0059 285.8835);
+  --sidebar-foreground: oklch(0.9676 0.0013 286.3752);
+  --sidebar-primary: oklch(0.4878 0.217 264.3876);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.2741 0.0055 286.0329);
+  --sidebar-accent-foreground: oklch(0.9676 0.0013 286.3752);
+  --sidebar-border: oklch(0.2741 0.0055 286.0329);
+  --sidebar-ring: oklch(0.8709 0.0055 286.2853);
+  --destructive-foreground: oklch(0.971 0.0127 17.3758);
+  --radius: 0.625rem;
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-opacity: 0.1;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0;
+  --shadow-offset-y: 1px;
+  --letter-spacing: 0em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
 }
 
 @theme inline {
-    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --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);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --color-success: #4EC9B0;
-    --color-warning: #DDB359;
-    --color-error: #F14C4C;
-    --color-info: #4FC1FF;
-    --color-accent-hover: var(--primary);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
-    --spacing: 0.25rem;
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --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);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-success: #4ec9b0;
+  --color-warning: #ddb359;
+  --color-error: #f14c4c;
+  --color-info: #4fc1ff;
+  --color-accent-hover: var(--primary);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --spacing: 0.25rem;
 
   /* Animations */
   --animate-fade-in: fadeIn 0.15s ease-in-out;
   --animate-slide-up: slideUp 0.2s ease-out;
   --animate-pulse-soft: pulseSoft 1.5s ease-in-out infinite;
   --animate-marquee: marquee 1s linear infinite;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
   --radius: 0.625rem;
   --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
   --tracking-tight: calc(var(--tracking-normal) - 0.025em);
@@ -278,7 +292,8 @@ body {
 
 /* ===== Component Styles ===== */
 
-html, body {
+html,
+body {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -296,8 +311,12 @@ html, body {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideUp {
@@ -312,7 +331,8 @@ html, body {
 }
 
 @keyframes pulseSoft {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
     box-shadow: 0 0 0px rgba(0, 0, 0, 0);
   }
@@ -328,7 +348,8 @@ html, body {
 }
 
 @keyframes pulseSoftDark {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
     box-shadow: 0 0 0px rgba(255, 255, 255, 0);
   }
@@ -339,28 +360,49 @@ html, body {
 }
 
 @keyframes pulseSlow {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.8; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
 }
 
 @keyframes marquee {
-  0% { background-position: 0 0; }
-  100% { background-position: 2rem 2rem; }
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 2rem 2rem;
+  }
 }
 
 @keyframes snowing-near {
-  0% { background-position: 0 0; }
-  100% { background-position: 150px 300px; }
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 150px 300px;
+  }
 }
 
 @keyframes snowing-mid {
-  0% { background-position: 0 0; }
-  100% { background-position: -120px 240px; }
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -120px 240px;
+  }
 }
 
 @keyframes snowing-far {
-  0% { background-position: 0 0; }
-  100% { background-position: 90px 180px; }
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 90px 180px;
+  }
 }
 
 .animate-streaming-badge {
@@ -446,13 +488,21 @@ html, body {
 }
 
 @keyframes snowing-layer4 {
-  0% { background-position: 0 0; }
-  100% { background-position: 40px 200px; }
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 40px 200px;
+  }
 }
 
 @keyframes snowing-layer5 {
-  0% { background-position: 0 0; }
-  100% { background-position: -80px 240px; }
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -80px 240px;
+  }
 }
 
 .animate-snowing-secondary {
@@ -502,28 +552,64 @@ html, body {
 }
 
 /* Provider Colors */
-.provider-anthropic { color: #D4A574; }
-.provider-openai { color: #10A37F; }
-.provider-deepseek { color: #4A90D9; }
-.provider-google { color: #4285F4; }
-.provider-azure { color: #0089D6; }
-.provider-aws { color: #FF9900; }
-.provider-cohere { color: #D97706; }
-.provider-mistral { color: #F97316; }
-.provider-custom { color: #8C8C8C; }
-
-.bg-provider-anthropic { background-color: rgba(212, 165, 116, 0.15); }
-.bg-provider-openai { background-color: rgba(16, 163, 127, 0.15); }
-.bg-provider-deepseek { background-color: rgba(74, 144, 217, 0.15); }
-.bg-provider-google { background-color: rgba(66, 133, 244, 0.15); }
-.bg-provider-azure { background-color: rgba(0, 137, 214, 0.15); }
-.bg-provider-aws { background-color: rgba(255, 153, 0, 0.15); }
-.bg-provider-cohere { background-color: rgba(215, 119, 6, 0.15); }
-.bg-provider-mistral { background-color: rgba(249, 115, 22, 0.15); }
-.bg-provider-custom { background-color: rgba(140, 140, 140, 0.15); }
+.provider-anthropic {
+  color: #d4a574;
+}
+.provider-openai {
+  color: #10a37f;
+}
+.provider-deepseek {
+  color: #4a90d9;
+}
+.provider-google {
+  color: #4285f4;
+}
+.provider-azure {
+  color: #0089d6;
+}
+.provider-aws {
+  color: #ff9900;
+}
+.provider-cohere {
+  color: #d97706;
+}
+.provider-mistral {
+  color: #f97316;
+}
+.provider-custom {
+  color: #8c8c8c;
+}
+
+.bg-provider-anthropic {
+  background-color: rgba(212, 165, 116, 0.15);
+}
+.bg-provider-openai {
+  background-color: rgba(16, 163, 127, 0.15);
+}
+.bg-provider-deepseek {
+  background-color: rgba(74, 144, 217, 0.15);
+}
+.bg-provider-google {
+  background-color: rgba(66, 133, 244, 0.15);
+}
+.bg-provider-azure {
+  background-color: rgba(0, 137, 214, 0.15);
+}
+.bg-provider-aws {
+  background-color: rgba(255, 153, 0, 0.15);
+}
+.bg-provider-cohere {
+  background-color: rgba(215, 119, 6, 0.15);
+}
+.bg-provider-mistral {
+  background-color: rgba(249, 115, 22, 0.15);
+}
+.bg-provider-custom {
+  background-color: rgba(140, 140, 140, 0.15);
+}
 
 @layer base {
   body {
     letter-spacing: var(--tracking-normal);
-    }
-}
\ No newline at end of file
+  }
+}
diff --git a/web/src/lib/i18n.ts b/web/src/lib/i18n.ts
index fcdb0d45..4eed82ab 100644
--- a/web/src/lib/i18n.ts
+++ b/web/src/lib/i18n.ts
@@ -21,19 +21,17 @@ function getInitialLanguage(): string {
   return getBrowserLanguage();
 }
 
-i18n
-  .use(initReactI18next)
-  .init({
-    resources: {
-      en: { translation: en },
-      zh: { translation: zh },
-    },
-    lng: getInitialLanguage(),
-    fallbackLng: 'en',
-    interpolation: {
-      escapeValue: false, // React 已经处理了 XSS
-    },
-  });
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { translation: en },
+    zh: { translation: zh },
+  },
+  lng: getInitialLanguage(),
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false, // React 已经处理了 XSS
+  },
+});
 
 // 语言变化时保存到 localStorage
 i18n.on('languageChanged', (lng) => {
diff --git a/web/src/lib/theme.ts b/web/src/lib/theme.ts
index dac803e4..f7361551 100644
--- a/web/src/lib/theme.ts
+++ b/web/src/lib/theme.ts
@@ -118,11 +118,9 @@ export const shadows = {
  */
 export function getComputedColor(
   varName: ColorVariable,
-  element: HTMLElement = document.documentElement
+  element: HTMLElement = document.documentElement,
 ): string {
-  return getComputedStyle(element)
-    .getPropertyValue(`--${varName}`)
-    .trim();
+  return getComputedStyle(element).getPropertyValue(`--${varName}`).trim();
 }
 
 /**
diff --git a/web/src/lib/transport/context.tsx b/web/src/lib/transport/context.tsx
index acf6b773..fa9f76c7 100644
--- a/web/src/lib/transport/context.tsx
+++ b/web/src/lib/transport/context.tsx
@@ -149,7 +149,7 @@ export function useTransport(): TransportContextValue {
   if (!context) {
     throw new Error(
       '[useTransport] Must be used within a TransportProvider. ' +
-        'Wrap your app with <TransportProvider> first.'
+        'Wrap your app with <TransportProvider> first.',
     );
   }
 
@@ -164,4 +164,3 @@ export function useTransport(): TransportContextValue {
 export function useTransportType(): TransportType {
   return useTransport().type;
 }
-
diff --git a/web/src/lib/transport/factory.ts b/web/src/lib/transport/factory.ts
index bf737ef4..e054b229 100644
--- a/web/src/lib/transport/factory.ts
+++ b/web/src/lib/transport/factory.ts
@@ -28,7 +28,6 @@ export function detectTransportType(): TransportType {
   return 'http';
 }
 
-
 /**
  * 初始化全局 Transport 单例（异步）
  * 在应用启动时调用一次
@@ -84,13 +83,13 @@ export function getTransport(): Transport {
 
   if (state.status === 'uninitialized') {
     throw new Error(
-      '[Transport] Transport not initialized. Call initializeTransport() first, or use useTransport() hook.'
+      '[Transport] Transport not initialized. Call initializeTransport() first, or use useTransport() hook.',
     );
   }
 
   if (state.status === 'initializing') {
     throw new Error(
-      '[Transport] Transport is still initializing. Use useTransport() hook or await initializeTransport().'
+      '[Transport] Transport is still initializing. Use useTransport() hook or await initializeTransport().',
     );
   }
 
diff --git a/web/src/lib/transport/http-transport.ts b/web/src/lib/transport/http-transport.ts
index ff0a48d1..69f30f2b 100644
--- a/web/src/lib/transport/http-transport.ts
+++ b/web/src/lib/transport/http-transport.ts
@@ -59,7 +59,8 @@ export class HttpTransport implements Transport {
   constructor(config: TransportConfig = {}) {
     this.config = {
       baseURL: config.baseURL ?? '/api/admin',
-      wsURL: config.wsURL ?? `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`,
+      wsURL:
+        config.wsURL ?? `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`,
       reconnectInterval: config.reconnectInterval ?? 3000,
       maxReconnectAttempts: config.maxReconnectAttempts ?? 10,
     };
@@ -184,17 +185,20 @@ export class HttpTransport implements Transport {
     return data ?? [];
   }
 
-  async updateSessionProject(sessionID: string, projectID: number): Promise<{ session: Session; updatedRequests: number }> {
-    const { data } = await this.client.put<{ session: Session; updatedRequests: number }>(
-      `/sessions/${encodeURIComponent(sessionID)}/project`,
-      { projectID }
-    );
+  async updateSessionProject(
+    sessionID: string,
+    projectID: number,
+  ): Promise<{ session: Session; updatedRequests: number }> {
+    const { data } = await this.client.put<{
+      session: Session;
+      updatedRequests: number;
+    }>(`/sessions/${encodeURIComponent(sessionID)}/project`, { projectID });
     return data;
   }
 
   async rejectSession(sessionID: string): Promise<Session> {
     const { data } = await this.client.post<Session>(
-      `/sessions/${encodeURIComponent(sessionID)}/reject`
+      `/sessions/${encodeURIComponent(sessionID)}/reject`,
     );
     return data;
   }
@@ -242,7 +246,10 @@ export class HttpTransport implements Transport {
     return data;
   }
 
-  async updateRoutingStrategy(id: number, payload: Partial<RoutingStrategy>): Promise<RoutingStrategy> {
+  async updateRoutingStrategy(
+    id: number,
+    payload: Partial<RoutingStrategy>,
+  ): Promise<RoutingStrategy> {
     const { data } = await this.client.put<RoutingStrategy>(`/routing-strategies/${id}`, payload);
     return data;
   }
@@ -253,8 +260,12 @@ export class HttpTransport implements Transport {
 
   // ===== ProxyRequest API =====
 
-  async getProxyRequests(params?: CursorPaginationParams): Promise<CursorPaginationResult<ProxyRequest>> {
-    const { data } = await this.client.get<CursorPaginationResult<ProxyRequest>>('/requests', { params });
+  async getProxyRequests(
+    params?: CursorPaginationParams,
+  ): Promise<CursorPaginationResult<ProxyRequest>> {
+    const { data } = await this.client.get<CursorPaginationResult<ProxyRequest>>('/requests', {
+      params,
+    });
     return data ?? { items: [], hasMore: false };
   }
 
@@ -269,7 +280,9 @@ export class HttpTransport implements Transport {
   }
 
   async getProxyUpstreamAttempts(proxyRequestId: number): Promise<ProxyUpstreamAttempt[]> {
-    const { data } = await this.client.get<ProxyUpstreamAttempt[]>(`/requests/${proxyRequestId}/attempts`);
+    const { data } = await this.client.get<ProxyUpstreamAttempt[]>(
+      `/requests/${proxyRequestId}/attempts`,
+    );
     return data ?? [];
   }
 
@@ -282,11 +295,16 @@ export class HttpTransport implements Transport {
 
   // ===== Provider Stats API =====
 
-  async getProviderStats(clientType?: string, projectId?: number): Promise<Record<number, ProviderStats>> {
+  async getProviderStats(
+    clientType?: string,
+    projectId?: number,
+  ): Promise<Record<number, ProviderStats>> {
     const params: Record<string, string | number> = {};
     if (clientType) params.client_type = clientType;
     if (projectId !== undefined) params.project_id = projectId;
-    const { data } = await this.client.get<Record<number, ProviderStats>>('/provider-stats', { params: Object.keys(params).length > 0 ? params : undefined });
+    const { data } = await this.client.get<Record<number, ProviderStats>>('/provider-stats', {
+      params: Object.keys(params).length > 0 ? params : undefined,
+    });
     return data ?? {};
   }
 
@@ -303,7 +321,9 @@ export class HttpTransport implements Transport {
   }
 
   async updateSetting(key: string, value: string): Promise<{ key: string; value: string }> {
-    const { data } = await this.client.put<{ key: string; value: string }>(`/settings/${key}`, { value });
+    const { data } = await this.client.put<{ key: string; value: string }>(`/settings/${key}`, {
+      value,
+    });
     return data;
   }
 
@@ -325,7 +345,7 @@ export class HttpTransport implements Transport {
   async validateAntigravityToken(refreshToken: string): Promise<AntigravityTokenValidationResult> {
     const { data } = await axios.post<AntigravityTokenValidationResult>(
       '/api/antigravity/validate-token',
-      { refreshToken }
+      { refreshToken },
     );
     return data;
   }
@@ -333,7 +353,7 @@ export class HttpTransport implements Transport {
   async validateAntigravityTokens(tokens: string[]): Promise<AntigravityBatchValidationResult> {
     const { data } = await axios.post<AntigravityBatchValidationResult>(
       '/api/antigravity/validate-tokens',
-      { tokens }
+      { tokens },
     );
     return data;
   }
@@ -341,23 +361,26 @@ export class HttpTransport implements Transport {
   async validateAntigravityTokenText(tokenText: string): Promise<AntigravityBatchValidationResult> {
     const { data } = await axios.post<AntigravityBatchValidationResult>(
       '/api/antigravity/validate-tokens',
-      { tokenText }
+      { tokenText },
     );
     return data;
   }
 
-  async getAntigravityProviderQuota(providerId: number, forceRefresh?: boolean): Promise<AntigravityQuotaData> {
+  async getAntigravityProviderQuota(
+    providerId: number,
+    forceRefresh?: boolean,
+  ): Promise<AntigravityQuotaData> {
     const params = forceRefresh ? { refresh: 'true' } : undefined;
     const { data } = await axios.get<AntigravityQuotaData>(
       `/api/antigravity/providers/${providerId}/quota`,
-      { params }
+      { params },
     );
     return data;
   }
 
   async startAntigravityOAuth(): Promise<{ authURL: string; state: string }> {
     const { data } = await axios.post<{ authURL: string; state: string }>(
-      '/api/antigravity/oauth/start'
+      '/api/antigravity/oauth/start',
     );
     return data;
   }
@@ -396,15 +419,13 @@ export class HttpTransport implements Transport {
   async validateKiroSocialToken(refreshToken: string): Promise<KiroTokenValidationResult> {
     const { data } = await axios.post<KiroTokenValidationResult>(
       '/api/kiro/validate-social-token',
-      { refreshToken }
+      { refreshToken },
     );
     return data;
   }
 
   async getKiroProviderQuota(providerId: number): Promise<KiroQuotaData> {
-    const { data } = await axios.get<KiroQuotaData>(
-      `/api/kiro/providers/${providerId}/quota`
-    );
+    const { data } = await axios.get<KiroQuotaData>(`/api/kiro/providers/${providerId}/quota`);
     return data;
   }
 
@@ -427,10 +448,7 @@ export class HttpTransport implements Transport {
   }
 
   async verifyPassword(password: string): Promise<AuthVerifyResult> {
-    const { data } = await axios.post<AuthVerifyResult>(
-      '/api/admin/auth/verify',
-      { password }
-    );
+    const { data } = await axios.post<AuthVerifyResult>('/api/admin/auth/verify', { password });
     return data;
   }
 
diff --git a/web/src/lib/transport/index.ts b/web/src/lib/transport/index.ts
index 139e51f1..b040d1a5 100644
--- a/web/src/lib/transport/index.ts
+++ b/web/src/lib/transport/index.ts
@@ -66,11 +66,7 @@ export type {
   UsageStatsFilter,
 } from './types';
 
-export type {
-  Transport,
-  TransportType,
-  TransportConfig,
-} from './interface';
+export type { Transport, TransportType, TransportConfig } from './interface';
 
 // 实现导出
 export { HttpTransport } from './http-transport';
@@ -87,8 +83,4 @@ export {
 } from './factory';
 
 // React Context 导出
-export {
-  TransportProvider,
-  useTransport,
-  useTransportType,
-} from './context';
+export { TransportProvider, useTransport, useTransportType } from './context';
diff --git a/web/src/lib/transport/interface.ts b/web/src/lib/transport/interface.ts
index f3d8128e..55b565ca 100644
--- a/web/src/lib/transport/interface.ts
+++ b/web/src/lib/transport/interface.ts
@@ -74,7 +74,10 @@ export interface Transport {
 
   // ===== Session API =====
   getSessions(): Promise<Session[]>;
-  updateSessionProject(sessionID: string, projectID: number): Promise<{ session: Session; updatedRequests: number }>;
+  updateSessionProject(
+    sessionID: string,
+    projectID: number,
+  ): Promise<{ session: Session; updatedRequests: number }>;
   rejectSession(sessionID: string): Promise<Session>;
 
   // ===== RetryConfig API =====
@@ -116,7 +119,10 @@ export interface Transport {
   validateAntigravityToken(refreshToken: string): Promise<AntigravityTokenValidationResult>;
   validateAntigravityTokens(tokens: string[]): Promise<AntigravityBatchValidationResult>;
   validateAntigravityTokenText(tokenText: string): Promise<AntigravityBatchValidationResult>;
-  getAntigravityProviderQuota(providerId: number, forceRefresh?: boolean): Promise<AntigravityQuotaData>;
+  getAntigravityProviderQuota(
+    providerId: number,
+    forceRefresh?: boolean,
+  ): Promise<AntigravityQuotaData>;
   startAntigravityOAuth(): Promise<{ authURL: string; state: string }>;
 
   // ===== Model Mapping API =====
diff --git a/web/src/lib/transport/types.ts b/web/src/lib/transport/types.ts
index f0aa8f16..43993700 100644
--- a/web/src/lib/transport/types.ts
+++ b/web/src/lib/transport/types.ts
@@ -51,7 +51,10 @@ export interface Provider {
 }
 
 // supportedClientTypes 可选，后端会根据 provider type 自动设置
-export type CreateProviderData = Omit<Provider, 'id' | 'createdAt' | 'updatedAt' | 'supportedClientTypes'> & {
+export type CreateProviderData = Omit<
+  Provider,
+  'id' | 'createdAt' | 'updatedAt' | 'supportedClientTypes'
+> & {
   supportedClientTypes?: ClientType[];
 };
 
@@ -154,7 +157,13 @@ export interface ResponseInfo {
   body: string;
 }
 
-export type ProxyRequestStatus = 'PENDING' | 'IN_PROGRESS' | 'COMPLETED' | 'FAILED' | 'CANCELLED' | 'REJECTED';
+export type ProxyRequestStatus =
+  | 'PENDING'
+  | 'IN_PROGRESS'
+  | 'COMPLETED'
+  | 'FAILED'
+  | 'CANCELLED'
+  | 'REJECTED';
 
 export interface ProxyRequest {
   id: number;
@@ -194,7 +203,12 @@ export interface ProxyRequest {
 
 // ===== ProxyUpstreamAttempt =====
 
-export type ProxyUpstreamAttemptStatus = 'PENDING' | 'IN_PROGRESS' | 'COMPLETED' | 'FAILED' | 'CANCELLED';
+export type ProxyUpstreamAttemptStatus =
+  | 'PENDING'
+  | 'IN_PROGRESS'
+  | 'COMPLETED'
+  | 'FAILED'
+  | 'CANCELLED';
 
 export interface ProxyUpstreamAttempt {
   id: number;
@@ -207,8 +221,8 @@ export interface ProxyUpstreamAttempt {
   proxyRequestID: number;
   isStream: boolean; // 是否为 SSE 流式请求
   // 模型信息
-  requestModel: string;  // 客户端请求的原始模型
-  mappedModel: string;   // 映射后实际发送的模型
+  requestModel: string; // 客户端请求的原始模型
+  mappedModel: string; // 映射后实际发送的模型
   responseModel: string; // 上游响应中返回的模型名称
   requestInfo: RequestInfo | null;
   responseInfo: ResponseInfo | null;
@@ -338,7 +352,7 @@ export interface AntigravityBatchValidationResult {
 }
 
 export interface AntigravityOAuthResult {
-  state: string;        // 用于前端匹配会话
+  state: string; // 用于前端匹配会话
   success: boolean;
   accessToken?: string;
   refreshToken?: string;
@@ -356,17 +370,17 @@ export interface ModelMapping {
   id: number;
   createdAt: string;
   updatedAt: string;
-  clientType: string;    // 客户端类型，空表示所有
-  providerType: string;  // 供应商类型（如 antigravity, kiro, custom），空表示所有
-  providerID: number;    // 供应商 ID，0 表示所有
-  projectID: number;     // 项目 ID，0 表示所有
-  routeID: number;       // 路由 ID，0 表示所有
-  apiTokenID: number;    // Token ID，0 表示所有
-  pattern: string;       // 源模式，支持 * 通配符
-  target: string;        // 目标模型名
-  priority: number;      // 优先级，数字越小优先级越高
-  isEnabled: boolean;    // 是否启用
-  isBuiltin: boolean;    // 是否为内置规则
+  clientType: string; // 客户端类型，空表示所有
+  providerType: string; // 供应商类型（如 antigravity, kiro, custom），空表示所有
+  providerID: number; // 供应商 ID，0 表示所有
+  projectID: number; // 项目 ID，0 表示所有
+  routeID: number; // 路由 ID，0 表示所有
+  apiTokenID: number; // Token ID，0 表示所有
+  pattern: string; // 源模式，支持 * 通配符
+  target: string; // 目标模型名
+  priority: number; // 优先级，数字越小优先级越高
+  isEnabled: boolean; // 是否启用
+  isBuiltin: boolean; // 是否为内置规则
 }
 
 // 创建/更新模型映射的请求
@@ -402,9 +416,9 @@ export interface KiroTokenValidationResult {
 }
 
 export interface KiroQuotaData {
-  total_limit: number;      // 总额度（包括基础+免费试用）
-  available: number;        // 可用额度
-  used: number;             // 已使用额度
+  total_limit: number; // 总额度（包括基础+免费试用）
+  available: number; // 可用额度
+  used: number; // 已使用额度
   days_until_reset: number;
   subscription_type: string;
   free_trial_status?: string;
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 0e8eb056..2d2e317d 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -16,11 +16,11 @@ export function cn(...inputs: ClassValue[]) {
  */
 export function formatDuration(ns: number): string {
   // Convert nanoseconds to milliseconds
-  const ms = ns / 1_000_000
-  if (ms < 1000) return `${ms.toFixed(0)}ms`
-  const seconds = ms / 1000
-  if (seconds < 60) return `${seconds.toFixed(2)}s`
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = Math.floor(seconds % 60)
-  return `${minutes}m ${remainingSeconds}s`
+  const ms = ns / 1_000_000;
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  const seconds = ms / 1000;
+  if (seconds < 60) return `${seconds.toFixed(2)}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes}m ${remainingSeconds}s`;
 }
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 830bc1fb..e285c967 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -510,5 +510,44 @@
     "costUSD": "Cost (USD)",
     "successful": "Successful",
     "failed": "Failed"
+  },
+  "addProvider": {
+    "title": "Add Provider",
+    "subtitle": "Choose a service provider to get started",
+    "chooseProvider": "Choose Service Provider",
+    "selectTemplate": "Select a Template",
+    "optional": "(Optional)",
+    "emptyTemplate": "Empty Template",
+    "startFromScratch": "Start from scratch",
+    "antigravity": {
+      "name": "Antigravity Cloud",
+      "description": "Zero-config managed service with OAuth"
+    },
+    "kiro": {
+      "name": "Kiro (Q Developer)",
+      "description": "AWS CodeWhisperer / Q Developer"
+    },
+    "custom": {
+      "name": "Custom Provider",
+      "description": "Configure your own API endpoint"
+    },
+    "templates": {
+      "88code": {
+        "name": "88 Code",
+        "description": "Claude + Codex + Gemini"
+      },
+      "aicodemirror": {
+        "name": "AI Code Mirror",
+        "description": "Claude + Codex + Gemini"
+      },
+      "duckcoding": {
+        "name": "DuckCoding",
+        "description": "Claude + Codex + Gemini"
+      },
+      "freeduck": {
+        "name": "Free Duck",
+        "description": "Free site · Claude Code only"
+      }
+    }
   }
 }
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 25e473bf..89e27c93 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -157,7 +157,7 @@
     "name": "名称",
     "slugDesc": "用于 URL 和代理路径",
     "baseUrl": "基础 URL:",
-    "updated": "更新时间:",
+    "updated": "更新时间：",
     "saveChanges": "保存更改",
     "copyUrl": "复制 URL",
     "proxyConfigDesc": "使用此基础 URL 通过此项目的配置路由请求。协议（Claude、OpenAI、Gemini）会自动检测。"
@@ -420,7 +420,7 @@
     "deleteRoute": "删除此路由",
     "forceThawWarning": "强制解冻可能导致请求因根本原因未解决而再次失败。",
     "cooldownActive": "冷却保护激活",
-    "clients": "客户端:",
+    "clients": "客户端：",
     "notConfigured": "未配置",
     "clearCooldown": "清除冷却",
     "configure": "配置提供商",
@@ -458,9 +458,9 @@
   },
   "proxy": {
     "listeningOn": "监听于",
-    "copied": "已复制!",
+    "copied": "已复制！",
     "clickToCopy": "点击复制",
-    "clickToCopyTooltip": "点击复制: {{url}}",
+    "clickToCopyTooltip": "点击复制：{{url}}",
     "comingSoon": "即将到来",
     "resetsIn": "重置于"
   },
@@ -473,7 +473,7 @@
     "searchOrEnter": "搜索或输入自定义模型...",
     "selectModel": "选择模型",
     "noMatchingModels": "未找到匹配的模型。",
-    "useCustom": "使用自定义:",
+    "useCustom": "使用自定义：",
     "noModelsAvailable": "无可用模型",
     "pressToUse": "按 {{key}} 使用自定义模型名称",
     "toUseCustomModel": "使用自定义模型名称"
@@ -509,5 +509,44 @@
     "costUSD": "费用 (USD)",
     "successful": "成功",
     "failed": "失败"
+  },
+  "addProvider": {
+    "title": "添加提供商",
+    "subtitle": "选择服务提供商以开始使用",
+    "chooseProvider": "选择服务提供商",
+    "selectTemplate": "选择模板",
+    "optional": "（可选）",
+    "emptyTemplate": "空白模板",
+    "startFromScratch": "从头开始",
+    "antigravity": {
+      "name": "Antigravity",
+      "description": "零配置托管服务，支持 OAuth"
+    },
+    "kiro": {
+      "name": "Kiro (Q Developer)",
+      "description": "AWS CodeWhisperer / Q Developer"
+    },
+    "custom": {
+      "name": "自定义提供商",
+      "description": "配置您自己的 API 端点"
+    },
+    "templates": {
+      "88code": {
+        "name": "88 Code",
+        "description": "Claude + Codex + Gemini"
+      },
+      "aicodemirror": {
+        "name": "AI Code Mirror",
+        "description": "Claude + Codex + Gemini"
+      },
+      "duckcoding": {
+        "name": "DuckCoding",
+        "description": "Claude + Codex + Gemini"
+      },
+      "freeduck": {
+        "name": "Free Duck",
+        "description": "免费站点 · 只有 Claude Code"
+      }
+    }
   }
 }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index ca238f42..2e31703e 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -69,5 +69,5 @@ createRoot(document.getElementById('root')!).render(
         </QueryClientProvider>
       </TransportProvider>
     </ThemeProvider>
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/web/src/pages/api-tokens/index.tsx b/web/src/pages/api-tokens/index.tsx
index de91c54f..979270af 100644
--- a/web/src/pages/api-tokens/index.tsx
+++ b/web/src/pages/api-tokens/index.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   Card,
@@ -19,7 +19,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui'
+} from '@/components/ui';
 import {
   useAPITokens,
   useCreateAPIToken,
@@ -28,7 +28,7 @@ import {
   useProjects,
   useSettings,
   useUpdateSetting,
-} from '@/hooks/queries'
+} from '@/hooks/queries';
 import {
   Plus,
   X,
@@ -42,55 +42,55 @@ import {
   Hash,
   FolderKanban,
   Shield,
-} from 'lucide-react'
-import { PageHeader } from '@/components/layout'
-import type { APIToken } from '@/lib/transport'
+} from 'lucide-react';
+import { PageHeader } from '@/components/layout';
+import type { APIToken } from '@/lib/transport';
 
 export function APITokensPage() {
-  const { t, i18n } = useTranslation()
-  const { data: tokens, isLoading } = useAPITokens()
-  const { data: projects } = useProjects()
-  const { data: settings } = useSettings()
-  const updateSetting = useUpdateSetting()
-  const createToken = useCreateAPIToken()
-  const updateToken = useUpdateAPIToken()
-  const deleteToken = useDeleteAPIToken()
+  const { t, i18n } = useTranslation();
+  const { data: tokens, isLoading } = useAPITokens();
+  const { data: projects } = useProjects();
+  const { data: settings } = useSettings();
+  const updateSetting = useUpdateSetting();
+  const createToken = useCreateAPIToken();
+  const updateToken = useUpdateAPIToken();
+  const deleteToken = useDeleteAPIToken();
 
-  const apiTokenAuthEnabled = settings?.api_token_auth_enabled === 'true'
+  const apiTokenAuthEnabled = settings?.api_token_auth_enabled === 'true';
 
   const handleToggleAuth = (checked: boolean) => {
     updateSetting.mutate({
       key: 'api_token_auth_enabled',
       value: checked ? 'true' : 'false',
-    })
-  }
+    });
+  };
 
-  const [showForm, setShowForm] = useState(false)
-  const [editingToken, setEditingToken] = useState<APIToken | null>(null)
-  const [deletingToken, setDeletingToken] = useState<APIToken | null>(null)
+  const [showForm, setShowForm] = useState(false);
+  const [editingToken, setEditingToken] = useState<APIToken | null>(null);
+  const [deletingToken, setDeletingToken] = useState<APIToken | null>(null);
   const [newTokenDialog, setNewTokenDialog] = useState<{
-    token: string
-    name: string
-  } | null>(null)
-  const [copied, setCopied] = useState(false)
+    token: string;
+    name: string;
+  } | null>(null);
+  const [copied, setCopied] = useState(false);
 
   // Form state
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [projectID, setProjectID] = useState<string>('0')
-  const [expiresAt, setExpiresAt] = useState('')
-  const [showProjectPicker, setShowProjectPicker] = useState(false)
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [projectID, setProjectID] = useState<string>('0');
+  const [expiresAt, setExpiresAt] = useState('');
+  const [showProjectPicker, setShowProjectPicker] = useState(false);
 
   const resetForm = () => {
-    setName('')
-    setDescription('')
-    setProjectID('0')
-    setExpiresAt('')
-    setShowProjectPicker(false)
-  }
+    setName('');
+    setDescription('');
+    setProjectID('0');
+    setExpiresAt('');
+    setShowProjectPicker(false);
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     createToken.mutate(
       {
         name,
@@ -99,19 +99,19 @@ export function APITokensPage() {
         expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
       },
       {
-        onSuccess: result => {
-          setShowForm(false)
-          resetForm()
+        onSuccess: (result) => {
+          setShowForm(false);
+          resetForm();
           // Show the new token dialog
-          setNewTokenDialog({ token: result.token, name: result.apiToken.name })
+          setNewTokenDialog({ token: result.token, name: result.apiToken.name });
         },
-      }
-    )
-  }
+      },
+    );
+  };
 
   const handleUpdate = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!editingToken) return
+    e.preventDefault();
+    if (!editingToken) return;
 
     updateToken.mutate(
       {
@@ -125,52 +125,52 @@ export function APITokensPage() {
       },
       {
         onSuccess: () => {
-          setEditingToken(null)
-          resetForm()
+          setEditingToken(null);
+          resetForm();
         },
-      }
-    )
-  }
+      },
+    );
+  };
 
   const handleToggleEnabled = (token: APIToken) => {
     updateToken.mutate({
       id: token.id,
       data: { isEnabled: !token.isEnabled },
-    })
-  }
+    });
+  };
 
   const handleDelete = () => {
-    if (!deletingToken) return
+    if (!deletingToken) return;
     deleteToken.mutate(deletingToken.id, {
       onSuccess: () => setDeletingToken(null),
-    })
-  }
+    });
+  };
 
   const handleEdit = (token: APIToken) => {
-    setEditingToken(token)
-    setName(token.name)
-    setDescription(token.description)
-    setProjectID(token.projectID.toString())
-    setExpiresAt(token.expiresAt ? token.expiresAt.split('T')[0] : '')
-  }
+    setEditingToken(token);
+    setName(token.name);
+    setDescription(token.description);
+    setProjectID(token.projectID.toString());
+    setExpiresAt(token.expiresAt ? token.expiresAt.split('T')[0] : '');
+  };
 
   const handleCopyToken = async () => {
-    if (!newTokenDialog) return
-    await navigator.clipboard.writeText(newTokenDialog.token)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
+    if (!newTokenDialog) return;
+    await navigator.clipboard.writeText(newTokenDialog.token);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   const getProjectName = (projectId: number) => {
-    if (projectId === 0) return t('apiTokens.global')
-    const project = projects?.find(p => p.id === projectId)
-    return project?.name || t('apiTokens.unknownProject', { id: projectId })
-  }
+    if (projectId === 0) return t('apiTokens.global');
+    const project = projects?.find((p) => p.id === projectId);
+    return project?.name || t('apiTokens.unknownProject', { id: projectId });
+  };
 
   const isExpired = (token: APIToken) => {
-    if (!token.expiresAt) return false
-    return new Date(token.expiresAt) < new Date()
-  }
+    if (!token.expiresAt) return false;
+    return new Date(token.expiresAt) < new Date();
+  };
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -183,16 +183,12 @@ export function APITokensPage() {
         {apiTokenAuthEnabled && (
           <Button
             onClick={() => {
-              setShowForm(!showForm)
-              if (showForm) resetForm()
+              setShowForm(!showForm);
+              if (showForm) resetForm();
             }}
             variant={showForm ? 'secondary' : 'default'}
           >
-            {showForm ? (
-              <X className="mr-2 h-4 w-4" />
-            ) : (
-              <Plus className="mr-2 h-4 w-4" />
-            )}
+            {showForm ? <X className="mr-2 h-4 w-4" /> : <Plus className="mr-2 h-4 w-4" />}
             {showForm ? t('common.cancel') : t('apiTokens.createToken')}
           </Button>
         )}
@@ -207,16 +203,9 @@ export function APITokensPage() {
                 <div className="flex flex-col items-center text-center max-w-md mx-auto">
                   <Shield className="h-16 w-16 text-text-muted mb-6 opacity-50" />
                   <h2 className="text-xl font-semibold mb-2">{t('apiTokens.authEnabled')}</h2>
-                  <p className="text-text-muted mb-6">
-                    {t('apiTokens.enableAuthPrompt')}
-                  </p>
-                  <Button
-                    onClick={() => handleToggleAuth(true)}
-                    disabled={updateSetting.isPending}
-                  >
-                    {updateSetting.isPending && (
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    )}
+                  <p className="text-text-muted mb-6">{t('apiTokens.enableAuthPrompt')}</p>
+                  <Button onClick={() => handleToggleAuth(true)} disabled={updateSetting.isPending}>
+                    {updateSetting.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                     <Shield className="mr-2 h-4 w-4" />
                     {t('apiTokens.enableAuth')}
                   </Button>
@@ -239,10 +228,18 @@ export function APITokensPage() {
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
-                    <Badge variant="default" className="bg-green-500/10 text-green-500 border-green-500/20">
+                    <Badge
+                      variant="default"
+                      className="bg-green-500/10 text-green-500 border-green-500/20"
+                    >
                       {t('common.enabled')}
                     </Badge>
-                    <Button variant="outline" size="sm" onClick={() => handleToggleAuth(false)} disabled={updateSetting.isPending}>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleToggleAuth(false)}
+                      disabled={updateSetting.isPending}
+                    >
                       {t('apiTokens.disableAuth')}
                     </Button>
                   </div>
@@ -252,126 +249,131 @@ export function APITokensPage() {
 
             {/* Token List */}
             {isLoading ? (
-          <div className="flex items-center justify-center p-12">
-            <Loader2 className="h-8 w-8 animate-spin text-accent" />
-          </div>
-        ) : tokens && tokens.length > 0 ? (
-          <Card className="border-border bg-surface-primary">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('apiTokens.tokenName')}</TableHead>
-                  <TableHead>{t('apiTokens.tokenPrefix')}</TableHead>
-                  <TableHead>{t('apiTokens.project')}</TableHead>
-                  <TableHead>{t('common.status')}</TableHead>
-                  <TableHead>{t('apiTokens.usage')}</TableHead>
-                  <TableHead>{t('apiTokens.lastUsed')}</TableHead>
-                  <TableHead className="text-right">{t('common.actions')}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {tokens.map(token => (
-                  <TableRow key={token.id}>
-                    <TableCell>
-                      <div>
-                        <div className="font-medium">{token.name}</div>
-                        {token.description && (
-                          <div className="text-xs text-text-muted">{token.description}</div>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-1">
-                        <code className="text-xs bg-surface-secondary px-2 py-1 rounded font-mono">
-                          {token.tokenPrefix}
-                        </code>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 w-6 p-0"
-                          onClick={async () => {
-                            await navigator.clipboard.writeText(token.token)
-                          }}
-                        >
-                          <Copy className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant="outline" className="font-normal">
-                        {getProjectName(token.projectID)}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <Switch
-                          checked={token.isEnabled}
-                          onCheckedChange={() => handleToggleEnabled(token)}
-                          disabled={updateToken.isPending}
-                        />
-                        {isExpired(token) ? (
-                          <Badge variant="destructive" className="text-xs">{t('apiTokens.expired')}</Badge>
-                        ) : token.isEnabled ? (
-                          <Badge variant="default" className="text-xs bg-green-500/10 text-green-500 border-green-500/20">{t('apiTokens.active')}</Badge>
-                        ) : (
-                          <Badge variant="secondary" className="text-xs">{t('common.disabled')}</Badge>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-1 text-sm text-text-secondary">
-                        <Hash className="h-3 w-3" />
-                        {token.useCount}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {token.lastUsedAt ? (
-                        <div className="flex items-center gap-1 text-xs text-text-muted">
-                          <Clock className="h-3 w-3" />
-                          {new Date(token.lastUsedAt).toLocaleDateString(
-                            i18n.resolvedLanguage ?? i18n.language,
-                            {
-                              month: 'short',
-                              day: 'numeric',
-                              year: 'numeric',
-                            }
+              <div className="flex items-center justify-center p-12">
+                <Loader2 className="h-8 w-8 animate-spin text-accent" />
+              </div>
+            ) : tokens && tokens.length > 0 ? (
+              <Card className="border-border bg-surface-primary">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t('apiTokens.tokenName')}</TableHead>
+                      <TableHead>{t('apiTokens.tokenPrefix')}</TableHead>
+                      <TableHead>{t('apiTokens.project')}</TableHead>
+                      <TableHead>{t('common.status')}</TableHead>
+                      <TableHead>{t('apiTokens.usage')}</TableHead>
+                      <TableHead>{t('apiTokens.lastUsed')}</TableHead>
+                      <TableHead className="text-right">{t('common.actions')}</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {tokens.map((token) => (
+                      <TableRow key={token.id}>
+                        <TableCell>
+                          <div>
+                            <div className="font-medium">{token.name}</div>
+                            {token.description && (
+                              <div className="text-xs text-text-muted">{token.description}</div>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-1">
+                            <code className="text-xs bg-surface-secondary px-2 py-1 rounded font-mono">
+                              {token.tokenPrefix}
+                            </code>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 w-6 p-0"
+                              onClick={async () => {
+                                await navigator.clipboard.writeText(token.token);
+                              }}
+                            >
+                              <Copy className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant="outline" className="font-normal">
+                            {getProjectName(token.projectID)}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Switch
+                              checked={token.isEnabled}
+                              onCheckedChange={() => handleToggleEnabled(token)}
+                              disabled={updateToken.isPending}
+                            />
+                            {isExpired(token) ? (
+                              <Badge variant="destructive" className="text-xs">
+                                {t('apiTokens.expired')}
+                              </Badge>
+                            ) : token.isEnabled ? (
+                              <Badge
+                                variant="default"
+                                className="text-xs bg-green-500/10 text-green-500 border-green-500/20"
+                              >
+                                {t('apiTokens.active')}
+                              </Badge>
+                            ) : (
+                              <Badge variant="secondary" className="text-xs">
+                                {t('common.disabled')}
+                              </Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-1 text-sm text-text-secondary">
+                            <Hash className="h-3 w-3" />
+                            {token.useCount}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          {token.lastUsedAt ? (
+                            <div className="flex items-center gap-1 text-xs text-text-muted">
+                              <Clock className="h-3 w-3" />
+                              {new Date(token.lastUsedAt).toLocaleDateString(
+                                i18n.resolvedLanguage ?? i18n.language,
+                                {
+                                  month: 'short',
+                                  day: 'numeric',
+                                  year: 'numeric',
+                                },
+                              )}
+                            </div>
+                          ) : (
+                            <span className="text-xs text-text-muted">{t('apiTokens.never')}</span>
                           )}
-                        </div>
-                      ) : (
-                        <span className="text-xs text-text-muted">{t('apiTokens.never')}</span>
-                      )}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex justify-end gap-1">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleEdit(token)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => setDeletingToken(token)}
-                          className="text-destructive hover:text-destructive"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </Card>
-        ) : (
-          <div className="flex flex-col items-center justify-center h-64 text-text-muted border-2 border-dashed border-border rounded-lg bg-surface-primary/50">
-            <Key className="h-12 w-12 opacity-20 mb-4" />
-            <p className="text-lg font-medium">{t('apiTokens.noTokens')}</p>
-            <p className="text-sm">{t('apiTokens.noTokensHint')}</p>
-          </div>
-        )}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-1">
+                            <Button variant="ghost" size="sm" onClick={() => handleEdit(token)}>
+                              <Pencil className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => setDeletingToken(token)}
+                              className="text-destructive hover:text-destructive"
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </Card>
+            ) : (
+              <div className="flex flex-col items-center justify-center h-64 text-text-muted border-2 border-dashed border-border rounded-lg bg-surface-primary/50">
+                <Key className="h-12 w-12 opacity-20 mb-4" />
+                <p className="text-lg font-medium">{t('apiTokens.noTokens')}</p>
+                <p className="text-sm">{t('apiTokens.noTokensHint')}</p>
+              </div>
+            )}
           </>
         )}
       </div>
@@ -380,16 +382,14 @@ export function APITokensPage() {
       <Dialog
         open={showForm}
         onOpenChange={(open: boolean) => {
-          setShowForm(open)
-          if (!open) resetForm()
+          setShowForm(open);
+          if (!open) resetForm();
         }}
       >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t('apiTokens.createDialog.title')}</DialogTitle>
-            <DialogDescription>
-              {t('apiTokens.createDialog.description')}
-            </DialogDescription>
+            <DialogDescription>{t('apiTokens.createDialog.description')}</DialogDescription>
           </DialogHeader>
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
@@ -398,7 +398,7 @@ export function APITokensPage() {
               </label>
               <Input
                 value={name}
-                onChange={e => setName(e.target.value)}
+                onChange={(e) => setName(e.target.value)}
                 placeholder={t('apiTokens.createDialog.namePlaceholder')}
                 required
               />
@@ -420,10 +420,7 @@ export function APITokensPage() {
                   </Button>
                 ) : (
                   <div className="flex items-center gap-2 w-full">
-                    <Badge
-                      variant="outline"
-                      className="flex-1 justify-start py-2 px-3 font-normal"
-                    >
+                    <Badge variant="outline" className="flex-1 justify-start py-2 px-3 font-normal">
                       <FolderKanban className="mr-2 h-4 w-4" />
                       {getProjectName(parseInt(projectID))}
                     </Badge>
@@ -445,7 +442,7 @@ export function APITokensPage() {
               </label>
               <Input
                 value={description}
-                onChange={e => setDescription(e.target.value)}
+                onChange={(e) => setDescription(e.target.value)}
                 placeholder={t('apiTokens.createDialog.descriptionPlaceholder')}
               />
             </div>
@@ -456,7 +453,7 @@ export function APITokensPage() {
               <Input
                 type="date"
                 value={expiresAt}
-                onChange={e => setExpiresAt(e.target.value)}
+                onChange={(e) => setExpiresAt(e.target.value)}
                 min={new Date().toISOString().split('T')[0]}
               />
               <p className="text-xs text-text-muted">{t('apiTokens.createDialog.expiresAtHint')}</p>
@@ -482,29 +479,20 @@ export function APITokensPage() {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t('apiTokens.editDialog.title')}</DialogTitle>
-            <DialogDescription>
-              {t('apiTokens.editDialog.description')}
-            </DialogDescription>
+            <DialogDescription>{t('apiTokens.editDialog.description')}</DialogDescription>
           </DialogHeader>
           <form onSubmit={handleUpdate} className="space-y-4">
             <div className="space-y-2">
               <label className="text-xs font-medium text-text-secondary uppercase tracking-wider">
                 {t('common.name')} *
               </label>
-              <Input
-                value={name}
-                onChange={e => setName(e.target.value)}
-                required
-              />
+              <Input value={name} onChange={(e) => setName(e.target.value)} required />
             </div>
             <div className="space-y-2">
               <label className="text-xs font-medium text-text-secondary uppercase tracking-wider">
                 {t('common.description')}
               </label>
-              <Input
-                value={description}
-                onChange={e => setDescription(e.target.value)}
-              />
+              <Input value={description} onChange={(e) => setDescription(e.target.value)} />
             </div>
             <div className="space-y-2">
               <label className="text-xs font-medium text-text-secondary uppercase tracking-wider">
@@ -523,10 +511,7 @@ export function APITokensPage() {
                   </Button>
                 ) : (
                   <div className="flex items-center gap-2 w-full">
-                    <Badge
-                      variant="outline"
-                      className="flex-1 justify-start py-2 px-3 font-normal"
-                    >
+                    <Badge variant="outline" className="flex-1 justify-start py-2 px-3 font-normal">
                       <FolderKanban className="mr-2 h-4 w-4" />
                       {getProjectName(parseInt(projectID))}
                     </Badge>
@@ -549,7 +534,7 @@ export function APITokensPage() {
               <Input
                 type="date"
                 value={expiresAt}
-                onChange={e => setExpiresAt(e.target.value)}
+                onChange={(e) => setExpiresAt(e.target.value)}
                 min={new Date().toISOString().split('T')[0]}
               />
             </div>
@@ -575,18 +560,16 @@ export function APITokensPage() {
           <DialogHeader>
             <DialogTitle>{t('apiTokens.deleteDialog.title')}</DialogTitle>
             <DialogDescription>
-              {t('apiTokens.deleteDialog.description', { name: deletingToken?.name })}
+              {t('apiTokens.deleteDialog.description', {
+                name: deletingToken?.name,
+              })}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeletingToken(null)}>
               {t('common.cancel')}
             </Button>
-            <Button
-              variant="destructive"
-              onClick={handleDelete}
-              disabled={deleteToken.isPending}
-            >
+            <Button variant="destructive" onClick={handleDelete} disabled={deleteToken.isPending}>
               {deleteToken.isPending && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
               {t('common.delete')}
             </Button>
@@ -602,9 +585,7 @@ export function APITokensPage() {
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t('apiTokens.newTokenDialog.title')}</DialogTitle>
-            <DialogDescription>
-              {t('apiTokens.newTokenDialog.description')}
-            </DialogDescription>
+            <DialogDescription>{t('apiTokens.newTokenDialog.description')}</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
@@ -650,26 +631,21 @@ export function APITokensPage() {
       </Dialog>
 
       {/* Project Picker Dialog */}
-      <Dialog
-        open={showProjectPicker}
-        onOpenChange={(open: boolean) => setShowProjectPicker(open)}
-      >
+      <Dialog open={showProjectPicker} onOpenChange={(open: boolean) => setShowProjectPicker(open)}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t('apiTokens.projectDialog.title')}</DialogTitle>
-            <DialogDescription>
-              {t('apiTokens.projectDialog.description')}
-            </DialogDescription>
+            <DialogDescription>{t('apiTokens.projectDialog.description')}</DialogDescription>
           </DialogHeader>
           <div className="space-y-2 max-h-64 overflow-auto">
-            {projects?.map(project => (
+            {projects?.map((project) => (
               <Button
                 key={project.id}
                 variant="ghost"
                 className="w-full justify-start"
                 onClick={() => {
-                  setProjectID(project.id.toString())
-                  setShowProjectPicker(false)
+                  setProjectID(project.id.toString());
+                  setShowProjectPicker(false);
                 }}
               >
                 <FolderKanban className="mr-2 h-4 w-4" />
@@ -677,15 +653,17 @@ export function APITokensPage() {
               </Button>
             ))}
             {(!projects || projects.length === 0) && (
-              <p className="text-sm text-text-muted text-center py-4">{t('apiTokens.projectDialog.noProjects')}</p>
+              <p className="text-sm text-text-muted text-center py-4">
+                {t('apiTokens.projectDialog.noProjects')}
+              </p>
             )}
           </div>
           <DialogFooter>
             <Button
               variant="outline"
               onClick={() => {
-                setProjectID('0')
-                setShowProjectPicker(false)
+                setProjectID('0');
+                setShowProjectPicker(false);
               }}
             >
               {t('apiTokens.projectDialog.clearSelection')}
@@ -697,5 +675,5 @@ export function APITokensPage() {
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/client-routes/components/provider-row.tsx b/web/src/pages/client-routes/components/provider-row.tsx
index d5dd6ca8..25f5de4e 100644
--- a/web/src/pages/client-routes/components/provider-row.tsx
+++ b/web/src/pages/client-routes/components/provider-row.tsx
@@ -1,63 +1,52 @@
-import {
-  GripVertical,
-  Zap,
-  RefreshCw,
-  Activity,
-  Snowflake,
-  Info,
-} from 'lucide-react'
-import { Button, Switch } from '@/components/ui'
-import { StreamingBadge } from '@/components/ui/streaming-badge'
-import { useSortable } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { getProviderColorVar, type ProviderType } from '@/lib/theme'
-import { cn } from '@/lib/utils'
-import type {
-  ClientType,
-  ProviderStats,
-  AntigravityQuotaData,
-} from '@/lib/transport'
-import type { ProviderConfigItem } from '../types'
-import { useAntigravityQuota } from '@/hooks/queries'
-import { useCooldowns } from '@/hooks/use-cooldowns'
-import { ProviderDetailsDialog } from '@/components/provider-details-dialog'
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
+import { GripVertical, Zap, RefreshCw, Activity, Snowflake, Info } from 'lucide-react';
+import { Button, Switch } from '@/components/ui';
+import { StreamingBadge } from '@/components/ui/streaming-badge';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { getProviderColorVar, type ProviderType } from '@/lib/theme';
+import { cn } from '@/lib/utils';
+import type { ClientType, ProviderStats, AntigravityQuotaData } from '@/lib/transport';
+import type { ProviderConfigItem } from '../types';
+import { useAntigravityQuota } from '@/hooks/queries';
+import { useCooldowns } from '@/hooks/use-cooldowns';
+import { ProviderDetailsDialog } from '@/components/provider-details-dialog';
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 // 格式化 Token 数量
 function formatTokens(count: number): string {
   if (count >= 1_000_000) {
-    return `${(count / 1_000_000).toFixed(1)}M`
+    return `${(count / 1_000_000).toFixed(1)}M`;
   }
   if (count >= 1_000) {
-    return `${(count / 1_000).toFixed(1)}K`
+    return `${(count / 1_000).toFixed(1)}K`;
   }
-  return count.toString()
+  return count.toString();
 }
 
 // 格式化成本 (微美元 → 美元)
 function formatCost(microUsd: number): string {
-  const usd = microUsd / 1_000_000
+  const usd = microUsd / 1_000_000;
   if (usd >= 1) {
-    return `$${usd.toFixed(2)}`
+    return `$${usd.toFixed(2)}`;
   }
   if (usd >= 0.01) {
-    return `$${usd.toFixed(3)}`
+    return `$${usd.toFixed(3)}`;
   }
-  return `$${usd.toFixed(4)}`
+  return `$${usd.toFixed(4)}`;
 }
 
 // Sortable Provider Row
 type SortableProviderRowProps = {
-  item: ProviderConfigItem
-  index: number
-  clientType: ClientType
-  streamingCount: number
-  stats?: ProviderStats
-  isToggling: boolean
-  onToggle: () => void
-  onDelete?: () => void
-}
+  item: ProviderConfigItem;
+  index: number;
+  clientType: ClientType;
+  streamingCount: number;
+  stats?: ProviderStats;
+  isToggling: boolean;
+  onToggle: () => void;
+  onDelete?: () => void;
+};
 
 export function SortableProviderRow({
   item,
@@ -69,50 +58,38 @@ export function SortableProviderRow({
   onToggle,
   onDelete,
 }: SortableProviderRowProps) {
-  const [showDetailsDialog, setShowDetailsDialog] = useState(false)
-  const { getCooldownForProvider, clearCooldown, isClearingCooldown } =
-    useCooldowns()
-  const cooldown = getCooldownForProvider(item.provider.id, clientType)
-
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
+  const [showDetailsDialog, setShowDetailsDialog] = useState(false);
+  const { getCooldownForProvider, clearCooldown, isClearingCooldown } = useCooldowns();
+  const cooldown = getCooldownForProvider(item.provider.id, clientType);
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: item.id,
     transition: {
       duration: 200,
       easing: 'ease',
     },
-  })
+  });
 
   const style: React.CSSProperties = {
     transform: transform ? CSS.Translate.toString(transform) : undefined,
     transition,
     opacity: isDragging ? 0 : 1,
     pointerEvents: isDragging ? 'none' : undefined,
-  }
+  };
 
   const handleRowClick = (e: React.MouseEvent) => {
     // 所有状态都打开详情弹窗
-    e.stopPropagation()
-    setShowDetailsDialog(true)
-  }
+    e.stopPropagation();
+    setShowDetailsDialog(true);
+  };
 
   const handleClearCooldown = () => {
-    clearCooldown(item.provider.id)
-  }
+    clearCooldown(item.provider.id);
+  };
 
   return (
     <>
-      <div
-        ref={setNodeRef}
-        style={style}
-        {...attributes}
-      >
+      <div ref={setNodeRef} style={style} {...attributes}>
         <ProviderRowContent
           item={item}
           index={index}
@@ -143,59 +120,59 @@ export function SortableProviderRow({
         isClearingCooldown={isClearingCooldown}
       />
     </>
-  )
+  );
 }
 
 // Provider Row Content (used both in sortable and overlay)
 type ProviderRowContentProps = {
-  item: ProviderConfigItem
-  index: number
-  clientType: ClientType
-  streamingCount: number
-  stats?: ProviderStats
-  isToggling: boolean
-  isOverlay?: boolean
-  onToggle: () => void
-  onRowClick?: (e: React.MouseEvent) => void
-  isInCooldown?: boolean
-  dragHandleListeners?: any
-}
+  item: ProviderConfigItem;
+  index: number;
+  clientType: ClientType;
+  streamingCount: number;
+  stats?: ProviderStats;
+  isToggling: boolean;
+  isOverlay?: boolean;
+  onToggle: () => void;
+  onRowClick?: (e: React.MouseEvent) => void;
+  isInCooldown?: boolean;
+  dragHandleListeners?: any;
+};
 
 // 获取 Claude 模型额度百分比和重置时间
 function getClaudeQuotaInfo(
-  quota: AntigravityQuotaData | undefined
+  quota: AntigravityQuotaData | undefined,
 ): { percentage: number; resetTime: string } | null {
-  if (!quota || quota.isForbidden || !quota.models) return null
-  const claudeModel = quota.models.find(m => m.name.includes('claude'))
-  if (!claudeModel) return null
+  if (!quota || quota.isForbidden || !quota.models) return null;
+  const claudeModel = quota.models.find((m) => m.name.includes('claude'));
+  if (!claudeModel) return null;
   return {
     percentage: claudeModel.percentage,
     resetTime: claudeModel.resetTime,
-  }
+  };
 }
 
 // 格式化重置时间
 function formatResetTime(resetTime: string, t: (key: string) => string): string {
   try {
-    const reset = new Date(resetTime)
-    const now = new Date()
-    const diff = reset.getTime() - now.getTime()
+    const reset = new Date(resetTime);
+    const now = new Date();
+    const diff = reset.getTime() - now.getTime();
 
-    if (diff <= 0) return t('proxy.comingSoon')
+    if (diff <= 0) return t('proxy.comingSoon');
 
-    const hours = Math.floor(diff / (1000 * 60 * 60))
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
 
     if (hours > 24) {
-      const days = Math.floor(hours / 24)
-      return `${days}d`
+      const days = Math.floor(hours / 24);
+      return `${days}d`;
     }
     if (hours > 0) {
-      return `${hours}h`
+      return `${hours}h`;
     }
-    return `${minutes}m`
+    return `${minutes}m`;
   } catch {
-    return '-'
+    return '-';
   }
 }
 
@@ -212,45 +189,45 @@ export function ProviderRowContent({
   isInCooldown: isInCooldownProp,
   dragHandleListeners,
 }: ProviderRowContentProps) {
-  const { t } = useTranslation()
-  const { provider, enabled, isNative } = item
-  const color = getProviderColorVar(provider.type as ProviderType)
-  const isAntigravity = provider.type === 'antigravity'
+  const { t } = useTranslation();
+  const { provider, enabled, isNative } = item;
+  const color = getProviderColorVar(provider.type as ProviderType);
+  const isAntigravity = provider.type === 'antigravity';
 
   // 仅为 Antigravity provider 获取额度
-  const { data: quota } = useAntigravityQuota(provider.id, isAntigravity)
-  const claudeInfo = isAntigravity ? getClaudeQuotaInfo(quota) : null
+  const { data: quota } = useAntigravityQuota(provider.id, isAntigravity);
+  const claudeInfo = isAntigravity ? getClaudeQuotaInfo(quota) : null;
 
   // 获取 cooldown 状态
-  const { getCooldownForProvider, formatRemaining } = useCooldowns()
-  const cooldown = getCooldownForProvider(provider.id, clientType)
-  const isInCooldown = isInCooldownProp ?? !!cooldown
+  const { getCooldownForProvider, formatRemaining } = useCooldowns();
+  const cooldown = getCooldownForProvider(provider.id, clientType);
+  const isInCooldown = isInCooldownProp ?? !!cooldown;
 
   // 实时倒计时状态
-  const [liveCountdown, setLiveCountdown] = useState<string>('')
+  const [liveCountdown, setLiveCountdown] = useState<string>('');
 
   // 每秒更新倒计时
   useEffect(() => {
     if (!cooldown) {
-      setLiveCountdown('')
-      return
+      setLiveCountdown('');
+      return;
     }
 
     // 立即更新一次
-    setLiveCountdown(formatRemaining(cooldown))
+    setLiveCountdown(formatRemaining(cooldown));
 
     // 每秒更新
     const interval = setInterval(() => {
-      setLiveCountdown(formatRemaining(cooldown))
-    }, 1000)
+      setLiveCountdown(formatRemaining(cooldown));
+    }, 1000);
 
-    return () => clearInterval(interval)
-  }, [cooldown, formatRemaining])
+    return () => clearInterval(interval);
+  }, [cooldown, formatRemaining]);
 
   const handleContentClick = (e: React.MouseEvent) => {
     // 所有状态都打开详情弹窗
-    onRowClick?.(e)
-  }
+    onRowClick?.(e);
+  };
 
   return (
     <Button
@@ -264,17 +241,12 @@ export function ProviderRowContent({
             ? streamingCount > 0
               ? 'bg-accent/5 border-transparent ring-1 ring-black/5 dark:ring-white/10'
               : 'bg-card/60 border-border hover:border-emerald-500/30 hover:bg-card shadow-sm cursor-pointer'
-            : 'bg-muted/40 border-dashed border-border opacity-70 cursor-pointer grayscale-[0.5] hover:opacity-100 hover:grayscale-0'
+            : 'bg-muted/40 border-dashed border-border opacity-70 cursor-pointer grayscale-[0.5] hover:opacity-100 hover:grayscale-0',
       )}
       style={{
-        borderColor:
-          !isInCooldown && enabled && streamingCount > 0
-            ? `${color}40`
-            : undefined,
+        borderColor: !isInCooldown && enabled && streamingCount > 0 ? `${color}40` : undefined,
         boxShadow:
-          !isInCooldown && enabled && streamingCount > 0
-            ? `0 0 20px ${color}15`
-            : undefined,
+          !isInCooldown && enabled && streamingCount > 0 ? `0 0 20px ${color}15` : undefined,
       }}
     >
       {/* Marquee 背景动画 (仅在有 streaming 请求时显示) */}
@@ -298,7 +270,7 @@ export function ProviderRowContent({
 
       {/* Drag Handle & Index */}
       <div className="relative z-10 flex flex-col items-center gap-1.5 w-7 shrink-0">
-        <div 
+        <div
           className="p-1 rounded-md hover:bg-accent transition-colors cursor-grab active:cursor-grabbing"
           {...dragHandleListeners}
         >
@@ -323,7 +295,7 @@ export function ProviderRowContent({
             'relative w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-all duration-500 overflow-hidden',
             isInCooldown
               ? 'bg-cyan-900/40 border border-cyan-500/30'
-              : 'bg-muted border border-border shadow-inner'
+              : 'bg-muted border border-border shadow-inner',
           )}
           style={!isInCooldown && enabled ? { color } : {}}
         >
@@ -334,7 +306,7 @@ export function ProviderRowContent({
                 ? 'text-cyan-400 opacity-20 scale-150 blur-[1px]'
                 : enabled
                   ? 'scale-100'
-                  : 'opacity-30 grayscale'
+                  : 'opacity-30 grayscale',
             )}
           >
             {provider.name.charAt(0).toUpperCase()}
@@ -360,7 +332,7 @@ export function ProviderRowContent({
                   ? 'text-foreground'
                   : enabled
                     ? 'text-foreground'
-                    : 'text-muted-foreground'
+                    : 'text-muted-foreground',
               )}
             >
               {provider.name}
@@ -385,7 +357,7 @@ export function ProviderRowContent({
                 ? 'text-muted-foreground'
                 : enabled
                   ? 'text-muted-foreground'
-                  : 'text-muted-foreground/50'
+                  : 'text-muted-foreground/50',
             )}
           >
             <Info size={10} className="shrink-0" />
@@ -401,9 +373,7 @@ export function ProviderRowContent({
       <div className="relative z-10 flex items-center gap-4 shrink-0">
         {/* Claude Quota */}
         {isAntigravity && (
-          <div
-            className={cn('w-24 flex flex-col gap-1', !enabled && 'opacity-40')}
-          >
+          <div className={cn('w-24 flex flex-col gap-1', !enabled && 'opacity-40')}>
             <div className="flex items-center justify-between px-0.5">
               <span className="text-[9px] font-black text-muted-foreground/80 uppercase tracking-tighter">
                 Claude
@@ -423,7 +393,7 @@ export function ProviderRowContent({
                       ? 'bg-emerald-500'
                       : claudeInfo.percentage >= 20
                         ? 'bg-amber-500'
-                        : 'bg-red-500'
+                        : 'bg-red-500',
                   )}
                   style={{
                     width: `${claudeInfo.percentage}%`,
@@ -467,7 +437,7 @@ export function ProviderRowContent({
           <div
             className={cn(
               'flex items-center gap-px bg-muted/50 rounded-xl border border-border/60 p-0.5 backdrop-blur-sm',
-              !enabled && 'opacity-40'
+              !enabled && 'opacity-40',
             )}
           >
             {stats && stats.totalRequests > 0 ? (
@@ -484,7 +454,7 @@ export function ProviderRowContent({
                         ? 'text-emerald-500'
                         : stats.successRate >= 90
                           ? 'text-blue-400'
-                          : 'text-amber-500'
+                          : 'text-amber-500',
                     )}
                   >
                     {Math.round(stats.successRate)}%
@@ -497,9 +467,7 @@ export function ProviderRowContent({
                     TOKEN
                   </span>
                   <span className="font-mono font-black text-xs text-blue-400">
-                    {formatTokens(
-                      stats.totalInputTokens + stats.totalOutputTokens
-                    )}
+                    {formatTokens(stats.totalInputTokens + stats.totalOutputTokens)}
                   </span>
                 </div>
                 <div className="w-[1px] h-6 bg-border/40" />
@@ -516,9 +484,7 @@ export function ProviderRowContent({
             ) : (
               <div className="px-6 py-2 flex items-center gap-2 text-muted-foreground/30">
                 <Activity size={12} />
-                <span className="text-[10px] font-bold uppercase tracking-widest">
-                  No Data
-                </span>
+                <span className="text-[10px] font-bold uppercase tracking-widest">No Data</span>
               </div>
             )}
           </div>
@@ -533,15 +499,11 @@ export function ProviderRowContent({
       {/* Control Area - Switch */}
       <div
         className="relative z-10 flex items-center shrink-0  pl-2"
-        onClick={e => e.stopPropagation()}
-        onPointerDown={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
       >
-        <Switch
-          checked={enabled}
-          onCheckedChange={onToggle}
-          disabled={isToggling}
-        />
+        <Switch checked={enabled} onCheckedChange={onToggle} disabled={isToggling} />
       </div>
     </Button>
-  )
+  );
 }
diff --git a/web/src/pages/client-routes/index.tsx b/web/src/pages/client-routes/index.tsx
index 0aab311a..ad069198 100644
--- a/web/src/pages/client-routes/index.tsx
+++ b/web/src/pages/client-routes/index.tsx
@@ -3,14 +3,14 @@
  * 全局路由配置页面 - 显示当前 ClientType 的路由
  */
 
-import { useParams } from 'react-router-dom'
-import { ClientIcon, getClientName } from '@/components/icons/client-icons'
-import type { ClientType } from '@/lib/transport'
-import { ClientTypeRoutesContent } from '@/components/routes/ClientTypeRoutesContent'
+import { useParams } from 'react-router-dom';
+import { ClientIcon, getClientName } from '@/components/icons/client-icons';
+import type { ClientType } from '@/lib/transport';
+import { ClientTypeRoutesContent } from '@/components/routes/ClientTypeRoutesContent';
 
 export function ClientRoutesPage() {
-  const { clientType } = useParams<{ clientType: string }>()
-  const activeClientType = (clientType as ClientType) || 'claude'
+  const { clientType } = useParams<{ clientType: string }>();
+  const activeClientType = (clientType as ClientType) || 'claude';
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -18,11 +18,7 @@ export function ClientRoutesPage() {
       <div className="h-[73px] flex items-center justify-between px-6 border-b border-border bg-card shrink-0">
         <div className="flex items-center gap-3">
           <div className="p-2 bg-accent/10 rounded-lg">
-            <ClientIcon
-              type={activeClientType}
-              size={20}
-              className="text-accent"
-            />
+            <ClientIcon type={activeClientType} size={20} className="text-accent" />
           </div>
           <div>
             <h2 className="text-lg font-semibold text-foreground leading-tight">
@@ -40,5 +36,5 @@ export function ClientRoutesPage() {
         <ClientTypeRoutesContent clientType={activeClientType} projectID={0} />
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/console/index.tsx b/web/src/pages/console/index.tsx
index 82caceac..ab96a2d7 100644
--- a/web/src/pages/console/index.tsx
+++ b/web/src/pages/console/index.tsx
@@ -1,57 +1,57 @@
-import { useState, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Terminal, Trash2, Pause, Play, ArrowDown } from 'lucide-react'
-import { getTransport } from '@/lib/transport'
-import { Button } from '@/components/ui'
-import { PageHeader } from '@/components/layout/page-header'
+import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Terminal, Trash2, Pause, Play, ArrowDown } from 'lucide-react';
+import { getTransport } from '@/lib/transport';
+import { Button } from '@/components/ui';
+import { PageHeader } from '@/components/layout/page-header';
 
 export function ConsolePage() {
-  const { t } = useTranslation()
-  const [logs, setLogs] = useState<string[]>([])
-  const [isPaused, setIsPaused] = useState(false)
-  const [autoScroll, setAutoScroll] = useState(true)
-  const logsEndRef = useRef<HTMLDivElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const pausedRef = useRef(isPaused)
+  const { t } = useTranslation();
+  const [logs, setLogs] = useState<string[]>([]);
+  const [isPaused, setIsPaused] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pausedRef = useRef(isPaused);
 
   // Keep pausedRef in sync
   useEffect(() => {
-    pausedRef.current = isPaused
-  }, [isPaused])
+    pausedRef.current = isPaused;
+  }, [isPaused]);
 
   // Subscribe to log_message events (only real-time logs from this session)
   useEffect(() => {
-    const transport = getTransport()
-    const unsubscribe = transport.subscribe<string>('log_message', message => {
-      if (pausedRef.current) return
-      setLogs(prev => [...prev.slice(-999), message])
-    })
+    const transport = getTransport();
+    const unsubscribe = transport.subscribe<string>('log_message', (message) => {
+      if (pausedRef.current) return;
+      setLogs((prev) => [...prev.slice(-999), message]);
+    });
 
-    return () => unsubscribe()
-  }, [])
+    return () => unsubscribe();
+  }, []);
 
   // Auto-scroll to bottom
   useEffect(() => {
     if (autoScroll && logsEndRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: 'smooth' })
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
     }
-  }, [logs, autoScroll])
+  }, [logs, autoScroll]);
 
   const handleScroll = () => {
-    if (!containerRef.current) return
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current
-    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50
-    setAutoScroll(isAtBottom)
-  }
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    setAutoScroll(isAtBottom);
+  };
 
   const clearLogs = () => {
-    setLogs([])
-  }
+    setLogs([]);
+  };
 
   const scrollToBottom = () => {
-    logsEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-    setAutoScroll(true)
-  }
+    logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    setAutoScroll(true);
+  };
 
   return (
     <div className="flex flex-col h-full">
@@ -99,9 +99,9 @@ export function ConsolePage() {
             {logs.map((log, index) => (
               <div
                 key={index}
-                className="px-3 py-1.5 rounded-md hover:bg-accent text-foreground transition-colors wrap-break-words whitespace-pre-wrap"
+                className="text-xs px-3 py-1.5 rounded-md hover:bg-accent text-foreground transition-colors wrap-break-words whitespace-pre-wrap"
               >
-                <div className="opacity-50 text-[10px] select-none inline-block w-8 mr-2 text-right">
+                <div className="opacity-50 select-none inline-block w-8 mr-2 text-right">
                   {index + 1}
                 </div>
                 {log}
@@ -121,24 +121,22 @@ export function ConsolePage() {
         </Button>
       )}
     </div>
-  )
+  );
 }
 
 function EmptyState() {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col items-center justify-center h-full min-h-[400px] text-muted-foreground/50">
       <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-6 ring-8 ring-muted/50">
         <Terminal size={40} className="opacity-50" />
       </div>
-      <p className="text-lg font-medium text-foreground/80">
-        {t('console.waitingForLogs')}
-      </p>
+      <p className="text-lg font-medium text-foreground/80">{t('console.waitingForLogs')}</p>
       <p className="text-sm mt-2 max-w-screen-sm text-center leading-relaxed">
         {t('console.waitingForLogsHint')}
       </p>
     </div>
-  )
+  );
 }
 
-export default ConsolePage
+export default ConsolePage;
diff --git a/web/src/pages/login.tsx b/web/src/pages/login.tsx
index 72f3716c..cb08c33a 100644
--- a/web/src/pages/login.tsx
+++ b/web/src/pages/login.tsx
@@ -39,9 +39,7 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
       <div className="w-full max-w-sm space-y-6 p-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-bold">{t('login.title')}</h1>
-          <p className="text-muted-foreground text-sm">
-            {t('login.description')}
-          </p>
+          <p className="text-muted-foreground text-sm">{t('login.description')}</p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
@@ -54,16 +52,10 @@ export function LoginPage({ onSuccess }: LoginPageProps) {
               autoFocus
               disabled={isLoading}
             />
-            {error && (
-              <p className="text-destructive text-sm">{error}</p>
-            )}
+            {error && <p className="text-destructive text-sm">{error}</p>}
           </div>
 
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={isLoading || !password}
-          >
+          <Button type="submit" className="w-full" disabled={isLoading || !password}>
             {isLoading ? t('login.verifying') : t('login.submit')}
           </Button>
         </form>
diff --git a/web/src/pages/model-mappings/index.tsx b/web/src/pages/model-mappings/index.tsx
index 67b98fc8..2988861e 100644
--- a/web/src/pages/model-mappings/index.tsx
+++ b/web/src/pages/model-mappings/index.tsx
@@ -1,9 +1,22 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
-import type { DragEndEvent } from '@dnd-kit/core'
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
   Button,
   Card,
@@ -13,9 +26,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui'
-import { ModelInput } from '@/components/ui/model-input'
-import { PageHeader } from '@/components/layout/page-header'
+} from '@/components/ui';
+import { ModelInput } from '@/components/ui/model-input';
+import { PageHeader } from '@/components/layout/page-header';
 import {
   useModelMappings,
   useCreateModelMapping,
@@ -23,34 +36,36 @@ import {
   useDeleteModelMapping,
   useClearAllModelMappings,
   useResetModelMappingsToDefaults,
-} from '@/hooks/queries'
-import type { ModelMapping, ModelMappingInput } from '@/lib/transport/types'
-import { Zap, Plus, Trash2, ArrowRight, RotateCcw, GripVertical } from 'lucide-react'
+} from '@/hooks/queries';
+import type { ModelMapping, ModelMappingInput } from '@/lib/transport/types';
+import { Zap, Plus, Trash2, ArrowRight, RotateCcw, GripVertical } from 'lucide-react';
 
 interface SortableRuleItemProps {
-  id: string
-  index: number
-  rule: ModelMapping
-  onRemove: () => void
-  onUpdate: (data: Partial<ModelMappingInput>) => void
-  disabled: boolean
+  id: string;
+  index: number;
+  rule: ModelMapping;
+  onRemove: () => void;
+  onUpdate: (data: Partial<ModelMappingInput>) => void;
+  disabled: boolean;
 }
 
-function SortableRuleItem({ id, index, rule, onRemove, onUpdate, disabled }: SortableRuleItemProps) {
-  const { t } = useTranslation()
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id })
+function SortableRuleItem({
+  id,
+  index,
+  rule,
+  onRemove,
+  onUpdate,
+  disabled,
+}: SortableRuleItemProps) {
+  const { t } = useTranslation();
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
-  }
+  };
 
   return (
     <div
@@ -71,7 +86,7 @@ function SortableRuleItem({ id, index, rule, onRemove, onUpdate, disabled }: Sor
       {/* Pattern -> Target */}
       <ModelInput
         value={rule.pattern}
-        onChange={pattern => onUpdate({ pattern })}
+        onChange={(pattern) => onUpdate({ pattern })}
         placeholder={t('modelMappings.matchPattern')}
         disabled={disabled}
         className="flex-1 min-w-0 h-7 text-xs"
@@ -79,7 +94,7 @@ function SortableRuleItem({ id, index, rule, onRemove, onUpdate, disabled }: Sor
       <ArrowRight className="h-3 w-3 text-muted-foreground shrink-0" />
       <ModelInput
         value={rule.target}
-        onChange={target => onUpdate({ target })}
+        onChange={(target) => onUpdate({ target })}
         placeholder={t('modelMappings.targetModel')}
         disabled={disabled}
         className="flex-1 min-w-0 h-7 text-xs"
@@ -105,52 +120,46 @@ function SortableRuleItem({ id, index, rule, onRemove, onUpdate, disabled }: Sor
         {rule.projectID || '-'}
       </span>
 
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onRemove}
-        disabled={disabled}
-        className="shrink-0"
-      >
+      <Button variant="ghost" size="sm" onClick={onRemove} disabled={disabled} className="shrink-0">
         <Trash2 className="h-4 w-4 text-destructive" />
       </Button>
     </div>
-  )
+  );
 }
 
 export function ModelMappingsPage() {
-  const { t } = useTranslation()
-  const { data: mappings, isLoading } = useModelMappings()
-  const createMapping = useCreateModelMapping()
-  const updateMapping = useUpdateModelMapping()
-  const deleteMapping = useDeleteModelMapping()
-  const clearAllMappings = useClearAllModelMappings()
-  const resetToDefaults = useResetModelMappingsToDefaults()
-  const [newPattern, setNewPattern] = useState('')
-  const [newTarget, setNewTarget] = useState('')
-  const [newClientType, setNewClientType] = useState('claude')
-  const [newProviderType, setNewProviderType] = useState('antigravity')
+  const { t } = useTranslation();
+  const { data: mappings, isLoading } = useModelMappings();
+  const createMapping = useCreateModelMapping();
+  const updateMapping = useUpdateModelMapping();
+  const deleteMapping = useDeleteModelMapping();
+  const clearAllMappings = useClearAllModelMappings();
+  const resetToDefaults = useResetModelMappingsToDefaults();
+  const [newPattern, setNewPattern] = useState('');
+  const [newTarget, setNewTarget] = useState('');
+  const [newClientType, setNewClientType] = useState('claude');
+  const [newProviderType, setNewProviderType] = useState('antigravity');
 
-  const rules = mappings || []
+  const rules = mappings || [];
 
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
-  )
+    }),
+  );
 
   const handleDragEnd = async (event: DragEndEvent) => {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
 
-    const oldIndex = rules.findIndex(r => `rule-${r.id}` === active.id)
-    const newIndex = rules.findIndex(r => `rule-${r.id}` === over.id)
+    const oldIndex = rules.findIndex((r) => `rule-${r.id}` === active.id);
+    const newIndex = rules.findIndex((r) => `rule-${r.id}` === over.id);
 
     if (oldIndex !== -1 && newIndex !== -1) {
-      const reordered = arrayMove(rules, oldIndex, newIndex)
+      const reordered = arrayMove(rules, oldIndex, newIndex);
       for (let i = 0; i < reordered.length; i++) {
-        const rule = reordered[i]
+        const rule = reordered[i];
         if (rule.priority !== i * 10) {
           await updateMapping.mutateAsync({
             id: rule.id,
@@ -160,14 +169,14 @@ export function ModelMappingsPage() {
               priority: i * 10,
               isEnabled: rule.isEnabled,
             },
-          })
+          });
         }
       }
     }
-  }
+  };
 
   const handleAddRule = async () => {
-    if (!newPattern.trim() || !newTarget.trim()) return
+    if (!newPattern.trim() || !newTarget.trim()) return;
 
     await createMapping.mutateAsync({
       pattern: newPattern.trim(),
@@ -176,16 +185,16 @@ export function ModelMappingsPage() {
       providerType: newProviderType,
       priority: rules.length * 10 + 1000,
       isEnabled: true,
-    })
-    setNewPattern('')
-    setNewTarget('')
-    setNewClientType('claude')
-    setNewProviderType('antigravity')
-  }
+    });
+    setNewPattern('');
+    setNewTarget('');
+    setNewClientType('claude');
+    setNewProviderType('antigravity');
+  };
 
   const handleRemoveRule = async (id: number) => {
-    await deleteMapping.mutateAsync(id)
-  }
+    await deleteMapping.mutateAsync(id);
+  };
 
   const handleUpdateRule = async (rule: ModelMapping, data: Partial<ModelMappingInput>) => {
     await updateMapping.mutateAsync({
@@ -200,22 +209,27 @@ export function ModelMappingsPage() {
         priority: rule.priority,
         isEnabled: rule.isEnabled,
       },
-    })
-  }
+    });
+  };
 
   const handleReset = async () => {
-    if (!window.confirm(t('modelMappings.confirmReset'))) return
-    await resetToDefaults.mutateAsync()
-  }
+    if (!window.confirm(t('modelMappings.confirmReset'))) return;
+    await resetToDefaults.mutateAsync();
+  };
 
   const handleClearAll = async () => {
-    if (!window.confirm(t('modelMappings.confirmClearAll'))) return
-    await clearAllMappings.mutateAsync()
-  }
+    if (!window.confirm(t('modelMappings.confirmClearAll'))) return;
+    await clearAllMappings.mutateAsync();
+  };
 
-  if (isLoading) return null
+  if (isLoading) return null;
 
-  const isPending = createMapping.isPending || updateMapping.isPending || deleteMapping.isPending || resetToDefaults.isPending || clearAllMappings.isPending
+  const isPending =
+    createMapping.isPending ||
+    updateMapping.isPending ||
+    deleteMapping.isPending ||
+    resetToDefaults.isPending ||
+    clearAllMappings.isPending;
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -226,12 +240,7 @@ export function ModelMappingsPage() {
         description={t('modelMappings.description', { count: rules.length })}
         actions={
           <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleReset}
-              disabled={isPending}
-            >
+            <Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}>
               <RotateCcw className="h-4 w-4 mr-1" />
               {t('modelMappings.resetToPreset')}
             </Button>
@@ -251,9 +260,7 @@ export function ModelMappingsPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <Card className="border-border bg-card">
           <CardContent className="p-6 space-y-4">
-            <p className="text-xs text-muted-foreground">
-              {t('modelMappings.pageDesc')}
-            </p>
+            <p className="text-xs text-muted-foreground">{t('modelMappings.pageDesc')}</p>
 
             {/* Header row */}
             <div className="flex items-center gap-3 text-xs text-muted-foreground font-medium border-b pb-2">
@@ -276,7 +283,7 @@ export function ModelMappingsPage() {
                 onDragEnd={handleDragEnd}
               >
                 <SortableContext
-                  items={rules.map(r => `rule-${r.id}`)}
+                  items={rules.map((r) => `rule-${r.id}`)}
                   strategy={verticalListSortingStrategy}
                 >
                   <div className="space-y-0">
@@ -299,7 +306,9 @@ export function ModelMappingsPage() {
             {rules.length === 0 && (
               <div className="text-center py-8">
                 <p className="text-muted-foreground">{t('modelMappings.noMappings')}</p>
-                <p className="text-xs text-muted-foreground mt-1">{t('modelMappings.noMappingsHint')}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('modelMappings.noMappingsHint')}
+                </p>
               </div>
             )}
 
@@ -321,7 +330,7 @@ export function ModelMappingsPage() {
               />
               <Select
                 value={newClientType || '_all'}
-                onValueChange={v => setNewClientType(v === '_all' ? '' : v ?? '')}
+                onValueChange={(v) => setNewClientType(v === '_all' ? '' : (v ?? ''))}
                 disabled={isPending}
               >
                 <SelectTrigger className="w-[100px] h-8 text-xs shrink-0">
@@ -337,7 +346,7 @@ export function ModelMappingsPage() {
               </Select>
               <Select
                 value={newProviderType || '_all'}
-                onValueChange={v => setNewProviderType(v === '_all' ? '' : v ?? '')}
+                onValueChange={(v) => setNewProviderType(v === '_all' ? '' : (v ?? ''))}
                 disabled={isPending}
               >
                 <SelectTrigger className="w-[110px] h-8 text-xs shrink-0">
@@ -364,7 +373,7 @@ export function ModelMappingsPage() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
 
-export default ModelMappingsPage
+export default ModelMappingsPage;
diff --git a/web/src/pages/overview.tsx b/web/src/pages/overview.tsx
index 235c5f2b..273aae8d 100644
--- a/web/src/pages/overview.tsx
+++ b/web/src/pages/overview.tsx
@@ -1,11 +1,6 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
-import { useTranslation } from 'react-i18next'
-import {
-  useProviders,
-  useRoutes,
-  useProjects,
-  useProxyRequests,
-} from '@/hooks/queries'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui';
+import { useTranslation } from 'react-i18next';
+import { useProviders, useRoutes, useProjects, useProxyRequests } from '@/hooks/queries';
 import {
   Activity,
   Server,
@@ -17,18 +12,18 @@ import {
   XCircle,
   Ban,
   LayoutDashboard,
-} from 'lucide-react'
-import { Link } from 'react-router-dom'
-import { PageHeader } from '@/components/layout/page-header'
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { PageHeader } from '@/components/layout/page-header';
 
 export function OverviewPage() {
-  const { t } = useTranslation()
-  const { data: providers } = useProviders()
-  const { data: routes } = useRoutes()
-  const { data: projects } = useProjects()
-  const { data: requestsData } = useProxyRequests({ limit: 10 })
+  const { t } = useTranslation();
+  const { data: providers } = useProviders();
+  const { data: routes } = useRoutes();
+  const { data: projects } = useProjects();
+  const { data: requestsData } = useProxyRequests({ limit: 10 });
 
-  const requests = requestsData?.items ?? []
+  const requests = requestsData?.items ?? [];
 
   const stats = [
     {
@@ -59,16 +54,12 @@ export function OverviewPage() {
       className: 'text-emerald-600 dark:text-emerald-400 bg-muted',
       href: '/requests',
     },
-  ]
+  ];
 
-  const completedRequests = requests.filter(
-    r => r.status === 'COMPLETED'
-  ).length
-  const failedRequests = requests.filter(r => r.status === 'FAILED').length
-  const cancelledRequests = requests.filter(
-    r => r.status === 'CANCELLED'
-  ).length
-  const hasProviders = (providers?.length ?? 0) > 0
+  const completedRequests = requests.filter((r) => r.status === 'COMPLETED').length;
+  const failedRequests = requests.filter((r) => r.status === 'FAILED').length;
+  const cancelledRequests = requests.filter((r) => r.status === 'CANCELLED').length;
+  const hasProviders = (providers?.length ?? 0) > 0;
 
   return (
     <div className="flex flex-col h-full">
@@ -104,8 +95,8 @@ export function OverviewPage() {
 
           {/* Stats Grid */}
           <div className="grid gap-4 md:gap-6 grid-cols-2 lg:grid-cols-4">
-            {stats.map(stat => {
-              const Icon = stat.icon
+            {stats.map((stat) => {
+              const Icon = stat.icon;
               return (
                 <Link key={stat.label} to={stat.href} className="group">
                   <Card className="h-full hover:shadow-lg hover:shadow-accent/5 cursor-pointer border-border/50 bg-card/50 backdrop-blur-sm transition-all duration-300 hover:border-accent/40 hover:-translate-y-1">
@@ -128,7 +119,7 @@ export function OverviewPage() {
                     </CardContent>
                   </Card>
                 </Link>
-              )
+              );
             })}
           </div>
 
@@ -252,9 +243,7 @@ export function OverviewPage() {
                 <h3 className="text-base font-semibold text-foreground mb-2">
                   {t('dashboard.secure')}
                 </h3>
-                <p className="text-sm text-muted-foreground">
-                  {t('dashboard.secureDesc')}
-                </p>
+                <p className="text-sm text-muted-foreground">{t('dashboard.secureDesc')}</p>
               </div>
               <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-2xl p-6 md:p-8 text-center hover:bg-accent hover:border-border transition-all duration-300 group hover:-translate-y-1">
                 <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-muted flex items-center justify-center mx-auto mb-4 group-hover:bg-muted/80 transition-colors">
@@ -263,9 +252,7 @@ export function OverviewPage() {
                 <h3 className="text-base font-semibold text-foreground mb-2">
                   {t('dashboard.fast')}
                 </h3>
-                <p className="text-sm text-muted-foreground">
-                  {t('dashboard.fastDesc')}
-                </p>
+                <p className="text-sm text-muted-foreground">{t('dashboard.fastDesc')}</p>
               </div>
               <div className="bg-card/50 backdrop-blur-sm border border-border/50 rounded-2xl p-6 md:p-8 text-center hover:bg-accent hover:border-border transition-all duration-300 group hover:-translate-y-1">
                 <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-muted flex items-center justify-center mx-auto mb-4 group-hover:bg-muted/80 transition-colors">
@@ -274,14 +261,12 @@ export function OverviewPage() {
                 <h3 className="text-base font-semibold text-foreground mb-2">
                   {t('dashboard.insights')}
                 </h3>
-                <p className="text-sm text-muted-foreground">
-                  {t('dashboard.insightsDesc')}
-                </p>
+                <p className="text-sm text-muted-foreground">{t('dashboard.insightsDesc')}</p>
               </div>
             </div>
           )}
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/projects/detail.tsx b/web/src/pages/projects/detail.tsx
index a3795e54..d3cf9de1 100644
--- a/web/src/pages/projects/detail.tsx
+++ b/web/src/pages/projects/detail.tsx
@@ -1,17 +1,7 @@
-import { useState } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import {
-  Button,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from '@/components/ui'
-import {
-  useProjectBySlug,
-  useDeleteProject,
-  projectKeys,
-} from '@/hooks/queries'
+import { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button, Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui';
+import { useProjectBySlug, useDeleteProject, projectKeys } from '@/hooks/queries';
 import {
   ArrowLeft,
   Trash2,
@@ -21,41 +11,41 @@ import {
   Route,
   Users,
   FileText,
-} from 'lucide-react'
-import { useQueryClient } from '@tanstack/react-query'
-import { OverviewTab } from './tabs/overview'
-import { RoutesTab } from './tabs/routes'
-import { SessionsTab } from './tabs/sessions'
-import { RequestsTab } from './tabs/requests'
+} from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { OverviewTab } from './tabs/overview';
+import { RoutesTab } from './tabs/routes';
+import { SessionsTab } from './tabs/sessions';
+import { RequestsTab } from './tabs/requests';
 
-type TabId = 'overview' | 'routes' | 'sessions' | 'requests'
+type TabId = 'overview' | 'routes' | 'sessions' | 'requests';
 
 export function ProjectDetailPage() {
-  const { slug } = useParams<{ slug: string }>()
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const { data: project, isLoading, error } = useProjectBySlug(slug ?? '')
-  const deleteProject = useDeleteProject()
-  const [activeTab, setActiveTab] = useState<TabId>('overview')
+  const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data: project, isLoading, error } = useProjectBySlug(slug ?? '');
+  const deleteProject = useDeleteProject();
+  const [activeTab, setActiveTab] = useState<TabId>('overview');
 
   const handleDelete = () => {
-    if (!project) return
+    if (!project) return;
     if (confirm(`Are you sure you want to delete project "${project.name}"?`)) {
       deleteProject.mutate(project.id, {
         onSuccess: () => {
-          queryClient.invalidateQueries({ queryKey: projectKeys.lists() })
-          navigate('/projects')
+          queryClient.invalidateQueries({ queryKey: projectKeys.lists() });
+          navigate('/projects');
         },
-      })
+      });
     }
-  }
+  };
 
   if (isLoading) {
     return (
       <div className="flex items-center justify-center h-full">
         <Loader2 className="h-8 w-8 animate-spin text-accent" />
       </div>
-    )
+    );
   }
 
   if (error || !project) {
@@ -67,7 +57,7 @@ export function ProjectDetailPage() {
           Back to Projects
         </Button>
       </div>
-    )
+    );
   }
 
   return (
@@ -91,9 +81,7 @@ export function ProjectDetailPage() {
               <h2 className="text-lg font-semibold text-foreground leading-tight">
                 {project.name}
               </h2>
-              <p className="text-xs text-muted-foreground font-mono mt-0.5">
-                {project.slug}
-              </p>
+              <p className="text-xs text-muted-foreground font-mono mt-0.5">{project.slug}</p>
             </div>
           </div>
         </div>
@@ -170,5 +158,5 @@ export function ProjectDetailPage() {
         </div>
       </Tabs>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/projects/index.tsx b/web/src/pages/projects/index.tsx
index 8e2c1ba2..e65b83de 100644
--- a/web/src/pages/projects/index.tsx
+++ b/web/src/pages/projects/index.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   Card,
@@ -9,44 +9,37 @@ import {
   CardTitle,
   Input,
   CardFooter,
-} from '@/components/ui'
-import { useProjects, useCreateProject } from '@/hooks/queries'
-import {
-  Plus,
-  X,
-  FolderKanban,
-  Loader2,
-  Calendar,
-  Hash,
-} from 'lucide-react'
-import { PageHeader } from '@/components/layout'
+} from '@/components/ui';
+import { useProjects, useCreateProject } from '@/hooks/queries';
+import { Plus, X, FolderKanban, Loader2, Calendar, Hash } from 'lucide-react';
+import { PageHeader } from '@/components/layout';
 
 export function ProjectsPage() {
-  const { t, i18n } = useTranslation()
-  const navigate = useNavigate()
-  const { data: projects, isLoading } = useProjects()
-  const createProject = useCreateProject()
-  const [showForm, setShowForm] = useState(false)
-  const [name, setName] = useState('')
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { data: projects, isLoading } = useProjects();
+  const createProject = useCreateProject();
+  const [showForm, setShowForm] = useState(false);
+  const [name, setName] = useState('');
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     createProject.mutate(
       { name, enabledCustomRoutes: [] },
       {
-        onSuccess: project => {
-          setShowForm(false)
-          setName('')
+        onSuccess: (project) => {
+          setShowForm(false);
+          setName('');
           // 创建后自动跳转到详情页
-          navigate(`/projects/${project.slug}`)
+          navigate(`/projects/${project.slug}`);
         },
-      }
-    )
-  }
+      },
+    );
+  };
 
   const handleRowClick = (slug: string) => {
-    navigate(`/projects/${slug}`)
-  }
+    navigate(`/projects/${slug}`);
+  };
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -56,15 +49,8 @@ export function ProjectsPage() {
         title={t('projects.title')}
         description={t('projects.description')}
       >
-        <Button
-          onClick={() => setShowForm(!showForm)}
-          variant={showForm ? 'secondary' : 'default'}
-        >
-          {showForm ? (
-            <X className="mr-2 h-4 w-4" />
-          ) : (
-            <Plus className="mr-2 h-4 w-4" />
-          )}
+        <Button onClick={() => setShowForm(!showForm)} variant={showForm ? 'secondary' : 'default'}>
+          {showForm ? <X className="mr-2 h-4 w-4" /> : <Plus className="mr-2 h-4 w-4" />}
           {showForm ? t('common.cancel') : t('projects.addProject')}
         </Button>
       </PageHeader>
@@ -80,7 +66,7 @@ export function ProjectsPage() {
                   </label>
                   <Input
                     value={name}
-                    onChange={e => setName(e.target.value)}
+                    onChange={(e) => setName(e.target.value)}
                     placeholder={t('projects.projectNamePlaceholder')}
                     required
                     className="bg-muted border-border"
@@ -105,7 +91,7 @@ export function ProjectsPage() {
           </div>
         ) : projects && projects.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {projects.map(project => (
+            {projects.map((project) => (
               <Card
                 key={project.id}
                 className="group border-border bg-surface-primary cursor-pointer hover:border-accent/50 hover:shadow-card-hover transition-all duration-200 flex flex-col"
@@ -136,7 +122,7 @@ export function ProjectsPage() {
                           month: 'short',
                           day: 'numeric',
                           year: 'numeric',
-                        }
+                        },
                       )}
                     </span>
                   </div>
@@ -153,5 +139,5 @@ export function ProjectsPage() {
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/projects/tabs/overview.tsx b/web/src/pages/projects/tabs/overview.tsx
index 7705ab6d..95393344 100644
--- a/web/src/pages/projects/tabs/overview.tsx
+++ b/web/src/pages/projects/tabs/overview.tsx
@@ -20,24 +20,27 @@ export function OverviewTab({ project }: OverviewTabProps) {
   const [slug, setSlug] = useState(project.slug);
   const [copied, setCopied] = useState<string | null>(null);
 
-  const hasChanges =
-    name !== project.name ||
-    slug !== project.slug;
+  const hasChanges = name !== project.name || slug !== project.slug;
 
   const handleSave = () => {
     updateProject.mutate(
-      { id: project.id, data: { name, slug, enabledCustomRoutes: project.enabledCustomRoutes } },
+      {
+        id: project.id,
+        data: { name, slug, enabledCustomRoutes: project.enabledCustomRoutes },
+      },
       {
         onSuccess: (updatedProject) => {
           // Invalidate queries
           queryClient.invalidateQueries({ queryKey: projectKeys.lists() });
-          queryClient.invalidateQueries({ queryKey: projectKeys.slug(project.slug) });
+          queryClient.invalidateQueries({
+            queryKey: projectKeys.slug(project.slug),
+          });
           // If slug changed, navigate to new URL
           if (slug !== project.slug) {
             navigate(`/projects/${updatedProject.slug}`, { replace: true });
           }
         },
-      }
+      },
     );
   };
 
@@ -61,7 +64,9 @@ export function OverviewTab({ project }: OverviewTabProps) {
         <CardContent className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <label htmlFor="name" className="text-sm font-medium text-text-primary">{t('projects.name')}</label>
+              <label htmlFor="name" className="text-sm font-medium text-text-primary">
+                {t('projects.name')}
+              </label>
               <Input
                 id="name"
                 value={name}
@@ -70,7 +75,9 @@ export function OverviewTab({ project }: OverviewTabProps) {
               />
             </div>
             <div className="space-y-2">
-              <label htmlFor="slug" className="text-sm font-medium text-text-primary">{t('projects.slug')}</label>
+              <label htmlFor="slug" className="text-sm font-medium text-text-primary">
+                {t('projects.slug')}
+              </label>
               <Input
                 id="slug"
                 value={slug}
@@ -78,9 +85,7 @@ export function OverviewTab({ project }: OverviewTabProps) {
                 className="bg-surface-secondary border-border font-mono"
                 placeholder={t('projects.slugPlaceholder')}
               />
-              <p className="text-xs text-text-muted">
-                {t('projects.slugDesc')}
-              </p>
+              <p className="text-xs text-text-muted">{t('projects.slugDesc')}</p>
             </div>
           </div>
 
@@ -120,12 +125,12 @@ export function OverviewTab({ project }: OverviewTabProps) {
           <CardTitle className="text-base">{t('projects.proxyConfig')}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
-          <p className="text-sm text-text-secondary">
-            {t('projects.proxyConfigDesc')}
-          </p>
+          <p className="text-sm text-text-secondary">{t('projects.proxyConfigDesc')}</p>
 
           <div className="flex items-center gap-3">
-            <span className="text-sm font-medium text-text-primary w-20">{t('projects.baseUrl')}</span>
+            <span className="text-sm font-medium text-text-primary w-20">
+              {t('projects.baseUrl')}
+            </span>
             <code className="flex-1 text-xs bg-surface-secondary px-3 py-2 rounded border border-border text-text-primary font-mono">
               {projectBaseUrl}
             </code>
diff --git a/web/src/pages/projects/tabs/requests.tsx b/web/src/pages/projects/tabs/requests.tsx
index 688aaaf4..5f05db8b 100644
--- a/web/src/pages/projects/tabs/requests.tsx
+++ b/web/src/pages/projects/tabs/requests.tsx
@@ -1,9 +1,9 @@
-import { Card, CardContent } from '@/components/ui'
-import type { Project } from '@/lib/transport'
-import { FileText } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui';
+import type { Project } from '@/lib/transport';
+import { FileText } from 'lucide-react';
 
 interface RequestsTabProps {
-  project: Project
+  project: Project;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -11,12 +11,8 @@ export function RequestsTab({ project: _project }: RequestsTabProps) {
   return (
     <div className="p-6 space-y-6">
       <div>
-        <h3 className="text-lg font-medium text-foreground">
-          Project Requests
-        </h3>
-        <p className="text-sm text-muted-foreground">
-          Request history for this project
-        </p>
+        <h3 className="text-lg font-medium text-foreground">Project Requests</h3>
+        <p className="text-sm text-muted-foreground">Request history for this project</p>
       </div>
 
       <Card className="border-border bg-card">
@@ -24,9 +20,7 @@ export function RequestsTab({ project: _project }: RequestsTabProps) {
           <div className="flex flex-col items-center justify-center gap-4 text-center">
             <FileText className="h-12 w-12 text-muted-foreground opacity-20" />
             <div>
-              <p className="text-muted-foreground">
-                Request tracking by project coming soon
-              </p>
+              <p className="text-muted-foreground">Request tracking by project coming soon</p>
               <p className="text-xs text-muted-foreground mt-1">
                 This feature requires adding projectID to ProxyRequest records.
               </p>
@@ -35,5 +29,5 @@ export function RequestsTab({ project: _project }: RequestsTabProps) {
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/projects/tabs/routes.tsx b/web/src/pages/projects/tabs/routes.tsx
index 9517ce58..52e236ee 100644
--- a/web/src/pages/projects/tabs/routes.tsx
+++ b/web/src/pages/projects/tabs/routes.tsx
@@ -3,36 +3,32 @@
  * 显示项目特定的路由配置 - 左侧 ClientType Sidebar + 右侧拖拽卡片布局
  */
 
-import { useState, useMemo } from 'react'
-import { useRoutes, useUpdateProject, projectKeys } from '@/hooks/queries'
-import { useStreamingRequests } from '@/hooks/use-streaming'
-import {
-  ClientIcon,
-  getClientName,
-  getClientColor,
-} from '@/components/icons/client-icons'
-import { cn } from '@/lib/utils'
-import { Switch } from '@/components/ui'
-import type { Project, ClientType, Route } from '@/lib/transport'
-import { StreamingBadge } from '@/components/ui/streaming-badge'
-import { useQueryClient } from '@tanstack/react-query'
-import { ClientTypeRoutesContent } from '@/components/routes/ClientTypeRoutesContent'
-import { useTranslation } from 'react-i18next'
+import { useState, useMemo } from 'react';
+import { useRoutes, useUpdateProject, projectKeys } from '@/hooks/queries';
+import { useStreamingRequests } from '@/hooks/use-streaming';
+import { ClientIcon, getClientName, getClientColor } from '@/components/icons/client-icons';
+import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui';
+import type { Project, ClientType, Route } from '@/lib/transport';
+import { StreamingBadge } from '@/components/ui/streaming-badge';
+import { useQueryClient } from '@tanstack/react-query';
+import { ClientTypeRoutesContent } from '@/components/routes/ClientTypeRoutesContent';
+import { useTranslation } from 'react-i18next';
 
 // 支持的客户端类型列表
-const CLIENT_TYPES: ClientType[] = ['claude', 'openai', 'codex', 'gemini']
+const CLIENT_TYPES: ClientType[] = ['claude', 'openai', 'codex', 'gemini'];
 
 interface RoutesTabProps {
-  project: Project
+  project: Project;
 }
 
 // 项目路由内容包装器 - 包含自定义路由开关逻辑
 interface ProjectClientTypeWrapperProps {
-  clientType: ClientType
-  project: Project
-  isCustomRoutesEnabled: boolean
-  onToggleCustomRoutes: (enabled: boolean) => void
-  projectRoutes: Route[]
+  clientType: ClientType;
+  project: Project;
+  isCustomRoutesEnabled: boolean;
+  onToggleCustomRoutes: (enabled: boolean) => void;
+  projectRoutes: Route[];
 }
 
 function ProjectClientTypeWrapper({
@@ -42,7 +38,7 @@ function ProjectClientTypeWrapper({
   onToggleCustomRoutes,
   projectRoutes,
 }: ProjectClientTypeWrapperProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col h-full">
       {/* Header with Toggle */}
@@ -50,13 +46,11 @@ function ProjectClientTypeWrapper({
         <div className="flex items-center gap-4">
           <ClientIcon type={clientType} size={32} />
           <div>
-            <h2 className="text-lg font-semibold text-foreground">
-              {getClientName(clientType)}
-            </h2>
+            <h2 className="text-lg font-semibold text-foreground">{getClientName(clientType)}</h2>
             <p className="text-xs text-muted-foreground">
               {isCustomRoutesEnabled
                 ? t('routes.routesConfigured', {
-                    count: projectRoutes.filter(r => r.clientType === clientType).length
+                    count: projectRoutes.filter((r) => r.clientType === clientType).length,
                   })
                 : t('routes.usingGlobalRoutes')}
             </p>
@@ -64,10 +58,7 @@ function ProjectClientTypeWrapper({
         </div>
         <div className="flex items-center gap-3">
           <span className="text-sm text-text-secondary">{t('routes.customRoutes')}</span>
-          <Switch
-            checked={isCustomRoutesEnabled}
-            onCheckedChange={onToggleCustomRoutes}
-          />
+          <Switch checked={isCustomRoutesEnabled} onCheckedChange={onToggleCustomRoutes} />
         </div>
       </div>
 
@@ -82,72 +73,68 @@ function ProjectClientTypeWrapper({
               {t('routes.customRoutesDisabled')}
             </h3>
             <p className="text-sm text-text-secondary leading-relaxed">
-              {t('routes.usingGlobalRoutesDesc', { client: getClientName(clientType) })}
+              {t('routes.usingGlobalRoutesDesc', {
+                client: getClientName(clientType),
+              })}
             </p>
           </div>
         </div>
       ) : (
         <div className="flex-1 overflow-hidden">
-          <ClientTypeRoutesContent
-            clientType={clientType}
-            projectID={project.id}
-          />
+          <ClientTypeRoutesContent clientType={clientType} projectID={project.id} />
         </div>
       )}
     </div>
-  )
+  );
 }
 
 export function RoutesTab({ project }: RoutesTabProps) {
-  const [activeClientType, setActiveClientType] = useState<ClientType>('claude')
-  const queryClient = useQueryClient()
+  const [activeClientType, setActiveClientType] = useState<ClientType>('claude');
+  const queryClient = useQueryClient();
 
-  const { data: allRoutes, isLoading: routesLoading } = useRoutes()
-  const { countsByRoute } = useStreamingRequests()
+  const { data: allRoutes, isLoading: routesLoading } = useRoutes();
+  const { countsByRoute } = useStreamingRequests();
 
-  const updateProject = useUpdateProject()
+  const updateProject = useUpdateProject();
 
-  const loading = routesLoading
+  const loading = routesLoading;
 
   // 获取项目的路由
   const projectRoutes = useMemo(() => {
-    return allRoutes?.filter(r => r.projectID === project.id) || []
-  }, [allRoutes, project.id])
+    return allRoutes?.filter((r) => r.projectID === project.id) || [];
+  }, [allRoutes, project.id]);
 
   // 获取每个 ClientType 的路由数量
   const getRouteCount = (clientType: ClientType) => {
-    return projectRoutes.filter(r => r.clientType === clientType).length
-  }
+    return projectRoutes.filter((r) => r.clientType === clientType).length;
+  };
 
   // 获取每个 ClientType 的 streaming 请求数（只统计当前项目的路由）
   const getStreamingCount = (clientType: ClientType) => {
-    const clientRoutes = projectRoutes.filter(r => r.clientType === clientType)
-    let count = 0
+    const clientRoutes = projectRoutes.filter((r) => r.clientType === clientType);
+    let count = 0;
     for (const route of clientRoutes) {
-      count += countsByRoute.get(route.id) || 0
+      count += countsByRoute.get(route.id) || 0;
     }
-    return count
-  }
+    return count;
+  };
 
   // 检查某个 ClientType 是否启用了自定义路由
   const isCustomRoutesEnabled = (clientType: ClientType): boolean => {
-    return (project.enabledCustomRoutes || []).includes(clientType)
-  }
+    return (project.enabledCustomRoutes || []).includes(clientType);
+  };
 
   // 切换 ClientType 的自定义路由开关
-  const handleToggleCustomRoutes = (
-    clientType: ClientType,
-    enabled: boolean
-  ) => {
-    const currentEnabled = project.enabledCustomRoutes || []
-    let newEnabled: ClientType[]
+  const handleToggleCustomRoutes = (clientType: ClientType, enabled: boolean) => {
+    const currentEnabled = project.enabledCustomRoutes || [];
+    let newEnabled: ClientType[];
 
     if (enabled) {
       // 添加到列表
-      newEnabled = [...currentEnabled, clientType]
+      newEnabled = [...currentEnabled, clientType];
     } else {
       // 从列表移除
-      newEnabled = currentEnabled.filter(ct => ct !== clientType)
+      newEnabled = currentEnabled.filter((ct) => ct !== clientType);
     }
 
     updateProject.mutate(
@@ -161,32 +148,32 @@ export function RoutesTab({ project }: RoutesTabProps) {
       },
       {
         onSuccess: () => {
-          queryClient.invalidateQueries({ queryKey: projectKeys.lists() })
+          queryClient.invalidateQueries({ queryKey: projectKeys.lists() });
           queryClient.invalidateQueries({
             queryKey: projectKeys.slug(project.slug),
-          })
+          });
         },
-      }
-    )
-  }
+      },
+    );
+  };
 
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full p-6">
         <div className="text-muted-foreground">Loading...</div>
       </div>
-    )
+    );
   }
 
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* ClientType Tabs */}
       <div className="flex items-center gap-2 px-lg py-4 border-b border-border bg-card shrink-0">
-        {CLIENT_TYPES.map(clientType => {
-          const isActive = activeClientType === clientType
-          const routeCount = getRouteCount(clientType)
-          const streamingCount = getStreamingCount(clientType)
-          const color = getClientColor(clientType)
+        {CLIENT_TYPES.map((clientType) => {
+          const isActive = activeClientType === clientType;
+          const routeCount = getRouteCount(clientType);
+          const streamingCount = getStreamingCount(clientType);
+          const color = getClientColor(clientType);
 
           return (
             <button
@@ -196,23 +183,17 @@ export function RoutesTab({ project }: RoutesTabProps) {
                 'relative flex items-center gap-2 px-4 py-2 rounded-lg transition-all',
                 isActive
                   ? 'bg-accent/10 text-accent border border-accent/20'
-                  : 'bg-muted text-muted-foreground hover:bg-accent border border-transparent'
+                  : 'bg-muted text-muted-foreground hover:bg-accent border border-transparent',
               )}
             >
               <ClientIcon type={clientType} size={16} />
-              <span className="text-sm font-medium">
-                {getClientName(clientType)}
-              </span>
+              <span className="text-sm font-medium">{getClientName(clientType)}</span>
               {routeCount > 0 && (
-                <span className="text-[10px] font-mono text-muted-foreground">
-                  {routeCount}
-                </span>
-              )}
-              {streamingCount > 0 && (
-                <StreamingBadge count={streamingCount} color={color} />
+                <span className="text-[10px] font-mono text-muted-foreground">{routeCount}</span>
               )}
+              {streamingCount > 0 && <StreamingBadge count={streamingCount} color={color} />}
             </button>
-          )
+          );
         })}
       </div>
 
@@ -223,11 +204,9 @@ export function RoutesTab({ project }: RoutesTabProps) {
           project={project}
           projectRoutes={projectRoutes}
           isCustomRoutesEnabled={isCustomRoutesEnabled(activeClientType)}
-          onToggleCustomRoutes={enabled =>
-            handleToggleCustomRoutes(activeClientType, enabled)
-          }
+          onToggleCustomRoutes={(enabled) => handleToggleCustomRoutes(activeClientType, enabled)}
         />
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/projects/tabs/sessions.tsx b/web/src/pages/projects/tabs/sessions.tsx
index bc0502f6..4dc46150 100644
--- a/web/src/pages/projects/tabs/sessions.tsx
+++ b/web/src/pages/projects/tabs/sessions.tsx
@@ -1,4 +1,13 @@
-import { Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui';
+import {
+  Card,
+  CardContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui';
 import { useSessions } from '@/hooks/queries';
 import type { Project } from '@/lib/transport';
 import { Loader2, Users } from 'lucide-react';
@@ -27,9 +36,7 @@ export function SessionsTab({ project }: SessionsTabProps) {
     <div className="p-6 space-y-6">
       <div>
         <h3 className="text-lg font-medium text-text-primary">{t('sessions.projectSessions')}</h3>
-        <p className="text-sm text-text-secondary">
-          {t('sessions.description')}
-        </p>
+        <p className="text-sm text-text-secondary">{t('sessions.description')}</p>
       </div>
 
       <Card className="border-border bg-card">
@@ -46,11 +53,11 @@ export function SessionsTab({ project }: SessionsTabProps) {
             <TableBody>
               {projectSessions.map((session) => (
                 <TableRow key={session.id} className="border-border hover:bg-accent">
-                  <TableCell className="font-mono text-xs text-muted-foreground">{session.id}</TableCell>
+                  <TableCell className="font-mono text-xs text-muted-foreground">
+                    {session.id}
+                  </TableCell>
                   <TableCell>
-                    <code className="text-xs bg-muted px-2 py-1 rounded">
-                      {session.sessionID}
-                    </code>
+                    <code className="text-xs bg-muted px-2 py-1 rounded">{session.sessionID}</code>
                   </TableCell>
                   <TableCell>
                     <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-accent/10 text-accent">
@@ -64,7 +71,10 @@ export function SessionsTab({ project }: SessionsTabProps) {
               ))}
               {projectSessions.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={4} className="h-32 text-center text-muted-foreground border-border">
+                  <TableCell
+                    colSpan={4}
+                    className="h-32 text-center text-muted-foreground border-border"
+                  >
                     <div className="flex flex-col items-center justify-center gap-2">
                       <Users className="h-8 w-8 opacity-20" />
                       <p>No sessions for this project</p>
diff --git a/web/src/pages/providers/components/antigravity-coming-soon.tsx b/web/src/pages/providers/components/antigravity-coming-soon.tsx
index 15682c05..19e101f6 100644
--- a/web/src/pages/providers/components/antigravity-coming-soon.tsx
+++ b/web/src/pages/providers/components/antigravity-coming-soon.tsx
@@ -1,8 +1,8 @@
-import { Wand2, ChevronLeft } from 'lucide-react'
-import { ANTIGRAVITY_COLOR } from '../types'
+import { Wand2, ChevronLeft } from 'lucide-react';
+import { ANTIGRAVITY_COLOR } from '../types';
 
 interface AntigravityComingSoonProps {
-  onBack: () => void
+  onBack: () => void;
 }
 
 export function AntigravityComingSoon({ onBack }: AntigravityComingSoonProps) {
@@ -16,12 +16,8 @@ export function AntigravityComingSoon({ onBack }: AntigravityComingSoonProps) {
           <ChevronLeft size={20} />
         </button>
         <div>
-          <h2 className="text-headline font-semibold text-foreground">
-            Antigravity
-          </h2>
-          <p className="text-caption text-muted-foreground">
-            OAuth Authentication
-          </p>
+          <h2 className="text-headline font-semibold text-foreground">Antigravity</h2>
+          <p className="text-caption text-muted-foreground">OAuth Authentication</p>
         </div>
       </div>
 
@@ -34,16 +30,13 @@ export function AntigravityComingSoon({ onBack }: AntigravityComingSoonProps) {
             >
               <Wand2 size={40} style={{ color: ANTIGRAVITY_COLOR }} />
             </div>
-            <h3 className="text-title3 font-semibold text-foreground mb-2">
-              Coming Soon
-            </h3>
+            <h3 className="text-title3 font-semibold text-foreground mb-2">Coming Soon</h3>
             <p className="text-body text-muted-foreground text-center max-w-sm">
-              Antigravity OAuth authentication will be available in a future
-              update.
+              Antigravity OAuth authentication will be available in a future update.
             </p>
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/antigravity-provider-view.tsx b/web/src/pages/providers/components/antigravity-provider-view.tsx
index d39543f9..4341e33d 100644
--- a/web/src/pages/providers/components/antigravity-provider-view.tsx
+++ b/web/src/pages/providers/components/antigravity-provider-view.tsx
@@ -1,27 +1,15 @@
-import { useState, useEffect } from 'react'
-import {
-  Wand2,
-  Mail,
-  ChevronLeft,
-  Trash2,
-  RefreshCw,
-  Clock,
-  Lock,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { ClientIcon } from '@/components/icons/client-icons'
-import type {
-  Provider,
-  AntigravityQuotaData,
-  AntigravityModelQuota,
-} from '@/lib/transport'
-import { getTransport } from '@/lib/transport'
-import { ANTIGRAVITY_COLOR } from '../types'
+import { useState, useEffect } from 'react';
+import { Wand2, Mail, ChevronLeft, Trash2, RefreshCw, Clock, Lock } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ClientIcon } from '@/components/icons/client-icons';
+import type { Provider, AntigravityQuotaData, AntigravityModelQuota } from '@/lib/transport';
+import { getTransport } from '@/lib/transport';
+import { ANTIGRAVITY_COLOR } from '../types';
 
 interface AntigravityProviderViewProps {
-  provider: Provider
-  onDelete: () => void
-  onClose: () => void
+  provider: Provider;
+  onDelete: () => void;
+  onClose: () => void;
 }
 
 // 友好的模型名称
@@ -30,39 +18,39 @@ const modelDisplayNames: Record<string, string> = {
   'gemini-3-flash': 'Gemini 3 Flash',
   'gemini-3-pro-image': 'Gemini 3 Pro Image',
   'claude-sonnet-4-5-thinking': 'Claude Sonnet 4.5',
-}
+};
 
 // 配额条的颜色
 function getQuotaColor(percentage: number): string {
-  if (percentage >= 50) return 'bg-success'
-  if (percentage >= 20) return 'bg-warning'
-  return 'bg-error'
+  if (percentage >= 50) return 'bg-success';
+  if (percentage >= 20) return 'bg-warning';
+  return 'bg-error';
 }
 
 // 格式化重置时间
 function formatResetTime(resetTime: string, t: (key: string) => string): string {
-  if (!resetTime) return t('proxy.comingSoon')
-  
+  if (!resetTime) return t('proxy.comingSoon');
+
   try {
-    const reset = new Date(resetTime)
-    const now = new Date()
-    const diff = reset.getTime() - now.getTime()
-  
-    if (diff <= 0) return t('proxy.comingSoon')
+    const reset = new Date(resetTime);
+    const now = new Date();
+    const diff = reset.getTime() - now.getTime();
+
+    if (diff <= 0) return t('proxy.comingSoon');
 
-    const hours = Math.floor(diff / (1000 * 60 * 60))
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
 
     if (hours > 24) {
-      const days = Math.floor(hours / 24)
-      return `${days}d ${hours % 24}h`
+      const days = Math.floor(hours / 24);
+      return `${days}d ${hours % 24}h`;
     }
     if (hours > 0) {
-      return `${hours}h ${minutes}m`
+      return `${hours}h ${minutes}m`;
     }
-    return `${minutes}m`
+    return `${minutes}m`;
   } catch {
-    return '-'
+    return '-';
   }
 }
 
@@ -72,7 +60,7 @@ function SubscriptionBadge({ tier }: { tier: string }) {
     ULTRA: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white',
     PRO: 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white',
     FREE: 'bg-gray-500/20 text-gray-400',
-  }
+  };
 
   return (
     <span
@@ -80,21 +68,19 @@ function SubscriptionBadge({ tier }: { tier: string }) {
     >
       {tier || 'FREE'}
     </span>
-  )
+  );
 }
 
 // 模型配额卡片
 function ModelQuotaCard({ model }: { model: AntigravityModelQuota }) {
-  const { t } = useTranslation()
-  const displayName = modelDisplayNames[model.name] || model.name
-  const color = getQuotaColor(model.percentage)
+  const { t } = useTranslation();
+  const displayName = modelDisplayNames[model.name] || model.name;
+  const color = getQuotaColor(model.percentage);
 
   return (
     <div className="bg-card border border-border rounded-xl p-4">
       <div className="flex items-center justify-between mb-3">
-        <span className="font-medium text-foreground text-sm">
-          {displayName}
-        </span>
+        <span className="font-medium text-foreground text-sm">{displayName}</span>
         <span className="text-xs text-muted-foreground flex items-center gap-1">
           <Clock size={12} />
           {t('proxy.resetsIn')} {formatResetTime(model.resetTime, t)}
@@ -112,7 +98,7 @@ function ModelQuotaCard({ model }: { model: AntigravityModelQuota }) {
         </span>
       </div>
     </div>
-  )
+  );
 }
 
 export function AntigravityProviderView({
@@ -120,29 +106,26 @@ export function AntigravityProviderView({
   onDelete,
   onClose,
 }: AntigravityProviderViewProps) {
-  const [quota, setQuota] = useState<AntigravityQuotaData | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [quota, setQuota] = useState<AntigravityQuotaData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const fetchQuota = async (forceRefresh = false) => {
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
-      const data = await getTransport().getAntigravityProviderQuota(
-        provider.id,
-        forceRefresh
-      )
-      setQuota(data)
+      const data = await getTransport().getAntigravityProviderQuota(provider.id, forceRefresh);
+      setQuota(data);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch quota')
+      setError(err instanceof Error ? err.message : 'Failed to fetch quota');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
-    fetchQuota(false)
-  }, [provider.id]) // eslint-disable-line react-hooks/exhaustive-deps
+    fetchQuota(false);
+  }, [provider.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="flex flex-col h-full">
@@ -155,12 +138,8 @@ export function AntigravityProviderView({
             <ChevronLeft size={20} />
           </button>
           <div>
-            <h2 className="text-headline font-semibold text-foreground">
-              {provider.name}
-            </h2>
-            <p className="text-caption text-muted-foreground">
-              Antigravity Provider
-            </p>
+            <h2 className="text-headline font-semibold text-foreground">{provider.name}</h2>
+            <p className="text-caption text-muted-foreground">Antigravity Provider</p>
           </div>
         </div>
         <button
@@ -186,12 +165,8 @@ export function AntigravityProviderView({
                 </div>
                 <div>
                   <div className="flex items-center gap-3">
-                    <h3 className="text-xl font-bold text-foreground">
-                      {provider.name}
-                    </h3>
-                    {quota?.subscriptionTier && (
-                      <SubscriptionBadge tier={quota.subscriptionTier} />
-                    )}
+                    <h3 className="text-xl font-bold text-foreground">{provider.name}</h3>
+                    {quota?.subscriptionTier && <SubscriptionBadge tier={quota.subscriptionTier} />}
                   </div>
                   <div className="text-sm text-muted-foreground flex items-center gap-1.5 mt-1">
                     <Mail size={14} />
@@ -225,18 +200,13 @@ export function AntigravityProviderView({
           {/* Quota Section */}
           <div>
             <div className="flex items-center justify-between mb-4 border-b border-border pb-2">
-              <h4 className="text-lg font-semibold text-foreground">
-                Model Quotas
-              </h4>
+              <h4 className="text-lg font-semibold text-foreground">Model Quotas</h4>
               <button
                 onClick={() => fetchQuota(true)}
                 disabled={loading}
                 className="btn bg-muted hover:bg-accent text-foreground flex items-center gap-2 text-sm"
               >
-                <RefreshCw
-                  size={14}
-                  className={loading ? 'animate-spin' : ''}
-                />
+                <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
                 Refresh
               </button>
             </div>
@@ -255,14 +225,13 @@ export function AntigravityProviderView({
                 <div>
                   <h5 className="font-semibold text-error">Access Forbidden</h5>
                   <p className="text-sm text-error/80">
-                    This account has been restricted. Please check your Google
-                    Cloud account status.
+                    This account has been restricted. Please check your Google Cloud account status.
                   </p>
                 </div>
               </div>
             ) : quota?.models && quota.models.length > 0 ? (
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {quota.models.map(model => (
+                {quota.models.map((model) => (
                   <ModelQuotaCard key={model.name} model={model} />
                 ))}
               </div>
@@ -272,7 +241,7 @@ export function AntigravityProviderView({
               </div>
             ) : (
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {[1, 2, 3, 4].map(i => (
+                {[1, 2, 3, 4].map((i) => (
                   <div
                     key={i}
                     className="bg-card border border-border rounded-xl p-4 animate-pulse"
@@ -286,8 +255,7 @@ export function AntigravityProviderView({
 
             {quota?.lastUpdated && (
               <p className="text-xs text-muted-foreground mt-4 text-right">
-                Last updated:{' '}
-                {new Date(quota.lastUpdated * 1000).toLocaleString()}
+                Last updated: {new Date(quota.lastUpdated * 1000).toLocaleString()}
               </p>
             )}
           </div>
@@ -299,16 +267,14 @@ export function AntigravityProviderView({
             </h4>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
               {provider.supportedClientTypes?.length > 0 ? (
-                provider.supportedClientTypes.map(ct => (
+                provider.supportedClientTypes.map((ct) => (
                   <div
                     key={ct}
                     className="flex items-center gap-3 bg-card border border-border rounded-xl p-4 shadow-sm"
                   >
                     <ClientIcon type={ct} size={28} />
                     <div>
-                      <div className="text-sm font-semibold text-foreground capitalize">
-                        {ct}
-                      </div>
+                      <div className="text-sm font-semibold text-foreground capitalize">{ct}</div>
                       <div className="text-xs text-muted-foreground">Enabled</div>
                     </div>
                   </div>
@@ -323,5 +289,5 @@ export function AntigravityProviderView({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/antigravity-token-import.tsx b/web/src/pages/providers/components/antigravity-token-import.tsx
index 1a3da872..c018f685 100644
--- a/web/src/pages/providers/components/antigravity-token-import.tsx
+++ b/web/src/pages/providers/components/antigravity-token-import.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react';
 import {
   Wand2,
   ChevronLeft,
@@ -10,154 +10,151 @@ import {
   Mail,
   ShieldCheck,
   Zap,
-} from 'lucide-react'
-import { getTransport } from '@/lib/transport'
+} from 'lucide-react';
+import { getTransport } from '@/lib/transport';
 import type {
   AntigravityTokenValidationResult,
   CreateProviderData,
   AntigravityOAuthResult,
-} from '@/lib/transport'
-import { ANTIGRAVITY_COLOR } from '../types'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
+} from '@/lib/transport';
+import { ANTIGRAVITY_COLOR } from '../types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 
 interface AntigravityTokenImportProps {
-  onBack: () => void
-  onCreateProvider: (data: CreateProviderData) => Promise<void>
+  onBack: () => void;
+  onCreateProvider: (data: CreateProviderData) => Promise<void>;
 }
 
-type ImportMode = 'oauth' | 'token'
-type OAuthStatus = 'idle' | 'waiting' | 'success' | 'error'
-
-export function AntigravityTokenImport({
-  onBack,
-  onCreateProvider,
-}: AntigravityTokenImportProps) {
-  const [mode, setMode] = useState<ImportMode>('token')
-  const [email, setEmail] = useState('')
-  const [token, setToken] = useState('')
-  const [validating, setValidating] = useState(false)
-  const [creating, setCreating] = useState(false)
-  const [validationResult, setValidationResult] =
-    useState<AntigravityTokenValidationResult | null>(null)
-  const [error, setError] = useState<string | null>(null)
+type ImportMode = 'oauth' | 'token';
+type OAuthStatus = 'idle' | 'waiting' | 'success' | 'error';
+
+export function AntigravityTokenImport({ onBack, onCreateProvider }: AntigravityTokenImportProps) {
+  const [mode, setMode] = useState<ImportMode>('token');
+  const [email, setEmail] = useState('');
+  const [token, setToken] = useState('');
+  const [validating, setValidating] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [validationResult, setValidationResult] = useState<AntigravityTokenValidationResult | null>(
+    null,
+  );
+  const [error, setError] = useState<string | null>(null);
 
   // OAuth state
-  const [oauthStatus, setOAuthStatus] = useState<OAuthStatus>('idle')
-  const [oauthState, setOAuthState] = useState<string | null>(null)
-  const [oauthResult, setOAuthResult] = useState<AntigravityOAuthResult | null>(
-    null
-  )
-  const oauthWindowRef = useRef<Window | null>(null)
+  const [oauthStatus, setOAuthStatus] = useState<OAuthStatus>('idle');
+  const [oauthState, setOAuthState] = useState<string | null>(null);
+  const [oauthResult, setOAuthResult] = useState<AntigravityOAuthResult | null>(null);
+  const oauthWindowRef = useRef<Window | null>(null);
 
   // Subscribe to OAuth result messages via WebSocket
   useEffect(() => {
-    const transport = getTransport()
+    const transport = getTransport();
     const unsubscribe = transport.subscribe<AntigravityOAuthResult>(
       'antigravity_oauth_result',
-      result => {
+      (result) => {
         // Only handle results that match our current OAuth state
         if (result.state === oauthState) {
           // Close the OAuth window if it's still open
           if (oauthWindowRef.current && !oauthWindowRef.current.closed) {
-            oauthWindowRef.current.close()
+            oauthWindowRef.current.close();
           }
 
           if (result.success && result.refreshToken) {
             // OAuth succeeded, save result for user confirmation
-            setOAuthStatus('success')
-            setOAuthResult(result)
+            setOAuthStatus('success');
+            setOAuthResult(result);
           } else {
             // OAuth failed
-            setOAuthStatus('error')
-            setError(result.error || 'OAuth authorization failed')
+            setOAuthStatus('error');
+            setError(result.error || 'OAuth authorization failed');
           }
         }
-      }
-    )
+      },
+    );
 
-    return () => unsubscribe()
-  }, [oauthState])
+    return () => unsubscribe();
+  }, [oauthState]);
 
   // Handle OAuth flow
   const handleOAuth = async () => {
-    setOAuthStatus('waiting')
-    setError(null)
+    setOAuthStatus('waiting');
+    setError(null);
 
     try {
       // Request OAuth URL from backend
-      const { authURL, state } = await getTransport().startAntigravityOAuth()
-      setOAuthState(state)
+      const { authURL, state } = await getTransport().startAntigravityOAuth();
+      setOAuthState(state);
 
       // Open OAuth window
-      const width = 600
-      const height = 700
-      const left = window.screenX + (window.outerWidth - width) / 2
-      const top = window.screenY + (window.outerHeight - height) / 2
+      const width = 600;
+      const height = 700;
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
 
       oauthWindowRef.current = window.open(
         authURL,
         'Antigravity OAuth',
-        `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`
-      )
+        `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`,
+      );
 
       // Monitor window closure
       const checkWindowClosed = setInterval(() => {
         if (oauthWindowRef.current?.closed) {
-          clearInterval(checkWindowClosed)
+          clearInterval(checkWindowClosed);
           // If still waiting when window closes, assume user cancelled
-          if (oauthStatus === 'waiting') {
-            setOAuthStatus('idle')
-            setOAuthState(null)
-          }
+          setOAuthStatus((current) => {
+            if (current === 'waiting') {
+              setOAuthState(null);
+              return 'idle';
+            }
+            return current;
+          });
         }
-      }, 500)
+      }, 500);
     } catch (err) {
-      setOAuthStatus('error')
-      setError(
-        err instanceof Error ? err.message : 'Failed to start OAuth flow'
-      )
+      setOAuthStatus('error');
+      setError(err instanceof Error ? err.message : 'Failed to start OAuth flow');
     }
-  }
+  };
 
   // 验证 token
   const handleValidate = async () => {
     if (token.trim() === '' || !token.startsWith('1//')) {
-      setError('请输入有效的 refresh token（以 1// 开头）')
-      return
+      setError('请输入有效的 refresh token（以 1// 开头）');
+      return;
     }
 
-    setValidating(true)
-    setError(null)
-    setValidationResult(null)
+    setValidating(true);
+    setError(null);
+    setValidationResult(null);
 
     try {
-      const result = await getTransport().validateAntigravityToken(token.trim())
-      setValidationResult(result)
+      const result = await getTransport().validateAntigravityToken(token.trim());
+      setValidationResult(result);
       if (!result.valid) {
-        setError(result.error || 'Token 验证失败')
+        setError(result.error || 'Token 验证失败');
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : '验证失败')
+      setError(err instanceof Error ? err.message : '验证失败');
     } finally {
-      setValidating(false)
+      setValidating(false);
     }
-  }
+  };
 
   // 创建 provider
   const handleCreate = async () => {
     if (!validationResult?.valid) {
-      setError('请先验证 token')
-      return
+      setError('请先验证 token');
+      return;
     }
 
-    setCreating(true)
-    setError(null)
+    setCreating(true);
+    setError(null);
 
     try {
       // 优先使用验证返回的邮箱，其次使用用户输入的邮箱
-      const finalEmail = validationResult.userInfo?.email || email.trim() || ''
+      const finalEmail = validationResult.userInfo?.email || email.trim() || '';
       const providerData: CreateProviderData = {
         type: 'antigravity',
         name: finalEmail || 'Antigravity Account',
@@ -171,24 +168,24 @@ export function AntigravityTokenImport({
               : '',
           },
         },
-      }
-      await onCreateProvider(providerData)
+      };
+      await onCreateProvider(providerData);
     } catch (err) {
-      setError(err instanceof Error ? err.message : '创建失败')
+      setError(err instanceof Error ? err.message : '创建失败');
     } finally {
-      setCreating(false)
+      setCreating(false);
     }
-  }
+  };
 
   // 创建 OAuth provider
   const handleOAuthCreate = async () => {
     if (!oauthResult?.refreshToken) {
-      setError('OAuth result not available')
-      return
+      setError('OAuth result not available');
+      return;
     }
 
-    setCreating(true)
-    setError(null)
+    setCreating(true);
+    setError(null);
 
     try {
       const providerData: CreateProviderData = {
@@ -204,16 +201,16 @@ export function AntigravityTokenImport({
               : '',
           },
         },
-      }
-      await onCreateProvider(providerData)
+      };
+      await onCreateProvider(providerData);
     } catch (err) {
-      setError(err instanceof Error ? err.message : '创建失败')
+      setError(err instanceof Error ? err.message : '创建失败');
     } finally {
-      setCreating(false)
+      setCreating(false);
     }
-  }
+  };
 
-  const isTokenValid = token.trim().startsWith('1//')
+  const isTokenValid = token.trim().startsWith('1//');
 
   return (
     <div className="flex flex-col h-full bg-card">
@@ -242,12 +239,9 @@ export function AntigravityTokenImport({
         <div className="container max-w-2xl mx-auto py-8 px-6 space-y-8">
           {/* Hero Section */}
           <div className="text-center space-y-2 mb-8">
-            <h1 className="text-2xl font-bold text-foreground">
-              Choose Authentication Method
-            </h1>
+            <h1 className="text-2xl font-bold text-foreground">Choose Authentication Method</h1>
             <p className="text-muted-foreground mx-auto">
-              Select how you want to connect your Antigravity account to access
-              models.
+              Select how you want to connect your Antigravity account to access models.
             </p>
           </div>
 
@@ -259,7 +253,7 @@ export function AntigravityTokenImport({
                 'relative group p-4 rounded-xl border-2 transition-all duration-200 text-left',
                 mode === 'oauth'
                   ? 'border-accent bg-accent/5 shadow-sm'
-                  : 'border-border hover:border-accent/50 bg-muted hover:bg-accent'
+                  : 'border-border hover:border-accent/50 bg-muted hover:bg-accent',
               )}
             >
               <div className="flex items-start gap-4">
@@ -268,7 +262,7 @@ export function AntigravityTokenImport({
                     'w-10 h-10 rounded-lg flex items-center justify-center transition-colors',
                     mode === 'oauth'
                       ? 'bg-accent/20 text-accent'
-                      : 'bg-accent text-muted-foreground group-hover:text-accent'
+                      : 'bg-accent text-muted-foreground group-hover:text-accent',
                   )}
                 >
                   <ExternalLink size={20} />
@@ -277,7 +271,7 @@ export function AntigravityTokenImport({
                   <div
                     className={cn(
                       'font-semibold mb-1',
-                      mode === 'oauth' ? 'text-accent' : 'text-foreground'
+                      mode === 'oauth' ? 'text-accent' : 'text-foreground',
                     )}
                   >
                     OAuth Connect
@@ -298,7 +292,7 @@ export function AntigravityTokenImport({
                 'relative group p-4 rounded-xl border-2 transition-all duration-200 text-left',
                 mode === 'token'
                   ? 'border-accent bg-accent/5 shadow-sm'
-                  : 'border-border hover:border-accent/50 bg-muted hover:bg-accent'
+                  : 'border-border hover:border-accent/50 bg-muted hover:bg-accent',
               )}
             >
               <div className="flex items-start gap-4">
@@ -307,7 +301,7 @@ export function AntigravityTokenImport({
                     'w-10 h-10 rounded-lg flex items-center justify-center transition-colors',
                     mode === 'token'
                       ? 'bg-accent/20 text-accent'
-                      : 'bg-accent text-muted-foreground group-hover:text-accent'
+                      : 'bg-accent text-muted-foreground group-hover:text-accent',
                   )}
                 >
                   <Key size={20} />
@@ -316,14 +310,13 @@ export function AntigravityTokenImport({
                   <div
                     className={cn(
                       'font-semibold mb-1',
-                      mode === 'token' ? 'text-accent' : 'text-foreground'
+                      mode === 'token' ? 'text-accent' : 'text-foreground',
                     )}
                   >
                     Manual Token
                   </div>
                   <p className="text-xs text-muted-foreground leading-relaxed">
-                    Paste your refresh token directly. Best for service
-                    accounts.
+                    Paste your refresh token directly. Best for service accounts.
                   </p>
                 </div>
               </div>
@@ -350,17 +343,12 @@ export function AntigravityTokenImport({
                     OAuth Authorization
                   </h3>
                   <p className="text-sm text-muted-foreground mb-8">
-                    We will redirect you to Google to securely authorize access
-                    to your Antigravity projects.
+                    We will redirect you to Google to securely authorize access to your Antigravity
+                    projects.
                   </p>
 
                   {oauthStatus === 'idle' && (
-                    <Button
-                      onClick={handleOAuth}
-                      variant="default"
-                      size="lg"
-                      className="gap-2"
-                    >
+                    <Button onClick={handleOAuth} variant="default" size="lg" className="gap-2">
                       <ExternalLink size={16} />
                       Connect with Google
                     </Button>
@@ -368,12 +356,7 @@ export function AntigravityTokenImport({
 
                   {oauthStatus === 'waiting' && (
                     <div className="space-y-4">
-                      <Button
-                        disabled
-                        variant="secondary"
-                        size="lg"
-                        className="gap-2"
-                      >
+                      <Button disabled variant="secondary" size="lg" className="gap-2">
                         <Loader2 size={16} className="animate-spin" />
                         Waiting for authorization...
                       </Button>
@@ -397,9 +380,7 @@ export function AntigravityTokenImport({
                         </div>
                         <div className="text-sm text-muted-foreground">
                           Ready to connect as{' '}
-                          <span className="font-medium text-foreground">
-                            {oauthResult.email}
-                          </span>
+                          <span className="font-medium text-foreground">{oauthResult.email}</span>
                         </div>
 
                         <div className="flex items-center gap-2 mt-3 pt-3 border-t border-success/10">
@@ -432,14 +413,9 @@ export function AntigravityTokenImport({
                 {/* Error Message */}
                 {error && oauthStatus === 'error' && (
                   <div className="bg-error/5 border border-error/20 rounded-xl p-4 flex items-start gap-3 animate-in fade-in zoom-in-95">
-                    <AlertCircle
-                      size={20}
-                      className="text-error shrink-0 mt-0.5"
-                    />
+                    <AlertCircle size={20} className="text-error shrink-0 mt-0.5" />
                     <div>
-                      <p className="text-sm font-medium text-error">
-                        OAuth Failed
-                      </p>
+                      <p className="text-sm font-medium text-error">OAuth Failed</p>
                       <p className="text-xs text-error/80 mt-0.5">{error}</p>
                     </div>
                   </div>
@@ -450,8 +426,8 @@ export function AntigravityTokenImport({
                   <div className="text-center">
                     <Button
                       onClick={() => {
-                        setOAuthStatus('idle')
-                        setError(null)
+                        setOAuthStatus('idle');
+                        setError(null);
                       }}
                       variant="outline"
                     >
@@ -488,9 +464,7 @@ export function AntigravityTokenImport({
                       <ShieldCheck size={18} className="text-foreground" />
                     </div>
                     <div>
-                      <h3 className="text-base font-semibold text-foreground">
-                        Credentials
-                      </h3>
+                      <h3 className="text-base font-semibold text-foreground">Credentials</h3>
                       <p className="text-xs text-muted-foreground">
                         Enter your account details below
                       </p>
@@ -510,14 +484,13 @@ export function AntigravityTokenImport({
                     <Input
                       type="email"
                       value={email}
-                      onChange={e => setEmail(e.target.value)}
+                      onChange={(e) => setEmail(e.target.value)}
                       placeholder="e.g. user@example.com"
                       className="bg-card"
                       disabled={validating || creating}
                     />
                     <p className="text-[11px] text-muted-foreground pl-1">
-                      Used for display purposes only. Auto-detected if valid
-                      token provided.
+                      Used for display purposes only. Auto-detected if valid token provided.
                     </p>
                   </div>
 
@@ -529,9 +502,9 @@ export function AntigravityTokenImport({
                     <div className="relative">
                       <textarea
                         value={token}
-                        onChange={e => {
-                          setToken(e.target.value)
-                          setValidationResult(null)
+                        onChange={(e) => {
+                          setToken(e.target.value);
+                          setValidationResult(null);
                         }}
                         placeholder="1//0xxx..."
                         className="w-full h-32 px-4 py-3 rounded-xl border border-border bg-card text-foreground placeholder:text-muted-foreground font-mono text-xs resize-none focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all"
@@ -571,14 +544,9 @@ export function AntigravityTokenImport({
                 {/* Error Message */}
                 {error && (
                   <div className="bg-error/5 border border-error/20 rounded-xl p-4 flex items-start gap-3 animate-in fade-in zoom-in-95">
-                    <AlertCircle
-                      size={20}
-                      className="text-error shrink-0 mt-0.5"
-                    />
+                    <AlertCircle size={20} className="text-error shrink-0 mt-0.5" />
                     <div>
-                      <p className="text-sm font-medium text-error">
-                        Validation Failed
-                      </p>
+                      <p className="text-sm font-medium text-error">Validation Failed</p>
                       <p className="text-xs text-error/80 mt-0.5">{error}</p>
                     </div>
                   </div>
@@ -613,8 +581,7 @@ export function AntigravityTokenImport({
                               <Zap
                                 size={10}
                                 className={
-                                  validationResult.quota.subscriptionTier ===
-                                  'ULTRA'
+                                  validationResult.quota.subscriptionTier === 'ULTRA'
                                     ? 'text-purple-500'
                                     : 'text-blue-500'
                                 }
@@ -654,5 +621,5 @@ export function AntigravityTokenImport({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/clients-config-section.tsx b/web/src/pages/providers/components/clients-config-section.tsx
index 795fce44..a29ed1ea 100644
--- a/web/src/pages/providers/components/clients-config-section.tsx
+++ b/web/src/pages/providers/components/clients-config-section.tsx
@@ -11,7 +11,7 @@ interface ClientsConfigSectionProps {
 }
 
 export function ClientsConfigSection({ clients, onUpdateClient }: ClientsConfigSectionProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -19,38 +19,45 @@ export function ClientsConfigSection({ clients, onUpdateClient }: ClientsConfigS
           <div
             key={client.id}
             className={`rounded-xl border transition-all duration-200 flex flex-col ${
-              client.enabled 
-                ? 'bg-card border-border shadow-sm' 
+              client.enabled
+                ? 'bg-card border-border shadow-sm'
                 : 'bg-muted/30 border-transparent opacity-80 hover:opacity-100 hover:bg-muted/50'
             }`}
           >
             <div className="flex items-center justify-between p-4 border-b border-transparent">
               <div className="flex items-center gap-3">
                 <ClientIcon type={client.id} size={32} />
-                <span className={`text-base font-semibold ${client.enabled ? 'text-foreground' : 'text-muted-foreground'}`}>
+                <span
+                  className={`text-base font-semibold ${client.enabled ? 'text-foreground' : 'text-muted-foreground'}`}
+                >
                   {client.name}
                 </span>
               </div>
               <div onClick={(e) => e.stopPropagation()}>
-                <Switch checked={client.enabled} onCheckedChange={(checked) => onUpdateClient(client.id, { enabled: checked })} />
+                <Switch
+                  checked={client.enabled}
+                  onCheckedChange={(checked) => onUpdateClient(client.id, { enabled: checked })}
+                />
               </div>
             </div>
-            
+
             {/* Expandable/Visible Content */}
-            <div className={`px-4 pb-4 transition-all duration-200 ${client.enabled ? 'opacity-100' : 'opacity-50 grayscale pointer-events-none'}`}>
-               <div className="bg-muted/50 rounded-lg p-3 border border-border/50">
-                  <label className="text-xs font-medium text-muted-foreground block mb-1.5 uppercase tracking-wide">
-                     Endpoint Override
-                  </label>
-                  <Input
-                    type="text"
-                    value={client.urlOverride}
-                    onChange={(e) => onUpdateClient(client.id, { urlOverride: e.target.value })}
-                    placeholder={t('common.default')}
-                    disabled={!client.enabled}
-                    className="text-sm w-full bg-card h-9"
-                  />
-               </div>
+            <div
+              className={`px-4 pb-4 transition-all duration-200 ${client.enabled ? 'opacity-100' : 'opacity-50 grayscale pointer-events-none'}`}
+            >
+              <div className="bg-muted/50 rounded-lg p-3 border border-border/50">
+                <label className="text-xs font-medium text-muted-foreground block mb-1.5 uppercase tracking-wide">
+                  Endpoint Override
+                </label>
+                <Input
+                  type="text"
+                  value={client.urlOverride}
+                  onChange={(e) => onUpdateClient(client.id, { urlOverride: e.target.value })}
+                  placeholder={t('common.default')}
+                  disabled={!client.enabled}
+                  className="text-sm w-full bg-card h-9"
+                />
+              </div>
             </div>
           </div>
         ))}
diff --git a/web/src/pages/providers/components/kiro-provider-view.tsx b/web/src/pages/providers/components/kiro-provider-view.tsx
index a93fd2cb..4b82281c 100644
--- a/web/src/pages/providers/components/kiro-provider-view.tsx
+++ b/web/src/pages/providers/components/kiro-provider-view.tsx
@@ -1,37 +1,29 @@
-import { useState, useEffect } from 'react'
-import {
-  Zap,
-  Mail,
-  ChevronLeft,
-  Trash2,
-  RefreshCw,
-  Clock,
-  AlertTriangle,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { ClientIcon } from '@/components/icons/client-icons'
-import type { Provider, KiroQuotaData } from '@/lib/transport'
-import { getTransport } from '@/lib/transport'
-import { KIRO_COLOR } from '../types'
+import { useState, useEffect } from 'react';
+import { Zap, Mail, ChevronLeft, Trash2, RefreshCw, Clock, AlertTriangle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ClientIcon } from '@/components/icons/client-icons';
+import type { Provider, KiroQuotaData } from '@/lib/transport';
+import { getTransport } from '@/lib/transport';
+import { KIRO_COLOR } from '../types';
 
 interface KiroProviderViewProps {
-  provider: Provider
-  onDelete: () => void
-  onClose: () => void
+  provider: Provider;
+  onDelete: () => void;
+  onClose: () => void;
 }
 
 // 配额条的颜色
 function getQuotaColor(percentage: number): string {
-  if (percentage >= 50) return 'bg-success'
-  if (percentage >= 20) return 'bg-warning'
-  return 'bg-error'
+  if (percentage >= 50) return 'bg-success';
+  if (percentage >= 20) return 'bg-warning';
+  return 'bg-error';
 }
 
 // 格式化重置天数
 function formatResetDays(days: number, t: (key: string) => string): string {
-  if (days <= 0) return t('proxy.comingSoon')
-  if (days === 1) return `1 ${t('common.day')}`
-  return `${days} ${t('common.days')}`
+  if (days <= 0) return t('proxy.comingSoon');
+  if (days === 1) return `1 ${t('common.day')}`;
+  return `${days} ${t('common.days')}`;
 }
 
 // 订阅等级徽章
@@ -39,7 +31,7 @@ function SubscriptionBadge({ type }: { type: string }) {
   const styles: Record<string, string> = {
     PRO: 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white',
     FREE: 'bg-gray-500/20 text-gray-400',
-  }
+  };
 
   return (
     <span
@@ -47,23 +39,20 @@ function SubscriptionBadge({ type }: { type: string }) {
     >
       {type || 'FREE'}
     </span>
-  )
+  );
 }
 
 // 配额卡片
 function QuotaCard({ quota }: { quota: KiroQuotaData }) {
-  const { t } = useTranslation()
-  const percentage = quota.total_limit > 0
-    ? Math.round((quota.available / quota.total_limit) * 100)
-    : 0
-  const color = getQuotaColor(percentage)
+  const { t } = useTranslation();
+  const percentage =
+    quota.total_limit > 0 ? Math.round((quota.available / quota.total_limit) * 100) : 0;
+  const color = getQuotaColor(percentage);
 
   return (
     <div className="bg-card border border-border rounded-xl p-6">
       <div className="flex items-center justify-between mb-4">
-        <span className="font-medium text-foreground text-lg">
-          Usage Quota
-        </span>
+        <span className="font-medium text-foreground text-lg">Usage Quota</span>
         <span className="text-sm text-muted-foreground flex items-center gap-1.5">
           <Clock size={14} />
           {t('proxy.resetsIn')} {formatResetDays(quota.days_until_reset, t)}
@@ -86,28 +75,20 @@ function QuotaCard({ quota }: { quota: KiroQuotaData }) {
       {/* Quota Details */}
       <div className="grid grid-cols-3 gap-4 pt-4 border-t border-border/50">
         <div className="text-center">
-          <div className="text-2xl font-bold text-foreground">
-            {quota.available.toFixed(1)}
-          </div>
+          <div className="text-2xl font-bold text-foreground">{quota.available.toFixed(1)}</div>
           <div className="text-xs text-muted-foreground uppercase tracking-wider mt-1">
             Available
           </div>
         </div>
         <div className="text-center">
-          <div className="text-2xl font-bold text-muted-foreground">
-            {quota.used.toFixed(1)}
-          </div>
-          <div className="text-xs text-muted-foreground uppercase tracking-wider mt-1">
-            Used
-          </div>
+          <div className="text-2xl font-bold text-muted-foreground">{quota.used.toFixed(1)}</div>
+          <div className="text-xs text-muted-foreground uppercase tracking-wider mt-1">Used</div>
         </div>
         <div className="text-center">
           <div className="text-2xl font-bold text-muted-foreground">
             {quota.total_limit.toFixed(1)}
           </div>
-          <div className="text-xs text-muted-foreground uppercase tracking-wider mt-1">
-            Total
-          </div>
+          <div className="text-xs text-muted-foreground uppercase tracking-wider mt-1">Total</div>
         </div>
       </div>
 
@@ -115,39 +96,36 @@ function QuotaCard({ quota }: { quota: KiroQuotaData }) {
       {quota.free_trial_status && (
         <div className="mt-4 pt-4 border-t border-border/50">
           <span className="text-xs text-muted-foreground">
-            Free Trial: <span className="text-emerald-500 font-medium">{quota.free_trial_status}</span>
+            Free Trial:{' '}
+            <span className="text-emerald-500 font-medium">{quota.free_trial_status}</span>
           </span>
         </div>
       )}
     </div>
-  )
+  );
 }
 
-export function KiroProviderView({
-  provider,
-  onDelete,
-  onClose,
-}: KiroProviderViewProps) {
-  const [quota, setQuota] = useState<KiroQuotaData | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+export function KiroProviderView({ provider, onDelete, onClose }: KiroProviderViewProps) {
+  const [quota, setQuota] = useState<KiroQuotaData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const fetchQuota = async () => {
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
-      const data = await getTransport().getKiroProviderQuota(provider.id)
-      setQuota(data)
+      const data = await getTransport().getKiroProviderQuota(provider.id);
+      setQuota(data);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch quota')
+      setError(err instanceof Error ? err.message : 'Failed to fetch quota');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
-    fetchQuota()
-  }, [provider.id]) // eslint-disable-line react-hooks/exhaustive-deps
+    fetchQuota();
+  }, [provider.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="flex flex-col h-full">
@@ -160,12 +138,8 @@ export function KiroProviderView({
             <ChevronLeft size={20} />
           </button>
           <div>
-            <h2 className="text-headline font-semibold text-foreground">
-              {provider.name}
-            </h2>
-            <p className="text-caption text-muted-foreground">
-              Kiro Provider
-            </p>
+            <h2 className="text-headline font-semibold text-foreground">{provider.name}</h2>
+            <p className="text-caption text-muted-foreground">Kiro Provider</p>
           </div>
         </div>
         <button
@@ -191,9 +165,7 @@ export function KiroProviderView({
                 </div>
                 <div>
                   <div className="flex items-center gap-3">
-                    <h3 className="text-xl font-bold text-foreground">
-                      {provider.name}
-                    </h3>
+                    <h3 className="text-xl font-bold text-foreground">{provider.name}</h3>
                     {quota?.subscription_type && (
                       <SubscriptionBadge type={quota.subscription_type} />
                     )}
@@ -230,18 +202,13 @@ export function KiroProviderView({
           {/* Quota Section */}
           <div>
             <div className="flex items-center justify-between mb-4 border-b border-border pb-2">
-              <h4 className="text-lg font-semibold text-foreground">
-                Usage Quota
-              </h4>
+              <h4 className="text-lg font-semibold text-foreground">Usage Quota</h4>
               <button
                 onClick={() => fetchQuota()}
                 disabled={loading}
                 className="btn bg-muted hover:bg-accent text-foreground flex items-center gap-2 text-sm"
               >
-                <RefreshCw
-                  size={14}
-                  className={loading ? 'animate-spin' : ''}
-                />
+                <RefreshCw size={14} className={loading ? 'animate-spin' : ''} />
                 Refresh
               </button>
             </div>
@@ -284,8 +251,7 @@ export function KiroProviderView({
 
             {quota?.last_updated && (
               <p className="text-xs text-muted-foreground mt-4 text-right">
-                Last updated:{' '}
-                {new Date(quota.last_updated * 1000).toLocaleString()}
+                Last updated: {new Date(quota.last_updated * 1000).toLocaleString()}
               </p>
             )}
           </div>
@@ -297,16 +263,14 @@ export function KiroProviderView({
             </h4>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
               {provider.supportedClientTypes?.length > 0 ? (
-                provider.supportedClientTypes.map(ct => (
+                provider.supportedClientTypes.map((ct) => (
                   <div
                     key={ct}
                     className="flex items-center gap-3 bg-card border border-border rounded-xl p-4 shadow-sm"
                   >
                     <ClientIcon type={ct} size={28} />
                     <div>
-                      <div className="text-sm font-semibold text-foreground capitalize">
-                        {ct}
-                      </div>
+                      <div className="text-sm font-semibold text-foreground capitalize">{ct}</div>
                       <div className="text-xs text-muted-foreground">Enabled</div>
                     </div>
                   </div>
@@ -321,5 +285,5 @@ export function KiroProviderView({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/kiro-token-import.tsx b/web/src/pages/providers/components/kiro-token-import.tsx
index b602a815..64ec1492 100644
--- a/web/src/pages/providers/components/kiro-token-import.tsx
+++ b/web/src/pages/providers/components/kiro-token-import.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState } from 'react';
 import {
   ChevronLeft,
   Loader2,
@@ -9,75 +9,71 @@ import {
   ShieldCheck,
   Zap,
   Ban,
-} from 'lucide-react'
-import { getTransport } from '@/lib/transport'
-import type { KiroTokenValidationResult, CreateProviderData } from '@/lib/transport'
-import { KIRO_COLOR } from '../types'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { useTranslation } from 'react-i18next'
+} from 'lucide-react';
+import { getTransport } from '@/lib/transport';
+import type { KiroTokenValidationResult, CreateProviderData } from '@/lib/transport';
+import { KIRO_COLOR } from '../types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useTranslation } from 'react-i18next';
 
 interface KiroTokenImportProps {
-  onBack: () => void
-  onCreateProvider: (data: CreateProviderData) => Promise<void>
+  onBack: () => void;
+  onCreateProvider: (data: CreateProviderData) => Promise<void>;
 }
 
-export function KiroTokenImport({
-  onBack,
-  onCreateProvider,
-}: KiroTokenImportProps) {
-  const { t } = useTranslation()
-  const [email, setEmail] = useState('')
-  const [token, setToken] = useState('')
-  const [validating, setValidating] = useState(false)
-  const [creating, setCreating] = useState(false)
-  const [validationResult, setValidationResult] =
-    useState<KiroTokenValidationResult | null>(null)
-  const [error, setError] = useState<string | null>(null)
+export function KiroTokenImport({ onBack, onCreateProvider }: KiroTokenImportProps) {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [token, setToken] = useState('');
+  const [validating, setValidating] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [validationResult, setValidationResult] = useState<KiroTokenValidationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   // 验证 token
   const handleValidate = async () => {
     if (token.trim() === '') {
-      setError('Please enter a refresh token')
-      return
+      setError('Please enter a refresh token');
+      return;
     }
 
-    setValidating(true)
-    setError(null)
-    setValidationResult(null)
+    setValidating(true);
+    setError(null);
+    setValidationResult(null);
 
     try {
-      const result = await getTransport().validateKiroSocialToken(token.trim())
-      setValidationResult(result)
+      const result = await getTransport().validateKiroSocialToken(token.trim());
+      setValidationResult(result);
       if (!result.valid) {
-        setError(result.error || t('provider.tokenValidationFailed'))
+        setError(result.error || t('provider.tokenValidationFailed'));
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('provider.validationFailed'))
+      setError(err instanceof Error ? err.message : t('provider.validationFailed'));
     } finally {
-      setValidating(false)
+      setValidating(false);
     }
-  }
+  };
 
   // 创建 provider
   const handleCreate = async () => {
     if (!validationResult?.valid) {
-      setError('Please validate the token first')
-      return
+      setError('Please validate the token first');
+      return;
     }
 
     // 不允许创建被封禁的账号
     if (validationResult.isBanned) {
-      setError('Cannot create provider for a banned account')
-      return
+      setError('Cannot create provider for a banned account');
+      return;
     }
 
-    setCreating(true)
-    setError(null)
+    setCreating(true);
+    setError(null);
 
     try {
       // 优先使用验证返回的邮箱，其次使用用户输入的邮箱
-      const finalEmail = validationResult.email || email.trim() || ''
+      const finalEmail = validationResult.email || email.trim() || '';
       const providerData: CreateProviderData = {
         type: 'kiro',
         name: finalEmail || 'Kiro Account',
@@ -89,16 +85,16 @@ export function KiroTokenImport({
             region: 'us-east-1',
           },
         },
-      }
-      await onCreateProvider(providerData)
+      };
+      await onCreateProvider(providerData);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create provider')
+      setError(err instanceof Error ? err.message : 'Failed to create provider');
     } finally {
-      setCreating(false)
+      setCreating(false);
     }
-  }
+  };
 
-  const isTokenValid = token.trim().length > 0
+  const isTokenValid = token.trim().length > 0;
 
   return (
     <div className="flex flex-col h-full bg-card">
@@ -127,9 +123,7 @@ export function KiroTokenImport({
         <div className="container max-w-2xl mx-auto py-8 px-6 space-y-8">
           {/* Hero Section */}
           <div className="text-center space-y-2 mb-8">
-            <h1 className="text-2xl font-bold text-foreground">
-              Import Kiro Social Token
-            </h1>
+            <h1 className="text-2xl font-bold text-foreground">Import Kiro Social Token</h1>
             <p className="text-muted-foreground mx-auto">
               Enter your Kiro Social refresh token to connect your account.
             </p>
@@ -143,9 +137,7 @@ export function KiroTokenImport({
                   <ShieldCheck size={18} className="text-foreground" />
                 </div>
                 <div>
-                  <h3 className="text-base font-semibold text-foreground">
-                    Credentials
-                  </h3>
+                  <h3 className="text-base font-semibold text-foreground">Credentials</h3>
                   <p className="text-xs text-muted-foreground">
                     Enter your Kiro Social account details
                   </p>
@@ -165,14 +157,13 @@ export function KiroTokenImport({
                 <Input
                   type="email"
                   value={email}
-                  onChange={e => setEmail(e.target.value)}
+                  onChange={(e) => setEmail(e.target.value)}
                   placeholder="e.g. user@example.com"
                   className="bg-card"
                   disabled={validating || creating}
                 />
                 <p className="text-[11px] text-muted-foreground pl-1">
-                  Used for display purposes only. Auto-detected from token if
-                  available.
+                  Used for display purposes only. Auto-detected from token if available.
                 </p>
               </div>
 
@@ -184,9 +175,9 @@ export function KiroTokenImport({
                 <div className="relative">
                   <textarea
                     value={token}
-                    onChange={e => {
-                      setToken(e.target.value)
-                      setValidationResult(null)
+                    onChange={(e) => {
+                      setToken(e.target.value);
+                      setValidationResult(null);
                     }}
                     placeholder="Paste your Kiro Social refresh token here..."
                     className="w-full h-32 px-4 py-3 rounded-xl border border-border bg-card text-foreground placeholder:text-muted-foreground font-mono text-xs resize-none focus:outline-none focus:ring-2 focus:ring-accent/50 transition-all"
@@ -226,14 +217,9 @@ export function KiroTokenImport({
             {/* Error Message */}
             {error && (
               <div className="bg-error/5 border border-error/20 rounded-xl p-4 flex items-start gap-3 animate-in fade-in zoom-in-95">
-                <AlertCircle
-                  size={20}
-                  className="text-error shrink-0 mt-0.5"
-                />
+                <AlertCircle size={20} className="text-error shrink-0 mt-0.5" />
                 <div>
-                  <p className="text-sm font-medium text-error">
-                    Validation Failed
-                  </p>
+                  <p className="text-sm font-medium text-error">Validation Failed</p>
                   <p className="text-xs text-error/80 mt-0.5">{error}</p>
                 </div>
               </div>
@@ -247,9 +233,7 @@ export function KiroTokenImport({
                     <Ban size={24} className="text-warning" />
                   </div>
                   <div className="flex-1 space-y-1">
-                    <div className="font-semibold text-foreground">
-                      Account Banned
-                    </div>
+                    <div className="font-semibold text-foreground">Account Banned</div>
                     <div className="text-sm text-muted-foreground">
                       This account has been banned and cannot be used.
                     </div>
@@ -271,9 +255,7 @@ export function KiroTokenImport({
                     <CheckCircle2 size={24} className="text-success" />
                   </div>
                   <div className="flex-1 space-y-1">
-                    <div className="font-semibold text-foreground">
-                      Token Verified Successfully
-                    </div>
+                    <div className="font-semibold text-foreground">Token Verified Successfully</div>
                     <div className="text-sm text-muted-foreground">
                       Ready to connect as{' '}
                       <span className="font-medium text-foreground">
@@ -322,11 +304,7 @@ export function KiroTokenImport({
             <div className="pt-4">
               <Button
                 onClick={handleCreate}
-                disabled={
-                  !validationResult?.valid ||
-                  validationResult.isBanned ||
-                  creating
-                }
+                disabled={!validationResult?.valid || validationResult.isBanned || creating}
                 size="lg"
                 className="w-full text-base shadow-lg shadow-accent/20 hover:shadow-accent/30 transition-all"
               >
@@ -344,5 +322,5 @@ export function KiroTokenImport({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/model-mapping-editor.tsx b/web/src/pages/providers/components/model-mapping-editor.tsx
index 7ba786b1..fdf9bccd 100644
--- a/web/src/pages/providers/components/model-mapping-editor.tsx
+++ b/web/src/pages/providers/components/model-mapping-editor.tsx
@@ -1,15 +1,15 @@
-import { useState } from 'react'
-import { Plus, Trash2, ArrowRight } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { ModelInput } from '@/components/ui/model-input'
+import { useState } from 'react';
+import { Plus, Trash2, ArrowRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { ModelInput } from '@/components/ui/model-input';
 
 interface ModelMappingEditorProps {
-  value: Record<string, string>
-  onChange: (value: Record<string, string>) => void
-  disabled?: boolean
+  value: Record<string, string>;
+  onChange: (value: Record<string, string>) => void;
+  disabled?: boolean;
   /** Only show Antigravity-supported models for target selection */
-  targetOnlyAntigravity?: boolean
+  targetOnlyAntigravity?: boolean;
 }
 
 export function ModelMappingEditor({
@@ -18,41 +18,46 @@ export function ModelMappingEditor({
   disabled = false,
   targetOnlyAntigravity = false,
 }: ModelMappingEditorProps) {
-  const { t } = useTranslation()
-  const [newFrom, setNewFrom] = useState('')
-  const [newTo, setNewTo] = useState('')
+  const { t } = useTranslation();
+  const [newFrom, setNewFrom] = useState('');
+  const [newTo, setNewTo] = useState('');
 
-  const entries = Object.entries(value)
+  const entries = Object.entries(value);
 
   // Target model providers filter
-  const targetProviders = targetOnlyAntigravity ? ['Antigravity' as const] : undefined
+  const targetProviders = targetOnlyAntigravity ? ['Antigravity' as const] : undefined;
 
   const handleAdd = () => {
-    if (!newFrom.trim() || !newTo.trim()) return
-    if (value[newFrom.trim()]) return // Already exists
+    if (!newFrom.trim() || !newTo.trim()) return;
+    if (value[newFrom.trim()]) return; // Already exists
 
     onChange({
       ...value,
       [newFrom.trim()]: newTo.trim(),
-    })
-    setNewFrom('')
-    setNewTo('')
-  }
+    });
+    setNewFrom('');
+    setNewTo('');
+  };
 
   const handleRemove = (key: string) => {
-    const newValue = { ...value }
-    delete newValue[key]
-    onChange(newValue)
-  }
+    const newValue = { ...value };
+    delete newValue[key];
+    onChange(newValue);
+  };
 
   const handleUpdate = (oldKey: string, newKey: string, newVal: string) => {
-    const newValue = { ...value }
-    if (oldKey !== newKey) {
-      delete newValue[oldKey]
+    const normalizedKey = newKey.trim();
+    const normalizedVal = newVal.trim();
+    if (!normalizedKey || !normalizedVal) return;
+    if (oldKey !== normalizedKey && value[normalizedKey]) return; // prevent overwrite
+
+    const newValue = { ...value };
+    if (oldKey !== normalizedKey) {
+      delete newValue[oldKey];
     }
-    newValue[newKey] = newVal
-    onChange(newValue)
-  }
+    newValue[normalizedKey] = normalizedVal;
+    onChange(newValue);
+  };
 
   return (
     <div className="space-y-3">
@@ -62,7 +67,7 @@ export function ModelMappingEditor({
             <div key={from} className="flex items-center gap-2">
               <ModelInput
                 value={from}
-                onChange={newKey => handleUpdate(from, newKey, to)}
+                onChange={(newKey) => handleUpdate(from, newKey, to)}
                 placeholder={t('modelMapping.requestModel')}
                 className="flex-1"
                 disabled={disabled}
@@ -70,7 +75,7 @@ export function ModelMappingEditor({
               <ArrowRight size={16} className="text-muted-foreground shrink-0" />
               <ModelInput
                 value={to}
-                onChange={newVal => handleUpdate(from, from, newVal)}
+                onChange={(newVal) => handleUpdate(from, from, newVal)}
                 placeholder={t('modelMapping.mappedModel')}
                 className="flex-1"
                 disabled={disabled}
@@ -123,10 +128,10 @@ export function ModelMappingEditor({
 
       {entries.length === 0 && (
         <p className="text-xs text-muted-foreground">
-          No model mappings configured. Add mappings to transform request models
-          before sending to upstream.
+          No model mappings configured. Add mappings to transform request models before sending to
+          upstream.
         </p>
       )}
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/provider-card.tsx b/web/src/pages/providers/components/provider-card.tsx
index b7839104..899d2b07 100644
--- a/web/src/pages/providers/components/provider-card.tsx
+++ b/web/src/pages/providers/components/provider-card.tsx
@@ -1,43 +1,27 @@
-import {
-  Wand2,
-  Mail,
-  Globe,
-  Server,
-  ChevronRight,
-  Snowflake,
-  X,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { ClientIcon } from '@/components/icons/client-icons'
-import type { Provider } from '@/lib/transport'
-import { ANTIGRAVITY_COLOR } from '../types'
-import { useCooldowns } from '@/hooks/use-cooldowns'
+import { Wand2, Mail, Globe, Server, ChevronRight, Snowflake, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ClientIcon } from '@/components/icons/client-icons';
+import type { Provider } from '@/lib/transport';
+import { ANTIGRAVITY_COLOR } from '../types';
+import { useCooldowns } from '@/hooks/use-cooldowns';
 
 interface ProviderCardProps {
-  provider: Provider
-  onClick: () => void
-  streamingCount: number
+  provider: Provider;
+  onClick: () => void;
+  streamingCount: number;
 }
 
-export function AntigravityProviderCard({
-  provider,
-  onClick,
-  streamingCount,
-}: ProviderCardProps) {
-  const { t } = useTranslation()
-  const email = provider.config?.antigravity?.email || t('provider.unknown')
-  const {
-    getCooldownForProvider,
-    formatRemaining,
-    clearCooldown,
-    isClearingCooldown,
-  } = useCooldowns()
-  const cooldown = getCooldownForProvider(provider.id)
+export function AntigravityProviderCard({ provider, onClick, streamingCount }: ProviderCardProps) {
+  const { t } = useTranslation();
+  const email = provider.config?.antigravity?.email || t('provider.unknown');
+  const { getCooldownForProvider, formatRemaining, clearCooldown, isClearingCooldown } =
+    useCooldowns();
+  const cooldown = getCooldownForProvider(provider.id);
 
   const handleClearCooldown = (e: React.MouseEvent) => {
-    e.stopPropagation() // Prevent triggering card onClick
-    clearCooldown(provider.id)
-  }
+    e.stopPropagation(); // Prevent triggering card onClick
+    clearCooldown(provider.id);
+  };
 
   return (
     <div
@@ -49,9 +33,7 @@ export function AntigravityProviderCard({
       {cooldown && (
         <div className="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-1 rounded-md bg-cyan-500/20 border border-cyan-500/30">
           <Snowflake size={14} className="text-cyan-400 animate-pulse" />
-          <span className="text-xs font-medium text-cyan-300">
-            {formatRemaining(cooldown)}
-          </span>
+          <span className="text-xs font-medium text-cyan-300">{formatRemaining(cooldown)}</span>
           <button
             onClick={handleClearCooldown}
             disabled={isClearingCooldown}
@@ -93,9 +75,7 @@ export function AntigravityProviderCard({
 
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between mb-1">
-            <h4 className="text-sm font-medium text-foreground truncate">
-              {provider.name}
-            </h4>
+            <h4 className="text-sm font-medium text-foreground truncate">{provider.name}</h4>
             <ChevronRight
               size={16}
               className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
@@ -111,7 +91,7 @@ export function AntigravityProviderCard({
             <span className="text-xs text-text-muted">{t('provider.clients')}</span>
             <div className="flex items-center gap-1">
               {provider.supportedClientTypes?.length > 0 ? (
-                provider.supportedClientTypes.map(ct => (
+                provider.supportedClientTypes.map((ct) => (
                   <ClientIcon key={ct} type={ct} size={18} />
                 ))
               ) : (
@@ -126,36 +106,28 @@ export function AntigravityProviderCard({
         <div className="absolute top-3 right-3 w-2 h-2 rounded-full bg-emerald-400" />
       )}
     </div>
-  )
+  );
 }
 
-export function CustomProviderCard({
-  provider,
-  onClick,
-  streamingCount,
-}: ProviderCardProps) {
-  const { t } = useTranslation()
-  const {
-    getCooldownForProvider,
-    formatRemaining,
-    clearCooldown,
-    isClearingCooldown,
-  } = useCooldowns()
-  const cooldown = getCooldownForProvider(provider.id)
+export function CustomProviderCard({ provider, onClick, streamingCount }: ProviderCardProps) {
+  const { t } = useTranslation();
+  const { getCooldownForProvider, formatRemaining, clearCooldown, isClearingCooldown } =
+    useCooldowns();
+  const cooldown = getCooldownForProvider(provider.id);
 
   const getDisplayUrl = () => {
-    if (provider.config?.custom?.baseURL) return provider.config.custom.baseURL
+    if (provider.config?.custom?.baseURL) return provider.config.custom.baseURL;
     for (const ct of provider.supportedClientTypes || []) {
-      const url = provider.config?.custom?.clientBaseURL?.[ct]
-      if (url) return url
+      const url = provider.config?.custom?.clientBaseURL?.[ct];
+      if (url) return url;
     }
-    return t('provider.notConfigured')
-  }
+    return t('provider.notConfigured');
+  };
 
   const handleClearCooldown = (e: React.MouseEvent) => {
-    e.stopPropagation() // Prevent triggering card onClick
-    clearCooldown(provider.id)
-  }
+    e.stopPropagation(); // Prevent triggering card onClick
+    clearCooldown(provider.id);
+  };
 
   return (
     <div
@@ -167,9 +139,7 @@ export function CustomProviderCard({
       {cooldown && (
         <div className="absolute top-3 right-3 flex items-center gap-1.5 px-2 py-1 rounded-md bg-cyan-500/20 border border-cyan-500/30">
           <Snowflake size={14} className="text-cyan-400 animate-pulse" />
-          <span className="text-xs font-medium text-cyan-300">
-            {formatRemaining(cooldown)}
-          </span>
+          <span className="text-xs font-medium text-cyan-300">{formatRemaining(cooldown)}</span>
           <button
             onClick={handleClearCooldown}
             disabled={isClearingCooldown}
@@ -211,9 +181,7 @@ export function CustomProviderCard({
 
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between mb-1">
-            <h4 className="text-sm font-medium text-foreground truncate">
-              {provider.name}
-            </h4>
+            <h4 className="text-sm font-medium text-foreground truncate">{provider.name}</h4>
             <ChevronRight
               size={16}
               className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
@@ -229,7 +197,7 @@ export function CustomProviderCard({
             <span className="text-xs text-text-muted">{t('provider.clients')}</span>
             <div className="flex items-center gap-1">
               {provider.supportedClientTypes?.length > 0 ? (
-                provider.supportedClientTypes.map(ct => (
+                provider.supportedClientTypes.map((ct) => (
                   <ClientIcon key={ct} type={ct} size={18} />
                 ))
               ) : (
@@ -244,5 +212,5 @@ export function CustomProviderCard({
         <div className="absolute top-3 right-3 w-2 h-2 rounded-full bg-emerald-400" />
       )}
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/provider-create-flow.tsx b/web/src/pages/providers/components/provider-create-flow.tsx
index 5eef9088..587555cd 100644
--- a/web/src/pages/providers/components/provider-create-flow.tsx
+++ b/web/src/pages/providers/components/provider-create-flow.tsx
@@ -1,34 +1,32 @@
-import { useState } from 'react'
-import { Globe, ChevronLeft, Key, Check } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { useCreateProvider } from '@/hooks/queries'
-import type { ClientType, CreateProviderData } from '@/lib/transport'
+import { useState } from 'react';
+import { Globe, ChevronLeft, Key, Check } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useCreateProvider } from '@/hooks/queries';
+import type { ClientType, CreateProviderData } from '@/lib/transport';
 import {
   quickTemplates,
   defaultClients,
   type ClientConfig,
   type ProviderFormData,
   type CreateStep,
-} from '../types'
-import { ClientsConfigSection } from './clients-config-section'
-import { SelectTypeStep } from './select-type-step'
-import { AntigravityTokenImport } from './antigravity-token-import'
-import { KiroTokenImport } from './kiro-token-import'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
+} from '../types';
+import { ClientsConfigSection } from './clients-config-section';
+import { SelectTypeStep } from './select-type-step';
+import { AntigravityTokenImport } from './antigravity-token-import';
+import { KiroTokenImport } from './kiro-token-import';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 
 interface ProviderCreateFlowProps {
-  onClose: () => void
+  onClose: () => void;
 }
 
 export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
-  const { t } = useTranslation()
-  const [step, setStep] = useState<CreateStep>('select-type')
-  const [saving, setSaving] = useState(false)
-  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>(
-    'idle'
-  )
-  const createProvider = useCreateProvider()
+  const { t } = useTranslation();
+  const [step, setStep] = useState<CreateStep>('select-type');
+  const [saving, setSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const createProvider = useCreateProvider();
 
   const [formData, setFormData] = useState<ProviderFormData>({
     type: 'custom',
@@ -37,75 +35,67 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
     baseURL: '',
     apiKey: '',
     clients: [...defaultClients],
-  })
+  });
 
   const selectType = (type: 'custom' | 'antigravity' | 'kiro') => {
-    setFormData(prev => ({ ...prev, type }))
+    setFormData((prev) => ({ ...prev, type }));
     if (type === 'antigravity') {
-      setStep('antigravity-import')
+      setStep('antigravity-import');
     } else if (type === 'kiro') {
-      setStep('kiro-import')
+      setStep('kiro-import');
     }
-  }
+  };
 
   const applyTemplate = (templateId: string) => {
-    const template = quickTemplates.find(t => t.id === templateId)
+    const template = quickTemplates.find((t) => t.id === templateId);
     if (template) {
-      const updatedClients = defaultClients.map(client => {
-        const isSupported = template.supportedClients.includes(client.id)
-        const baseURL = template.clientBaseURLs[client.id] || ''
-        return { ...client, enabled: isSupported, urlOverride: baseURL }
-      })
+      const updatedClients = defaultClients.map((client) => {
+        const isSupported = template.supportedClients.includes(client.id);
+        const baseURL = template.clientBaseURLs[client.id] || '';
+        return { ...client, enabled: isSupported, urlOverride: baseURL };
+      });
 
-      setFormData(prev => ({
+      setFormData((prev) => ({
         ...prev,
         selectedTemplate: templateId,
         name: template.name,
         clients: updatedClients,
-      }))
+      }));
 
-      setStep('custom-config')
+      setStep('custom-config');
     }
-  }
+  };
 
-  const updateClient = (
-    clientId: ClientType,
-    updates: Partial<ClientConfig>
-  ) => {
-    setFormData(prev => ({
+  const updateClient = (clientId: ClientType, updates: Partial<ClientConfig>) => {
+    setFormData((prev) => ({
       ...prev,
-      clients: prev.clients.map(c =>
-        c.id === clientId ? { ...c, ...updates } : c
-      ),
-    }))
-  }
+      clients: prev.clients.map((c) => (c.id === clientId ? { ...c, ...updates } : c)),
+    }));
+  };
 
   const isValid = () => {
-    if (!formData.name.trim()) return false
-    if (!formData.apiKey.trim()) return false
-    const hasEnabledClient = formData.clients.some(c => c.enabled)
+    if (!formData.name.trim()) return false;
+    if (!formData.apiKey.trim()) return false;
+    const hasEnabledClient = formData.clients.some((c) => c.enabled);
     const hasUrl =
-      formData.baseURL.trim() ||
-      formData.clients.some(c => c.enabled && c.urlOverride.trim())
-    return hasEnabledClient && hasUrl
-  }
+      formData.baseURL.trim() || formData.clients.some((c) => c.enabled && c.urlOverride.trim());
+    return hasEnabledClient && hasUrl;
+  };
 
   const handleSave = async () => {
-    if (!isValid()) return
+    if (!isValid()) return;
 
-    setSaving(true)
-    setSaveStatus('idle')
+    setSaving(true);
+    setSaveStatus('idle');
 
     try {
-      const supportedClientTypes = formData.clients
-        .filter(c => c.enabled)
-        .map(c => c.id)
-      const clientBaseURL: Partial<Record<ClientType, string>> = {}
-      formData.clients.forEach(c => {
+      const supportedClientTypes = formData.clients.filter((c) => c.enabled).map((c) => c.id);
+      const clientBaseURL: Partial<Record<ClientType, string>> = {};
+      formData.clients.forEach((c) => {
         if (c.enabled && c.urlOverride) {
-          clientBaseURL[c.id] = c.urlOverride
+          clientBaseURL[c.id] = c.urlOverride;
         }
-      })
+      });
 
       const data: CreateProviderData = {
         type: 'custom',
@@ -114,31 +104,30 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
           custom: {
             baseURL: formData.baseURL,
             apiKey: formData.apiKey,
-            clientBaseURL:
-              Object.keys(clientBaseURL).length > 0 ? clientBaseURL : undefined,
+            clientBaseURL: Object.keys(clientBaseURL).length > 0 ? clientBaseURL : undefined,
           },
         },
         supportedClientTypes,
-      }
+      };
 
-      await createProvider.mutateAsync(data)
-      setSaveStatus('success')
-      setTimeout(() => onClose(), 500)
+      await createProvider.mutateAsync(data);
+      setSaveStatus('success');
+      setTimeout(() => onClose(), 500);
     } catch (error) {
-      console.error('Failed to create provider:', error)
-      setSaveStatus('error')
+      console.error('Failed to create provider:', error);
+      setSaveStatus('error');
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   const handleBack = () => {
     if (step === 'custom-config' || step === 'antigravity-import' || step === 'kiro-import') {
-      setStep('select-type')
+      setStep('select-type');
     } else {
-      onClose()
+      onClose();
     }
-  }
+  };
 
   if (step === 'select-type') {
     return (
@@ -149,35 +138,28 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
         onSkipToConfig={() => setStep('custom-config')}
         onBack={handleBack}
       />
-    )
+    );
   }
 
   if (step === 'antigravity-import') {
-    const handleCreateAntigravityProvider = async (
-      data: CreateProviderData
-    ) => {
-      await createProvider.mutateAsync(data)
-      onClose()
-    }
+    const handleCreateAntigravityProvider = async (data: CreateProviderData) => {
+      await createProvider.mutateAsync(data);
+      onClose();
+    };
     return (
       <AntigravityTokenImport
         onBack={handleBack}
         onCreateProvider={handleCreateAntigravityProvider}
       />
-    )
+    );
   }
 
   if (step === 'kiro-import') {
     const handleCreateKiroProvider = async (data: CreateProviderData) => {
-      await createProvider.mutateAsync(data)
-      onClose()
-    }
-    return (
-      <KiroTokenImport
-        onBack={handleBack}
-        onCreateProvider={handleCreateKiroProvider}
-      />
-    )
+      await createProvider.mutateAsync(data);
+      onClose();
+    };
+    return <KiroTokenImport onBack={handleBack} onCreateProvider={handleCreateKiroProvider} />;
   }
 
   // Custom: Configuration
@@ -201,11 +183,7 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
           <Button onClick={onClose} variant={'secondary'}>
             {t('common.cancel')}
           </Button>
-          <Button
-            onClick={handleSave}
-            disabled={saving || !isValid()}
-            variant={'default'}
-          >
+          <Button onClick={handleSave} disabled={saving || !isValid()} variant={'default'}>
             {saving ? (
               t('common.saving')
             ) : saveStatus === 'success' ? (
@@ -234,14 +212,11 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
                 <Input
                   type="text"
                   value={formData.name}
-                  onChange={e =>
-                    setFormData(prev => ({ ...prev, name: e.target.value }))
-                  }
+                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                   placeholder={t('provider.namePlaceholder')}
                   className="w-full"
                 />
               </div>
-
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <label className="text-sm font-medium text-foreground block mb-2">
@@ -253,8 +228,8 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
                   <Input
                     type="text"
                     value={formData.baseURL}
-                    onChange={e =>
-                      setFormData(prev => ({
+                    onChange={(e) =>
+                      setFormData((prev) => ({
                         ...prev,
                         baseURL: e.target.value,
                       }))
@@ -277,9 +252,7 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
                   <Input
                     type="password"
                     value={formData.apiKey}
-                    onChange={e =>
-                      setFormData(prev => ({ ...prev, apiKey: e.target.value }))
-                    }
+                    onChange={(e) => setFormData((prev) => ({ ...prev, apiKey: e.target.value }))}
                     placeholder={t('provider.keyPlaceholder')}
                     className="w-full"
                   />
@@ -292,10 +265,7 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
             <h3 className="text-lg font-semibold text-text-primary border-b border-border pb-2">
               {t('provider.clientConfig')}
             </h3>
-            <ClientsConfigSection
-              clients={formData.clients}
-              onUpdateClient={updateClient}
-            />
+            <ClientsConfigSection clients={formData.clients} onUpdateClient={updateClient} />
           </div>
 
           {saveStatus === 'error' && (
@@ -307,5 +277,5 @@ export function ProviderCreateFlow({ onClose }: ProviderCreateFlowProps) {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/provider-edit-flow.tsx b/web/src/pages/providers/components/provider-edit-flow.tsx
index 214cc8b9..918e1cf1 100644
--- a/web/src/pages/providers/components/provider-edit-flow.tsx
+++ b/web/src/pages/providers/components/provider-edit-flow.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react'
-import { Globe, ChevronLeft, Key, Check, Trash2 } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react';
+import { Globe, ChevronLeft, Key, Check, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import {
   Dialog,
   DialogContent,
@@ -8,93 +8,82 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
-import { useUpdateProvider, useDeleteProvider } from '@/hooks/queries'
-import type { Provider, ClientType, CreateProviderData } from '@/lib/transport'
-import { defaultClients, type ClientConfig } from '../types'
-import { ClientsConfigSection } from './clients-config-section'
-import { AntigravityProviderView } from './antigravity-provider-view'
-import { KiroProviderView } from './kiro-provider-view'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
+} from '@/components/ui/dialog';
+import { useUpdateProvider, useDeleteProvider } from '@/hooks/queries';
+import type { Provider, ClientType, CreateProviderData } from '@/lib/transport';
+import { defaultClients, type ClientConfig } from '../types';
+import { ClientsConfigSection } from './clients-config-section';
+import { AntigravityProviderView } from './antigravity-provider-view';
+import { KiroProviderView } from './kiro-provider-view';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 
 interface ProviderEditFlowProps {
-  provider: Provider
-  onClose: () => void
+  provider: Provider;
+  onClose: () => void;
 }
 
 type EditFormData = {
-  name: string
-  baseURL: string
-  apiKey: string
-  clients: ClientConfig[]
-}
+  name: string;
+  baseURL: string;
+  apiKey: string;
+  clients: ClientConfig[];
+};
 
 export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
-  const { t } = useTranslation()
-  const [saving, setSaving] = useState(false)
-  const [deleting, setDeleting] = useState(false)
-  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>(
-    'idle'
-  )
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const updateProvider = useUpdateProvider()
-  const deleteProvider = useDeleteProvider()
+  const { t } = useTranslation();
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const updateProvider = useUpdateProvider();
+  const deleteProvider = useDeleteProvider();
 
   const initClients = (): ClientConfig[] => {
-    const supportedTypes = provider.supportedClientTypes || []
-    return defaultClients.map(client => {
-      const isEnabled = supportedTypes.includes(client.id)
-      const urlOverride =
-        provider.config?.custom?.clientBaseURL?.[client.id] || ''
-      return { ...client, enabled: isEnabled, urlOverride }
-    })
-  }
+    const supportedTypes = provider.supportedClientTypes || [];
+    return defaultClients.map((client) => {
+      const isEnabled = supportedTypes.includes(client.id);
+      const urlOverride = provider.config?.custom?.clientBaseURL?.[client.id] || '';
+      return { ...client, enabled: isEnabled, urlOverride };
+    });
+  };
 
   const [formData, setFormData] = useState<EditFormData>({
     name: provider.name,
     baseURL: provider.config?.custom?.baseURL || '',
     apiKey: provider.config?.custom?.apiKey || '',
     clients: initClients(),
-  })
+  });
 
-  const updateClient = (
-    clientId: ClientType,
-    updates: Partial<ClientConfig>
-  ) => {
-    setFormData(prev => ({
+  const updateClient = (clientId: ClientType, updates: Partial<ClientConfig>) => {
+    setFormData((prev) => ({
       ...prev,
-      clients: prev.clients.map(c =>
-        c.id === clientId ? { ...c, ...updates } : c
-      ),
-    }))
-  }
+      clients: prev.clients.map((c) => (c.id === clientId ? { ...c, ...updates } : c)),
+    }));
+  };
 
   const isValid = () => {
-    if (!formData.name.trim()) return false
-    const hasEnabledClient = formData.clients.some(c => c.enabled)
+    if (!formData.name.trim()) return false;
+    const hasEnabledClient = formData.clients.some((c) => c.enabled);
     const hasUrl =
-      formData.baseURL.trim() ||
-      formData.clients.some(c => c.enabled && c.urlOverride.trim())
-    return hasEnabledClient && hasUrl
-  }
+      formData.baseURL.trim() || formData.clients.some((c) => c.enabled && c.urlOverride.trim());
+    return hasEnabledClient && hasUrl;
+  };
 
   const handleSave = async () => {
-    if (!isValid()) return
+    if (!isValid()) return;
 
-    setSaving(true)
-    setSaveStatus('idle')
+    setSaving(true);
+    setSaveStatus('idle');
 
     try {
-      const supportedClientTypes = formData.clients
-        .filter(c => c.enabled)
-        .map(c => c.id)
-      const clientBaseURL: Partial<Record<ClientType, string>> = {}
-      formData.clients.forEach(c => {
+      const supportedClientTypes = formData.clients.filter((c) => c.enabled).map((c) => c.id);
+      const clientBaseURL: Partial<Record<ClientType, string>> = {};
+      formData.clients.forEach((c) => {
         if (c.enabled && c.urlOverride) {
-          clientBaseURL[c.id] = c.urlOverride
+          clientBaseURL[c.id] = c.urlOverride;
         }
-      })
+      });
 
       const data: Partial<CreateProviderData> = {
         name: formData.name,
@@ -103,36 +92,35 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
           custom: {
             baseURL: formData.baseURL,
             apiKey: formData.apiKey || provider.config?.custom?.apiKey || '',
-            clientBaseURL:
-              Object.keys(clientBaseURL).length > 0 ? clientBaseURL : undefined,
+            clientBaseURL: Object.keys(clientBaseURL).length > 0 ? clientBaseURL : undefined,
           },
         },
         supportedClientTypes,
-      }
+      };
 
-      await updateProvider.mutateAsync({ id: Number(provider.id), data })
-      setSaveStatus('success')
-      setTimeout(() => onClose(), 500)
+      await updateProvider.mutateAsync({ id: Number(provider.id), data });
+      setSaveStatus('success');
+      setTimeout(() => onClose(), 500);
     } catch (error) {
-      console.error('Failed to update provider:', error)
-      setSaveStatus('error')
+      console.error('Failed to update provider:', error);
+      setSaveStatus('error');
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   const handleDelete = async () => {
-    setDeleting(true)
+    setDeleting(true);
     try {
-      await deleteProvider.mutateAsync(Number(provider.id))
-      onClose()
+      await deleteProvider.mutateAsync(Number(provider.id));
+      onClose();
     } catch (error) {
-      console.error('Failed to delete provider:', error)
+      console.error('Failed to delete provider:', error);
     } finally {
-      setDeleting(false)
-      setShowDeleteConfirm(false)
+      setDeleting(false);
+      setShowDeleteConfirm(false);
     }
-  }
+  };
 
   // Antigravity provider (read-only for now)
   if (provider.type === 'antigravity') {
@@ -151,7 +139,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
           onCancel={() => setShowDeleteConfirm(false)}
         />
       </>
-    )
+    );
   }
 
   // Kiro provider
@@ -171,7 +159,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
           onCancel={() => setShowDeleteConfirm(false)}
         />
       </>
-    )
+    );
   }
 
   // Custom provider edit form
@@ -183,30 +171,21 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
             <ChevronLeft size={20} />
           </Button>
           <div>
-            <h2 className="text-headline font-semibold text-foreground">
-              Edit Provider
-            </h2>
+            <h2 className="text-headline font-semibold text-foreground">Edit Provider</h2>
             <p className="text-caption text-muted-foreground">
               Update your custom provider settings
             </p>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <Button
-            onClick={() => setShowDeleteConfirm(true)}
-            variant={'destructive'}
-          >
+          <Button onClick={() => setShowDeleteConfirm(true)} variant={'destructive'}>
             <Trash2 size={14} />
             Delete
           </Button>
           <Button onClick={onClose} variant={'secondary'}>
             Cancel
           </Button>
-          <Button
-            onClick={handleSave}
-            disabled={saving || !isValid()}
-            variant={'default'}
-          >
+          <Button onClick={handleSave} disabled={saving || !isValid()} variant={'default'}>
             {saving ? (
               t('common.saving')
             ) : saveStatus === 'success' ? (
@@ -235,9 +214,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
                 <Input
                   type="text"
                   value={formData.name}
-                  onChange={e =>
-                    setFormData(prev => ({ ...prev, name: e.target.value }))
-                  }
+                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                   placeholder={t('provider.namePlaceholder')}
                   className="w-full"
                 />
@@ -254,8 +231,8 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
                   <Input
                     type="text"
                     value={formData.baseURL}
-                    onChange={e =>
-                      setFormData(prev => ({
+                    onChange={(e) =>
+                      setFormData((prev) => ({
                         ...prev,
                         baseURL: e.target.value,
                       }))
@@ -278,9 +255,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
                   <Input
                     type="password"
                     value={formData.apiKey}
-                    onChange={e =>
-                      setFormData(prev => ({ ...prev, apiKey: e.target.value }))
-                    }
+                    onChange={(e) => setFormData((prev) => ({ ...prev, apiKey: e.target.value }))}
                     placeholder={t('provider.keyPlaceholder')}
                     className="w-full"
                   />
@@ -293,17 +268,13 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
             <h3 className="text-lg font-semibold text-foreground border-b border-border pb-2">
               2. Client Configuration
             </h3>
-            <ClientsConfigSection
-              clients={formData.clients}
-              onUpdateClient={updateClient}
-            />
+            <ClientsConfigSection clients={formData.clients} onUpdateClient={updateClient} />
           </div>
 
           {saveStatus === 'error' && (
             <div className="p-4 bg-error/10 border border-error/30 rounded-lg text-sm text-error flex items-center gap-2">
               <div className="w-1.5 h-1.5 rounded-full bg-error" />
-              Failed to update provider. Please check your connection and try
-              again.
+              Failed to update provider. Please check your connection and try again.
             </div>
           )}
         </div>
@@ -317,7 +288,7 @@ export function ProviderEditFlow({ provider, onClose }: ProviderEditFlowProps) {
         onCancel={() => setShowDeleteConfirm(false)}
       />
     </div>
-  )
+  );
 }
 
 function DeleteConfirmModal({
@@ -327,13 +298,13 @@ function DeleteConfirmModal({
   onConfirm,
   onCancel,
 }: {
-  providerName: string
-  deleting: boolean
-  open: boolean
-  onConfirm: () => void
-  onCancel: () => void
+  providerName: string;
+  deleting: boolean;
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
 }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onCancel()}>
       <DialogContent className="w-[400px]">
@@ -341,26 +312,19 @@ function DeleteConfirmModal({
           <DialogTitle>Delete Provider?</DialogTitle>
           <DialogDescription>
             Are you sure you want to delete{' '}
-            <span className="font-medium text-foreground">
-              "{providerName}"
-            </span>
-            ? This action cannot be undone.
+            <span className="font-medium text-foreground">"{providerName}"</span>? This action
+            cannot be undone.
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <Button onClick={onCancel} variant={'secondary'} className="px-4">
             Cancel
           </Button>
-          <Button
-            onClick={onConfirm}
-            disabled={deleting}
-            variant={'destructive'}
-            className="px-4"
-          >
+          <Button onClick={onConfirm} disabled={deleting} variant={'destructive'} className="px-4">
             {deleting ? t('common.deleting') : t('common.delete')}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/provider-row.tsx b/web/src/pages/providers/components/provider-row.tsx
index 5593cff5..9cda7569 100644
--- a/web/src/pages/providers/components/provider-row.tsx
+++ b/web/src/pages/providers/components/provider-row.tsx
@@ -1,104 +1,100 @@
-import {
-  ChevronRight,
-  Activity,
-  Mail,
-  Globe,
-} from 'lucide-react'
-import { ClientIcon } from '@/components/icons/client-icons'
-import { StreamingBadge } from '@/components/ui/streaming-badge'
-import type {
-  Provider,
-  ProviderStats,
-  AntigravityQuotaData,
-  KiroQuotaData,
-} from '@/lib/transport'
-import { getProviderTypeConfig } from '../types'
-import { cn } from '@/lib/utils'
-import { useAntigravityQuota, useKiroQuota } from '@/hooks/queries'
-import { useTranslation } from 'react-i18next'
+import { ChevronRight, Activity, Mail, Globe } from 'lucide-react';
+import { ClientIcon } from '@/components/icons/client-icons';
+import { StreamingBadge } from '@/components/ui/streaming-badge';
+import type { Provider, ProviderStats, AntigravityQuotaData, KiroQuotaData } from '@/lib/transport';
+import { getProviderTypeConfig } from '../types';
+import { cn } from '@/lib/utils';
+import { useAntigravityQuota, useKiroQuota } from '@/hooks/queries';
+import { useTranslation } from 'react-i18next';
 
 // 格式化 Token 数量
 function formatTokens(count: number): string {
   if (count >= 1_000_000) {
-    return `${(count / 1_000_000).toFixed(1)}M`
+    return `${(count / 1_000_000).toFixed(1)}M`;
   }
   if (count >= 1_000) {
-    return `${(count / 1_000).toFixed(1)}K`
+    return `${(count / 1_000).toFixed(1)}K`;
   }
-  return count.toString()
+  return count.toString();
 }
 
 // 格式化成本 (微美元 → 美元)
 function formatCost(microUsd: number): string {
-  const usd = microUsd / 1_000_000
+  const usd = microUsd / 1_000_000;
   if (usd >= 1) {
-    return `$${usd.toFixed(2)}`
+    return `$${usd.toFixed(2)}`;
   }
   if (usd >= 0.01) {
-    return `$${usd.toFixed(3)}`
+    return `$${usd.toFixed(3)}`;
   }
-  return `$${usd.toFixed(4)}`
+  return `$${usd.toFixed(4)}`;
 }
 
 interface ProviderRowProps {
-  provider: Provider
-  stats?: ProviderStats
-  streamingCount: number
-  onClick: () => void
+  provider: Provider;
+  stats?: ProviderStats;
+  streamingCount: number;
+  onClick: () => void;
 }
 
 // 获取 Claude 模型额度百分比和重置时间
 function getClaudeQuotaInfo(
-  quota: AntigravityQuotaData | undefined
+  quota: AntigravityQuotaData | undefined,
 ): { percentage: number; resetTime: string } | null {
-  if (!quota || quota.isForbidden || !quota.models) return null
-  const claudeModel = quota.models.find(m => m.name.includes('claude'))
-  if (!claudeModel) return null
+  if (!quota || quota.isForbidden || !quota.models) return null;
+  const claudeModel = quota.models.find((m) => m.name.includes('claude'));
+  if (!claudeModel) return null;
   return {
     percentage: claudeModel.percentage,
     resetTime: claudeModel.resetTime,
-  }
+  };
 }
 
 // 格式化重置时间
 function formatResetTime(resetTime: string, t: (key: string) => string): string {
   try {
-    const reset = new Date(resetTime)
-    const now = new Date()
-    const diff = reset.getTime() - now.getTime()
-    
-    if (diff <= 0) return t('proxy.comingSoon')
+    const reset = new Date(resetTime);
+    const now = new Date();
+    const diff = reset.getTime() - now.getTime();
+
+    if (diff <= 0) return t('proxy.comingSoon');
 
-    const hours = Math.floor(diff / (1000 * 60 * 60))
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
 
     if (hours > 24) {
-      const days = Math.floor(hours / 24)
-      return `${days}d`
+      const days = Math.floor(hours / 24);
+      return `${days}d`;
     }
     if (hours > 0) {
-      return `${hours}h`
+      return `${hours}h`;
     }
-    return `${minutes}m`
+    return `${minutes}m`;
   } catch {
-    return '-'
+    return '-';
   }
 }
 
 // 格式化 Kiro 重置天数
 function formatKiroResetDays(days: number, t: (key: string) => string): string {
-  if (days <= 0) return t('proxy.comingSoon')
-  if (days === 1) return '1d'
-  return `${days}d`
+  if (days <= 0) return t('proxy.comingSoon');
+  if (days === 1) return '1d';
+  return `${days}d`;
 }
 
 // 获取 Kiro 配额信息
-function getKiroQuotaInfo(
-  quota: KiroQuotaData | undefined
-): { percentage: number; resetDays: number; isBanned: boolean; totalLimit: number; available: number; used: number } | null {
-  if (!quota) return null
+function getKiroQuotaInfo(quota: KiroQuotaData | undefined): {
+  percentage: number;
+  resetDays: number;
+  isBanned: boolean;
+  totalLimit: number;
+  available: number;
+  used: number;
+} | null {
+  if (!quota) return null;
   // 计算百分比: available / total_limit * 100
-  const percentage = quota.total_limit > 0 ? Math.round((quota.available / quota.total_limit) * 100) : 0
+  const percentage =
+    quota.total_limit > 0 ? Math.round((quota.available / quota.total_limit) * 100) : 0;
   return {
     percentage,
     resetDays: quota.days_until_reset,
@@ -106,32 +102,27 @@ function getKiroQuotaInfo(
     totalLimit: quota.total_limit,
     available: quota.available,
     used: quota.used,
-  }
+  };
 }
 
-export function ProviderRow({
-  provider,
-  stats,
-  streamingCount,
-  onClick,
-}: ProviderRowProps) {
-  const { t } = useTranslation()
+export function ProviderRow({ provider, stats, streamingCount, onClick }: ProviderRowProps) {
+  const { t } = useTranslation();
   // 使用通用配置系统
-  const typeConfig = getProviderTypeConfig(provider.type)
-  const color = typeConfig.color
-  const TypeIcon = typeConfig.icon
-  const displayInfo = typeConfig.getDisplayInfo(provider)
+  const typeConfig = getProviderTypeConfig(provider.type);
+  const color = typeConfig.color;
+  const TypeIcon = typeConfig.icon;
+  const displayInfo = typeConfig.getDisplayInfo(provider);
 
-  const isAntigravity = provider.type === 'antigravity'
-  const isKiro = provider.type === 'kiro'
+  const isAntigravity = provider.type === 'antigravity';
+  const isKiro = provider.type === 'kiro';
 
   // 仅为 Antigravity provider 获取额度
-  const { data: antigravityQuota } = useAntigravityQuota(provider.id, isAntigravity)
-  const claudeInfo = isAntigravity ? getClaudeQuotaInfo(antigravityQuota) : null
+  const { data: antigravityQuota } = useAntigravityQuota(provider.id, isAntigravity);
+  const claudeInfo = isAntigravity ? getClaudeQuotaInfo(antigravityQuota) : null;
 
   // 仅为 Kiro provider 获取额度
-  const { data: kiroQuota } = useKiroQuota(provider.id, isKiro)
-  const kiroInfo = isKiro ? getKiroQuotaInfo(kiroQuota) : null
+  const { data: kiroQuota } = useKiroQuota(provider.id, isKiro);
+  const kiroInfo = isKiro ? getKiroQuotaInfo(kiroQuota) : null;
 
   return (
     <div
@@ -140,7 +131,7 @@ export function ProviderRow({
         'group relative flex items-center gap-4 p-3 rounded-xl border transition-all duration-300 overflow-hidden',
         streamingCount > 0
           ? 'bg-card border-transparent ring-1 ring-black/5 dark:ring-white/10'
-          : 'bg-card/60 border-border hover:border-accent/30 hover:bg-card shadow-sm cursor-pointer'
+          : 'bg-card/60 border-border hover:border-accent/30 hover:bg-card shadow-sm cursor-pointer',
       )}
       style={{
         borderColor: streamingCount > 0 ? `${color}40` : undefined,
@@ -167,19 +158,14 @@ export function ProviderRow({
         className="relative z-10 w-12 h-12 rounded-xl flex items-center justify-center shrink-0 bg-muted border border-border shadow-inner group-hover:shadow-none transition-shadow duration-300"
         style={{ color }}
       >
-        <div
-          className="absolute inset-0 opacity-10"
-          style={{ backgroundColor: color }}
-        />
+        <div className="absolute inset-0 opacity-10 rounded-xl" style={{ backgroundColor: color }} />
         <TypeIcon size={24} />
       </div>
 
       {/* Provider Info */}
       <div className="relative z-10 flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-1">
-          <h3 className="text-[15px] font-bold text-foreground truncate">
-            {provider.name}
-          </h3>
+          <h3 className="text-[15px] font-bold text-foreground truncate">{provider.name}</h3>
           <span
             className="px-2 py-0.5 rounded-full text-[10px] uppercase tracking-wider font-black flex items-center gap-1"
             style={{ backgroundColor: `${color}15`, color }}
@@ -211,7 +197,7 @@ export function ProviderRow({
         </span>
         <div className="flex items-center -space-x-1.5 group/clients">
           {provider.supportedClientTypes?.length > 0 ? (
-            provider.supportedClientTypes.map(ct => (
+            provider.supportedClientTypes.map((ct) => (
               <div
                 key={ct}
                 className="relative z-0 hover:z-10 bg-card rounded-full p-0.5 border border-border transition-all hover:scale-125 hover:-translate-y-0.5 shadow-sm"
@@ -247,7 +233,7 @@ export function ProviderRow({
                     ? 'bg-emerald-500'
                     : claudeInfo.percentage >= 20
                       ? 'bg-amber-500'
-                      : 'bg-red-500'
+                      : 'bg-red-500',
                 )}
                 style={{
                   width: `${claudeInfo.percentage}%`,
@@ -289,7 +275,7 @@ export function ProviderRow({
                         ? 'bg-emerald-500'
                         : kiroInfo.percentage >= 20
                           ? 'bg-amber-500'
-                          : 'bg-red-500'
+                          : 'bg-red-500',
                     )}
                     style={{
                       width: `${kiroInfo.percentage}%`,
@@ -328,7 +314,7 @@ export function ProviderRow({
                     ? 'text-emerald-500'
                     : stats.successRate >= 90
                       ? 'text-blue-400'
-                      : 'text-amber-500'
+                      : 'text-amber-500',
                 )}
               >
                 {Math.round(stats.successRate)}%
@@ -365,9 +351,7 @@ export function ProviderRow({
         ) : (
           <div className="px-6 py-2 flex items-center gap-2 text-muted-foreground/30">
             <Activity size={12} />
-            <span className="text-[10px] font-bold uppercase tracking-widest">
-              No Activity
-            </span>
+            <span className="text-[10px] font-bold uppercase tracking-widest">No Activity</span>
           </div>
         )}
       </div>
@@ -379,5 +363,5 @@ export function ProviderRow({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/components/select-type-step.tsx b/web/src/pages/providers/components/select-type-step.tsx
index 89a325a7..b8f0e027 100644
--- a/web/src/pages/providers/components/select-type-step.tsx
+++ b/web/src/pages/providers/components/select-type-step.tsx
@@ -7,20 +7,17 @@ import {
   CheckCircle2,
   FilePlus,
   Cloud,
-} from 'lucide-react'
-import {
-  quickTemplates,
-  PROVIDER_TYPE_CONFIGS,
-  type ProviderFormData,
-} from '../types'
-import { Button } from '@/components/ui'
+} from 'lucide-react';
+import { quickTemplates, PROVIDER_TYPE_CONFIGS, type ProviderFormData } from '../types';
+import { Button } from '@/components/ui';
+import { useTranslation } from 'react-i18next';
 
 interface SelectTypeStepProps {
-  formData: ProviderFormData
-  onSelectType: (type: 'custom' | 'antigravity' | 'kiro') => void
-  onApplyTemplate: (templateId: string) => void
-  onSkipToConfig: () => void
-  onBack: () => void
+  formData: ProviderFormData;
+  onSelectType: (type: 'custom' | 'antigravity' | 'kiro') => void;
+  onApplyTemplate: (templateId: string) => void;
+  onSkipToConfig: () => void;
+  onBack: () => void;
 }
 
 export function SelectTypeStep({
@@ -31,118 +28,120 @@ export function SelectTypeStep({
   onBack,
 }: SelectTypeStepProps) {
   // 计算可见的 provider 数量
-  const visibleProviderCount = Object.values(PROVIDER_TYPE_CONFIGS).filter(c => !c.hidden).length
-  const gridCols = visibleProviderCount <= 2 ? 'md:grid-cols-2' : 'md:grid-cols-3'
+  const visibleProviderCount = Object.values(PROVIDER_TYPE_CONFIGS).filter((c) => !c.hidden).length;
+  const gridCols = visibleProviderCount <= 2 ? 'md:grid-cols-2' : 'md:grid-cols-3';
+
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-6 h-[73px] flex items-center gap-4  border-b border-border bg-card">
-        <Button onClick={onBack} variant={'ghost'}>
-          <ChevronLeft size={20} />
+      <div className="px-4 sm:px-6 h-[73px] flex items-center gap-4 border-b border-border bg-card">
+        <Button onClick={onBack} variant={'ghost'} size="icon">
+          <ChevronLeft className="size-5" />
         </Button>
-        <div>
-          <h2 className="text-headline font-semibold text-foreground">
-            Add Provider
+        <div className="flex-1 min-w-0">
+          <h2 className="text-base sm:text-lg font-semibold text-foreground truncate">
+            {t('addProvider.title')}
           </h2>
-          <p className="text-caption text-muted-foreground">
-            Choose a service provider to get started
+          <p className="text-xs sm:text-sm text-muted-foreground truncate">
+            {t('addProvider.subtitle')}
           </p>
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-6">
-        <div className="space-y-10">
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+        <div className="max-w-7xl mx-auto space-y-6 sm:space-y-8 lg:space-y-10">
           {/* Section: Service Provider */}
-          <div className="space-y-4">
-            <h3 className="text-lg font-semibold text-foreground border-b border-border pb-2">
-              1. Choose Service Provider
+          <div className="space-y-3 sm:space-y-4">
+            <h3 className="text-base sm:text-lg font-semibold text-foreground border-b border-border/60 pb-2.5">
+              1. {t('addProvider.chooseProvider')}
             </h3>
             <div className={`grid grid-cols-1 ${gridCols} gap-4 items-start`}>
               <Button
                 onClick={() => onSelectType('antigravity')}
                 variant="ghost"
-                className={`group p-0 rounded-lg border text-left transition-all h-auto w-full ${
+                className={`group p-0 rounded-xl border text-left h-auto w-full overflow-hidden transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${
                   formData.type === 'antigravity'
-                    ? 'border-provider-antigravity bg-provider-antigravity/10'
-                    : 'border-border bg-card hover:bg-muted'
+                    ? 'border-provider-antigravity bg-provider-antigravity/10 shadow-sm'
+                    : 'border-border bg-card hover:bg-muted hover:border-accent/30 hover:shadow-sm'
                 }`}
               >
-                <div className="p-5 flex items-center gap-4">
-                  <div className="w-12 h-12 rounded-md bg-provider-antigravity/15 flex items-center justify-center shrink-0">
-                    <Wand2 size={24} className="text-provider-antigravity" />
+                <div className="p-4 sm:p-5 flex items-center gap-3 sm:gap-4 min-w-0 w-full">
+                  <div className="size-10 sm:size-11 md:size-12 rounded-lg bg-provider-antigravity/15 flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <Wand2 className="size-5 md:size-6 text-provider-antigravity" />
                   </div>
 
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-headline font-semibold text-foreground mb-1">
-                      Antigravity Cloud
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <h3 className="text-sm sm:text-base font-semibold text-foreground leading-tight truncate">
+                      {t('addProvider.antigravity.name')}
                     </h3>
-                    <p className="text-caption text-muted-foreground">
-                      Zero-config managed service with OAuth
+                    <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed line-clamp-2">
+                      {t('addProvider.antigravity.description')}
                     </p>
                   </div>
 
                   {formData.type === 'antigravity' && (
-                    <CheckCircle2 size={20} className="text-provider-antigravity shrink-0" />
+                    <CheckCircle2 className="size-5 text-provider-antigravity shrink-0 self-center animate-in zoom-in-50 duration-200" />
                   )}
                 </div>
               </Button>
 
               {!PROVIDER_TYPE_CONFIGS.kiro.hidden && (
-              <Button
-                onClick={() => onSelectType('kiro')}
-                variant="ghost"
-                className={`group p-0 rounded-lg border text-left transition-all h-auto w-full ${
-                  formData.type === 'kiro'
-                    ? 'border-provider-kiro bg-provider-kiro/10'
-                    : 'border-border bg-card hover:bg-muted'
-                }`}
-              >
-                <div className="p-5 flex items-center gap-4">
-                  <div className="w-12 h-12 rounded-md bg-provider-kiro/15 flex items-center justify-center shrink-0">
-                    <Cloud size={24} className="text-provider-kiro" />
-                  </div>
+                <Button
+                  onClick={() => onSelectType('kiro')}
+                  variant="ghost"
+                  className={`group p-0 rounded-lg border text-left transition-all h-auto w-full ${
+                    formData.type === 'kiro'
+                      ? 'border-provider-kiro bg-provider-kiro/10'
+                      : 'border-border bg-card hover:bg-muted'
+                  }`}
+                >
+                  <div className="p-5 flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-md bg-provider-kiro/15 flex items-center justify-center shrink-0">
+                      <Cloud size={24} className="text-provider-kiro" />
+                    </div>
 
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-headline font-semibold text-foreground mb-1">
-                      Kiro (Q Developer)
-                    </h3>
-                    <p className="text-caption text-muted-foreground">
-                      AWS CodeWhisperer / Q Developer
-                    </p>
-                  </div>
+                    <div className="flex-1 min-w-0">
+                      <h3 className="text-headline font-semibold text-foreground mb-1">
+                        {t('addProvider.kiro.name')}
+                      </h3>
+                      <p className="text-caption text-muted-foreground">
+                        {t('addProvider.kiro.description')}
+                      </p>
+                    </div>
 
-                  {formData.type === 'kiro' && (
-                    <CheckCircle2 size={20} className="text-provider-kiro shrink-0" />
-                  )}
-                </div>
-              </Button>
+                    {formData.type === 'kiro' && (
+                      <CheckCircle2 size={20} className="text-provider-kiro shrink-0" />
+                    )}
+                  </div>
+                </Button>
               )}
 
               <Button
                 onClick={() => onSelectType('custom')}
                 variant="ghost"
-                className={`group p-0 rounded-lg border text-left transition-all h-auto w-full ${
+                className={`group p-0 rounded-xl border text-left h-auto w-full overflow-hidden transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${
                   formData.type === 'custom'
-                    ? 'border-provider-custom bg-provider-custom/10'
-                    : 'border-border bg-card hover:bg-muted'
+                    ? 'border-provider-custom bg-provider-custom/10 shadow-sm'
+                    : 'border-border bg-card hover:bg-muted hover:border-accent/30 hover:shadow-sm'
                 }`}
               >
-                <div className="p-5 flex items-center gap-4">
-                  <div className="w-12 h-12 rounded-md bg-provider-custom/15 flex items-center justify-center shrink-0">
-                    <Server size={24} className="text-provider-custom" />
+                <div className="p-4 sm:p-5 flex items-center gap-3 sm:gap-4 min-w-0 w-full">
+                  <div className="size-10 sm:size-11 md:size-12 rounded-lg bg-provider-custom/15 flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <Server className="size-5 md:size-6 text-provider-custom" />
                   </div>
 
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-headline font-semibold text-foreground mb-1">
-                      Custom Provider
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <h3 className="text-sm sm:text-base font-semibold text-foreground leading-tight truncate">
+                      {t('addProvider.custom.name')}
                     </h3>
-                    <p className="text-caption text-muted-foreground">
-                      Configure your own API endpoint
+                    <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed line-clamp-2">
+                      {t('addProvider.custom.description')}
                     </p>
                   </div>
 
                   {formData.type === 'custom' && (
-                    <CheckCircle2 size={20} className="text-provider-custom shrink-0" />
+                    <CheckCircle2 className="size-5 text-provider-custom shrink-0 self-center animate-in zoom-in-50 duration-200" />
                   )}
                 </div>
               </Button>
@@ -151,108 +150,103 @@ export function SelectTypeStep({
 
           {/* Section: Templates (Custom only) */}
           {formData.type === 'custom' && (
-            <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
-              <div className="flex items-center justify-between border-b border-border pb-2">
-                <h3 className="text-lg font-semibold text-foreground">
-                  2. Select a Template{' '}
+            <div className="space-y-3 sm:space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
+              <div className="flex items-center justify-between border-b border-border/60 pb-2.5">
+                <h3 className="text-base sm:text-lg font-semibold text-foreground">
+                  2. {t('addProvider.selectTemplate')}{' '}
                   <span className="text-muted-foreground font-normal text-sm ml-2">
-                    (Optional)
+                    {t('addProvider.optional')}
                   </span>
                 </h3>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 items-start">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 items-start">
                 {/* Empty Template Card */}
                 <Button
                   onClick={onSkipToConfig}
                   variant="ghost"
-                  className="text-left group p-0 rounded-lg border border-dashed border-border bg-card hover:bg-muted transition-all h-full w-full"
-                  style={{ minHeight: '140px' }}
+                  className="text-left group p-0 rounded-xl border border-dashed h-full w-full min-h-36 sm:min-h-40 transition-all duration-200 border-border bg-card hover:bg-muted hover:border-accent/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
                 >
-                  <div className="p-4 flex flex-col gap-3 h-full w-full">
+                  <div className="p-4 sm:p-5 flex flex-col gap-3 sm:gap-4 h-full w-full">
                     <div className="flex items-center justify-between w-full">
-                      <div
-                        className={`w-10 h-10 rounded-md flex items-center justify-center transition-colors bg-muted group-hover:bg-primary/10`}
-                      >
-                        <FilePlus
-                          size={20}
-                          className="text-muted-foreground group-hover:text-primary transition-colors"
-                        />
+                      <div className="size-9 sm:size-10 rounded-lg flex items-center justify-center overflow-hidden transition-all duration-200 group-hover:scale-105 bg-muted group-hover:bg-primary/10">
+                        <FilePlus className="size-4 sm:size-5 text-muted-foreground group-hover:text-primary transition-colors" />
                       </div>
                     </div>
 
-                    <div className="flex-1">
-                      <h4 className="text-body font-semibold text-foreground mb-0.5">
-                        Empty Template
+                    <div className="flex-1 space-y-1">
+                      <h4 className="text-sm font-semibold text-foreground leading-tight truncate">
+                        {t('addProvider.emptyTemplate')}
                       </h4>
-                      <p className="text-caption text-muted-foreground">
-                        Start from scratch
+                      <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
+                        {t('addProvider.startFromScratch')}
                       </p>
                     </div>
                   </div>
                 </Button>
 
-                {quickTemplates.map(template => {
-                  const Icon = template.icon === 'grid' ? Grid3X3 : Layers
-                  const isSelected = formData.selectedTemplate === template.id
+                {quickTemplates.map((template) => {
+                  const Icon = template.icon === 'grid' ? Grid3X3 : Layers;
+                  const isSelected = formData.selectedTemplate === template.id;
+                  const templateName = template.nameKey ? t(template.nameKey) : template.name;
+                  const templateDescription = template.descriptionKey
+                    ? t(template.descriptionKey)
+                    : template.description;
+
                   return (
                     <Button
                       key={template.id}
                       onClick={() => onApplyTemplate(template.id)}
                       variant="ghost"
-                      className={`group p-0 rounded-lg border text-left transition-all h-full w-full ${
+                      className={`group p-0 rounded-xl border text-left h-full w-full min-h-36 sm:min-h-40 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${
                         isSelected
-                          ? 'border-primary bg-primary/10'
-                          : 'border-border bg-card hover:bg-muted'
+                          ? 'border-primary bg-primary/10 shadow-sm'
+                          : 'border-border bg-card hover:bg-muted hover:border-accent/30 hover:shadow-sm'
                       }`}
-                      style={{ minHeight: '140px' }}
                     >
-                      <div className="p-4 flex flex-col gap-3 h-full w-full">
+                      <div className="p-4 sm:p-5 flex flex-col gap-3 sm:gap-4 h-full w-full">
                         <div className="flex items-center justify-between w-full">
                           <div
-                            className={`w-10 h-10 rounded-md flex items-center justify-center transition-colors overflow-hidden ${
-                              isSelected
-                                ? 'bg-primary/15'
-                                : 'bg-muted group-hover:bg-primary/10'
+                            className={`size-9 sm:size-10 rounded-lg flex items-center justify-center overflow-hidden transition-all duration-200 group-hover:scale-105 ${
+                              isSelected ? 'bg-primary/15' : 'bg-muted group-hover:bg-primary/10'
                             }`}
                           >
                             {template.logoUrl ? (
                               <img
                                 src={template.logoUrl}
-                                alt={template.name}
+                                alt={templateName}
                                 className="w-full h-full object-contain"
                               />
                             ) : (
                               <Icon
-                                size={20}
-                                className={
+                                className={`size-4 sm:size-5 ${
                                   isSelected
                                     ? 'text-primary'
                                     : 'text-muted-foreground group-hover:text-primary transition-colors'
-                                }
+                                }`}
                               />
                             )}
                           </div>
                           {isSelected && (
-                            <CheckCircle2 size={18} className="text-primary" />
+                            <CheckCircle2 className="size-4 sm:size-[18px] text-primary animate-in zoom-in-50 duration-200" />
                           )}
                         </div>
 
-                        <div className="flex-1">
+                        <div className="flex-1 space-y-1">
                           <h4
-                            className={`text-body font-semibold mb-0.5 transition-colors ${
+                            className={`text-sm font-semibold leading-tight truncate transition-colors ${
                               isSelected ? 'text-primary' : 'text-foreground'
                             }`}
                           >
-                            {template.name}
+                            {templateName}
                           </h4>
-                          <p className="text-caption text-muted-foreground">
-                            {template.description}
+                          <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
+                            {templateDescription}
                           </p>
                         </div>
                       </div>
                     </Button>
-                  )
+                  );
                 })}
               </div>
             </div>
@@ -260,5 +254,5 @@ export function SelectTypeStep({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/index.tsx b/web/src/pages/providers/index.tsx
index da1de917..771c46e3 100644
--- a/web/src/pages/providers/index.tsx
+++ b/web/src/pages/providers/index.tsx
@@ -1,28 +1,28 @@
-import { useState, useMemo, useRef } from 'react'
-import { Plus, Layers, Download, Upload } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { useProviders, useAllProviderStats } from '@/hooks/queries'
-import { useStreamingRequests } from '@/hooks/use-streaming'
-import type { Provider, ImportResult } from '@/lib/transport'
-import { getTransport } from '@/lib/transport'
-import { ProviderRow } from './components/provider-row'
-import { ProviderCreateFlow } from './components/provider-create-flow'
-import { ProviderEditFlow } from './components/provider-edit-flow'
-import { useQueryClient } from '@tanstack/react-query'
-import { Button } from '@/components/ui/button'
-import { PageHeader } from '@/components/layout/page-header'
-import { PROVIDER_TYPE_CONFIGS, type ProviderTypeKey } from './types'
+import { useState, useMemo, useRef } from 'react';
+import { Plus, Layers, Download, Upload } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useProviders, useAllProviderStats } from '@/hooks/queries';
+import { useStreamingRequests } from '@/hooks/use-streaming';
+import type { Provider, ImportResult } from '@/lib/transport';
+import { getTransport } from '@/lib/transport';
+import { ProviderRow } from './components/provider-row';
+import { ProviderCreateFlow } from './components/provider-create-flow';
+import { ProviderEditFlow } from './components/provider-edit-flow';
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/layout/page-header';
+import { PROVIDER_TYPE_CONFIGS, type ProviderTypeKey } from './types';
 
 export function ProvidersPage() {
-  const { t } = useTranslation()
-  const { data: providers, isLoading } = useProviders()
-  const { data: providerStats = {} } = useAllProviderStats()
-  const { countsByProvider } = useStreamingRequests()
-  const [showCreateFlow, setShowCreateFlow] = useState(false)
-  const [editingProvider, setEditingProvider] = useState<Provider | null>(null)
-  const [importStatus, setImportStatus] = useState<ImportResult | null>(null)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const queryClient = useQueryClient()
+  const { t } = useTranslation();
+  const { data: providers, isLoading } = useProviders();
+  const { data: providerStats = {} } = useAllProviderStats();
+  const { countsByProvider } = useStreamingRequests();
+  const [showCreateFlow, setShowCreateFlow] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<Provider | null>(null);
+  const [importStatus, setImportStatus] = useState<ImportResult | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
 
   const groupedProviders = useMemo(() => {
     // 按类型分组，使用配置系统中定义的类型
@@ -30,85 +30,80 @@ export function ProvidersPage() {
       antigravity: [],
       kiro: [],
       custom: [],
-    }
+    };
 
-    providers?.forEach(p => {
-      const type = p.type as ProviderTypeKey
+    providers?.forEach((p) => {
+      const type = p.type as ProviderTypeKey;
       if (groups[type]) {
-        groups[type].push(p)
+        groups[type].push(p);
       } else {
         // 未知类型归入 custom
-        groups.custom.push(p)
+        groups.custom.push(p);
       }
-    })
+    });
 
-    return groups
-  }, [providers])
+    return groups;
+  }, [providers]);
 
   // Export providers as JSON file
   const handleExport = async () => {
     try {
-      const transport = getTransport()
-      const data = await transport.exportProviders()
+      const transport = getTransport();
+      const data = await transport.exportProviders();
       const blob = new Blob([JSON.stringify(data, null, 2)], {
         type: 'application/json',
-      })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `providers-${new Date().toISOString().split('T')[0]}.json`
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `providers-${new Date().toISOString().split('T')[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
     } catch (error) {
-      console.error('Export failed:', error)
+      console.error('Export failed:', error);
     }
-  }
+  };
 
   // Import providers from JSON file
   const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0]
-    if (!file) return
+    const file = event.target.files?.[0];
+    if (!file) return;
 
     try {
-      const text = await file.text()
-      const data = JSON.parse(text) as Provider[]
-      const transport = getTransport()
-      const result = await transport.importProviders(data)
-      setImportStatus(result)
-      queryClient.invalidateQueries({ queryKey: ['providers'] })
-      queryClient.invalidateQueries({ queryKey: ['routes'] })
+      const text = await file.text();
+      const data = JSON.parse(text) as Provider[];
+      const transport = getTransport();
+      const result = await transport.importProviders(data);
+      setImportStatus(result);
+      queryClient.invalidateQueries({ queryKey: ['providers'] });
+      queryClient.invalidateQueries({ queryKey: ['routes'] });
       // Clear file input
       if (fileInputRef.current) {
-        fileInputRef.current.value = ''
+        fileInputRef.current.value = '';
       }
       // Auto-hide status after 5 seconds
-      setTimeout(() => setImportStatus(null), 5000)
+      setTimeout(() => setImportStatus(null), 5000);
     } catch (error) {
-      console.error('Import failed:', error)
+      console.error('Import failed:', error);
       setImportStatus({
         imported: 0,
         skipped: 0,
         errors: [`Import failed: ${error}`],
-      })
-      setTimeout(() => setImportStatus(null), 5000)
+      });
+      setTimeout(() => setImportStatus(null), 5000);
     }
-  }
+  };
 
   // Show edit flow
   if (editingProvider) {
-    return (
-      <ProviderEditFlow
-        provider={editingProvider}
-        onClose={() => setEditingProvider(null)}
-      />
-    )
+    return <ProviderEditFlow provider={editingProvider} onClose={() => setEditingProvider(null)} />;
   }
 
   // Show create flow
   if (showCreateFlow) {
-    return <ProviderCreateFlow onClose={() => setShowCreateFlow(false)} />
+    return <ProviderCreateFlow onClose={() => setShowCreateFlow(false)} />;
   }
 
   // Provider list
@@ -118,7 +113,9 @@ export function ProvidersPage() {
         icon={Layers}
         iconClassName="text-blue-500"
         title={t('providers.title')}
-        description={t('providers.description', { count: providers?.length || 0 })}
+        description={t('providers.description', {
+          count: providers?.length || 0,
+        })}
       >
         <input
           type="file"
@@ -162,9 +159,7 @@ export function ProvidersPage() {
             <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
               <Layers size={48} className="mb-4 opacity-50" />
               <p className="text-body">{t('providers.noProviders')}</p>
-              <p className="text-caption mt-2">
-                {t('providers.noProvidersHint')}
-              </p>
+              <p className="text-caption mt-2">{t('providers.noProvidersHint')}</p>
               <Button
                 onClick={() => setShowCreateFlow(true)}
                 className=" mt-6 flex items-center gap-2"
@@ -176,40 +171,36 @@ export function ProvidersPage() {
           ) : (
             <div className="space-y-8">
               {/* 动态渲染各类型分组 */}
-              {(Object.keys(PROVIDER_TYPE_CONFIGS) as ProviderTypeKey[]).map(
-                typeKey => {
-                  const typeProviders = groupedProviders[typeKey]
-                  if (typeProviders.length === 0) return null
+              {(Object.keys(PROVIDER_TYPE_CONFIGS) as ProviderTypeKey[]).map((typeKey) => {
+                const typeProviders = groupedProviders[typeKey];
+                if (typeProviders.length === 0) return null;
 
-                  const config = PROVIDER_TYPE_CONFIGS[typeKey]
-                  const TypeIcon = config.icon
+                const config = PROVIDER_TYPE_CONFIGS[typeKey];
+                const TypeIcon = config.icon;
 
-                  return (
-                    <section key={typeKey} className="space-y-3">
-                      <div className="flex items-center gap-2 px-1">
-                        <TypeIcon size={16} style={{ color: config.color }} />
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
-                          {config.label}
-                        </h3>
-                        <div className="h-px flex-1 bg-border/50 ml-2" />
-                      </div>
-                      <div className="space-y-3">
-                        {typeProviders.map(provider => (
-                          <ProviderRow
-                            key={provider.id}
-                            provider={provider}
-                            stats={providerStats[provider.id]}
-                            streamingCount={
-                              countsByProvider.get(provider.id) || 0
-                            }
-                            onClick={() => setEditingProvider(provider)}
-                          />
-                        ))}
-                      </div>
-                    </section>
-                  )
-                }
-              )}
+                return (
+                  <section key={typeKey} className="space-y-3">
+                    <div className="flex items-center gap-2 px-1">
+                      <TypeIcon size={16} style={{ color: config.color }} />
+                      <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
+                        {config.label}
+                      </h3>
+                      <div className="h-px flex-1 bg-border/50 ml-2" />
+                    </div>
+                    <div className="space-y-3">
+                      {typeProviders.map((provider) => (
+                        <ProviderRow
+                          key={provider.id}
+                          provider={provider}
+                          stats={providerStats[provider.id]}
+                          streamingCount={countsByProvider.get(provider.id) || 0}
+                          onClick={() => setEditingProvider(provider)}
+                        />
+                      ))}
+                    </div>
+                  </section>
+                );
+              })}
             </div>
           )}
         </div>
@@ -220,7 +211,10 @@ export function ProvidersPage() {
         <div className="fixed bottom-6 right-6 bg-card border border-border rounded-lg shadow-lg p-4">
           <div className="space-y-2">
             <div className="text-sm font-medium text-text-primary">
-              {t('providers.importCompleted', { imported: importStatus.imported, skipped: importStatus.skipped })}
+              {t('providers.importCompleted', {
+                imported: importStatus.imported,
+                skipped: importStatus.skipped,
+              })}
             </div>
             {importStatus.errors.length > 0 && (
               <div className="text-xs text-red-400 space-y-1">
@@ -233,5 +227,5 @@ export function ProvidersPage() {
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/providers/types.ts b/web/src/pages/providers/types.ts
index 90c3fc1a..925b9692 100644
--- a/web/src/pages/providers/types.ts
+++ b/web/src/pages/providers/types.ts
@@ -79,6 +79,8 @@ export type QuickTemplate = {
   id: string;
   name: string;
   description: string;
+  nameKey?: string; // i18n translation key for name
+  descriptionKey?: string; // i18n translation key for description
   icon: 'grid' | 'layers';
   logoUrl?: string; // 可选的 logo 图片 URL
   supportedClients: ClientType[];
@@ -90,6 +92,8 @@ export const quickTemplates: QuickTemplate[] = [
     id: '88code',
     name: '88 Code',
     description: 'Claude + Codex + Gemini',
+    nameKey: 'addProvider.templates.88code.name',
+    descriptionKey: 'addProvider.templates.88code.description',
     icon: 'grid',
     supportedClients: ['claude', 'codex', 'gemini'],
     clientBaseURLs: {
@@ -102,6 +106,8 @@ export const quickTemplates: QuickTemplate[] = [
     id: 'aicodemirror',
     name: 'AI Code Mirror',
     description: 'Claude + Codex + Gemini',
+    nameKey: 'addProvider.templates.aicodemirror.name',
+    descriptionKey: 'addProvider.templates.aicodemirror.description',
     icon: 'layers',
     supportedClients: ['claude', 'codex', 'gemini'],
     clientBaseURLs: {
@@ -114,6 +120,8 @@ export const quickTemplates: QuickTemplate[] = [
     id: 'duckcoding',
     name: 'DuckCoding',
     description: 'Claude + Codex + Gemini',
+    nameKey: 'addProvider.templates.duckcoding.name',
+    descriptionKey: 'addProvider.templates.duckcoding.description',
     icon: 'grid',
     logoUrl: duckcodingLogo,
     supportedClients: ['claude', 'codex', 'gemini'],
@@ -127,6 +135,8 @@ export const quickTemplates: QuickTemplate[] = [
     id: 'freeduck',
     name: 'Free Duck',
     description: '免费站点 · 只有 Claude Code',
+    nameKey: 'addProvider.templates.freeduck.name',
+    descriptionKey: 'addProvider.templates.freeduck.description',
     icon: 'grid',
     logoUrl: freeDuckLogo,
     supportedClients: ['claude'],
diff --git a/web/src/pages/requests/detail.tsx b/web/src/pages/requests/detail.tsx
index 651be572..19d2e60d 100644
--- a/web/src/pages/requests/detail.tsx
+++ b/web/src/pages/requests/detail.tsx
@@ -1,6 +1,6 @@
-import { useState, useMemo, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { AlertCircle, Loader2 } from 'lucide-react'
+import { useState, useMemo, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { AlertCircle, Loader2 } from 'lucide-react';
 import {
   useProxyRequest,
   useProxyUpstreamAttempts,
@@ -10,105 +10,97 @@ import {
   useSessions,
   useRoutes,
   useAPITokens,
-} from '@/hooks/queries'
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable'
-import { RequestHeader } from './detail/RequestHeader'
-import { RequestSidebar } from './detail/RequestSidebar'
-import { RequestDetailPanel } from './detail/RequestDetailPanel'
+} from '@/hooks/queries';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { RequestHeader } from './detail/RequestHeader';
+import { RequestSidebar } from './detail/RequestSidebar';
+import { RequestDetailPanel } from './detail/RequestDetailPanel';
 
 // Selection type: either the main request or an attempt
-type SelectionType =
-  | { type: 'request' }
-  | { type: 'attempt'; attemptId: number }
+type SelectionType = { type: 'request' } | { type: 'attempt'; attemptId: number };
 
 export function RequestDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const { data: request, isLoading, error } = useProxyRequest(Number(id))
-  const { data: attempts } = useProxyUpstreamAttempts(Number(id))
-  const { data: providers } = useProviders()
-  const { data: projects } = useProjects()
-  const { data: sessions } = useSessions()
-  const { data: routes } = useRoutes()
-  const { data: apiTokens } = useAPITokens()
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { data: request, isLoading, error } = useProxyRequest(Number(id));
+  const { data: attempts } = useProxyUpstreamAttempts(Number(id));
+  const { data: providers } = useProviders();
+  const { data: projects } = useProjects();
+  const { data: sessions } = useSessions();
+  const { data: routes } = useRoutes();
+  const { data: apiTokens } = useAPITokens();
   const [selection, setSelection] = useState<SelectionType>({
     type: 'request',
-  })
-  const [activeTab, setActiveTab] = useState<
-    'request' | 'response' | 'metadata'
-  >('request')
+  });
+  const [activeTab, setActiveTab] = useState<'request' | 'response' | 'metadata'>('request');
 
-  useProxyRequestUpdates()
+  useProxyRequestUpdates();
 
   // ESC 键返回列表
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        navigate('/requests')
+        navigate('/requests');
       }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [navigate])
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [navigate]);
 
   // Create lookup map for provider names
   const providerMap = useMemo(() => {
-    const map = new Map<number, string>()
-    providers?.forEach(p => {
-      map.set(p.id, p.name)
-    })
-    return map
-  }, [providers])
+    const map = new Map<number, string>();
+    providers?.forEach((p) => {
+      map.set(p.id, p.name);
+    });
+    return map;
+  }, [providers]);
 
   // Create lookup map for project names
   const projectMap = useMemo(() => {
-    const map = new Map<number, string>()
-    projects?.forEach(p => {
-      map.set(p.id, p.name)
-    })
-    return map
-  }, [projects])
+    const map = new Map<number, string>();
+    projects?.forEach((p) => {
+      map.set(p.id, p.name);
+    });
+    return map;
+  }, [projects]);
 
   // Create lookup map for sessions by sessionID
   const sessionMap = useMemo(() => {
-    const map = new Map<string, { clientType: string; projectID: number }>()
-    sessions?.forEach(s => {
+    const map = new Map<string, { clientType: string; projectID: number }>();
+    sessions?.forEach((s) => {
       map.set(s.sessionID, {
         clientType: s.clientType,
         projectID: s.projectID,
-      })
-    })
-    return map
-  }, [sessions])
+      });
+    });
+    return map;
+  }, [sessions]);
 
   // Create lookup map for routes by routeID
   const routeMap = useMemo(() => {
-    const map = new Map<number, { projectID: number }>()
-    routes?.forEach(r => {
-      map.set(r.id, { projectID: r.projectID })
-    })
-    return map
-  }, [routes])
+    const map = new Map<number, { projectID: number }>();
+    routes?.forEach((r) => {
+      map.set(r.id, { projectID: r.projectID });
+    });
+    return map;
+  }, [routes]);
 
   // Create lookup map for API Token names
   const tokenMap = useMemo(() => {
-    const map = new Map<number, string>()
-    apiTokens?.forEach(t => {
-      map.set(t.id, t.name)
-    })
-    return map
-  }, [apiTokens])
+    const map = new Map<number, string>();
+    apiTokens?.forEach((t) => {
+      map.set(t.id, t.name);
+    });
+    return map;
+  }, [apiTokens]);
 
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center bg-background">
         <Loader2 className="h-8 w-8 animate-spin text-accent" />
       </div>
-    )
+    );
   }
 
   if (error || !request) {
@@ -117,14 +109,12 @@ export function RequestDetailPage() {
         <div className="p-4 bg-red-400/10 rounded-full">
           <AlertCircle className="h-12 w-12 text-red-400" />
         </div>
-        <h3 className="text-lg font-semibold text-foreground">
-          Request Not Found
-        </h3>
+        <h3 className="text-lg font-semibold text-foreground">Request Not Found</h3>
         <p className="text-sm text-muted-foreground">
           The request you're looking for doesn't exist or has been deleted.
         </p>
       </div>
-    )
+    );
   }
 
   return (
@@ -137,9 +127,7 @@ export function RequestDetailPage() {
         <div className="shrink-0 bg-red-400/10 border-b border-red-400/20 px-6 py-3 flex items-start gap-3">
           <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
           <div className="flex-1">
-            <h4 className="text-sm font-medium text-red-400 mb-1">
-              Request Failed
-            </h4>
+            <h4 className="text-sm font-medium text-red-400 mb-1">Request Failed</h4>
             <pre className="whitespace-pre-wrap wrap-break-words font-mono text-xs text-red-400/90 max-h-24 overflow-auto">
               {request.error}
             </pre>
@@ -183,5 +171,5 @@ export function RequestDetailPage() {
         </ResizablePanelGroup>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/RequestDetailPanel.tsx b/web/src/pages/requests/detail/RequestDetailPanel.tsx
index c4369a27..bb507c92 100644
--- a/web/src/pages/requests/detail/RequestDetailPanel.tsx
+++ b/web/src/pages/requests/detail/RequestDetailPanel.tsx
@@ -8,54 +8,52 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from '@/components/ui'
-import { Server, Code, Database, Info, Zap } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import type { ProxyUpstreamAttempt, ProxyRequest } from '@/lib/transport'
-import { cn } from '@/lib/utils'
-import { CopyButton, CopyAsCurlButton, DiffButton, EmptyState } from './components'
-import { RequestDetailView } from './RequestDetailView'
+} from '@/components/ui';
+import { Server, Code, Database, Info, Zap } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { ProxyUpstreamAttempt, ProxyRequest } from '@/lib/transport';
+import { cn } from '@/lib/utils';
+import { CopyButton, CopyAsCurlButton, DiffButton, EmptyState } from './components';
+import { RequestDetailView } from './RequestDetailView';
 
 // Selection type: either the main request or an attempt
-type SelectionType =
-  | { type: 'request' }
-  | { type: 'attempt'; attemptId: number }
+type SelectionType = { type: 'request' } | { type: 'attempt'; attemptId: number };
 
 // 微美元转美元 (1 USD = 1,000,000 microUSD)
-const MICRO_USD_PER_USD = 1_000_000
+const MICRO_USD_PER_USD = 1_000_000;
 function microToUSD(microUSD: number): number {
-  return microUSD / MICRO_USD_PER_USD
+  return microUSD / MICRO_USD_PER_USD;
 }
 
 function formatCost(microUSD: number): string {
-  if (microUSD === 0) return '-'
-  const usd = microToUSD(microUSD)
-  if (usd < 0.0001) return '<$0.0001'
-  if (usd < 0.001) return `$${usd.toFixed(5)}`
-  if (usd < 0.01) return `$${usd.toFixed(4)}`
-  if (usd < 1) return `$${usd.toFixed(3)}`
-  return `$${usd.toFixed(2)}`
+  if (microUSD === 0) return '-';
+  const usd = microToUSD(microUSD);
+  if (usd < 0.0001) return '<$0.0001';
+  if (usd < 0.001) return `$${usd.toFixed(5)}`;
+  if (usd < 0.01) return `$${usd.toFixed(4)}`;
+  if (usd < 1) return `$${usd.toFixed(3)}`;
+  return `$${usd.toFixed(2)}`;
 }
 
 function formatJSON(obj: unknown): string {
-  if (!obj) return '-'
+  if (!obj) return '-';
   try {
-    return JSON.stringify(obj, null, 2)
+    return JSON.stringify(obj, null, 2);
   } catch {
-    return String(obj)
+    return String(obj);
   }
 }
 
 interface RequestDetailPanelProps {
-  request: ProxyRequest
-  selection: SelectionType
-  attempts: ProxyUpstreamAttempt[] | undefined
-  activeTab: 'request' | 'response' | 'metadata'
-  setActiveTab: (tab: 'request' | 'response' | 'metadata') => void
-  providerMap: Map<number, string>
-  projectMap: Map<number, string>
-  sessionMap: Map<string, { clientType: string; projectID: number }>
-  tokenMap: Map<number, string>
+  request: ProxyRequest;
+  selection: SelectionType;
+  attempts: ProxyUpstreamAttempt[] | undefined;
+  activeTab: 'request' | 'response' | 'metadata';
+  setActiveTab: (tab: 'request' | 'response' | 'metadata') => void;
+  providerMap: Map<number, string>;
+  projectMap: Map<number, string>;
+  sessionMap: Map<string, { clientType: string; projectID: number }>;
+  tokenMap: Map<number, string>;
 }
 
 export function RequestDetailPanel({
@@ -69,11 +67,9 @@ export function RequestDetailPanel({
   sessionMap,
   tokenMap,
 }: RequestDetailPanelProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const selectedAttempt =
-    selection.type === 'attempt'
-      ? attempts?.find(a => a.id === selection.attemptId)
-      : null
+    selection.type === 'attempt' ? attempts?.find((a) => a.id === selection.attemptId) : null;
 
   if (selection.type === 'request') {
     return (
@@ -88,7 +84,7 @@ export function RequestDetailPanel({
         projectMap={projectMap}
         tokenName={tokenMap.get(request.apiTokenID)}
       />
-    )
+    );
   }
 
   if (!selectedAttempt) {
@@ -97,7 +93,7 @@ export function RequestDetailPanel({
         message={t('requests.selectAttempt')}
         icon={<Server className="h-12 w-12 mb-4 opacity-10" />}
       />
-    )
+    );
   }
 
   return (
@@ -119,13 +115,14 @@ export function RequestDetailPanel({
             </h3>
             <div className="flex items-center gap-3 text-xs text-text-secondary mt-0.5">
               <span>{t('requests.attemptId', { id: selectedAttempt.id })}</span>
-              {selectedAttempt.mappedModel && selectedAttempt.requestModel !== selectedAttempt.mappedModel && (
-                <span className="text-muted-foreground">
-                  <span className="text-muted-foreground">{selectedAttempt.requestModel}</span>
-                  <span className="mx-1">→</span>
-                  <span className="text-foreground">{selectedAttempt.mappedModel}</span>
-                </span>
-              )}
+              {selectedAttempt.mappedModel &&
+                selectedAttempt.requestModel !== selectedAttempt.mappedModel && (
+                  <span className="text-muted-foreground">
+                    <span className="text-muted-foreground">{selectedAttempt.requestModel}</span>
+                    <span className="mx-1">→</span>
+                    <span className="text-foreground">{selectedAttempt.mappedModel}</span>
+                  </span>
+                )}
               {selectedAttempt.cost > 0 && (
                 <span className="text-blue-400 font-medium">
                   Cost: {formatCost(selectedAttempt.cost)}
@@ -152,359 +149,321 @@ export function RequestDetailPanel({
       {/* Detail Content */}
       <TabsContent value="request" className="flex-1 overflow-hidden flex flex-col min-w-0 mt-0">
         {selectedAttempt.requestInfo ? (
-            <div className="flex-1 flex flex-col overflow-hidden p-6 gap-6 animate-fade-in min-w-0">
-              <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border shrink-0">
-                <Badge variant="info" className="font-mono text-xs">
-                  {selectedAttempt.requestInfo.method}
-                </Badge>
-                <code className="flex-1 font-mono text-xs text-foreground break-all">
-                  {selectedAttempt.requestInfo.url}
-                </code>
-                <CopyAsCurlButton requestInfo={selectedAttempt.requestInfo} />
+          <div className="flex-1 flex flex-col overflow-hidden p-6 gap-6 animate-fade-in min-w-0">
+            <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border shrink-0">
+              <Badge variant="info" className="font-mono text-xs">
+                {selectedAttempt.requestInfo.method}
+              </Badge>
+              <code className="flex-1 font-mono text-xs text-foreground break-all">
+                {selectedAttempt.requestInfo.url}
+              </code>
+              <CopyAsCurlButton requestInfo={selectedAttempt.requestInfo} />
+            </div>
+
+            <div className="flex flex-col min-h-0 flex-1 gap-6">
+              <div className="flex flex-col min-h-0 gap-3 flex-1">
+                <div className="flex items-center justify-between shrink-0">
+                  <h5 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                    <Code size={14} /> Headers
+                  </h5>
+                  <div className="flex items-center gap-2">
+                    <DiffButton
+                      clientContent={formatJSON(request.requestInfo?.headers || {})}
+                      upstreamContent={formatJSON(selectedAttempt.requestInfo.headers)}
+                      title={t('requests.compareHeaders')}
+                    />
+                    <CopyButton content={formatJSON(selectedAttempt.requestInfo.headers)} />
+                  </div>
+                </div>
+                <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
+                  <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
+                      JSON
+                    </Badge>
+                  </div>
+                  <pre className="text-xs font-mono text-foreground/90 leading-relaxed whitespace-pre overflow-x-auto">
+                    {formatJSON(selectedAttempt.requestInfo.headers)}
+                  </pre>
+                </div>
               </div>
 
-              <div className="flex flex-col min-h-0 flex-1 gap-6">
+              {selectedAttempt.requestInfo.body && (
                 <div className="flex flex-col min-h-0 gap-3 flex-1">
                   <div className="flex items-center justify-between shrink-0">
                     <h5 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
-                      <Code size={14} /> Headers
+                      <Database size={14} /> Body
                     </h5>
                     <div className="flex items-center gap-2">
                       <DiffButton
-                        clientContent={formatJSON(
-                          request.requestInfo?.headers || {}
-                        )}
-                        upstreamContent={formatJSON(
-                          selectedAttempt.requestInfo.headers
-                        )}
-                        title={t('requests.compareHeaders')}
+                        clientContent={(() => {
+                          try {
+                            return formatJSON(JSON.parse(request.requestInfo?.body || '{}'));
+                          } catch {
+                            return request.requestInfo?.body || '';
+                          }
+                        })()}
+                        upstreamContent={(() => {
+                          try {
+                            return formatJSON(JSON.parse(selectedAttempt.requestInfo.body));
+                          } catch {
+                            return selectedAttempt.requestInfo.body;
+                          }
+                        })()}
+                        title={t('requests.compareBody')}
                       />
                       <CopyButton
-                        content={formatJSON(
-                        selectedAttempt.requestInfo.headers
-                        )}
+                        content={(() => {
+                          try {
+                            return formatJSON(JSON.parse(selectedAttempt.requestInfo.body));
+                          } catch {
+                            return selectedAttempt.requestInfo.body;
+                          }
+                        })()}
                       />
                     </div>
                   </div>
                   <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
                     <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Badge
-                        variant="outline"
-                        className="text-[10px] bg-card/80 backdrop-blur-sm"
-                      >
+                      <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
                         JSON
                       </Badge>
                     </div>
-                    <pre className="text-xs font-mono text-foreground/90 leading-relaxed whitespace-pre overflow-x-auto">
-                      {formatJSON(selectedAttempt.requestInfo.headers)}
+                    <pre className="text-xs font-mono text-foreground/95 whitespace-pre overflow-x-auto leading-relaxed">
+                      {(() => {
+                        try {
+                          return formatJSON(JSON.parse(selectedAttempt.requestInfo.body));
+                        } catch {
+                          return selectedAttempt.requestInfo.body;
+                        }
+                      })()}
                     </pre>
                   </div>
                 </div>
-
-                {selectedAttempt.requestInfo.body && (
-                  <div className="flex flex-col min-h-0 gap-3 flex-1">
-                    <div className="flex items-center justify-between shrink-0">
-                      <h5 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
-                        <Database size={14} /> Body
-                      </h5>
-                      <div className="flex items-center gap-2">
-                        <DiffButton
-                          clientContent={(() => {
-                            try {
-                              return formatJSON(
-                                JSON.parse(request.requestInfo?.body || '{}')
-                              )
-                            } catch {
-                              return request.requestInfo?.body || ''
-                            }
-                          })()}
-                          upstreamContent={(() => {
-                            try {
-                              return formatJSON(
-                                JSON.parse(selectedAttempt.requestInfo.body)
-                              )
-                            } catch {
-                              return selectedAttempt.requestInfo.body
-                            }
-                          })()}
-                          title={t('requests.compareBody')}
-                        />
-                        <CopyButton
-                          content={(() => {
-                            try {
-                              return formatJSON(
-                                JSON.parse(selectedAttempt.requestInfo.body)
-                              )
-                            } catch {
-                              return selectedAttempt.requestInfo.body
-                            }
-                          })()}
-                        />
-                      </div>
-                    </div>
-                    <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
-                      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Badge
-                          variant="outline"
-                          className="text-[10px] bg-card/80 backdrop-blur-sm"
-                        >
-                          JSON
-                        </Badge>
-                      </div>
-                      <pre className="text-xs font-mono text-foreground/95 whitespace-pre overflow-x-auto leading-relaxed">
-                        {(() => {
-                          try {
-                            return formatJSON(
-                              JSON.parse(selectedAttempt.requestInfo.body)
-                            )
-                          } catch {
-                            return selectedAttempt.requestInfo.body
-                          }
-                        })()}
-                      </pre>
-                    </div>
-                  </div>
-                )}
-              </div>
+              )}
             </div>
-          ) : (
-            <EmptyState message={t('requests.noRequestData')} />
-          )}
+          </div>
+        ) : (
+          <EmptyState message={t('requests.noRequestData')} />
+        )}
       </TabsContent>
 
       <TabsContent value="response" className="flex-1 overflow-hidden flex flex-col min-w-0 mt-0">
         {selectedAttempt.responseInfo ? (
-            <div className="flex-1 flex flex-col overflow-hidden p-6 gap-6 animate-fade-in min-w-0">
-              <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border shrink-0">
-                <div
-                  className={cn(
-                    'px-2 py-1 rounded text-xs font-bold font-mono',
-                    selectedAttempt.responseInfo.status >= 400
-                      ? 'bg-red-400/10 text-red-400'
-                      : 'bg-blue-400/10 text-blue-400'
-                  )}
-                >
-                  {selectedAttempt.responseInfo.status}
+          <div className="flex-1 flex flex-col overflow-hidden p-6 gap-6 animate-fade-in min-w-0">
+            <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border shrink-0">
+              <div
+                className={cn(
+                  'px-2 py-1 rounded text-xs font-bold font-mono',
+                  selectedAttempt.responseInfo.status >= 400
+                    ? 'bg-red-400/10 text-red-400'
+                    : 'bg-blue-400/10 text-blue-400',
+                )}
+              >
+                {selectedAttempt.responseInfo.status}
+              </div>
+              <span className="text-sm text-muted-foreground font-medium">Response Status</span>
+            </div>
+
+            <div className="flex flex-col min-h-0 flex-1 gap-6">
+              <div className="flex flex-col min-h-0 gap-3 flex-1">
+                <div className="flex items-center justify-between shrink-0">
+                  <h5 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
+                    <Code size={14} /> Headers
+                  </h5>
+                  <CopyButton content={formatJSON(selectedAttempt.responseInfo.headers)} />
+                </div>
+                <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
+                  <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
+                      JSON
+                    </Badge>
+                  </div>
+                  <pre className="text-xs font-mono text-foreground/90 leading-relaxed whitespace-pre overflow-x-auto">
+                    {formatJSON(selectedAttempt.responseInfo.headers)}
+                  </pre>
                 </div>
-                <span className="text-sm text-muted-foreground font-medium">
-                  Response Status
-                </span>
               </div>
 
-              <div className="flex flex-col min-h-0 flex-1 gap-6">
+              {selectedAttempt.responseInfo.body && (
                 <div className="flex flex-col min-h-0 gap-3 flex-1">
                   <div className="flex items-center justify-between shrink-0">
                     <h5 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
-                      <Code size={14} /> Headers
+                      <Database size={14} /> Body
                     </h5>
                     <CopyButton
-                      content={formatJSON(selectedAttempt.responseInfo.headers)}
-                     />
+                      content={(() => {
+                        try {
+                          return formatJSON(JSON.parse(selectedAttempt.responseInfo.body));
+                        } catch {
+                          return selectedAttempt.responseInfo.body;
+                        }
+                      })()}
+                    />
                   </div>
                   <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
                     <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Badge
-                        variant="outline"
-                        className="text-[10px] bg-card/80 backdrop-blur-sm"
-                      >
+                      <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
                         JSON
                       </Badge>
                     </div>
-                    <pre className="text-xs font-mono text-foreground/90 leading-relaxed whitespace-pre overflow-x-auto">
-                      {formatJSON(selectedAttempt.responseInfo.headers)}
+                    <pre className="text-xs font-mono text-foreground/95 whitespace-pre overflow-x-auto leading-relaxed">
+                      {(() => {
+                        try {
+                          return formatJSON(JSON.parse(selectedAttempt.responseInfo.body));
+                        } catch {
+                          return selectedAttempt.responseInfo.body;
+                        }
+                      })()}
                     </pre>
                   </div>
                 </div>
-
-                {selectedAttempt.responseInfo.body && (
-                  <div className="flex flex-col min-h-0 gap-3 flex-1">
-                    <div className="flex items-center justify-between shrink-0">
-                      <h5 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
-                        <Database size={14} /> Body
-                      </h5>
-                      <CopyButton
-                        content={(() => {
-                          try {
-                            return formatJSON(
-                              JSON.parse(selectedAttempt.responseInfo.body)
-                            )
-                          } catch {
-                            return selectedAttempt.responseInfo.body
-                          }
-                        })()}
-                      />
-                    </div>
-                    <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
-                      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Badge
-                          variant="outline"
-                          className="text-[10px] bg-card/80 backdrop-blur-sm"
-                        >
-                          JSON
-                        </Badge>
-                      </div>
-                      <pre className="text-xs font-mono text-foreground/95 whitespace-pre overflow-x-auto leading-relaxed">
-                        {(() => {
-                          try {
-                            return formatJSON(
-                              JSON.parse(selectedAttempt.responseInfo.body)
-                            )
-                          } catch {
-                            return selectedAttempt.responseInfo.body
-                          }
-                        })()}
-                      </pre>
-                    </div>
-                  </div>
-                )}
-              </div>
+              )}
             </div>
-          ) : (
-            <EmptyState message={t('requests.noResponseData')} />
-          )}
+          </div>
+        ) : (
+          <EmptyState message={t('requests.noResponseData')} />
+        )}
       </TabsContent>
 
       <TabsContent value="metadata" className="flex-1 overflow-y-auto p-6 mt-0">
         <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-              <Card className="bg-card border-border">
-                <CardHeader className="pb-2 border-b border-border/50">
-                  <CardTitle className="text-sm font-medium flex items-center gap-2">
-                    <Info size={16} className="text-info" />
-                    Attempt Info
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-4">
-                  <dl className="space-y-4">
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Attempt ID
-                      </dt>
-                      <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded select-all break-all">
-                        #{selectedAttempt.id}
-                      </dd>
-                    </div>
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Provider
-                      </dt>
-                      <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
-                        {providerMap.get(selectedAttempt.providerID) || `Provider #${selectedAttempt.providerID}`}
-                      </dd>
-                    </div>
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Request Model
-                      </dt>
-                      <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
-                        {selectedAttempt.requestModel || '-'}
-                      </dd>
-                    </div>
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Mapped Model
-                      </dt>
-                      <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
-                        {selectedAttempt.mappedModel || '-'}
-                        {selectedAttempt.mappedModel && selectedAttempt.requestModel !== selectedAttempt.mappedModel && (
-                          <span className="ml-2 text-muted-foreground text-[10px]">
-                            (converted)
-                          </span>
-                        )}
-                      </dd>
-                    </div>
-                    {selectedAttempt.responseModel && (
-                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-                        <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                          Response Model
-                        </dt>
-                        <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
-                          {selectedAttempt.responseModel}
-                          {selectedAttempt.responseModel !== selectedAttempt.mappedModel && (
-                            <span className="ml-2 text-muted-foreground text-[10px]">
-                              (upstream)
-                            </span>
-                          )}
-                        </dd>
-                      </div>
-                    )}
-                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Status
-                      </dt>
-                      <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
-                        {selectedAttempt.status}
-                      </dd>
-                    </div>
-                  </dl>
-                </CardContent>
-              </Card>
+          <Card className="bg-card border-border">
+            <CardHeader className="pb-2 border-b border-border/50">
+              <CardTitle className="text-sm font-medium flex items-center gap-2">
+                <Info size={16} className="text-info" />
+                Attempt Info
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-4">
+              <dl className="space-y-4">
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Attempt ID
+                  </dt>
+                  <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded select-all break-all">
+                    #{selectedAttempt.id}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Provider
+                  </dt>
+                  <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
+                    {providerMap.get(selectedAttempt.providerID) ||
+                      `Provider #${selectedAttempt.providerID}`}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Request Model
+                  </dt>
+                  <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
+                    {selectedAttempt.requestModel || '-'}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Mapped Model
+                  </dt>
+                  <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
+                    {selectedAttempt.mappedModel || '-'}
+                    {selectedAttempt.mappedModel &&
+                      selectedAttempt.requestModel !== selectedAttempt.mappedModel && (
+                        <span className="ml-2 text-muted-foreground text-[10px]">(converted)</span>
+                      )}
+                  </dd>
+                </div>
+                {selectedAttempt.responseModel && (
+                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+                    <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                      Response Model
+                    </dt>
+                    <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
+                      {selectedAttempt.responseModel}
+                      {selectedAttempt.responseModel !== selectedAttempt.mappedModel && (
+                        <span className="ml-2 text-muted-foreground text-[10px]">(upstream)</span>
+                      )}
+                    </dd>
+                  </div>
+                )}
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Status
+                  </dt>
+                  <dd className="sm:col-span-2 font-mono text-xs text-foreground bg-muted px-2 py-1 rounded">
+                    {selectedAttempt.status}
+                  </dd>
+                </div>
+              </dl>
+            </CardContent>
+          </Card>
 
-              <Card className="bg-card border-border">
-                <CardHeader className="pb-2 border-b border-border/50">
-                  <CardTitle className="text-sm font-medium flex items-center gap-2">
-                    <Zap size={16} className="text-warning" />
-                    Attempt Usage & Cache
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-4">
-                  <dl className="space-y-4">
-                    <div className="flex justify-between items-center border-b border-border/30 pb-2">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Input Tokens
-                      </dt>
-                      <dd className="text-sm text-foreground font-mono font-medium">
-                        {selectedAttempt.inputTokenCount.toLocaleString()}
-                      </dd>
-                    </div>
-                    <div className="flex justify-between items-center border-b border-border/30 pb-2">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Output Tokens
-                      </dt>
-                      <dd className="text-sm text-foreground font-mono font-medium">
-                        {selectedAttempt.outputTokenCount.toLocaleString()}
-                      </dd>
-                    </div>
-                    <div className="flex justify-between items-center border-b border-border/30 pb-2">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Cache Read
-                      </dt>
-                      <dd className="text-sm text-violet-400 font-mono font-medium">
-                        {selectedAttempt.cacheReadCount.toLocaleString()}
-                      </dd>
-                    </div>
-                    <div className="flex justify-between items-center border-b border-border/30 pb-2">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Cache Write
-                      </dt>
-                      <dd className="text-sm text-amber-400 font-mono font-medium">
-                        {selectedAttempt.cacheWriteCount.toLocaleString()}
-                      </dd>
-                    </div>
-                    {(selectedAttempt.cache5mWriteCount > 0 ||
-                      selectedAttempt.cache1hWriteCount > 0) && (
-                      <div className="flex justify-between items-center border-b border-border/30 pb-2 pl-4">
-                        <dt className="text-xs font-medium text-muted-foreground/70 tracking-wider">
-                          <span className="text-cyan-400/80">5m:</span>{' '}
-                          {selectedAttempt.cache5mWriteCount}
-                          <span className="mx-2">|</span>
-                          <span className="text-orange-400/80">1h:</span>{' '}
-                          {selectedAttempt.cache1hWriteCount}
-                        </dt>
-                      </div>
-                    )}
-                    <div className="flex justify-between items-center">
-                      <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                        Cost
-                      </dt>
-                      <dd className="text-sm text-blue-400 font-mono font-medium">
-                        {formatCost(selectedAttempt.cost)}
-                      </dd>
-                    </div>
-                  </dl>
-                </CardContent>
-              </Card>
-            </div>
-        </TabsContent>
-      </Tabs>
-  )
+          <Card className="bg-card border-border">
+            <CardHeader className="pb-2 border-b border-border/50">
+              <CardTitle className="text-sm font-medium flex items-center gap-2">
+                <Zap size={16} className="text-warning" />
+                Attempt Usage & Cache
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-4">
+              <dl className="space-y-4">
+                <div className="flex justify-between items-center border-b border-border/30 pb-2">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Input Tokens
+                  </dt>
+                  <dd className="text-sm text-foreground font-mono font-medium">
+                    {selectedAttempt.inputTokenCount.toLocaleString()}
+                  </dd>
+                </div>
+                <div className="flex justify-between items-center border-b border-border/30 pb-2">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Output Tokens
+                  </dt>
+                  <dd className="text-sm text-foreground font-mono font-medium">
+                    {selectedAttempt.outputTokenCount.toLocaleString()}
+                  </dd>
+                </div>
+                <div className="flex justify-between items-center border-b border-border/30 pb-2">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Cache Read
+                  </dt>
+                  <dd className="text-sm text-violet-400 font-mono font-medium">
+                    {selectedAttempt.cacheReadCount.toLocaleString()}
+                  </dd>
+                </div>
+                <div className="flex justify-between items-center border-b border-border/30 pb-2">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Cache Write
+                  </dt>
+                  <dd className="text-sm text-amber-400 font-mono font-medium">
+                    {selectedAttempt.cacheWriteCount.toLocaleString()}
+                  </dd>
+                </div>
+                {(selectedAttempt.cache5mWriteCount > 0 ||
+                  selectedAttempt.cache1hWriteCount > 0) && (
+                  <div className="flex justify-between items-center border-b border-border/30 pb-2 pl-4">
+                    <dt className="text-xs font-medium text-muted-foreground/70 tracking-wider">
+                      <span className="text-cyan-400/80">5m:</span>{' '}
+                      {selectedAttempt.cache5mWriteCount}
+                      <span className="mx-2">|</span>
+                      <span className="text-orange-400/80">1h:</span>{' '}
+                      {selectedAttempt.cache1hWriteCount}
+                    </dt>
+                  </div>
+                )}
+                <div className="flex justify-between items-center">
+                  <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Cost
+                  </dt>
+                  <dd className="text-sm text-blue-400 font-mono font-medium">
+                    {formatCost(selectedAttempt.cost)}
+                  </dd>
+                </div>
+              </dl>
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
 }
diff --git a/web/src/pages/requests/detail/RequestDetailView.tsx b/web/src/pages/requests/detail/RequestDetailView.tsx
index bbb15d35..1ee804b7 100644
--- a/web/src/pages/requests/detail/RequestDetailView.tsx
+++ b/web/src/pages/requests/detail/RequestDetailView.tsx
@@ -8,28 +8,24 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from '@/components/ui'
-import { Code, Database, Info, Zap } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import type { ProxyRequest, ClientType } from '@/lib/transport'
-import { cn } from '@/lib/utils'
-import {
-  ClientIcon,
-  getClientName,
-  getClientColor,
-} from '@/components/icons/client-icons'
-import { CopyButton, CopyAsCurlButton, EmptyState } from './components'
+} from '@/components/ui';
+import { Code, Database, Info, Zap } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { ProxyRequest, ClientType } from '@/lib/transport';
+import { cn } from '@/lib/utils';
+import { ClientIcon, getClientName, getClientColor } from '@/components/icons/client-icons';
+import { CopyButton, CopyAsCurlButton, EmptyState } from './components';
 
 interface RequestDetailViewProps {
-  request: ProxyRequest
-  activeTab: 'request' | 'response' | 'metadata'
-  setActiveTab: (tab: 'request' | 'response' | 'metadata') => void
-  formatJSON: (obj: unknown) => string
-  formatCost: (microUSD: number) => string
-  projectName?: string
-  sessionInfo?: { clientType: string; projectID: number }
-  projectMap: Map<number, string>
-  tokenName?: string
+  request: ProxyRequest;
+  activeTab: 'request' | 'response' | 'metadata';
+  setActiveTab: (tab: 'request' | 'response' | 'metadata') => void;
+  formatJSON: (obj: unknown) => string;
+  formatCost: (microUSD: number) => string;
+  projectName?: string;
+  sessionInfo?: { clientType: string; projectID: number };
+  projectMap: Map<number, string>;
+  tokenName?: string;
 }
 
 export function RequestDetailView({
@@ -43,11 +39,11 @@ export function RequestDetailView({
   projectMap,
   tokenName,
 }: RequestDetailViewProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <Tabs
       value={activeTab}
-      onValueChange={value => setActiveTab(value as typeof activeTab)}
+      onValueChange={(value) => setActiveTab(value as typeof activeTab)}
       className="flex flex-col h-full w-full min-w-0"
     >
       {/* Detail Header */}
@@ -72,9 +68,7 @@ export function RequestDetailView({
               <span className="text-text-muted">·</span>
               <span>{request.requestModel}</span>
               {request.cost > 0 && (
-                <span className="text-blue-400 font-medium">
-                  Cost: {formatCost(request.cost)}
-                </span>
+                <span className="text-blue-400 font-medium">Cost: {formatCost(request.cost)}</span>
               )}
             </div>
           </div>
@@ -95,10 +89,7 @@ export function RequestDetailView({
       </div>
 
       {/* Detail Content */}
-      <TabsContent
-        value="request"
-        className="flex-1 overflow-hidden flex flex-col min-w-0 mt-0"
-      >
+      <TabsContent value="request" className="flex-1 overflow-hidden flex flex-col min-w-0 mt-0">
         {request.requestInfo ? (
           <div className="flex-1 flex flex-col overflow-hidden p-6 gap-6 animate-fade-in min-w-0">
             <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border shrink-0">
@@ -124,10 +115,7 @@ export function RequestDetailView({
                 </div>
                 <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
                   <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Badge
-                      variant="outline"
-                      className="text-[10px] bg-card/80 backdrop-blur-sm"
-                    >
+                    <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
                       JSON
                     </Badge>
                   </div>
@@ -146,11 +134,9 @@ export function RequestDetailView({
                     <CopyButton
                       content={(() => {
                         try {
-                          return formatJSON(
-                            JSON.parse(request.requestInfo.body)
-                          )
+                          return formatJSON(JSON.parse(request.requestInfo.body));
                         } catch {
-                          return request.requestInfo.body
+                          return request.requestInfo.body;
                         }
                       })()}
                       label={t('common.copy')}
@@ -158,21 +144,16 @@ export function RequestDetailView({
                   </div>
                   <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
                     <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Badge
-                        variant="outline"
-                        className="text-[10px] bg-card/80 backdrop-blur-sm"
-                      >
+                      <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
                         JSON
                       </Badge>
                     </div>
                     <pre className="text-xs font-mono text-foreground/95 whitespace-pre overflow-x-auto leading-relaxed">
                       {(() => {
                         try {
-                          return formatJSON(
-                            JSON.parse(request.requestInfo.body)
-                          )
+                          return formatJSON(JSON.parse(request.requestInfo.body));
                         } catch {
-                          return request.requestInfo.body
+                          return request.requestInfo.body;
                         }
                       })()}
                     </pre>
@@ -186,10 +167,7 @@ export function RequestDetailView({
         )}
       </TabsContent>
 
-      <TabsContent
-        value="response"
-        className="flex-1 overflow-hidden flex flex-col min-w-0 mt-0"
-      >
+      <TabsContent value="response" className="flex-1 overflow-hidden flex flex-col min-w-0 mt-0">
         {request.responseInfo ? (
           <div className="flex-1 flex flex-col overflow-hidden p-6 gap-6 animate-fade-in min-w-0">
             <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border shrink-0">
@@ -198,14 +176,12 @@ export function RequestDetailView({
                   'px-2 py-1 rounded text-xs font-bold font-mono',
                   request.responseInfo.status >= 400
                     ? 'bg-red-400/10 text-red-400'
-                    : 'bg-blue-400/10 text-blue-400'
+                    : 'bg-blue-400/10 text-blue-400',
                 )}
               >
                 {request.responseInfo.status}
               </div>
-              <span className="text-sm text-muted-foreground font-medium">
-                Response Status
-              </span>
+              <span className="text-sm text-muted-foreground font-medium">Response Status</span>
             </div>
 
             <div className="flex flex-col min-h-0 flex-1 gap-6">
@@ -221,10 +197,7 @@ export function RequestDetailView({
                 </div>
                 <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
                   <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <Badge
-                      variant="outline"
-                      className="text-[10px] bg-card/80 backdrop-blur-sm"
-                    >
+                    <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
                       JSON
                     </Badge>
                   </div>
@@ -243,11 +216,9 @@ export function RequestDetailView({
                     <CopyButton
                       content={(() => {
                         try {
-                          return formatJSON(
-                            JSON.parse(request.responseInfo.body)
-                          )
+                          return formatJSON(JSON.parse(request.responseInfo.body));
                         } catch {
-                          return request.responseInfo.body
+                          return request.responseInfo.body;
                         }
                       })()}
                       label={t('common.copy')}
@@ -255,21 +226,16 @@ export function RequestDetailView({
                   </div>
                   <div className="flex-1 rounded-lg border border-border bg-muted/50 dark:bg-muted/30 p-4 overflow-auto shadow-inner relative group min-h-0">
                     <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Badge
-                        variant="outline"
-                        className="text-[10px] bg-card/80 backdrop-blur-sm"
-                      >
+                      <Badge variant="outline" className="text-[10px] bg-card/80 backdrop-blur-sm">
                         JSON
                       </Badge>
                     </div>
                     <pre className="text-xs font-mono text-foreground/95 whitespace-pre overflow-x-auto leading-relaxed">
                       {(() => {
                         try {
-                          return formatJSON(
-                            JSON.parse(request.responseInfo.body)
-                          )
+                          return formatJSON(JSON.parse(request.responseInfo.body));
                         } catch {
-                          return request.responseInfo.body
+                          return request.responseInfo.body;
                         }
                       })()}
                     </pre>
@@ -311,9 +277,7 @@ export function RequestDetailView({
                     </div>
                     {sessionInfo && (
                       <div className="flex items-center gap-2 mt-1 text-[10px] text-muted-foreground">
-                        <span className="capitalize">
-                          {sessionInfo.clientType}
-                        </span>
+                        <span className="capitalize">{sessionInfo.clientType}</span>
                         {sessionInfo.projectID > 0 && (
                           <>
                             <span>·</span>
@@ -411,15 +375,12 @@ export function RequestDetailView({
                     {request.cacheWriteCount.toLocaleString()}
                   </dd>
                 </div>
-                {(request.cache5mWriteCount > 0 ||
-                  request.cache1hWriteCount > 0) && (
+                {(request.cache5mWriteCount > 0 || request.cache1hWriteCount > 0) && (
                   <div className="flex justify-between items-center border-b border-border/30 pb-2 pl-4">
                     <dt className="text-xs font-medium text-muted-foreground/70 tracking-wider">
-                      <span className="text-cyan-400/80">5m:</span>{' '}
-                      {request.cache5mWriteCount}
+                      <span className="text-cyan-400/80">5m:</span> {request.cache5mWriteCount}
                       <span className="mx-2">|</span>
-                      <span className="text-orange-400/80">1h:</span>{' '}
-                      {request.cache1hWriteCount}
+                      <span className="text-orange-400/80">1h:</span> {request.cache1hWriteCount}
                     </dt>
                   </div>
                 )}
@@ -437,5 +398,5 @@ export function RequestDetailView({
         </div>
       </TabsContent>
     </Tabs>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/RequestHeader.tsx b/web/src/pages/requests/detail/RequestHeader.tsx
index e78a1add..a3fba0e2 100644
--- a/web/src/pages/requests/detail/RequestHeader.tsx
+++ b/web/src/pages/requests/detail/RequestHeader.tsx
@@ -1,44 +1,40 @@
-import { Button, Badge } from '@/components/ui'
-import { ArrowLeft } from 'lucide-react'
-import { statusVariant } from '../index'
-import type { ProxyRequest, ClientType } from '@/lib/transport'
-import {
-  ClientIcon,
-  getClientName,
-  getClientColor,
-} from '@/components/icons/client-icons'
-import { formatDuration } from '@/lib/utils'
+import { Button, Badge } from '@/components/ui';
+import { ArrowLeft } from 'lucide-react';
+import { statusVariant } from '../index';
+import type { ProxyRequest, ClientType } from '@/lib/transport';
+import { ClientIcon, getClientName, getClientColor } from '@/components/icons/client-icons';
+import { formatDuration } from '@/lib/utils';
 
 // 微美元转美元 (1 USD = 1,000,000 microUSD)
-const MICRO_USD_PER_USD = 1_000_000
+const MICRO_USD_PER_USD = 1_000_000;
 function microToUSD(microUSD: number): number {
-  return microUSD / MICRO_USD_PER_USD
+  return microUSD / MICRO_USD_PER_USD;
 }
 
 function formatCost(microUSD: number): string {
-  if (microUSD === 0) return '-'
-  const usd = microToUSD(microUSD)
-  if (usd < 0.0001) return '<$0.0001'
-  if (usd < 0.001) return `$${usd.toFixed(5)}`
-  if (usd < 0.01) return `$${usd.toFixed(4)}`
-  if (usd < 1) return `$${usd.toFixed(3)}`
-  return `$${usd.toFixed(2)}`
+  if (microUSD === 0) return '-';
+  const usd = microToUSD(microUSD);
+  if (usd < 0.0001) return '<$0.0001';
+  if (usd < 0.001) return `$${usd.toFixed(5)}`;
+  if (usd < 0.01) return `$${usd.toFixed(4)}`;
+  if (usd < 1) return `$${usd.toFixed(3)}`;
+  return `$${usd.toFixed(2)}`;
 }
 
 function formatTime(timestamp: string): string {
-  const date = new Date(timestamp)
+  const date = new Date(timestamp);
   return date.toLocaleString('en-US', {
     month: 'short',
     day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
-  })
+  });
 }
 
 interface RequestHeaderProps {
-  request: ProxyRequest
-  onBack: () => void
+  request: ProxyRequest;
+  onBack: () => void;
 }
 
 export function RequestHeader({ request, onBack }: RequestHeaderProps) {
@@ -70,32 +66,23 @@ export function RequestHeader({ request, onBack }: RequestHeaderProps) {
               <h2 className="text-lg font-semibold text-foreground tracking-tight leading-none">
                 {request.requestModel || 'Unknown Model'}
               </h2>
-              <Badge
-                variant={statusVariant[request.status]}
-                className="capitalize"
-              >
+              <Badge variant={statusVariant[request.status]} className="capitalize">
                 {request.status.toLowerCase().replace('_', ' ')}
               </Badge>
             </div>
             <div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground leading-none">
-              <span className="font-mono bg-muted px-1.5 py-0.5 rounded">
-                #{request.id}
-              </span>
+              <span className="font-mono bg-muted px-1.5 py-0.5 rounded">#{request.id}</span>
               <span>{getClientName(request.clientType as ClientType)}</span>
               <span>·</span>
               <span>{formatTime(request.startTime)}</span>
-              {request.responseModel &&
-                request.responseModel !== request.requestModel && (
-                  <>
-                    <span>·</span>
-                    <span className="text-muted-foreground">
-                      Response:{' '}
-                      <span className="text-foreground">
-                        {request.responseModel}
-                      </span>
-                    </span>
-                  </>
-                )}
+              {request.responseModel && request.responseModel !== request.requestModel && (
+                <>
+                  <span>·</span>
+                  <span className="text-muted-foreground">
+                    Response: <span className="text-foreground">{request.responseModel}</span>
+                  </span>
+                </>
+              )}
             </div>
           </div>
         </div>
@@ -116,9 +103,7 @@ export function RequestHeader({ request, onBack }: RequestHeaderProps) {
               Input
             </div>
             <div className="text-sm font-mono font-medium text-muted-foreground">
-              {request.inputTokenCount > 0
-                ? request.inputTokenCount.toLocaleString()
-                : '-'}
+              {request.inputTokenCount > 0 ? request.inputTokenCount.toLocaleString() : '-'}
             </div>
           </div>
           <div className="w-px h-8 bg-border" />
@@ -127,9 +112,7 @@ export function RequestHeader({ request, onBack }: RequestHeaderProps) {
               Output
             </div>
             <div className="text-sm font-mono font-medium text-foreground">
-              {request.outputTokenCount > 0
-                ? request.outputTokenCount.toLocaleString()
-                : '-'}
+              {request.outputTokenCount > 0 ? request.outputTokenCount.toLocaleString() : '-'}
             </div>
           </div>
           <div className="w-px h-8 bg-border" />
@@ -138,9 +121,7 @@ export function RequestHeader({ request, onBack }: RequestHeaderProps) {
               Cache Read
             </div>
             <div className="text-sm font-mono font-medium text-violet-400">
-              {request.cacheReadCount > 0
-                ? request.cacheReadCount.toLocaleString()
-                : '-'}
+              {request.cacheReadCount > 0 ? request.cacheReadCount.toLocaleString() : '-'}
             </div>
           </div>
           <div className="w-px h-8 bg-border" />
@@ -149,9 +130,7 @@ export function RequestHeader({ request, onBack }: RequestHeaderProps) {
               Cache Write
             </div>
             <div className="text-sm font-mono font-medium text-amber-400">
-              {request.cacheWriteCount > 0
-                ? request.cacheWriteCount.toLocaleString()
-                : '-'}
+              {request.cacheWriteCount > 0 ? request.cacheWriteCount.toLocaleString() : '-'}
             </div>
           </div>
           <div className="w-px h-8 bg-border" />
@@ -166,5 +145,5 @@ export function RequestHeader({ request, onBack }: RequestHeaderProps) {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/RequestSidebar.tsx b/web/src/pages/requests/detail/RequestSidebar.tsx
index fb4d9a9e..5c4eee67 100644
--- a/web/src/pages/requests/detail/RequestSidebar.tsx
+++ b/web/src/pages/requests/detail/RequestSidebar.tsx
@@ -1,65 +1,45 @@
-import { Badge } from '@/components/ui'
-import {
-  CheckCircle,
-  XCircle,
-  Loader2,
-  Ban,
-  Clock,
-  Server,
-  FileInput,
-} from 'lucide-react'
-import type {
-  ProxyUpstreamAttempt,
-  ProxyRequest,
-  ClientType,
-} from '@/lib/transport'
-import { cn, formatDuration } from '@/lib/utils'
-import { getClientName } from '@/components/icons/client-icons'
-import { useTranslation } from 'react-i18next'
+import { Badge } from '@/components/ui';
+import { CheckCircle, XCircle, Loader2, Ban, Clock, Server, FileInput } from 'lucide-react';
+import type { ProxyUpstreamAttempt, ProxyRequest, ClientType } from '@/lib/transport';
+import { cn, formatDuration } from '@/lib/utils';
+import { getClientName } from '@/components/icons/client-icons';
+import { useTranslation } from 'react-i18next';
 
 // Selection type: either the main request or an attempt
-type SelectionType =
-  | { type: 'request' }
-  | { type: 'attempt'; attemptId: number }
+type SelectionType = { type: 'request' } | { type: 'attempt'; attemptId: number };
 
 function getStatusIcon(status: string) {
   switch (status) {
     case 'COMPLETED':
-      return <CheckCircle className="h-4 w-4 text-blue-400" />
+      return <CheckCircle className="h-4 w-4 text-blue-400" />;
     case 'FAILED':
-      return <XCircle className="h-4 w-4 text-red-400" />
+      return <XCircle className="h-4 w-4 text-red-400" />;
     case 'CANCELLED':
-      return <Ban className="h-4 w-4 text-warning" />
+      return <Ban className="h-4 w-4 text-warning" />;
     case 'IN_PROGRESS':
-      return <Loader2 className="h-4 w-4 text-info animate-spin" />
+      return <Loader2 className="h-4 w-4 text-info animate-spin" />;
     default:
-      return <Clock className="h-4 w-4 text-muted-foreground" />
+      return <Clock className="h-4 w-4 text-muted-foreground" />;
   }
 }
 
-function EmptyState({
-  message,
-  icon,
-}: {
-  message: string
-  icon?: React.ReactNode
-}) {
+function EmptyState({ message, icon }: { message: string; icon?: React.ReactNode }) {
   return (
     <div className="flex flex-col items-center justify-center h-full text-muted-foreground p-12 text-center select-none">
       {icon || <Server className="h-12 w-12 mb-3 opacity-10" />}
       <p className="text-sm font-medium">{message}</p>
     </div>
-  )
+  );
 }
 
 interface RequestSidebarProps {
-  request: ProxyRequest
-  attempts: ProxyUpstreamAttempt[] | undefined
-  selection: SelectionType
-  onSelectionChange: (selection: SelectionType) => void
-  providerMap: Map<number, string>
-  projectMap: Map<number, string>
-  routeMap: Map<number, { projectID: number }>
+  request: ProxyRequest;
+  attempts: ProxyUpstreamAttempt[] | undefined;
+  selection: SelectionType;
+  onSelectionChange: (selection: SelectionType) => void;
+  providerMap: Map<number, string>;
+  projectMap: Map<number, string>;
+  routeMap: Map<number, { projectID: number }>;
 }
 
 export function RequestSidebar({
@@ -71,7 +51,7 @@ export function RequestSidebar({
   projectMap,
   routeMap,
 }: RequestSidebarProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div className="flex flex-col h-full bg-card min-w-0">
       {/* Request Section */}
@@ -88,7 +68,7 @@ export function RequestSidebar({
             'w-full text-left p-3.5 transition-all outline-none border-l-[3px] border-b border-border',
             selection.type === 'request'
               ? 'bg-accent/5 border-l-accent'
-              : 'border-l-transparent hover:bg-muted/50'
+              : 'border-l-transparent hover:bg-muted/50',
           )}
         >
           <div className="flex items-center justify-between mb-1.5">
@@ -97,9 +77,7 @@ export function RequestSidebar({
               <span
                 className={cn(
                   'text-sm font-medium transition-colors',
-                  selection.type === 'request'
-                    ? 'text-foreground'
-                    : 'text-muted-foreground'
+                  selection.type === 'request' ? 'text-foreground' : 'text-muted-foreground',
                 )}
               >
                 {getClientName(request.clientType as ClientType)} Request
@@ -111,7 +89,7 @@ export function RequestSidebar({
                   'text-[10px] font-mono px-1.5 py-0.5 rounded font-medium',
                   request.responseInfo.status >= 400
                     ? 'text-red-400 bg-red-400/10'
-                    : 'text-blue-400 bg-blue-400/10'
+                    : 'text-blue-400 bg-blue-400/10',
                 )}
               >
                 {request.responseInfo.status}
@@ -119,9 +97,7 @@ export function RequestSidebar({
             )}
           </div>
           <div className="flex items-center justify-between text-xs text-muted-foreground">
-            <span className="truncate max-w-[180px]">
-              {request.requestModel}
-            </span>
+            <span className="truncate max-w-[180px]">{request.requestModel}</span>
             <span className="font-mono opacity-70">
               {request.duration ? formatDuration(request.duration) : '-'}
             </span>
@@ -146,15 +122,12 @@ export function RequestSidebar({
               <button
                 type="button"
                 key={attempt.id}
-                onClick={() =>
-                  onSelectionChange({ type: 'attempt', attemptId: attempt.id })
-                }
+                onClick={() => onSelectionChange({ type: 'attempt', attemptId: attempt.id })}
                 className={cn(
                   'w-full text-left p-3.5 transition-all outline-none border-l-[3px]',
-                  selection.type === 'attempt' &&
-                    selection.attemptId === attempt.id
+                  selection.type === 'attempt' && selection.attemptId === attempt.id
                     ? 'bg-accent/5 border-l-accent'
-                    : 'border-l-transparent hover:bg-muted/50'
+                    : 'border-l-transparent hover:bg-muted/50',
                 )}
               >
                 <div className="flex items-center justify-between mb-1.5">
@@ -163,10 +136,9 @@ export function RequestSidebar({
                     <span
                       className={cn(
                         'text-sm font-medium transition-colors',
-                        selection.type === 'attempt' &&
-                          selection.attemptId === attempt.id
+                        selection.type === 'attempt' && selection.attemptId === attempt.id
                           ? 'text-foreground'
-                          : 'text-muted-foreground group-hover:text-foreground'
+                          : 'text-muted-foreground group-hover:text-foreground',
                       )}
                     >
                       Attempt {index + 1}
@@ -178,7 +150,7 @@ export function RequestSidebar({
                         'text-[10px] font-mono px-1.5 py-0.5 rounded font-medium',
                         attempt.responseInfo.status >= 400
                           ? 'text-red-400 bg-red-400/10'
-                          : 'text-blue-400 bg-blue-400/10'
+                          : 'text-blue-400 bg-blue-400/10',
                       )}
                     >
                       {attempt.responseInfo.status}
@@ -188,42 +160,29 @@ export function RequestSidebar({
                 <div className="flex items-center justify-between text-xs text-muted-foreground">
                   <span
                     className="flex items-center gap-1.5 truncate max-w-[140px]"
-                    title={
-                      providerMap.get(attempt.providerID) ||
-                      `Provider #${attempt.providerID}`
-                    }
+                    title={providerMap.get(attempt.providerID) || `Provider #${attempt.providerID}`}
                   >
-                    {providerMap.get(attempt.providerID) ||
-                      `Provider #${attempt.providerID}`}
+                    {providerMap.get(attempt.providerID) || `Provider #${attempt.providerID}`}
                     {(() => {
-                      const route = routeMap.get(attempt.routeID)
+                      const route = routeMap.get(attempt.routeID);
                       if (route?.projectID === 0) {
                         return (
-                          <Badge
-                            variant="outline"
-                            className="text-[9px] h-4 px-1 ml-1"
-                          >
+                          <Badge variant="outline" className="text-[9px] h-4 px-1 ml-1">
                             Global
                           </Badge>
-                        )
+                        );
                       } else if (route?.projectID) {
                         return (
-                          <Badge
-                            variant="info"
-                            className="text-[9px] h-4 px-1 ml-1"
-                          >
-                            {projectMap.get(route.projectID) ||
-                              `#${route.projectID}`}
+                          <Badge variant="info" className="text-[9px] h-4 px-1 ml-1">
+                            {projectMap.get(route.projectID) || `#${route.projectID}`}
                           </Badge>
-                        )
+                        );
                       }
-                      return null
+                      return null;
                     })()}
                   </span>
                   <span className="font-mono opacity-70">
-                    {attempt.duration > 0
-                      ? formatDuration(attempt.duration)
-                      : '-'}
+                    {attempt.duration > 0 ? formatDuration(attempt.duration) : '-'}
                   </span>
                 </div>
               </button>
@@ -234,5 +193,5 @@ export function RequestSidebar({
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/components/CopyAsCurlButton.tsx b/web/src/pages/requests/detail/components/CopyAsCurlButton.tsx
index 63608bbe..a46970e7 100644
--- a/web/src/pages/requests/detail/components/CopyAsCurlButton.tsx
+++ b/web/src/pages/requests/detail/components/CopyAsCurlButton.tsx
@@ -1,78 +1,73 @@
-import { useState } from 'react'
-import { Button } from '@/components/ui'
-import { Terminal, Check } from 'lucide-react'
-import type { RequestInfo } from '@/lib/transport'
-import { useSetting } from '@/hooks/queries'
+import { useState } from 'react';
+import { Button } from '@/components/ui';
+import { Terminal, Check } from 'lucide-react';
+import type { RequestInfo } from '@/lib/transport';
+import { useSetting } from '@/hooks/queries';
 
 interface CopyAsCurlButtonProps {
-  requestInfo: RequestInfo
+  requestInfo: RequestInfo;
 }
 
 function generateCurlCommand(requestInfo: RequestInfo, proxyPort: string): string {
-  const parts: string[] = ['curl']
+  const parts: string[] = ['curl'];
 
   // Method (default is GET, so only add if different)
   if (requestInfo.method && requestInfo.method !== 'GET') {
-    parts.push(`-X ${requestInfo.method}`)
+    parts.push(`-X ${requestInfo.method}`);
   }
 
   // Build full URL using proxy server address
-  const port = proxyPort || '9880'
-  const baseUrl = `http://localhost:${port}`
-  let fullUrl = requestInfo.url
+  const port = proxyPort || '9880';
+  const baseUrl = `http://localhost:${port}`;
+  let fullUrl = requestInfo.url;
   if (fullUrl && !fullUrl.startsWith('http://') && !fullUrl.startsWith('https://')) {
-    fullUrl = `${baseUrl}${fullUrl}`
+    fullUrl = `${baseUrl}${fullUrl}`;
   }
 
-  parts.push(`'${fullUrl}'`)
+  parts.push(`'${fullUrl}'`);
 
   // Headers
   if (requestInfo.headers) {
     for (const [key, value] of Object.entries(requestInfo.headers)) {
       // Skip some headers that curl handles automatically or are not useful
       // Also skip Host header since we're using proxy server address
-      const skipHeaders = ['content-length', 'connection', 'accept-encoding', 'host']
-      if (skipHeaders.includes(key.toLowerCase())) continue
+      const skipHeaders = ['content-length', 'connection', 'accept-encoding', 'host'];
+      if (skipHeaders.includes(key.toLowerCase())) continue;
 
       // Escape single quotes in header values
-      const escapedValue = value.replace(/'/g, "'\\''")
-      parts.push(`-H '${key}: ${escapedValue}'`)
+      const escapedValue = value.replace(/'/g, "'\\''");
+      parts.push(`-H '${key}: ${escapedValue}'`);
     }
   }
 
   // Body
   if (requestInfo.body) {
     // Escape single quotes in body
-    const escapedBody = requestInfo.body.replace(/'/g, "'\\''")
-    parts.push(`-d '${escapedBody}'`)
+    const escapedBody = requestInfo.body.replace(/'/g, "'\\''");
+    parts.push(`-d '${escapedBody}'`);
   }
 
-  return parts.join(' \\\n  ')
+  return parts.join(' \\\n  ');
 }
 
 export function CopyAsCurlButton({ requestInfo }: CopyAsCurlButtonProps) {
-  const [copied, setCopied] = useState(false)
-  const { data: settingData } = useSetting('proxy_port')
-  const proxyPort = settingData?.value || '9880'
+  const [copied, setCopied] = useState(false);
+  const { data: settingData } = useSetting('proxy_port');
+  const proxyPort = settingData?.value || '9880';
 
   const handleCopy = async () => {
     try {
-      const curlCommand = generateCurlCommand(requestInfo, proxyPort)
-      await navigator.clipboard.writeText(curlCommand)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      const curlCommand = generateCurlCommand(requestInfo, proxyPort);
+      await navigator.clipboard.writeText(curlCommand);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy:', err)
+      console.error('Failed to copy:', err);
     }
-  }
+  };
 
   return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={handleCopy}
-      className="h-6 px-2 text-[10px] gap-1"
-    >
+    <Button variant="outline" size="sm" onClick={handleCopy} className="h-6 px-2 text-[10px] gap-1">
       {copied ? (
         <>
           <Check className="h-3 w-3" />
@@ -85,5 +80,5 @@ export function CopyAsCurlButton({ requestInfo }: CopyAsCurlButtonProps) {
         </>
       )}
     </Button>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/components/CopyButton.tsx b/web/src/pages/requests/detail/components/CopyButton.tsx
index 13071e17..fc6fa4d1 100644
--- a/web/src/pages/requests/detail/components/CopyButton.tsx
+++ b/web/src/pages/requests/detail/components/CopyButton.tsx
@@ -1,34 +1,29 @@
-import { useState } from 'react'
-import { Button } from '@/components/ui'
-import { Copy, Check } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react';
+import { Button } from '@/components/ui';
+import { Copy, Check } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 interface CopyButtonProps {
-  content: string
-  label?: string
+  content: string;
+  label?: string;
 }
 
 export function CopyButton({ content, label }: CopyButtonProps) {
-  const { t } = useTranslation()
-  const [copied, setCopied] = useState(false)
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(content)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error('Failed to copy:', err)
+      console.error('Failed to copy:', err);
     }
-  }
+  };
 
   return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={handleCopy}
-      className="h-6 px-2 text-[10px] gap-1"
-    >
+    <Button variant="outline" size="sm" onClick={handleCopy} className="h-6 px-2 text-[10px] gap-1">
       {copied ? (
         <>
           <Check className="h-3 w-3" />
@@ -41,5 +36,5 @@ export function CopyButton({ content, label }: CopyButtonProps) {
         </>
       )}
     </Button>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/components/DiffButton.tsx b/web/src/pages/requests/detail/components/DiffButton.tsx
index 5ffde602..89937dae 100644
--- a/web/src/pages/requests/detail/components/DiffButton.tsx
+++ b/web/src/pages/requests/detail/components/DiffButton.tsx
@@ -1,20 +1,16 @@
-import { useState } from 'react'
-import { Button } from '@/components/ui'
-import { GitCompare } from 'lucide-react'
-import { DiffModal } from './DiffModal'
+import { useState } from 'react';
+import { Button } from '@/components/ui';
+import { GitCompare } from 'lucide-react';
+import { DiffModal } from './DiffModal';
 
 interface DiffButtonProps {
-  clientContent: string
-  upstreamContent: string
-  title: string
+  clientContent: string;
+  upstreamContent: string;
+  title: string;
 }
 
-export function DiffButton({
-  clientContent,
-  upstreamContent,
-  title,
-}: DiffButtonProps) {
-  const [isOpen, setIsOpen] = useState(false)
+export function DiffButton({ clientContent, upstreamContent, title }: DiffButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
@@ -35,5 +31,5 @@ export function DiffButton({
         rightContent={upstreamContent}
       />
     </>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/components/DiffModal.tsx b/web/src/pages/requests/detail/components/DiffModal.tsx
index 487cb8c1..251d5eb0 100644
--- a/web/src/pages/requests/detail/components/DiffModal.tsx
+++ b/web/src/pages/requests/detail/components/DiffModal.tsx
@@ -1,54 +1,47 @@
-import { useMemo, useEffect } from 'react'
-import * as Diff from 'diff'
-import { Button } from '@/components/ui'
-import { GitCompare, X } from 'lucide-react'
+import { useMemo, useEffect } from 'react';
+import * as Diff from 'diff';
+import { Button } from '@/components/ui';
+import { GitCompare, X } from 'lucide-react';
 
 interface DiffModalProps {
-  isOpen: boolean
-  onClose: () => void
-  title: string
-  leftContent: string
-  rightContent: string
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  leftContent: string;
+  rightContent: string;
 }
 
-export function DiffModal({
-  isOpen,
-  onClose,
-  title,
-  leftContent,
-  rightContent,
-}: DiffModalProps) {
+export function DiffModal({ isOpen, onClose, title, leftContent, rightContent }: DiffModalProps) {
   // Compute diff (must be before any conditional returns)
   const diffResult = useMemo(() => {
-    return Diff.diffLines(leftContent, rightContent)
-  }, [leftContent, rightContent])
+    return Diff.diffLines(leftContent, rightContent);
+  }, [leftContent, rightContent]);
 
   // Handle ESC key press
   useEffect(() => {
-    if (!isOpen) return
+    if (!isOpen) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        e.stopPropagation() // Prevent event from bubbling to parent
-        onClose()
+        e.stopPropagation(); // Prevent event from bubbling to parent
+        onClose();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handleKeyDown, { capture: true })
-    return () =>
-      window.removeEventListener('keydown', handleKeyDown, { capture: true })
-  }, [isOpen, onClose])
+    window.addEventListener('keydown', handleKeyDown, { capture: true });
+    return () => window.removeEventListener('keydown', handleKeyDown, { capture: true });
+  }, [isOpen, onClose]);
 
   // Early return AFTER all hooks
-  if (!isOpen) return null
+  if (!isOpen) return null;
 
   // Handle backdrop click
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
-      e.stopPropagation()
-      onClose()
+      e.stopPropagation();
+      onClose();
     }
-  }
+  };
 
   return (
     <div
@@ -98,28 +91,28 @@ export function DiffModal({
             {diffResult.map((part, index) => {
               const lines = part.value.split('\n').filter((line, idx, arr) => {
                 // Remove the last empty line if it exists
-                return idx < arr.length - 1 || line !== ''
-              })
+                return idx < arr.length - 1 || line !== '';
+              });
 
               return lines.map((line, lineIndex) => {
-                let bgColor = ''
-                let textColor = 'text-foreground'
-                let prefix = ' '
-                let borderColor = 'border-border/30'
+                let bgColor = '';
+                let textColor = 'text-foreground';
+                let prefix = ' ';
+                let borderColor = 'border-border/30';
 
                 if (part.added) {
-                  bgColor = 'bg-green-500/10'
-                  textColor = 'text-green-400'
-                  prefix = '+'
-                  borderColor = 'border-green-500/30'
+                  bgColor = 'bg-green-500/10';
+                  textColor = 'text-green-400';
+                  prefix = '+';
+                  borderColor = 'border-green-500/30';
                 } else if (part.removed) {
-                  bgColor = 'bg-red-500/10'
-                  textColor = 'text-red-400'
-                  prefix = '-'
-                  borderColor = 'border-red-500/30'
+                  bgColor = 'bg-red-500/10';
+                  textColor = 'text-red-400';
+                  prefix = '-';
+                  borderColor = 'border-red-500/30';
                 } else {
-                  bgColor = 'bg-card/20'
-                  textColor = 'text-muted-foreground'
+                  bgColor = 'bg-card/20';
+                  textColor = 'text-muted-foreground';
                 }
 
                 return (
@@ -127,13 +120,11 @@ export function DiffModal({
                     key={`${index}-${lineIndex}`}
                     className={`${bgColor} ${textColor} px-4 py-1 border-l-2 ${borderColor} whitespace-pre-wrap break-all leading-relaxed hover:bg-opacity-80 transition-colors`}
                   >
-                    <span className="inline-block w-4 opacity-60 select-none">
-                      {prefix}
-                    </span>
+                    <span className="inline-block w-4 opacity-60 select-none">{prefix}</span>
                     {line || ' '}
                   </div>
-                )
-              })
+                );
+              });
             })}
           </div>
         </div>
@@ -166,5 +157,5 @@ export function DiffModal({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/components/EmptyState.tsx b/web/src/pages/requests/detail/components/EmptyState.tsx
index 8d9dd6f7..34cea591 100644
--- a/web/src/pages/requests/detail/components/EmptyState.tsx
+++ b/web/src/pages/requests/detail/components/EmptyState.tsx
@@ -1,8 +1,8 @@
-import { Server } from 'lucide-react'
+import { Server } from 'lucide-react';
 
 interface EmptyStateProps {
-  message: string
-  icon?: React.ReactNode
+  message: string;
+  icon?: React.ReactNode;
 }
 
 export function EmptyState({ message, icon }: EmptyStateProps) {
@@ -11,5 +11,5 @@ export function EmptyState({ message, icon }: EmptyStateProps) {
       {icon || <Server className="h-12 w-12 mb-3 opacity-10" />}
       <p className="text-sm font-medium">{message}</p>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/requests/detail/components/index.ts b/web/src/pages/requests/detail/components/index.ts
index b24524b2..2fcae14d 100644
--- a/web/src/pages/requests/detail/components/index.ts
+++ b/web/src/pages/requests/detail/components/index.ts
@@ -1,5 +1,5 @@
-export { CopyButton } from './CopyButton'
-export { CopyAsCurlButton } from './CopyAsCurlButton'
-export { DiffModal } from './DiffModal'
-export { DiffButton } from './DiffButton'
-export { EmptyState } from './EmptyState'
+export { CopyButton } from './CopyButton';
+export { CopyAsCurlButton } from './CopyAsCurlButton';
+export { DiffModal } from './DiffModal';
+export { DiffButton } from './DiffButton';
+export { EmptyState } from './EmptyState';
diff --git a/web/src/pages/requests/index.tsx b/web/src/pages/requests/index.tsx
index 355417b5..d1bff602 100644
--- a/web/src/pages/requests/index.tsx
+++ b/web/src/pages/requests/index.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   useProxyRequests,
   useProxyRequestUpdates,
@@ -8,7 +8,7 @@ import {
   useProviders,
   useProjects,
   useAPITokens,
-} from '@/hooks/queries'
+} from '@/hooks/queries';
 import {
   Activity,
   RefreshCw,
@@ -18,9 +18,9 @@ import {
   CheckCircle,
   AlertTriangle,
   Ban,
-} from 'lucide-react'
-import type { ProxyRequest, ProxyRequestStatus } from '@/lib/transport'
-import { ClientIcon } from '@/components/icons/client-icons'
+} from 'lucide-react';
+import type { ProxyRequest, ProxyRequestStatus } from '@/lib/transport';
+import { ClientIcon } from '@/components/icons/client-icons';
 import {
   Table,
   TableBody,
@@ -30,11 +30,11 @@ import {
   TableRow,
   Badge,
   Button,
-} from '@/components/ui'
-import { cn } from '@/lib/utils'
-import { PageHeader } from '@/components/layout/page-header'
+} from '@/components/ui';
+import { cn } from '@/lib/utils';
+import { PageHeader } from '@/components/layout/page-header';
 
-const PAGE_SIZE = 50
+const PAGE_SIZE = 50;
 
 export const statusVariant: Record<
   ProxyRequestStatus,
@@ -46,67 +46,67 @@ export const statusVariant: Record<
   FAILED: 'danger',
   CANCELLED: 'warning',
   REJECTED: 'danger',
-}
+};
 
 export function RequestsPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
+  const { t } = useTranslation();
+  const navigate = useNavigate();
   // 使用游标分页：存储每页的 lastId 用于向后翻页
-  const [cursors, setCursors] = useState<(number | undefined)[]>([undefined])
-  const [pageIndex, setPageIndex] = useState(0)
+  const [cursors, setCursors] = useState<(number | undefined)[]>([undefined]);
+  const [pageIndex, setPageIndex] = useState(0);
 
-  const currentCursor = cursors[pageIndex]
+  const currentCursor = cursors[pageIndex];
   const { data, isLoading, refetch } = useProxyRequests({
     limit: PAGE_SIZE,
     before: currentCursor,
-  })
-  const { data: totalCount, refetch: refetchCount } = useProxyRequestsCount()
-  const { data: providers = [] } = useProviders()
-  const { data: projects = [] } = useProjects()
-  const { data: apiTokens = [] } = useAPITokens()
+  });
+  const { data: totalCount, refetch: refetchCount } = useProxyRequestsCount();
+  const { data: providers = [] } = useProviders();
+  const { data: projects = [] } = useProjects();
+  const { data: apiTokens = [] } = useAPITokens();
 
   // Subscribe to real-time updates
-  useProxyRequestUpdates()
+  useProxyRequestUpdates();
 
-  const requests = data?.items ?? []
-  const hasMore = data?.hasMore ?? false
+  const requests = data?.items ?? [];
+  const hasMore = data?.hasMore ?? false;
 
   // Create provider ID to name mapping
-  const providerMap = new Map(providers.map(p => [p.id, p.name]))
+  const providerMap = new Map(providers.map((p) => [p.id, p.name]));
   // Create project ID to name mapping
-  const projectMap = new Map(projects.map(p => [p.id, p.name]))
+  const projectMap = new Map(projects.map((p) => [p.id, p.name]));
   // Create API Token ID to name mapping
-  const tokenMap = new Map(apiTokens.map(t => [t.id, t.name]))
+  const tokenMap = new Map(apiTokens.map((t) => [t.id, t.name]));
 
   // 使用 totalCount
-  const total = typeof totalCount === 'number' ? totalCount : 0
+  const total = typeof totalCount === 'number' ? totalCount : 0;
 
   // 下一页
   const goToNextPage = () => {
     if (hasMore && data?.lastId) {
-      const nextCursors = [...cursors]
+      const nextCursors = [...cursors];
       if (pageIndex + 1 >= nextCursors.length) {
-        nextCursors.push(data.lastId)
+        nextCursors.push(data.lastId);
       }
-      setCursors(nextCursors)
-      setPageIndex(pageIndex + 1)
+      setCursors(nextCursors);
+      setPageIndex(pageIndex + 1);
     }
-  }
+  };
 
   // 上一页
   const goToPrevPage = () => {
     if (pageIndex > 0) {
-      setPageIndex(pageIndex - 1)
+      setPageIndex(pageIndex - 1);
     }
-  }
+  };
 
   // 刷新时重置到第一页
   const handleRefresh = () => {
-    setCursors([undefined])
-    setPageIndex(0)
-    refetch()
-    refetchCount()
-  }
+    setCursors([undefined]);
+    setPageIndex(0);
+    refetch();
+    refetchCount();
+  };
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -134,9 +134,7 @@ export function RequestsPage() {
               <Activity size={32} className="opacity-50" />
             </div>
             <p className="text-body font-medium">{t('requests.noRequests')}</p>
-            <p className="text-caption mt-1">
-              {t('requests.noRequestsHint')}
-            </p>
+            <p className="text-caption mt-1">{t('requests.noRequestsHint')}</p>
           </div>
         ) : (
           <div className="flex-1 overflow-auto">
@@ -144,22 +142,12 @@ export function RequestsPage() {
               <TableHeader className="bg-card/80 backdrop-blur-md sticky top-0 z-10 shadow-sm border-b border-border">
                 <TableRow className="hover:bg-transparent border-none text-sm">
                   <TableHead className="w-[180px] font-medium">{t('requests.time')}</TableHead>
-                  <TableHead className="w-[120px] font-medium">
-                    {t('requests.client')}
-                  </TableHead>
+                  <TableHead className="w-[120px] font-medium">{t('requests.client')}</TableHead>
                   <TableHead className="w-[180px] font-medium">{t('requests.model')}</TableHead>
-                  <TableHead className="w-[100px] font-medium">
-                    {t('requests.project')}
-                  </TableHead>
-                  <TableHead className="w-[100px] font-medium">
-                    {t('requests.token')}
-                  </TableHead>
-                  <TableHead className="w-[120px] font-medium">
-                    {t('requests.provider')}
-                  </TableHead>
-                  <TableHead className="w-[100px] font-medium">
-                    {t('common.status')}
-                  </TableHead>
+                  <TableHead className="w-[100px] font-medium">{t('requests.project')}</TableHead>
+                  <TableHead className="w-[100px] font-medium">{t('requests.token')}</TableHead>
+                  <TableHead className="w-[120px] font-medium">{t('requests.provider')}</TableHead>
+                  <TableHead className="w-[100px] font-medium">{t('common.status')}</TableHead>
                   <TableHead className="w-[60px] font-medium">{t('requests.code')}</TableHead>
                   <TableHead className="w-[80px] text-right font-medium">
                     {t('requests.duration')}
@@ -200,7 +188,7 @@ export function RequestsPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {requests.map(req => (
+                {requests.map((req) => (
                   <LogRow
                     key={req.id}
                     request={req}
@@ -219,11 +207,13 @@ export function RequestsPage() {
       {/* Pagination */}
       <div className="h-[53px] flex items-center justify-between px-6 border-t border-border bg-surface-primary shrink-0">
         <span className="text-xs text-text-secondary">
-          {total > 0 ? (
-            t('requests.pageInfo', { page: pageIndex + 1, count: requests.length, total })
-          ) : (
-            t('requests.noItems')
-          )}
+          {total > 0
+            ? t('requests.pageInfo', {
+                page: pageIndex + 1,
+                count: requests.length,
+                total,
+              })
+            : t('requests.noItems')}
         </span>
         <div className="flex items-center gap-1">
           <Button
@@ -246,12 +236,12 @@ export function RequestsPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 // Request Status Badge Component
 function RequestStatusBadge({ status }: { status: ProxyRequestStatus }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const getStatusConfig = () => {
     switch (status) {
       case 'PENDING':
@@ -259,41 +249,41 @@ function RequestStatusBadge({ status }: { status: ProxyRequestStatus }) {
           variant: 'default' as const,
           label: t('requests.status.pending'),
           icon: <Loader2 size={10} className="mr-1 shrink-0" />,
-        }
+        };
       case 'IN_PROGRESS':
         return {
           variant: 'info' as const,
           label: t('requests.status.streaming'),
           icon: <Loader2 size={10} className="mr-1 shrink-0 animate-spin" />,
-        }
+        };
       case 'COMPLETED':
         return {
           variant: 'success' as const,
           label: t('requests.status.completed'),
           icon: <CheckCircle size={10} className="mr-1 shrink-0" />,
-        }
+        };
       case 'FAILED':
         return {
           variant: 'danger' as const,
           label: t('requests.status.failed'),
           icon: <AlertTriangle size={10} className="mr-1 shrink-0" />,
-        }
+        };
       case 'CANCELLED':
         return {
           variant: 'warning' as const,
           label: t('requests.status.cancelled'),
           icon: <Ban size={10} className="mr-1 shrink-0" />,
-        }
+        };
       case 'REJECTED':
         return {
           variant: 'danger' as const,
           label: t('requests.status.rejected'),
           icon: <Ban size={10} className="mr-1 flex-shrink-0" />,
-        }
+        };
     }
-  }
+  };
 
-  const config = getStatusConfig()
+  const config = getStatusConfig();
 
   return (
     <Badge
@@ -303,62 +293,52 @@ function RequestStatusBadge({ status }: { status: ProxyRequestStatus }) {
       {config.icon}
       {config.label}
     </Badge>
-  )
+  );
 }
 
 // Token Cell Component - single value with color
 function TokenCell({ count, color }: { count: number; color: string }) {
   if (count === 0) {
-    return (
-      <span className="text-caption text-muted-foreground font-mono">-</span>
-    )
+    return <span className="text-caption text-muted-foreground font-mono">-</span>;
   }
 
   const formatTokens = (n: number) => {
-    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
-    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`
-    return n.toString()
-  }
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+    return n.toString();
+  };
 
-  return (
-    <span className={`text-xs font-mono ${color}`}>{formatTokens(count)}</span>
-  )
+  return <span className={`text-xs font-mono ${color}`}>{formatTokens(count)}</span>;
 }
 
 // 微美元转美元 (1 USD = 1,000,000 microUSD)
-const MICRO_USD_PER_USD = 1_000_000
+const MICRO_USD_PER_USD = 1_000_000;
 function microToUSD(microUSD: number): number {
-  return microUSD / MICRO_USD_PER_USD
+  return microUSD / MICRO_USD_PER_USD;
 }
 
 // Cost Cell Component (接收 microUSD)
 function CostCell({ cost }: { cost: number }) {
   if (cost === 0) {
-    return (
-      <span className="text-caption text-muted-foreground font-mono">-</span>
-    )
+    return <span className="text-caption text-muted-foreground font-mono">-</span>;
   }
 
-  const usd = microToUSD(cost)
+  const usd = microToUSD(cost);
 
   const formatCost = (c: number) => {
-    if (c < 0.001) return '<$0.001'
-    if (c < 0.01) return `$${c.toFixed(4)}`
-    if (c < 1) return `$${c.toFixed(3)}`
-    return `$${c.toFixed(2)}`
-  }
+    if (c < 0.001) return '<$0.001';
+    if (c < 0.01) return `$${c.toFixed(4)}`;
+    if (c < 1) return `$${c.toFixed(3)}`;
+    return `$${c.toFixed(2)}`;
+  };
 
   const getCostColor = (c: number) => {
-    if (c >= 0.1) return 'text-rose-400 font-medium'
-    if (c >= 0.01) return 'text-amber-400'
-    return 'text-foreground'
-  }
+    if (c >= 0.1) return 'text-rose-400 font-medium';
+    if (c >= 0.01) return 'text-amber-400';
+    return 'text-foreground';
+  };
 
-  return (
-    <span className={`text-xs font-mono ${getCostColor(usd)}`}>
-      {formatCost(usd)}
-    </span>
-  )
+  return <span className={`text-xs font-mono ${getCostColor(usd)}`}>{formatCost(usd)}</span>;
 }
 
 // Log Row Component
@@ -369,84 +349,83 @@ function LogRow({
   tokenName,
   onClick,
 }: {
-  request: ProxyRequest
-  providerName?: string
-  projectName?: string
-  tokenName?: string
-  onClick: () => void
+  request: ProxyRequest;
+  providerName?: string;
+  projectName?: string;
+  tokenName?: string;
+  onClick: () => void;
 }) {
-  const isPending =
-    request.status === 'PENDING' || request.status === 'IN_PROGRESS'
-  const isFailed = request.status === 'FAILED'
-  const [isRecent, setIsRecent] = useState(false)
+  const isPending = request.status === 'PENDING' || request.status === 'IN_PROGRESS';
+  const isFailed = request.status === 'FAILED';
+  const [isRecent, setIsRecent] = useState(false);
 
   // Live duration calculation for pending requests
-  const [liveDuration, setLiveDuration] = useState<number | null>(null)
+  const [liveDuration, setLiveDuration] = useState<number | null>(null);
 
   useEffect(() => {
     // Check if request is new (less than 5 seconds old)
-    const startTime = new Date(request.startTime).getTime()
+    const startTime = new Date(request.startTime).getTime();
     if (Date.now() - startTime < 5000) {
-      setIsRecent(true)
-      const timer = setTimeout(() => setIsRecent(false), 2000)
-      return () => clearTimeout(timer)
+      setIsRecent(true);
+      const timer = setTimeout(() => setIsRecent(false), 2000);
+      return () => clearTimeout(timer);
     }
-  }, [request.startTime])
+  }, [request.startTime]);
 
   useEffect(() => {
     if (!isPending) {
-      setLiveDuration(null)
-      return
+      setLiveDuration(null);
+      return;
     }
 
-    const startTime = new Date(request.startTime).getTime()
+    const startTime = new Date(request.startTime).getTime();
     const updateDuration = () => {
-      const now = Date.now()
-      setLiveDuration(now - startTime)
-    }
+      const now = Date.now();
+      setLiveDuration(now - startTime);
+    };
 
-    updateDuration()
-    const interval = setInterval(updateDuration, 100)
+    updateDuration();
+    const interval = setInterval(updateDuration, 100);
 
-    return () => clearInterval(interval)
-  }, [isPending, request.startTime])
+    return () => clearInterval(interval);
+  }, [isPending, request.startTime]);
 
   const formatDuration = (ns?: number | null) => {
-    if (ns === undefined || ns === null) return '-'
+    if (ns === undefined || ns === null) return '-';
     // If it's live duration (ms), convert directly to seconds
     if (isPending && liveDuration !== null) {
-      return `${(liveDuration / 1000).toFixed(1)}s`
+      return `${(liveDuration / 1000).toFixed(1)}s`;
     }
     // If it's stored duration (nanoseconds), use base formatter
     // But simplify to only show ms or seconds for list view
-    const ms = ns / 1_000_000
-    if (ms < 1000) return `${ms.toFixed(0)}ms`
-    return `${(ms / 1000).toFixed(2)}s`
-  }
+    const ms = ns / 1_000_000;
+    if (ms < 1000) return `${ms.toFixed(0)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
 
   const formatTime = (dateStr: string) => {
-    const date = new Date(dateStr)
-    const yyyy = date.getFullYear()
-    const mm = String(date.getMonth() + 1).padStart(2, '0')
-    const dd = String(date.getDate()).padStart(2, '0')
-    const HH = String(date.getHours()).padStart(2, '0')
-    const MM = String(date.getMinutes()).padStart(2, '0')
-    const SS = String(date.getSeconds()).padStart(2, '0')
-    return `${yyyy}-${mm}-${dd} ${HH}:${MM}:${SS}`
-  }
+    const date = new Date(dateStr);
+    const yyyy = date.getFullYear();
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const dd = String(date.getDate()).padStart(2, '0');
+    const HH = String(date.getHours()).padStart(2, '0');
+    const MM = String(date.getMinutes()).padStart(2, '0');
+    const SS = String(date.getSeconds()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd} ${HH}:${MM}:${SS}`;
+  };
 
   // Display duration
-  const displayDuration = isPending ? liveDuration : request.duration
+  const displayDuration = isPending ? liveDuration : request.duration;
 
   // Duration color
   const durationColor = isPending
     ? 'text-primary font-bold'
     : displayDuration && displayDuration / 1_000_000 > 5000
       ? 'text-amber-400'
-      : 'text-muted-foreground'
+      : 'text-muted-foreground';
 
   // Get HTTP status code (use denormalized field for list performance)
-  const statusCode = request.statusCode || request.responseInfo?.status
+  const statusCode = request.statusCode || request.responseInfo?.status;
 
   return (
     <TableRow
@@ -457,16 +436,13 @@ function LogRow({
         !isRecent && 'hover:bg-accent/50',
 
         // Failed state - Red left border (via shadow) and subtle red bg
-        isFailed &&
-          'bg-error/5 hover:bg-error/10 shadow-[inset_3px_0_0_0_rgba(239,68,68,0.4)]',
+        isFailed && 'bg-error/5 hover:bg-error/10 shadow-[inset_3px_0_0_0_rgba(239,68,68,0.4)]',
 
         // Active/Pending state - Blue left border + Marquee animation
         isPending && 'shadow-[inset_3px_0_0_0_#0078D4] animate-marquee-row',
 
         // New Item Flash Animation
-        isRecent &&
-          !isPending &&
-          'bg-accent/20 shadow-[inset_3px_0_0_0_#0078D4]'
+        isRecent && !isPending && 'bg-accent/20 shadow-[inset_3px_0_0_0_#0078D4]',
       )}
     >
       {/* Time */}
@@ -495,12 +471,11 @@ function LogRow({
           >
             {request.requestModel || '-'}
           </span>
-          {request.responseModel &&
-            request.responseModel !== request.requestModel && (
-              <span className="text-[10px] text-muted-foreground truncate flex items-center gap-1">
-                <span className="opacity-50">→</span> {request.responseModel}
-              </span>
-            )}
+          {request.responseModel && request.responseModel !== request.requestModel && (
+            <span className="text-[10px] text-muted-foreground truncate flex items-center gap-1">
+              <span className="opacity-50">→</span> {request.responseModel}
+            </span>
+          )}
         </div>
       </TableCell>
 
@@ -548,7 +523,7 @@ function LogRow({
               ? 'bg-red-400/10 text-red-400'
               : statusCode && statusCode >= 200 && statusCode < 300
                 ? 'bg-blue-400/10 text-blue-400'
-                : 'bg-muted text-muted-foreground'
+                : 'bg-muted text-muted-foreground',
           )}
         >
           {statusCode && statusCode > 0 ? statusCode : '-'}
@@ -600,7 +575,7 @@ function LogRow({
         <TokenCell count={request.cacheWriteCount} color="text-amber-400" />
       </TableCell>
     </TableRow>
-  )
+  );
 }
 
-export default RequestsPage
+export default RequestsPage;
diff --git a/web/src/pages/retry-configs/index.tsx b/web/src/pages/retry-configs/index.tsx
index 57fdebc4..2ae7b63f 100644
--- a/web/src/pages/retry-configs/index.tsx
+++ b/web/src/pages/retry-configs/index.tsx
@@ -1,57 +1,45 @@
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Input,
-  Badge,
-} from '@/components/ui'
-import {
-  useRetryConfigs,
-  useUpdateRetryConfig,
-  useCreateRetryConfig,
-} from '@/hooks/queries'
-import { Save, RefreshCw, AlertTriangle, ShieldCheck } from 'lucide-react'
-import type { RetryConfig } from '@/lib/transport'
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Badge } from '@/components/ui';
+import { useRetryConfigs, useUpdateRetryConfig, useCreateRetryConfig } from '@/hooks/queries';
+import { Save, RefreshCw, AlertTriangle, ShieldCheck } from 'lucide-react';
+import type { RetryConfig } from '@/lib/transport';
 
 export function RetryConfigsPage() {
-  const { t } = useTranslation()
-  const { data: configs, isLoading, refetch } = useRetryConfigs()
-  const updateConfig = useUpdateRetryConfig()
-  const createConfig = useCreateRetryConfig()
+  const { t } = useTranslation();
+  const { data: configs, isLoading, refetch } = useRetryConfigs();
+  const updateConfig = useUpdateRetryConfig();
+  const createConfig = useCreateRetryConfig();
 
-  const [defaultConfig, setDefaultConfig] = useState<RetryConfig | undefined>()
-  const [hasChanges, setHasChanges] = useState(false)
+  const [defaultConfig, setDefaultConfig] = useState<RetryConfig | undefined>();
+  const [hasChanges, setHasChanges] = useState(false);
 
   // Form state
-  const [maxRetries, setMaxRetries] = useState('3')
-  const [initialInterval, setInitialInterval] = useState('1000')
-  const [backoffRate, setBackoffRate] = useState('2')
-  const [maxInterval, setMaxInterval] = useState('30000')
+  const [maxRetries, setMaxRetries] = useState('3');
+  const [initialInterval, setInitialInterval] = useState('1000');
+  const [backoffRate, setBackoffRate] = useState('2');
+  const [maxInterval, setMaxInterval] = useState('30000');
 
   useEffect(() => {
     if (configs) {
-      const def = configs.find(c => c.isDefault)
+      const def = configs.find((c) => c.isDefault);
       if (def) {
-        setDefaultConfig(def)
+        setDefaultConfig(def);
         // Only update form if not already edited or if it's the first load
         if (!hasChanges) {
-          setMaxRetries(String(def.maxRetries))
-          setInitialInterval(String(def.initialInterval / 1_000_000))
-          setBackoffRate(String(def.backoffRate))
-          setMaxInterval(String(def.maxInterval / 1_000_000))
+          setMaxRetries(String(def.maxRetries));
+          setInitialInterval(String(def.initialInterval / 1_000_000));
+          setBackoffRate(String(def.backoffRate));
+          setMaxInterval(String(def.maxInterval / 1_000_000));
         }
       }
     }
-  }, [configs]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [configs]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleInputChange = (setter: (val: string) => void, value: string) => {
-    setter(value)
-    setHasChanges(true)
-  }
+    setter(value);
+    setHasChanges(true);
+  };
 
   const handleSave = () => {
     const data = {
@@ -61,52 +49,50 @@ export function RetryConfigsPage() {
       initialInterval: Number(initialInterval) * 1_000_000,
       backoffRate: Number(backoffRate),
       maxInterval: Number(maxInterval) * 1_000_000,
-    }
+    };
 
     if (defaultConfig) {
       updateConfig.mutate(
         { id: defaultConfig.id, data },
         {
           onSuccess: () => {
-            setHasChanges(false)
-            refetch()
+            setHasChanges(false);
+            refetch();
           },
-        }
-      )
+        },
+      );
     } else {
       // Create if doesn't exist
       createConfig.mutate(data, {
         onSuccess: () => {
-          setHasChanges(false)
-          refetch()
+          setHasChanges(false);
+          refetch();
         },
-      })
+      });
     }
-  }
+  };
 
   const handleReset = () => {
     if (defaultConfig) {
-      setMaxRetries(String(defaultConfig.maxRetries))
-      setInitialInterval(String(defaultConfig.initialInterval / 1_000_000))
-      setBackoffRate(String(defaultConfig.backoffRate))
-      setMaxInterval(String(defaultConfig.maxInterval / 1_000_000))
-      setHasChanges(false)
+      setMaxRetries(String(defaultConfig.maxRetries));
+      setInitialInterval(String(defaultConfig.initialInterval / 1_000_000));
+      setBackoffRate(String(defaultConfig.backoffRate));
+      setMaxInterval(String(defaultConfig.maxInterval / 1_000_000));
+      setHasChanges(false);
     }
-  }
+  };
 
-  const isSaving = updateConfig.isPending || createConfig.isPending
+  const isSaving = updateConfig.isPending || createConfig.isPending;
 
   if (isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="flex flex-col items-center gap-2">
           <RefreshCw className="h-8 w-8 animate-spin text-accent" />
-          <p className="text-sm text-text-secondary">
-            {t('common.loading')}
-          </p>
+          <p className="text-sm text-text-secondary">{t('common.loading')}</p>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -121,9 +107,7 @@ export function RetryConfigsPage() {
             <h2 className="text-lg font-semibold text-text-primary leading-tight">
               {t('retryConfigs.title')}
             </h2>
-            <p className="text-xs text-text-secondary">
-              {t('retryConfigs.description')}
-            </p>
+            <p className="text-xs text-text-secondary">{t('retryConfigs.description')}</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -132,11 +116,7 @@ export function RetryConfigsPage() {
               {t('retryConfigs.discardChanges')}
             </Button>
           )}
-          <Button
-            onClick={handleSave}
-            disabled={!hasChanges || isSaving}
-            className="gap-2"
-          >
+          <Button onClick={handleSave} disabled={!hasChanges || isSaving} className="gap-2">
             {isSaving ? (
               <RefreshCw className="h-4 w-4 animate-spin" />
             ) : (
@@ -186,9 +166,7 @@ export function RetryConfigsPage() {
                   <Input
                     type="number"
                     value={maxRetries}
-                    onChange={e =>
-                      handleInputChange(setMaxRetries, e.target.value)
-                    }
+                    onChange={(e) => handleInputChange(setMaxRetries, e.target.value)}
                     min="0"
                     max="10"
                     className="max-w-[120px] font-mono"
@@ -212,9 +190,7 @@ export function RetryConfigsPage() {
                     <Input
                       type="number"
                       value={initialInterval}
-                      onChange={e =>
-                        handleInputChange(setInitialInterval, e.target.value)
-                      }
+                      onChange={(e) => handleInputChange(setInitialInterval, e.target.value)}
                       min="0"
                       className="font-mono pr-12"
                     />
@@ -235,9 +211,7 @@ export function RetryConfigsPage() {
                     <Input
                       type="number"
                       value={backoffRate}
-                      onChange={e =>
-                        handleInputChange(setBackoffRate, e.target.value)
-                      }
+                      onChange={(e) => handleInputChange(setBackoffRate, e.target.value)}
                       min="1"
                       step="0.1"
                       className="font-mono pr-8"
@@ -259,9 +233,7 @@ export function RetryConfigsPage() {
                     <Input
                       type="number"
                       value={maxInterval}
-                      onChange={e =>
-                        handleInputChange(setMaxInterval, e.target.value)
-                      }
+                      onChange={(e) => handleInputChange(setMaxInterval, e.target.value)}
                       min="0"
                       className="font-mono pr-12"
                     />
@@ -275,10 +247,12 @@ export function RetryConfigsPage() {
               <div className="bg-muted/30 rounded-lg p-4 text-xs border border-border/50">
                 <div className="text-text-muted mb-3">
                   {t('retryConfigs.totalAttempts')}:{' '}
-                  <span className="text-text-primary font-semibold">
-                    {Number(maxRetries) + 1}
-                  </span>{' '}
-                  ({t('retryConfigs.initialPlusRetries', { retries: maxRetries })})
+                  <span className="text-text-primary font-semibold">{Number(maxRetries) + 1}</span>{' '}
+                  (
+                  {t('retryConfigs.initialPlusRetries', {
+                    retries: maxRetries,
+                  })}
+                  )
                 </div>
                 <div className="space-y-1 font-mono text-muted-foreground">
                   <div className="flex justify-between">
@@ -287,27 +261,25 @@ export function RetryConfigsPage() {
                       {t('retryConfigs.executeImmediately')}
                     </span>
                   </div>
-                  {Array.from(
-                    { length: Math.min(Number(maxRetries), 5) },
-                    (_, i) => {
-                      const delay = Math.min(
-                        Number(maxInterval),
-                        Number(initialInterval) *
-                          Math.pow(Number(backoffRate), i)
-                      )
-                      return (
-                        <div key={i} className="flex justify-between">
-                          <span>{t('retryConfigs.retry', { num: i + 1 })}</span>
-                          <span className="text-text-primary">
-                            {t('retryConfigs.waitMs', { ms: delay.toFixed(0) })}
-                          </span>
-                        </div>
-                      )
-                    }
-                  )}
+                  {Array.from({ length: Math.min(Number(maxRetries), 5) }, (_, i) => {
+                    const delay = Math.min(
+                      Number(maxInterval),
+                      Number(initialInterval) * Math.pow(Number(backoffRate), i),
+                    );
+                    return (
+                      <div key={i} className="flex justify-between">
+                        <span>{t('retryConfigs.retry', { num: i + 1 })}</span>
+                        <span className="text-text-primary">
+                          {t('retryConfigs.waitMs', { ms: delay.toFixed(0) })}
+                        </span>
+                      </div>
+                    );
+                  })}
                   {Number(maxRetries) > 5 && (
                     <div className="text-text-muted">
-                      {t('retryConfigs.moreRetries', { count: Number(maxRetries) - 5 })}
+                      {t('retryConfigs.moreRetries', {
+                        count: Number(maxRetries) - 5,
+                      })}
                     </div>
                   )}
                 </div>
@@ -317,5 +289,5 @@ export function RetryConfigsPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/routes/form.tsx b/web/src/pages/routes/form.tsx
index 59a4bb87..5a82ca05 100644
--- a/web/src/pages/routes/form.tsx
+++ b/web/src/pages/routes/form.tsx
@@ -1,66 +1,54 @@
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button, Input } from '@/components/ui'
-import {
-  useCreateRoute,
-  useUpdateRoute,
-  useProviders,
-  useProjects,
-} from '@/hooks/queries'
-import type { ClientType, Route } from '@/lib/transport'
-import { ModelMappingEditor } from '@/pages/providers/components/model-mapping-editor'
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Input } from '@/components/ui';
+import { useCreateRoute, useUpdateRoute, useProviders, useProjects } from '@/hooks/queries';
+import type { ClientType, Route } from '@/lib/transport';
+import { ModelMappingEditor } from '@/pages/providers/components/model-mapping-editor';
 
 interface RouteFormProps {
-  route?: Route
-  onClose: () => void
-  isGlobal?: boolean
-  projectId?: number
+  route?: Route;
+  onClose: () => void;
+  isGlobal?: boolean;
+  projectId?: number;
 }
 
-export function RouteForm({
-  route,
-  onClose,
-  isGlobal,
-  projectId,
-}: RouteFormProps) {
-  const { t } = useTranslation()
-  const createRoute = useCreateRoute()
-  const updateRoute = useUpdateRoute()
-  const { data: providers } = useProviders()
-  const { data: projects } = useProjects()
-  const isEditing = !!route
+export function RouteForm({ route, onClose, isGlobal, projectId }: RouteFormProps) {
+  const { t } = useTranslation();
+  const createRoute = useCreateRoute();
+  const updateRoute = useUpdateRoute();
+  const { data: providers } = useProviders();
+  const { data: projects } = useProjects();
+  const isEditing = !!route;
 
-  const [clientType, setClientType] = useState<ClientType>('openai')
-  const [providerID, setProviderID] = useState('')
-  const [projectID, setProjectID] = useState(
-    projectId !== undefined ? String(projectId) : '0'
-  )
-  const [position, setPosition] = useState('1')
-  const [isEnabled, setIsEnabled] = useState(true)
-  const [modelMapping, setModelMapping] = useState<Record<string, string>>({})
+  const [clientType, setClientType] = useState<ClientType>('openai');
+  const [providerID, setProviderID] = useState('');
+  const [projectID, setProjectID] = useState(projectId !== undefined ? String(projectId) : '0');
+  const [position, setPosition] = useState('1');
+  const [isEnabled, setIsEnabled] = useState(true);
+  const [modelMapping, setModelMapping] = useState<Record<string, string>>({});
 
   useEffect(() => {
     if (route) {
-      setClientType(route.clientType)
-      setProviderID(String(route.providerID))
-      setProjectID(String(route.projectID))
-      setPosition(String(route.position))
-      setIsEnabled(route.isEnabled)
-      setModelMapping(route.modelMapping || {})
+      setClientType(route.clientType);
+      setProviderID(String(route.providerID));
+      setProjectID(String(route.projectID));
+      setPosition(String(route.position));
+      setIsEnabled(route.isEnabled);
+      setModelMapping(route.modelMapping || {});
     }
-  }, [route])
+  }, [route]);
 
   // Lock projectID for global routes or when projectId is provided
   useEffect(() => {
     if (isGlobal) {
-      setProjectID('0')
+      setProjectID('0');
     } else if (projectId !== undefined) {
-      setProjectID(String(projectId))
+      setProjectID(String(projectId));
     }
-  }, [isGlobal, projectId])
+  }, [isGlobal, projectId]);
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
 
     const data = {
       clientType,
@@ -71,17 +59,17 @@ export function RouteForm({
       isNative: route?.isNative ?? false, // 手动创建的 Route 默认为转换路由
       retryConfigID: route?.retryConfigID ?? 0,
       modelMapping: Object.keys(modelMapping).length > 0 ? modelMapping : undefined,
-    }
+    };
 
     if (isEditing) {
-      updateRoute.mutate({ id: route.id, data }, { onSuccess: () => onClose() })
+      updateRoute.mutate({ id: route.id, data }, { onSuccess: () => onClose() });
     } else {
-      createRoute.mutate(data, { onSuccess: () => onClose() })
+      createRoute.mutate(data, { onSuccess: () => onClose() });
     }
-  }
+  };
 
-  const isPending = createRoute.isPending || updateRoute.isPending
-  const showProjectSelector = !isGlobal && projectId === undefined
+  const isPending = createRoute.isPending || updateRoute.isPending;
+  const showProjectSelector = !isGlobal && projectId === undefined;
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
@@ -90,7 +78,7 @@ export function RouteForm({
           <label className="mb-1 block text-sm font-medium">{t('routes.form.clientType')}</label>
           <select
             value={clientType}
-            onChange={e => setClientType(e.target.value as ClientType)}
+            onChange={(e) => setClientType(e.target.value as ClientType)}
             className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
           >
             <option value="claude">{t('clientRoutes.claude')}</option>
@@ -103,12 +91,12 @@ export function RouteForm({
           <label className="mb-1 block text-sm font-medium">{t('routes.form.provider')}</label>
           <select
             value={providerID}
-            onChange={e => setProviderID(e.target.value)}
+            onChange={(e) => setProviderID(e.target.value)}
             required
             className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
           >
             <option value="">{t('routes.form.selectProvider')}</option>
-            {providers?.map(p => (
+            {providers?.map((p) => (
               <option key={p.id} value={p.id}>
                 {p.name}
               </option>
@@ -123,11 +111,11 @@ export function RouteForm({
             <label className="mb-1 block text-sm font-medium">{t('routes.form.project')}</label>
             <select
               value={projectID}
-              onChange={e => setProjectID(e.target.value)}
+              onChange={(e) => setProjectID(e.target.value)}
               className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs focus:border-ring focus:ring-2 focus:ring-ring/50 outline-none"
             >
               <option value="0">{t('routes.form.globalProjects')}</option>
-              {projects?.map(p => (
+              {projects?.map((p) => (
                 <option key={p.id} value={p.id}>
                   {p.name}
                 </option>
@@ -136,13 +124,11 @@ export function RouteForm({
           </div>
         )}
         <div>
-          <label className="mb-1 block text-sm font-medium">
-            {t('routes.form.position')}
-          </label>
+          <label className="mb-1 block text-sm font-medium">{t('routes.form.position')}</label>
           <Input
             type="number"
             value={position}
-            onChange={e => setPosition(e.target.value)}
+            onChange={(e) => setPosition(e.target.value)}
             min="1"
             required
           />
@@ -151,17 +137,9 @@ export function RouteForm({
 
       {/* Model Mapping (route-level override) */}
       <div>
-        <label className="mb-1 block text-sm font-medium">
-          {t('routes.form.modelMapping')}
-        </label>
-        <p className="mb-2 text-xs text-text-secondary">
-          {t('routes.form.modelMappingHelp')}
-        </p>
-        <ModelMappingEditor
-          value={modelMapping}
-          onChange={setModelMapping}
-          disabled={isPending}
-        />
+        <label className="mb-1 block text-sm font-medium">{t('routes.form.modelMapping')}</label>
+        <p className="mb-2 text-xs text-text-secondary">{t('routes.form.modelMappingHelp')}</p>
+        <ModelMappingEditor value={modelMapping} onChange={setModelMapping} disabled={isPending} />
       </div>
 
       <div className="flex items-center gap-2">
@@ -169,7 +147,7 @@ export function RouteForm({
           type="checkbox"
           id="isEnabled"
           checked={isEnabled}
-          onChange={e => setIsEnabled(e.target.checked)}
+          onChange={(e) => setIsEnabled(e.target.checked)}
           className="h-4 w-4 rounded border-gray-300"
         />
         <label htmlFor="isEnabled" className="text-sm font-medium">
@@ -186,5 +164,5 @@ export function RouteForm({
         </Button>
       </div>
     </form>
-  )
+  );
 }
diff --git a/web/src/pages/routes/index.tsx b/web/src/pages/routes/index.tsx
index 00a7951f..598be4c1 100644
--- a/web/src/pages/routes/index.tsx
+++ b/web/src/pages/routes/index.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   Card,
@@ -13,43 +13,43 @@ import {
   TableHeader,
   TableRow,
   Badge,
-} from '@/components/ui'
-import { useRoutes, useDeleteRoute, useProviders } from '@/hooks/queries'
-import { Plus, Trash2, Pencil, Route as RouteIcon } from 'lucide-react'
-import { RouteForm } from './form'
-import type { Route } from '@/lib/transport'
-import { PageHeader } from '@/components/layout/page-header'
+} from '@/components/ui';
+import { useRoutes, useDeleteRoute, useProviders } from '@/hooks/queries';
+import { Plus, Trash2, Pencil, Route as RouteIcon } from 'lucide-react';
+import { RouteForm } from './form';
+import type { Route } from '@/lib/transport';
+import { PageHeader } from '@/components/layout/page-header';
 
 export function RoutesPage() {
-  const { t } = useTranslation()
-  const { data: routes, isLoading } = useRoutes()
-  const { data: providers } = useProviders()
-  const deleteRoute = useDeleteRoute()
-  const [showForm, setShowForm] = useState(false)
-  const [editingRoute, setEditingRoute] = useState<Route | undefined>()
+  const { t } = useTranslation();
+  const { data: routes, isLoading } = useRoutes();
+  const { data: providers } = useProviders();
+  const deleteRoute = useDeleteRoute();
+  const [showForm, setShowForm] = useState(false);
+  const [editingRoute, setEditingRoute] = useState<Route | undefined>();
 
   // Filter to only show global routes (projectID = 0)
-  const globalRoutes = routes?.filter(route => route.projectID === 0) ?? []
+  const globalRoutes = routes?.filter((route) => route.projectID === 0) ?? [];
 
   const getProviderName = (providerId: number) => {
-    return providers?.find(p => p.id === providerId)?.name ?? `#${providerId}`
-  }
+    return providers?.find((p) => p.id === providerId)?.name ?? `#${providerId}`;
+  };
 
   const handleEdit = (route: Route) => {
-    setEditingRoute(route)
-    setShowForm(true)
-  }
+    setEditingRoute(route);
+    setShowForm(true);
+  };
 
   const handleCloseForm = () => {
-    setShowForm(false)
-    setEditingRoute(undefined)
-  }
+    setShowForm(false);
+    setEditingRoute(undefined);
+  };
 
   const handleDelete = (id: number) => {
     if (confirm(t('routes.deleteConfirm'))) {
-      deleteRoute.mutate(id)
+      deleteRoute.mutate(id);
     }
-  }
+  };
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -72,11 +72,7 @@ export function RoutesPage() {
               <CardTitle>{editingRoute ? t('routes.editRoute') : t('routes.newRoute')}</CardTitle>
             </CardHeader>
             <CardContent>
-              <RouteForm
-                route={editingRoute}
-                onClose={handleCloseForm}
-                isGlobal
-              />
+              <RouteForm route={editingRoute} onClose={handleCloseForm} isGlobal />
             </CardContent>
           </Card>
         )}
@@ -101,30 +97,22 @@ export function RoutesPage() {
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {globalRoutes.map(route => (
+                  {globalRoutes.map((route) => (
                     <TableRow key={route.id}>
                       <TableCell className="font-mono">{route.id}</TableCell>
                       <TableCell>
                         <Badge variant="info">{route.clientType}</Badge>
                       </TableCell>
                       <TableCell>{getProviderName(route.providerID)}</TableCell>
-                      <TableCell className="font-mono">
-                        {route.position}
-                      </TableCell>
+                      <TableCell className="font-mono">{route.position}</TableCell>
                       <TableCell>
-                        <Badge
-                          variant={route.isEnabled ? 'success' : 'default'}
-                        >
+                        <Badge variant={route.isEnabled ? 'success' : 'default'}>
                           {route.isEnabled ? t('common.enabled') : t('common.disabled')}
                         </Badge>
                       </TableCell>
                       <TableCell>
                         <div className="flex gap-1">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleEdit(route)}
-                          >
+                          <Button variant="ghost" size="sm" onClick={() => handleEdit(route)}>
                             <Pencil className="h-4 w-4" />
                           </Button>
                           <Button
@@ -141,10 +129,7 @@ export function RoutesPage() {
                   ))}
                   {globalRoutes.length === 0 && (
                     <TableRow>
-                      <TableCell
-                        colSpan={6}
-                        className="text-center text-muted-foreground"
-                      >
+                      <TableCell colSpan={6} className="text-center text-muted-foreground">
                         {t('routes.noRoutes')}
                       </TableCell>
                     </TableRow>
@@ -156,5 +141,5 @@ export function RoutesPage() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/routing-strategies/index.tsx b/web/src/pages/routing-strategies/index.tsx
index 7d43fde2..b2461547 100644
--- a/web/src/pages/routing-strategies/index.tsx
+++ b/web/src/pages/routing-strategies/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState } from 'react';
 import {
   Button,
   Card,
@@ -12,81 +12,76 @@ import {
   TableHeader,
   TableRow,
   Badge,
-} from '@/components/ui'
+} from '@/components/ui';
 import {
   useRoutingStrategies,
   useCreateRoutingStrategy,
   useUpdateRoutingStrategy,
   useDeleteRoutingStrategy,
   useProjects,
-} from '@/hooks/queries'
-import { Plus, Trash2, Pencil } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import type { RoutingStrategy, RoutingStrategyType } from '@/lib/transport'
+} from '@/hooks/queries';
+import { Plus, Trash2, Pencil } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { RoutingStrategy, RoutingStrategyType } from '@/lib/transport';
 
 export function RoutingStrategiesPage() {
-  const { t } = useTranslation()
-  const { data: strategies, isLoading } = useRoutingStrategies()
-  const { data: projects } = useProjects()
-  const createStrategy = useCreateRoutingStrategy()
-  const updateStrategy = useUpdateRoutingStrategy()
-  const deleteStrategy = useDeleteRoutingStrategy()
-  const [showForm, setShowForm] = useState(false)
-  const [editingStrategy, setEditingStrategy] = useState<
-    RoutingStrategy | undefined
-  >()
+  const { t } = useTranslation();
+  const { data: strategies, isLoading } = useRoutingStrategies();
+  const { data: projects } = useProjects();
+  const createStrategy = useCreateRoutingStrategy();
+  const updateStrategy = useUpdateRoutingStrategy();
+  const deleteStrategy = useDeleteRoutingStrategy();
+  const [showForm, setShowForm] = useState(false);
+  const [editingStrategy, setEditingStrategy] = useState<RoutingStrategy | undefined>();
 
-  const [projectID, setProjectID] = useState('0')
-  const [type, setType] = useState<RoutingStrategyType>('priority')
+  const [projectID, setProjectID] = useState('0');
+  const [type, setType] = useState<RoutingStrategyType>('priority');
 
   const resetForm = () => {
-    setProjectID('0')
-    setType('priority')
-  }
+    setProjectID('0');
+    setType('priority');
+  };
 
   const handleEdit = (strategy: RoutingStrategy) => {
-    setEditingStrategy(strategy)
-    setProjectID(String(strategy.projectID))
-    setType(strategy.type)
-    setShowForm(true)
-  }
+    setEditingStrategy(strategy);
+    setProjectID(String(strategy.projectID));
+    setType(strategy.type);
+    setShowForm(true);
+  };
 
   const handleCloseForm = () => {
-    setShowForm(false)
-    setEditingStrategy(undefined)
-    resetForm()
-  }
+    setShowForm(false);
+    setEditingStrategy(undefined);
+    resetForm();
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     const data = {
       projectID: Number(projectID),
       type,
       config: null,
-    }
+    };
 
     if (editingStrategy) {
-      updateStrategy.mutate(
-        { id: editingStrategy.id, data },
-        { onSuccess: handleCloseForm }
-      )
+      updateStrategy.mutate({ id: editingStrategy.id, data }, { onSuccess: handleCloseForm });
     } else {
-      createStrategy.mutate(data, { onSuccess: handleCloseForm })
+      createStrategy.mutate(data, { onSuccess: handleCloseForm });
     }
-  }
+  };
 
   const handleDelete = (id: number) => {
     if (confirm('Are you sure you want to delete this strategy?')) {
-      deleteStrategy.mutate(id)
+      deleteStrategy.mutate(id);
     }
-  }
+  };
 
   const getProjectName = (pid: number) => {
-    if (pid === 0) return t('common.global')
-    return projects?.find(p => p.id === pid)?.name ?? `#${pid}`
-  }
+    if (pid === 0) return t('common.global');
+    return projects?.find((p) => p.id === pid)?.name ?? `#${pid}`;
+  };
 
-  const isPending = createStrategy.isPending || updateStrategy.isPending
+  const isPending = createStrategy.isPending || updateStrategy.isPending;
 
   return (
     <div className="space-y-6">
@@ -102,25 +97,21 @@ export function RoutingStrategiesPage() {
         <Card>
           <CardHeader>
             <CardTitle>
-              {editingStrategy
-                ? 'Edit Routing Strategy'
-                : 'New Routing Strategy'}
+              {editingStrategy ? 'Edit Routing Strategy' : 'New Routing Strategy'}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="grid gap-4 md:grid-cols-2">
                 <div>
-                  <label className="mb-1 block text-sm font-medium">
-                    Project
-                  </label>
+                  <label className="mb-1 block text-sm font-medium">Project</label>
                   <select
                     value={projectID}
-                    onChange={e => setProjectID(e.target.value)}
+                    onChange={(e) => setProjectID(e.target.value)}
                     className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs focus:border-ring focus:ring-2 focus:ring-ring/50 outline-none"
                   >
                     <option value="0">Global</option>
-                    {projects?.map(p => (
+                    {projects?.map((p) => (
                       <option key={p.id} value={p.id}>
                         {p.name}
                       </option>
@@ -131,9 +122,7 @@ export function RoutingStrategiesPage() {
                   <label className="mb-1 block text-sm font-medium">Type</label>
                   <select
                     value={type}
-                    onChange={e =>
-                      setType(e.target.value as RoutingStrategyType)
-                    }
+                    onChange={(e) => setType(e.target.value as RoutingStrategyType)}
                     className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs focus:border-ring focus:ring-2 focus:ring-ring/50 outline-none"
                   >
                     <option value="priority">Priority (by position)</option>
@@ -142,11 +131,7 @@ export function RoutingStrategiesPage() {
                 </div>
               </div>
               <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={handleCloseForm}
-                >
+                <Button type="button" variant="outline" onClick={handleCloseForm}>
                   {t('common.cancel')}
                 </Button>
                 <Button type="submit" disabled={isPending}>
@@ -180,24 +165,16 @@ export function RoutingStrategiesPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {strategies?.map(strategy => (
+                {strategies?.map((strategy) => (
                   <TableRow key={strategy.id}>
                     <TableCell className="font-mono">{strategy.id}</TableCell>
                     <TableCell>
-                      <span
-                        className={
-                          strategy.projectID === 0 ? 'text-gray-400' : ''
-                        }
-                      >
+                      <span className={strategy.projectID === 0 ? 'text-gray-400' : ''}>
                         {getProjectName(strategy.projectID)}
                       </span>
                     </TableCell>
                     <TableCell>
-                      <Badge
-                        variant={
-                          strategy.type === 'priority' ? 'info' : 'warning'
-                        }
-                      >
+                      <Badge variant={strategy.type === 'priority' ? 'info' : 'warning'}>
                         {strategy.type === 'priority'
                           ? t('routingStrategies.priority')
                           : t('routingStrategies.weightedRandom')}
@@ -205,11 +182,7 @@ export function RoutingStrategiesPage() {
                     </TableCell>
                     <TableCell>
                       <div className="flex gap-1">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleEdit(strategy)}
-                        >
+                        <Button variant="ghost" size="sm" onClick={() => handleEdit(strategy)}>
                           <Pencil className="h-4 w-4" />
                         </Button>
                         <Button
@@ -226,10 +199,7 @@ export function RoutingStrategiesPage() {
                 ))}
                 {(!strategies || strategies.length === 0) && (
                   <TableRow>
-                    <TableCell
-                      colSpan={4}
-                      className="text-center text-gray-500"
-                    >
+                    <TableCell colSpan={4} className="text-center text-gray-500">
                       No strategies
                     </TableCell>
                   </TableRow>
@@ -240,5 +210,5 @@ export function RoutingStrategiesPage() {
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/web/src/pages/sessions.tsx b/web/src/pages/sessions.tsx
index ce247393..e6bde582 100644
--- a/web/src/pages/sessions.tsx
+++ b/web/src/pages/sessions.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Badge,
   Button,
@@ -11,13 +11,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
-import {
-  useSessions,
-  useProjects,
-  useUpdateSessionProject,
-} from '@/hooks/queries'
+} from '@/components/ui';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { useSessions, useProjects, useUpdateSessionProject } from '@/hooks/queries';
 import {
   LayoutDashboard,
   Loader2,
@@ -27,19 +23,19 @@ import {
   Check,
   AlertCircle,
   FolderOpen,
-} from 'lucide-react'
-import type { Session } from '@/lib/transport'
-import { cn } from '@/lib/utils'
-import { ClientIcon } from '@/components/icons/client-icons'
+} from 'lucide-react';
+import type { Session } from '@/lib/transport';
+import { cn } from '@/lib/utils';
+import { ClientIcon } from '@/components/icons/client-icons';
 
 export function SessionsPage() {
-  const { t } = useTranslation()
-  const { data: sessions, isLoading } = useSessions()
-  const { data: projects } = useProjects()
-  const [selectedSession, setSelectedSession] = useState<Session | null>(null)
+  const { t } = useTranslation();
+  const { data: sessions, isLoading } = useSessions();
+  const { data: projects } = useProjects();
+  const [selectedSession, setSelectedSession] = useState<Session | null>(null);
 
   // Create project ID to name mapping
-  const projectMap = new Map(projects?.map(p => [p.id, p.name]) ?? [])
+  const projectMap = new Map(projects?.map((p) => [p.id, p.name]) ?? []);
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -74,9 +70,7 @@ export function SessionsPage() {
                     <TableHead className="w-[60px] text-text-secondary">
                       {t('sessions.client')}
                     </TableHead>
-                    <TableHead className="text-text-secondary">
-                      {t('sessions.sessionId')}
-                    </TableHead>
+                    <TableHead className="text-text-secondary">{t('sessions.sessionId')}</TableHead>
                     <TableHead className="w-[150px] text-text-secondary">
                       {t('sessions.project')}
                     </TableHead>
@@ -86,7 +80,7 @@ export function SessionsPage() {
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {sessions?.map(session => (
+                  {sessions?.map((session) => (
                     <TableRow
                       key={session.id}
                       className="border-border hover:bg-accent cursor-pointer transition-colors"
@@ -100,10 +94,7 @@ export function SessionsPage() {
                         </div>
                       </TableCell>
                       <TableCell className="font-mono text-xs text-foreground">
-                        <span
-                          className="truncate max-w-[300px] block"
-                          title={session.sessionID}
-                        >
+                        <span className="truncate max-w-[300px] block" title={session.sessionID}>
                           {session.sessionID}
                         </span>
                       </TableCell>
@@ -114,8 +105,7 @@ export function SessionsPage() {
                           </span>
                         ) : (
                           <Badge variant="default" className="text-xs">
-                            {projectMap.get(session.projectID) ??
-                              `#${session.projectID}`}
+                            {projectMap.get(session.projectID) ?? `#${session.projectID}`}
                           </Badge>
                         )}
                       </TableCell>
@@ -126,10 +116,7 @@ export function SessionsPage() {
                   ))}
                   {(!sessions || sessions.length === 0) && (
                     <TableRow>
-                      <TableCell
-                        colSpan={4}
-                        className="h-32 text-center text-muted-foreground"
-                      >
+                      <TableCell colSpan={4} className="h-32 text-center text-muted-foreground">
                         <div className="flex flex-col items-center justify-center gap-2">
                           <Calendar className="h-8 w-8 opacity-20" />
                           <p>{t('sessions.noSessions')}</p>
@@ -151,53 +138,49 @@ export function SessionsPage() {
         onClose={() => setSelectedSession(null)}
       />
     </div>
-  )
+  );
 }
 
 interface SessionDetailModalProps {
-  session: Session | null
-  projects: { id: number; name: string }[]
-  onClose: () => void
+  session: Session | null;
+  projects: { id: number; name: string }[];
+  onClose: () => void;
 }
 
-function SessionDetailModal({
-  session,
-  projects,
-  onClose,
-}: SessionDetailModalProps) {
-  const { t } = useTranslation()
-  const [selectedProjectId, setSelectedProjectId] = useState<number>(0)
-  const updateSessionProject = useUpdateSessionProject()
+function SessionDetailModal({ session, projects, onClose }: SessionDetailModalProps) {
+  const { t } = useTranslation();
+  const [selectedProjectId, setSelectedProjectId] = useState<number>(0);
+  const updateSessionProject = useUpdateSessionProject();
 
   // Reset selected project when session changes
   useEffect(() => {
     if (session) {
-      setSelectedProjectId(session.projectID)
+      setSelectedProjectId(session.projectID);
     }
-  }, [session])
+  }, [session]);
 
   const handleSave = async () => {
-    if (!session) return
+    if (!session) return;
     try {
       await updateSessionProject.mutateAsync({
         sessionID: session.sessionID,
         projectID: selectedProjectId,
-      })
-      onClose()
+      });
+      onClose();
     } catch (error) {
-      console.error('Failed to update session project:', error)
+      console.error('Failed to update session project:', error);
     }
-  }
+  };
 
-  const hasChanges = session ? selectedProjectId !== session.projectID : false
+  const hasChanges = session ? selectedProjectId !== session.projectID : false;
 
-  if (!session) return null
+  if (!session) return null;
 
   return (
-    <Dialog open={!!session} onOpenChange={open => !open && onClose()}>
+    <Dialog open={!!session} onOpenChange={(open) => !open && onClose()}>
       <DialogContent
         showCloseButton={false}
-        className="overflow-hidden p-0 w-full max-w-[32rem] bg-card"
+        className="overflow-hidden p-0 w-full max-w-lg bg-card"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-border">
@@ -258,14 +241,14 @@ function SessionDetailModal({
                   'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all',
                   selectedProjectId === 0
                     ? 'border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/25'
-                    : 'border-border bg-muted text-text-secondary hover:bg-accent'
+                    : 'border-border bg-muted text-text-secondary hover:bg-accent',
                 )}
               >
                 <X size={14} />
                 <span>{t('sessions.unassigned')}</span>
               </button>
               {/* Project options */}
-              {projects.map(project => (
+              {projects.map((project) => (
                 <button
                   key={project.id}
                   type="button"
@@ -274,7 +257,7 @@ function SessionDetailModal({
                     'flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all',
                     selectedProjectId === project.id
                       ? 'border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/25'
-                      : 'border-border bg-muted text-text-primary hover:bg-accent'
+                      : 'border-border bg-muted text-text-primary hover:bg-accent',
                   )}
                 >
                   <FolderOpen size={14} />
@@ -282,9 +265,7 @@ function SessionDetailModal({
                 </button>
               ))}
             </div>
-            <p className="text-[10px] text-text-muted mt-2">
-              {t('sessions.projectBindingHint')}
-            </p>
+            <p className="text-[10px] text-text-muted mt-2">{t('sessions.projectBindingHint')}</p>
           </div>
 
           {/* Update result info */}
@@ -292,7 +273,9 @@ function SessionDetailModal({
             <div className="flex items-center gap-2 text-xs text-emerald-400 bg-emerald-400/10 px-3 py-2 rounded-md">
               <Check size={14} />
               <span>
-                {t('sessions.updatedRequests', { count: updateSessionProject.data.updatedRequests })}
+                {t('sessions.updatedRequests', {
+                  count: updateSessionProject.data.updatedRequests,
+                })}
               </span>
             </div>
           )}
@@ -313,10 +296,7 @@ function SessionDetailModal({
           <Button
             onClick={handleSave}
             disabled={!hasChanges || updateSessionProject.isPending}
-            className={cn(
-              'min-w-[100px]',
-              hasChanges && 'bg-accent hover:bg-accent-hover'
-            )}
+            className={cn('min-w-[100px]', hasChanges && 'bg-accent hover:bg-accent-hover')}
           >
             {updateSessionProject.isPending ? (
               <Loader2 size={14} className="animate-spin" />
@@ -327,5 +307,5 @@ function SessionDetailModal({
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/web/src/pages/settings/index.tsx b/web/src/pages/settings/index.tsx
index 95d0ed99..6dd04654 100644
--- a/web/src/pages/settings/index.tsx
+++ b/web/src/pages/settings/index.tsx
@@ -1,23 +1,15 @@
-import { useState, useEffect } from 'react'
-import { Settings, Moon, Sun, Monitor, Laptop, FolderOpen, Database } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { useTheme } from '@/components/theme-provider'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Input,
-  Switch,
-} from '@/components/ui'
-import { PageHeader } from '@/components/layout/page-header'
-import { useSettings, useUpdateSetting } from '@/hooks/queries'
+import { useState, useEffect } from 'react';
+import { Settings, Moon, Sun, Monitor, Laptop, FolderOpen, Database } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '@/components/theme-provider';
+import { Card, CardContent, CardHeader, CardTitle, Button, Input, Switch } from '@/components/ui';
+import { PageHeader } from '@/components/layout/page-header';
+import { useSettings, useUpdateSetting } from '@/hooks/queries';
 
-type Theme = 'light' | 'dark' | 'system'
+type Theme = 'light' | 'dark' | 'system';
 
 export function SettingsPage() {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-col h-full bg-background">
@@ -36,23 +28,23 @@ export function SettingsPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 function GeneralSection() {
-  const { theme, setTheme } = useTheme()
-  const { t, i18n } = useTranslation()
+  const { theme, setTheme } = useTheme();
+  const { t, i18n } = useTranslation();
 
   const themes: { value: Theme; label: string; icon: typeof Sun }[] = [
     { value: 'light', label: t('settings.theme.light'), icon: Sun },
     { value: 'dark', label: t('settings.theme.dark'), icon: Moon },
     { value: 'system', label: t('settings.theme.system'), icon: Laptop },
-  ]
+  ];
 
   const languages = [
     { value: 'en', label: t('settings.languages.en') },
     { value: 'zh', label: t('settings.languages.zh') },
-  ]
+  ];
 
   return (
     <Card className="border-border bg-card">
@@ -98,63 +90,64 @@ function GeneralSection() {
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function DataRetentionSection() {
-  const { data: settings, isLoading } = useSettings()
-  const updateSetting = useUpdateSetting()
-  const { t } = useTranslation()
+  const { data: settings, isLoading } = useSettings();
+  const updateSetting = useUpdateSetting();
+  const { t } = useTranslation();
 
-  const requestRetentionDays = settings?.request_retention_days ?? '7'
-  const statsRetentionDays = settings?.stats_retention_days ?? '30'
+  const requestRetentionDays = settings?.request_retention_days ?? '7';
+  const statsRetentionDays = settings?.stats_retention_days ?? '30';
 
-  const [requestDraft, setRequestDraft] = useState('')
-  const [statsDraft, setStatsDraft] = useState('')
-  const [initialized, setInitialized] = useState(false)
+  const [requestDraft, setRequestDraft] = useState('');
+  const [statsDraft, setStatsDraft] = useState('');
+  const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
     if (!isLoading && !initialized) {
-      setRequestDraft(requestRetentionDays)
-      setStatsDraft(statsRetentionDays)
-      setInitialized(true)
+      setRequestDraft(requestRetentionDays);
+      setStatsDraft(statsRetentionDays);
+      setInitialized(true);
     }
-  }, [isLoading, initialized, requestRetentionDays, statsRetentionDays])
+  }, [isLoading, initialized, requestRetentionDays, statsRetentionDays]);
 
   useEffect(() => {
     if (initialized) {
-      setRequestDraft(requestRetentionDays)
+      setRequestDraft(requestRetentionDays);
     }
-  }, [requestRetentionDays, initialized])
+  }, [requestRetentionDays, initialized]);
 
   useEffect(() => {
     if (initialized) {
-      setStatsDraft(statsRetentionDays)
+      setStatsDraft(statsRetentionDays);
     }
-  }, [statsRetentionDays, initialized])
+  }, [statsRetentionDays, initialized]);
 
-  const hasChanges = initialized && (requestDraft !== requestRetentionDays || statsDraft !== statsRetentionDays)
+  const hasChanges =
+    initialized && (requestDraft !== requestRetentionDays || statsDraft !== statsRetentionDays);
 
   const handleSave = async () => {
-    const requestNum = parseInt(requestDraft, 10)
-    const statsNum = parseInt(statsDraft, 10)
+    const requestNum = parseInt(requestDraft, 10);
+    const statsNum = parseInt(statsDraft, 10);
 
     if (!isNaN(requestNum) && requestNum >= 0 && requestDraft !== requestRetentionDays) {
       await updateSetting.mutateAsync({
         key: 'request_retention_days',
         value: requestDraft,
-      })
+      });
     }
 
     if (!isNaN(statsNum) && statsNum >= 0 && statsDraft !== statsRetentionDays) {
       await updateSetting.mutateAsync({
         key: 'stats_retention_days',
         value: statsDraft,
-      })
+      });
     }
-  }
+  };
 
-  if (isLoading || !initialized) return null
+  if (isLoading || !initialized) return null;
 
   return (
     <Card className="border-border bg-card">
@@ -167,11 +160,7 @@ function DataRetentionSection() {
             </CardTitle>
             <p className="text-xs text-muted-foreground mt-1">{t('settings.retentionDaysHint')}</p>
           </div>
-          <Button
-            onClick={handleSave}
-            disabled={!hasChanges || updateSetting.isPending}
-            size="sm"
-          >
+          <Button onClick={handleSave} disabled={!hasChanges || updateSetting.isPending} size="sm">
             {updateSetting.isPending ? t('common.saving') : t('common.save')}
           </Button>
         </div>
@@ -185,7 +174,7 @@ function DataRetentionSection() {
             <Input
               type="number"
               value={requestDraft}
-              onChange={e => setRequestDraft(e.target.value)}
+              onChange={(e) => setRequestDraft(e.target.value)}
               className="w-24"
               min={0}
               disabled={updateSetting.isPending}
@@ -199,7 +188,7 @@ function DataRetentionSection() {
             <Input
               type="number"
               value={statsDraft}
-              onChange={e => setStatsDraft(e.target.value)}
+              onChange={(e) => setStatsDraft(e.target.value)}
               className="w-24"
               min={0}
               disabled={updateSetting.isPending}
@@ -209,35 +198,35 @@ function DataRetentionSection() {
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
 
 function ForceProjectSection() {
-  const { data: settings, isLoading } = useSettings()
-  const updateSetting = useUpdateSetting()
-  const { t } = useTranslation()
+  const { data: settings, isLoading } = useSettings();
+  const updateSetting = useUpdateSetting();
+  const { t } = useTranslation();
 
-  const forceProjectEnabled = settings?.force_project_binding === 'true'
-  const timeout = settings?.force_project_timeout || '30'
+  const forceProjectEnabled = settings?.force_project_binding === 'true';
+  const timeout = settings?.force_project_timeout || '30';
 
   const handleToggle = async (checked: boolean) => {
     await updateSetting.mutateAsync({
       key: 'force_project_binding',
       value: checked ? 'true' : 'false',
-    })
-  }
+    });
+  };
 
   const handleTimeoutChange = async (value: string) => {
-    const numValue = parseInt(value, 10)
+    const numValue = parseInt(value, 10);
     if (numValue >= 5 && numValue <= 300) {
       await updateSetting.mutateAsync({
         key: 'force_project_timeout',
         value: value,
-      })
+      });
     }
-  }
+  };
 
-  if (isLoading) return null
+  if (isLoading) return null;
 
   return (
     <Card className="border-border bg-card">
@@ -272,7 +261,7 @@ function ForceProjectSection() {
             <Input
               type="number"
               value={timeout}
-              onChange={e => handleTimeoutChange(e.target.value)}
+              onChange={(e) => handleTimeoutChange(e.target.value)}
               className="w-24"
               min={5}
               max={300}
@@ -283,7 +272,7 @@ function ForceProjectSection() {
         )}
       </CardContent>
     </Card>
-  )
+  );
 }
 
-export default SettingsPage
+export default SettingsPage;
diff --git a/web/src/pages/stats/index.tsx b/web/src/pages/stats/index.tsx
index 5237f2c1..de1a8b23 100644
--- a/web/src/pages/stats/index.tsx
+++ b/web/src/pages/stats/index.tsx
@@ -61,16 +61,19 @@ function aggregateByHour(stats: UsageStats[] | undefined, timeRange: TimeRange)
   const now = new Date();
   const isHourly = timeRange === '24h';
   const pointsToShow = timeRange === '24h' ? 24 : timeRange === '7d' ? 7 : 30;
-  const timeMap = new Map<string, {
-    hour: string;
-    successful: number;
-    failed: number;
-    inputTokens: number;
-    outputTokens: number;
-    cacheRead: number;
-    cacheWrite: number;
-    cost: number;
-  }>();
+  const timeMap = new Map<
+    string,
+    {
+      hour: string;
+      successful: number;
+      failed: number;
+      inputTokens: number;
+      outputTokens: number;
+      cacheRead: number;
+      cacheWrite: number;
+      cost: number;
+    }
+  >();
 
   // 生成时间键的辅助函数（使用本地时间）
   const getTimeKey = (date: Date, hourly: boolean): string => {
@@ -170,14 +173,14 @@ function formatNumber(value: number): string {
     // >= 1M
     const formatted = value / 1000000;
     return absValue >= 10000000
-      ? `${Math.round(formatted)}M`  // >= 10M: 不显示小数
-      : `${formatted.toFixed(1)}M`;   // < 10M: 显示 1 位小数
+      ? `${Math.round(formatted)}M` // >= 10M: 不显示小数
+      : `${formatted.toFixed(1)}M`; // < 10M: 显示 1 位小数
   } else if (absValue >= 1000) {
     // >= 1K
     const formatted = value / 1000;
     return absValue >= 10000
-      ? `${Math.round(formatted)}K`   // >= 10K: 不显示小数
-      : `${formatted.toFixed(1)}K`;    // < 10K: 显示 1 位小数
+      ? `${Math.round(formatted)}K` // >= 10K: 不显示小数
+      : `${formatted.toFixed(1)}K`; // < 10K: 显示 1 位小数
   } else {
     // < 1K: 显示原数字
     return Math.round(value).toString();
@@ -246,7 +249,10 @@ export function StatsPage() {
             onChange={setProviderId}
             options={[
               { value: 'all', label: t('stats.allProviders') },
-              ...(providers?.map((p) => ({ value: String(p.id), label: p.name })) || []),
+              ...(providers?.map((p) => ({
+                value: String(p.id),
+                label: p.name,
+              })) || []),
             ]}
           />
           <FilterSelect
@@ -255,7 +261,10 @@ export function StatsPage() {
             onChange={setProjectId}
             options={[
               { value: 'all', label: t('stats.allProjects') },
-              ...(projects?.map((p) => ({ value: String(p.id), label: p.name })) || []),
+              ...(projects?.map((p) => ({
+                value: String(p.id),
+                label: p.name,
+              })) || []),
             ]}
           />
           <FilterSelect
@@ -276,19 +285,18 @@ export function StatsPage() {
             onChange={setApiTokenId}
             options={[
               { value: 'all', label: t('stats.allTokens') },
-              ...(apiTokens?.map((t) => ({ value: String(t.id), label: t.name })) || []),
+              ...(apiTokens?.map((t) => ({
+                value: String(t.id),
+                label: t.name,
+              })) || []),
             ]}
           />
         </div>
 
         {isLoading ? (
-          <div className="text-center text-muted-foreground py-8">
-            {t('common.loading')}
-          </div>
+          <div className="text-center text-muted-foreground py-8">{t('common.loading')}</div>
         ) : chartData.length === 0 ? (
-          <div className="text-center text-muted-foreground py-8">
-            {t('common.noData')}
-          </div>
+          <div className="text-center text-muted-foreground py-8">{t('common.noData')}</div>
         ) : (
           <Card className="flex flex-col flex-1 min-h-0">
             <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
@@ -302,26 +310,76 @@ export function StatsPage() {
               </Tabs>
             </CardHeader>
             <CardContent className="flex-1 min-h-0 overflow-x-auto">
-              <div style={{ minWidth: `${Math.max(chartData.length * 60, 600)}px`, height: '100%' }}>
+              <div
+                style={{
+                  minWidth: `${Math.max(chartData.length * 60, 600)}px`,
+                  height: '100%',
+                }}
+              >
                 <ResponsiveContainer width="100%" height="100%">
                   <BarChart data={chartData}>
                     <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                     <XAxis dataKey="hour" className="text-xs" />
-                    <YAxis className="text-xs" tickFormatter={chartView === 'cost' ? formatCost : formatNumber} />
-                    <Tooltip formatter={(value) => chartView === 'cost' ? formatCost(value as number) : formatNumber(value as number)} />
+                    <YAxis
+                      className="text-xs"
+                      tickFormatter={chartView === 'cost' ? formatCost : formatNumber}
+                    />
+                    <Tooltip
+                      formatter={(value) =>
+                        chartView === 'cost'
+                          ? formatCost(value as number)
+                          : formatNumber(value as number)
+                      }
+                    />
                     <Legend />
                     {chartView === 'requests' && (
                       <>
-                        <Bar dataKey="successful" name={t('stats.successful')} stackId="a" fill="#22c55e" barSize={40} />
-                        <Bar dataKey="failed" name={t('stats.failed')} stackId="a" fill="#ef4444" barSize={40} />
+                        <Bar
+                          dataKey="successful"
+                          name={t('stats.successful')}
+                          stackId="a"
+                          fill="#22c55e"
+                          barSize={40}
+                        />
+                        <Bar
+                          dataKey="failed"
+                          name={t('stats.failed')}
+                          stackId="a"
+                          fill="#ef4444"
+                          barSize={40}
+                        />
                       </>
                     )}
                     {chartView === 'tokens' && (
                       <>
-                        <Bar dataKey="inputTokens" name={t('stats.inputTokens')} stackId="a" fill="#3b82f6" barSize={40} />
-                        <Bar dataKey="outputTokens" name={t('stats.outputTokens')} stackId="a" fill="#8b5cf6" barSize={40} />
-                        <Bar dataKey="cacheRead" name={t('stats.cacheRead')} stackId="a" fill="#22c55e" barSize={40} />
-                        <Bar dataKey="cacheWrite" name={t('stats.cacheWrite')} stackId="a" fill="#f59e0b" barSize={40} />
+                        <Bar
+                          dataKey="inputTokens"
+                          name={t('stats.inputTokens')}
+                          stackId="a"
+                          fill="#3b82f6"
+                          barSize={40}
+                        />
+                        <Bar
+                          dataKey="outputTokens"
+                          name={t('stats.outputTokens')}
+                          stackId="a"
+                          fill="#8b5cf6"
+                          barSize={40}
+                        />
+                        <Bar
+                          dataKey="cacheRead"
+                          name={t('stats.cacheRead')}
+                          stackId="a"
+                          fill="#22c55e"
+                          barSize={40}
+                        />
+                        <Bar
+                          dataKey="cacheWrite"
+                          name={t('stats.cacheWrite')}
+                          stackId="a"
+                          fill="#f59e0b"
+                          barSize={40}
+                        />
                       </>
                     )}
                     {chartView === 'cost' && (
diff --git a/web/src/types/sidebar.ts b/web/src/types/sidebar.ts
new file mode 100644
index 00000000..0b985446
--- /dev/null
+++ b/web/src/types/sidebar.ts
@@ -0,0 +1,52 @@
+import type { LucideIcon } from 'lucide-react';
+
+/**
+ * Standard menu item with navigation link
+ */
+export interface StandardMenuItem {
+  type: 'standard';
+  key: string;
+  to: string;
+  icon: LucideIcon;
+  labelKey: string;
+  activeMatch?: 'exact' | 'startsWith'; // Default: 'startsWith'
+}
+
+/**
+ * Custom menu item with React component
+ */
+export interface CustomMenuItem {
+  type: 'custom';
+  key: string;
+  component: React.ComponentType;
+}
+
+/**
+ * Dynamic section that generates multiple items
+ */
+export interface DynamicSectionMenuItem {
+  type: 'dynamic-section';
+  key: string;
+  generator: () => React.ReactNode;
+}
+
+/**
+ * Union type for all menu item types
+ */
+export type MenuItem = StandardMenuItem | CustomMenuItem | DynamicSectionMenuItem;
+
+/**
+ * Sidebar section grouping menu items
+ */
+export interface SidebarSection {
+  key: string;
+  titleKey?: string; // Translation key for section title
+  items: MenuItem[];
+}
+
+/**
+ * Root sidebar configuration
+ */
+export interface SidebarConfig {
+  sections: SidebarSection[];
+}